Tutorial Blog for Stylish Blogger

Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS

Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.

Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.

Your ads here!!!

Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

▼ ▲

Sticky Bar with jQuery Plugin

9 Komentar

Menengok blog sobat Beben kayaknya dia keseng-sem sama trik ;)) Membuat garis lurus tipis transparan dengan posisi fixed dibawah. Biar cantik mungkin dikasih line lempeng² macam entuh :"> Karena Beben Koben si bloglang anu ganteng kalem tea ini selalu mementingkan gaya dalam hal trik apapun juga, maka cekarang cama eikeh dikacih deh yang gaya punya buat garis lurus fixed bottom dan bisa transparan jiga discroll kebawah, lalu bisa ditutup juga b-) \m/ Tentunya dengan bantuan jQuery tercintah duong :x yg sering kita panggil jQuery plugin :P Pokonya mah fungkeh coy...cek get dot

View Live demo
How bro and bri, are you like that with "Sticky Trending Bar Using jQuery And CSS" You want get that!!! Don't move your channel, panteungin terus blog full stylish ini. Mari kita acak-acak cara dan memasukan kedalam blogspot :-"

jQuery Plugin

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
(function() {
//settings
var fadeSpeed = 300, fadeTo = 0.5, topDistance = 30;
var sibar = function() { $('#stickybar').fadeTo(fadeSpeed,1); }, stbar = function() { $('#stickybar').fadeTo(fadeSpeed,fadeTo); };
var inside = false;
//do
$(window).scroll(function() {
position = $(window).scrollTop();
if(position > topDistance && !inside) {
//add mouseover events
stbar();
$('#stickybar').bind('mouseenter',sibar);
$('#stickybar').bind('mouseleave',stbar);
inside = true;
}
});
//close
$('#closebtn').live('click', function(event) {
$('#stickybar').toggle('show');
});
})();
});
//]]>
</script>

Letakin script plugin tersebut dibawah script jQuery inti →

, kalau mau mencoba bisa sobat letakin diatas tag </body>

Kode CSS

#stickybar {
background: #333;
font-size: 15px;
color: #FFF;
padding: 10px 20px;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
width: 100%;
text-align: center;
}
#stickybar a {
color: #FFF;
text-decoration: none;
}
#stickybar a:hover {
color: red;
}
#closebtn {
background: #333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidOSYInzoWGFpMMuDlDJLbnJEqtf15MVNHlPTzVmO3qp5VLNax00nLAeSF7rylbv-KKJmwsEffnYNx3-G7113BFWeLmf5X8GeAhQluVKZ554fesgXAtc351TwwfRECfQ-Xu48ZJwkEvGQ/s1600/close.png') no-repeat center center;
border: none;
margin-left: 5px;
position: absolute;
width: 20px;
height: 20px;
cursor: pointer;
}

Tauk dong harus dimana memasukan kode CSS pada basis blogspot, yaaa benar sekali diatas genteng =)) </b:skin>

Kode HTML

<div id='stickybar'>



This is Demo for Sticky trending Bar <a href='your add url here'>Your title goes here</a>



<input type="button" id="closebtn" />



</div>

Masukin didalam tag <body> template. Awas jangan bentrok ama penutup tag lainnya ;))

SAVE!

Enjoy it my broder moy4n, you now have the great sticky bar with jQuery plugin on your blog. Come else blogger, put it too in your blog b-)
Resource by: .
Happy sticky \m/

▼ ▲

Gado-Gado Blogger

6 Komentar

Dalam memberikan judul artikel Beben Koben si bloglang anu ganteng kalem tea suka sedikit kebelinger sob. Jadi ya asal jeplak saja kasih title sebuah postingan. Tapi bukan tidak berbobot loh isi artikelnya :D , dan beberapa postingan aneh yang mungkin saja mencengangkan isinya ;))
Kenapa Beben suka begitu!!! Karena dalam berwalking kesana kemari tak ayal ada saja yg dicomot tutorial lalu dikumpulkan dulu, jadi banyak end belon dipostingkan bro? Layaknya kali ini, mau share jejak² hasil comotan artikel dari web/blog yg entah dimana keberadaannya :D

Jurus-jurus kali ini tidak jauh kok sob, cara pemasangan standard, paling banter yaaa via Add a Gadget ► HTML/Javascript.

Javascript Watch

Jam dengan 11 negara berbeda. Gadget type method added.

<table border="0" width="200" cellspacing="0" cellpadding="3">
<form name="where">
<tr>
<td width="100%">
<select name="city" size="1" onchange="updateclock(this);">
<option value="" selected />Local time
<option value="0" />London GMT
<option value="1" />Rome
<option value="7" />Bangkok
<option value="8" />Hong Kong
<option value="9" />Tokyo
<option value="10" />Sydney
<option value="12" />Fiji
<option value="-10" />Hawaii
<option value="-8" />San Francisco
<option value="-5" />New York
<option value="-3" />Buenos Aires
</select>
</td>
</tr>

<tr>
<td width="100%">
<script language="JavaScript">
/*
Drop Down World Clock- By Learn iran
Portions of code by Kurt @ http://www.webloger.5u.com/
Repost by @ http://beben-koben.blogspot.com/
This credit notice must stay intact
*/

if (document.all||document.getElementById)
document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br>')

zone=0;
isitlocal=true;
ampm='';

function updateclock(z){
zone=z.options[z.selectedIndex].value;
isitlocal=(z.options[0].selected)?true:false;
}

