Rekomendasi Slide Out Untuk Blogger

Rekomendasi Slide

Saya sering melihat Rekomendasi Slide Out di wordpress, banyak juga meraka para fans blog wordpress yang mengunakan plugin ini. Selain para pengujung dapat dengan mudanya menjangkau post blog anda dengan fitur Rekomendasi Post Slide ini. Widget ini juga akan otomatis keluar pada saat anda mengulir kebawah post anda. Saya juga telah membuat beberapa modifikasi potongan sehingga akan dimuat asynchronous tanpa mempengaruhi beban halaman. Pada keluar Slide akan menampilkan posting secara acak dari Blog Anda dan tulisan acak yang akan diambil dari Feed Blog Anda dengan menggunakan Ajax.Demo

1. Untuk menambahkan widget ke blog Anda, Anda dapat menggunakan installer dibawah ini dengan satu klik.
   
   <div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Direkomendasikan untuk Anda</p> <div id="bpslidein_image"></div> <div id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://donor-ilmu.googlecode.com/files/rekomendasi-slide.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://donorilmu.blogspot.com/2012/01/rekomendasi-slide-out-untuk-blogger.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcQ8fWKL3t5EL0qVdnXZtnpjFYIV-Slc_RGQAmR4M6ChGW7RPKoEaGXKIfYBUAdEOWQUYkmNdXUUS1eL7qSkf8zzkLfclqbZFaEtOhsRr7o_48rgqDcyc_eZrqF3qSMb3t1OmnrGuAHM0/I/bloggerplugins.png" alt="Rekomendasi Slide Out Untuk Blogger" /></a>
2. Menyesuaikan Slide Fitur keluar
   End Of Post marker - Slide keluar ketika gulungan pengguna ke sebuah titik tertentu di Blog Anda (bagian bawah halaman secara default) Untuk menandai titik ini, Anda dapat menambahkan elemen HTML di sana. Elemen harus memiliki id bpslidein_place_holder
   
   misalnya: <div id='bpslidein_place_holder'></div> elemen yang akan melakukan pekerjaan. Tempat terbaik untuk menambahkan penanda ini akan berada di akhir posting. Jika Anda ingin melakukannya dengan mudah, Anda dapat menambahkan ini ke template Blogger Anda.
   
   Dalam template Anda Cari kode di bawah ini, (expand the Widget Templates)
   

   <div class='post-footer-line post-footer-line-1'>

   atau
   

   <data:post.body/>

   Masukan kode dibawah ini letakan di bawah kode yang anda temukan dari kode di atas
   

   <b:if cond='data:blog.pageType == "item"'>
   <div style='display:none' id='bpslidein_place_holder'></div>
   </b:if>

   Klik Simpan Template
3. Menyesuaikan tampilan dan nuansa dari out Slide
   Jelas bisa gaya Slide Fitur Anda pada saat keluar. Tapi sebelum Anda melakukannya, Anda harus menambahkan definisi variabel ke template Anda
   

   <script>var bpslidein_custom_css=true;</script>

   Ini harus ditambahkan di suatu tempat di atas kode </head>.
   Setelah variabel ini diatur dengan benar, Anda dapat menambahkan definisi CSS sendiri. Anda dapat menambahkan CSS Anda di Perancang Template > Tingkat Lanjut > Tambah CSS
   
   Dan ini adalah Kode set standar definisi Gaya yang diterapkan pada Widget tersebut. Anda dapat memodifikasi mereka dan menggunakannya.
   #bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;}#bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}#bpslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}#bpslidein a,#bpslidein a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;}#bpslidein .close,#bpslidein .expand,#bpslidein .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;}#bpslidein .help{right:35px;}#bpslidein_title,#bpslidein_image{float:left;width:80px;}#bpslidein_title{width:290px;}
   Klik Terapkan ke Blog

Read more »

Widget Subscription Box Untuk Blogger

Sebuah Box Subscription biasanya berisi link ke RSS feed dan Form Email di mana pengunjung dapat mengirimkan Email ID mereka untuk menerima update posting dari blog Anda. Blog tanpa form Subscription tidak masuk akal, karena pelanggan adalah tulang punggung dari setiap blog yang sukses. Orang berlangganan Feed Anda bila Anda hanya mempublikasikan konten yang berkualitas maka para pembaca yang Anda miliki akan semakin kuat Anda dapatkan. Satu hal yang dasar dan paling penting untuk dilakukan adalah untuk menambahkan widget kotak langganan ke blog Anda dan selalu menjaga kotak langganan ke posisi kanan atas atau kiri sidebar Anda untuk menarik orang sebanyak mungkin.

