Membuat Link Berbintang-Bintang | Tutorial Blog

Kali ini saya akan berbagi tentang salah satu cara untuk mempercantik blog, yaitu Membuat Link Berbintang-Bintang saat di sentuh cursor. Cara lainnya sobat dapat Membuat Efek Bintang Pada Kursor, Membuat Tombol Share Post Melayang, memasang Widget Google Followers Show Hide, dll.

Berikut Cara Membuat Link Berbintang-Bintang :

1. Login ke Blogger, Klik Design/Rancangan > Edit HTML.
   
2. Beri tanda centang pada Expand Template Widget.
   
   Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
3. Cari kode :
   a:hover {
   color:#0000ff;
   text-decoration:underline; 
   }
   Akan lebih mudah jika Anda mencari a:hover saja.
4. Jika sudah ketemu ganti kode yang berwarna merah dengan kode di bawah ini.
   { background-image: url(http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/dip.gif);}
5. Terakhir klik SIMPAN / SAVE TEMPLATE.
   

Sekian Tutorial tentang Membuat Link Berbintang-Bintang.

Membuat Widget Follow Twitter Melayang | Tutorial Blog

Membuat Widget Follow Twitter melayang ini sangat mudah karena kita tidak perlu pusing mengutak atik HTML template kita. Kita tinggal memasukkan ke dalam widget sidebar.

Berikut langkah memasang Widget Follow Twitter melayang :

1. Login ke akun blogger anda.
2. Pilih Design/Rancangan > Page Element/Elemen Halaman.
   
3. Klik Add a Gadget/Tambah Gadget.
   
4. Pilih HTML/Java Script.
   
5. Silahkan Copy kode berikut dan paste didalam konten HTML/Java script nya
   <script type="text/javascript" src="http://tutorial-blog.googlecode.com/files/twitbird.js"></script><br /> <script type="text/javascript"> var birdSprite="http://4.bp.blogspot.com/-jmMHmT3wOak/Tam8b6aBLkI/AAAAAAAABBg/goBeWfPYRYw/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/m4d13";var tweetThisText = "Official blog twitter page ";tripleflapInit();</script>
   Ganti tulisan yang berwarna merah dengan url twitter Anda.
6. Terakhir klik Save.
   
   Silakan lihat hasilnya di blog Anda.

Sekian Artikel tentang Membuat Widget Follow Twitter Melayang.

Widget Google Followers Show Hide | Tutorial Blog

Widget followers pada umumnya memperberat loading blog, karena itu pada tutorial ini saya akan berbagi cara membuat widget followers yang lebih ringan dengan mode Show-Hide.

Berikut cara Memasang Widget followers yang lebih ringan dengan mode Show-Hide :

1. Login dengan akun blogger sobat, klik Rancangan / Design > Elemen laman / Page Element.
   
2. Klik Add a gadget / Tambah Gadget, dan pilih HTML/Javascript.
   
3. Letakkan kode berikut didalam area konten;
   <style type="text/css">

   #fl{position:fixed; left:150px; z-index:+1000;}

   * html #fl{position:relative;}

   .flcontent{

   float:left;

   border:2px solid #676767;

   background:#dddddd repeat-x bottom center scroll;

   -moz-border-radius-topleft:15px;

   -moz-border-radius-topright:15px;

   -moz-border-radius-bottomleft:15px;

   -moz-border-radius-bottomright:15px;

   padding:10px;

   }

   </style>

   <script type="text/javascript">

   function showHideFL(){

   var fl = document.getElementById("fl");

   var w = fl.offsetWidth;

   fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);

   fl.opened = !fl.opened;

   }

   function moveFL(x0, xf){

   var fl = document.getElementById("fl");

   var dx = Math.abs(x0-xf) > 25 ? 35 : 1;

   var dir = xf>x0 ? 1 : -1;

   var x = x0 + dx * dir;

   fl.style.bottom = x.toString() + "px";

   if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}

   }

   </script>

   <div id="fl">

   <div class="fltab" onclick="showHideFL()"> </div>

   <div class="flcontent">

   
   

   Letakan Kode Widget Follow Disini

   
   

   <div style="text-align: right;">

   <a href="javascript:showHideFL()">

   [Close]

   </a></div>

   <font size="2"><a href="http://wadahtutorial.blogspot.com/"target=_blank"><div style="color: #eeeeee;">

   <span >Tutorial Blog</span></div></a></font>

   </div>

   <script type="text/javascript">

   var fl = document.getElementById("fl");

   fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";

   </script></div>
