Memasang Tombol Share Sosial Media di Blog

Tombol Share Sosial Media - adalah salah satu media sosial yang pastinya banyak sekali manfaatnya, dengan memasang widget ini, kita dengan mudahnya bisa langsung share artikel ke berbagai sosial media seperti Facebook, Twitter, dll. Sebenarnya saya pernah posting artikel tentang tombol like facebook di atas postingan blog, namun tombol share tersebut kurang kerenlah Istilah gaulnya. dan yang ini sudah pasti keren (MILIK blog saya sendiri sih. :D )widget ini juga di lengkapi dengan E-mail Subcribe, jadi! selain keren banyak juga manfaatnya. :p  Okey ! tak perlu panjang lebar lagi, langkah-langkahnya sangat mudah, silahkan perhatikan. :p

Cara Memasang Tombol Share Sosial Media

1. Pada Dashbord => Pilih Template => Edit HTML

2. Cari Kode ]]></b:skin> atau </style>, Jika Sudah Ketemu, Silahkan Copy Kode CSS berikut tepat di atas kode yang di temukan.

.BD_widget {
  padding:10px;
  border-image:initial;
  height:auto;
  width:auto;
  background-color:#ccc;
}

.BD_widget input.BDmail {
  border:1px solid;
  color:#999;
  padding:7px 10px 8px;
  width:auto;
  border-radius:3px;
  font-size:13px;
  font-weight:bold;
  border-color:#000;
}

.BD_tumb {
  border:0 solid #dedede;
  background-color:#000;
  background:linear-gradient(center top,#ffca00 0,#ff9b00 100%);
  padding:8px;
  border-radius:5px;
  color:#fff;
}

.BD_tumb:hover {
  background-color:#666;
  cursor:inherit;
}

.button-bdsub {
  background-color:#09f;
  border-radius:5px;
  border:#00f solid 1px;
  display:inline-block;
  color:#3c2801;
  font-size:9px;
  font-weight:bold;
  padding:0 4px;
  text-decoration:none;
  cursor:pointer;
}

.button-bdsub:hover {
  background-color:#62c0ff;
  text-shadow:1px 1px 0 #ffeb98;
  cursor:pointer;
  text-decoration:none;
}

.BD-tom a {
  background-color:#181333;
  border:1px solid;
  border-color:#000;
  color:#000;
  padding:5px 10px;
  text-decoration:none;
  list-style-type:none;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:12px;
  text-transform:uppercase;
  box-shadow:0 0 2px #000 inset;
  font-weight:100;
}

.BD-tom a:hover {
  background-color:#0cf;
  color:#000;
  box-shadow:1px 1px 1px 1px #000;
  text-decoration:none;
}

ul.BD_share {
  list-style:none;
  margin:15px auto;
  display:inline-block;
}

ul.BD_share li {
  display:inline;
  float:left;
  background-repeat:no-repeat;
}

ul.BD_share li a {
  display:block;
  width:48px;
  height:48px;
  padding-right:10px;
  position:relative;
  text-decoration:none;
}

ul.BD_share li a strong {
  font-weight:normal;
  position:absolute;
  left:50px;
  top:50px;
  color:#fff;
  padding:3px;
  z-index:2000;
  text-shadow:1px 1px 0 rgba(0,0,0,0.75);
  background-color:#900;
  border-radius:3px;
  box-shadow:0 0 5px rgba(0,0,0,0.5);
}

ul.BD_share li.icon-facebook {
  background-image:url("
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF9OOz1Wcj-wK_XOohNZjn-Ycs4zX_LE-R-TKKyY_9g-qGYlAfjnn1EjCdPyDNm3UJpFX0ROUvjCWJOqpmRSOshk0boIiujhrZK7GoZ-0DmA3s5G8tMwywKLznIO3gpQZjKimejU5S5Nw/s1600/RFB.png"
  );
}

ul.BD_share li.icon-twitter {
  background-image:url("
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ihajz6Ziw-_EOnjXqRnFSARJFoquioLPHR34DjSIMHvjFtNxgybnw835yTrrsTi2eYuRZ3VvPlP7LNEOfPAWbGZxtB1wI3-W3O5_BuzbiCadW2BiHhQZv8xA8JovQGQvUJRCip7WxxY/s1600/RTW.png"
  );
}

ul.BD_share li.icon-gplus {
  background-image:url("
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlDtFECMf90Hg8mR-NMFv2X8NQGoP2N49ONG-jCoUBf8tMSVxkO0C6M0LJzOGV3rxXr7CeULN8CdhOvFszOwBNJTrQml5cWEZZuRPhQp13zHMfqDi_zPWttRIYHspL3hpEm6PTpTMC53g/s1600/gpluss.png"
  );
}

ul.BD_share li.icon-digg {
  background-image:url("
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEien2Eb3WGUKmddnXfwvKRrOWQ1RW0cy9tEiJ6J1suI23wICvnfbt2kzK7_33nycm4iV7maalhvoQnIEeKc64y2A1Qwg3VLCMBFF-Mv2H4kxm1iORzltUkPhQyDE6hwf7SnheWtasiV4Kc/s1600/RDG.png"
  );
}

ul.BD_share li.icon-technorati {
  background-image:url("
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmqvy0NMq-na9KPK3yps-qzYF3lucHra2oNu40LzWFJMOni8HyvJCGyTeKQi2UOVLskH47U4mqv0Oc6blR2z9WCu6g_FDw5H1HofquxIUB4SfE121nFeXmN6ufo3ASTrcbFgs-S_-dkBY/s1600/RTEC.png"
  );
}

#aab_icon:hover li {
  opacity:.1;
}

