Widget Share Yang Cantik

Jumat, Oktober 21, 2011 | Diposting oleh yodicakep |

Kali ini saya mau share masih seputar blogger broo...heee,yaitu cara menambahkan widget share yang cantik di bawah postingan,blogger yang cantik tentunya akan menjadikan pengunjung menjadi betah,apalagi kalau yang buat juga cantik heee ane juga bakalan betah dah ngunjungin blognye...wkwkkwk,yuk langsung ke tip dan tricknya aja broooo,langsung di pasang langsung di comot jangan sungkan2 dan jangan malu2...ok

Contoh Tampilan

Cara Penerapan

1.Masuk ke Blogger
2.Pilih Template kemudian pilih Edit HTML

Maka akan keluar tampilan semua Code HTML

3.Pilih Lanjutkan----> Centang Expand Template Widget

4.Tekan CTRL+F untuk membuka menu Search

cari code <post.body></post.body>

5. Taruh code tambahan di atasnya <post.body></post.body>

Berikut ini adalah code yang perlu anda tambahkan

<style></style>
/*--------Flipper Sharing Widget ------*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN9t4HoDPZtBydYjHQy7MZejw0Y37x_YgNoofPmFJZiwwAM3BZRgGYL4QWkbO3CMkA6Hqp2K1qDgpnSl_QBxv7w5oXG4QlUKG4WsGSZV8ODwkQ3N_JqXiy6sHD9ZQw3ECJLp_m5eU1VQIT/s1600/flipper.png) no-repeat;
-webkit-transition: ease-in 0.15s all;
-moz-transition: ease-in 0.15s all;
-o-transition: ease-in 0.15s all;
-ms-transition: ease-in 0.15s all;
transition: ease-in 0.15s all;
cursor:pointer;
}

.flipper a.googleplus {
background-position: 0px -348px;

}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}

.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}

.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;

}
.flipper a.digg {
background-position: 0px -116px;

}
.flipper a.digg:hover {
background-position: 0px -174px;

}
.flipper a.stumbleupon {
background-position: 0px -812px;

}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;

}
.flipper a.technorati {
background-position: 0px -928px;

}
.flipper a.technorati:hover {
background-position: 0px -406px;

}
.flipper a.twitter {
background-position: 0px -928px;

}
.flipper a.twitter:hover {
background-position: 0px -986px;

}
.flipper a.facebook {
background-position: 0px -232px;

}
.flipper a.facebook:hover {
background-position: 0px -290px;

}
.flipper a.reddit {
background-position: 0px -580px;

}
.flipper a.reddit:hover {
background-position: 0px -638px;
}

.flipper a.rss {
background-position: 0px -696px;

}
.flipper a.rss:hover {
background-position: 0px -754px;
}

.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;

}

<if cond="data:blog.pageType == "item""></if>

6.Save...

7. Enjoy.....

Pages

Widget Share Yang Cantik

Related Post:

0 komentar:

Posting Komentar