site stats
Nov 27, 2017
56 Views
0 0

Cara Menambahkan Tombol Media Sosial ke Postingan Blogger

Written by

Bagaimana Menambahkan Tombol Media Sosial ke Postingan Blogger?

Dalam tutorial ini Anda akan belajar menambahkan tombol sharing sosial ke setiap posting blogger Anda. Tombol berbagi sosial responsif ini akan menempel ke bagian atas atau bawah setiap posting blog. Ini membantu pengunjung blog Anda untuk berbagi konten Anda di media sosial tanpa meninggalkan halaman blog Anda.

Gadget sharing untuk blog blogspot ini adalah versi ringan dari JumboShare Counter. Dengan demikian saya akan menyebutnya JumboShare Sederhana. Ini memuat lebih cepat dan memakan waktu muat yang tidak berarti. Waktu muat adalah faktor SEO utama dan Google akan memberi peringkat lebih tinggi di SERPs hanya jika laman web Anda dimuat lebih cepat dan menyediakan antarmuka yang mudah digunakan.

Saya telah menciptakan gadget berbagi ringan ini dengan menyelaraskan semua tombol media sosial utama di dalam baris horizontal. Pengguna dapat mengaktifkan gadget untuk memperluas atau menciutkan jumlah tombol sharing yang ditampilkan.

Gadget ini mencakup tombol media sosial berikut:

  • Facebook
  • GooglePlus +1
  • Twitter
  • LinkedIn
  • Pinterest
  • StumbleUpon
  • Buffer
  • Viber – Secara otomatis akan ditampilkan di perangkat mobile
  • Whatsapp – Secara otomatis akan ditampilkan di perangkat mobile
  • Print
Tombol ini memiliki tampilan dan gaya yang sama persis dengan rekan-rekan resminya. Ini menggunakan stylesheet resmi untuk Facebook, Google, Twitter dan sisanya.

 

Tombol viber dan whatsapp share hanya akan ditampilkan di perangkat mobile seperti smartphone. Pengunjung Anda sekarang dapat berbagi posting blog Anda dengan kontak viber mereka dan teman-teman whatsapp. Saya menggunakan kondisi IsMobileRequest agar tombol ini hanya menampilkan smartphone daripada menggunakan tampilan CSS: tidak ada.
Anda dapat memilih untuk menampilkan gadget berbagi sosial ini tepat di bawah judul posting blog atau Anda dapat menampilkannya di bagian bawah setiap entri blog. Mari langsung bekerja.

Menambahkan Tombol Media Sosial ke Postingan Blogger

  • Buka Blogger> Tema> Cadangan tema Anda
  • Klik Edit HTML
  • Cari ]]> </ b: skin> dan tempelkan kode CSS berikut tepat di atas ]]> </ b: skin>