<style> .mbtbar{width: 300px; float: left;}.mbtbar .count{color:#F17C18; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;} .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;} .mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;} .mbtbar .subicons a{text-decoration: none; color:#333333;} .mbtbar .subicons a:hover{text-decoration: underline; color:#333333;} .mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB7j3mmorIVzAJ4P791Xy14EkuxPORvH86wxTHc67RcccRcXrXZB7Pt939iKsXwTQTGOgoL2HSNyv_j202SloMzi7rvBtaQhSmdcArM6RMKOW5PoEGrCK4YYL5Eggcwj0-2Wx77pFT7Mbj/s400/rsssprite.png) no-repeat; background-position: 0px 5px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB7j3mmorIVzAJ4P791Xy14EkuxPORvH86wxTHc67RcccRcXrXZB7Pt939iKsXwTQTGOgoL2HSNyv_j202SloMzi7rvBtaQhSmdcArM6RMKOW5PoEGrCK4YYL5Eggcwj0-2Wx77pFT7Mbj/s400/rsssprite.png) no-repeat; background-position: 0px -37px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB7j3mmorIVzAJ4P791Xy14EkuxPORvH86wxTHc67RcccRcXrXZB7Pt939iKsXwTQTGOgoL2HSNyv_j202SloMzi7rvBtaQhSmdcArM6RMKOW5PoEGrCK4YYL5Eggcwj0-2Wx77pFT7Mbj/s400/rsssprite.png) no-repeat; background-position: 0px -79px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB7j3mmorIVzAJ4P791Xy14EkuxPORvH86wxTHc67RcccRcXrXZB7Pt939iKsXwTQTGOgoL2HSNyv_j202SloMzi7rvBtaQhSmdcArM6RMKOW5PoEGrCK4YYL5Eggcwj0-2Wx77pFT7Mbj/s400/rsssprite.png) no-repeat; background-position: 0px -121px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 15px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;} .mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDt9nwko6pf5TtY2IT-ywYCpnxcrxQYN_PX_VX51QhuhEMS4KpJCZkcWXYdXCAYe7HVyyRnxQhhpHr2ZqYQhaBtal4tLhdNKmgp2Q46Bv7D2u9uPswjudFdKzqQ6WrlQGT20POULHHh3M/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px; line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; } .mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;} .mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 185px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} </style> <!--[if IE 7]> <style> .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; } .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; } </style> <![endif]--> <div class="mbtbar"><div class="count"><span class="bigcount"><a rel="nofollow" href="http://feeds.feedburner.com/NAMAFEED"><img width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/NAMAFEED?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26"/></a> </span>Learn Free Pro Tricks daily </div><div class="subicons"><div class="rssicon">&#160;<a rel="nofollow" href="http://feeds.feedburner.com/NAMAFEED" target="_blank"> RSS</a></div><div class="googleicon">&#160;<a href="http://plus.google.com/GOOGLEPLUS-ID" rel="author" target="_blank"> G+</a></div><div class="fbicon"> &#160;<a href="https://www.facebook.com/FACEBOOK-ID" target="_blank" rel="nofollow">FB</a></div><div class="twittericon">&#160;<a href="http://twitter.com/TWITTER-ID" target="_blank" rel="nofollow">Twitter</a></div></div> <div class="emailsub"> <div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;">Receive Quality Tutorials Straight in your &#160;&#160; Inbox by submitting your Email ID below.</p></div> <div class="emailupdatesform"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="NAMAFEED" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div></div>	<style type="text/css">.subbox{width:305px;border:0 solid #141414;overflow:hidden}.addthis_toolbox{padding:15px 0 5px 0;text-align:center}.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}.addthis_toolbox .custom_images a:hover img{opacity:1}.addthis_toolbox .custom_images a img{opacity:0.85}.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}.rssbox:hover{border:1px solid #92aed1}.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}.rssbox a:hover{color:#7c8a9b;text-decoration:underline}.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}.emailsbox:hover{border:1px solid #92aed1}.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}.twitterbox:hover{border:1px solid #92aed1}.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}.facebookbox:hover{border:1px solid #92aed1}.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}#search:hover{border:1px solid #92aed1}#search form{margin:0;padding:0}#search fieldset{margin:0;padding:0;border:none}#search p{margin:0;font-size:85%}#textarea{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}</style><div class="subbox"><div id='search' style='display:inline;'><form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="3" id="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" /><input type="hidden" value="NAMAFEED" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input id="searchsubmit" type="submit" value="Submit" /></form></div><table><tr><td><div class="rssbox"><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUer7BDmQO-0BA0pxFTNyvw64btv28W5XrJ2_Gm5J_89PwBZZ-0BXF_AJvcv76v1WtSJQk223hLqGOp2az6b5wE0PoiBr2TytmuCJ4G-f5_G1L0cIdnmsTydXUoJarKA80F73uPbJw0Gzc/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a></div></td><td><div class="emailsbox"><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8b5u6L723RNDsIwRiD57IkkkrDYQiC1DVLDszqejijbsHdvF__yxGa93nSoEuTVccOFM7upS2rjRtemhyphenhyphene09cs9BrVU4j2CpRGQ3KSiqhaawYH4keQYxbZyq56IeWn_oras4Awvdwqd4j/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a></div></td></tr><tr><td><div class="twitterbox"><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-nGvb8wjFj2Rs_8oVmV-37XhaKwV7oe64PsYZ49VmSgaCs0mUzYlJtGQOvfJtdhO3FFk8S0lX2oArraBtfwVzFffeX-RsTrBLAWAaDMU_FUhcLt3h0rT0MQBJrpopbSgy9uToq1KcPvMV/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a></div></td><td><div class="facebookbox"><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8cfRvQQOJ4q3FaLJYDk9mhlMSR6SGIF1naOFwgzZLyrjwQ8kyAjaauO3smPg-tVpWafyqLMhZzMBj7QmDTzsJKB0AOKbr7m_tyttXtKrHfb3xI38rsmpfSPGYOz3tmWyM0Fgi7cRQrF5h/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a></div></td></tr></table><p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p><div class='addthis_toolbox'><div class='custom_images'><a class='addthis_button_twitter'><img alt='twitter' height='32' src='http://2.bp.blogspot.com/_4hkuhiry_2u/tib9fsstv4i/aaaaaaaab90/ljxossnm6je/twitter.png' width='32'/></a><a class='addthis_button_delicious'><img alt='delicious' height='32' src='http://4.bp.blogspot.com/_4hkuhiry_2u/tib9mh_zqni/aaaaaaaab9e/pahhr5gn6di/delicious.png' width='32'/></a><a class='addthis_button_facebook'><img alt='facebook' height='32' src='http://2.bp.blogspot.com/_4hkuhiry_2u/tib9nth41ai/aaaaaaaab9u/2rkbr3wblby/facebook.png' width='32'/></a><a class='addthis_button_digg'><img alt='digg' height='32' src='http://4.bp.blogspot.com/_4hkuhiry_2u/tib9m5a4bzi/aaaaaaaab9m/xowtjnpvepc/digg.png' width='32'/></a><a class='addthis_button_stumbleupon'><img alt='stumbleupon' height='32' src='http://1.bp.blogspot.com/_4hkuhiry_2u/tib9e_kpo-i/aaaaaaaab9s/1wqjoiz3b_a/stumbleupon.png' width='32'/></a><a class='addthis_button_favorites'><img alt='favorites' height='32' src='http://2.bp.blogspot.com/_4hkuhiry_2u/tib9ej5rtwi/aaaaaaaab9c/tyvdt6xgalw/favorites.png' width='32'/></a><a class='addthis_button_more'><img alt='more' height='32' src='http://3.bp.blogspot.com/_4hkuhiry_2u/tib9egd8xsi/aaaaaaaab9k/rzy5eofo2sy/more.png' width='32'/></a></div><script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/></div></div></script></div></div>
<style>#news-letter{clear:both;padding-top:10px;}.msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZyYQYMcqVSjGqX0zWmw3FPe3NVO7Bj1iPqNGTeHhTSzvmNI3eWgF5qgJxK9D70-_agyzfNkNlHUKonTNuanjEdJEWJyBf39RYd1-BJbzmpBZu8rG-6nQvS7ZklIdQxJL90YmEuP5IOos/s800/mail-box.png) no-repeat;}.news-headline{position: relative;z-index: 999;font-size: 10px;padding-bottom:10px;font-weight:bold;}</style><div class="news-headline" color:#333;>Read latest headlines in your favorite news reader</div><center><table border="0"><tr><td style="padding-right:4px;"><a href="http://twitter.com/TWITTER-NAMA" target="_blank" title="Follow Me On Twitter"><img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU33LrNzuMQ5FwwkYpkZlhBW7ChM6xVMXi-qQGIq6W3XMgNRBlzvaaEtgO8SOR2nIT-TVDvnZWlI6eC-Q0Nbe1J0qwT8JypngelgFj9QNIZ8RCxsqck8FOKRLD2a1txk-_xdqjz7jpw4k/s800/twitt.png" /></a></td><td style="padding-right:4px;"><a href="http://feeds.feedburner.com/NAMAFEED" target="_blank" title="Subscribe Via RSS"><img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0kOA_eWmndgJgVguhb6tECQvfGAHz2VU8I4oc4QN7zV0BUpRYFhW6KawFbpXsKMgLzThNSAAsQUf9nlKwJO4-v_lxRr8qITdgPQVcyfXMjL2NxEnF3TBNNGlx0wTfEvRzQYvx8RQDq0/s800/Feed-icon_128.png" /></a></td><td style="padding-right:4px;"><a href="FACEBOOK-URL" target="_blank" title="Find Us On Facebook"><img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHxW6vIjJF7ZZbju2ALpoxIlZAnzGhm9QIm7E5GU7VskH3bOAQswu5ZguEW_XjXQWy2TshPAHQf6Yy36-Yl39FLJKcw8lUg-9Sm9GswXTgfadAZw85TzELxOET3OyehXc3x4FBzAcbX7o/s800/Facebook_icon.png" /></a></td><td style="padding-right:4px;"><a href="GOOGLE-PLUS-URL" target="_blank" title="Add me on Google+"><img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJ2n2Of19w2QnQ4XrlpQWTxtGwxNE1YQYvHf3mo9arYjZN-U3Dn7h8WDPzY3iH1jqFuhNBaZPVcujXIsH3kjdU9EJXndQq5VYuj07bklM9GeaFzYrwm_ePhYhFUxnjjCTqA5nhjarD0M/s800/googleplusicon.png" /></a></td><td style="padding-right:4px;"><a href="http://www.stumbleupon.com/share?url=HOMEPAGE-URL" target="_blank" title="Stumble Upon"><img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM3HfuQ0AB3a9EY85vFBk6cx2iLN52avRIqoPDhY0AvNLInkhmauXoDS9VzG7fTLSuvxR-uZ6bO3mJgmvzyho_mfdV1cVuFZyG4PVvMkPGjwiWnFduGSAdYLJ_85RRWxLDzAXquaDdCaQ/s800/stumbleupon_icon.png" /></a></td><td style="padding-right:4px;"><a href="http://technorati.com/faves?sub=addfavbtn&add=HOMEPAGE-URL" target="_blank" title="Add To Technorati"><img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHqhj-oZuIMmlg06Ds_oGiElIRC9j5h2DJWgjjXSKGjuYPp5VTDef3oNQSVR4wyaogV8AtGDuY_Hgr63s_gIYtWrhhHbX2tEuwmmoabE1KGEkeFv7EOvQJHZcjn0tagA_Z6AfmcuVDlSk/s800/Technorati-icon.png" /></a></td><td><td style='padding-top:-2px;'><a href="http://feeds.feedburner.com/NAMAFEED"><img src="http://feeds.feedburner.com/~fc/NAMAFEED?bg=000000&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0; padding-top:5px" alt="Fellow Readers" /></a></td></td></tr></table></center> <div id="news-letter"><span class="msg-box"></span><b>Sign up for our email news letter</b><form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"><p><input type="text" valign="middle" name="email" value="Enter your email address" size="25" maxlength="100" onfocus="this.value = '';" style="width: 140px; height: 21px; font-size: 11px; color: rgb(51, 51, 51);" gtbfieldid="2"/><input type="hidden" value="NAMAFEED" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Sign Up" id="submit"/></p></form></div>	<style>#subscribe {font-size:14px; color:#999;}.subscribetext {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy3KZhgRypJO2yM7SGwZUdg_sKKHvitvDLCYBwpyoRT5EYdvBtw7oShxqTRLLEM_WtEjEUCdX4kqdfyhfoqvq0nbf0NNhalY25eo9xboosNauBgIDfKyO4VBH2FiFOG26KQHvmci9cGdUs/s400/bullet.png) left no-repeat; padding-left:20px; margin-bottom:20px;}.subscriberss {line-height:35px; font-size:18px; border-bottom:1px dotted #CCC; padding-left:5px;}.subtext { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSwJMMwW3GbxNXun6gZw0jS8Zp3_IEJIo0ZegX5N13AEtHERrEelWgcPrD0Im7fBC47VEQ6IC2qrbNy1AbW3rsmhWz7U_F8glOkby5E9kpiGBcOy_4deeYNrBZbRL31x7YWupLswFDoiK7/s400/feed.png) left center no-repeat; padding-left:37px; padding-bottom:5px;}.twitter {line-height:35px; margin-bottom:15px; font-size:18px;border-bottom:1px dotted #CCC;}.twittext { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ4tb8r6FxO9J61sOKv4dUZIZX_glY4uOkoZrbtk68JOow3mjSgKalZ_VBUbIq-j8SSFmr9XGa79ye7cA2wB3ATYFkG8u_l8DrMD_FXiQOEQxLLshRJ0Kd5zaqrvLmuacv6b1dWW5RCcoL/s400/twitter.gif) left no-repeat; padding-left:42px;}.subscribemail {margin-bottom:7px; font-size:11px; font-family:Arial, Helvetica, sans-serif;}.subscribeinput{border:1px solid #CCC; width:180px; padding:3px;}.subscribesubmit{ background:#FB9E3D; color:#fff; border:1px solid #FFF; font-family:Arial, Helvetica, sans-serif; padding:3px; width:70px; -moz-border-radius:5px;}.facebook {line-height:35px;font-size:18px;border-bottom:1px dotted #CCC;margin:-10px 0 15px 0;}.facetext { background:url(http://www.longislandcateringhalls.com/i/facebook-icon.png) left no-repeat; padding-left:42px;}</style><div id='subscribe'><div class='subscribetext'>Subscribe to our newsletter updates!</div><div class='subscriberss'><a class='subtext' href='feedburner url here'>Subscribe via RSS feed</a></div><div class='twitter'><a class='twittext' href='twitter url here'>Follow us on Twitter!</a></div><div class='facebook'><a class='facetext' href='facebook url here'>Join Us On Facebook !</a></div><div class='subscribemail'>OR, subscribe via Email</div><form action='http://www.feedburner.com/fb/a/emailverify' id='subscribeform' method='post' onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target='popupwindow'><input gtbfieldid="3" class="subscribeinput" id="sub" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" /><input type="hidden" value="NAMAFEED" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input class="subscribesubmit" type="submit" value="Sign up" /></form></div>

1. Login ke Blogger.com, pergi ke Template/Rancangan > Tambah Gadget > HTML/JavaScript
2. Copy salasatu kode di atas dan paste kode tersebut.
   yang perlu anda ganti dalam kode script itu adalah NAMAFEED dan link ID Profile seperti Facebook, Twitter, Google Plus dll.
3. Klik Save/Simpan

Read more »

Bener Iklan Dengan Style CSS BuySellAds

Iklan Style BuySellAds

Memper cantik bener iklan dengan style BuySellAds berukuran 125x125 dan 468x60. Kesannya akan sedikit unik dan menarik pengujung untuk melihatnya, anda bisa melihat Demo dan screenshot di samping. Ini tidak mengunakan jQuery atau apapun javascript lain melainkan dari script CSS. Terkadang juga saya sering melihat di setiap Bener Iklan Blog yang berukuran 125px mereka megunakan pemasangan iklan sebagai image, maksudnya seperti screenshot ini.

Baik anda sudah melihat demonya dan apakah saya mengunakan image sebagai link pemasangan? tidak sama sekali dan lihat stylenya bagimana sedikit unik bukan. Langsung ke topik cara penerapan.

1. Login di Blogger.com, pergi ke Template/Rancangan > Edit HTML
2. Tekan Ctrl+F cari kode ]]></b:skin> copy kode CSS berikut ini paste diatas kode ]]></b:skin>
   /* Ads---------------------------------------------*/div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}html>body div.bsap_125 a.adhere{width:123px;height:123px;}div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}div.bsap_468 img{border:0;clear:right;}div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}html>body div.bsap_468 a.adhere{width:466px;height:58px;}.bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}.bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}.bsap .even{margin-right:0!important;}.bsap .ad1{background:#e42b2b!important;}.bsap .ad2{background:#ff8400!important;}.bsap .ad3{background:#a800ff!important;}.bsap .ad4{background:#49a7f3!important;}.bsap .ad5{background:#41d05f!important;}.bsap .ad6{background:#B24700!important;}.bsap .ad7{background:#FFE500!important;}.bsap .ad8{background:#007D47!important;}.bsap .ad9{background:#330000!important;}.bsap .ad10{background:#990000!important;}.bsap .ad11{background:#f70000!important;}
3. Selanjutnya klik Save Template Belum Berakir!
4. Pergi ke Elemen Laman > Tambah Gadget > HTML/JavaScript Masukan kode berikut
   
   Untuk Iklan Bener Ukuran 125x125
   Bisanya lebi bagus kalau diletakan di sidebar dengan ukuran lebar minimal 300px
   

   <center>
   <div id="bsap_125" class="bsap_125 bsap">
   <a href="#" class="ad1" title="video screen capture" id="bsa_1451626" target="_blank"><img src="http://s3.buysellads.com/1247056/82764-1320885024.gif" alt="video screen capture" height="125" width="125" /></a>
   <a href="#" class="ad2 even" title="Premium plugins for WordPress" target="_blank"><img src="http://s3.buysellads.com/1250333/71206-1312344285.gif" alt="Premium plugins for WordPress" height="125" width="125" /></a>
   <a href="http://donorilmu.blogspot.com/" class="ad3" title="DonorIlmu" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhljvOYfn8CnOEPP4HdAJsIu7KqcDCNcHmO8alItPfHm4_K80BCoLk3KzUCSnLN9-DFTO_ABOtD_Q966yHiG71VfCE7RFCwnWXfR89AavTrHMADfXTFBgjNf6Igl8ZlJxv5o5XB7O23L4o/s1600/donor.jpg" alt="DonorIlmu" height="125" width="125" /></a>
   <a href="#" title="Advertise Here" class="adhere ad4 even" target="_blank">Advertise Here</a>
   </div>
   </center>

   Untuk Iklan Bener Ukuran 468x60
   

   <div id="bsap_468" class="bsap_468 bsap">
   <span class="bsap_468 bsap"><a href="#" title="Advertise Here" class="adhere ad1" target="_blank">Advertise Here</a></span>
   </div>

   -Warna Hijau Link Bener Iklan,
   -Warna Oranye Judul Bener Iklan,
   -Warna Biru Link Bener Iklan Gambar,
   -Warna Kuning Link Pemasangan Iklan,
   -Warna Ungu Judul Pemasangan
   -Dan yang bergaris bawah seperti ad1,ad2,ad3 dan ad4 ini menujukan background radius berwarna. Misalnya ad1 menujukan warna merah dan ad2 meujukan waran oranye dan seterusnya sampai ad11,
   -Kalau class even menujukan posisi iklan di sebelah kanan dan adhere meujukan class Pemasangan Iklan
5. Langkah terakhir klik Simpan

Read more »

Koleksi Style Buku Tamu

Banyak sekali sekarang Buku Tamu dengan berbagai gaya dan fitur seperti Melayang (kanan, kiri, bawah, atas), Sembunyi, Folting, Tanpa di Klik Terbuka Sendiri? dan masi banyak lagi. Semuanya bagus-bagus, namun dari beberapa Buku Tamu yang saya temukan ini sudah tren di kalangan para blogger.

Floating Kanan	Floating Kiri
<style type="text/css">#gb{position:fixed;top:50px;z-index:+1000;}* html #gb{position:relative;}.gbtab{height:100px;width:30px;float:left;cursor:pointer;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jDBL4YlNOOIAPnu96QbKzJEAweg1CQ69Y0MQVwaP5eDwECWAXLMDKuTSyaUErz7p54UKjY_89hLBQ7uNF242Z5Ijnac7g-GhjAgn80b30p_eBydSR_rx1vhO5AbfoIOpoqoU8Dkq6m-S/') no-repeat;}.gbcontent{float:left;border:2px solid #A5BD51;background:#F5F5F5;padding:10px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent"><!-- Ganti ini dengan kode buku tamu kamu --><div style="text-align:right"><a href="javascript:showHideGB()">[tutup]</a></div></div></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (30-gb.offsetWidth).toString() + "px";</script>	<style> #hcl { position:fixed; top:50px; left:20px; z-index:+500; } * html #hcl {position:relative;} .hcltab { height:200px; width:35px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4p0khRH_7Sj783-9-7Xq2WcSrBwbTtvfLAtwlFfcgpHnetqqq9hIs_bTzx4bA6Iu5yl6JCy0Y1IURQOQJcqQv4kf473t9wvqrv129t3cjoNE645XvB0ugNW8vBCUAQwzFPMcjf3xVvF0i/s1600/tabs.png') no-repeat; } .hclcontent { float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:3px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent"> &lt;!-- Ganti ini dengan kode buku tamu kamu --&gt;<br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> </span> <span style="float:right"> <a href="javascript:showHidehcl()"> [close] </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div> <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script></div>
Flash	Slide
<style type="text/css">.gb_fixed{position:fixed; top:60px; right:0px; z-index:+10}* html .gb_fixed {position:relative;}#hidden_gb2{display:none; background:transparent; padding:10px; padding-top:10px; border:1px solid #ccc; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg)}#hidden_gb2:hover{background:url("http://i55.tinypic.com/8x1xlt.gif") no-repeat scroll 0 0; background-position:top center; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg)}</style><div class="gb_fixed"><table cellpadding="0" cellspacing="0" id="hidden_gb2"><tbody><tr><td><div><a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLWT456MuSL7QOCHrwQmGrowVSfg7vpVUGfKWGSMCu4V-ga5Bwabk8RbK85rplQa1GoMPEWDfgkKXZ2cPnOYVpsbBs9gieNT7pbBXV7IPlQ1pbYM4QUpOhnbtoIRZRA9r6F4ELik1IN968/s1600/CloseButtonHot.bmp" /></a></div><!-- Ganti ini dengan kode buku tamu kamu --></td></tr></tbody></table></div><script src="http://donor-ilmu.googlecode.com/files/floating.js"></script><div class="gb_fixed" style="z-index: +5;"><a href="javascript:void(0)" onmouseover="gb_showHideGB()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBkubpka7C4_msQbHU4bNOv6lgFfxKU60jlfySt9CcgxihQ6IQfOsSf7kvMm7YCOax1hze2V0s2jHVRW7QVYo2g07z8-eOMbzeBdwB6xP16nsbGM8j3nyWGplYY3pqGeuHphCx0fDwhR2P/s1600/chatbox.png" style="filter: alpha(opacity=60); opacity: 0.6;" /></a> </div>	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".btn-slide").click(function(){$("#panel").slideToggle("slow");$(this).toggleClass("active"); return false;});});</script><style>/* ---------------Simple Slide panel with jQuery---------------------------------- */#panel {height: auto;background: #f90;width: auto;display: none;padding: 7px;border: #0C0;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-topleft:10px;-webkit-border-top-left-radius:10px;-moz-border-radius-bottomleft:10px;-webkit-border-bottom-left-radius:10px;}.slide {margin: 0;padding: 0;border-top: solid 4px #f90;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMUV0wPKNugQntzTWBirpWe3zF2y8_HF40nXO8447WirdWHrQLTQiAZkR2NFWAn95UnzoBomE_y_zCqGTtd42qysNctO21kW_WUloGb6wr0Gme00mN9vg8OXrkfFNhogxrJHnVxrtxXtw/s1600/btn-slide.png) no-repeat center top;}.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirhXmBVdBzOuRKHR5m-y8mMP_AmIl_T3MK4xOOC4vvNqO25vMCBLpoBiwpgtJj1Qg4KcNVeeToi8BY9Mr15UhJ7nw2s219OWl0btxMCrgqAUXLpr4jmyIYxEjrLglyynE5gzsH0mUGFqg/s1600/white-arrow.gif) no-repeat right -50px;text-align: center;width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;color: #fff;text-decoration: none;}.active {background-position: right 12px;}</style><div id="panel"><!-- Ganti ini dengan kode buku tamu kamu --></div><p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

Cara memasangnya di blog anda sangatlah mudah cukup ikuti langka berikut

1. Login di Blogger.com, Klik Layout





2. Klik Tambah Gadget, Pilih HTML/JavaScript





3. Masukan Kodenya, Ganti Script
   

   <!-- Ganti ini dengan kode buku tamu kamu -->

   Dengan Kode Buku Tamu anda, Klik Simpan

Read more »

Kontrol Ukuran Font Blog

Sebagai seorang blogger, saya tahu bahwa seorang pembaca dengan berbagai ukuran layar yang berbeda, Jadi ukuran font harus cocok di setiap pembaca, tidak peduli ukuran layar nya, atau ukuran favoritnya,Hari ini saya menyajikan salah satu widget yang paling sesuai untuk blogger. dan saya pikir Anda akan menyukainya dan menikmati menggunakannya, widget ini akan memungkinkan pembaca anda untuk mengubah ukuran font posting blogger Anda yang mereka inginkan, lebih besar atau lebih kecil, dengan cara yang mudah sederhana dan cepat tanpa refresh halaman, karena widget ini menggunakan teknik j-query. Jadi mari kita lihat bagaimana Demonya dan cara pasangnya.

1. Pastikan sudah Login di Blogger.com, jika sudah klik Rancangan,





2. Klik Edit Html





3. Cari kode </head> caranya tekan Ctrl+F, masukan kode dibawah ini taruh diatas kode </head>
   <script src='http://sites.google.com/site/ciudadbloggerfiles/Home/mootools.js' type='text/javascript'></script><script type='text/javascript'> window.addEvent('domready', function(){var el = $('myElement'), font = $('fontSize');new Slider(el, el.getElement('.knob'), { steps: 35, // Tamaño máximo de la letra range: [8], // El 8 es el tamaño mínimo onChange: function(value){ font.setStyle('font-size', value); } }).set(font.getStyle('font-size').toInt());}); </script><style type='text/css'> div.slider { width: 97%; height: 26px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVKvPq3VfN4YE9bn3fbJd_x7_swTYMA8B_KkQIWpcBC2wKhGdc80fsSu39SnkfMgWddcsuIaHXr9ARy4UNUud6xAvUBjXt1JH14w33O1IZsIuT9J9ZdQhOzz2Xr24FpaJUVPB3sGD9hEw/s1600/slider-bg.gif) no-repeat right top; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:1px solid #708B95; margin-top:40px; } div.slider div.knob { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAxSiAI_oKReANHTXs1JaJJ5WWHi_oHn3sin7PbS570tholAMC_mqfnWDkux1xWa84_5_BMsSHG6_dyPFXQAYNzCs4kuRX0xpz6ixgHztRT94v29xnOzaowhQVg4nsbC-tOhVdVc7E5e0/s400/allblogtools-pin.png) no-repeat; width: 32px; height: 47px; margin:-35px 0 0 0; cursor: move; } div#fontSize { height: 40px; } </style>
4. Langka selanjutnya cobalah untuk menemukan kode berikut atau yang mirip dengan itu,

   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section>

   Dan Anda harus menambahkan kode sederhana sebelum dan sesudahnya, Jadinya akan seperti berikut,

   <span id='fontSize'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section>
   </span> 

   Jadi Yang harus Anda lakukan dalam langkah ini adalah untuk menambahkan hanya teks biru sebelum dan setelah kode. Sekarang klik Simpan Template 





5. Eeets belum selesai sampai disini, masih ada lagi loh, langkah selanjutnya adalah menambahkan Gadget di Elemen Laman, Caranya klik Elemen Laman





6. Klik Tambah Gadget (nantinya akan muncul jendelah baru)





7. Klik HTML/JavaScript 





8. Masukan kode dibawah ini di kotak HTML/JavaScript
   

   <div id="myElement" class="slider"><div class="knob"></div></div>

   
   
   
   
   
9. Klik Simpan, baiklah selesai sudah dan lihat hasilnya pada blog anda apakah sudah berhasil.

Read more »

Pasang Tag Cloud Dengan Gaya Flash

Hi semua, blogging blogger platform secara default memberikan Anda kemampuan untuk menambahkan Label bagi posting Anda, sehingga Anda dapat menambahkan dan menampilkan Label blog Anda di sidebar. Tetapi karena kita semua ingin agar blog kita terlihat bagus bagi pengunjungnya, maka kita perlu memberikan label dengan gaya yang baik, Jadi sekarang, kita akan belajar bagaimana menambahkan widget label tag cloud dengan bergaya flash. Baik kita mulai dari  pertama

1. Pastikan anda sudah login di Blogger.com, jika sudah klik Rancangan

2. Klik Edit Html

3. Contreng Expand Template Widget

4. Cari salah satu dari kode di bawah ini caranya tekan Ctrl+F

   <b:section class='sidebar' id='sidebar' preferred='yes'>

   <b:section-contents id='sidebar-right-1'>

   <b:section-contents id='sidebar-left-1'>

   Jika sudah menemukan salasatu kode di atas, sekarang copy kode di bawah ini dan paste kodenya di bawah dari kode yang anda temukan di atas.

   <b:widget id='Label99' locked='false' title='Labels' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div class='widget-content'>
   <script src='http://donor-ilmu.googlecode.com/files/swfobject.js' type='text/javascript'/>
   <div id='flashcontent'>flash tag cloud </div>
   <script type='text/javascript'>
   var so = new SWFObject("http://idub.007sites.com/donor_ilmu/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
   // uncomment next line to enable transparency
   //so.addParam("wmode", "transparent");
   so.addVariable("tcolor", "0x333333");
   so.addVariable("mode", "tags");
   so.addVariable("distr", "true");
   so.addVariable("tspeed", "100");
   so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
   so.addParam("allowScriptAccess", "always");
   so.write("flashcontent");
   </script>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>

   Teks yang berbackgroun biru untuk menggatur Lebar dan Tinggi, jika yang berwarna merah dan kuning untuk mengatur Background dan mengatur Warna Teks, kalau warna hijau untuk mengatur Ukuran Teks
5. Langkah selanjutnya adalah menyimpanya, Klik Simpan Template, semoga berhasil

Read more »

Widget Translate Dengan Tiga Style

Saya yakin bahwa kita semua bukan dari negara yang sama, dan kita semua tidak bisa membaca dan memahami semua bahasa di dunia, dan diri saya sebagai blogger, kadang saya ingin menerjemahkan beberapa blog dari berbagai bahasa ke bahasa Indonesia. Cara biasa yang saya lakukan adalah dengan menyalin url halaman dan kemudian saya pergi ke google translate dan urlnya saya paste disana lalu saya tekan enter. Pajang bukan, semua ini bisa pendek jika situs atau blog yang kita kunjungi meyediakan widget translate dan bisa memudahkan bagi pengunjung lain utuk menterjemahkannya langsung. Disini saya punya 3 tampilan anda bisa pilih sala satu. Baik cara pasangnya sangat mudah.

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>

<style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; } </style> <div> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQt19nSe6WUBp6nvnUdmlViMBngK2YFwRepwPTvZYjG0WFwXZWlaEnJOdQKSAU4m8OvniY9XMSQdymfTkHINfc_sXFAmeJtg_OP0c0VKTY1z5uwcshuTZagyrD6Wcv2GuvCwuT9bUPlYw/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCcFRXP7C3xDctORoN3zd_7GOUlMGKugWZ5X7V4MW0p5A86ErRx-yiiBHi418EBGKjQr3Wv4UGlJcAMpdemkzrITuqwCn2sBJ2fIyaVYKpDo-Nzmy4M8BLEudmfK1wSRPgMVmTM_wUMnc/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5ugQixrx3qZ0L8z6cT35a7f2i_NDqyBYrTKhJaXMqpS1UZIBjlxdsaz8spHdY0WAqESZMFrZtNkLfaJW3gZqDrettqnUwO4NzaZZ3uo1iBE7o6v2lBIqYra9n7IK3wKnZ3z-r4zfQ4EI/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBJpsJp6jJRVDD4cdc_HkDgGXaPAHtET7tC4gB9qfNCF-ySR7Dgn1FZBCL4mAlTuVZyDr9nN4LC7iNKKG5GYzTRXXh3oV_1Sbog53Kz-8Uk7XdOYkocK5vSC2-_JK_nKZ-4ktz359oUFQ/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9dYvSNFEQ_3JdbmeULKf7S6snUigXoH9INdGpdYljg42NakhpZYzjwCGgBwP3fKFbg2XYf4QlSsh-9bpgesid4y3zL_xjGpgfb7J4w9SOgNu3SMwvnSZimesZstxENMqRy8kUDHtX1tQ/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk_9lPTJVQ0YAiK4fBhPeUV0CJgdq8dQKX91YvKlr0iDYRttxFB8nKmFXlktoKfKOZ98d0HGUKyotxlMrRfTUWduvqq2p-rlSsg6x37nVUwHqAF4N2aBszrynGxqqUbDlcSvmfBlrZWxA/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivLUGOBhAuwkvktmJwL1SbAZvDKz5KPzfHBr8rbz8qZN0KMHMAuYzx0euo9ec7UP-iGVV51OFEKPGzvECvYnSFBm-b53UrNwsZ9f3nDHFCOv-FPf4yHrIdal0PQPanKQuEMMBzJzsw6Jc/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuP4xWdSYF_MapZ4cCkf1XbFAnKdcvpbEE9gdenM3DPr046fyVMu0EZp8I9L4dJdi9KVpL8dCUyYpGZfahpdya62x73Qh96RQwpqsqNCdSeFamHTInjD2pNzj-tajHl_hLw9y_B9lIHzI/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghzvciW39Ein4ucLV_ssZdR4RsNDgv7SRfEqF31UUaOPdvKKv30chQytwrZAht4I4lKEJxWurl7yegAV3dBv_Qj5mWdLQQzIsOXNxYc3mk87lv9EGjwmLq3riPaj7XWsRyuZMLlZ3lOEo/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha0HGr66_LePudhpem6i_mmDs2QrN0T4pOEcV51I4HWvmLh0bzrtgBTQiXjsiIW1oRFjeQoPsY9L3vJ0VfVfN6N2Pk9MKNiqFSS3XGiHH8iKV1Kn0Lo1JHjQcdLMdJY768vLDgg2jP9LE/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV_Gyv5lsRfWYldpugTD7-SWQOLPncl3ZjnhX2gwxtFuefMdqwrRNYEELpbq0IrAX9UY9enFQfdrSmqWb8pg2RNY-OMBhw37OPKwBaPAsTbtbr0kSOL7ZMYFGmfnuo5kOzooheZGQl7Vw/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkGfg_jd7EkEZ8GSPuGnur9FQhkmC4QgHgpDhnWwYgzdWjH6QizjCiUkJ2hMAn9SXUUuPn1vZ8xaDsq4hpsDnBgneGa7Nxo9dY5LNpCC-0QTdWhzGZHIzoG-GQtHIJ3Pr7QliseSzvCag/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a> </div> <div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div>

<style>.translate img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;border:0;padding-left:0px;}.translate:hover img {filter:alpha(opacity=50);-moz-opacity: 0.50;opacity: 0.50;border:0;}</style><div style="text-align:center"><a class="translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzf1nZ_ZvVaZglTjYylewQNr4Vv6vI4asDS6iGuEt46aEkXXnxKMLjcbLMjy_zGjXVGQcd8NU5iUFo0UYKJJkmDr91zvBZg7TBe6ewMHhB9tgSHqbgcmhTC07hEaDcpr92iNVHkaye2Ra/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDoArbaKffMzpAh4leHAWVvP5vnEp77IwrNFGRuDm7GFf2UQ7LuD7zT6SdjnJs7nXLWl-TcGdyyrKNba5LC5DVzUFvRoRLgEvojxP47dFuujDMFA_YYn91M3Y7MbJFJaBpW7QbCpS8ThQy/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7TV9rYni2yoQAY2EeanAt029uR_CkCxGLpSlsAp7itESbQ3Idm_vwDjWNGI1L_O4177jBRg9zS26ZjbeE4Me5tx5F7GBS4hbuv_0IUarXsbqB4ZHO_cQrVHpcU_ZqH5qfJkm8ETjuo9P/s144/german-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUI_juJIoNFCZJqe76vWfF_HCa9UF7li8J0LS14uPdNtcLNSiPBBV_xoQxA4nN61lzOmIBjL0HRkQ_yo11OR_q6ZYvJyBL50Ni5f936qvHkpU-N4vB0wnF4j5ZBKSfB-bOxGv0mau3Rk_e/s144/spain-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvgstZdi7WYrPx6jM9CZoW_E2B3qp5MHzefLnCI_-NT8iEpEuBpQsMKosQK370wDRX2z2Xz0Uzgds2gj333vAtZqe2T8R3xUmJUXNadRrQeTBm6vlWNPF-x2FF8sIRtwmaMNJ6G-v1OKD/s144/italy-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOVQCvoJcn_kM3kLHWj3SOXJYUO1augWo3J2nDOWlt33OgjMGy9D3yry8DjScUJ_ya_MoEXevbHRlTlT6SSrdxtdiNmn3l_NY4cpkIxFvuCgy4SY_XBenGVOUcpajFrc7tdgUUsk6mxOAf/s144/dutch-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br/><br/><a class="translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimX6Sp6V6p1Cce8YiQrezgL-FbexRKkdE10QOmDVVaohp0_6buUXZqAyeZkMaPoZMe2QJUlWSAVD3kQPAxIfaTL-aa5FxNE2HBbykejA_xtCn5ZVY2WHPOmwFsdfRTzxPCGW9MClsPJyvW/s144/russian-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="translate" href="#" target="_blank" rel="nofollow" title="Brazil" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Brazil" border="0" align="absbottom" title="Brazilian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiX6rsEHzupyBzHqQB5AcKp1GgXMEdnNWqvOit4d2VN9efjotZjqedfi5irylrjyeSbJwaYu3V5qdyHb6A-grAlkrziUoXZMV9o03CH1FVfjd0LwsZkVwTdpk9i_hyj-wSZUBU3NI1foQ9/s144/brazil-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1uc1YW118vo-wITXJ3Bar_HNZz-hindcaxQHed-StpPVfm06HX4Ngjq3ta2G6NtjvYEHUjvFffqu0ggPrZWUNP05ngJvFkyVvPOVFrgrtM15B1Mqfx4d9vXARBaUFZgK-r0-wZkkmekz/s144/japan-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj06zcPbMGTcAnhgvIthyphenhyphenNllxqlltYEuX0-pzk-vmA-NY1WVFv7Ahz7HirI39FOyMfvEZtustYbfVt7gAsUdPnD9cMtwopFA6Mi7uGwrfjBiUNWQG57mzZvK15K9Mot9V9fLH04H8gA0S79/s144/korean-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAj9NAUwZMa_-ur0al8e2bPyhM6G5TRLXefrFsjrO2ekAgwAYLjh7CABOvVKHOOGuh6E3ZXkMwkqJrO6ydLDZUN5KVOXuDZlGEBNz54Z5i3JcMQObBqO_6nan3cGj4WM7x13lB98Uqjwde/s144/arab-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a class="translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVKrYIB0lYEX23vW_YJQjNjJ4Bs_wCkhohwCJrk-aCMPV-7zvgdkfKJNn0hBBnxeFK9nGTZsZMfAvYIyEI1NzSoKXkCX-RdKdn8pWLmSmVhAyy3yVLBwFRpNYXbPJOoGJW1y9NhcFPyNSv/s144/china-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

1. Pastikan anda sudah Login di Blogger.com, jika sudah Klik Rancangan



2. Klik Tambah Gadget, maka akan mucul Jendela Baru



3. Klik HTML/JavaScript



4. Pilih dan copy salah satu Script yang di atas, paste di dalam kotak HTML/JavaScript.
5. Setelah di paste Scriptnya, Klik Simpan

Read more »

Widget Berbagi Dengan Gaya OS X Dock

Karena saya suka jQuery, saya berpikir tentang mencoba untuk menyesuaikan widget berbagi baru khusus untuk blogger yang menggunakan fitur jQuery dan bergaya seperti OS X Dock, Anda pasti akan menyukai widget ini. widget ini baru muncul awalnya dirilis oleh AddThis.com, Sebelum memulai anda bisa melihat dulu hasilnya bagaimana Demo. Jika tertarik, Baik kita mulai untuk cara memasangnya di Blog anda

1. Pastikan anda sudah Login di Blogger.com, jika sudah langsung saja klik Rancangan.





2. Klik Tambah Gadget, nantinya akan mucul Jendela Baru





3. Klik HTML/JavaScript





4. Copy Script di bawah ini. Paste di Kotak HTML/JavaScript

<style type="text/css"> #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; } #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; } .dock-container { position: relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihFL2ZYwN9PiyN2jMqwAeuy0x6H-uhDxevypxOUPiYHb9YKVn4AWFXItUpoGNk3PNxtGJQK_b93cpmvNoWlAe6f0ovDE1lJqu_oV5GvgcpUC_KRXeVYmOEQy-ABJec_l7qnZyuA6EAbSs8/s1600/widget-bg-donorilmu.gif) no-repeat bottom center; height: 50px; padding: 20px 0 20px 0; } .dock-container .custom_images a { display: block; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; } .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .dock-container .custom_images img { border: 0; margin: 5px 0px 10px 0px; width: 100%; } </style><div id="sharedock"> <div id="dock"> <div class="dock-container"><div class="addthis_toolbox"> <div class="custom_images"> <a class="addthis_button_facebook"><span>Facebook</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a> <a class="addthis_button_twitter"><span>Twitter</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a><a class="addthis_button_myspace"><span>MySpace</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a><a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a><a class="addthis_button_reddit"><span>Reddit</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a><a class="addthis_button_delicious"><span>Delicious</span><img src="http://addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a> <a class="addthis_button_more"><span>More...</span><img src="http://addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a> </div> </div> </div> </div> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script> <script type="text/javascript"> $(function () { // Dock initialize $('#dock').Fisheye( { maxWidth: 30, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 50, proximity: 60, alignment : 'left', valign: 'bottom', halign : 'center' } ); }); </script>
5. Selanjutnya Klik Simpan

Read more »

Pasang Chat Ala Facebook di Blogger

Hemm bicara soal tentang Facebook, jadi ingin Pasang Chat Ala Fcebook di Blogger. Tapi chat nya bukan dari server Facebook melainkan Chat yang banyak di gunakan para Blogger 'shoutmix.com' sudah umum banget chat ini di kalangan Blogger. Tapi bisa kok gak pakek shoutmix, ada banyak server chat. misalnya Shoutbox, Xat, Chatango dan masih banyak lagi. Mungkin sebelum di Pasang di Blog, bisa coba anda lihat dulu hasilnya Demo. Bagaimana? kalau tertarik... yuk kita pasang di Blog.

1. Pertama-tama pastikan anda sudah Login di Blogger.com. jika sudah Login langsung saja Klik Rancangan.





2. Klik Edit Html





3. Cari kode berikut ]]></b:skin> caranya tekan Ctrl+F. kalau sudah ketemu Copy kode CSS di bawah ini dan Paste di atas kode ]]></b:skin> tadi.

   #facebook {
   position:fixed;
   right:15px;
   bottom:0px;
   width:462px;
   float: right;
   }
   #bukutamu a{
   color:#fff;
   text-align:left;
   width:450px;
   padding:5px;
   display:block;
   background:#6d86b7;
   }
   #obrolan a:hover{
   background:#FAFBFB;
   outline:none;
   }
   #obrolan a{
   outline:none;
   border:1px solid #ccc;
   text-align:left;
   width:180px;
   padding:5px;
   display:block;
   background:#EDEFF0;
   float: right;
   }

