Menambahkan Tombol Share Pada Template Revoltify

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

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

Berikut cara penerapannya :

Buka dashboard Blogger
Klik Template
Klik Edit HTML
Terapkan arahan 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 arahan 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 arahan di bawah ini sempurna sehabis arahan 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 sahabat ingin memasang tombol share tersebut pada template lain, silahkan diadaptasi kembali. Cukup sekian dan biar bermanfaat.

Share this post