Cara Membuat Related Post JQuery ( Berkedip Bergantian Dan Slider)

hanya pilih Dashboard,lalu Tata Letak / Rancangankemudian klik tulisan Add New Widget atau Tambah Gadget dan pilih HTML/Javascript,  Kemudian letakkan kode berikut


<script src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script><center><strong>artikel terkait</strong></center>
<center>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:1px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:100%;
padding: 0px 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
width:100%;
font-size:10px;
height:12px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:12px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[1] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[2] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[3] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[4] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";
showRandomImg = true;

boxwidth = 200;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 50;

thumbheight = 50;

fntsize = 9;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 100;

home_page = "http://sharetex.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/recentpostthumbspy-min.js' type='text/javascript'></script>
</div></center>


Lalu Simpan dan lihat hasilnya


catatan


Artikel terkait gantilah dengan judul widget jQuery related post ini.
- untuk :
http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox gantilah dengan url gambar default (gambar ini akan muncul saat sebuah posting tidak mengunggah sebuah gambar)
- untuk :
http://shartex.blogspot.com/ gantilah dengan alamat url blog sobat

Continue reading...

cara buat gambar berputar dalam posting

Langsung ke Tahap Pertama...
1. Login Blogger ( DiSini )
2. Pilih dan klik ( Rancangan )
3. Pilih dan klik ( Edit HTML )
4. Cari kode ( ]]></b:skin> ) dengan menggunakan ( CTRL+F )
5. Letakan Kode Berikut Tepat Di Atas Kode ( ]]></b:skin> )

.post img{-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}

.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}

6. ( Simpan Template ) dan lihat hasilnya,


Catatan: Kode yang diatas hanya membuat gambar-gambar yang ada di dalam postingan blog berputar ketika di sorot mouse

Continue reading...

Cara Membuat scroll untuk arsip blog

 Login dulu ke blogger.com

 Pilih menu "Design"

Klik "Edit HTML"

 buat jaga-jaga kalo terjadi kesalahan, sebaiknya backup dulu template yang kita gunain, caranya klik "Download Full Template"

 Beri tanda centang pada "Expand Template Widget"

 Cari kode ini <div id='ArchiveList'> (supaya lebih gampang, tekan ctrl+f ‘n masukan kode yang dicari)

 Kalo udah ketemu, copy/paste kode di bawah ini tepat sebelum kode <div id='ArchiveList'>

<div style='overflow:auto; width:ancho; height:100px;'>

 Kalo udah, tambahin kode </div> di atas kode <b:include name='quickedit'/>

Supaya lebih jelas, coba perhatiin beberapa kode yang ada dibawah ini deh !!

<div style='overflow:auto; width:ancho; height:100px;'>

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>

<b:if cond='data:style == &quot;HIERARCHY&quot;'>

<b:include data='data' name='interval'/>

</b:if>

<b:if cond='data:style == &quot;FLAT&quot;'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == &quot;MENU&quot;'>

<b:include data='data' name='menu'/>

</b:if>

</div>

</div></div>

<b:include name='quickedit'/>

 Klik "Save Template"

Catatan:

 Teks warna merah adalah posisi dimana kode harus diletakkan

Teks warna hijau adalah ukuran dari tinggi kotak arsip blog yang udah kita tambahin scroll button

Continue reading...

Cara membuat Popular Post dengan Animasi gambar berputar

• Login ke Blog anda > Design > Pada page lemen silahkan add gadgedbaru Popular Posts seperti contoh gambar di bawah ini.

• Beri judul widget tersebut "Popular Posts" ( tenang saja nanti bisa anda ganti, untuk langkah awal agar mempermudah nanti pada bagian edit HTML)
• Centang image thumbnail
• Pada bagian snipet tidak perlu di centang
• Jumlah artikel populer bebas berapa saja yang ingin di tampilkan
• Save

Cara membuat Popular Post dengan Animasi gambar berputar tahap 2

• Pada menu design > Edit HTML (tidak perlu centang expand widget templates)
• Cari kode ]]></b:skin> dan paste Css berikut di atasnya

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

• Sekarang cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
• kalau sudah ketemu, ganti kode tersebut dengan kode dibawah 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 == &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'> <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' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </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>

• Sekarang simpan template

Membuat Popular Post dengan Animasi gambar berputar semacam ini tidak akan mengurangi kecepatan loading blog anda karena tidak ada penggunaan javascript dalam membuatnya. Oh yah perlu di ingat, kode yangberwarna merah kadang ada yang kodenya PopularPost2. Jika kodenyaPopularPost2 yah anda tianggal mengganti kode yang saya berikan (yangwarna biru) menjadi PopularPost2 juga :). Kalau masih bingung tanyakan langsung di kotak komentar yah, jangan lupa di like juga hehehe. Selamat mencoba cara membuat widget popular post dengan animasi gambar berputar.

Continue reading...