Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Selasa, 25 Oktober 2011

Grid Layout For the Popular Posts Widget

Kategori : , ,
Popular Posts Widget kini dapat kita modifikasi hanya dengan menggunakan CSS saja sehingga tampilannya akan lebih menarik. Ingat, dengan postingan saya tentang Putar Gambar dengan CSS3 tanpa Javascript? mudah2an masih ingat. klo ingat efeknya kan sama dengan postingan tersebut. ketika cursor mendekati image maka akan ada efek yang muncul. Berikut screen shot dari widget ini
Grid Layout For the Popular Posts Widget
Trus bagaimana cara memasangnya? ikuti saja langkah dibawah ini! 1. Masuk ke layout >> tambahkan sebuah gadget >> pilih Popular post.
Popular Posts Widget
2. Hilangkan tanda di kotak snippet
 Layout Popular Posts Widget
3. sekarang masuk ke Template/Design > Edit HTML. jangan klik kotak Expand Widget Templates. lalu cari teks PopularPosts1 seperti kode di bawah ini <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/> 4. Setelah ketemu, gantikan kode tersebut dengan kode di bawah ini <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> 5. setelah itu pindahkan kode di bawah ini tepat di atas ]]></b:skin> .popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);} 6. Lalu simpan template dan lihat hasilnya.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

32 Komentar untuk Grid Layout For the Popular Posts Widget

bagus sekali mas untuk mempercantik blog saya yang masih amat sederhana

keren nich tipsnya, saya akan segera di aplikasikan di blog :-)

wahh jadi lebih keren ya sob tampilannya,, css emg manteb dah,, heheh,, salam kenal sob,, kunjungan perdana disini.. :D

keren juga bro effects nya...
kalo dipasang di WP bisa gak ya?

@AS.com tentu bisa gan, selama platform tersebut menerima CSS :)

Ass Kang.
Kalau nampilin imagenya gimana ya?? yang punya saya separuh ada image separuh lagi engga, padahal semuanya ada imagenya ko tapi sebagaian ga muncul "no image available".
Gimana ya??

@Luqman Kusumahdilaga boleh liat blognya kang? klo utnuk no image available, berarti postingan tersebut memang tidak ada imagenya.

wah, tutorialnya bagus bro. modifikasi kode yang memunculkan efek pada popular post.

saya sudah follow blog ini. ditunggu ya follow baliknya.

ini ni mas yang saya cari2 kemarin ngubek2 google nggak ketemu eh malah ketemunya di sini,,, thanks mas,,,,

bener-bener dah kk ini, tutornya mantap semua bener.2 dewa web master... salut n kagum kk

keren banget jadi pengen masang di blogku nih...terima kasih tipsnya gan...

Wah Mantab Gan, thanks, udah ane praktekin di http://andhyzer.blogspot.com

bos kalo ukurannya ditambah bisa gak? trus kalo pada rata kiri ato kanan ato tengah bisa gak?

mantapss juragan izin comod :D

mantap info dan tutornya,, trus gimana supaya tampilannya biar ga kebawah semua,,

maaph gan caranya buat follow sama add facebook yang terapung tu gimana gan? thanks before

cuma bisa popular post aja ya? klo bikin sndiri pake gambar bisa nggak?

nice share gan...
sudah saya coba pasang dan berhasil tp msh ada kendalanya yaitu gmn caranya agar tidak memanjang, biar berjejer 3 kotak kesamping?
tolong infonya gan..
sukses ya..

wah bisa ngirit ruang widgetnya nih. ijin praktek gan makasih

Greetings I am so glad I found your webpage, I really found you by mistake, while I was researching on Askjeeve for something else, Nonetheless I am here now and would just like to say thank you for a marvelous post and a all round enjoyable blog (I also love the theme/design),
I don't have time to browse it all at the moment but I have bookmarked it and also added in your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the awesome job.

Stop by my site: juicyworm.com

This post is invaluable. How can I find out more?



my blog - http://animeholic.net

I am not sure where you're getting your information, but great topic. I needs to spend some time learning much more or understanding more. Thanks for wonderful information I was looking for this information for my mission.

Also visit my weblog; how to get your ex back fast

Hi! I know this is kind of off topic but I
was wondering if you knew where I could find a
captcha plugin for my comment form? I'm using the same blog platform as yours and I'm
having trouble finding one? Thanks a lot!

Feel free to surf to my web site: cold sore remedies

keren gan modifiasinya . . .