function WorldClock(){
now=new Date();
ofst=now.getTimezoneOffset()/60;
secs=now.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=now.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;
if (hr < 0) hr+=24;
if (hr > 23) hr-=24;
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();

hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2

var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;
if (document.all)
worldclock.innerHTML=finaltime
else if (document.getElementById)
document.getElementById("worldclock").innerHTML=finaltime
else if (document.layers){
document.worldclockns.document.worldclockns2.document.write(finaltime)
document.worldclockns.document.worldclockns2.document.close()
}

setTimeout('WorldClock()',1000);
}

window.onload=WorldClock
//-->
</script>


<ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer>

</td>
</tr>
</form>
</table>

Kalo jam dan tanggal lokal begini kodenya Click here expand

<table><tbody>
<tr> <td><script type="text/javascript">

</script> | </td><td><div id="jam">
<script language="javascript">
function jam(){
var waktu = new Date();
var jam = waktu.getHours();
var menit = waktu.getMinutes();
var detik = waktu.getSeconds();
if (jam < 10){
jam = "0" + jam;
}
if (menit < 10){
menit = "0" + menit;
}
if (detik < 10){
detik = "0" + detik;
}
var jam_div = document.getElementById('jam');
jam_div.innerHTML = jam + ":" + menit + ":" + detik;
setTimeout("jam()", 1000);
}
jam();
</script></div>
</td>
</tr>
</tbody></table>

Random Post Widget

Menampilkan postingan secara acak.

<div id="RandomPost" style="text-align:center"></div>
<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Get Try Random Post'; document.getElementById('RandomPost').appendChild(a); } </script>
<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

Gantilah tulisan Get Try Random Post sesuai selera.

Float Javascript

Membuat satu tampilan yg dapat ditutup kembali dengan menggunakan javascript (Resource by: ) Disini Beben memasukan cbox yg ditampilinnya gan...

<style>
#float-X {
background-color: #555;
border: 3px solid #666;
top: 5px;
padding: 5px;
position: fixed;
right: 5px;
width: 275px;
z-index: 1;
}
#float-X a {
text-align:center;
display: block;
color: red;
font-weight: bold;
}
</style>

<div id="float-X">

<div id="cboxdiv" style="text-align: center; line-height: 0">
<iframe frameborder="0" width="275" height="305" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" id="cboxmain"></iframe><iframe frameborder="0" width="275" height="80" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px"></iframe>
</div>

<a href="javascript:void(0);" onclick="document.getElementById('float-X').style.display='none';">CLOSE</a>
</div>

Ganti cboxnya & sesuaikan deh lebar, tinggi, warna latar dll.

Show/Hide with jQuery Plugin

Sama dengan float javascript fungsinya, tapi ini menggunakan jQuery plugins.

<style>
#notification {
width: 350px;
height: 391px;
position: absolute;
top: 5px;
right: 5px;
padding:5px;
background: #debe94;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
display: none;
}

#notification #close {
display: block;
width: 30px;
height: 30px;
text-indent: -1000em;
background: url(http://dev.css-zibaldone.com/onwebdev/post/jquery-gmail/close.png) no-repeat 0 0;
position: absolute;
bottom: -3px;
left: -1px;
}
</style>


<div id="notification">
<a href="#" id="close">Close</a>

<iframe frameborder="0" width="350" height="305" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" id="cboxmain"></iframe>
<iframe frameborder="0" width="100%" height="80" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px"></iframe>

</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></script>

<script type="text/javascript">
   $(function() {

       function notifyEmail() {

           var $notification = $('#notification');
           var $close = $('#close', '#notification');

           $close.click(function(event) {

               $notification.fadeOut(500);
               event.preventDefault();
           });

           $notification.fadeIn(500, function() {

           });


       }

       setTimeout(notifyEmail, 1000);


   });
</script>

Ganti frame cboxnya, hostingkan gambar close ke hosting sobat masing², script warna biru jika sudah ada jangan dipasang lagi, lebar, tinggi warna etc seting suka2.
Dah jangan banyak-banyak nanti muntah :-&
Happy gado-gado \m/

▼ ▲

Mercedes-Benz Mobil Mewah Terbaik Indonesia

17 Komentar

Mercedes-Benz adalah satu nama jaminan merk dagang mobil mewah, dengan dukungan technology high class, team solid, terbukti bahwa merupakan perusahaan mobil tertua dalam bidangnya, maka pantaslah menjadi mobil terbaik di Indonesia ini. Bermula dengan nama Daimler Chrysler dikenal juga sebagai Daimler-Benz hingga sampai sekarang khalayak luas mengenalnya dengan nama Mercedes-Benz b-)
Mercedes-Benz dalam setiap mengeluarkan mobil baru andalannya selalu mengusung kepada kenyamanan konsumen dengan kemanjaan fitur berkelas sehingga tak salah motto "" layak disandang.

Ketangguhan mesin produk merk mersi (kalangan umum bicara) dapat ditengok pada jenis bus. Lihat saja bergelimpangan bus antar kota antar propinsi mempercayakan mesinnya kepada Mercedes :-" Di kelas MPV nongol jagoan dengan nama Viano AMBIENTE, serta tidak kurang 14 class (A-Class, B-Class, C-Class, E-Class, M-Class, R-Class, S-Class, SL-Class, SLK-Class, CL-Class, CLS-Class, G-Class, GL-Class, and SLS AMG) ditawarkan kepada calon pemakainya ;)
Canda gurau kalangan badung bicara Beben Koben si bloglang anu ganteng kalem tea :D