/* ##### JumboShare Simplified ####### */ 
#MBTshares-wrap{margin:20px 0px;border-top: 1px dotted #eee;padding: 10px 0;border-bottom: 1px dotted #eee;overflow:hidden} 
#MBTshares{display:inline-block;overflow:hidden;text-align:left;white-space:nowrap;font-family:arial;font-size:11px;margin:0px 5px 0; line-height: 1.4em;} 
#horiz{position:relative; padding:0; margin:0;} 
#horiz #MBTshares{position:relative;top:-8px; padding-top:20px;} 
#MBTshares a:hover{text-decoration:none!important;} 
/***Facebook***/ 
.mbt-fb{background:transparent linear-gradient(#4C69BA,#3B55A0) repeat scroll 0 0;border:medium none;border-radius:2px;color:#FFF;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px;text-shadow:0 -1px 0 #354C8C;white-space:nowrap;text-shadow:0 -1px 0 #354C8C} 
.mbt-fb:focus,.mbt-fb:hover,.mbt-fb:active{background:transparent linear-gradient(#5B7BD5,#4864B1) repeat scroll 0 0;border-color:#5874C3 #4961A8 #41599F;box-shadow:0 0 1px #607FD6 inset} 
.mbt-fb i{padding:2px 2px 0 4px;font-size:11px;color:#3B5998;background:#fff;margin-right:4px;margin-top:3px} 
.mbt-fb:hover, .mbt-fb:visited, .mbt-tw:hover,.mbt-tw:visited, .mbt-linkedin:hover ,.mbt-linkedin:visited{color:#fff!important;} 
/***Gplus, Pinit, Stumbleupon***/ 
.mbt-gp{box-shadow:0 1px 0 rgba(0,0,0,0.05);transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#FFF;background-image:none;border:medium none;border-radius:2px;border:1px solid rgba(0,0,0,0.17);color:#262626;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px 0 4px;white-space:nowrap} 
.mbt-gp:hover, .mbt-gp:visited{color:#262626!important;} 
#MBTshares .pinit{background:#f9f9f9!important} 
#MBTshares .stumb{background:#f0fafe!important;border:1px solid #cde3ea} 
#MBTshares .stumb:hover{border:1px solid #b7d5df;box-shadow:0 1px 0 rgba(0,0,0,0.1)} 
#MBTshares .stumb i{color:#eb4823!important;font-size:13px!important;margin-top:1px!important} 
.mbt-gp:focus,.mbt-gp:hover,.mbt-gp:active{border:1px solid rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.1)} 
.mbt-gp i{padding:2px 2px 0 0;font-size:11px;color:#DB4437;margin-right:2px;margin-top:3px} 
.mbt-gp .fa-pinterest{padding:0 2px 0 0;font-size:14px} 
#MBTshares .bufferimg{width:15px; margin-top:2px; padding:0 1px 0 0; } 
/***LinkedIn***/ 
.mbt-linkedin{transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#0077B5;text-shadow:0 -1px #005887;border:medium none;border-radius:2px;border:1px solid #066094;color:#fff;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 2px 0 1px;white-space:nowrap} 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
.mbt-linkedin{padding:0 5px 0 1px} 
} 
.mbt-linkedin:focus,.mbt-linkedin:hover,.mbt-linkedin:active{border:1px solid #0369A0;background-color:#0369A0}
.mbt-linkedin i{padding:0;font-size:17px;color:#FFF;margin-right:0;position:relative;left:1px} 
.mbt-linkedin .ibg{background:#0369A0 none repeat scroll 0 0;width:17px;display:inline-block;border-right:1px solid #006095;border-radius:2px;height:20px;padding:0 2px 0 1px;margin:0 2px 0 -1px} 
/**Twtter, Print, Whatsapp, viber**/ 
.mbt-tw{position:relative;height:22px;padding:4px 8px 1px 4px;font-weight:700;color:#FFF;cursor:pointer;background-color:#1B95E0;border-radius:3px;box-sizing:border-box} 
.mbt-tw:focus,.mbt-tw:hover,.mbt-tw:active{background-color:#0C7ABF} 
.mbt-tw i{padding:0 0 0 1px;font-size:14px;color:#fff;margin-right:2px;margin-top:0} 
.mbt-o{max-width:100%} 
.mbt-o,.mbtcount-o,.mbt-fb,.mbt-gp,.mbt-linkedin,.mbt-tw,.label,#mbtcount{display:inline-block;vertical-align:top} 
.mbtcount-o{position:relative;min-width:15px;height:17px;text-align:center;padding:1px 5px;margin-left:2px;background:#FFF none repeat scroll 0 0;border:1px solid #e7e7e7;border-radius:2px;display:none!important; } 
#MBTshares .printme {background-color:#333;} 
#MBTshares .printme:focus,#MBTshares .printme:hover,#MBTshares .printme:active{background-color:#000} 
#MBTshares .whatsapp{background-color:#73D40B;} 
#MBTshares .whatsapp i{font-size:15px!important;} 
#MBTshares .whatsapp:focus,#MBTshares .whatsapp:hover,#MBTshares .whatsapp:active{background-color:#65BA09} 
#MBTshares .viber{background-color:#7b519d;} 
#MBTshares .viber:focus,#MBTshares .viber:hover,#MBTshares .viber:active{background-color:#8558aa} 
#MBTshares .viberimg{width:13px; margin-top:0px; padding:0 3px 0 0; } 
#mbtcount{color:#666;white-space:nowrap;text-decoration:none;padding:2px 0 0} 
#mbtcount:hover{text-decoration:none} 
#MBTshares .arrow{height:0;left:-10px;position:relative;top:-15px;width:5px;z-index:2} 
#MBTshares .ext{min-height:18px!important} 
#MBTshares .arrow s,#MBTshares .arrow i{border-color:transparent #e7e7e7;border-style:solid;border-width:4px 5px 4px 0;display:block;position:relative;top:19px} 
#MBTshares .arrow i{border-right-color:#FFF;left:2px;top:11px} 
.share-btn{position:relative;display:inline-block; display:none!important;} 
.share-btn .h2{font-size:30px;font-weight:700;font-family:arial;color:#73D40B;height:31px; line-height: 1.4em;} 
.share-btn .h4{font-size:12px;font-family:arial}

/*#########Horizontal Switch###########*/ 
.switchoff2{display:inline-block;} 
.mbtswitch2{padding:0 15px 0 3px;position:relative;top:-15px;margin:20px 0 0 3px;display:inline-block;max-width:30px;height:20px;cursor:pointer;background-color:#fff;border:1px solid #eee;border-radius:2px;outline:0 none;font:16px fontawesome;color:#ddd} 
.mbtswitch2:hover{color:#73D40B} 
.mbtswitch2 i.active:after{content:'\f067';position:relative;left:7px;top:2px;font-style:normal} 
.mbtswitch2 i.inactive:after{content:'\f068';position:relative;left:7px;top:2px;font-style:normal} 
@media only screen and (max-width:230px) { 
.tcount{border-bottom: 2px solid #74D50C; border-right:none; min-width:100%;} 
#horiz #MBTshares {width: 100%;}

 

  • Tempel kode berikut tepat di atas </ head> di dalam template Anda:

<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> 
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

Lewati langkah ini jika Anda telah menambahkan  JQuery dan FontAwesome di dalam template Anda.

 

  • Selanjutnya tambahkan script jQuery berikut tepat di atas tag </ body>

<script type='text/javascript'> 
        //<![CDATA[ 
        /* ##### FREE JUMBOSHARE SIMPLIFIED ####### 
Developed by: www.MyBloggerTricks.com 
Dual licensed under the MIT license and GPL license. 
Copyright (c) 2015-2016 STCnetwork.org 
*/ 
$(document).ready(function() { 
$(".mbtswitch").click(function(){$(".switchoff").slideToggle();if($(".mbtswitch i").attr("class")==="active"){$(".mbtswitch i").removeClass("active").addClass('inactive')}else if($(".mbtswitch i").attr("class")==="inactive"){$(".mbtswitch i").removeClass("inactive").addClass('active')}});
$(".mbtswitch2").click(function(){$(".switchoff2").slideToggle();if($(".mbtswitch2 i").attr("class")==="active"){$(".mbtswitch2 i").removeClass("active").addClass('inactive')}else if($(".mbtswitch2 i").attr("class")==="inactive"){$(".mbtswitch2 i").removeClass("inactive").addClass('active')}}); 
}); 
//]]></script>

 

  • Kemudian Simpan Tema

Tambahkan Tombol Media Sosial di Atas / Bawah Dari Setiap Postingan Blog

 

Ikuti langkah mudah ini untuk menambahkan tombol berbagi tepat di bawah setiap judul posting blog atau footer posting:
Di dalam tema Anda, cari <data: post.body />. Kode ini terletak dua kali, sekali untuk tampilan seluler dan satu kali untuk tampilan desktop. Karena itu perhatikan tampilan kedua dari <data: post.body /> saja.
Catatan: Jika Anda ingin menampilkan bilah berbagi horisontal di bawah judul posting ini, tempelkan kode HTML berikut tepat di atas <data: post.body /> tetapi jika Anda ingin menampilkan bilah sharing di bagian bawah setiap entri blog, kemudian tempelkan yang berikut Kode HTML di bawah <data: post.body />
Jika Anda ingin menampilkan tombol berbagi di bagian atas dan bawah setiap posting blog, maka tempel kode HTML berikut sekali di atas <data: post.body /> dan sekali di bawah <data: post.body />.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='MBTshares-wrap'>
<!--TOTAL--> 
<div class='share-btn tcount' data-service='total'> 
        <div class='count h2 anim'/> 
        <div class='h4'>SHARES</div> 
</div> 
<span id='horiz'>
<!--FACEBOOK--> 
<div id='MBTshares'> 
<div class='mbt-o'> 
<a class='mbt-fb' expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Facebook!'><i class='fa fa-facebook'/><span class='label'>Share</span></a> 
</div> 
<div class='mbtcount-o'> 
<div class='arrow'><s/><i/></div> 
<span class='share-btn' data-service='facebook'> 
<span class='count anim' id='mbtcount'/></span> 
</div> 
</div>
<!--PINTEREST--> 
<div id='MBTshares'> 
<div class='mbt-o'> 
<a class='mbt-gp pinit' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Pin it!'><i class='fa fa-pinterest'/><span class='label'>Pin it</span></a> 
</div> 
<div class='mbtcount-o ext'> 
<div class='arrow'><s/><i/></div> 
<span class='share-btn' data-service='pinterest'> 
<span class='count anim' id='mbtcount'/></span> 
</div> 
</div>
<!--TWITTER--> 
<div id='MBTshares'> 
<div class='mbt-o'> 
<a class='mbt-tw' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;-&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Twitter!'><i class='fa fa-twitter'/><span class='label'>Tweet</span></a> 
</div> 
</div>
<!--LINKEDIN--> 
<div id='MBTshares'> 
<div class='mbt-o'> 
<a class='mbt-linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Linkedin!'><span class='ibg'><i class='fa fa-linkedin'/></span><span class='label'>Share</span></a> 
</div> 
<div class='mbtcount-o ext'> 
<div class='arrow'><s/><i/></div> 
<span class='share-btn' data-service='linkedin'> 
<span class='count anim' id='mbtcount'/></span> 
</div> 
</div>
<!--GOOGLE PLUS--> 
<div id='MBTshares'> 
<div class='mbt-o'> 
<a class='mbt-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Google Plus!'><i class='fa fa-google-plus'/><span class='label'>Share</span></a> 
</div> 
<div class='mbtcount-o ext'> 
<div class='arrow'><s/><i/></div> 
<span class='share-btn' data-service='google'> 
<span class='count anim' id='mbtcount'/></span> 
</div> 
</div>
<!--STUMBLEUPON--> 
<div id='MBTshares'> 
<div class='mbt-o'> 
<a class='mbt-gp stumb' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Stumble it!'><i class='fa fa-stumbleupon'/><span class='label'>Share</span></a> 
</div> 
<div class='mbtcount-o ext'> 
<div class='arrow'><s/><i/></div> 
<span class='share-btn' data-service='stumbleupon'> 
<span class='count anim' id='mbtcount'/></span> 
</div> 
</div>
<div class='switchoff2' style='display:none;'>
<!--BUFFER--> 
<div id='MBTshares'> 
<div class='mbt-o'> 
<a class='mbt-gp' expr:href='&quot;https://buffer.com/add?url=&quot; + data:post.url + &quot;&amp;picture=&quot; + data:post.thumbnailUrl + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=stc_network&quot;' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,scrollbars,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Buffer!'><img class='bufferimg' src='https://3.bp.blogspot.com/-eYyUk4KGuBg/Vs-oFm656VI/AAAAAAAAQfE/maUNyJ9PWqE/s1600/logo-icon.png'/><span class='label'>Buffer</span></a> 
</div> 
<div class='mbtcount-o ext'> 
<div class='arrow'><s/><i/></div> 
<span class='share-btn' data-service='buffer'> 
<span class='count anim' id='mbtcount'/></span> 
</div> 
</div> 
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> 
<!-- WHATSAPP --> 
  <div id='MBTshares'> 
    <div class='mbt-o'> 
      <a class='mbt-tw whatsapp' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank' title='Share on whatsapp!'><i class='fa fa-whatsapp'/><span class='label'>SMS</span></a> 
    </div> 
  </div>
<!-- VIBER --> 
  <div id='MBTshares'> 
    <div class='mbt-o'> 
      <a class='mbt-tw viber' expr:href='&quot;viber://forward?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank' title='Share on viber!'><img class='viberimg' src=' https://2.bp.blogspot.com/-Q4pj1x7tFUA/VtIrtKRuDPI/AAAAAAAAQfY/pYMexHW1HqY/s1600/Icon_small.png'/><span class='label'>Share</span></a> 
    </div> 
  </div> 
</b:if>
<!-- PRINT --> 
  <div id='MBTshares'> 
    <div class='mbt-o'> 
      <a class='mbt-tw printme' href='javascript:window.print()' rel='nofollow' target='_blank' title='Print this page!'><i class='fa fa-print'/><span class='label'>Print</span></a> 
    </div> 
  </div>
</div> <!--switchoff-->
<span class='mbtswitch2'><i class='active'/></span> 
</span> 
</div></b:if>

Butuh bantuan di tombol Add Sharing di Blogger?

Beritahu saya jika Anda memiliki pertanyaan. Saya ingin menjawab semua pertanyaan Anda. Tutorial yang lebih menarik dalam perjalanannya karena saya kembali ngeblog.

Mungkin Anda Suka ?

Article Tags:
·
Article Categories:
Blogger · HTML

Leave a Comment

Your email address will not be published. Required fields are marked *