4. Selanjutnya cari </body>. taruh kode dibawah ini di atasnya </body>
   

   <script type='text/javascript'>
   function showElement(layer){var myLayer = document.getElementById(layer);if(myLayer.style.display==&quot;none&quot;){myLayer.style.display=&quot;block&quot;;myLayer.backgroundPosition=&quot;top&quot;;} else { myLayer.style.display=&quot;none&quot;;    }}
   </script>
   <div id='facebook'>
   <div id='vcxz' style='display:none; border:1px solid #999; background-color:#FFF;'>
   <div id='bukutamu'>
   <a href='#bottom' onclick='javascript:showElement(&quot;vcxz&quot;)'><b>Buku Tamu</b></a>
   </div>
   <iframe frameborder='0' height='350' scrolling='auto' src='http://www6.shoutmix.com/?acan_on_skyes' width='100%'/>
   </div>
   <div id='obrolan'>
   <a href='#bottom' onclick='javascript:showElement(&quot;vcxz&quot;)'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl2ZNCQE8bsI-NyfRpuQk8t_V_sdHyQ8CA51xrZeYCj5HVoPf4gV0J7KwKOm7IQw1WHK3XwQSP4326gU5RGjAJ5DnGo6Jpbyz0ojk8QvVgwNZR2IMOhLoRrtul9oqb5uz6EfbsAg3kzm4/s1600/c.gif'/><b>Obrolan</b></a>
   </div>
   </div>

   Ganti teks yang Berbackground biru dengan link Chat anda.
