Rabu, Juni 27

Membuat Social Networking Button di Sidebar



Nah,gimana sobat?tertarik untuk membuatnya?caranya cukup mudah kawan,tinggal ikuti langkah dibawah ini,dijamin tanpa repot dan tanpa utak-atik kode ( bagi pemula ).Di Blogger Blog ini tak ada yang mustahil,semua pasti ada caranya,oke langsung aja ya,daripada banyak bicara,capek ngetiknya :
1.) Login ke akun blogger sobat
2.) Langsung menuju Dashboard > Rancangan > Edit HTML
3.) Download template lengkap,untuk berjaga-jaga jika terjadi kesalahan dan dengan mudah membackup
4.) Centang tanda expand template widget
5.) Tekan tombol Ctrl+F lalu cari kode seperti ini
<div id='sidebar-wrapper'> atau <div id='rsidebar-wrapper'>
6.) lalu copykan kode dibawah ini tepat dibawah kode yang bercetak tebal diatas
<div class='addthis_toolbox'><div class='custom_images'><a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9XRa0sGMfEkJrpK4QrC3kdkqlbASAoaw7Bn4N9V0CkrTNO8a3hSNcGK5K3YgP4os_8qlQhcVdVHIzz_hld0_siQ10R47Ilc8NVDiK3CXDhh08usgSU0hxs1NzcJ-mSj3UzOO6_w_DR_w/s1600/twitter.png' width='32'/></a><br /> <a href='https://plus.google.com/' target='_blank'><img alt='Google Plus' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1cx8U3DIeSS0qQ_q2BAlg8Cxf2BvW80x3X3NEhYX_r2hY6Q9y6p6r4MKni4jUyzI5kjidABPCZSOqxGvX1b1OYB73p0UBKl5nvuLKpSfMhw3IW1nbk4hayjSA_RNNhIfAkbe2ooFIqYo/s1600/gplus.png' width='32'/></a><br /> <a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtpVrM1mIMWT1Tq679JJCSRkffqbz3kKSJ1xhyphenhyphenlacLqTX9XHJhBGBi-dkI-bkuTuCvcoiKHAKB5bm6UNU68Izqj3B1rOhjbEoktPKwGBOigBaUxKs3l_ao-ZhtpLgH0Jg1m2HZ1Yj_LaA/s1600/facebook.png' width='32'/></a><br /> <a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFn7mmH7V0T7jGcTysYLx0TYmaX5aP_N1SJVeqKEvrcHn78EeCoBj19NBOvOjgRijvlOpUcqO1YLMlZ8LgwUsa-KzD1jUSVezRzUrFiBx1RJzikp5Yxe98gOP1tuBjaBJUk3dWGlB_nII/s1600/digg.png' width='32'/></a><br /> <a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNjAod8hyy_Fk1AKjZHxWTC1Yg6VdMaayi_FDEp1mM69nkIuVfSyG8miRONxdsQfP4wVqyIjlsdBopKsVSVQoEEQab0Ax4uJFfU7ZGm1pei1VkhwMQiitfDcqmgD_yNTcVfN8sUQqxFRo/s1600/stumbleupon.png' width='32'/></a><br /> <a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiJ0o0aKLg6kORxccDo85pdRQpzMOKg9uIk0IIV_n17_qonzrsAaiIn8DQb35EZl1pB65vC2XhWBtQmGzUZmIhxSbO3UZHD4kk_jeGONat9_iPof9BEga_q-QyLHRXSsISXDAlAOvkMAE/s1600/favorites.png' width='32'/></a><br /> <a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdIOk2bdK2_0GFDIQdHTMj5ty82iQZblsT1DkUKJvWMRy3aLcwwikf-0pIJZDj34EdNyB74eq3D4x7eUJPtAibzJVVHCsHj5DQhxWqNwZakg-YuXRr77uSPsVk9lqe3W7y7UnzliAbidQ/s1600/more.png' width='32'/></a><br /> </div><script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> </div><div style='clear:both;'/>
7.) Setelah itu cari kode ]]></b:skin>, letakkan kode dibawah ini tepat diatasnya
.addthis_toolbox{padding:5px 0 0px 0;text-align:left}.addthis_toolbox .custom_images a{width:72px;height:32px;margin:0 0px 0 0px;padding:0}.addthis_toolbox .custom_images a:hover img{opacity:1}.addthis_toolbox .custom_images a img{opacity:0.65}
8.) Terakhir tinggal simpan template dan lihat hasilnya

Tidak ada komentar:

Posting Komentar

Apabila ada yang kurang jelas, jangan sungkan-sungkan berkomen.
Komentar anda sangat dibutuhkan agar blog ini menjadi lebih baik :)

Berkomentarlah dengan sopan dan diusahakan komentar yang membangun