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 = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){menuYloc =
parseInt($(name).css("top").substring(0,$(name).css
("top").indexOf("px")))
$(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+"px";$(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/arieadie30' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHopARSzt16fbSabTDxiAM8zYNXRGfGr-R3PiH4TCqsjeU2_CvanS40Mh5_x7o_y2PdUCGwtS0FeVuwdwIyNL8Hw9NCJdJrIFibFXO-ybZSNuvpJvrwQfGOvngrgG-ok2biFVmDBP-FdY/s1600/btrix-facebook.png' style='margin-bottom: 3px;' title='Follow Me On Facebook'/></a></li>
<li><a href='http://twitter.com/arieadieBlogs' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTADTIddRuThu8kO6f4Z3eDxage8rQ3xXmtZoz41CmHnvy8BQXKac97a4vWU8M2vCRiEXV9lMMWIm54Ia8zIWcnolvuehfflNPIqHgzAdL8ckm8fRSD0YYUMVxj5b1OJwuBpt2PeZnePI/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/AVvXsEg8Wiv5NNTmDgCwcSn7FASAvvQZ4aIHSkloR6HrBky_mILWDD2g3l22V5vJ7REOErMJGOjx8yEl1Bsxwhw1TqUu7q29N5Tl1NbFEfTvZr5vaiIZTmMBo6lGo8-5_kp31K-zwKY8AwWvzNE/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/AVvXsEhpAxJ0izO4hkyRYgB5EuMCqO6mlAUFTpn1br1A6jMYmLTejhZnSTJAVQ2Mh5zyMJ4dvRCS2V2LrwFwxoFtMr8GfkqpK2413K5fKOmh9I8vxZM4UEFDK449s-cxeNvq0KdxlSOkYJcN0zg/s1600/btrix-googleplus.png' style='margin-bottom: 3px;' title='Add Me your Circle'/></a></li>
</ul></div>
- Ganti arieadie30 Dengan Username Facebook anda
- Ganti arieadieBlogs 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....
