Cara Memper Cantik Banner Iklan (Style BuySellAds)

Memper Cantik Banner Iklan Dengan (Style BuySellAds) - Saya yakin Anda semua akan memperhatikan efek yang saya pasang ke banner iklan saya. Efeknya sangat mengagumkan dan membawa perhatian disetiap ada pengunjung melihat penampilan iklan di Lora Malunk Blog.

Dengan mempercantik penampilan banner iklan dengan efek Style BuySellAds tentu membawakan rejeki kita tambah lancar, karena dari pihak pengiklan akan senangan melihat iklannya dipercantik dengan efek-efek yang bagus. Seperiti (Style BuySellAds). Jika anda melihat demonya anda lihat penampilan Iklan Saya yang ada di sebalah kanan.

Mari kita masuk ke tahap pelajaran :

Langkah 1
Masuk atau login ke akun blogger anda

Langkah 2
Silahkan masuk ke Menu Design atau Rancangan. Lalu Klik Edit HTML.

Langkah 3
Carilah kode ]]></b:skin> (Untuk mempercepat pencarian silahkan anda tekan tombol CTRL-F)

Langkah 4
Setelah menemukan kode diatas, silahkan copy paste kode dibawah ini tepat diatas kode ]]></b:skin>

<!-- Start Css http://lora-malunk.blogspot.com -->
.bsap a{text-shadow:1px 1px 1px #111 !important;color:#eee !important;padding:7px !important;margin:0 10px 10px 0px !important;overflow: visible !important;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border: 0 none !important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px !important;}
.bsap .even{margin-right:0 !important;}
.bsap .ad1{background:#e42b2b !important}
.bsap .ad2{background:#ff8400 !important}
.bsap .ad3{background:#a800ff !important}
.bsap .ad4{background:#49a7f3 !important}
.bsap .ad5{background:#41d05f !important}
.bsap .ad6{background:#B24700 !important}
.bsap .ad7{background:#FFE500 !important}
.bsap .ad8{background:#007D47 !important}
.bsap .ad9{background:#330000 !important}
.bsap .ad10{background:#990000 !important}
.bsap .ad11{background:#f70000 !important}
.bsap .ad12{background:#80FEC8 !important}
<!-- End Css http://lora-malunk.blogspot.com -->

Langkah 5
Simpan template anda dan lihat hasilnya. OKE

Semoga Trick and Tips kali ini bermanfaat buat kita semua. Dan Jangan lupa untuk berlangganan artikel kami silahkan masukkan email anda dibawa ini. Anda akan mendapatkan Artikel terbaru dari saya dengan gratis. Tidak Dipunggut biaya. Ilmu sudah gratis, Mau langganan artikel saya juga gratis. Kenapa harus diperhitungkan. Mari kita lestarikan saling berlangganan agar tidak ada copy paste artikel tanpa sepengetahuan admin.

Cara Membuat Menu JQuery Accordion

Semangat buat berbagi Tips And Trik Blog ke sahabat blogger mania, Kali Lora Malunk Blog akan berbagi trik mengenai Membuat Menu  JQuery Accordion ini menggunakan kode javascript yang sangat sederhana sekali.

Tips ini akan membantu membangkitkan efek jQuery meciptakan sebuah fungsi indah dengan dibantu kode css yang menjadi pilar hingga terbentuk desain yang sangat menarik sekali.

Untuk Melihat Hasil Yang sudah Terjadi Silahkan Klik : D E M O

Mari kita memasuki tahap pembelajaran :

Langkah 1

Cari kode ]]></b:skin> pada "Edit Template"

Langkah 2

Copy Paste kode javascript dibawa ini dan letakkan di bawah kode ]]></b:skin>

<script type="text/javascript">
$(document).ready(function(){
$('.wadah').hide();
$('.sedul:first').addClass('active').next().show();
$('.sedul').click(function(){
if( $(this).next().is(':hidden') ) {
$('.sedul').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
return false;
});
});
</script>

Langkah 3
Memasukkan kode CSS dibawah ini tepat di atas kode ]]></b:skin>

.boxtama {
background:#333;
width: 220px;
margin: 0 auto;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-top:3px solid #777;
font-size:12px;
}
.boxtama .wadah {
margin: 0 0 5px 2px;
padding: 0;
overflow: hidden;
font-size: 16px;
width: 214px;
clear: both;
background: #bbb;
border: 1px solid #d6d6d6;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
.boxtama .wadah .anakwadah {
padding:15px 8px 10px;
}
.boxtama .wadah .anakwadah p {
padding: 5px 0;
margin: 5px 0;
font:12px normal;
color:#000;
}
.boxtama .wadah h3 {
font: 18px normal Georgia;
margin: 0 0 10px;
padding: 0 0 5px 0;
border-bottom: 1px dashed #ddd;
color: #993333;
}
.boxtama .wadah img {
float: left;
margin: 10px 8px 0px 0;
padding: 3px;
background: #ddd;
border: 1px solid #444;
width:60px;
height:60px;
}
.boxtama .wadah .anakwadah ul {
padding:0;
margin:0;
list-style:none;
}
.boxtama .wadah .anakwadah li {
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrow-gubhugreyot.png) top left no-repeat;
background-position:5px 5px;
list-style:none;
margin:0px;
padding:0px;
border-bottom:1px dotted #999;
transition:0.4s;
-o-transition:0.4s;
-moz-transition:0.4s;
-webkit-transition:0.4s;
}
.boxtama .wadah .anakwadah li:hover{
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrowHov-gubhugreyot.png) top left no-repeat;
background-position:10px 5px;
}
.boxtama .wadah .anakwadah li a {
font-family:Trebuchet MS;
padding:0 0 0 25px;
font-size:11px;
color:#222;
font-weight:500;
text-decoration:none;
}
.boxtama .wadah .anakwadah li a:hover {
color:red;
}
h4.sedul {
padding: 0;
margin: 0 0 5px 0;
background: #666 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgOrangeV34H2-gubhugreyot.gif) bottom left repeat-x;
height: 36px;
line-height: 36px;
width: 220px;
font-size: 14px;
font-weight: bold;
float: left;
}
h4.sedul:hover { /* hor.png */
padding: 0;
margin: 0 0 5px 0;
background:#660000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgFadeBlue-gubhugreyot.png) left center no-repeat;
background-position:-1px 0;
border-right:1px solid #999;
}
h4.sedul a {
background: url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRedRight-gubhugreyot.png) left center no-repeat;
background-position:8px 5px;
border-left:2px solid #fff;
border-right:2px solid #fff;
font-family:Droid Serif;
font-size:14px;
color:/*silver*/ #003366;
text-decoration: none;/*opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); */
display: block;
padding: 0 0 0 45px;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
h4.sedul a:hover {
background:#000 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRightDownAnima-gubhugreyot.gif) left center no-repeat;
background-position:8px 5px;
color:red;
text-shadow:0px 1px 1px #888;
opacity:1.0;
filter:alpha(opacity=100);
}
h4.active {
background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgblueV35H1-gubhugreyot.gif) top left repeat-x;
}

Langkah 4

Melanjutkan dengan mencari kode <head> . Letakkan kode Jquery dibawah ini tepat diatasnya kode . <head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Langkah 5

Simpan Template / (Save Template)

Langkah 6

Masuk ke menu Rancangan Add Gadget "HTML/Javascript"

Langkah 7

Lalu Copy paste kode dibawah ini, ke kolom "HTML/JavaScript"

<div style="float:left;background:#111;padding:3px;border:2px solid #666;">

<div class="boxtama"><h4 class="sedul"><a class="pilih" href="#">Theme - Template</a></h4>
<div class="wadah">
<div class="anakwadah">
<h3>Tutorial Blog Up To Date</h3>
<ul class="accor">
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-related-posts-slide-out-boxez.html" target="_blank">Membuat Related Posts</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/mempercantik-tampilan-entri-popular-new.html">Modifikasi Entri Populer</a></li>
<li><a href="http://lora-malunk.blogspot.com">Tips And Trik Blog</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-google-custom-seacrh-sendiri.html" target="_blank">Membuat Google Custom</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-foto-menjadi-teks.html">Foto Menjadi Teks</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/cara-memanggil-robot-mbah-google-ke.html">Memanggil Robot Google</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/cara-mengatasi-feedburner-yang-error.html" target="_blank">Tips Feedburner Eror</a></li>
<li><a href="http://lora-malunk.blogspot.com/2012/03/membuat-slide-show-foto-dengan-efek.html">Membuat Slide Show</a></li>
<li><a href="http://lora-malunk.blogspot.com">Lora Malunk Blog</a></li>
</ul>
</div>
</div></div></div>

Catatan Akhir :

- Ganti URL yang saya cetak tebal dan berwana merah dengan URL Artikel Anda.

- Untuk merubah lebar kolom (width) : Anda harus merubah kode dibawah ini dan angka tersebut mempunyai selisih 6px dengan yang di atas dan di bawahnya:

.boxtama {
width: 220px;

.boxtama .wadah {
width: 214px;

h4.sedul {
width: 220px;

Silahkan dibaca juga Tutorial yang lain yang sangat menarik dan patut dipelajari bersama. Melalui link di bawah ini:

Membuat Slide Show Foto Dengan Efek Jquery

Cara Update Status Dengan Simbol Lucu

Membuat Related Posts Slide Out Boxez

Berhubung postingan kali ini ada permintaan dari sahabat blogger yang melalui email, karena fitur ini berasal dari Tympanus dan di tutorial tersebut tidak penjelasan yang sangat relefan bagaimana cara menerapkan dan memperaktekkan trik ini di Blogger jadi disini saya akan membahas bagaimana Cara Membuat Related Posts Slide Out Boxes di Blogger.

Baiklah, tips kali ini related posts harus kita edit secara manual, Berikut screenshot dari Tympanus dan DEMO.

LANGKAH 1
Masuk ke Menu Template/Rancangan > Edit Html

LANGKAH 2
Cari kode <b:skin> dan letakan kode CSS berikut diatas kode <b:skin>

<link href="http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css" media="screen" rel="stylesheet" type="text/css"></link>

LANGKAH 3
Selanjutnya cari Kode </body> dan letakan kode JavaScripts berikut tepat diatas kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script>//<![CDATA[
$(function() {
/**
* the list of posts
*/
var $list = $('#rp_list ul');
/**
* number of related posts
*/
var elems_cnt = $list.children().length;

/**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200);

function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
var loaded = 0;
//show 5 random posts from all the ones in the list.
//Make sure not to repeat
while(loaded < 5){
var r = Math.floor(Math.random()*elems_cnt);
var $elem = $list.find('li:nth-child('+ (r+1) +')');
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//animate them
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}

/**
* hovering over the list elements makes them slide out
*/
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});

/**
* when clicking the shuffle button,
* show 5 random posts
*/
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);

function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});
//]]></script>

LANGKAH  4
Sekarang letakan struktur HTML ini juga diatas kode </body>

<li>
<div>
<img height='72' width='72' alt='JUDUL IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL POST</span>
<span class='rp_links'>
<a href='LINK ARTIKEL ANDA' target='_blank'>Tutorai Blog</a>
<a href='LINK DEMO' target='_blank'>Tips and Trik</a>
</span>
</div>
</li>

Anda bisa menambahkan beberapa struktur minimal 5. Dalam JavaScript mendefinisikan bahwa hanya menampilkan 5 posting, Anda harus mengganti teks berwana dan di cetak tabal dengan link posts, link image dan judul.


LANGKAH 5
Simpan Template anda


Sekian Terima Kasih

Cara Membuat Menu Animasi CSS3

Kali ini aku ingin membuat posting mengenai Cara Membuat Menu Animasi CSS3, yang hasilnya akan terlihat seperti gambar disamping, sebelumnya aku pernah membuat postingan Membuat Menu Dropdown dengan CSS3 dimana dalam postingan tersebut, kita bisa langsung mengenerate kode CSS3 dari bentuk yang kita inginkan.

Akan tetapi yang patut diingat, tidak semua browser support Menu CSS3, untuk melihat tabel browser mana saja yang support dengan CSS3, bisa dilihat di www.findmebyip.com

Pertanyaanya adalah Bagaimana proses diatas bisa sampai terjadi.. ?
Yang perlu anda sisipkan adalah kode CSS3 dan HTML di bawah ini.

<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>

<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://lora-malunk.blogspot.com'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>

Masukkan ke Gadget HTML/JavaScript

Yang perlu diperhatikan dari kode diatas adalah kode yang berwarna merah, dan angka yang ada disekitarnya.

1. angka 0.5s menandakan waktu perubahan dari animasi
2. angka 25deg menandakan rotasi perputaran dari area menu
3. angka 0deg menandakan bentuk akhir dari rotasi perputaran dari area menu
4. untuk huruf menuqu1 dan menuqu2 merupakan kode untuk kondisi dari properti yang telah di tentukan pada kode CSS3-nya

Membuat Menu Chunky CSS3

Menu adalah bagian dari yang terpenting bagi pembuatan web atau blog. tanpa menu jangan harap web atau blog anda disegani oleh pengunjung. Maka dari itu kami akan memberikan suatu cara atau trik Membuat Menu Chunky CSS3 dengan menu tersebut web atau blog anda sedikit banyak terbantu. Akan tetapi sebelum anda melakukan trik tersebut, alangkah baiknya anda lihat dulu demo, agar tau bentuk dan model menunya seperti apa.

D E M O

Setelah anda melihat demonya, kalau anda tertarik dengan Menu Chunky CSS3 saya akan memberikan triknya berikut ini :

Langkah 1

Silahkan Copy Code Css Di bawah ini dan Letakan Di atas Code ]]></b:skin>

#top_navigation {
background : transparent;
width: 800px;
height : 77px;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
width : 100%;
}
ul.nav {
background : transparent;
width: 800px;
height : 57px;
line-height : 31px;
list-style : none;
padding : 0 10px;
font-size : 14px;
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
background : transparent;
height : 30px;
font-size : 16px;
color : #808080;
float : left;
padding : 11px 19px 11px 16px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #252525;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 19px 11px 16px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}

Langkah 2
Simpanlah Templates anda yang baru saja ditambahkan CSS3

Langkah 3
Copy Code HTML Di bawah ini dan Letakan Di Add Gadget ->> HTML/Javascript

<div id="top_navigation">
<ul class="nav">
<li><a href="#"> Home </a></li>
<li><a href="#"> Your Blog </a></li>
<li><a href="#"> About You </a></li>
<li><a href="#"> More stuff </a></li>
<li><a href="#"> Contact </a></li></ul></div>

Langkah 4
Sampai disini dulu trik kali ini selamat mencoba

Membuat Galeri Foto Dengan CSS

Siang ini saya akan memberikan suatu Trik and Tip yang sangat sederhana meskipun cuacanya agak panas. tapi semangat untuk berbagi kesahabat blogger tetap berjalan sebagaimana mestinya.

Nah Trik kali ini Cara Membuat Galeri Foto dengan CSS, Mungkin ada sahabat yang masih belum tau bagaimana cara membuatnya. Santai...Santai....Santai (Kata Bung Rhoma) Lora Malunk Akan memberikan Trik dan Tipnya.

Lihat Dulu dan di teliti Cewek-cewek dibawah ini. ada yang menarik. Silahkan Diklik Fotonya.

Kumpulan Foto Dian Pelangi

Dian Pelangi Artis Model

Kumpulan Foto Nabila Syakieb

Foto Terbaru Aura Kasih

Kalau Sudah Melihat DEMONYA, Langsung saja :

Langkah 1
Copy Paste Kode dibawah ini ke Gadget (HTML/JavaScript), Bisa juga di pasang ke dalam Postingan.

<html>
<head>
<style type="text/css">
div.img
{
margin:2px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
</style>
</head>
<body>

<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis2_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis3_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="Lora-malunk_big.htm">
<img src="klematis4_small.jpg" alt="loramalunkblog" width="110" height="90" />
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Langkah 2
Ingat...! Jangan asal Copy Paste dibaca dan diteliti dulu sebelum anda melakukan Trik ini.

Langkah 3
Tulisan yang saya cetak TEBAL anda ganti
1. Yang Berwarna Hitam : Ganti dengan URL Iklan/Postingan anda
2. Yang Berwarna Biru : Ganti dengan URL Gambar
3. Yang Berwarna Merah : Ganti description sesuka anda

Membuat Tombol Add Comment Dengan Efek Jquery Slider

Trik kali ini saya akan Membuat Sebuah Tombol Add Comment dengan Efek Jquery yang sempet di reques oleh temen Blog, Tip ini cocok untuk blog yang komentarnya banyak, maka pembaca membantu untuk menyeret bagian bawah untuk diposting komentar. Berikut efek tambahan Jquery slider, yang efeknya di ambil dari tombol Back To Top atau Kembali ke Atas.

Mari kita simak bersama trik kali ini :

Langkah 1
Masukkan CSS dibawah ini tepat di atas kode </b:skin>

a.add_comment{text-decoration:none;color:#fff}
.add_comment{float:right;padding:6px 10px;margin:20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;text-align:center;display:inline-block;background:#d43131;background:-moz-linear-gradient(top,#ffaa9a,#f8674b 5%,#d54746);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffa493),color-stop(.03,#f8674b),to(#d54746));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746')";-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #d1371c;border-bottom:1px solid #9f220d;color:#FFF;text-shadow:0 1px 1px #6f3a02}
.add_comment:hover{background:#c92929;background:-moz-linear-gradient(top,#ff9986,#ee5f43 5%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fa8772),color-stop(.03,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443')";border-bottom:1px solid #9f220d}
.add_comment:focus{padding:7px 11px;color:#FFF;text-shadow:0 -1px 1px #894906;border:none;background:#bc2323;background:-moz-linear-gradient(top,#d04443,#ee5f43 95%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d04443),color-stop(.9,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43')";box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-webkit-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-moz-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7}

Langkah Selanjutnya 2
Anda cari kode dibawah

<b:includable id='comments' var='post'>

Langkah 3
Sisipkan kode dibawah ini tepat bawah kode langkah 2:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='add_comment' href='#comment-form'>Add a comment</a>
<div class='clear' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$('.add_comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script></b:if>