Cara Menambahkan Tombol Media Sosial ke Posting Blogger

     Social Media Buttons

    Sama sekali tidak ada jalan keluar bahwa selama beberapa tahun terakhir, media sosial telah sepenuhnya mengubah internet. Sebenarnya, ia memiliki seluruh dunia dan juga dunia pemasaran juga.

    Ketika Anda menambahkan tombol berbagi sosial ke posting Blogger Anda, pengunjung Anda dapat membagikan posting Anda di Facebook, Twitter, Google+, Pinterest, dll. Tanpa meninggalkan blog Anda. Begitu,

    Lebih lanjut: 8 Tips Pemasaran Media Sosial Terbaik Untuk Bisnis Anda

    Mengapa tombol berbagi sosial itu penting?

    Rekomendasi Tepercaya

    Ketika konten Anda dibagikan oleh pengunjung Anda melalui tombol berbagi sosial, orang lain akan berpikir bahwa itu adalah sesuatu yang layak untuk dilihat.

    Very Easy to Use

    Ketika Anda memberikan tombol berbagi sosial tepat di atas dan di bawah posting Anda.

    Pembaca Anda hanya dapat membagikan konten Anda hanya dengan mengklik tombol dan itu sangat nyaman bila dibandingkan dengan masuk ke akun media sosial Anda dan menyalin URL posting dan menempel pada kotak status.

    Tingkatkan Traffic di Mesin Pencari

    Media sosial merupakan generator utama yang terus-menerus membawa lalu lintas volume tinggi ke situs web atau blog Anda dan ini dapat membantu SEO secara signifikan.



    Cara Menambahkan Tombol Media Sosial ke Posting Blogger


    Tombol media sosial ini responsif dan akan menempel di bagian atas atau bawah setiap posting Anda. Ini adalah gadget berbagi sosial yang sangat ringan dan telah menyelaraskan semua platform media sosial utama di dalam baris horizontal.

    Lebih lanjut: 7 Kesalahan Umum dalam Strategi Media Sosial
    Anda juga dapat menampilkan tombol media sosial ini di bawah atau di atas konten setiap posting blog.

    Anda dapat beralih tombol untuk memperluas atau bahkan dapat menciutkan jumlah tombol berbagi yang ingin Anda tampilkan.

    Tombol platform media sosial berikut telah disertakan dalam gadget:

    Facebook
    Twitter
    LinkedIn
    Pinterest
    StumbleUpon
    Buffer
    Viber - Secara otomatis akan ditampilkan di perangkat seluler
    Whatsapp - Otomatis ditampilkan di perangkat seluler
    Print - 

    Social Media Buttons

    Saya telah menggunakan style sheet resmi untuk Facebook, Google, Twitter dan lainnya dan karenanya tombol-tombol ini memiliki tampilan dan gaya yang tepat sebagai desain resmi.

    Harap perhatikan bahwa tombol berbagi Viber dan Whatsapp hanya akan ditampilkan di perangkat seluler.

    Jadi, mari kita mulai:

    Ikuti langkah-langkah sederhana dan mudah ini dan Anda akan selesai dalam waktu singkat.



    Langkah 1. Rekatkan jQuery di bawah ini tepat di atas </head> menandai.

    catatan: Lewati langkah ini jika Anda telah menambahkan jQuery dan Font Awesome sebelumnya di templat Anda. 

     gleapis.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'/>   

    Langkah 2. Masuk ke blog Blogger Anda dan pilih Theme dan klik Edit HTML.

    Langkah 3. Tekan Ctrl + F untuk mencari ]]></b:skin> kode dan tempel kode di bawah ini tepat di atas ]]></b:skin> kode.

     #shares-wrap{margin:20px 0px;border-top: 1px dotted #eee;padding: 10px 0;border-bottom: 1px dotted #eee;overflow:hidden}    
      #shares{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 #shares{position:relative;top:-8px; padding-top:20px;}    
      #shares a:hover{text-decoration:none!important;}    
      /***Facebook***/    
      .-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}    
      .-fb:focus,.-fb:hover,.-fb:active{background:transparent linear-gradient(#5B7BD5,#4864B1) repeat scroll 0 0;border-color:#5874C3 #4961A8 #41599F;box-shadow:0 0 1px #607FD6 inset}    
      .-fb i{padding:2px 2px 0 4px;font-size:11px;color:#3B5998;background:#fff;margin-right:4px;margin-top:3px}    
      .-fb:hover, .-fb:visited, .-tw:hover,.-tw:visited, .-linkedin:hover ,.-linkedin:visited{color:#fff!important;}    
      /***Gplus, Pinit, Stumbleupon***/    
      .-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}    
      .-gp:hover, .-gp:visited{color:#262626!important;}    
      #shares .pinit{background:#f9f9f9!important}    
      #shares .stumb{background:#f0fafe!important;border:1px solid #cde3ea}    
      #shares .stumb:hover{border:1px solid #b7d5df;box-shadow:0 1px 0 rgba(0,0,0,0.1)}    
      #shares .stumb i{color:#eb4823!important;font-size:13px!important;margin-top:1px!important}    
      .-gp:focus,.-gp:hover,.-gp:active{border:1px solid rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.1)}    
      .-gp i{padding:2px 2px 0 0;font-size:11px;color:#DB4437;margin-right:2px;margin-top:3px}    
      .-gp .fa-pinterest{padding:0 2px 0 0;font-size:14px}    
      #shares .bufferimg{width:15px; margin-top:2px; padding:0 1px 0 0; }    
      /***LinkedIn***/    
      .-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) {    
      .-linkedin{padding:0 5px 0 1px}    
      }    
      .-linkedin:focus,.-linkedin:hover,.-linkedin:active{border:1px solid #0369A0;background-color:#0369A0}    
      .-linkedin i{padding:0;font-size:17px;color:#FFF;margin-right:0;position:relative;left:1px}    
      .-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**/    
      .-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}    
      .-tw:focus,.-tw:hover,.-tw:active{background-color:#0C7ABF}    
      .-tw i{padding:0 0 0 1px;font-size:14px;color:#fff;margin-right:2px;margin-top:0}    
      .-o{max-width:100%}    
      .-o,.count-o,.-fb,.-gp,.-linkedin,.-tw,.label,#count{display:inline-block;vertical-align:top}    
      .count-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; }    
      #shares .printme {background-color:#333;}    
      #shares .printme:focus,#shares .printme:hover,#shares .printme:active{background-color:#000}    
      #shares .whatsapp{background-color:#73D40B;}    
      #shares .whatsapp i{font-size:15px!important;}    
      #shares .whatsapp:focus,#shares .whatsapp:hover,#shares .whatsapp:active{background-color:#65BA09}    
      #shares .viber{background-color:#7b519d;}    
      #shares .viber:focus,#shares .viber:hover,#shares .viber:active{background-color:#8558aa}    
      #shares .viberimg{width:13px; margin-top:0px; padding:0 3px 0 0; }    
      #count{color:#666;white-space:nowrap;text-decoration:none;padding:2px 0 0}    
      #count:hover{text-decoration:none}    
      #shares .arrow{height:0;left:-10px;position:relative;top:-15px;width:5px;z-index:2}    
      #shares .ext{min-height:18px!important}    
      #shares .arrow s,#shares .arrow i{border-color:transparent #e7e7e7;border-style:solid;border-width:4px 5px 4px 0;display:block;position:relative;top:19px}    
      #shares .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}   
      .switchoff2{display:inline-block;}    
      .switch2{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}    
      .switch2:hover{color:#73D40B}    
      .switch2 i.active:after{content:'\f067';position:relative;left:7px;top:2px;font-style:normal}    
      .switch2 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 #shares {width: 100%;}   


    Langkah 4. Sekarang salin dan tempel skrip jQuery di bawah ini tepat di atas </body> tag.

     <script type='text/javascript'>      
      $(document).ready(function() {    
      $(".switch").click(function(){$(".switchoff").slideToggle();if($(".switch i").attr("class")==="active"){$(".switch i").removeClass("active").addClass('inactive')}else if($(".switch i").attr("class")==="inactive"){$(".switch i").removeClass("inactive").addClass('active')}});   
      $(".switch2").click(function(){$(".switchoff2").slideToggle();if($(".switch2 i").attr("class")==="active"){$(".switch2 i").removeClass("active").addClass('inactive')}else if($(".switch2 i").attr("class")==="inactive"){$(".switch2 i").removeClass("inactive").addClass('active')}});    
      });    
      //]]></script>   


    Menambahkan tombol media sosial ke atas atau bawah dari setiap posting blog.

    Langkah 1. Cari <data:post.body/> kode.

    Catatan: Anda mungkin menemukan ini <data:post.body/> kode dua kali, mis. satu kali untuk tampilan seluler Anda dan satu lagi untuk tampilan desktop. Jadi, ambil kode yang akan Anda temukan untuk kedua kalinya.

    Sekarang, salin kode di bawah ini dan rekatkan kode itu dengan hati-hati:



    Atas <data:post.body/> Jika Anda ingin tombol bilah berbagi sosial Anda ditampilkan di atas posting blog Anda, dan

    Di bawah <data:post.body/> : Jika Anda ingin tombol berbagi media sosial Anda ditampilkan di bawah setiap posting blog.

    Di atas dan di bawah <data:post.body/> Jika Anda ingin menampilkan kedua posting blog Anda di atas dan di bawah maka tempel kode berikut sekali di atas <data:post.body/> kode dan sekali di bawah <data:post.body/> kode.

     1: <b:if cond='data:blog.pageType == &quot;item&quot;'>   
     2: <div id='shares-wrap'>   
     3: <!--TOTAL-->    
     4: <div class='share-btn tcount' data-service='total'>    
     5:   <div class='count h2 anim'/>    
     6:   <div class='h4'>SHARES</div>    
     7: </div>    
     8: <span id='horiz'>   
     9: <!--FACEBOOK-->    
     10: <div id='shares'>    
     11: <div class='-o'>    
     12: <a class='-fb' expr:href='&quot;http://www.facebook.com/share.php?v=4&u="; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,'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>    
     13: </div>    
     14: <div class='count-o'>    
     15: <div class='arrow'><s/><i/></div>    
     16: <span class='share-btn' data-service='facebook'>    
     17: <span class='count anim' id='count'/></span>    
     18: </div>    
     19: </div>   
     20: <!--PINTEREST-->    
     21: <div id='shares'>    
     22: <div class='-o'>    
     23: <a class='-gp pinit' expr:href='&quot;http://pinterest.com/pin/create/button/?url="; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,'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>    
     24: </div>    
     25: <div class='count-o ext'>    
     26: <div class='arrow'><s/><i/></div>    
     27: <span class='share-btn' data-service='pinterest'>    
     28: <span class='count anim' id='count'/></span>    
     29: </div>    
     30: </div>   
     31: <!--TWITTER-->    
     32: <div id='shares'>    
     33: <div class='-o'>    
     34: <a class='-tw' expr:href='&quot;http://twitter.com/home?status="; + data:post.title + &quot;-&quot; + data:post.url' onclick='window.open(this.href,'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>    
     35: </div>    
     36: </div>   
     37: <!--LINKEDIN-->    
     38: <div id='shares'>    
     39: <div class='-o'>    
     40: <a class='-linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&url="; + data:post.url' onclick='window.open(this.href,'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>    
     41: </div>    
     42: <div class='count-o ext'>    
     43: <div class='arrow'><s/><i/></div>    
     44: <span class='share-btn' data-service='linkedin'>    
     45: <span class='count anim' id='count'/></span>    
     46: </div>    
     47: </div>   
     48: <!--GOOGLE PLUS-->    
     49: <div id='shares'>    
     50: <div class='-o'>    
     51: <a class='-gp' expr:href='&quot;https://plus.google.com/share?url="; + data:post.url' onclick='window.open(this.href,'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>    
     52: </div>    
     53: <div class='count-o ext'>    
     54: <div class='arrow'><s/><i/></div>    
     55: <span class='share-btn' data-service='google'>    
     56: <span class='count anim' id='count'/></span>    
     57: </div>    
     58: </div>   
     59: <!--STUMBLEUPON-->    
     60: <div id='shares'>    
     61: <div class='-o'>    
     62: <a class='-gp stumb' expr:href='&quot;http://www.stumbleupon.com/submit?url="; + data:post.url' onclick='window.open(this.href,'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>    
     63: </div>    
     64: <div class='count-o ext'>    
     65: <div class='arrow'><s/><i/></div>    
     66: <span class='share-btn' data-service='stumbleupon'>    
     67: <span class='count anim' id='count'/></span>    
     68: </div>    
     69: </div>   
     70: <div class='switchoff2' style='display:none;'>   
     71: <!--BUFFER-->    
     72: <div id='shares'>    
     73: <div class='-o'>    
     74: <a class='-gp' expr:href='&quot;https://buffer.com/add?url="; + 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,'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'/><spanbel'>Buffer</span></a>    
     75: </div>    
     76: <div class='count-o ext'>    
     77: <div class='arrow'><s/><i/></div>    
     78: <span class='share-btn' data-service='buffer'>    
     79: <span class='count anim' id='count'/></span>    
     80: </div>    
     81: </div>    
     82: <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>    
     83: <!-- WHATSAPP -->    
     84:  <div id='shares'>    
     85:  <div class='-o'>    
     86:   <a class='-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>    
     87:  </div>    
     88:  </div>   
     89: <!-- VIBER -->    
     90:  <div id='shares'>    
     91:  <div class='-o'>    
     92:   <a class='-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'/><spanbel'>Share</span></a>    
     93:  </div>    
     94:  </div>    
     95: </b:if>   
     96: <!-- PRINT -->    
     97:  <div id='shares'>    
     98:  <div class='-o'>    
     99:   <a class='-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>    
     100:  </div>    
     101:  </div>   
     102: </div> <!--switchoff-->   
     103: <span class='switch2'><i class='active'/></span>    
     104: </span>    
     105: </div></b:if>   


    Kustomisasi

    Ganti pegangan penyangga Anda atau nama pengguna profil atau cukup judul blog Anda tanpa spasi di tempat stc_network di nomor baris 74.
    Rekatkan kode seluler jika Anda ingin menunjukkan tombol media sosial apa pun di perangkat seluler yang hanya di dalam tag yang disorot merah.

    Cukup salin dan tempel kodenya jika Anda ingin menambahkan lebih banyak tombol sosial di dalam tag sakelar ungu.

    Untuk menghapus tombol dari sakelar, Anda hanya perlu menyalin dan menempelkan kode tombol di atas tag sakelar.

    Kesimpulan

    Tombol-tombol media sosial ini responsif sehingga secara otomatis akan kembali ukuran dengan lebar layar perangkat.

    Saya harap tutorial ini telah membantu Anda menambahkan tombol berbagi media sosial pada posting Blogger Anda, atau jika Anda menemukan masalah dalam menambahkan kode pada bagian mana pun.

    Tinggalkan komentar di bawah, dan saya akan membalas Anda.



    Nikmati Sahamnya!


    No comments