Inilah Menambahkan Tombol Share Pada Template Revoltify - Fezarzone

Menambahkan Tombol Share Pada Template Revoltify - Selamat malam teman blogger, kali ini Saya akan membuatkan cara memasang tombol share di halaman utama blog pada template Revoltify.

Postingan ini Saya buat atas seruan teman blogger disini wacana bagaimana cara menambahkan tombol share yang muncul saat kursor mouse digeser ke postingan menyerupai yang ada di blog ini. Tentunya teman sudah tahu dengan fungsi dari tombol share ini dan disini Saya tidak akan menjelaskan wacana fungsinya melainkan cara penerapannya, teman tidak perlu khawatir wacana loading halaman alasannya yaitu tombol ini cukup ringan yang hanya memakai CSS dan Markup saja.

Berikut cara penerapannya :

Buka dashboard Blogger
Klik Template
Klik Edit HTML
Terapkan aba-aba di bawah ini di dalam CSS khusus homepage / halaman utama

/* CSS Homepage Share */ ul.twitfbshare{clear:both;float:left;list-style:none outside none;position:absolute;z-index:10;margin:0;padding:0;top:20px;left:20px;line-height:normal;overflow:hidden;} ul.twitfbshare li{text-align:left;float:left;margin-bottom:0;margin-top:-30px;opacity:0;padding:0;transition:all 0.3s;} .post:hover .twitfbshare li{opacity:1;margin-top:0;} ul.twitfbshare li a{background-clip:padding-box;background-repeat:no-repeat;display:block;overflow:hidden;text-align:center;text-transform:uppercase;white-space:nowrap;width:30px;height:30px;line-height:30px;position:relative;margin:0;padding:0;font-size:14px;font-weight:normal;background-color:#fff;color:#aaa;transition:all 0.3s;} ul.twitfbshare li a:hover{color:#fff;} ul.twitfbshare li a.f-like:hover {background-color:#5379b7;} ul.twitfbshare li a.t-share:hover {background-color:#59c2e7;} ul.twitfbshare li a.gplus-share:hover {background-color:#f35d5c;}

Kemudian cari aba-aba di bawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:post.thumbnailUrl'>

Terapkan aba-aba di bawah ini sempurna sehabis aba-aba di atas

<ul class='twitfbshare'>   <li>    <a class='f-like' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Facebook'><i class='fa fa-facebook'/></a>    </li>         <li>    <a class='t-share' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet On Twitter'><i class='fa fa-twitter'/></a>    </li>         <li>    <a class='gplus-share' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Google Plus'><i class='fa fa-google-plus'/></a>    </li>  </ul>

Setelah diterapkan akan terlihat menyerupai ini

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:post.thumbnailUrl'>  <ul class='twitfbshare'>   <li>    <a class='f-like' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Facebook'><i class='fa fa-facebook'/></a>    </li>         <li>    <a class='t-share' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet On Twitter'><i class='fa fa-twitter'/></a>    </li>         <li>    <a class='gplus-share' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share On Google Plus'><i class='fa fa-google-plus'/></a>    </li>  </ul>

Terakhir simpan template dan lihat hasilnya.

Jika teman ingin memasang tombol share tersebut pada template lain, silahkan diubahsuaikan kembali. Cukup sekian dan supaya bermanfaat.