Post Game: hover

Showing posts with label hover. Show all posts

Wednesday, December 28, 2016

Cara Membuat Popular Post dengan Efek Hover

Selamat sore sobat blogger semua !!! Kali ini aq akan memposting tentang Cara Membuat Popular Post dengan Efek Hover.

Berikut adalah screenshotsnya :

Setelah disorot mouse akan menjadi seperti ini :

Kalau gitu langsung ajah deh :

1.Masuk ke akun blogger sobat.

2.Masuk ke dashboard blogger.

3.Pilih template kemudian edit html

4.Kemudian cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya ya !

.popular-posts ul{padding-left:0px;}.popular-posts ul li {list-style-type: none;margin: 0px 0px 5px;padding: 5px 5px 5px 20px !important;border: 1px solid #dddddd;border-radius: 30px 0 30px 0; -moz-border-radius: 30px 0 30px 0; -webkit-border-radius: 30px 0 30px 0; -o-border-radius: 30px 0 30px 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}.popular-posts ul li:hover {border:1px solid #666666; box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5); border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0;}.popular-posts ul li a:hover {text-decoration:none;}

5.Kemudian save template dan lihat hasilnya. :)

Gimana sob, keren kan ?

Keterangan :

Untuk mengatur jumlah popular post yang muncul dalam blog kita silahkan sobat masuk ke dashboard blogger kemudian pilih tata letak kemudian tambahkan gadget kemudian pilih popular post dan pada pilihan tampilkan hingga masukkan jumlah artikel yang sobat ingin tampilkan di popular post kemudian simpan setelan.
Jika ingin menampilkan thumbnail gambar dari artikel kita supaya muncul dipopular post maka centang pada thumbnail gambar yang berada di widget popular post yang terdapat di tata letak.

Go to link Download

Cara Membuat Tombol Keep Follow Melayang Dengan Hover Opacity Dan Zoom

Sebelum masuk ke pembahasan saya mau curhat dulu sesungguhnya saya posting ini karena lagi ga ada kerjaan di tempat PKL dan saya juga bingung tadinya mau posting tentang apa, ya dari ga ada kerjaan sama sekali mening posting tentnag membuka boroknya blog saya dari semua gadget yang ada, dan sekarang saya akan membuka borok blog saya yang saya bangun sediri dari awal, yaitu tombol keep follow yang ketika di salah satu logonya di sorot oleh cursor maka logo tersebut akan membesar dan logo tersebut menjadi jelas tidak transparan lagi. Nah kalo yang tertarik dan mau memasangnya di blognya silahkan simak dan saksikan liputan berikut...

Selamat siang sodara, kali ini saya akan meliput tentang tata cara membuat tombol yang dari tadi sedang di bicarakan
1. Masuk ke Blogger
2. Kemudian klik Template > Edit HTML > Lanjutkan.
3. Cari kode </body>
4. Lalu simpan kode berikut di atasnya

<style type=text/css>
#keepfollow {position:fixed; bottom:98px; margin-right:0px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;padding:0 0 2px 0;z-index:10;}
#keepfollow .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
.mouseover img
{
opacity:.60;
filter:alpha(opacity=60);
}
.mouseover img:hover
{opacity:1.0;
filter:alpha(opacity=100);
text-shadow: 0 0 10px rgb(251, 51, 51);color:RED;-moz-transform:scale(2.2);-webkit-transform:scale(2.2);-webkit-transition-duration: 1.5s;}
</style>

<div class=mouseover id=keepfollow title=keep follow>
<div style=clear: both;font-size: 16px;text-align:center;>
</div>
<div class=sbutton id=gplusone>
<div class=separator style=clear: both; text-align: center;>
<a href=http://www.facebook.com/ZamalsBlog target=new><img border=0 height=48 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZpYIEp1_koTtMrCMIJB8B_5NZyf7AsTHmHD_F_IyOKjHYPVOQ3tosefHqe1W3f7pUvi6aZgyXBSLct0s9zfB118eFFjbv6tUCAJJDzbKJ1E93120DDxAW7wO9D6kf6argHNW1Y-t9fj0/s200/logo+facebook.JPG width=48/></a></div>
<br/>
<div class=separator style=clear: both; text-align: center;>
<a href=http://twitter.com/zamaludin_a target=new><img border=0 height=48 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCDD4aS1Ri5rzTrpDcpb3n5tlNNgVjSA2QNZnavfy3IR_RIN2iZyrsCJPzExz0jwZn2SxKOnK8nhPTBY4037BLq5kaXpLyMpw5s8ChJ1_eNpH85T3xe2l6StY4DIQueF3MaQgzD_tQZM8/s200/logo+twitter.JPG width=48/></a></div>
<br/>
<div class=separator style=clear: both; text-align: center;>
<a href=http://feeds.feedburner.com/zamaludin target=new><img border=0 height=48 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbBm55CLxYNqjnl1hK3680dR_iGk7RfZXHhwgZKqVai_PMGwjnMNl5RrRn4dyUf4cu8oGKUu20iTeCqa0aJopx8ODLuJx83Tj_QdEFWtuAHvpm8Ve4HXcbB6qn-vZjmEE7KbpNM1mK6s/s200/logo+rss.JPG width=48/></a></div>
<br/>
</div>
</div>

itu kode panjang cuma saya bikin ribet doang hehehe
keterangan:
biru = ganti dengan alamat facebook anda
merah = ganti dengan alamat twitter anda
unyu = ganti dengan alamat RSS anda

5. Klik simpan
selesai...

tapi sayang sungguh di sayang gadget ini optimal di buka di Google Chrome dan Safari (yang lain belum saya coba) karena kalo di buka di firefox hovernya menjadi kurang indah

sekian dari saya assalamualaikum wr. wb

-Semoga Bermanfaat^^,-

Go to link Download

Cara Membuat Kotak Widget Subscribe Dengan Efek Hover

Untuk membuatnya sangat mudah Anda cukup menggunakan sebuah situs untuk membuat widget ini. Klik disini untuk membuat widget (Copyright @ MYBLOGGERTOOLS.ORG)

Nanti Anda disuruh masukin

Google+ ID : (Example : https://plus.google.com/11484989637824562510)
Facebook Username : (Example : http://www.facebook.com/VICTORKALALO)
Twitter Username : (Example : https://twitter.com/victor_kalalo)
Feedburner Username : (Example : http://feeds.feedburner.com/victor_kalalo)

Go to link Download

Post Game

Wednesday, December 28, 2016

Cara Membuat Popular Post dengan Efek Hover

Cara Membuat Popular Post dengan Efek Hover

Wednesday, November 16, 2016

Cara Membuat Tombol Keep Follow Melayang Dengan Hover Opacity Dan Zoom

Cara Membuat Tombol Keep Follow Melayang Dengan Hover Opacity Dan Zoom

Wednesday, October 12, 2016

Cara Membuat Kotak Widget Subscribe Dengan Efek Hover

Cara Membuat Kotak Widget Subscribe Dengan Efek Hover