Jika bermain ke tempat hiburan malam, end banyak cewek-cewek genitnya! Din..din..din japanese klakson berbunyi, keluar cewek genit 2 orang dengan gaya genitnya. Din...din germany klakson berdering...satu lusin cewek genit berdatangan :)) Suara klakson saja sudah menandakan class boo :)) :)>-Just Beben joke's

Tidak diragukan lagi memang . Hanya dengan memandang gambar mobilnya saja sudah terasa luxury didalam mobil tersebut, wait finish loading this blog and try it (click image) for feel in dashboard mercedes

Apalagi kesampaian mempunyai mobil itu, yaaa kalau disuruh milih mah kepengen SLS AMG ;)) :"> tariiikkk jabriiig ~~kumis kali jabrig~~!!!

Peluk hangat >:D< dari Beben Koben untuk Mercédès putri Emil Jellinek :x

Contoh mobil mercedes-benz gaya punya

1 2 3 4 5 6 7

Berikut fanpage mercedes-benz di facebook

Bagi sobat blogger, ayuk ikutan kontes SEO-nya jangan baca sajah, siapa tauk kalian yang beruntung SEO Olympic Mercedes Benz 2011!
Salam mercedes benz \m/

▼ ▲

Widget Blogwalking Lebih Mudah

15 Komentar

▼ ▲

Ringkasan JSON Menjadi Beginih!!!

17 Komentar

Kumpulan blogger berikut emang gaya punya , dengan menampilkan postingan yang berbobot euy :-bd Sobat tidak asing lagi dengan fasilitas JSON! Sobat kita Vagabundia telah membuat satu terobosan dengan penggunaan fitur JASON tersebut guna menjadi sebuah arsip, ditambah page navigation dengan tampilan ringkasan beserta thumbnail b-)
So, link jason dipadukan dengan link blog dihasilkan karya cipta "Ringkasan masukan dengan pagination menggunakan JSON" Utuh dalam satu postingan yg mana bisa kita jadikan kolom archive dengan menjadikan post static page ;) ;)) Pertama-tama memang sedikit bingung, lalu Beben Koben si bloglang anu ganteng kalem tea langsung menuju DEMO dan diacak-acak deh sampai bisa :D

Screenshot Demo Original Screenshot Demo Practice

Apabila sobat bisa mempraktekan dengan gaya pencipta silahkan langsung saja. Tapi jika roaming dengan segala macam kendala yg ada mari kita lanjutkan acara selanjutnya :P

Bumbu-bumbu

Kode CSS sama Beben diminimalis, silahkan variasikan sendiri variabel CSS diatas. Script yg diberi warna biru ialah gambar default jika nanti pada postingan tidak ada gambar. Script warna merah ganti dengan URL blog sobat. Masukan kesemuanya itu dengan metode Add a Gadget ► HTML/Javascript

Buatlah satu postingan baru. Disinilah kunci dari generated hasil bumbu² diatas itu (Make a New Post) Buatlah kata-kata pembuka sesuka hati, jangan terlalu banyak dan bertele-tele :D Kemudian masukan kode HTML ini kedalam postingan...

<div id="resultados"></div>
<div style="clear:both;"></div>
<div id="paginacion"></div>
<div id="totales"></div>

Jika sukses maka isi dari postingan baru itu nanti akan berisikan seluruh postingan yang ada di blog b-) JASON memang gila :))
Thanks for Vagabundia for the great tut's, and don't forget to visit that blog and give your feedback :x
Happy blogging \m/

▼ ▲

Linear and Gradient Fitur of CSS3

10 Komentar

▼ ▲

Modification Gadget From Google Friend Connect

11 Komentar

Lagi asyik mengangkat tema agar bisa tampil beda nih Beben Koben si bloglang anu ganteng kalem tea :D Postingan sebelumnya sudah dikasih yang berbasis kepada agan agin sekalian. Bagian komentar pernah juga , menyapa pengunjung dengan serta seabrek hiasan lainnya, monggo diacak-acak saja blog ini :P
Kesempatan sekarang Beben akan berbagi memodifikasi salah satu fasilitas paman ! yg akan dikuak yaitu dari . Kurang lebih terdapat 15 biji gadget yg dapat sobat sikat :-" dengan fasilitas google friend connect.

Namun cuman satu gaya yg akan dibahas disini ;)) soalnya ada itu ajah bos :"> Merombak Gadget Recent Visitors google friend connect :-bd

Standar instalasi:

Ikuti langkah-langkah berikut untuk menginstal gadget ini di blogsite sobat:

Seting blog jika sudah memiliki account google, kalau belon silahkan sign-up di Google Friend Connect.
Cari gadget (Recent Visitor) di galeri gadget dan kemudian klik "Buat kode HTML"
Copy kode dan paste ke blogsite di mana sobat ingin gadget ini muncul
Enjoy!

Singkat begini, masuk pada langkah pertama diatas ► pilih blog yg mau ditanam gadget recent visitor ► klik ramban galeri gadget ► klik tab menu semua gadget ► scroll paling bawah ► there is :P
Dapat tuh gadgetnya, sekarang baru masuk ke inti perombakan total, let's get de done \m/

Tiga gaya sobat bisa pilih Screensaver, Scroller, and Cloud b-) Gampang kok mengaturnya, nanti broder² tinggal ganti script yg dibedakan warnanya saja ;)

