Cara Modifikasi Widget Popular Post With Grid Layout 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.

Ganti Background Blog dari Postingan pake JavaScript Ganti Background Blog dari Postingan pake JavaScript

Pengen dong tiap kali lo posting, suasana blog termasuk Gambar Background sesuai sama isi postingan lo? ya se'enggak-nya sesuai sama gaya lo deh :D

Normalnya JavaScript buat ngeganti Gambar Background itu kaya gini kira-kira..

<script>

document.body.style.backgroundImage='url(http://blogdowallpaper.files.wordpress.com/2009/04/skate_boy_1024_blogdowallpaper.jpg)';

</script>

Kalo mau pake Timer/Pewaktu

biar nunggu dulu beberapa saat (misal 20 detik) baru Gambar Backgroundnya berubah..

<script>

setTimeout("document.body.style.backgroundImage='url(http://blogdowallpaper.files.wordpress.com/2009/04/skate_boy_1024_blogdowallpaper.jpg)'",20000);

</script>

Kalo pengen Gambar Backgroundnya FullScreen

biarpun gambar yang lo punya ukurannya kecil sekalipun tetep aja bakalan di tampilin selayar penuh..

<style type="text/css">

body {
 width: 100%;
-moz-background-size:100%;
     background-size:100%;
-moz-background-origin:content;
     background-origin:content;
 background-position:top center;
 background-attachment:fixed;
}

</style>


<script>

setTimeout("document.body.style.backgroundImage='url(http://blogdowallpaper.files.wordpress.com/2009/04/skate_boy_1024_blogdowallpaper.jpg)'",20000);

</script>

Warning

Kalo diBlog elo ada Script Random Background Imagenya kemungkinan besar CSS buat nge-bikin FullScreen diatas bakalan ketiban (gak jalan)

Tapi elo gak usah nangis

Ganti aja Script Random Background Imagenya jadi kaya gini..

<script type='text/javascript'>
var bg = [
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg"
];

function gantiBg(){
  var bgLeng = bg.length-1;
  var i = Math.floor(Math.random()*bgLeng);
  document.body.style.backgroundImage='url('+bg[i]+')';
}

gantiBg();
</script>

NB: script ini juga bisa ko dipasang di postingan, coba aja..

Kalo mau Gambar Backgroundnya Gonta-ganti sendiri

(misal Gonta-ganti sendiri tiap 20 detik), tinggal nambahin aja Timer

<script type='text/javascript'>
var bg = [
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg"
];

function gantiBg(){
  var bgLeng = bg.length-1;
  var i = Math.floor(Math.random()*bgLeng);
  document.body.style.backgroundImage='url('+bg[i]+')';

  setTimeout("gantiBg()",20000);
}

gantiBg();
</script>

Mengganti Nama Facebook menjadi Aneh & Unik Mengganti Nama Facebook menjadi Aneh & Unik

Kenapa Anda tidak bisa ganti nama? itu karena anda sudah mencapai titik maksimal untuk merubah nama, jika anda hanya sekedar ingin membuat nama aneh, sebaiknya buat akun baru

Kami masih mencari alternatif lain untuk merubah nama

___________________________________________________

naaaaaahhh...!!

sekarang sudah saatnya kita ganti nama kita,

yah... walau gak sebebas dulu, 

tapi paling tidak kita bisa memodifikasi 

nama kita biar kerenean dikiiit..!!!

INGAT JIKA TIDAK MUNCUL GANTI NAMA

SEBAIKNYA GANTI DULU DENGAN NAMA KITA YANG LAIN

(DI PENGATURAN AKUN)

SEBELUM MELAKUKAN PROSES BERIKUT







Langsung Saja..!!

Klik AMANKAN AKUN  :

Jika Tidak berhasil gunakan cara berikut :

KEMUDIAN AKAN MUNCUL SEPERTI GAMBAR BERIKUT

ikuti langkah - langkahnya hingga muncul seperti gambar di bawah :

ganti nama kita yang lawas dengan jenis font "halfwidht fullwidth" atau langsung copas huruf dibawah ini :

FONT “halfwidht fullwidth”.

Ａ	Ｂ	Ｃ	Ｄ	Ｅ	Ｆ	Ｇ	Ｈ	Ｉ	Ｊ	Ｋ	Ｌ	Ｍ
Ｎ	Ｏ	Ｐ	Ｑ	Ｒ	Ｓ	Ｔ	Ｕ	Ｖ	Ｗ	Ｘ	Ｙ	Ｚ
ａ	ｂ	ｃ	ｄ	ｅ	ｆ	ｇ	ｈ	ｉ	ｊ	ｋ	ｌ	ｍ
ｎ	ｏ	ｐ	ｑ	ｒ	ｓ	ｔ	ｕ	ｖ	ｗ	ｘ	ｙ	ｚ

NB : Jika tidak muncul perintah ganti nama 

sebaiknya ganti dulu sebelum proses diatas 

dengan nama kita yang lain (Pengaturan AKUN), 

baru kemudian mulai proses diatas...!!!





SEMOGA BERHASIL

Facebook Auto Like Facebook Auto Like

ᴍᵸᴆ.ᵮᴀᴉᵴᴀᴌ.ᵸᴀᵮᴉᴆ ᴃᴌᴓᴓᴆ.ᴆᴇᴀᵺ

jarang banget orang mau begitu aja like status kamu kan ?? kecuali kamu yang duluan like status mereka,,so intinya untuk awal-awal ini kamu yang duluan like status mereka ,kalo bisa status mereka yang lama pun juga di like in . . .




[trgantung kalian sih sebnernya mau ato gak]






Tapi gak mungkin kan kalian nge like 1-1 status teman,sedang kan teman kalian rame . . .




tenang gue ada solusi,, Auto like . . .




ya dengan 1 kali pencet kamu bisa like semua status temanmu sepuasnya dalam waktu singkat . . .




gak ribet kok




caranya:




1. instal ini dulu
https://addons.mozilla.org/en-US/firefox/addon/748/




[klik tulisan add to firefox/download/install,,setelah itu restart mozila firefox anda




2. lalu instal auto likenya di sini
http://userscripts.org/scripts/show/82031




[klik aja instal,,ntr muncul kotak,,klik instal yang di dalam kotak]




auto like selesai terinstal . .




ingat !! ini hanya bagi kamu yg mnggunakan browser web mozila firefox !!






nah sekarang kalian mulai lah like status teman kalian,,Seperti yang aku lakuin distatus kalian . . .




Dijamin pasti mreka yang kamu like pasti membalas like kamu!!

note :
jangan terlalu sering menggunakan auto like,karena bisa di banned harian/ minimal kamu terkadang tidak bisa me like status kamu atau orang lain..

so.... jarang" aja ya... ^_^