5. Setelah diganti, Klik Simpan Template. selesai, dan lihat hasilnya pada Blog anda.

Read more »

Mengganti Pencari Blog Menjadi Google CSE

Dengan Google CSE, Anda dapat memanfaatkan kemampuan untuk menciptakan pengalaman penelusuran yang diubahsuai untuk situs blog Anda. Daripada mengunakan yang search?q=katakunci lebih enak Google CSE kalau menurut saya lebih terindeks postingnya, anda juga bisa merubah tampilannya CSS sesuai keingin anda. Kelebihan dari Google CSE ini adalah :

• Penelusuran hasil yang cepat dan relevan
• Menelusuri seluruh tautan, bookmark atau blogroll dengan Penelusuran seketika secara otomatis 
• Menghasilkan uang dengan AdSense untuk Penelusuran
• Mengundang teman dan komunitas Anda untuk berkontribusi

Anda bisa melihat contohnya di Blog saya ini, ada di bagian atas kanan anda.  Bagaimana tertarik untuk menggantinya dan memasangnya, Baik kita mulai dari pertama.

1. Sebelum memulai pastikan anda sudah Login di Gmail atau Akun Google, kalau sudah klik ini Google Custom Search lalu klik Buat Mesin Penelusuran Ubahsuaian





2. Setelah itu isi data-data yang sudah tersedia disitu seperti
   • Nama (nama blog anda)
   • Deskripsi (deskripsi tentang blog anda)
   • Bahasa
   • Situs yang akan di telusuri (misalnya http://donorilmu.blogspot.com/)
   • Pilih yang Edisi Standar
   • Centeng Saya telah membaca dan menyetujui
   Lalu klik Lanjut 





3. Selanjutnya anda bisa ganti Tampilan atau Gaya dari mesin Pencari anda, kalau sudah pas dengan keinginan anda silakan klik Lanjut





4. Berikutnya copy kode di kotak tersebut





5. Ambil ID CSE nya saja. MISALNYA kode yang saya sudah di copy. Cukup copy yang berbackground biru.

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

6. Selanjutnya paste ID CSE di 'value=' dan 'cx=' seperti contoh di bawah ini.
   

   <form action='http://www.google.com/cse' id='cse-search-box'>
   <input name='cx' type='hidden' value='002957745702833100939:uaykwpyh3by'/>
   <input name='ie' type='hidden' value='UTF-8'/>
   <input class='keyword' id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel..&quot;;}' onfocus='if (this.value == &quot;cari artikel..&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel..'/>
   <input id='searchsubmit' type='submit' value='Mencari'/>
   <input name='siteurl' type='hidden' value='www.google.com/cse/home?cx=002957745702833100939:uaykwpyh3by&amp;hl=en'/>
   </form>

   Stelah di paste di 'value=' dan 'cx=' seperti contoh diatas, lalu copy semua kodenya taruh di Template blog anda atau di Gatget anda. dengan cara sebagai berikut
7. Pastikan anda sudah Login di Blogger.com, kalau sudah klik Rancangan





8. Jika ingin ditaruh di Gadget tinggal Tambah Gadget. jika ingin ditaruh di Html Klik Edit Html





9. Taruh di Mesin Pencari anda (yang lama). Jika sebelumnya blog anda belum punya Mesin Pencari taruh aja di Gadget. kalau sudah punya ganti mulai dari pembuka <from> sampai penutup </from>. terus klik Simpan Template. selesai ( jika tidak begitu mengerti silakan tinggalkan komentar)

Read more »