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

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:
1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!
2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):    jika ingin letak di atas header letakkan kode di bawah diatas kode ini  <div id='header_wrapper'>untuk bawah footer letak dibawah kode <div id='footer'>

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode <div id='main-wrapper'> jika ingin letak di atas header letakkan kode di bawah diatas kode ini  <div id='header_wrapper'>
untuk bawah footer letak dibawah kode <div id='footer'>

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

3. Simpan template dan lihat hasilnya dibagian elemen halaman,

Continue reading...

Cara Memasang Recent Post

Langsung saja kepada pokok persoalan, disini sobat tidak perlu sampai edit template cukup login ke dasbor sobat Rancangan - Elemen Laman tambah gadget selanjutnya sobat pilih HTML/JavaScript selanjutnya copy pastekan kode berikut :

Untuk Recent Post berikut kodenya :


<div style="overflow:auto; padding:5px; width:270px; height:280px; background-color: ; border:0px solid #ccc;">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[1] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[2] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[3] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
imgr[4] = "http://vbcomp.googlecode.com/svn/trunk/img/layout.JPG";
showRandomImg = true;
boxwidth = 268; 
cellspacing = 8;
borderColor = "";
bgTD = "";
thumbwidth = 40;
thumbheight = 40;
fntsize = 11;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://www.andisyam.web.id/";
</script>
<script src="http://vbcomp.googlecode.com/svn/trunk/js/recentposts_thumbnail.js" type="text/javascript"></script>
</div>

ketrngn
untuk yang berwarna merah, silahkan sobat atur sesuai keinginan sepeti lebar kotak, jarak antara, lebar dan tinggi image thumbnails, ukuran huruf dan jumlah recent post yang akan sobat tampilkan.

Continue reading...

Cara Tambah Jenis Flash Label Cloud Wordle (FatColud) Widget Untuk Blogger / Blogspot

Hi! Pertama, saya berharap Anda sangat Selamat Tahun Baru. Ya, widget blogger baru di depan Anda. Pernahkah Anda melihat kata Awan Wordle? Widget ini mirip dengan awan Wordle kata disebut sebagai FatCloud. Dengan widget ini Anda dapat menampilkan label Anda sebagai awan kata Wordle dalam format yang berbeda. Widget ini berbasis Flash dan Menghasilkan Label Cloud (FatCloud) secara otomatis.

Ini mencakup Berbagai jenis Font, Differenttypes Sudut teks dan Skema Warna dengan desain kustom juga, sehingga Anda dapat Desain Label Cloud Anda berbeda

Saya mencakup semua pilihan di widget ini. Lihat di bawah layar-shot

Bagaimana Menambahkan Widget ini ke Blogger?

1. Masuk ke Akun Blogger
2. Pergi ke Desain> Edit Html
3. Pencarian untuk Kode Bellow dari Bagian (Tanpa memeriksa Perluas WidgetCheckbox)

< b : section class = 'sidebar' id = 'sidebar' preferred = 'yes' > 

Catatan: Kode di atas tidak terlihat di semua template karena perubahan dalam Kelas atauId. Untuk anggaplah Jika template memiliki dua sidebars dari Kanan dan Kiri Kelas, kemudian atau Id diubah ke sidebar kiri, sidebar kanan, sidebar-wrapper-kiri dan seperti begitu ... 

Jadi harap pastikan sebelum pencarian di atas kode

Dan Akhirnya menambahkan Kode Widget Dihasilkan hanya Setelah itu Dan Simpantemplate Anda 

Ingin ada Bantuan tentang widget ini?, Lalu Hubungi saya melalui Komentar atau Klik di sini

<b:widget id='Label89' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2> <data:title/> </ h2>
</ B: if>
<div class='widget-content'>
<div id='way2blogging_label_cloud' style='width:100%;height:300px'>
<b:loop values='data:labels' var='label'>
<a class='tag-link' expr:href='data:label.url' expr:style='"font-size: 1" + data:label.cssSize + "pt;"'> <Data : label.name /> </ a>
</ B: loop>
</ Div>
<script src='http://bloggerblogwidgets.googlecode.com/files/FC_Blogger_Way2blogging.js' type='text/javascript'/>
<p style='font-size:0.6em;text-align:right'> FatCloud untuk Blogger oleh <a href='http://way2blogging.blogspot.com'> Way2Blogging </ a> </ p>
<script type='text/javascript'>
fatCloud.SWF = "http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging-fatcloud.swf";
var way2blogginglabelcloud_fatcloud = baru FatCloud ("way2blogging_label_cloud", "Wordle");
way2blogginglabelcloud_fatcloud.options = {"textAngle": "Horizontal", "sizeRatio": "12", "colorscheme": "Aqua", "fgColor": "# 868A08", "mgColor" : "# 7401DF", "SColor": "# F5F6CE", "bgcolor": "# FFFFFF", "font": "Laporan", "randomFont": "ya"};
fatCloud.fontList = ["Expressway", "Meloche", "Museo", "Negosiasi", "Laporan"];
way2blogginglabelcloud_fatcloud.noXML = true;
way2blogginglabelcloud_fatcloud.saveSkinCacheURL = "/";
document.getElementById ("way2blogging_label_cloud") style.visibility = "tersembunyi".;
</ Script>
<b:include name='quickedit'/>
</ Div>
</ B: includable>
</ B: widget>

Continue reading...