Cara memasang tombol share dan popular post warna warni seperti evo magz diblog Terbaru

Hallo sobat blogger pada ksempatan ini saya akan share Cara memasang tombol share dan popular post warna warni seperti evo magz diblog Terbaru, siapa yang tidak tahu dengan template buatan Mas Sugeng ini, menurut saya template - template karyanya sangat simple namun kliatannya keren.
Nah pada kesempatan ini saya akan share tombol sharing nya sekalian sama popular post nya yang ada pada template Evo magz supaya lebih kliatan penuh warna Broo :D, oke kita langsung saja menuju langkah - langkahnya.

 

Cara memasang tombol share ala Evo magz :

• Masuk dashboard blogger > Template>Edit HTML
• Kemudian copy kode css berikut dan pastekan tepat di atas kode ]]</b:skin> atau </style> untuk memudahkan pencarian tekan ctrl+F.

.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjImrRkk630QMGzgbKxZxUuhh_W0ffy7kMuGvxW_2ApqpoAS6kPwKGKljZelgh5FQpHoHWUlroPN5CBrinC21OujUMTk9pI61GI2aQjZrQDGr7V12Az4HG1caRQRXvhA2s2_xWMCn-7JGt5/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;}
.share-buttons{margin:0 0;height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block}

• Selanjutnya cari lagi kode <data:post.body/> untuk memudahkan pencarian tekan ctrl+F, kode tersebut biasanya lebih dari 2 kode, sobat blogger pilih aja yang terakhir.
• Klo sudah ketemu copy script dibawah ini dan pastekan tepat dibawah  <data:post.body/>.

<div class='share-buttons-box'>
        <div class='share-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 fbshare'><div class='fb-share-button' data-type='box_count' 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 class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>
            lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></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>

• Simpan template dan lihat hasilnya.

Cara mengubah popular post menjadi ala Evo magz :

 

• Seperti biasa masuk dashboard blogger>template>edit HTML
• Kemudian copy kode css dibawah ini dan pastekan tepat diatas kode ]]</b:skin> atau </style>

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0 0;padding:0 0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:.5em 0;list-style:none;color:black;counter-reset:num}
.PopularPosts ul li img{display:block;margin:0 .5em 0 0;width:50px;height:50px;float:left}
.PopularPosts ul li{background-color:#eee;margin:0 10% .4em 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:#000!important;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;top:0;right:0;padding-right:0!important}
/* Set color and level */
.PopularPosts ul li:nth-child(1){background-color:#A51A5D;margin-right:1%!important}
.PopularPosts ul li:nth-child(2){background-color:#F53477;margin-right:2%!important}
.PopularPosts ul li:nth-child(3){background-color:#FD7FAA;margin-right:3%!important}
.PopularPosts ul li:nth-child(4){background-color:#FF9201;margin-right:4%!important}
.PopularPosts ul li:nth-child(5){background-color:#FDCB01;margin-right:5%!important}
.PopularPosts ul li:nth-child(6){background-color:#DEDB00;margin-right:6%!important}
.PopularPosts ul li:nth-child(7){background-color:#89C237;margin-right:7%!important}
.PopularPosts ul li:nth-child(8){background-color:#44CCF2;margin-right:8%!important}
.PopularPosts ul li:nth-child(9){background-color:#01ACE2;margin-right:9%!important}
.PopularPosts ul li:nth-child(10){background-color:#94368E;margin-right:10%!important}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}

• Jika sudah simpan template dan lihat hasilnya.

Demikian postingan saya Cara memasang tombol share dan popular post warna warni seperti evo magz diblog Terbaru, Semoga bermanfaat dan template sobat tambah keren .