Cara Membuat Popular Post Animasi 3D Di Blog


Cara membuat Popular Post animasi 3D di Blog
1.Login ke blog anda - Design - kemudian Add gadged baru pada elemen, jangan lupa pilih HTML / Javascript ( bebas dimana saja, karena hanya untuk penempatan Css dan koda javascript saja )
2.Copy kode atau script berikut dan paste pada gadget tadi kemudian save ( tidak perlu judul )
<style type="text/css">
.cube { width: 250px; height: 250px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://script-bamz-us.googlecode.com/files/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').abupopularcube();
});
</script>
<script type="text/javascript" src="http://script-bamz-us.googlecode.com/files/popularcube.js"></script>
3.Sekarang masih pada halaman Design
4.Silahkan add Gadged baru lagi dan pilih gadget popular post ( penempatannya terserah anda, bisa pada sidebar kanan atau kiri dan bawah ) kemudian save dan lihat hasilnya.


5. Selamat mencoba...

Cara Mendaftarkan Blog/Website Ke Feedburner

1. Kunjungi http://www.feedburner.com
2.Isi kotak di bawah tulisan Burn a feed right this instant dengan alamat blog anda.
3.Centang tanda I am a podcaster kemudian klik tombol Next
4.Anda akan masuk ke halaman Identify Feed Source, pilih alamat feedburner yang anda ingin kan dan klik Next
5.Setelah mengklik Next anda tidak perlu lagi mengisi Feed Title dan Feed Address karena sudah terisi secara otomatis dan klik Next untuk mengaktifkan alamat feed anda
6.Akan ada ucapan Conrats, klik saja langsung tombol Next
7.Untuk Configure Your Podcast and Tell iTunes How to List It. Isi dengan podcast anda dan jika anda sudah selesai mengisi formnya anda klik Next
8.Beri tanda centang pada kotak di samping tulisan Clickthrough, Item enclosure downloads (podcast downloads) dan I want more! 9.Have FeedBurner Stats also track. Klik tombol Next
10.Klik tab Optimize, Silahkan setting yang anda inginkan, tapi yang paling penting adalah anda harus mengaftifkan fitur SmartFeed, karena fitur ini berfungsi agar supaya fungsi dari feed kita kompatibel atau klop dengan berbagai feed reader yang ada dan klik tombol Active.
11.Agar para pengguna internet bisa berlangganan setting Email Subsciptions dan klik tombol Active, setelah anda menagaktifkan Email Subsciptions copy dan paste code Subscription Management dan pasang di blog anda.


Selamat Mencoba.....

Cara Membuat Widget Subscribe Mashable Style Pada Blog


