Cara Membuat Sosial Share di Bawah Postingan (updated)

Sebelumnya dipostingan lain sudah pernah aku bahas mengenai pemasangan tombol Sosial Share, untuk postingan kali ini aku akan menyebarkan kembali mengenai Cara Membuat Sosial Share di Bawah Postingan yang tujuannya yaitu sebagai navigasi pelengkap untuk pengunjung semoga dengan mudah untuk membagikan postingan blog kita jikalau memang dianggap cantik oleh pengunjung dan tentunya ini yaitu cara yang sangat efektif untuk membantu mempromosikan Blog kita.

Nah untuk itu di postingan kali ini aku updated Cara Membuat Sosial Share di Bawah Postingan yang sebelumnya pernah aku ulas juga, untuk sahabat yang belum pernah membacanya dapat dilihat DISINI, dan untuk sahabat yang ingin mencoba Membuat Sosial Share di Bawah Postingan mari kita simak bersama.

Langkah Pertama

Silahkan sahabat salin dan simpan isyarat CSS dibawah ini letakkan sempurna di atas isyarat </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .share,h2.sharetitle{display:block;float:left} h2.sharetitle{font-size:18px;margin-top:15px!important;font-weight:500;line-height:1.4em} .share,.sharethis{position:relative} .sharethis{margin:10px 0 10px 20px;} .sharethis a.fb,.sharethis a.gp,.sharethis a.tw,.sharethis span.pl{cursor:pointer;text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-size:12px;font-weight:300;border-radius:3px;color:#777!important;background:#f8f8f8;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.08);text-shadow:none;line-height:23px;padding:1px 8px 0 5px;transition:all .4s ease-in-out} .fbi,.goplus,.pplus,.tewe{font-size:18px!important;margin-top:1px;vertical-align:middle} .sharethis a.fb:hover,.sharethis a.gp:hover,.sharethis a.tw:hover,.sharethis span.pl:hover{color:#555;background:#fafafa;border:1px solid #999} .sharethis a.fb:active,.sharethis a.gp:active,.sharethis a.tw:active,.sharethis span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)} #share-menu{display:none} .dropdown-menu{position:absolute;top:100%;right:5px;z-index:1000;max-width:100px;padding:5px 10px;margin:0!important;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)} .dropdown-menu li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important} .dropdown-menu li a{color:#333!important;font-weight:300;display:block} .dropdown-menu li a:hover{color:#e8554e!important} .share-whatapp{display:block;font-size: 18px;font-weight: 500;margin-bottom:5px;margin-left:20px} .clear{clear:both} </style> </b:if>

Langkah Ke dua
Kemudian silahkan sahabat salin kembali isyarat HTML dibawah ini

<b:includable id='share-tool' var='post'> <script type='text/javascript'> //<![CDATA[ var siteurl = window.location.href;   document.write('<div class="sharethis"><div class="share"> \ <a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\     <i class="fa fa-google-plus goplus"></i> Google</a> \ <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\     <i class="fa fa-facebook fbi"></i> Facebook</a> \ <a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&related=kompiajaib" target="_blank" title="Share to Twitter">\     <i class="fa fa-twitter tewe"></i> Twitter</a> \     <span class="pl" onclick="showhide()"><i class="fa fa-plus pplus"></i> More</span> \ <ul class="dropdown-menu" id="share-menu"> \     <li><a href="javascript:pinIt();">Pinterest</a></li>\     <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \     <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \     <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \     <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Delicious">Delicious</a></li> \     <li><a href="//www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \     <li><a href="//bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank"  title="Share This On BufferApp">BufferApp</a></li> \     <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \     <li><a href="//www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \     <li><a href="//reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Reddit">Reddit</a></li> \     </ul> \ </div>\ <div class="clear"></div></div> \ '); function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)}; //]]> </script> <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> <script> //<![CDATA[ var whatsurl = window.location.href; var whattitle=encodeURIComponent(document.title); var whattitle_esc=unescape(whattitle); document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\ <a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\ Share</a>\ '); if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);} //]]> </script> </b:if> </b:includable>

Lalu simpan isyarat tersebut diatas sempurna dibawah isyarat berikut ini

<b:includable id='post' var='post'> ............ ............ ............ </b:includable>

Dan kalau sudah nantinya penampakannya akan ibarat dibawah ini

<b:includable id='post' var='post'> ............ ............ ............ </b:includable> <b:includable id='share-tool' var='post'> <script type='text/javascript'> //<![CDATA[ var siteurl = window.location.href;   document.write('<div class="sharethis"><div class="share"> \ <a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\     <i class="fa fa-google-plus goplus"></i> Google</a> \ <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\     <i class="fa fa-facebook fbi"></i> Facebook</a> \ <a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&related=kompiajaib" target="_blank" title="Share to Twitter">\     <i class="fa fa-twitter tewe"></i> Twitter</a> \     <span class="pl" onclick="showhide()"><i class="fa fa-plus pplus"></i> More</span> \ <ul class="dropdown-menu" id="share-menu"> \     <li><a href="javascript:pinIt();">Pinterest</a></li>\     <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \     <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \     <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \     <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Delicious">Delicious</a></li> \     <li><a href="//www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \     <li><a href="//bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank"  title="Share This On BufferApp">BufferApp</a></li> \     <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \     <li><a href="//www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \     <li><a href="//reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank"  title="Share This On Reddit">Reddit</a></li> \     </ul> \ </div>\ <div class="clear"></div></div> \ '); function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)}; //]]> </script> <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> <script> //<![CDATA[ var whatsurl = window.location.href; var whattitle=encodeURIComponent(document.title); var whattitle_esc=unescape(whattitle); document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\ <a href="whatsapp://send" data-text="'+whattitle_esc+'" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\ Share</a>\ '); if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);} //]]> </script> </b:if> </b:includable>

Langkah selanjutnya salin kembali isyarat dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'> <h2 class='sharetitle'>Share this:</h2> <div class='clear'/> <b:include data='post' name='share-tool'/> </b:if>

Lalu simpan isyarat tersebut sempurna dibawah postingan atau cari isyarat berikut letakkan sempurna dibawahnya

............... ...............       <data:post.body/>       <div style='clear: both;'/> <!-- clear for photos floats -->     </div>

Nah kalau sudah di letakkan nantinya penampakannya akan ibarat ini

............... ...............       <data:post.body/>       <div style='clear: both;'/> <!-- clear for photos floats -->     </div> <b:if cond='data:blog.pageType == &quot;item&quot;'> <h2 class='sharetitle'>Share this:</h2> <div class='clear'/> <b:include data='post' name='share-tool'/> </b:if>

Langkah Ketiga
Salin kembali isyarat JavaScript dibawah ini letakkan sempurna diatas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type='text/javascript'> //<![CDATA[ function showhide(){var e=document.getElementById("share-menu");"block"!==e.style.display?e.style.display="block":e.style.display="none"}; var boxArray2=["share-menu"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray2.length;r++){var o=document.getElementById(boxArray2[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.display="none")}}); //]]> </script> </b:if>

Selesai...

Hal harus diperhatikan yaitu semoga ikon sosial sharenya nampak maka wajib terlebih dahulu dipasang FontAwesome, untuk sahabat yang belum memasangnya silahkan pasang terlebih dahulu dan satu lagi pelengkap Tombol Sosial Share ini dilengkapi dengan tombol menyebarkan WhatsApp yang akan tampil di Mobile device.

Bagaimana tertarik untuk mencobanya silahkan praktekkan jikalau ada yang ingin menyebarkan pengalaman silahkan komentar di kolom komentar dibawah ini, terima kasih sudah berkunjung.