Indah Pratiwi: Blogger

Apakah template Anda tidak menyediakan fitur share ke social media? Kalau tidak, dan Anda berminat untuk menambahkan fitur share ke social media caranya sangat gampang. Seperti template yang saya gunakan sekarang, tidak menyediakan fitur social media, tapi lihat di bagian kiri ;) berminat? Ini dia tutorialnya:

1. Login ke blogger.com

2. Lalu pilih Tata Letak

3. pilih Tambahkan Gadget

4. pilih HTML/Java Script

5. Copy kode di bawah ini, kemudian paste ke kolom Konten

<style>

.touchme a {

display:block;

height:50px;

width:50px;

padding:0 4px;

float:left;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhak8ETLR8GECkY4RerGmGhGmlkTsNKjI54fNyD7CDaQcfLThcWmShUmzg_PuP-kyQ0Rsduyjipw8z9z5MlNRHJUA-N7BmXzNUXH2ZlkVXH1EpiGr8Myuk1ef1PQsrzN1xrhV6a79BNAxU/s1600/Sharing+Touch+Me.png) no-repeat;

-webkit-transition: ease-in 0.2s all;

-moz-transition: ease-in 0.2s all;

-o-transition: ease-in 0.2s all;

-ms-transition: ease-in 0.2s all;

transition: ease-in 0.2s all;

cursor:pointer;

}

.touchme a.googleplus {

background-position: 0px -58px;

}

.touchme a.googleplus:hover {

background-position: 0px 0px;

}

.touchme a.twitter {

background-position: 0px -290px;

}

.touchme a.twitter:hover {

background-position: 0px -232px;

}

.touchme a.facebook {

background-position: 0px -406px;

}

.touchme a.facebook:hover {

background-position: 0px -348px;

}

.touchme a.rss {

background-position: 0px -174px;

}

.touchme a.rss:hover {

background-position: 0px -116px;

}

</style>

</div>

Nanti jadinya akan seperti ini

Kalau kurang srek dengan style seperti di atas, saya masih punya style yang lain seperti ini

ini dia kode 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/AVvXsEh6rR4_9p7eO0_ybZgSNkiMeuRzMeF0qAAte3BGuVTE7anZqOXuKsGYlCTwH2OhliwIjL5dHyvD9JQ73mqKO3EQ3NyBP0kBny033iLW9xhAfbkFW_0qC8r1XYQlP3RTQtqb83w_LDVV-9c/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>

<li data-alt="Follow us on Facebook"><a class="icon facebook" href="GANTI">Follow us on Facebook</a></li>

<li data-alt="Follow us on Twitter"><a class="icon twitter" href="GANTI">Follow us on Twitter</a></li>

<li data-alt="Follow us on Google+"><a class="icon googleplus" href="GANTI">Follow us on Google+</a></li>

<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="GANTI">Follow us on Pinterest</a></li>

<li data-alt="Subscribe with RSS"><a class="icon rss" href="GANTI">Subscribe with RSS</a></li>

</ul>

<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://zhalltrozans.blogspot.com/2013/03/cara-membuat-tombol-social-media-keren.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Ini masih ada lagi

ini kodenya

<style>

#BT_social {width: 260px;margin: 5px 20px;padding:5px;}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2BnhrCami2m0Yze4q5I-llHI4iZiWi8M2njRxpXBQGGUPVUdtTumEnQR-WBZwRwa2DyjoQ5PWoGSd8tNAYEYG22wQs-BVuLEBkujgQLekbwGum-nBGaSlWXJc2hs9eLLAML10nAWmy0c/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-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;-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;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}

#BT_social span:hover {visibility: hidden;}

#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}

#BT_social .icon {color: #fafafa;overflow: hidden;}

#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}

#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}

#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}

#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}

#BT_social li:hover .icon {width: 250px;}

#BT_social li:hover .icon {background-color: #d91e76;}

#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}

#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}

#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}

#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}

#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}

</style>

<br />

<li><a class="icon fb" href="GANTI">Like us on Facebook</a>Like us on Facebook </li>

<li><a class="icon twit" href="GANTI">Follow us on Twitter</a>Follow us on Twitter </li>

<li><a class="icon google" href="GANTI">Follow us on Google+</a>Follow us on Google+ </li>

<li><a class="icon rss" href="GANTI">Subscribe via RSS</a>Subscribe via RSS </li>

</ul>

Ingat!!! Ganti tulisan berwarna biru dengan link social media Anda

6. Setelah itu, simpan.
Semoga bermanfaat yah

Cara Memasang Kotak Scroll pada Postingan Blog

Cara Menambahkan Widget Social Media di Blog