4. Selanjutnya buat kode widget followers-nya dengan google friend connect, untuk mengambil kode widget follownya silahkan ikuti tutorial Widget Followers Google Friend Connect
5. Setelah dapat kode-nya, paste kode tersebut pada area konten Widget Follow tadi (Ganti Letakan Kode Widget Follow Disini [kode yang berwarna merah] dengan kode Widget Follow dari google friend connect), Lalu Save
6. Terakhir, masih pada Elemen Halaman, klik Tambahkan gadget > HTML/Java Script sekali lagi, Kemudian copy paste-kan kode berikut ini:

   <a href="javascript:showHideFL()"/><img border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/fl.png" alt="Follow" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:30px;right:50px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="49px" width="130px" /></a>

7. Save dan lihatlah hasilnya.

Selain mode Show Hide Sobat juga bisa memasang Widget Google Followers Static.

Semoga artikel ini bisa membantu sobat yang ingin Memasang Widget Google Followers dengan mode Show Hide.

Membuat Tombol Share Post Melayang | Tutorial Blog

Share button memang berpengaruh dalam mempromosikan artikel blog kita. Karena itu kali ini saya akan berbagi cara memasang floating share button pada blog. Dalam widget ini terdapat tiga share button, yaitu Twitter, Digg, dan Facebook, widget ini akan selalu melayang, sehingga akan selalu terlihat oleh pengunjung blog.

Berikut langkah memasang Tombol Share melayang :

1. Login ke akun blogger anda.
2. Pilih Design/Rancangan > Page Element/Elemen Halaman.
   
3. Klik Add a Gadget/Tambah Gadget.
   
4. Pilih HTML/Java Script.
   
5. Silahkan Copy kode berikut dan paste didalam konten HTML/Java script nya
   <style  type="text/css">  *{margin:0;padding:0;}  * html #z33sHare{ position: absolute; }  #z33sHare{ right:1%;width:  70px;background:transparant;border:0px solid  #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px; position:fixed; top: 20%; }  #z33sHare div{ padding:6px 6px 6px 5px; }  #stw{ margin-left:-2px; }  #sfs{ margin-left:-5px; } </style>  <div id="z33sHare"> <div id="ssl-box"> <div id="stw"><a  name="fb_share" type="box_count"  href="http://www.facebook.com/sharer.php"></a><script src="http://widgets.fbshare.me/files/fbshare.js"></script></div> <div><a  href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script  type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>  <div><script  type="text/javascript"> (function() {   var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];  s.type =  'text/javascript'; s.async = true; s.src =  'http://widgets.digg.com/buttons.js';  s1.parentNode.insertBefore(s, s1); })();</script> <a class="DiggThisButton  DiggMedium"></a></div> </div>
   <div  style="clear:both;"></div> </div>
6. Terakhir klik Save.
   
   Silakan lihat hasilnya di blog Anda.

   Membuat Efek Bintang Pada Kursor | Tutorial Blog

   Untuk mempercantik blog, mungkin Anda bisa menggunakan effect bintang berjatuhan pada cursor, trik yang satu ini akan membuat bintang berjatuhan dari cursor saat cursor digerakkan, walaupun menurut saya itu hanya tanda [+] yang berjatuhan. hehe...

   Untuk membuat efek bintang berjatuhan pada blog sobat dapat memasangnya pada widget HTML/JavaScript blog sobat, atau melalui menu Edit HTML.

   • Melalui widget HTML/JavaScript

   1. Login Ke Blogger. Pilih Design/Rancangan > Page Element.
   2. Klik Add a Gadget / Tambah Gadget. Pilih HTML/JavaScript.
   3. Masukkan kode berikut ke dalam area konten.
      <script src='http://wadah-tutorial.googlecode.com/files/red_star.js' type='text/javascript'/></script>
      Warna bintang diatas berwarna merah. Anda dapat menggantinya dengan warna lain.
      Berikut beberapa kode yang lain :
      <script src='http://wadah-tutorial.googlecode.com/files/yellow_star.js' type='text/javascript'/></script>   *Warna Kuning

      <script src='http://wadah-tutorial.googlecode.com/files/green_star.js' type='text/javascript'/></script>   *Warna Hijau

      <script src='http://wadah-tutorial.googlecode.com/files/blue_star.js' type='text/javascript'/></script>   *Wana Biru
   4. Terakhir klik Simpan / Save.

   • Melalui menu Edit HTML

   1. Login Ke Blogger. Pilih Design/Rancangan > Edit HTML.
   2. Beri centang pada Expand Widget Templates.
   3. Cari kode ]]></b:skin>
   4. Kemudian copy kode diatas dan taruh dibawah kode ]]></b:skin>
      penting : hapus tanda </script> pada kode tersebut.
   5. Terakhir Save / Simpan Template.

   Silakan dicoba dan semoga berhasil Membuat Efek Bintang Pada Kursor.