Screensaver

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-XXXXXXXXXXXXXXXXXX" style="width:300px;"></div>
<script type="text/javascript">
var skin = {};
skin['ALTERNATE_BG_COLOR'] = '#000000';
skin['BG_COLOR'] = '#ffffff';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-XXXXXXXXXXXXXXXXXX',
url:'http://www.eaglewebapp.com/ewa/gfc/screensaver/screensaver.xml',
site: 'YOUR GOOGLE FRIEND CONNECT SITE ID',
'prefs':{'screenWidth':'300','rows':'5','waitTime':'5','useEffects':'1'}
}, skin);
</script>

Configuration and customization

Ketika beres instal, broodeh dapat mengatur parameter berikut:

screenWidth: width of the screen (pixel);
constraint: screenWidth >= 200px
rows: rows of faces that will be showed in the gadget;
constraint: 2 <= rows <= 15
waitTime: waiting time between two effects (seconds);
constraint: 1 <= waitTime <= 10
useEffects: Yes/No, it says if the animation for images has to be used or not;
constraint: useEffects = 1 (Yes) | 0 (No)

Example (kalau jalan)

Cloud

Scriptnya sama dengan screensacer, sobat hanya perlu mengganti URL http://www.eaglewebapp.com/ewa/gfc/screensaver/screensaver.xml denganhttp://www.eaglewebapp.com/ewa/gfc/cloud/cloud.xml

Configuration and customization

cloudWidth: width of the cloud (pixel); ^Required
constraint: cloudWidth >= 100px
cloudHeight: height of the cloud; ^Required
constraint: cloudHeight >= 60px
maxDisplay: number of recents friends that will be showed in the gadget;
constraint: 1 <= maxDisplay <= 20
xAxis: x-scaling;
constraint: 1 <= xAxis <= 3
yAxis: y-scaling;
constraint: 1 <= yAxis <= 3

Example:

Scroller

URL untuk mode inihttp://www.eaglewebapp.com/ewa/gfc/scroller/scroller.xml

Configuration and customization

imgHeight: height of each scrolling image (pixel); ^Required
constraint: imgHeight >= 20px
scrollerWidth: width of whole Scroller gadget (pixel); ^Required
constraint: scrollerWidth >= 100 px
maxDisplay: number of recents friends that will be showed in the gadget;
constraint: 1 <= maxDisplay <= 200
speed: scrolling speed;
constraint: 1 <= speed <= 3
showEndcaps: to show/hide encaps;
constraint: showEndcaps = 1 (Yes) | 0 (No)
showInnerLines: to show/hide inner horizontal lines;
constraint: showInnerLines = 1 (Yes) | 0 (No)
endcapsBg: endcaps colors;
constraint: 1 <= endcapsBg <= 3 (1: default=#E0ECFF, 2: Black, 3: White)

Example:

Demikian bos, for details and resource this article from .
Happy google friend connect gadget \m/

▼ ▲

Embed Flash for Decoration

5 Komentar

▼ ▲

Email Ohh Email @

6 Komentar

Electronic mail atau email bisa juga kayak begini penulisannya E-Mail merupakan kunci utama dalam kita mau bereksplor ria didunia maya. Mau bikin anu, harus ada email, mau ini harus ada juga, pokoknya setiap yang melakukan register pasti si email dibutuhkan. Sangkin penting keberadaannya tidak sedikit dari para pengembang menawarkan kepada para pemakai guna mengamankan form email tersebut. Ben Tools tempat tools pilihan Beben Koben si bloglang anu ganteng kalem tea mengumpulkan tools pilihan selama berblog walking pernah memosting beberapa keamanan ber-e-mail.

Pengamanan email menggunakan address encoder, memakai image serta pemakaian reCAPTCHA Protection.

Example Encoder Email
Image 'xample

Contoh reCAPTCHA

...xxx...

Kali ini ada satu tawaran menarik, dimana kita bisa membuat sebuah email dengan domain @mailinator.com bos :-j

Keuntungan

Melindungi privasi kita dan menghindari spam.
Tidak perlu register.
Tidak perlu daftar (No Sign-Up).
Cek email yg masuk bisa via RSS, widget and Browser Web.

Intinya kita bisa melihat mengecek email yang masuk diblog/web tanpa harus login jika menggunakan alamat ini @mailinator.com sob ;) Yuk lanjutin supaya lebih jelasnya :D

TERMS OF SERVICE: By using this service, you agree to the following terms: Mailinator® and ManyBrain, Inc. makes no warranty of reliability or suitability for any purpose. Its availability or existence may be removed at any time by its owners. Any email sent through Mailinator may or may not be available for viewing. You agree to not use Mailinator directly or indirectly for any unlawful purpose. You understand that any messages sent through Mailinator are in public view and anyone can see them. You understand that Mailinator/ManyBrain has no control over material put into mailboxes. You agree to hold ManyBrain, Inc./Mailinator harmless from any damages caused by loss of emails, content within emails, damage to your computer or innocence from viewing emails, direct or indirect use of this system, or anything else you can think of. Use at your own risk.www.mailinator.com

Pertama-tama sobat agan silahkan buat alamat terlebih dahulu di . Bebas namanya mau apa juga, kemudian rangkai ke widget berikut

Replace YOUR-EMAIL-NAME dengan nama yg dibuat tadi. Ketika nanti mengecek inbox, akan ada tulisan Alternate Address for this Inbox!!!

Jadi sobat bisa memberikan 2 buah alamat. Contoh yang Beben buat nih.

Check your inbox!

Name when i make it beben-koben@mailinator.com and this my alternate name M8R-7ttekv@mailinator.com Tanpa login bisa lihat email yang masuk loh bos :-O :)) Gunakanlah dengan bijak fasilitas ini :)
Happy email \m/

▼ ▲

Menghias Blog Gaya Punya

5 Komentar

