Cara membuat follow us untuk di web/blog ,guna untuk agar pengunjung dapat mengenali sang admin/pemilik blog dan kali aja ada yang naksir :)
Kan nanti nya bakal jadi viral tuh "blogger indonesia dapet jodoh dari blog nya". :D
Kalau gitu kita langsung saja ke tutorial nya :
Model yang pertama
1. Pilih tata letak/layout → add gadget/tambahkan gadget
2. Pilih HTML javascript → lalu copy paste kan script di bawah ini ke dalam nya
<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/AVvXsEhzCsHi5u7hTTFNNl9Myo7qmXO2pFWtFrE4m9bywbJ4XlxnGLAbniOz0xcf5KowZi8E4KJ-enuvx092C9MDCaFgbkFmWW6fO2OOTmXdDIFp_IwiS0uLKMLkLG5CMx3kz47j5XooRJpf68Q/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="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter">
<a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+">
<a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest">
<a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS">
<a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
Save/simpan dan lihat hasil nya.Hasil nya akan seperti ini ,tapi ini belum sempurna :
- Follow us on Facebook
- Follow us on Twitter
- Follow us on Google+
- Follow us on Pinterest
- Subscribe with RSS
Kalau di masukan ke javascript tidak akan seperti itu hasil nya.
Keterangan ganti tanda # dengan link sosial media anda.
Model yang kedua
Cara nya sama kaya yang di atas :
<div style="margin-bottom:5px; border-bottom: 2px solid #222; padding: 3px; text-align: center;"> </div> <div style="text-align: center;"> <a href="#" target="_blank" title="Like/Follow"><img border="0"src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhivfgRni7CtIauEq12NhSCNKLLtasYOh2MYTmSBqoOiGFz5Bw9FV_7Z3Z6QRbcSMbDCZWzSuy6Du3KIgDFfcHjI2We-NmfTtSUtyYzaqgFp8G12v_wNH7m98FikRj8QjtEs7pSOglpKXQ/s1600/Facebook-icon.png "style="border: medium none; position: relative;" / /></a> <a href=" # " target="_blank" title="Follow Me"><img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7sQ4CCwZiE6d5nlSQsrwVnIjhmW0IWZkji_jMvYzAuaMnEsVg4Iw5wUeEpxeX-DvfoDFqmyAfpYbsTE82lgzftmzV_A8s7lmxUCOJUctjvpIfuXZY275Xq4y7x2Lup64jzCy4t2UNC-8/s1600/Google-Plus-icon.png " style="border: medium none; position: relative;" / /></a> <a href="#" target="_blank" title=" follow me"><img border="0"src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC8FjmKUCTrgZHxou-cmGQoF5kQQlI8UagoDQlm_rVr8JrN5Y0J-MCRfn8GPpNqUMziv_TK80x3aUpkg37CUiakFB9qkyBZU08ek4QnDnUBvWlgIi1JPFJWuA5rXl6H_FusTu2EcgCi84/s1600/Instagram-icon.png "style="border: medium none; position: relative;" / /></a> <a href=" # " target="_blank" title=" follow me"><img border="0"src=" https://googleweblight.com/?lite_url=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU_dfW7vr7onl-CGV0FEMO0CZa9pHBKFqJ9E27vpkRlSTpkPM6x4HdDrsvUznODffXcc5JWzOTEX6AviZnoixDuGVyej7rAJHpwzhsvoIt5jy2WUo99Jo6n1OSL0ZXTqqoXMriMNFz0P8/s1600/Linkedin-icon.png&lc=id-ID&s=1&m=498&host=www.google.co.id&ts=1510507420&sig=ANTY_L0U65f04-IJDf3je3SHZD51GLfC0g "style="border: medium none; position: relative;" / /></a> <a href=" # " target="_blank" title=" follow me"><img border="0"src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM6-yDVDfdiUBKd6-CMHCc_S6cbV6huWqE9WjegKCXi9EaRcfyBMzmRES1IWPoJitM0DKVX017NZqcfq6DTjefOYrPcquTRYOvRT0fmHrjkAou7SvC20ba9KYBUAvOkTE51h7CfZKt99I/s1600/Youtube-icon.png "style="border: medium none; position: relative;" / /></a> <a href=" # " target="_blank" title=" follow me"><img border="0"src=" https://googleweblight.com/?lite_url=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_WCctK9RPdq07SPLwW3Gl8-kKv76rL4Jyg1jobpf7PzqpZouxcTM3se3xdaDP844zPPR2ZkiRpfnEl_CPTODIllnaOndCdRg2JngaZq9Gn2em-I76Uq53QQOFrQbCD_G57bJ2VXltyk/s1600/Twitter-icon.png&lc=id-ID&s=1&m=498&host=www.google.co.id&ts=1510507420&sig=ANTY_L39l79IvwXdJetTkpRpeyCa4IreKw "style="border: medium none; position: relative;" / /></a> </div></div>
Hasilnya akan seperti ini :
Kalau mau ganti icon sosial nya ,tinggal klik di menu pilih blog lalu icon atau di bawah klik label icon.
Selamat mencoba..
Tags:
Tutorial