Sosial media, di jaman sekarang siapa yang tidak tahu? Siapa yang tidak ingin eksis? Tentu saja banyak orang yang berharap. Maka dari itu, saat anda main blog, jangan lewatkan sosial media tetap jalan, hehe. Berdasar dari pengalaman pribadi, setelah muter – muter dan akhirnya nemu juga artikel yang saya cari.
Langsung saja saya bagi info untuk anda yang belum menemukannya, kali ini saya akan memosting artikel tentang cara memasang sosial media di blog, pastinya gampang, simple, dan tentunya GRATIS.
Bagi anda yang berminat, silahkan ikuti tutorialnya :
1. Buka blog anda di blogger.com
2. Pada drop down menu anda pilih Tata Letak
3. Tentukan lokasi dimana sosial media akan dipasang, seperti di blog ini yaitu sidebar
4. Kemudian pilih Add Gadget
5. Pilih lagi HTML/Javascript
6. Copy dan paste kode dibawah ini di kolom HTML/Javascript tersebut
<div class="widget-content">
<style>
#socialwidget {
width: 300px;
margin-left: -7px;
}
.TZ-social{
padding: 10px 5px 10px 5px;
border-bottom: 1px dotted #EBE2E2;
}
.TZ-social img:hover{opacity:0.8}
.googleplus {
background: #ffffff;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
ine-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.TZ {
background: #ffffff;
border-top: 1px solid white;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.TZ span {
color: #000;
font-size: 11px;
position: absolute;
margin: -12px 100px;
width: 310px;
}
#widgetbox .author-credit a {
font-size: 10px;
font-size: 10px;letter-spacing: 1px;
color: #1E598E;
text-decoration: none;
}
.TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
</style>
<div id="socialwidget">
<!-- Begin Widget -->
<div class="TZ-social">
<!-- social ico -->
<center>
<a style="margin-right: 15px;" href="http://facebook.com/baeni.pradana" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhmNFftlIwEMdRqaLsbc8ASYMIgJdSfaj5haByx0o_bFhDRktoZTmLT_yQGh6JbzOsfxWfJOcJCNzv10sFnmXJW4X1_y69xVCHYS9xjuui4Mkr3aJm7MUWKGEnKxcUQclKij1_1Jmnkc/s1600/facebook.png" title="Facebook" /></a>
<a style="margin-right: 12px;" href="http://twitter.com/baenipradana" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEV-Voh66atSyjZB4LISCWHbdfnjQLrb8oHUswmT76B5_ajgUqAH8B-0c6UAxb8WJJ12jdyNhh0OlFTErzGaZlFW4Imio1yua2wXM0vDTFMcQi2rB4l3EaRTAQ82h94ACRLhseL5hyphenhyphen7cw/s1600/twitter.png" title="Twitter" /></a>
<a style="margin-right: 12px;" rel="me" href="https://plus.google.com/+baenipradana/posts" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDe_1moNfKeiA175dC8P59XBJebwB8eeP-QhG-ejsb77RhyCtTbqZSApEGRkYNJdyCsWHxu08O5Rx2FZxt1Vm6V640WI-7c2TmI0O6djTM5MPhuQs_ctJA-iCWMki0OAO4avSylAAc894/s1600/gplus.png" title="Google Plus" /></a>
<a style="margin-right: 12px;" href="https://www.youtube.com/channel/UCKJcAMGBrVIcf77zszXy3kg" target="_blank">
<img src=" http://png-3.findicons.com/files/icons/2155/social_media_bookmark/32/youtube.png " title="Youtube" /></a>
<a style="margin-right: 12px;" href="http://feeds.feedburner.com/kiosederhana" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcUDYinM20iiVGg_ZbBjCSU0c-1roaJJww-sGl3txOBcaFYkISFRIx8dHtOZo3-xvWbuPdS3UIL-Eoa1mjOsZ6_wIxENF-KfnLiftNl-CXUN7Meww6-1cd1n_Ni6H1u6NMLFgx0nyMGRY/s1600/rss.png" title="RSS Feed" /></a>
<a style="margin-right: 12px;" href="http://www.Instagram.com/baenipradana" target="_blank" rel="nofollow">
<img src=" http://thesnapys.com/wp-content/plugins/wordpress-social-login/assets/img/32x32/wpzoom/instagram.png " title="Instagram" /></a>
</center>
</div>
<!-- End Widget -->
</div>
</div>
KETERANGAN :
Untuk tulisan yang berwarna merah, anda dapat menggantinya dengan ID anda masing – masing
7. Lalu save dan lihat apa yang terjadi di blog anda
8. Bersyukur jika tutorial anda berhasil
Selamat mencoba kawan, salam blogger, semoga artikel ini bermanfaat, saya tunggu kritik dan saran anda di kolom komentar.
Referensi :
By Cibi blogger on Cara Pasang Logo Media Sosial di Sidebar Blog
Biasanya suka langsung ada di blognyah gan ,, :)
ReplyDeletehttp://goo.gl/Ibp4cq
Itu kalo template yang download, ini tutorial bagi yang ingin mendesain template sendiri :)
Delete