Home » Blogger Hack » Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger

Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger

Kali ini Blog Gado Gado akan menampilkan artikel berjudul Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger. Dengan artikel Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger selengkapnya:

D-Copy Blog's | Diwaktu ini kita akan belajar lagi cara buat share sosial dengan hover efek di akhir postingan blogger, seperti widget-widget sebelumnya versi 1, 2, 3 dan 4 yang mungkin juga menarik perhatian Anda.

Langkah :

  1. Buka akun Blogger Anda
  2. Masuk ke Menu Template > edit HTML > Proceed > centang Expand Template Widget
  3. Cari kode dibawah ini :
]]</b:skin>
     4.  Pastekan kode dibawah ini, diatas pada kode diatas :
.social {
background: url(http://1.bp.blogspot.com/_lxBSX0YJV58/TB7vY3E5WOI/AAAAAAAAAys/iJTqIgOlXK4/s1600/social_bg.png) no-repeat top;
padding: 5px 5px 5px 5px;
margin: 5px;
text-align:center;
font-family:Trebuchet MS;
font-size:12px;
height: 78px;
}
.social img {
margin:10px 2px 0px 2px;
padding: 3px 2px 2px 2px;
text-align:center;
border:1px solid #cfdde9;
}
.social img:hover {
border:1px solid #abcce9;
}
a.opacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}
a.opacity:hover img {
filter:alpha(opacity=75);
-moz-opacity: 0.7;
opacity: 0.7;
-khtml-opacity: 0.7; }
     5.  Cari kode dibawah ini :
<div class='post-footer-line post-footer-line-1'>
atau
<data:post.body/>
     6.  Pastekan kode dibawah ini, dibawah pada kode diatas :
<div class='social'>
<strong>Jika Anda Menyukai Postingan diatas Silahkan Share :</strong>
<br/>
<a class='opacity' href='http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='StumbleUpon' src='http://3.bp.blogspot.com/_lxBSX0YJV58/TB7vZYvZleI/AAAAAAAAAy0/xL8cq0Xfals/s1600/stumbleupon_icn.png'/></a>
<a class='opacity' href='http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Digg' src='http://3.bp.blogspot.com/_lxBSX0YJV58/TB7u2DFG-wI/AAAAAAAAAws/LDMqY5ksIRY/s1600/digg_icn.png'/></a>
<a class='opacity' href='http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://1.bp.blogspot.com/_lxBSX0YJV58/TB7vayHZt7I/AAAAAAAAAzM/Bw7rn_7EYfc/s1600/twitter_icn.png'/></a>
<a class='opacity' href='http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://2.bp.blogspot.com/_lxBSX0YJV58/TB7u1qv7dvI/AAAAAAAAAwk/HwmDvlyVaG4/s1600/delicious_icn.png'/></a>
<a class='opacity' href='http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='http://3.bp.blogspot.com/_lxBSX0YJV58/TB7vIcLRegI/AAAAAAAAAx0/Qo0s38tF_XQ/s1600/reddit_icn.png'/></a>
<a class='opacity' href='http://www.technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://3.bp.blogspot.com/_lxBSX0YJV58/TB7vZ0kXFwI/AAAAAAAAAy8/nyPShbwduac/s1600/technorati_icn.png'/></a>
<a class='opacity' href='http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://3.bp.blogspot.com/_lxBSX0YJV58/TB7u-BSeGgI/AAAAAAAAAw0/6JHMRNH6w1A/s1600/facebook_icn.png'/></a>
<a class='opacity' href='http://www.mixx.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Mixx' src='http://1.bp.blogspot.com/_lxBSX0YJV58/TB7vAfkv2QI/AAAAAAAAAxU/N1ay5dy0Ygo/s1600/mixx_icn.png'/></a>
<a class='opacity' href='http://www.linkedin.com/shareArticle?mini=true&url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Linkedin' src='http://1.bp.blogspot.com/_lxBSX0YJV58/TB7vAN8cbWI/AAAAAAAAAxM/lfDH7fJ5Pes/s1600/linkedin_icn.png'/></a>
<a class='opacity' href='/feeds/posts/default' target='_blank' title='Subscribe via RSS'><img alt='' src='http://3.bp.blogspot.com/_lxBSX0YJV58/TB7vOi-MHZI/AAAAAAAAAyE/o8b1DF949NE/s1600/rss_icn.png'/></a>
</div>
</div>

Keterangan :

  • Pada kode <data:post.body/> mungkin kode tersebuat ada 3 atau lebih, pastekan kode diatas pada kode pertama atau kode kedua tepat dibawahnya.
  • Ganti Jika Anda Menyukai Postingan diatas Silahkan Share : dengan kata-kata yang Anda inginkan.

Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.

0 komentar:

Poskan Komentar