Banyak jalan menuju Roma beribu cara bisa kita gunakan untuk memperindah blog kita tersayang. Dari cara sederhana sampai cara yang membutuhkan kerja kepala sedikit muter² hingga menggeleyeng kesana kemari. Siapa yang tidak mau memiliki blogsite yg dipuji banyak orang :D Kalau sobat mengerti dengan kode bisa menghias blog dengan itu. Kalau mengerti apalagi ;)
Yang tinggal hanya urusan masing-masing :D

Seperti menghias blogspot dengan kode CSS sederhana berikut ini!

Kode CSS

#fixed-footer {
background: url("http://your-link-image/fade_footer.png") repeat-x scroll 0 0 transparent;
bottom: 0;
height: 35px;
left: 0;
position: fixed;
width: 100%;
}

Taruh diatas tag </b:skin>

Kode HTML

<div id="fixed-footer"></div>Simpan di tag <body>Atau mau seperti ini!

Kode CSS

#foot-bar {
background: url("http://your-link-image/foot-bar.png") repeat-x scroll 0 0 transparent;
top: 0;
height: 4px;
left: 0;
position: fixed;
width: 100%;
}

Kode HTML

<div id="foot-bar"></div>Nih link gambarnya, sok silahkan ambil .
Dengan itu saja sobat sudah memiliki perhiasan sederhana tapi gaya punya b-) Kebayang dong bila disandingkan dengan tawaran bertebaran buanyak diluaran sana :-? Seperti berikut ini ;))

Meluncur bro :)) Kalau mau memerlukan gambar/image sobat sabit bisa merujuk kesini deh ;))

Happy hias berhias blogspot \m/

▼ ▲

SEO Source From Beben Koben

9 Komentar

Mungkin bagi para blogger indonesia tidak awam lagi dengan blog Kang Rohman? Dimana saat ini beliau mengupas habis mengenai . Dasar pemikiran utama dalam SEO, sudah dipaparkan, mengenal SEO On Page dan Off Page juga sudah, kenali jumlah kompetitor dan pencarian, serta nama domain terdapat keyword Utama ada disana :) Bila kita membicarakan mengenai SEO tidak akan dimengerti dengan secepat kita menghapal tugas dari dosen. Singkat kata sobat hanya bisa menerka, mengikuti, mempraktekan and mencoba terus bagaimana konten satu web/blog dapat lebih baik dimata .

Kata Optimization yang berarti optimalisasi tidak dapat dihasilkan dengan jalan instant apapun :-? Sebenarnya basics SEO itu hanya sedikit yg mana disini pokoknya saja :D Kalau jelasnya Beben Koben si bloglang anu ganteng kalem tea juga tidak tauk :P

Apa itu Search Engine Optimization?
Search engine optimization adalah proses mencapai peringkat teratas di search engine untuk istilah yang paling relevan situs web dalam pencarian. Istilah pencarian yang paling relevan adalah ungkapan bahwa orang yang paling mungkin untuk mengetik ke mesin pencari saat mencari website apa yang ditawarkan. Ini adalah istilah pencarian yang sangat penting untuk peringkat tinggi, dan ini adalah istilah pencarian yang menargetkan mesin pencari optimasi.

Banyak begitu banyak jika kita membaca mengenai optimasi blog/web. Paling besar target mungkin search via by google. Oleh karena itu, Beben hanya akan berbagi website yang mana membahas abis tentang si paman google ini :D Jadi sobat sabit bisa membaca sampai puas lalu direnungkan and dipraktekan deh ;))
Halaman ini akan terus diupdate sejalan bloglang menemukan sumber yg gaya punya b-)

Web Work Shop

google articles

search engine optimization articles

Google About
Google Tutor
Tech Crunch

Segitu saja dulu yak, bagi-bagi seo artikel from the greats source. Nanti ditambah agih kalo 'udah 'apet...to be continued!!!
Happy seo \m/

▼ ▲

Facebook Comments Box Plugin for Blogger

12 Komentar

Hihihi, Beben Koben si bloglang anu ganteng kalem tea selaku raja bloglang in the house kembali membawa kabar hangat...hangat yaitu mengenai facebook comments plugin for blogger or facebook comments box :D Dari katanya saja sudah ada and berarti kotak komentarnya si jejaring sosial FB bisa menclok di blog ;))
Perlu sobat ketahui bahwa terdapat dua versi kotak komentar FB yang bisa diapliasikan kedalam blogger ini.

Pertama facebook comments for develop.
Kedua facebook comments not develop.

Sebenarnya sama-sama saja sih kode script yg digunakannya. Hanya saja ada perbedaan sedikit (secuil) dalam pemanggilan syntax link post :D Kalo mau menggunakan APP_ID ya harus buat dulu di !
Sekarang sesi script guna mendapatkan kotak komentar ~~buku wajah~~ untuk blogspot.

Script facebook comments for develop

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID&xfbml=1"></script><fb:comments expr:xid="data:post.id" numposts="10" width="425" publish_feed="true"></fb:comments>

Ganti deh itu YOUR_APP_ID.
Resource by: .

Script facebook comments for non develop

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:comments expr:href="data:post.url" num_posts="10" width="500"></fb:comments>

Ini tidak memerlukan APP_ID.
Resource by:
Perbedaannya terdapat pada pemanggilan syntax link expr:xid="data:post.id" and expr:href="data:post.url"

Jadi mudeung kan sob, kalo begini perbedaan dari komentar buat develop or non develop :) Jika sudah begini tinggal kreasi sobat dalam penerapannya. Beben Koben mah diaduin saja itu si ke-2 script diatas :-"

Script facebook comments develop/non develop + Like FB

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"/><fb:like expr:href="data:post.url" font="tahoma" show_faces="false" width="450"/><fb:comments expr:href="data:post.url" num_posts="10" width="500"/>

Kalao pakai yg ini plus ada tombol likes ;)) Sok lah kreasikan sendiri...
Happy facebook comments on blogger \m/

▼ ▲

Hello Bar Widget for Blogger

6 Komentar

Kembali membicarakan mengenai , yang mungkin merupakan cara termudah dalam menghiasi blog kita tercinta :x Ada secara manual kita sendiri yg memasukannya, atau langsung metode add to blogger. Beben Koben si bloglang anu ganteng kalem tea mau share widget hello bar nich sob.
Gadget dimana menampilkan seutas say hello kepada para pengunjung. Keberadaannya diatas membuat pelancong pasti melihatnya. Bisa diminimize juga loh ;)) Terdapat dua cara settingan jika nanti sobat sudah mendaftar disana. Cara pertama, ialah dengan membuat kata-kata message manual disertai link tujuan. Cara kedua meng-add link Url feedburner punya kalian sendiri. Jadi nanti pesan di bar hellonya, artikel terakhir dari sobat :)

Lakukan register terlebih dahulu Get More Clicks with Hello Bar. Klik Request Invite isikan Name, Email, beserta company. Lalu tunggu besok or someday guna diverifikasi, jika sukses maka email balasan akan terkirim. Coba bayangkan jika agan agin punya web/blog lebih dari satu lalu dimasukin widget ini guna mempopulerkan salah satu blog/web andalannya ;)
Beben sudah bikin untuk blog Prodigy of Head, berikut scriptnya

<script type="text/javascript" src="//www.hellobar.com/hellobar.js"></script>
<script type="text/javascript">
    new HelloBar(18167,14405);
</script>
<noscript>The Hello Bar is a simple web toolbar that engages users and communicates a call to action.</noscript>

Dimacukin via Add a Gadget ► HTML/Javascript taraaa look up your blog, there show say Hello Hello Bar :D Diterapinnya mending diblog lain () dengan tujuan feed blog andalan and good luck ;)
Happy Hello Bar \m/

▼ ▲

Smarter Related Posts Google Blogger Widget

2 Komentar

Ketimbang enggak mosting, lebih baik share cara masukin smarter related posts google blogger widget karya Kalau kepengen mirip google banget bisa dilooking . Seperti yang ada diblog ini Prodigy of Head .
So...kembali ke proyek postingan terkait miliknya moretechtips. Related posts ini berotasi alias bergonti-ganti, dapat berupa tulisan tampilannya ataupun image. Karena metode Add a Gadget ► HTML/Javascript memudahkan dalam penerapannya sob :D Buka artikel berikut guna melihat ke-4 demo ! Default coded your got

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>

<div class="related-posts-widget">
<!-- {
blog_url:'http://YOUR-NAME-BLOG.blogspot.com'
 ,thumbs:0
} -->
loading..
</div>

Script warna biru jika sudah tertanam ditemplate tidak usyah dipakai lagi yah :) YOUR-NAME-BLOG replace with your link blog. Dengan script itu saja sobat sudah memiliki related posts. Tapi tidak akan berotasi alias menjedog menjentul gan :D

Coba sekarang pasang yang ini ;))

<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<div class="related-posts-widget">
<!-- {
blog_url:'http://YOUR-NAME-BLOG.blogspot.com'
,titles:0
,thumbs:1
,thumb_size:'s104-c'
,max_posts:10
,max_tags:10
,show_n:4
,stay_time:9000
,animate:'width'
} -->
loading..
</div>

Keterangan:

titles
thumbs
thumb_size
max_posts
max_tags
show_n
stay_time
animate

Mungkin segitu menurut Beben Koben si bloglang anu ganteng kalem tea setingan seperlunya. Kalau mau detailsnya yaaa silahkan deh baca sendiri ke sumber pencipta ;)) :D

Terdapat link css hostingan<link type="text/css" href="http://blogger-related-posts.googlecode.com/svn/v2/style1.css" rel="stylesheet" />
Menurut hemat Beben mending sobat pakai ini

Masukin deh bareng ketika Add a Gadget ► HTML/Javascript bersama script related postnya. Kreasikan deh itu kode CSS sesuai selera b-)

Happy relates posts \m/

▼ ▲

Custome Search Google API Key jQuery Ekstrim

6 Komentar

Menarik juga ternyata memperhatikan google custom search. Yaitu satu paman googel guna membuat kotak pencarian () pada blog. Keuntungannya banyak jika sobat blogger memakai custome search ini :) Yang jelas terlihat bahwa halaman blog telah terindeks sama om google :)) Karena kinerjanya menggunakan API Key, maka harus buat terlebih dahulu alias sign up :D

Start with this link to sign up for a Google API Key. Scroll kebawah lalu add blog/web sobat disana dengan menceklis tanda guna agreement ;) nah nanti ada deh kotak paling atas API Key-nya, lalu masukan deh kedalam blogsite.

Thank You for Signing Up for a Google Maps API Key!

Your key is:

ABQIAAAA6Eeb3axyTxk80ElqSOuy2iM5bQjXopWOWqsivw...

Your coded like this

<script src='https://www.google.com/jsapi/?key=ABQIAAAA6Eeb3axyTxk80ElqSOuy2iM5bQjXopWOWqsivw...' type='text/javascript'/>