Cara membuat widget Subscribe ala Mashable:
1. Langkah pertama silahkan login blog anda kemudian ke halaman edit Design
2. Selanjutnya silahkan add gadged baru dan pilih HTML / Javascript
3. Kalau sudah silahkan paste kode barikut ke dalam widget baru tersebut:
<style>
/* Social Widget */
#B-mashable-bar {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
.fb-likebox {
background: #fff;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
border-bottom:0;
}
.googleplus {
background: #fff;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 80px;}
.g-plusone { float: left;}
.twitter {
background: #fff;
padding: 5px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: #ff9b00;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:5px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
backfround: #ff9b00;
-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:30px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 260px;}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow ul li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmqq41t1CoxEZy1Tp2XdzxY83wcnk7KZk9q6nv4Cpyr2o-LjrCvKQ2j6rLeO9hmZOP7ECp2X3NjcTWwgKQ7g7SRNjFCQ6xQpT0i6TtPQ_rU2OGlFpCTMhMcxd9PD7PxfDCPYxgjp9YilA/s400/rss-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-fb { background: url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXVeTnUAL53sGnzYene4OTcYZOjxrDk4evRrhlIWHMkpiShcFMVURI5b0rj3HTbd4xYqS9O1UbnMZvie-LzGkG6TgvF3XqsfvQBfhmE87_wpBOOf9LFoGnaGStmYt3MCRmUq5O_9Cpo1g/s400/facebook.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiVKQmcN-ptEjZ7uLHh2jqbkfgFrUR4HveL9xEmDMUv3idpM4Q3OdPX4fJixCMcSysWijG7sEr-ZcHI-MuJ7EVnfJeIl4-7s5JDkSffrQbpkF689ilUP8VGyPsyCYctbJAhiECfjCrO0U/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #FFCA00;
}
</style>
<![endif]-->

<div style="margin-bottom:1px;"> <div id="B-mashable-bar" > <!-- Begin Widget -->
<div class="fb-likebox"> <!-- Facebook --> <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="265570443512043" stream="0" connections="18" width="300px" height="170px" header="0" logobar="0" css="http://script-bamz-us.googlecode.com/files/facebook.js"></fb:fan> </div> <div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=rizkysadega10&amp;show_count=&amp;
show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe">
<!-- Email Subscribe --> <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RizkyDorkNeverSayDie', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 160px; font-size: 12px+" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if (this.value==&#39;&#29;)this.value=this.defaultValue;" />
<input type="hidden" value="RizkyDorkNeverSayDie" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>
</div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/RizkyDorkNeverSayDie" target="_blank">RSS Feed</a> </li> <li class="my-fb"> <a rel="nofollow" title="FB" rel="author" href="http://www.facebook.com/rizky.vanhalen" target="_blank">Facebook</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Goofle Plus" rel="publisher" href="http://plus.google.com/113084964376315314193" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"></span></div></div>
<!-- End Widget --> </div>

Keterangan :
<fb:fan profile_id="265570443512043" : ganti kode merah dengan Id fan Page facebook anda
screen_name=rizkysadega10 : Ganti dengan username twitter anda
http://feedburner.google.com/fb/a/mailverify?uri=RizkyDorkNeverSayDie : isi dengan Feedburner anda
http://feeds.feedburner.com/RizkyDorkNeverSayDie : id Feedburner anda
http://www.facebook.com/rizky.vanhalen : Id fans page facebook
http://plus.google.com/113084964376315314193 ganti ID google Plus anda

Selamat mencoba....

Cara Membuat Popular Post Dengan Animasi Gambar Berputar


Cara membuat Popular Post dengan Animasi gambar berputar tahap 1
1.Login ke Blog anda - Design - Pada page lemen silahkan add gadget
2.Beri judul widget tersebut "Popular Posts" ( tenang saja nanti bisa anda ganti, untuk langkah awal agar mempermudah nanti pada bagian edit HTML)
3.Centang image thumbnail
4.Pada bagian snipet tidak perlu di centang
5.Jumlah artikel populer bebas berapa saja yang ingin di tampilkan
6.Save

Pada Tahap Ke 2:
1.Pada menu design - Edit HTML (tidak perlu centang expand widget templates)
2.Cari kode ]]></b:skin> dan paste Css berikut diatas kode ]]></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);}
3.Sekarang cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
4.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>
5.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 yang berwarna merah kadang ada yang kodenya PopularPost2. Jika kodenya PopularPost2 yah anda tianggal mengganti kode yang saya berikan (yang warna biru) menjadi PopularPost2 juga. Okee, Good luck..

Efek Animasi Dengan Css

Trik Pertama
CSS (Taruh di atas ]]></b:skin> )

#infotips-muter{
width:140px;
height:80px;
border:1px solid #999;
box-shadow: 5px 3px 5px #aaa;
margin:5px auto;
padding:5px;
background:#9bbddd;
font-size:12px;
font-weight:bold;
background-color: yellow;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

#infotips-muter:hover {
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
}

Nah, terakhir kode pemanggilannya. (Letakkan dimana saja: halaman posting, sidebar. Terserah kalian)

<div id="infotips-muter">
Ganti teks ini dengan teks kalian. :)
<div>


Trik Kedua:
CSS (Taruh di atas ]]></b:skin> )

#infotips-membesar {
width:140px;
height:100px;
border:1px solid #999;
box-shadow: 5px 3px 5px #aaa;
margin:5px auto;
padding:5px;
background:#9bbddd;
font-size:12px;
font-weight:bold;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#infotips-membesar:hover {
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
}

Dan untuk pemanggilannya taruh seperti yang sudah saya jelaskan di atas:

<div id="infotips-membesar">
Ganti teks ini dengan teks kalian. :)
<div>

Dan simpan...

Good Luck...

Cara Membuat Efek Bunga Sakura Berjatuhan Di Blog

