Menambahkan Icon Social Media Melayang di Blogger

March 21, 2012

Bismillah
Kali ini kita akan membuat tutorial icon social media dan RSS juga E-mail yang dapat mengembang, gunanya sendiri seperti navigation tabs yaitu untuk mengarahkan ke link lain dan disini ada beberapa social media diantaranya ada Facebook, Twitter

CARA MEMBUAT ICON SOCIAL MEDIA MELAYANG

Berikut caranya:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

</body>

Langkah 5
Setelah ketemu copy kode dibawah ini dan tempatkan diatas kode Langkah 4

<!-- koderator.blogspot.com --><br /> <div class="flt-wdt"><!-- Facebook --><br /> <a href="#" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="http://https://lh3.googleusercontent.com/-QaLRred01jw/ToE0l2ruGBI/AAAAAAAACvc/ydfvF-xOi_4/s800/Facebook_creatures.png" /></a><br /> <!-- Twitter --><br /> <a href="#" title="Follow me on Twitter" target="_blank"><img alt="Follow me on Twitter" src="http://https://lh3.googleusercontent.com/-HiZe1pm_Rok/ToE0l_3Wl4I/AAAAAAAACvY/ztE85o-w3Lg/s800/Fa_Twitter_creatures.png" /></a><br /> <!-- RSS --><br /> <a href="#" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="http://https://lh5.googleusercontent.com/-16rpSgs_Rdk/ToE0l6-gnjI/AAAAAAAACvg/pbKahocVGVg/s800/Feed_creatures.png" /></a><br /> </div><!-- End -->

Jangan lupa edit kode diatas
Langkah 6
Setelah Langkah diatas selesai,sekarang kita menginjak langkah selanjutnya yaitu cari kode sibawah ini

]]></b:skin>

Langkah 7
Setelah ketemu copy paste semua kode dibawah ini dan letekkan diatas kode Langkah 6

.flt-wdt{<br /> position:fixed;<br /> right:10px;<br /> top:40%;<br /> }<br /> .flt-wdt img{<br /> float:right;<br /> clear:right;<br /> margin:5px;<br /> -webkit-transition: all .2s ease-in-out;<br /> -moz-transition: all .2s ease-in-out;<br /> -o-transition: all .2s ease-in-out;<br /> transition: all .2s ease-in-out;<br /> }<br /> .flt-wdt img:hover{<br /> -moz-transform: scale(1.2) rotate(6deg);<br /> -webkit-transform: scale(1.2) rotate(6deg);<br /> -o-transform: scale(1.2) rotate(6deg);<br /> -ms-transform: scale(1.2) rotate(6deg);<br /> transform: scale(1.2) rotate(6deg);<br /> }

Langkah 8
Simpan

KETERANGAN