Memasang Widget Floating Sosial Bookmark Di Blog ~ Ron1st Blog

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/Username' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7U1RZB9gdhNdg-PgonxzeBdLiRLAjnPnWfN7T5C5fq7sn4WzikKkhEEJFVoAFgl-6hErwUv0EMAsDpL48iKqh3DSI9RBA-iELiaUZCuRfD7B-b-InOEkxYgAHbyUZ25RLSg1HS8OEF14/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/AVvXsEgl7SReOiiHBXm8HwXztnFA4yktswzMLPXfERLpXYG6XNR9oCAlO7zp9Mg057Ak_HAbZ1AiIBOVA5HwIWUtt-LFMK4VOMIgrZCiTglMCOisjqllg1xsP7eT-6y660jolX2c4Kx0Y8amo1Q/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/AVvXsEgxkIPmO0V6y5sSZEaheeG4ooA2vOUde7K69Ibq518T5PSnAHQIw8q6fdSR9uzqC33iF-avzYKhE68xJT4iwFarAN7ZNHi8Hn_To5dN0vVS0HmCEo-QF1QJeWSl_tzA0rCi74KkmkV3mec/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/AVvXsEhc212kHkiA3R0ZDOwfoxB5HGtCxrpbghdLS-TQKuMo_qYJzDxfbg9UjPW_o7ChpxvBe1En004ZfGNWsPL5yz1_qjFKp6nUReS5YknKtk5FK-PHNYcpP81tCW2fdfjtrjoQsOSiNzf7JtE/s1600/btrix-googleplus.png' style='margin-bottom: 3px;' title='Add Me your Circle'/></a></li>

</ul></div>