1. Login ke akun blogger
2. Masuk ke Rancangan dan tambahkan widget HTML/JavaScript
3. Copy kode hujan bunga sakura berikut:

<script type="text/javascript" src="http://naughtyric.googlecode.com/files/SakuraRain.js"></script>

4. Simpan dan selamat mencoba.

Cara Membuat Hujan Bintang J-rock Berjatuhan Di Blog

Cara Mudah Membuat Hujan Bintang J-Rocks di Blog:

1. Login ke akun blogger
2. Masuk ke Rancangan dan tambahkan widget HTML/JavaScript
3. Copy kode hujan bintang J-rocks berikut

<script type="text/javascript" src="http://naughtyric.googlecode.com/files/jrRain.js"></script>

4. Simpan dan lihat hasilnya.

Good Luck...

Cara Membuat Menu Horizontal Di Blog


1.Login ke Blogger
2. Klik "Page Element" & Klik "Edit HTML"
3. Centangkan "Expand Widget Templates"
4. Cari kode ]]></b:skin> dan letakkan Kode dibawah ini tepat diatas kode ]]></b:skin>


.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-background-1.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
padding:0 0 0 16px; /*Jangan Dirubah kode Jarak ini*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 20px 0 8px;
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kiri.gif) no-repeat;
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kanan.gif) no-repeat right top;
}

5. Lalu cari code <div id='content-wrapper'> dan letakkan code di bawah ini tepat di atas kode <div id='content-wrapper'>

<ul class='glossymenu'>
<li class='current'><a href='URL-Blog-Kamu'><b>Home</b></a></li>
<li><a href='URL-Link-Tujuan1'><b>Judul-Tujuan1</b></a></li>
<li><a href='URL-Link-Tujuan2'><b>Judul-Tujuan2</b></a></li>
<li><a href='URL-Link-Tujuan3'><b>Judul-Tujuan3</b></a></li>
<li><a href='URL-Link-Tujuan4'><b>Judul-Tujuan4</b></a></li>
<li><a href='URL-Link-Tujuan5'><b>Judul-Tujuan5</b></a></li>
</ul>

6. Simpan dan selesai.

Good Luck...

Cara Mengganti Background Blog Otomatis


Silahkan Pilih Warna Latar Blog ini Sesuai Dengan kenyamanan Yang Anda Suka





Bagaimana menurut Anda manarik bukan? Oke untuk menginstal widget ini caranya cukup mudah.
1. Login ke Blogger
2. Pilih Racangan
3. Tambah Widget Baru
4. Pilih HTML/Javascript
5. Copy-Paste kan kode di bawah ini :

<center><script type="text/javascript"> function bgChange(bg) { document.body.style.background=bg; } </script>
Silahkan Pilih Warna Latar Blog ini Sesuai Dengan kenyamanan Yang Anda Suka <table border="1" width="660" height="20"> <tr> <td onclick="bgChange('#FFFFFF')" bgcolor="white"> <td onclick="bgChange('#000000')" bgcolor="#000000"> <td onclick="bgChange('#F0E68C')" bgcolor="#F0E68C">
<td onclick="bgChange('#E0FFFF')" bgcolor="#E0FFFF"> <td onclick="bgChange('#98FB98')" bgcolor="#98FB98"> <td onclick="bgChange('#B0E0E6')" bgcolor="#B0E0E6"> <td onclick="bgChange('#87CEFA')" bgcolor="#87CEFA"> <td onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9"> <td onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">
<td onclick="bgChange('#E6E6FA')" bgcolor="#E6E6FA"> <td onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">
</td></td></td></td></td></td></td></td></td></td></td></tr> </table>
<div class='clear'></div></center>

5. Silakan simpan dan lihat hasilnya!

Original Post:

Cara Memasang Widget Headline News

1. Login pada blog sobat
2. Tata Letak
3. Tambah Gadget
4. HTML/Javascript
5. copy kode di bawah ini:

<script type="text/javascript">
var hn_url_blog = "http://alamatblogsobat.blogspot.com";
var hn_jumlah_post = 8;
var hn_warna_latar = "#F5F5F5";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://www.geocities.ws/reggy/postnew.js">
</script>

Ket: ganti tulisan yang berwarna merah dengan alamat blog sobat
6. Simpan dan lihat hasilnya.

Cara Memasang Widget Feedjit


ngomong - ngomong sobat tau feedjit gak? Yups :D Benar. Feedjit adalah situs penyedia widget live traffic otomatis dengan tidak dipungut biaya alias gratis!! Pasti sobat langsung masang kalau ada hal gratis wkwkwk...
Caranya mudah kok ikuti saja langkah - langkah di bawah ini:

1. Kunjungi situs Feedjit
2. Klik kota berwarna hijau bertuliskan Choose your Feedjit
3. Di halaman baru ada tiga pilihan pilih yang Free di paling kiri. klik Sign Up
4. Di halaman pengedit feedjitnya
5. Pilih warna, ukuran lebar widget, tinggi dan lain - lain
6. Di kotak Install Feedjit On pilih apakah sobat ingin memasang di Blogger atau yang lain
7. Klik Go!
8. Copy kode HTML nya dan pasang di blog sobat.
9. Selesai. Selamat mencoba...


Cara Memasang Meta Tag Di Setiap Halaman Blog

Cara memasangnya pun cukup mudah sobat. Ikuti langkah - langkah di bawah ini:

1. Login pada blog sobat
2. Rancangan
3. Edit HTML
4. Cari kode <title><data:blog.pageTitle/></title>
5. Ganti kode tersebut dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- berikut adalah Ini meta otomatis halaman utama -->
<title><data:blog.title/></title>
<meta expr:content='data:blog.title + &quot; Tutorial Blogspot | Games | Top rate.&quot;' name='description'/>
<meta expr:content='data:blog.title + &quot;, Tutorial Blogspot | Games | Top rate&quot;' name='keywords'/>
<b:else/>
<!-- Berikut adalah meta otomatis pada setiap halaman posting -->
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot;, Tips n trick | Lirik lagu | Free template.&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Tips n trick | Lirik lagu | Free template&quot;' name='keywords'/>
</b:if>

Ket: ganti tulisan yang berwarna merah dengan deskripsi blog sobat di halaman home
dan danti juga tulisan yang berwarna biru dengan deskripsi blog sobat di halaman post
6. Simpan Template.

Good Luck...

Cara Setting Meta Tag Pada Blog

kali ini kita akan membahas "Setting Meta Tag pada blog" Meta tag memang dibilang penting untuk sebuah blog. Karena fungsinya untuk menyampaikan informasi penting ke search engine. Mengenai informasi suatu halaman yang berupa keyword, descriptions dll agar artikel blog mudah terindeks oleh Search Engine. Langsung saja kita bahas cara setting meta tagnya:

1. Login pada blog anda
2. Rancangan
3. Edit HTML
4. Cari kode:

<title><data:blog.title/></title>
atau
<title><data:blog.pageTitle/></title>

5. Kemudian ganti kode tersebut dengan kode:

<meta content='deskripsikan tentang blog anda di sini' name='description'/>
<meta content='keyword 1, keyword 2, keyword 3, dst.......' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

6. Simpan template.

Good Luck...

Cara Membuat Text Area

Text area itu apa sih? text area adalah sejenis kotak untuk memyimpan text / kode HTML agar bisa di copy secara langsung. Text area bisa di jadikan widget untuk menampilkan link exchange dan bisa juga di pasang di postingan. caranya gampang. copy saja kode dibawah ini:

<p align="center"><textarea name="code" rows="8" cols="30"> Letakkan text ataupun kode lainnya yang anda inginkan di sini </textarea></p>

Ket:
-Ganti tulisan yang berwarna biru dengan text yang akdan anda tampilkan di text area
-anda bisa merubah ukuran text area tersebut dengan mengubah tulisan yang berwarna merah (rows itu untuk tinggi dan cols untuk lebar)

Good Luck...

Cara Membuat Efek Turun Salju Pada Blog

1. Login Blogger
2. Klik rancangan -- edit HTML -- centang pada Expand Template Widget
3. Cari kode <head>
4. Lalu masukkan kode dibawa ini ke atas kode <head>

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/vikry-Snow.js' type='text/javascript'/>

5. Simpan Templates.

Good Luck...

Cara Membuat Efek Bintang Berjatuhan Dari Cursor

Mungkin efek ini sudah tidak asing lagi bagi kita, tapi kalau sobat-sobat pengen lebih mempercantik blog kita, mungkin tips ini patut unutk dicoba.

Ok langsung pada langkahnya :

1. login blog
2. Rancangan -- Edit HTML -- cari kode ]]></b:skin>

lalu copy kode dibawah ini dan taruh dibawah kode ]]></b:skin>

Untuk yang berwarna Merah
<script src='http://vikrymadz.googlecode.com/files/Red.js' type='text/javascript'/>

Untuk yang berwarna Biru
<script src='http://vikrymadz.googlecode.com/files/Blue.js' type='text/javascript'/>

3. simpan template.

Good Luck...

Sumber:

Cara Memasang Permalink Di Bawah Postingan


1. Login pada blog sobat
2. Rancangan
3. Edit HTML
4. Expand template widget
5. Cari kode ]]></b:skin>
6. Copy kode di bawah ini dan paste di atas kode pada no 5

.permalink {border: 1px dotted #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;} .permalink a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

7. Setelah itu cari kode <div class='post-footer'>
8. Copy kode di bawah ini dan paste di atas kode pada no 7

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='permalink'> <center><small>Sobat sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan sobat bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>, sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman sobat, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sumbernya.</small></center></div></b:if>

9. Simpan Template dan lihat hasilnya

Good Luck...

Kode Warna HTML






Cara Memasang Read More Otomatis

Tau Read More gak? sedikit penjelasan dari saya
read more itu dalam istilah lain Jump Break yang berfungsi menyingkat post kita pada halaman Home Page agar tidak terlalu panjang. karena post yang panjang dapat mempengaruhi kecepatan blog kita. yauda yang mau masang read more otomatis ikuti langkah - langkah di bawah ini..

1. Login pada blog anda
2. Rancangan
3. Edit HTML
4. Download dulu templatenya biar gak terjadi hal - hal yang tidak diinginkan dengan cara mengklik Download Template Lengkap
5. Centang kotak kecil di ujung script box Expand Widget Template
6. Cari kode </head> untuk mempermudah pencarian klik ctrl + f pada keyboard
7. Pastekan kode dibawah ini di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

8. Selanjutnya cari kode <data:post.body/>
9. Ganti kode <data:post.body/> dengan kode dibawah ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

10. Simpan Template

Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Cara Memasang Headline News Di Blog

Menambah Headline News di blogspot itu topik kita hari ini. sesuai dengan namanya widget headline news, ini adalah widget dengan bantuan javascript untuk menampilkan judul serta link artikel-artike terbaru dari update blog anda.

Nah untuk membuat nya sangat lah mudah anda cukup copy paste kode dibawah ini ke dalam elemen widget yang baru, Letakkan widget terserah anda.

<script type="text/javascript">
var hn_url_blog = "http://NAMABLOGANDA.blogspot.com";
var hn_jumlah_post = 5;
var hn_warna_latar = "#333333";
var hn_warna_garis = "#000000";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://recent.googlecode.com/files/headlinenews.txt">
</script>

kemudian simpan dan lihat hasilnya.

Catatan :
hn_url_blog = URL blog anda (ganti dengan url blog anda)
hn_jumlah-post = jumlah judul artikel yang di tampilkan
hn_warna_latar = kode warna untuk latar belakang headline news
hn_warna-garis = kode warna garis bingkai
hn-posisi = menentukan posisi letak headline news

Selamat mencoba.........

Cara Memasang Tombol Back To Top

Tombol ini memiliki fungsi sebagai alternatif agar pengunjung blog tidak capek menggeser scroll ke atas.
Untuk memasangnya:

1. Login pada blog sobat
2. Rancangan
3. Edit HTML
4. Kemudian cari kode </body> dan pasang kode di bawah ini di atas kode </body>

<!-- Bact to top designed by syilpid - http://www.tips-fb.com/ -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopmerah.png'/></a>

5. Simpan template

Ket:
Tulisan yang berwarna merah bisa anda ganti dengan alamat gambar anda sendiri
Good Luck...

Cara Membuat Kotak Iklan (Banner Ads)


Pemasangan kotak iklan ini bermanfaat jika ada orang yang ingin memasang iklan di blog sobat. Si Advertiser itu akan mengklik iklan ini dan akan dialihkan ke halaman detail tentang pemasangan iklan di blog sobat. Oke deh, cara memasangnya sederhana kok sobat. Lihat di bawah:

1. Login pada blog sobat
2. Template
3. Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin>
5. Pasang kode di bawah ini di atas kode ]]></b:skin>

#banner-ads {
margin: 0px;
padding: 5px;
text-align: center;
}
#banner-ads img {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #c0c0c0;
}
#banner-ads img:hover {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #333;
}

Selanjutnya, untuk pemasangan iklan ikuti langkah ini:
1. Masuk ke halaman Tata Letak
2. Tambah Gadget
3. HTML/Javascript
4. Pasang kode ini:

<div id="banner-ads">

<a target="_blank" href="http://blog-anda.blogspot.com"><img
border="0" alt="ads" src="http://i1139.photobucket.com/albums/n555/andika50/bannerads-1.png"/></a>
<a target="_blank" href="http://blog-anda.blogspot.com"><img
border="0" alt="ads" src="http://i1139.photobucket.com/albums/n555/andika50/bannerads-1.png"/></a>
<a target="_blank" href="http://blog-anda.blogspot.com"><img
border="0" alt="ads" src="http://i1139.photobucket.com/albums/n555/andika50/bannerads-1.png"/></a>
<a target="_blank" href="http://blog-anda.blogspot.com"><img
border="0" alt="ads" src="http://i1139.photobucket.com/albums/n555/andika50/bannerads-1.png"/></a>

</div>

5. Simpan dan lihat hasilnya

Keterangan:
- Untuk kode yang berwarna Merah ganti dengan alamat iklan yang ditujur
- Untuk kode yang berwarna Biru, bisa sobat ganti dengan gambar sobat sendiri
- Untuk penambahan iklan sobat hanya tinggal mengcopy kode:

<a target="_blank" href="http://blog-anda.blogspot.com"><img
border="0" alt="ads" src="http://i1139.photobucket.com/albums/n555/andika50/bannerads-1.png"/></a>

Di atas </div>

Good Luck...

Sumber:

Cara Memasang Widget Google Translate Bendera


Cara Memasang Widget Google Translate Bendera.
1. Login ke blog anda
2. Rancangan
3. Tambah gadget (letak widgetnya terserah anda)
4. HTML/javascript
5. Copy pastekan kode dibawah ini:

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNuhzK031awkfkWvLUaqJ6RsS_tFnMPVyGl4DmFWgoD2gkiiRoUoQXdlP-ox9pmCHVQGiuHMTBr3D5ghQ0X5cLCLk3xjV70jQh1dwQ00vUorcPxrh_dGD8NfhV0a03ySJmo5FvM2AiIMc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblkh15W2dNH_tfoVrE_662SOO5DXUDAxNZPiVqwkaoDBh-Q2LA22MXgNwFxRYmYcflOFMK-H_oXLotvjaaDHMR0EQvD9scr61DZNt0xPyG5psDZ_C0BiO3aUUYj_q0dAjy2d-nVl3cV8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfVXbRWPCAgN8uO2KtNjuuzyOAOttLgKrntPfYYfcmsWWXHUPDrYJ5RQxk9ArFIaf059GXiv7rVpSuGh1huPr-cGTlZuviKU9q-2pITpIrljA3s6kqwBp-CVs6Ad-skNIYxwX1VwrTqFvS/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMfLa4D6xOYocbE4bQUBBQ03u5nTtjEzZOWeYd8ZHjr3yMRboywEIsDFGGOIYwmPUM47QMVfln61o_xWWX7JxygN6iRtDQz_tp-BIVoyDetc0aZKGfhBmAD5Wo998_JG7dWPouv2bw2L1N/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBYtaNdM4Hj_totIyvMdERFb01M8xm0vxquXzZiDlDdJPwMtOJWdBeOKlaHbszVXb4nLpF4aIAjUXpbs1XsBGUnHBRgoNzy3VI7pmf6Fn5K6-Gh78LaLDDig2PW-2ZrmOy-dZvidgl9IE/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjq310msCG4junHcDSMmRou2McfrRC02U65qxzNcG-qkDRPMM7DNGBbGDIEuUFYQTv1hjuvh2ovQ_hLu3v-WB8Ijg40eht8O-nPuF1WXEk9n-3uEKSO30lGXcHpmVIjMm-KaNOOu2jJrA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<br /><br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielBe_e-k_y8hiqQq25WcojjDUb7oliPnWcD2LmmNOQKJ2YrU9ZUVxsxKAbOzAvklvv_ftktBqcLj7DWjvucgSbdjhqc-6KjoTHNZUaGVq4bh4DYgvFZ0uY4K1sn5a6mIkXJlcjpCeezU/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNSQYHAY4RfcDVpp4mARtSePsacQSqJlq3muR138uFsRSO9EPVV0AAT1ZyWd8vpRDhxQiql-_4bze9eNCorVkRpI7jRZu2UbQ9mZErex-HRiL58dQrIr_5ogPPCbJ-DqKftKyOz99gyfI/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEUOB_mU0OtbkgqN8n3zK3_K6yo2-bbT84FnE1IxnbCgSeEi9CN-Bz8gFhIJXjQGPbGccmQx0W0VFfDdBr5QHWGY9ov4ijKpC7FgDBV0v9WNsC1UCWqd8vNP7HhsUnquVBZjAq0xx6XkeA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ4qIKilYaeE5ANe-_IUNHkihO8MHmGpZtIdNJwIjTHsNPQxX-3hr4Hsnqysb7Ry0CqIkKlek4Zu0qa_1z15gh9lhye89ElLthZBxTa4WAmUThUwRTWZBML9qeqsSS1kw-o4eOcX-mdlU/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgycCqJA3sttikcEighaoT9Zy4H8k0wJoRe7y8HC3u0ZFkQrSUeSptm4SXDObciZe9HkROwCXKxxQdPyYmCCqzRfzaRREsIcOuH7KgL4VSLrP7y2FHFA2cCj88ILjMp3JyJJbiqJVAGntw/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJWTY8n3scnfez13iJLHOCKA228vP4-3qCS2BEkZAXZVCX54ClZx4hfsry2rKz8KgUiaKTH435dg5zDU8agBwkOSfXd7ziHieRiNA7fjsDl8Y_NDYGFqei2PZ3swzsU97aK1R-eiVnVl4/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div> <div style=”font-size:10px;margin:8px 0px 3px 0px”> by : <a href=http://www.blogspottutorial.com/>BTF</a>
</div>

Good Luck...

Cara Membuat Scroll Box Pada Blog


kali ini kita akan membahas tentang bagaimna cara membuat scroll box pada blog. Scroll box ini bisa dipakai untuk menyimpan kode HTML, gambar, link dll. Caranyapun mudah sekali, copy saja kode di bawah ini untuk di pasang pada widget HTML/Javasript pada blog anda:

<div style="overflow:auto;width:100px;height:50px;padding:10px;border:1px solid #eee">

Isi Scroll Box

</div>

Keterangan:
-Tulisan berwarna hijau adalah isi scrollboxnya
-Anda bisa merububah tinggi kotak dengan mengubah tulisan yang berwarna merah
-Anda bisa mengubah lebar kotak dengan mengubah tulisan yang berwarna biru
-Jika anda tidak ingin kotaknya terlihat anda bisa merubahnya yaitu tulisan yang berwarna orange (tulisan #eee adalah warna kotaknya)

Cara Membuat Related Post Di Bawah Post


Related post ini dilengkapi dengan fitur Scrolling. Fungsi dari widget ini adalah agar pengunjung dapat melihat artikel lainnya dari blog sobat. Berikut langkah-langkah memasang related post di bawah post:

1. login pada blog sobat
2. Rancangan
3. Edit HTML
4. Cari kode ]]</b:skin>
5. Copy kode di bawah ini dan pastekan di atas kode pada no 4

/* Related post
----------------------------------- */
.rbbox{border: 1px solid #D8D8D8;
padding: 5px;
background-color: #E0F8E0;
-moz-border-radius:5px;
margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

6. Cari kode <p><data:post.body/></p>
7. Copy kode di bawah ini dan pastekan di bawah kode pada no 6

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0;
padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/><script type='text/javascript'>var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 4;var maxNumberOfLabels = 10;maxNumberOfPostsPerLabel = 50;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;albri&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script>
</div>
</b:if>

Tulisan yang berwarna merah bisa sobat ganti
8. Simpan Template

Selesai dan Lihat hasilnya

Good Luck...