Cara Membuat Tombol Share Warna-warni di Blog


Artikel kali ini adalah Cara Membuat Tombol Share Warna-warni di Blog.
Biasanya tombol share yang dibuat itu berupa widget, tapi sekarang bentuknya seperti widget tapi tidak dipasang satu-satu melainkan digabung menjadi satu dan rapih. Contohnya seperti di bawah ini.

Cara Membuat Tombol Share Warna-warni di Blog

Cara membuatnya ada di bawah ini :

  • Login ke blogger.com
  • Pada dashboard pilih Template → Edit HTML
  • Cari kode ]]> dengan cara tekan tombol F3
  • Setelah itu letakkan script di bawah ini di atas kode ]]>

#share-button-lanonadio {margin:0 0 8px;padding:0;overflow:hidden;}
#share-button-lanonadio p {float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#eaeaea;font-color:#000;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff;}
#share-button-lanonadio a {position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff;}
#share-button-lanonadio a:hover {top:1px;left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1);}

  • Setelah itu cari kode
  • Letakkan script di bawah ini di bawah kode 




Share On





StumbleUpon
LinkedIn







Perhatian :

Kode bisa sampai tiga kodenya, cobalah satu-persatu, jika tombol share masih belum muncul.

Selamat Mencoba !
", numPosts: 4, titleLength: "auto", thumbnailWidth: 178, thumbnailHeight: 100, noImage: "//1.bp.blogspot.com/-aR5w9KXuWGU/XhSDNRAVuhI/AAAAAAAAHG8/dLxcaZxSgh0v85JG0mWRMQyEwqMgpL1_gCLcBGAsYHQ/w178-h100-c/no-image.jpg", containerId: "related-post-2128081942341347321", newTabLink: false, widgetStyle: 3, callBack: function() {} };
"+m+"")}r.innerHTML=o+=""+m,g.callBack()}},r(g.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]); } })(); (function() { var postBody = document.querySelector('.post-body'); var firstPostImg = postBody.querySelector('img'); firstPostImg.classList.add('fullwidth'); })(); //]]>