#aab_icon li {
  -webkit-transition-property:opacity;
  -webkit-transition-duration:500ms;
  -moz-transition-property:opacity;
  -moz-transition-duration:500ms;
}

#aab_icon li a strong {
  opacity:0;
  -webkit-transition-property:opacity,top;
  -webkit-transition-duration:300ms;
  -moz-transition-property:opacity,top;
  -moz-transition-duration:300ms;
}

#aab_icon li:hover {
  opacity:1;
}

#aab_icon li:hover a strong {
  opacity:1;
  top:-20px;
}

#BD_sosial {
  border:1px solid #7c7c7c;
  width:auto;
}

.BD_widget {
  padding:10px;
  font-family:"
  Arial"
  ,"
  Helvetica"
  ,sans-serif;
  border-image:initial;
  height:auto;
  width:auto;
  background-color:#ccc;
}

.BD_widget input.BDmail {
  border:1px solid;
  color:#999;
  padding:7px 10px 8px;
  width:auto;
  border-radius:3px;
  font-size:13px;
  font-weight:bold;
  border-color:#000;
}

.BD_tumb {
  border:0 solid #dedede;
  background-color:#000;
  background:linear-gradient(center top,#ffca00 0,#ff9b00 100%);
  padding:8px;
  border-radius:5px;
  color:#fff;
}

.BD_tumb:hover {
  background-color:#666;
  cursor:inherit;
}

Masih Pada Edit HTML, Silahkan Cari <data:post.body/> dan jika sudah ketemu, Pastekan Kode berikut tepat di bawah <data:post.body/>.

<div id='BD_sosial' style='text-align: center; '>
<div style='text-align: center; '>
<div style='padding:5px 5px 5px 5px;'>Share this artikel and Subscribe Free Update articel by email</div>
<div class='BD_widget'><div style='text-align:left;margin-top:-15px '><ul class='BD_share' id='aab_icon'>
<li class='icon-facebook'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share this on facebook'><strong>Facebook</strong></a>
</li>
<li class='icon-twitter '>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share this on twitter'><strong>Twitter</strong></a>
</li>
<li class='icon-gplus'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Google plus'><strong>Google plus</strong></a>
</li>
<li class='icon-digg '>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Digg'><strong>Digg</strong></a>
</li>
<li class='icon-technorati '>
<a expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul></div>
<div style='text-align:right; margin-top:-55px'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onSubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tipsblogbaru&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='BDmail' name='email' placeholder='Enter email here..' type='text'/><input class='BD_tumb' type='submit' value='Subscribe'/><input name='uri' type='hidden' value='tipsblogbaru'/><input name='loc' type='hidden' value='en_US'/></form></div></div>
</div>
</div>

Silahkan Simpan Template anda.

Penting!! Untuk <data:post.body/> biasanya terdapat lebih dari satu kode, saran saya! Pilih yang nomer DUA.

Jika ada yang kurang jelas mengenai cara memasang tombol share sosial media ini, silahkan saja bertanya.