Cara Membuat Social Share Responsive Dibawah Posting Blog

Cara Membuat Social Share Responsive Dibawah Posting Blog - Seperti yang Anda ketahui, social share button ini akan ringan jika dipasang di blog karena tidak menggunakan Javascript. Selain itu, social share button ini juga responsive serta valid HTML5 dan CSS3. Social share button ini juga saya pakai di blog ini, jika anda men-scroll kebawah pada postingan ini, maka anda akan melihat sebuah kotak yang berjudulkan "SHARE THIS", nah..... itulah yang disebut dengan widget Social share yang ingin saya bagikan pada postingan ini. Cara untuk membuat social share responsive ini cukup mudah, yaitu :

Baca juga :  Cara Membuat Responsive Navigation Menu di Blog

• Login ke blogger.com, masuk ke dashboard, kemudian klik pada menu Template > Edit HTML
• Copy kode CSS berikut ini dan letakkan di atas kode ]]></b:skin>  atau </style>

/* Share this button
---------------------------------------------- */
#share-this{
  text-align:center;
  float:center;
  overflow:hidden;
  margin:30px 0 0 0;
  padding:15px;
  line-height:1.4em;
  background:#f5f5f5;
}

#share-this a{
  float:center;
  display:inline-block;
  color:#fff;
  padding:10px 14px;
  text-align:center;
  margin:0 3px 3px;
  font-size:12px
}

#share-this a.this-fb{background:#395796;}
#share-this a.this-tw{background:#4cb0ea;}
#share-this a.this-gp{background:#de3425;}
#share-this a.this-fb:hover,
#share-this a.this-tw:hover,
#share-this a.this-gp:hover {opacity:.5}
#share-this i {margin-right:12px}

.this-fb i,.this-tw i,.this-gp i{
  background:url(https://lh3.googleusercontent.com/-3feUQV1fYJw/Vo6SSrMNHWI/AAAAAAAABN4/97odFI5E6LA/s226-Ic42/social%252520share%252520hafidnotes.blogspot.co.id.png) no-repeat;
  width:22px; 
  height:18px; 
  display:inline-block;
  vertical-align:text-top;
  margin-top:-6px;
  text-align:center
}

.this-fb i{background-position:0 -100px;margin-top:-4px}
.this-tw i{background-position:0 -150px}
.this-gp i{background-position:0 -200px}

@media screen and (max-width:414px){
#share-this{margin:10px 15px}
#share-this a{width:100%;
  padding:0;
  text-align:center !important;
  height:45px;
  line-height:45px;
  margin:0 auto 3px !important;
}

#share-this a.this-gp i, 
#share-this i{display:none}
#share-this a.this-gp{height:auto;margin:0 auto;padding:0}
}

• Kemudian cari kode <data:post.body/> (pilih yang kedua dalam markup post), lalu letakkan kode berikut tepat dibawahnya.

<!--Share This button Start -->
<div id='share-this'>
<center style='margin-top:10px;margin-bottom:30px;font-weight:700;font-size:28px;'>SHARE THIS</center>
<a class='this-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a>

<a class='this-tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/>Tweet on Twitter</a>

<a class='this-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/>Plus on Google+</a></div>
<!--Share This Button End -->

• Simpan Template

Jika ada sebuah pertanyaan yang ingin disampaikan, saya akan senang untuk menjawabnya dengan semampu saya. Semoga bermanfaat :).