Cara Modifikasi Widget Popular Post Dengan Sircle Image

Lumayan pusing untuk menentukan judul yang tepat untuk artikel kali ini akhirnya setelah lumayan berpikir panjang akhirnya artikel kali ini saya beri judul Cara Membuat Widget Popular Post Dengan Sircle Image".

Salah satu widget yang disediakan oleh blogger ialah widget popular post yang mana widget tersebut masih dapat sobat mudifikasi tampilannya agar lebih menarik dengan merubah tampilah image atau thumbnailnya berbentuk lingkaran atau sircle.

Untuk lebih jelasnya liat gambar di bawah ini.

Cara modifikasinya adalah sebagai berikut.

1. Login ke blogger atau klik disini»
2. Pilih Template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand Template Widget.
4. Cari code ]]></b:skin> kemudian copy paste code di bawah ini dan letakkan di atas code ]]></b:skin>

.popular-posts ul{padding-left:0px;font:14px PT Sans Narrow;text-align:left;color:#555;line-height:14px;margin:5px 0} .popular-posts ul li {background: url(#) no-repeat scroll 5px 5px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 5px !important;font-size:12px;font-family: Arial Tahoma, Verdana;!important;font-weight:550; border: 1px solid #ccc; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .popular-posts ul li:hover { background: #CCE9FD;border:1px solid #58ACFA; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);height:70px;width:70px;}.popular-posts .item-thumbnail img:hover { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}

5. Simpan dan lihat hasilnya.

Semoga tutorial kali ini bermanfaat dan jangan lupa untuk meninggalkan komentar demi kemajuan blog ini. Terimakasih :)

{ Read More }

Pasang Widget Fans Like Facebook With ScrollTop Ala UTta

Helo sobat . Kali ini saya ingin sharing cara Pasang Widget Fans Like Facebook With ScrollTop Ala UTta. dimana tutorial seperti ini tidak asing lagi bagi sobat. karena anda bisa temui hal seperti ini di website2 teman. jadi tidak ada salahnya jika saya memshare tutorial ini kepada teman2 yang belum tahu atau ingin mengganti Fans Like Facebook anda dengan versi utta yang ini.heheeg,..

Baiklah sebelum ke TKP saya hanya ingin memberitahukan kepada teman2 bahwa beberapa waktu lalu sy juga memposting tutorial serupa yaitu Pasang Widget Popup Facebook Page Box With EaseOutBounce dan Pasang Widget Popup Facebook Page Like Box With Timer. SO,.. jika sobat tidak suka dengan yang ini maka sobat bisa lht tutorial saya yang sebelumnya.

dan untuk demonya sobat bisa lihat langsung didalam postingan saya ini.
gmn?? keren gak?hehee :D

Baiklah jika sobat tertarik ingin memasangnya silahkan ikuti langkah berikut :
1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya.

 <style type="text/css">
#utTopbar{
position:absolute;
padding-left:1px;
background-color:transparancy;
width:182px;
visibility: hidden;
z-index: 100;}
</style>
<script src="http://-blogspot-com.googlecode.com/files/uttaTopbar.js" type="text/javascript"></script>
<div id="utTopbar" style="visibility: hidden; left: 30px; top: 204.9999999999999px; ">
<div style="text-align: right;">
<a href="javascript:void(0);" onclick="closebar(); return false" title="Click to Close"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-I4YKxUi9haR3qEkMb62Ffm-oXb-eIEDv0pvxpMNKFiAZO86GgYMvVQ_p7ENkDyh1HnuZbafDlssVu7kZc1VmdiaYrDZ6YXnbwVTGy8XRNmyyyPDGA5Jn0mr9-FhTaM7gSw-Mhst_ig/s1600/x.png"/></a></div>
<div style="background:rgba(0,0,0,0.9);-webkit-box-shadow:inset 0 0 9px #3e770f;
-moz-box-shadow:inset 0 0 9px #3e770f;
box-shadow:inset 0 0 9px #3e770f;height:290px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/UttaBlogdOtCom&amp;width=182&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ccc&amp;stream=false&amp;header=false&amp;appId=436953992985292" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:182px; height:290px;" allowtransparency="true"></iframe>
</div>
</div>

5.Terakhir Save, dan Lihat hasilnya.

NB:: Silahkan Perhatikan teks yang saya beri Warna diatas, sobat tinggal merubahnya sesuai keinginan masing-masing.

Semoga tutorial ini berguna bagi anda. TRIMS ^^

{ Read More }