Cara Modifikasi Widget Popular Post With Grid Layout

Grid Layout For The Popular Posts Widget - Cara membuat atau memodifikasi widget popular post menjadi lebih keren bergaya grid layout, seperti yang kita tahu untuk tampilan widget bawaan blogger ini cukup menarik, tapi bisa kita modif lagi dengan gaya yang berbeda, dan lebih keren tampilannya.
Biar makin jelas dan gamblang neh saya sediakan juga screenshotnya masbro :

Widget Popular Post

Oke, langsung saja kita praktek masbro
1. Login blogger pastinya
2. Pergi ke munu Design > Page Element > Add a Gadget
3. Pilih Widget "Popular Post"
4. Settinglah persis seperti gambar dibawah ini, untuk jumlah post, bisa lu  atur sendiri sesuai selera

4. Lalu Save.
5. Lanjut ke Edit HTML, beri ceklist pada Expand Widget Templates. Jangan lupa juga BackUp template sobat (buat jaga-jaga kalo ada yang error).
6. Cari kode (CTRL+F) ]]></b:skin>
Dan tambahkan kode CSS berikut diatasnya:

.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);}

7. Lanjut cari teks PopularPosts1 (CTRL + F) biar lebih cepat.
Ini kode script lengkapnya:



<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 == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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 == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<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>
<div style='clear: both;'/>
<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>

<b:widget id='PopularPosts1' locked='false' title='Popular Post' 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 == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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 == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<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>
<div style='clear: both;'/>
<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>
<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 == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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 == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<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>
<div style='clear: both;'/>
<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>

<b:widget id='PopularPosts1' locked='false' title='Popular Post' 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 == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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 == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<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>
<div style='clear: both;'/>
<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>

8. Gantilah kode script diatas dengan kode script berikut:

<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>

9. Terakhir Simpan dan lihat hasilnya.


Note:
Untuk kode CSS bisa lu kreasikan sendiri, sesuai dengan kreativitas lu masing-masing.
Sekian dari saya untuk topik pembahasan Cara Modifikasi Widget Popular Post With Grid Layout. Semoga bermanfaat.

Pasang Tombol Share ke Social Bookmarking

Untuk share artikel/posting loe langsung ke media bookmarking bila dirasa bermanfaat bagi yang lainnya, ini akan sangat bermanfaat untuk meningkatkan reputasi dan akan meningkatkan pengunjung ke blog kalian semua. Tombol share/submit yang akan dibuat disini saya rasa sangat lengkap mulai dari facebook, twiiter, digg, stumbleupon, ma.gnolia, delicious, furl, technorati, simpy, spurl, reddit, mybloglog, blogcatalog, dan masih banyak lagi. Untuk tampilannya adalah sebagai berikut 

Naah jika lu tertarik dan berminat memasang tombol tersebut, berikut aink akan jabarkan caranya memasang ke blog lu, Chekidot
 Masuk ke tab Rancangan (Design/Layout) -> Edit HTML

 Klik pada Expand Widget Templates

 Kemudian Carilah kode
<data:post.body/>

Atau

<p><data:post.body/></p>
(Note: Gunakan CTRL+F untuk mempermudah pencarian)
Kode ini biasanya ada 2 buah, pilihlah yang lebih bawah

Setelah ketemu, letakkan kode ini setelah kode <data:post.body/>

<div style='border-top:0px solid #ccc;border-bottom:3px solid #FE9A2E; padding:10px 0px 10px 0px;margin:15px 0px 7px 0px;width:100%;float:left;height:23px;'>
<div style='float:right;'>
<span class='st_twitter_hcount' displayText='Tweet'/><span class='st_facebook_hcount' displayText='Share'/><span class='st_email_hcount' displayText='Email'/><span class='st_sharethis_hcount' displayText='Share'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher:&#39;63b83a98-def5-427f-ac7c-4b24bcff910d&#39;});</script>
</div>
</div>

 Selesai, SAVE TEMPLATE DEH. XD
Note: Jika anda lu memasang readmore, tombol submit ini akan terlihat jika posting tampil fullpost

Foto SPG yang Bikin Gak Tahan

Sharing buat refreshing buat cuci mata biar gak jenuh nlgihatin yang itu-itu saja, Nih AinK ada gambar foto Sales Promotion Girls yang cantik, bening dan seksi. Mereka memang benar-benar hot dan seksi. silakan dilihat gan tapi jangan lama-lama bukanya ada apa-apa, tapi cuma takut loe gak kuat.... Wakwakwak

Apa pikiran loe jika berhadapan dengan SPG seperti ini.??
Pasti lu otak'a pada ngeres kaya gini. Wakwakawak

Slide out egg Bookmarking Gadget

Langkah-langkah'a gak susah kok gampang pisan .
cuman beberapa tahap langsung bisa di nikmatin hasil'a di belog loe,loe and loe kabeh :-P

Okai langsung wae Ke pokok'a

1.Dasbor >> Template >> Edit HTML Cari kode </head>
copy kode di bawah terus simpan tepat di atas kode </head>

<!-- Start Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ -->

2.cari kode </body> copy kode di bawah,lalu paste tepat di bawah kode </body>

<!-- Start Heart Share Code From http://www.spiceupyourblog.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Gadgets</a><!-- End Heart Share Code From http://www.spiceupyourblog.com/ -->

