Cara Membuat Floating Button Sosial Media

Cara Membuat Floating Button Sosial Media

Cara Membuat Floating Button Sosial Media Pada Artikel kali ini saya akan memberikan cara membuat Floating Button Sosial Media , Sebenarnya banyak bentuk dari Floating Button Sosial Media itu sendiri banyak macam dan bentuk saya akan memberikan 2 bentuk Floating Button Sosial Media yang dimana jelas memiliki perbedaan sehingga anda bisa memilih salah satunya saja. Kita langsung saja di pembuatan Floating Button Sosial Media yang bentuk pertama, Perhatikan gambar dibawah ini dimana ini bentuk yang pertama.

Gambar 1.1 Floating Button Sosial Media

Lalu bagaimana Pemasanganya ,? Untuk pemasanganya sangat lah mudah yaitu :

Masuk keblogger
Tata Letak
Tambahkan Gadget
HTML/Javascript lalu masukan kode dibawah ini:

<style type='text/css'>#widget-social{position:fixed;padding:0;margin:0 auto;left:0px}ul.kompisocial{border:0;list-style:none;overflow:hidden;margin:10px}.kompisocial li{background:none!important;margin-left:4px;padding:0!important}.kompisocial li a {display:block;width:57px;height:57px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCqbijD_hKxHNN2_Dx4-k0S5AeCSUge1xyNir-u_I9yjrM-Q_Kl2hGJqsyoUTTgqi73HPprTSV6CMVHS_fZIQUiucis9PcaPo-yBOEVt5S43m0tr5-VpjsmdmobQT1F_9lffjrDG_3dpDx/s1600/mixicon.png) no-repeat transparent;text-indent:-99999em!important}.kompisocial li a:hover{padding:0!important}.kompisocial li.rssicon a{background-position:-186px 0;transition:all 400ms ease-in-out}.kompisocial li.gicon a{background-position:-124px 0;transition:all 400ms ease-in-out}.kompisocial li.twicon a{background-position:-62px 0;transition:all 400ms ease-in-out}.kompisocial li.fbicon a{background-position:0 0;transition:all 400ms ease-in-out}.kompisocial li.rssicon a:hover{background-position:-186px -62px}.kompisocial li.gicon a:hover{background-position:-124px -62px}.kompisocial li.twicon a:hover{background-position:-62px -62px;}.kompisocial li.fbicon a:hover{background-position:0 -62px}</style><div id='widget-social'><ul class='kompisocial'><li class='rssicon'><a href='http://feeds.feedburner.com/blogzeep' rel="nofollow" target='_blank' title='Subscribe by RSS'>RSS</a></li><li class='gicon'><a href='https://plus.google.com/100610590540280375788' rel="nofollow" target='_blank' title='Follow on Google+'>Google Plus</a></li><li class='twicon'><a href='http://www.twitter.com/arifqo' rel="nofollow" target='_blank' title='Follow on Twitter'>Twitter</a></li><li class='fbicon'><a href='http://www.facebook.com/arivmaulana11' rel="nofollow" target='_blank' title='Add on Facebook'>Facebook</a></li></ul></div>

Ganti tulisan yang berwarna:

Jingga dengan link feed burner blog kalian
Merah dengan link akun google plus kalian
Biru muda dengan link akun twitter kalian
Biru dengan link akun facebook anda
Lalu klik simpan.

Done !

Jika itu tadi kita buat yang pertama maka ini adalah cara yang kedua yang juga bisa kamu gunakan dlam pembuatan Floating Button Sosial Media Langsung saja cara caranyanamau sebelum itu kamu bisa lihat dulu gambaranya seperti di bawah ini.

Gambar 1.2 Floating Button Sosial Media

Jika kamu tertarik dengan yang kedua bisa langsung ikuti langkahnya

Masuk keblogger
Tata Letak
Tambahkan Gadget
HTML/Javascript lalu masukan kode dibawah ini:

<style>

#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKpUSNwg4SJBgqvJgtbuMkneOCpLaF_3KIpYIl9JKuuEkJTIrFtT4Qjm9ZCmKMLrvzMqDRJiAfVIBR4Od32wv8pB9V7Ll1siXN4l8xUBiNKDhkUzwu_emyz_VIvkTE7b1lGJweheCnTGA/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="Link Facebook">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="Link Twitter">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="Link Google +">Follow us on Google+</a></li>
</ul>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"></div></small>

Keterangan :

Silahkan kamu ganti tulisan yang berwarna di atas dengan Link masing masing sosial media anda masing masing.

Dengan ada nya Floating Button Sosial Media maka tampilan blog anda akan terlihat semakin menarik.

Selesai !

Cara Membuat Floating Button Sosial Media >

Cara Membuat Floating Button Sosial Media

Artikel Terkait Cara Membuat Floating Button Sosial Media :

2 komentar:

Entri Populer

Labels