Masukan dibawah tag <head> Selamat sobat sudah mempunyai API Key sendiri :-bd Sekarang mari kita masuk ke acara inti mengCustome Google Search biar lebih ekstrim \m/

Tadi selayang pandang bagaimana mendapatkan ApiKey, now get your google custome search. Untuk mendapatakannya sobat harus bikin di halaman Google Custom Search. Klik sana klik sini beres deh. Kalau sudah beres (sdh punya) klik tulisan "manage your existing search engines" ► Click Control panel ► perhatikan sisi sebelah kiri, cari bertulisankan Get Code diklik ► munculah coded-nya :) Default coded

<div id="cse" style="width: 100%;">Loading</div>
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'id', style : google.loader.themes.MINIMALIST});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('XXXXXXXXXXXXXXXXXXXXX:_xxxxxxxxxx');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
customSearchControl.draw('cse', options);
}, true);
</script>

<style type="text/css">

/* here default style CSS */

</style>

Lihat script <script src="//www.google.com/jsapi" type="text/javascript"></script>
Jika didalam template sudah ada itu (script pada awal disuruh buat tadi) tidak usah dipasang lagi. Begitu jg dengan aturan lain yg memang harus menyertakan API Key!!!
Kalau dengan kode default maka hasil generated pencarian akan tampak seperti:

Dengan tambahan sedikit script snippet, maka ekstrim result dihasilkan meliputi blog kita sendiri, Web, News, Blog, Image, Book and Video b-)

Full kinerja Script Snippet

Perhatikan

Kedua script diatas (berwarna merah) kebanyakan sudah terpasang, maka itu jangan dipasang lagi. Sobat hanya tinggal menanamkan script dibawahnya saja setelah mengganti YOUR-BLOG-NAME.blogspot.com dengan link sendiri. Ingat..ingat..ingat!!! Cermatlah, cermatlah!!!Bloglang

demo
Good luck..
Happy custome search google \m/

▼ ▲

Three Great News from Dynamic Drive

2 Komentar

Lama tidak mengunjungi web script berikut ternyata sudah update lumayan banyak. Tiga kabar (three news) sekaligus menggebrak dunia perscriptan dihadirkan kali ini bersama Beben Koben si bloglang anu ganteng kalem tea b-) Pertama-tama bagi sobat suka dengan menu bergaya lava website Dynamic Drive mengeluarkan . Menu full stylish oke punya kan. Kita comot satu dari Dynamic Drive Help Forums mengenai jQuery marquee banner. Bisa bolak balik marquee disini jika kita mengarahkan cursor mouse kekiri/kekanan :D Trik disini metode yg dipakai adalah Add a Gadget ► HTML/Javascript ;)) Biar cepet, mudah, kalau mau delete tinggal remove kan bos :))

jQuery Banner Marquee

<script type="text/javascript" src="https://sites.google.com/site/jquery9/crawler.js">
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>

<script type="text/javascript">
marqueeInit({
 uniqueid: 'mymarquee',
 style: {
  'padding': '2px',
  'width': '100%',
  'height': 'auto'
 },
 inc: 9, //speed - pixel increment for each iteration of this marquee's movement
 mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)

 moveatleast: 4,
 neutral: 150,
 savedirection: false
});
</script>

<div class="marquee" id="mymarquee">

<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" alt="" />
</a>

<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" alt="" />
</a>

<a href="http://URL-BLOG.blogspot.com/">
<img border="0" src="URL-IMAGE.jpg" alt="" />
</a>

<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" />
</a>

<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" alt="" />
</a>

</div>

Jika mau memakai langsung beserta script crawler.js monggo. Kalau mau menghosting sendiri, berikut scriptnya yg sudah dipress
Terdapat settingan didalam script pemanggil, silahkan atur² menurut kebutuhan. Seperti 3 opsi gerakan mouse itu tuh ;)

Terakhir yg ketiga nih mengenai HTML5 Notepad. Global fungsinya yaitu menuliskan sebuah pesan diboard dengan menggunakan hard disk pengguna sebagai metode penyimpanan. Isi tidak akan berakhir (hilang) sampai dihapus secara eksplisit oleh kita. Cocok buat private messages gitoooh sob, kalo urgent ;)) :D

Note: In IE8+ and FF3+, the script only works when viewed online (http web address)

HTML5 Notepad

Download first right click, and select "Save As":

Jika sobat mendownload murni bawaan dynamic drive web css maka full CSS3 atribut yg digunakan. Sama Beben si bloglang ganteng kalem tea direset menjadi CSS standar yg mana nanti sobat dapat mengkreasikannya sendiri. Okay :-bd

<style>
.notepad {
border:1px solid gray;
background:#ffe;
width:280px;
padding:7px 10px;
position:absolute;
cursor:move;
}
.notepad  h3 {
margin:5px 0;
}
.notepad .close {
float:right;
font-weight:bold;
text-align:center;
display:block;
cursor:pointer;
}
.notepad form {
margin:0;
padding:0;
}
.notepad form fieldset {
margin-top:1em;
}
.notepad form legend {
font-weight:bold;
}
.notepad form input[type=text] {
width:98%;
}
.notepad  form textarea {
width:98%;
height:150px;
}
.notepad form a.control {
text-decoration: none;
padding: 2px 20px;
text-align:center;
margin:5px 0;
display:block;
margin-top:5px;
font:bold 13px Verdana;
border: 1px solid #778;
color: #fff;
border:1px solid gray;
background: #006600;
}
.notepad form a.delete {
background: #444;
}
.notepad:before { /*top left tape effect*/
content: '';
position:absolute;
width: 120px;
height: 25px;
}
</style>

