Membuat Widget Social Media Floating Di Sebelah Kanan Blog

Membuat Widget Social Media Floating Di Sebelah Kanan Blog - Nah kali ini saya akan membagikan bagaimana untuk membuat widget social media sama dengan yang ada di blog ini, cekidot...

Widget Social Media

Nah gimana sobat ? keren gk ? dan yang pasti widget ini ringan loo.... mau ? langsung aja ya di ikutin cara membuatnya....

Pertama-tama masuk ke Blogger Dashboard dulu
Langkah kedua masuk ke menu Template > Edit HTML
Nah sekarang cari kode ]]></b:skin>, gunakan Ctrl + F untuk memudahkan pencarian, Lalu letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

/* SosMed Blogsiryan.blogspot.com */
.sosmed-kananblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtrEDe8UelrgbNvPet7QK5JMrqfSqmtbCk9Vd3jrCzHStNlFr-trdy4jiVn-356RwdCvSsDunaEW0qUlcWZrtlI0Cuy_TUSTfZsdlH8gZLaEq1ugDskiFYP5IOIzHN83irVCOM1_l4EB1A/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.sosmed-kananbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaQSdO-EXIS2rC0Hu_fLt3TCXHGvKe4KDQyPFioZghdkMOdeaTMpD3rgfcG35tUZw3liYCw0Do_1Ywvy8JhP-SKyZaUtWe9PYgYknEj6uFAO0s04Hhpc5aONm07cmc0SdUmCknhK0f5kW-/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.sosmed-isiblogger{margin:0px 0 0 43px}
.sosmed-kanantwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggAwHosbfvqJRS23vqmcsJRm7tCtkUFZhWYloUibfPagnFiNGG7RztflGCYMUOIqtlziFRQ4h9MKqazelP2lVWHhUvMIwKWkKHtuUi-12qKaIVOxfsVej3Zlej4OXN5W2kJKpEHzvGGA4g/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.sosmed-kanantwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXAxFcYVq3Tighf9u6nzbHmNRy-eqQV2_kUMONepp8hKOzeYYxANysjwoCJNPRtu4tqnhL3ip8cBo31vgh_gpBuYvXb4Fo7YZcJlEdjJrOod7ropPlpHOhgYSIfPJuOXO3gbwR2OfETcGB/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.sosmed-isitwitter{margin:0px 0 0 43px}
.sosmed-kananfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX2-kvdl0ZKeVgqm98abd2i8QbGseYrAY9L5XUL_tlHPWCWTcznafHThc_yl5rj1ygkhmaPetSkQgKvSQm3mMrys-XB51_18A40-vpzXy0t9p14vymifynM_raVKeZFRJLjfeED5O0hbL0/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.sosmed-kananfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8yNvPio6Zo5Q_2QQwwXDuuwP6hP0vgYqA7QpKUGR9MlCWHmLWZLB1vGAH2DlE3zpGvGfGKnRAMtYJ0CtRn3A0MIAN44tE32Pw7bKQSnsL1i6LLx5Acb2U87htbzUk-NvZ3Htl83P-ETuQ/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.sosmed-isifacebook{margin:0px 0 0 43px}
.sosmed-kananrss{background:url('http://2.bp.blogspot.com/-A2gUy4WF8l8/UUa2igFbIZI/AAAAAAAAAiM/2ck6-Wot2yM/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.sosmed-kananrssc{background:url('http://1.bp.blogspot.com/-RZyN5DznuUY/UUa9Uc04tFI/AAAAAAAAAi8/okz_LnBFNS4/s1600/RSSjoss.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.sosmed-isirss{margin:0px 0 0 43px}

Jangan disimpan dulu ya, sekarang cari kode </body>, Lalu letakkan kode HTML dibawah ini tepat diatas kode </body>


<div class='sosmed-kananblogger' onmouseout='this.className=&apos;sosmed-kananblogger&apos;' onmouseover='this.className=&apos;sosmed-kananbloggerc&apos;'><div class='sosmed-isiblogger'><a href='https://www.facebook.com/BlogSiRyan' target='_blank'><img alt='Like us on Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLTbbDmc4nYftDvW00yDvMbnrIf_zogwF8A-zCWvnlMFV7tLqoKo0c7lWSjl0hQieHCzC0ZWSJTLectaYVE6mrO9bHs7nttN7uvYoO8W0C7ra2wADyNPq1kXOy6MDdxSLQkiHviAINUHe2/s1600/FB-open-new.png' title='Like us on Facebook'/></a><br/>
</div></div><div class='sosmed-kanantwitter' onmouseout='this.className=&apos;sosmed-kanantwitter&apos;' onmouseover='this.className=&apos;sosmed-kanantwitterc&apos;'><div class='sosmed-isitwitter'><a href='https://twitter.com/safryannoor7' target='_blank'><img alt='Follow us on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsYX8UdabtVd0x3u7IS13PYl68IrGzpbU3wpEaUF3404KwJTKghZMYJbjqbK7ORvSUzAkFlDr7xmI71vS-EoVvCgATnQZFGBD6FdjaXHd3BzCNcHrXpU2pAj7tgcwpE7xBG79rlwJKa0zh/s1600/TW-open-new.png' title='Follow us on Twitter'/></a><br/>
</div></div><div class='sosmed-kananfacebook' onmouseout='this.className=&apos;sosmed-kananfacebook&apos;' onmouseover='this.className=&apos;sosmed-kananfacebookc&apos;'><div class='sosmed-isifacebook'><a href='https://plus.google.com/+YanzSeo/posts' target='_blank'><img alt='Recommend us on Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfSJjPZIxWPnU1ChczwF8dXHQOCTfdaFmpPsPx7MbdbONhSqcWg-FAg1qJBRRDbEPtVczeKWMeYHCHBTP6ygG_L6Qm2G0f27NR9CqkB7t1M_gZ0c5EhJ5ps-afEetsUca6bLHZk5wZ8q8b/s1600/G+-open-new.png' title='Recommend us on Google Plus'/></a><br/>
</div></div>

Langkah terakhir klik Simpan Template dan lihat perubahannya :)

Keterangan :
Yang berwarna BIRU adalah URL/Link tujuan, silahkan diganti

Semoga Bermanfaat.