Membuat Social Network Di Kanan Header

Mbah Siyam - Alhamdulillah akhirnya bisa update lagi dan sekarang saya  mau share widget sosial network. Sedikit aneh ya nama nya, tapi liat aja hasil nanti hasil nya. Langsung aja gak usah basa basi, koneksi lagi lemod nih.

Membuat Social Network Di Kanan Header
Sebelumnya, widget ini terdapat di template nya MDF Blog, dan saya hanya mengambil widget social network nya saja

Masukan kode sesuai style yang di inginkan.Di atas ]]></b:skin>

Style 1

 Kode

/*---Social Icon dari Mbah Siyam---*/
#bottom-social { position:absolute; top:10px; right:-10px; width:280px; height:45px; background-color:#888; text-align:center; padding:5px 10px }
#bottom-social:before { content:""; width:0; height:0; position:absolute; left:-2px; top:0; border-width:23px; border-style:solid; border-color:transparent transparent transparent white }
#bottom-social:after { content:' '; position:absolute; bottom:-10px; right:0; width:0; height:0; border-style:solid; border-width:0 0 10px 10px; border-color:transparent transparent transparent #999 }
#sociconx,#sociconx li { padding:0; list-style:none; margin:0; display:inline-block }
#sociconx li { padding:5px 3px; position:relative; list-style:none }
#sociconx li:active { top:1px }
#sociconx a { line-height:25px; display:block; font-size:0; text-indent:-9999px; width:25px; height:25px; background-color:#3F3F3F; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOrW-XjX8bpTvKAWCxi7B8BSNL_zlHSSOcBbEtMivJXS5kRWbdIwAwpzZKhKjSvwVRSO3I0pZVY4fzbvJ3Sz65yCURMmkvLQtYPeHplT4KbPZ61ax_UfEBstVotzTrsqrgRTlLuwtILnE/s1600/social-icons.png); background-position:0 0; background-repeat:no-repeat; -moz-border-radius:9999px; -webkit-border-radius:9999px; border-radius:9999px }
#sociconx a.fbiconx { background-position:-25px 0 }
#sociconx a.fbiconx:hover { background-color:#0166E6 }
#sociconx a.twiconx { background-position:0 0 }
#sociconx a.twiconx:hover { background-color:#2ABAFD }
#sociconx a.goiconx { background-position:-50px 0 }
#sociconx a.goiconx:hover { background-color:#DF230A }
#sociconx a.piniconx { background-position:-129px 0 }
#sociconx a.piniconx:hover { background-color:#F00202 }
#sociconx a.liniconx { background-position:-100px 0 }
#sociconx a.liniconx:hover { background-color:#036CCE }
#sociconx a.rssiconx { background-position:-75px 0 }
#sociconx a.rssiconx:hover { background-color:#E05B03 }
/*---END---*/

Style 2

Kode

/*---Social Icon dari Mbah Siyam---*/
#bottom-social { position:absolute; top:-10px; right:10px; width:280px; height:45px; background-color:green; text-align:center; padding:5px 10px; -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-box-shadow:0 2px 5px #888; -webkit-box-shadow:0 2px 5px #888; box-shadow:0 2px 5px #888 }
#bottom-social:before { content:' ' ; position:absolute; top:0; left:-10px; width:0; height:0; border-style:solid; border-width:0 0 10px 10px; border-color:transparent transparent rgb(60,60,60) transparent }
#bottom-social:after { content:' ' ; position:absolute; top:0; right:-10px; width:0; height:0; border-style:solid; border-width:10px 0 0 10px; border-color:transparent transparent transparent rgb(60,60,60) }
#sociconx,#sociconx li { padding:0; list-style:none; margin:0; display:inline-block }
#sociconx li { padding:5px 3px; position:relative; list-style:none }
#sociconx li:active { top:1px }
#sociconx a { line-height:25px; display:block; font-size:0; text-indent:-9999px; width:25px; height:25px; background-color:#3F3F3F; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOrW-XjX8bpTvKAWCxi7B8BSNL_zlHSSOcBbEtMivJXS5kRWbdIwAwpzZKhKjSvwVRSO3I0pZVY4fzbvJ3Sz65yCURMmkvLQtYPeHplT4KbPZ61ax_UfEBstVotzTrsqrgRTlLuwtILnE/s1600/social-icons.png); background-position:0 0; background-repeat:no-repeat; -moz-border-radius:9999px; -webkit-border-radius:9999px; border-radius:9999px }
#sociconx a.fbiconx { background-position:-25px 0 }
#sociconx a.fbiconx:hover { background-color:#0166E6 }
#sociconx a.twiconx { background-position:0 0 }
#sociconx a.twiconx:hover { background-color:#2ABAFD }
#sociconx a.goiconx { background-position:-50px 0 }
#sociconx a.goiconx:hover { background-color:#DF230A }
#sociconx a.piniconx { background-position:-129px 0 }
#sociconx a.piniconx:hover { background-color:#F00202 }
#sociconx a.liniconx { background-position:-100px 0 }
#sociconx a.liniconx:hover { background-color:#036CCE }
#sociconx a.rssiconx { background-position:-75px 0 }
#sociconx a.rssiconx:hover { background-color:#E05B03 }
/*---END---*/

Kalau sudah masukan kode berikut di atas </header> atau <div id='header'>

<div id='bottom-social'>
<ul id='sociconx'>
<li><a class='fbiconx' href='#'>Facebook</a></li>
<li><a class='twiconx' href='#'>Twitter</a></li>
<li><a class='goiconx' href='#'>Google+</a></li>
<li><a class='piniconx' href='#'>Pinterest</a></li>
<li><a class='liniconx' href='#'>Linkedin</a></li>
<li><a class='rssiconx' href='#'>RSS</a></li>
</ul>
</div>

Keterangan : Tanda # ganti dengan alamat yang di tuju

Kalau sudah, klik simpan dan selesai