Dan hasil'a seperti ini

Cara Buat Flash Efek

Bagaimana cara membuat Flash efeks secara sederhana .Kali ini AinK memakai situs pihak ketiga .
Apa itu flas efek Mang Kodir ?
flash efek adalah sejenis teks yang bergerak-gerak untuk misalnya pesan selamat datang atau untuk sekedar menampilkan nama anda .
tanpa banyak basa-basi .langsung saja ikuti langkah berikut:

Ikuti lankah-langkah berikut ini :

1.Klik http://www.widgeo.net/

2.Klik menu flash effects pada situs tersebut

3.Isi form yang di sediakan di situs tersebut

4.Klikk get widget untuk mendapatkan kode.

5.Selanjutnya log In ke blogger .lalu paste kode tadi ke dalam blog.

Ni Hasil'a Kaya kieu

Pasang Game Di Blog

Ada Game di Blog memang menyenangkan .hehehe juga bisa untuk menghibur pengunjung blog kita .tapi ingat Memasang Game Di Blog Akan dapat membuat Loading blog you you pada akan sedikit berat .Jadi Pikirin dech dulu bae-bae :P


Saat ini banyak penyedia GameUntuk Blog dan dapat didapatkan secara gratis di internet . Klo you tertarik untuk Memasang Game Di Blog, AinK anjurkan untuk memasang game dari http://www.khemer.com.


Cara Pasang Gamenya Silakan ikuti langkah-langkah berikut :


1.Silakan Klik http://www.khemer.com


2.Sikan Cari Game Yang anda sukai. dan lihat kebagian samping kanan nanti ada bacaan Emded. Lalu Copy Kode yang ada pada teks area.


3.Lalu Sig in Ke Blogger Dengan akun kamu.


4.Klik Tata Letak.


5.Klik Tab Tambah Gadget.Pada sidebar yang anda ingin pasangi Game


6.Lalu Pilih HTML/JavaScript.


7.Paste Kode HTML Game tersebut ke dalam HTML/JavaScript


8.Klik simpan Dan lihat hasilnya ?


Gampangkan Cara Pasang Game Di Blog Teu Hese Kok Tak seperti Apa Yg Maraneh Bayangkan :D


Ni contoh game punya AinK

Bisi deuk nyobaan mah hasok we da teu mayar 1000% haratis :P

 

Membuat Benner Animasi

layanan online baik gratis ataupun berbayar yang bisa kita pergunakan. Banner animasi umumnya dibuat dalam file gambar berekstensi gif serta gambar dalam bentuk banner flash. Berikut beberapa contoh website yang menyediakan layanan membuat banner animasi : Gif Banner

http://picasion.com
http://www.loogix.com
http://www.createagif.net
http://gickr.com
Flash banner
http://www.123-banner.com
http://bannersabc.com
http://www.flashbannernow.com
http://www.quickbanner.com
http://www.flash-banner-maker-online.com

Cara Membuat Banner Animasi

Sebagai contoh, Kang Rohman akan bahas bagaimana cara membuat banner animasi berupa banner gif di http://picasion.com. Berikut adalah langkah-langkahnya :

1.Buatlah 2 atau 3 buah banner misal ukuran 125x125 px. Contoh :
  

2.Silahkan kunjungi website http://picasion.com
3.Klik tombol browse untuk memasukkan file banner


4.Pilih ukuran banner yang sesuai dengan keinginan pada opsi Size.
5.Pilih kecepatan animasi pada opsi Speed
6.Klik tombol Create Animation
7.Banner animasi anda telah dibuat. Contoh hasilnya :


Gif maker
8.Anda dapat menyimpan file banner animasi tersebut,
atau bisa juga menggunakan link yang di berikan seperti gambar di bawah ini


9.enggesan Akh cape wkwkwk

Bikin Epek Salju Part 2

Yok kita bikin epek salju di belog Maraneh Masing²
Ceuk Si Aseng : Gimana Cara'a Mang Odoy ??
Mang Odoy : Tanyakeun We Ka Mbah Gugel Wkwkwk :P

Langsung wae lah tanpa banyak basi basa XD
Yeuh Scriptna

Nu Kahiji (No 1)
Mana script Na Mang Odoy ?
Tah ieu Scriptna copy Wae Langsung Kode di bawah

<script type="text/javascript" src="http://sites.google.com/site/topekodonk/javascript/saljubergambar1.js" />


Kok cuman hiji mang odoy ??
Kalem Masih Aya Keneh Cu selow jeung mang odoy mah XD
Yeuuh anu kaduana EPEK DAUN

 copy dei scriptna yeuh


<script type="text/javascript" src="http://sites.google.com/site/topekodonk/javascript/saljubergambar2.js" />


Yeuhh amang punya bonus hiji dei kanggo ucu anu kasep tur goreng XD
epek salju 2

<script type="text/javascript" src="http://sites.google.com/site/topekodonk/javascript/saljubergambar3.js" />




Kumaha Cara masangna mang Odoy ??
Lamun udah di pilih salah satu dinu atas langsung wae  Masuk ke Template
cari kode </head> simpen di atas kode </head>
Atou bisa langsung di Postingan HTML 


Bonus Kanggo Tongseng di mang odoy