Cara Mudah Dapat Uang di Internet Lewat Blog, Twitter, Facebook
» » Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger

Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0NKCk4ZwWBqDwYsDwTSbrWXA9lKrMJB4yW7BzE2ntogJ5EyS8Ct4d9Qs0mt28DXOGMrHo79QGBYHSTsl-kz4ipH3OPQl1rgfLuJtSJRCOJLh0EjFl8Yn_e62RmzJEvtiMdNb21W6Va_gn/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZFV8g_MOjqob-rUO3si7zcJwSBpGXA9lgH6qoNJSQFz_7b2MfJLoo46tW6Tp6gPaoekMyJ7cG_h9qIMQDiAKDLJ_9QWUO67mgqp_tHeVJTiEJ1ENncpOATGqMsJ5VqFXtk3YOmHK1C7JB/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPi4j-SFP_xOsDOGFyxPuAGj2yHAXKJWu2YwAL8lPRajdJeeT9MobPnd5YDGQ1O1ax5vyfB2hAUCb_MH1lHws4O3dfxPXPmOTcl9FV_23OHh6IQOhr-u_LIK6M7ta8CtnTrKc5SZ_AuGT/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIEnjp7E-7KHk4mDSnZHFK1PmowO4MZNsnk6LH48BZkDwL2QgQZl41qMddSvHWA3iYQupdTHXXLxsAe2e4xpK1pJXgEplXhG1Gkfh66PI5V7-qB82-l03gLEgE9oH0x-4T2D5tbqrR6AKs/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdRMAq9jdjXwL2IFBOuuGXpS-6s8LH0_1NJOUqp93bdfc3SXYpUFlMaSRpx-kFLMYFdAS15Bl1_Baxdq0idMWLdWt_5NYrsOjcmbPKw1TiFR9ThqGBTubhtDhyphenhyphen-DvR4y-DQQlXNwfqgb7B/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz1J_7zm5JxWpnWRjcLpFJ4a6e2BebjRdcKeqsbd1hKZCH5b4XVWGUfMb2IylJRIsbOwxdmLMer_y7LD5yP1Cdiud8so28_XTgZ04ST4bz2SFceEPeuo0Rpo9MTzaYmz58HKi3JPFOB-N5/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNJuUld0SzPLBiGMf-IP3G4Cc9yLR2qAAVcCsQnEITMMAlo4AHPTnDhohStFbrk0o-vo_UbNXBkqKaz5WrSNckMxN11khTwMgehXhoY-N8o9Dyet8AM7pvsV6HGLOVFrbAKvJcH_nSqIpr/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-M3Bpjl8R50s7IeRHXZj6JXaCK5XxSTvAN9xTdt0B8rz_d4qd17CsdemyjKdPU4mD_z5HPzVI1Hx1JoHoJZmE7NkQihzlC9NFfyejZC-nt7PRDrDyfKIgGJnFWt-oE8kKectbE14_58b/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimCrhE0RV5DXY0mcnbn8fePOoT5fxXpxtgA-lbXj1o-VPQOsj4JB_m_lLImPCvaoDQylUgHpH99bklEh38SiR2OUEsQbP6ehgq1mb4_kBfIoyhkYxATs3CLfkyRN18hP3D6-MsekQodChm/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6_yGEactHt-9FE6IFJOIAg71XSGs8T1ZFAeK2FxrgdZegShoLS8KcOF2Eg9wR0pgWYTwunn_LfshTbqsZcEUBxeUk_ji1-1CpsE9HEPpWt5802ChVUrn3LVp5k6Whyphenhyphen9yx_QIFReP3GTU/s1600/linkedin_icn.png'/></a>
<a class='opacity' href='/feeds/posts/default' target='_blank' title='Subscribe via RSS'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPvkSPV_Mkpejh8ZPIFIUGrdT4bL-bQ0lJt_sjuRqX4q39B_zbs6ZhG-MciEJ4Gv-4PCcq0v9lCAgGa4iQIvdI4bbRwSywecGO9b_i4e_xG1I0KKe-H4-bw4UhyIcIBbSFBOM4NXHgW6sA/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.
Odii Siitohang
Judul: Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger;
Ditulis oleh: Anonymous;
Rating Blog: 5 dari 5





Anda sedang membaca Artikel tentang Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger dengan url http://d-copy.blogspot.com/2012/09/buat-share-sosial-dengan-hover-efek-di-ahir-postingan-blogger.html, jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.
D-Copy Reader DMCA
[0] Komentar untuk Cara Buat Share Sosial dengan Hover Efek di Akhir Postingan Blogger:

Post a Comment

Beberapa panduan dalam berkomentar :
Untuk menyisipkan kode[code]KODE ANDA[/code]
Untuk menyisipkan quote[blockquote]QUOTE ANDA[/blockquote]
Untuk menyisipkan gambar[img]URL Gambar[/img]
Untuk menyisipkan video[youtube]URL Video[/youtube]
Anda bisa mengekspresikan komentar Anda dengan emoticon
Klik subscribe by email agar Anda segera tahu balasan komentar Anda

 
D-Copy Blog © 2013 - All Rights Reserved Design : Creating Website Published : Mas Template