Menambahkan Tombol Share Pada Template Revoltify

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

Postingan ini Saya buat atas usul teman blogger disini perihal bagaimana cara menambahkan tombol share yang muncul saat kursor mouse digeser ke postingan ibarat yang ada di blog ini. Tentunya teman sudah tahu dengan fungsi dari tombol share ini dan disini Saya tidak akan menjelaskan perihal fungsinya melainkan cara penerapannya, teman tidak perlu khawatir perihal 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 ibarat 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 biar bermanfaat.

Tweet

Subscribe to receive free email updates: