Memasang Widget Floating Sosial Bookmark Di Blog

Memasang Widget Floating Sosial Bookmark Di Blog | Ghiyats Blogs - Hai, Sob.. Pada artikel ini Saya akan bagikan sebuah Tutorial Blog Yang Berhubungan Dengan Sosial Media, Floating Sosial Bookmark ini berbentuk sebuah Widget Facebook, Twitter, Pinterest, dan Go

ogle Plus.

Kalau Biasanya widget Apapun Berada di Samping Kanan Blog Kita, Tapi, Kalau ini Berada di kiri sisi Kiri dan widgetnya mengikuti setiap Scrool Blog Kita Kalau ke Atas Atau Ke Bawah, 

Begitu Penjelasan sikat, Langsung Saja kita Akan MenCoba Membuat Widget dan Mempratekkannya Tutorialnya Seperti ini : 

• Login Ke Blogger, Dengan Akun anda
• Klik ''Template'' Di Dasbor Blogger
• Klik ''Edit HTML''
• Cari Kode </head> Setelah Ketemu Masukan Kode dibawah ini Di atas/ Sebelum Kode Tersebut

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

<script language='javascript'> 

var name = &quot;#floatMenu&quot;;

var menuYloc = null;

$(document).ready(function(){menuYloc = 

parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css 

(&quot;top&quot;).indexOf(&quot;px&quot;)))

$(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;$(name).animate({top:offset},{duration:1000,queue:false});});}); 

#floatMenu {

position:absolute;top:150px;float:left;width:45px;}

#floatMenu ul {list-style: none;}

#floatMenu ul li a {-webkit-transform:scale(0.6);-moz-transform:scale(0.6);-o-transform:scale(0.6);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;opacity: 0.8;}

#floatMenu ul li a:hover {-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);opacity: 1;}

</style>

• Terus Cari Lagi Kode </body> Setelah Ketemu Masukan Kode Dibawah ini di atas Kode Tersebut

<div id='floatMenu'>

<ul>

<li><a href='http://facebook.com/Username' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBRnuc0leeB9nxQ5Y3S5r6I-7e_-GOlzedwlIGg5J3q2CjBMy-E6sqhc6w4OP4n7hqJ9xvFRV09DhPGE4BCurv9ZeCq9CFyq_1WTG8ffbyIbhLuHcqTlqt6Q-FsxgIzEF8HxQ8klafrg4/s1600/btrix-facebook.png' style='margin-bottom: 3px;' title='Follow Me On  Facebook'/></a></li>

<li><a href='http://twitter.com/GhiyatsBlogs' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVP4QM_k1I_t4f8JiUOXg_aPDrFze9sKQu9Uif_jVIxGoNU93rDaM7vbMbAw22sQ9WHDAVpvjtPpGCMFuVmjNLO31c5xTkIZ4qiLDB1aQsg5CzjITCXcHoSh_jCT1DueFUpqUZsFfktFU/s1600/btrix-twitter.png' style='margin-bottom: 3px;' title='Follow Me On  Twitter'/></a></li>

<li><a href='http://pinterest.com/Username/' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiszGGupF4qVTkrBYtZzG6otb0ms3mOQ6CbDMYCI0oVsGwn7epmkBYsLUxNBIP7oyG1kOTsarJzDtG533RQuNqxHxP9Pda9h_-iCB1XzxF3ApWpp_mdzhrNpkMhwfJV1tfj5vg2hHvgQo4/s1600/btrix-pinterest.png' style='margin-bottom: 3px;' title='Follow Me On  Pinterest'/></a></li>

<li><a href='https://plus.google.com/User ID anda' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO886a92ojkeOxK3NwRsJyqZkJmrdbp0LwguexKHFz3FU8wMtEsu1lhmiNBRfnOWT_6idXFKCspSNpKs9W79Ri-E5i1_C5-Ctv_lAtVOoZGuX38y3Zkv32HkTf6sAIsyJZ6aygKgp8dgc/s1600/btrix-googleplus.png' style='margin-bottom: 3px;' title='Add Me your Circle'/></a></li>

</ul></div>

• Ganti Username Dengan Username Facebook anda
• Ganti GhiyatsBlogs Dengan Username Twitter anda
• Ganti Username Dengan Username Pinterest anda
• Ganti User ID anda Dengan ID Profile Google Plus Anda
• Setelah Selesai, Sekarang Klik ''Simpan'' 

Demikianlah artikel mudah mudahan Artikel Bermanfaat Dan Mudah Di Pratekkan Sama Sobat, Dan Kalau Sobat Masih Kesulitan Silakan Beri Pertanyaan Dan Pendapat Tentang Artikel ini, Di Kolom Komentar Dibawah ini Terima Kasih....

Via : Blogger Trix