» » » cara membuat widget tombol share + gambar icon smile di blogspot

cara membuat widget tombol share + gambar icon smile di blogspot

cara membuat widget tombol share + gambar icon smile di blogspot
بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
السلام عليكم 
widgat tombol share + gambar icon smile ini di buat oleh mas Sugeng di template yang ia buat baik yang di jual atau di bagikan secara gratis di blog beliau. Bentuk widgat share ini sangat menarik karena ada gambar icon smile di samping tombol  G+, Like, Share dan Twit.

widget ini saya ambil dari salah satu template mas sugeng yang di bagikan oleh beliau secara gratis
cara membuat widget tombol share + gambar icon smile di blogspot
Berikut cara membuat widget tombol share + gambar icon smile di blogspot :
  • Login ke aku blogger anda
  • pilih blog yang ingin di buat tombol sharenya
  • kemudian pilih Template lalu klik Edit HTML
  • tekan Ctrl + F lalu cari ]]></b:skin>
  • masukkan script di bawah ini tepat diatas kode ]]></b:skin>
    /* social share buttons */
    .social-buttons-box {height: 67px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzVwSYIEjdC9xiTQLc9WupWAsGFkEoFxxtIs3BEIa8N5_mFfzlMWlVml1vUneQt7FdRyVuXesl0y3tm3gOovhbI4B_98uAyKwVb1nNYNu0DXkdFZgMu4rFfIC_gH06odUhur87YmmpdWAl/s1600/rect3799.png) no-repeat 200px 0px; margin:20px 0 15px; overflow:hidden;} .social-buttons {margin:0 0; height:67px; float:left;} .social-buttons .share {float:left; margin-right:10px; display:inline-block;} .share-btn {margin:15px 0 25px; height:20px; overflow:hidden;}
    • kemmudian salin script di bawah ini, lalu masukkan tepat di bawah kode <data:post.body/>atau <div class='post-footer'>
    <div class='social-buttons-box'> <div
    class='social-buttons'> <div
    class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
    <div class='share like'><div class='fb-like' data-action='like'
    data-layout='box_count' data-share='false' data-show-faces='false'
    expr:data-href='data:post.url'/></div> <div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url'
    href='https://twitter.com/share'>Tweet</a></div></div> </div>
    <!--<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);
    js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>--><div style='clear: both;'/>
    • selanjutnya salin JavaScript (.Js) dibawah ini untuk menampilkan widgat tersebut, salin script tersebut diatas </body>
    <script>window.___gcfg = {lang: &#39;id&#39;}; (function() {var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;var s = document.getElementsByTagName(&#39;script&#39;)[0];s.parentNode.insertBefore(po, s);})();
    </script><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);
    js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script><div id='fb-root'/><script
    type='text/javascript'>//<![CDATA[ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src ="//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));//]]></script>
    • kemudian Klik Save dan Lihat hasilnya di blog anda tersebut
    Jika berhasil maka tampilan widget anda seperti yang ada pada widgat tombol share seperti yang ada pada evo magz.
    loading...
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    Related Post:

    Back To Top