<script language='javascript'>

/***********************************************
* HTML5 Notepad- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var notepad={padHTML:'<div class="notepad"><span class="close" title="Close Notepad">X</span><h3 class="title">Note Pad</h3>'
+'<p>Use the below to save snippets of commonly entered text for quick reuse later. The contents are saved perpetually until deleted by you.</p>'
+'<form><!--noteHTML goes here--></form>'
+'</div>',noteHTML:'<fieldset><legend>Note Title (optional):</legend>'
+'<input type="text" /><br />'
+'<b>Note content:</b><br />'
+'<textarea></textarea>'
+'</fieldset>'
+'<a href="#" class="control save">Save</a>',zIndex:10,loadpad:function(id,position){var $=jQuery
function loadnote(){var notevalue=largestorage["notepad_"+id]
if(notevalue){notevalue=notevalue.split("|||")
$pad.find('.title').text(notevalue[0])
formfields.$subject.val(notevalue[0])
formfields.$content.val(notevalue[1])}}
function savenote(){$pad.find('.title').text(formfields.$subject.val())
largestorage["notepad_"+id]=formfields.$subject.val()+"|||"+formfields.$content.val()}
function positionpad(x,y){var windowmeasure={w:$(window).width(),h:$(window).height(),left:$(document).scrollLeft(),top:$(document).scrollTop()}
var paddimensions={w:$pad.outerWidth(),h:$pad.outerHeight()}
var xpos=(x=="center")?windowmeasure.w/2-paddimensions.w/2:(x=="left")?10:(x=="right")?windowmeasure.w-paddimensions.w-25:parseInt(x)
var ypos=(y=="center")?windowmeasure.h/2-paddimensions.h/2:(y=="top")?10:(y=="bottom")?windowmeasure.h-paddimensions.h-25:parseInt(y)
xpos=xpos+windowmeasure.left
ypos=ypos+windowmeasure.top
$pad.css({left:xpos,top:ypos})}
if($('div#'+id).length==1||!window.localStorage&&!window.globalStorage){$('div#'+id).css({display:'block',visibility:'visible'})
return}
var $pad=$(this.padHTML).appendTo(document.body).attr('id',id).css({zIndex:this.zIndex})
var pad=$pad.get(0)
$(this.noteHTML).appendTo($pad.find('form:eq(0)'))
var padpos=position||['right','center']
positionpad(padpos[0],padpos[1])
var formfields={$subject:$pad.find('input[type="text"]:eq(0)'),$content:$pad.find('textarea:eq(0)')}
var buttons={$save:$pad.find('a.save')}
var largestorage=window.localStorage||(window.globalStorage?globalStorage[location.hostname]:{})
$pad.bind('keydown cut paste',function(e){var target=e.target
var $target=$(target)
if(target.tagName=="TEXTAREA"||(target.tagName=="INPUT"&&target.type=="text")){if(buttons.$save.css('opacity')!=1)
buttons.$save.css({opacity:1}).attr({title:'Click to Save Contents'}).text('Save')}})
$pad.bind('mousedown',function(e){var $startpos=$pad.offset()
$pad.css({zIndex:notepad.zIndex++})
$pad.bind('selectstart',function(){return false}).css('MozUserSelect','-moz-none').find('input, textarea').bind('selectstart',function(e){e.stopPropagation()}).css('MozUserSelect','text')
$pad.data({dragdata:{startpos:{left:$startpos.left,top:$startpos.top},startmousepos:{left:e.clientX,top:e.clientY}}})
$(document).bind('mousemove.dragpad mouseup.dragpad',function(e){if(e.type=="mousemove"){var startpos=$pad.data('dragdata').startpos
var startmousepos=$pad.data('dragdata').startmousepos
var dx=e.clientX-startmousepos.left,dy=e.clientY-startmousepos.top
$pad.css({left:startpos.left+dx,top:startpos.top+dy})}
else if(e.type=="mouseup"){$(document).unbind('mousemove.dragpad mouseup.dragpad')}})})
$pad.find('.close').bind('click',function(e){var padid=$(this).parents('.notepad').attr('id')
notepad.unloadpad(padid)})
$pad.find('form').bind('mousedown',function(e){e.stopPropagation()})
buttons.$save.click(function(e){buttons.$save.css({opacity:0.5}).attr({title:'Contents Saved'}).text('Saved')
savenote()
e.preventDefault()})
loadnote()
if(largestorage["notepad_"+id])
buttons.$save.css({opacity:0.5}).attr({title:'Contents Saved'}).text('Saved')},unloadpad:function(id){jQuery('div#'+id).remove()}}
</script>

<script language='javascript'>
jQuery(function($){ //on document.ready
 notepad.loadpad('mynotepad1') //load "mynotepad1" when document loads
})
</script>

<a href="javascript:notepad.loadpad('mynotepad2')">Mynotepad2</a>

Perhatikan script yg diberi warna (paling bawah bos) Pilihlah salah satu saja.

<script language='javascript'>
jQuery(function($){ //on document.ready
 notepad.loadpad('mynotepad1') //load "mynotepad1" when document loads
})
</script>

Ini akan membuka board setelah beres loading blogsite sobat.<a href="javascript:notepad.loadpad('mynotepad2')">Mynotepad2</a>
Yang ini via klik dulu baru muncul deh boardnya. Sok mau mana yg dipakainya deh, terserah agan agin :P Good luck, and demikian three great news from dynamic drive.
Happy salma \m/