KODE IKLAN DFP 1 Memasang Social Share Button No JS With Javascript | Masgunggoyo

Recents Posts

    Iklan Atas Artikel

    Memasang Social Share Button No JS With Javascript

    KODE IKLAN 200x200
    KODE IKLAN 336x280
    Cara Membuat Sticky Share Button Blogger Memasang Social Share Button No JS With Javascript

    Setelah kemarin saya memposting Cara Membuat Sticky Share Button Blogger yang sudah kita simak bersama dan mungkin dari beberapa sobat ada yang sudah mempraktekannya, ada beberapa pertanyaan yang masuk melalui email apakah bisa memasang sosial share button tanpa harus membuat loading blog menjadi lambat, jawabnya bisa. 

    Untuk menjawab pertanyaan tersebut maka di posting kali ini saya akan posting Cara Memasang Social Share Button No JS With Javascript tanpa harus membebani loading blog sehingga loading blog tetap stabil, sebenarnya caranya cukup mudah disini saya modifikasi share buttonnya tampilannya jadi berjejer ke samping kemudian tampilannya statis jadi bisa menyesuaikan tampilan dan juga nantinya bisa di pasang di bawah postingan blog sobat.  

    Di Sosial share Button ini saya tambahkan sosial share lebih banyak dari mulai Digg, Linkedin, Delicious, Stumbleupon, Tumbrl, Pocket dan lain-lain yang ke semuanya itu dapat sobat gunakan dan pastikan sebagai senjata mendatangkan Trafik. Kemudian Link share button ini tampilannya di modify bisa Show Hide yang ditandai dengan tombol Plus contoh tampilannya bisa dilihat pada gambar diatas.

    Ada yang menarik dari Postingan ini sesuai judul diatas Memasang Social Share Button No JS With Javascript saya hanya menyertakan link-link dari sosial share tersebut diatas jadi bisa mempercepat loading blog kemudian pada show hide di link sosial share tambahannya di postingan ini di sajikan dalam 2 versi yaitu versi Javascript dan versi Jquery jadi sobat bisa pilih mau menggunakan yang mana antisipasi jika salah satu tidak cocok pada template yang sobat pakai. Baiklah untuk sobat yang mau mencobanya silahkan disimak berikut ini.

    Langkah Awal
    Silahkan sobat salin kode CSS dibawah ini kemudian letakkan di atas kode ]]></b:skin> atau bisa juga </style>   

    .share,h2.sharetitle{display:inline-block;float:left;margin-right:10px} h2.sharetitle{font-size:24px;margin-top:6px;font-weight:600} .sharethis{position:relative;margin-bottom:20px} .share{position:relative;} a.gp{color:#ba3227} a.fb{color:#324b81} a.tw{color:#01a7de} a.pr{color:#0a7111} span.pl{color:green;cursor:pointer} a.fb .fa-stack-1x,a.gp .fa-stack-1x,a.pr .fa-stack-1x,a.tw .fa-stack-1x,span.pl .fa-stack-1x{position:absolute;left:0px;top:2px} #share-menu{display:none} .dropdown-menu{position: absolute;top: 100%;right:2px;z-index: 1000;float: left;min-width: 100px;padding: 5px 10px;margin: 2px 0 0;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:400;display:block} .dropdown-menu li a:hover{color:#e8554e!important;}

    Setelah itu lanjutkan salin dan letakkan kode-kode javascript tepat dibawah kode berikut atau tampilan kodenya seperti ini

    <b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'>   <data:post.body/> </b:if>       <div class='clear'/> <!-- clear for photos floats -->     </div>


    Berikut Kode Javascriptnya
    1. Jika tampilannya Show Hide menggunakan Javascript

    <b:if cond='data:blog.pageType == &quot;item&quot;'> <h2 class='sharetitle'>Share this:</h2> <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="Memasang Social Share Button No JS With Javascript">\     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x fa-inverse"></i></span></a> \ <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Memasang Social Share Button No JS With Javascript">\     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a> \ <a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=dibalikseo&related=dibalikseo" target="_blank" title="Memasang Social Share Button No JS With Javascript">\     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a> \     <span class="fa-stack fa-lg pl" data-target="#share-menu"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-plus fa-stack-1x fa-inverse"></i></span> \ <ul class="dropdown-menu" id="share-menu"> \     <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Memasang Social Share Button No JS With Javascript">Digg</a></li> \     <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Memasang Social Share Button No JS With Javascript">Linkedin</a></li> \     <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Memasang Social Share Button No JS With Javascript">Stumbleupon</a></li> \     <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Memasang Social Share Button No JS With Javascript">Delicious</a></li> \     <li><a href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Memasang Social Share Button No JS With Javascript">Tumblr</a></li> \     <li><a href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Memasang Social Share Button No JS With Javascript">BufferApp</a></li> \     <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Memasang Social Share Button No JS With Javascript">Pocket</a></li> \     <li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Memasang Social Share Button No JS With Javascript">Evernote</a></li> \     </ul> \ </div><div class="clear"></div></div> \ '); var button=document.querySelector(".pl");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="block"==t.style.display?"none":"block"}); //]]> </script> </b:if>

    Perhatikan kode yang ditandai dibalikseo silahkan sobat ganti dengan user twitter sobat


    2. Jika menampilkan show hide menggunakan Jquery
    nah sebelum mengunakan kode ini sobat wajib sudah memasang Jquery Library terserah mau pakai yang versi berapun.

    <b:if cond='data:blog.pageType == &quot;item&quot;'> <h2 class='sharetitle'>Share this:</h2> <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="Memasang Social Share Button No JS With Javascript">\     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x fa-inverse"></i></span></a> \ <a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Memasang Social Share Button No JS With Javascript">\     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a> \ <a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=DibalikSeo&related=dibalikseo" target="_blank" title="Memasang Social Share Button No JS With Javascript">\     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a> \     <span class="fa-stack fa-lg pl"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-plus fa-stack-1x fa-inverse"></i></span> \ <ul class="dropdown-menu" id="share-menu"> \     <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Memasang Social Share Button No JS With Javascript">Digg</a></li> \     <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Memasang Social Share Button No JS With Javascript">Linkedin</a></li> \     <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Memasang Social Share Button No JS With Javascript">Stumbleupon</a></li> \     <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Memasang Social Share Button No JS With Javascript">Delicious</a></li> \     <li><a href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Memasang Social Share Button No JS With Javascript">Tumblr</a></li> \     <li><a href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Memasang Social Share Button No JS With Javascript">BufferApp</a></li> \     <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Memasang Social Share Button No JS With Javascript">Pocket</a></li> \     <li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Memasang Social Share Button No JS With Javascript">Evernote</a></li> \     </ul> \ </div><div class="clear"></div></div> \ '); $(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})}); //]]> </script> </b:if>

    Silahkan sobat ganti kode dibalikseo yang ditandai dengan username Twitter sobat

    Yang Perlu di Perhatikan :
    Kode-kode share button diatas menggunakan FontAwesome jadi pastikan sobat sudah memasangnya di blog sobat dan perlu diperhatikan juga jika terdapat perbedaan karena kode CSS setiap blog itu berbeda-beda biasanya tergantung template yang sobat gunakan ada yang pernah mengalami berpengaruh di kode css widget, jadi di widget yang baru di pasang ini silahkan sesuaikan penempatanya kalau sobat mau pasang di sebelah kiri silahkan sobat sesuaikan posisi left di kode CSS berikut ini.  

    a.fb .fa-stack-1x,a.gp .fa-stack-1x,a.pr .fa-stack-1x,a.tw .fa-stack-1x,span.pl .fa-stack-1x{position:absolute;left:0px;top:2px}

    Dan Selesai, kode ini bisa sobat pasang di Platform Blogger atau Wordpress pun bisa, selamat mencoba.

    Sumber https://www.dibalikseo.com
    KODE IKLAN 300x 250
    close
    ==[ Klik disini 1X ] [ Close ]==
    KODE IKLAN DFP 2
    KODE IKLAN DFP 2