Membuat Widget 4 in 1 Jejaring Sosial Di Sisi Blog

Pada kesempatan kali ini, saya akan memberikan tutorial untuk membuat widget jejaring sosial yang anda di sisi blog anda yang bisa muncul ketika anda mengarahkan kursor kearahnya. Jadi keuntungan jika anda memasang widget ini adalah anda akan menghemat tempat untuk memasang widget-widget lainnya. Check penampilan widget ini jik sudah berhasil anda pasang, lihat gambar di bawah ini :

Jejaring sosial merupakan salah satu sumber untuk lalu lintas blog yang juga ampuh. Anda bahkan blog anda akan semakin populer dengan mempunyai fans banyak di setiap jejaring sosial. Maka dari itu disini saya akan membagikan cara untuk membuat widget ini. Sebenarnya mudah sekali caranya asal anda mau untuk mengikuti langkah-langkah di bawah ini dengan seksama :

Cara Membuat Widget 4 in 1 Jejaring Sosial Di Sisi Halaman Blog

Langkah 1 : Masuk ke blogger >> Dashboard >> Template >> Edit HTML >> Lanjutkan

Langkah 2 : Jangan lupa centang Expand Widget Template

Langkah 3 : Cari kode di bawah ini :

</head>

Langkah 4 : Copy kemudian paste kode di bawah ini kemudian letakkan tepat di atas </head>

<link href='https://blognpctricks.googlecode.com/svn/css/4in1widgetv2.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript' type='text/javascript'/>
<script src='http://makingdifferent.googlecode.com/files/fanbox_init.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });
</script>

Langkah 5 : Simpan

Jika anda sudah selesai memasukkan kode di atas, sekarang anda masuk dalam tahapan selanjutnya. Memasang widget pada template anda.

Langkah 6 : Masuk ke Dashboard >> Tata Letak >> Add Gadget >> HTML / Javascript

Langkah 7 : Kemudian copy dan paste kode di bawah ini dan masukkan ke kotak yang muncul tadi !

<div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQfP6eFgsG2rwHvJBBLKPCfiBsoNexXsJJn1H5p-zTOr8ImpM57FDLPFdm79WCg7pB03Gw6XEhXGo4mjSnTu58ZkgLf8ipi7f-h9cWVFGuEj4MoSYEGBLXAV6y4E2J76TJsr1E5URzBEA/s1600/bloggertricksdotbiz(facebook+right).png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggerkampusperjuangan&locale=en_gb&width=200&connections=9&stream=&header=false&show_faces=0&height=356" scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi1dDXmZPe39ufOACuFCFHKJijA6geZd45O0cpJttzYF-isDqZjDn9Njvhlqs60kQD2Kc4K_dH9upSbtv6Nz-KN4AzgZHN5AIJdDy7317HXtNvgbTFS2TH9KludXCOjDxukVMoLlaNgR8/s1600/bloggertricksdotbiz(twitter+right).png" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("sentotadipati");</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1JOQj8MFvtUjDyAuB81hrYW6m6UqE1u3JVqJIm_dAXi4DVDPvF3-vp0q4epIMqeqyPaYSoqPe86aBoqzH5szlREsSwhTQb7oZU5k7F_Pg17jW71x_N4YaNDG2R1qhvA5m-JtEqmpCeHg/s1600/bloggertricksdotbiz(google+plus+right).png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#f66303;">you can also receive free email updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cofeemix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="enter your email here..." onblur="if (this.value == '') {this.value = 'enter your email here...';}" onfocus="if (this.value == 'enter your email here...') {this.value = '';}" type="text" /><input value="cofeemix" name="uri" type="hidden" /><input value="submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk0a-05-E-fYo17kk2OS0xX_c4P_QZW-YkCoML3C6JOsUdGnAWzwbtqT9qpTpztPh0ZwlmpgtdLQIhFEeeOKlhwgPKOOeYYKvFVMWYhNFmahLnQBfE-yB6cYcZHTalYlZoUApp2UY2mo0/s1600/bloggertricksdotbiz(subscribe+right).png " /></div></div></div></div>

Cara untuk mengeditnya :

# Ganti bloggerkampusperjuangan dengan id halaman facebook yang anda buat.
# Ganti sentotadipati dengan username twitter anda
# Ganti cofeemix dengan id feedburner anda.

Langkah 8 : Simpan dan lihat hasilnya.

Demikian cara untuk membuat 4 in 1 jejaring sosial widget di sisi halaman blog anda. Semoga anda berhasil untuk memasangnya di blog anda.

Post Tags:

social widget subscription widget

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.

Website: http://masala-jr.blogspot.com/