CARA MEMBERI EFEK PADA LINK BILA DISENTUH KURSOR

Oke sobat Gubuk Berbagi, posting tengah malam nih sobat, bagaimana kabar kalian semua, semoga baik-baik saja. Gubuk Berbagi kali ini akan kembali share tentangBlogging terutama bagian edit template atau tampilan Blog. Jika sebelumnya saya share tips yang hampir sama yaitu Cara Membuat Gambar Membesar Ketika Disentuh Kursor, maka kali ini saya akan share mengenai Cara Memberi Efek Pada link Yang Bila Disentuh Kursor.

Tentu kalian semua Sobat Blogger sudah tau maksud dari judul postingan diatas bukan, kalo belum tau tanyakan saja pada yang sudah tau ya, atau langsung praktekkan saja dan lihat hasilnya. Baiklah langsung saja saya jelaskan ke langkah-langkahnya :

1. Login ke akun Blogger sobat

2. Pilih Template > Edit HTML

3. Kemudian cari kode a:hover

4. Jika sudah ketemu sobat tinggal hapus dan ganti dengan efek-efek yang sobat inginkan, berikut contoh-contohnya :

Untuk Merubah Warna Link Saat Disentuh

Copy kode dibawah

Sobat bisa mengganti warna sesuka hati pada kode warna tersebut

Cara Membuat Link Menjadi Tebal Bila Disentuh

Copy kode dibawah

Cara Membuat Link Menjadi Miring Bila Disentuh

Copy kode dibawah

Cara Membuat Link Bergaris Bawah Bila Disentuh

Copy kode dibawah

Cara Membuat Ukuran Teks Lebih Besar Bila Disentuh

Copy kode dibawah

Sobat bisa mengganti ukuran sesuka sobat pada font sizenya

Atau Sobat Ingin Menggabungkan Semuanya

Copy kode dibawah

5. Jika sudah sobat ganti kodenya langsung saja simpan template dan lihat hasilnya di Blog Sobat

Okelah sobat, itulah yang bisa saya bagikan kepada sobat pengunjung setia Gubuk Berbagi ini. Sobat juga bisa memodifikasi sendiri efek yang ingin sobat buat, misalnya kombinasi tebal dengan miring, atau miring dengan garis bawah, silahkan berkreasi ya sobat Blogger semuanya. Terima Kasih...

Read More ->>

Widget Popular Post 3D Keren Bergerak di Blog

by : REHABY SETIAWAN

Widget Popular Post 3D Keren Bergerak di Blog. Baiklah sobat berikut ini adalah widget Popular Post 3D Yang dapat bergerak dan berputar diblog, yang dapat anda gunakan untuk mempercantik tampilan Blog anda. Baiklah sobat untuk anda yang tertarik ingin menggunakanwidget Popularpost 3D ini silahkan ambil kodenya di bawah dan pasang ke sidebar blog anda.

Cara Memasang Widget Popular Post 3D Bergerak

1. Login akun blogger Anda. Pastikan widget popullarpost standar Blogger terpasang ditemplate anda. kemudian...
2. Pilih Tata Letak ---> Tambah Gadget ---> HTML/JavaScript.
3. Copy paste kode dibawah ini pada HTML/JavaScript.

<style type="text/css">
.cube { width: 300px; height: 300px;}
a img { border: none; }
#linksCube img { width: 98%; height: 98%; }
</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="https://seocipscompost3d.googlecode.com/svn/seocips-popuar3d"></script> <script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').abupopularcube();
});
</script> <script type="text/javascript" src="https://seocipscompost3d.googlecode.com/svn/seocipspopularpost"></script> 

Keterangan : Silahkan ubah kode yang diberih warna di atas sesuai dengan tinggi dan lebarnya template sobat, untuk kode warna hijau adalah untuk mengatur besarnya gambar di widget popular post tersebut.

4.Simpan template dan Lihat hasilnya.

Di artikel sebelumnya Juga kita pernah membahas

Sekian mengenai widget Popular Post bergerak keren di Blog.

http://roronoa-aby.blogspot.com/

Read More ->>

Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog

Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog

Berbagi pengalaman pribadi membuat lipatan kertas pada ujung kanan blog yang menurut saya agak lumayan bikin pusing sob, maklumlah pemula,, heheheheee,,,, 

Setelah berkali-kali mencoba merubah kode java scriptnya, akhirnya selesai juga, dan lihat hasilnya di ujung kanan blog saya, [sedikit pamer, heheheheee,, ]

bagi sobat yang berminat untuk membuat lipatan kerta pada ujung blog seperti blog saya [tenang aja yang saya bagi tidak ada foto jelek saya kok,, heheheheee,,, ] silakan ikuti lankah-langkah berikut ini ya sobat:

1. Silahkan Login ke akun blogger sobat.

2. Lalu masuk ke design Template, klik Edit HTML

3. Seperti Biasa Centang Expand Template Widget

4. Kemudian cari kode berikut </body>

5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>var tujuan =&#39;http://Alamat Url Feeds Sobat&#39;</script>

<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>

6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save ya sob)

Keterangan:

• Kode warna hijau: ganti dengan URL Feeds sobat
• Kode warna biru: ganti apabila sobat ingin mengganti gambar sesuai selera sobat.

Selamat mencoba ya sobat,,

http://roronoa-aby.blogspot.com/

Read More ->>

Memasang Costum Threaded Comment di Blogger

by :Rehaby Setiawan

Sejak Threaded comment diperkenal di blogger, sudah banyak yang memasangnya. Jika anda ingin mencari Costum threaded comment yang bagus, anda tidak salah masuk. Sebenarnya tidak mudah untuk membuat threaded comment yang bagus karena butuh pengetahuan tentang CSS yang banyak tetapi saya akan menyediakannya secara gratis.

Demo

Fitur threaded comment yang akan saya berikan adalah

1. Comment boubble

2. Author badge

3. Tambahkan komentar shorcut, costum reply dan delete button

4. Reply and delete dengan efek Hover button

Tertarik ?

Pemasangan

1. Login ke akun blogger

2. Pastikan bahwa anda telah mengaktifkan Threaded comment di blog anda.

3. Template > Edit HTML

4. Pergi ke 

]]></b:skin>

5. Paste kode ini diatasnya

/*Costum threaded comment style by idbloggertrick.blogspot.com*/ /*Credit by idbloggertrick.blogspot.com*/ .comments { padding-top: 30px; clear:both; margin: 0; } .comments h4 { font-size: 23px; text-transform: capitalize; } #comments-block .avatar-image-container.avatar-stock img{ border-width:0; padding:1px; } #comments-block .avatar-image-container{ height:37px; left:-45px; position:absolute; width:37px; } #comments-block.avatar-comment-indent{ margin-left:45px; position:relative; } #comments-block.avatar-comment-indent dd{ margin-left:0; } iframe.avatar-hovercard-iframe{ border:0 none; padding:0; width:25em; height:9.4em; margin:.5em; } .comments .comments-content{ margin-bottom:16px; } .comments .continue, .comments .comment .comment-actions { display: block; text-align: right; } .comments .continue a, .comments .comment .comment-actions a{ display: inline-block; padding: 0 14px; background: #E53B2C; color: #fff; font-family: Georgia, sans-serif; font-style: italic; -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; transition: all 0.25s linear; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; } .comments .continue a:hover, .comments .comment .comment-actions a:hover{ background: #333; color: #fff; text-decoration: none; } .comments .comments-content .comment-thread ol{ margin:20px 0 0 -10px; overflow:hidden;} .comments .comments-content .inline-thread{ padding:0;} .comments .comments-content .comment-thread{ margin:0 0 0 -15px;} .comments .comments-content .comment-thread:empty{ display:none} .comments .comments-content .comment-replies{ margin-left:0px;margin-top:0px;} .comments .comments-content .comment:first-child{padding-top:4px} .comments .comments-content .comment:last-child {border-bottom: 1px solid #DDDDDD; padding-bottom:0; } .comments .comments-content .comment-body{position:relative} .comments .comments-content .user a { font-size: 16px; font-style: normal; font-weight: bold; line-height: 1.375em; } .comments .comments-content .icon.blog-author {display:inline-block;height:18px;margin:0 0 -4px 6px;width:18px} .comments .comments-content .datetime { display: block; line-height: 21px; margin-bottom: 1em; margin-left: 0px; } .comments .comments-content .datetime a { color: #333; } .comments .comments-content .datetime a:hover { text-decoration:none; } .comments .comments-content .comment-header { margin: 0; min-height: 40px; padding: 10px; position: relative; } .comments .comments-content .comment-content{ margin: 0; padding: 0 10px 10px 10px; position: relative; } .comments .comments-content .owner-actions {position:absolute;right:0;top:0} .comments .comments-replybox { border:none;height:250px;width:100%} .comments .comment-replybox-single { margin-left:4px;margin-top:5px} .comments .comment-replybox-thread { margin: 5px 0 5px 15px; } .comments .comments-content .loadmore a { display:block;padding:10px 16px;text-align:center} .comments .thread-toggle { cursor:pointer;display:none;} .comments .continue{ float: right; cursor:pointer; display:inline-block; } .comments .continue a{ display:block; font-weight: normal; margin: 0 15px 0 0; } .comments .comments-content .loadmore{cursor:pointer;margin-top:3em;max-height:3em} .comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden} .comments .thread-chrome.thread-collapsed{display:none} .comments .thread-toggle .thread-arrow{display:inline-block;height:6px;margin:.3em;overflow:visible;padding-right:4px;width:7px} .comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent} .comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent} .comments .avatar-image-container { float: right; padding: 0; margin: 0; max-height:55px; width:55px; } .comments .avatar-image-container img { display: block; max-width: 55px; width: 55px; border-radius: 27.5px; -moz-border-radius: 27.5px; -o-border-radius: 27.5px; -webkit-border-radius: 27.5px; } .comments .comment-block { margin-left: 0px; position: relative; } .comments .comments-content .comment { background: #fff; border: 1px solid #DDDDDD; list-style: none outside none; margin: 0 13px 15px 25px; padding: 10px !important; } .comments .comments-content .comment:nth-child(even) { background: #F9F9F9; } .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7HmqYX69JGb3HvxanUi9L9rgxMgnVzykjQPTmTopmNakypdQtIodOIf5Y1XMyzyw1nG2_AovfseXxAAAAcvaHw2mLilQW4IGYIBfIE7wW34M4-rUoN1PzRz4znZy_wEPaxVfK5OU8yKM/s320/picresized_1338989738_comment-author-green.gif);width:36px;height:36px} .comment-thread ol { counter-reset: countcomments; } .comment-thread li:before { content: counter(countcomments,decimal); counter-increment: countcomments; float: left; font-size: 20px; color: #555555; padding-left:10px; padding-top:3px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbe1AlCcjeUQdF-8aGx0kTWqgRgDq6lK-4XM5Wu51oG47cTnNri_u8tTwyr4m8-BsRM4a9Op35osOBq6VzZ7husoRw5RXbKy-pdyRmiN8Elp2YNhs6Ik6vi0tysS-rYlMw4yw6rmlU-7R/s1600/bubble+comment.png) no-repeat; margin-top:7px; margin-left:10px; width: 50px; height: 48px; } .comment-thread ol ol { counter-reset: contrebasse; } .comment-thread li li:before { content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin); counter-increment: contrebasse; float: left; font-size: 18px; color: #666666; }

6. kemudian simpan

semoga bermanfaat yah teman2 

jangan lupa like / komentar di bawah!!!!!!!!!!!!! 

http://roronoa-aby.blogspot.com/

Read More ->>

Memasang Nofication Bar melayang di Blogger

BY : Rehaby Setiawan

Akhirnya saya update telah sekian lamanya. Yang akan saya bahas adalah nofication bar melayang, Ini sedikit berbeda karena ini tidak menggunakan javascript sehingga tidak akan mempengaruhi kecepatan loading blog agan.

Copyright

Kode ini milik Indonesia blogger Trick. Anda boleh mengshare kembali dengan catatan tidak menghapus credit nya. Menghapus credit dapat menyebabkan kode menjadi hancur.

Pemasangan

1. Pergi ke Blogger > Template > Edit HTML
2. Cari

]]></b:skin>

3. Paste CSS ini diatasnya

/*-----www.idbloggertrick.blogspot.com-----*/#noscriptnotificationbarWrap{display:none;margin:0;padding:0;position:fixed;margin-top:-41px;z-index:999999;width:100%;height:41px}#noscriptnotificationbar{width:100%;height:28px;margin:0;padding-top:7px;text-align:center;background:none repeat scroll #0bf;position:relative;box-shadow:0 1px 3px #666;z-index:9998;text-decoration:none;color:#000;font-family:arial,sans-serif;font-size:14px;font-weight:bold;text-shadow:.4px .4px .4px #4a4949}#noscriptnotificationbar a{text-decoration:none;color:#fffc00;font-family:arial,sans-serif;font-size:13px;font-weight:bold;text-shadow:.4px .4px .4px #4a4949;outline:0}#noscriptnotificationbar a:hover{text-decoration:underline}

4. Pergi ke <body>
5. Paste kode ini dibawahnya

 <noscript><div id='noscriptnotificationbarWrap' style='display: block; margin-top: 0px;'><div id='noscriptnotificationbar'>

Tulis pesan anda di sini

 </div></div>
<br/><br/></noscript>

6. Simpan Template 

semoga bermanfaat yah teman2 

jangan lupa like yah teman2 !!!!

http://roronoa-aby.blogspot.com/

Read More ->>

Memasang Animasi Loading Keren di Blogger

by: REHABY SETIAWAN

Apakah anda pernah lihat efek blog yang menerapkan ajax, akan muncul loading berputar. Apakah anda pernah penasaran seperti begini, "Kode apa ya yang digunakan, jadi pingin " . Nah pertanyaan itu akan terjawab di postingan ini
Harap diingat bahwa dalam kode ini, anda harus memasangjquery di Blog

Langkah pertama yang harus selalu anda lakukan, backup template anda !!!
Saya tidak bertanggung jawab jika terjadi kerusakan pada template anda dikarenakan anda lupa membackup

Baiklah berikut langkah langkahnya

Memasang CSS

Pasang kode ini diatas

]]></b:skin>

Kode  :

#floatingCirclesG{
position:relative;
width:128px;
height:128px;
-moz-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
-o-transform:scale(0.6);
transform:scale(0.6);
}
.f_circleG{
position:absolute;
background-color:#55C8EB;
height:23px;
width:23px;
-moz-border-radius:12px;
-moz-animation-name:f_fadeG;
-moz-animation-duration:0.48s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:12px;
-webkit-animation-name:f_fadeG;
-webkit-animation-duration:0.48s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:12px;
-ms-animation-name:f_fadeG;
-ms-animation-duration:0.48s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:12px;
-o-animation-name:f_fadeG;
-o-animation-duration:0.48s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:12px;
animation-name:f_fadeG;
animation-duration:0.48s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#frotateG_01{
left:0;
top:52px;
-moz-animation-delay:0.18s;
-webkit-animation-delay:0.18s;
-ms-animation-delay:0.18s;
-o-animation-delay:0.18s;
animation-delay:0.18s;
}
#frotateG_02{
left:15px;
top:15px;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#frotateG_03{
left:52px;
top:0;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#frotateG_04{
right:15px;
top:15px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#frotateG_05{
right:0;
top:52px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#frotateG_06{
right:15px;
bottom:15px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#frotateG_07{
left:52px;
bottom:0;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}
#frotateG_08{
left:15px;
bottom:15px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
@-moz-keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}
}
@-webkit-keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}
}
@-ms-keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}
}
@-o-keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}
}
@keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}

Jika template anda adalah template HTML yang tandanya dipaling atas template terdapat kode

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<HTML>

Maka agar Valid HTML5 ganti kode CSS diatas dengan kode CSS dibawah

#floatingCirclesG{
position:relative;
width:128px;
height:128px;
transform:scale(0.6);
}
.f_circleG{
position:absolute;
background-color:#55C8EB;
height:23px;
width:23px;
border-radius:12px;
animation-name:f_fadeG;
animation-duration:0.48s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#frotateG_01{
left:0;
top:52px;
animation-delay:0.18s;
}
#frotateG_02{
left:15px;
top:15px;
animation-delay:0.24s;
}
#frotateG_03{
left:52px;
top:0;
animation-delay:0.3s;
}
#frotateG_04{
right:15px;
top:15px;
animation-delay:0.36s;
}
#frotateG_05{
right:0;
top:52px;
animation-delay:0.42s;
}
#frotateG_06{
right:15px;
bottom:15px;
animation-delay:0.48s;
}
#frotateG_07{
left:52px;
bottom:0;
animation-delay:0.54s;
}
#frotateG_08{
left:15px;
bottom:15px;
animation-delay:0.6s;
}
@keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}

Memasang di Blog
Setelah itu, pasang kode ini dimana saja, tapi saran saya dibawah <body>

<div id="floatingCirclesG">
<div class="f_circleG" id="frotateG_01">
</div>
<div class="f_circleG" id="frotateG_02">
</div>
<div class="f_circleG" id="frotateG_03">
</div>
<div class="f_circleG" id="frotateG_04">
</div>
<div class="f_circleG" id="frotateG_05">
</div>
<div class="f_circleG" id="frotateG_06">
</div>
<div class="f_circleG" id="frotateG_07">
</div>
<div class="f_circleG" id="frotateG_08">
</div>
</div>

Kalau sudah silahkan dicoba
Kalau gagal bisa menghubungi saya melalui komentar
Trims oke atas kunjungannya

semoga bermanfaat yah teman2 >>>>>>>>>>>>>

http://roronoa-aby.blogspot.com/

Read More ->>

Cara Memasang Pagination dengan Next Previous di Blogger

Halo bagaimana kabarnya ? Sekarang saya akan share trik memasang pagination dengan tombol Next ( Sesudah ) dan Previous ( Sebelum ) . Pagination ini berfungsi untuk membagi post anda berdasarkan urutannya.
Baiklah langsung ke TKP
1. Pergi ke Blogger > Template > Edit HTML

Memasang Pagination

1. Cari </body> dengan menggunakan CTRL + F

2. Paste kode ini diatasnya

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var postperpage=5;
    var numshowpage=2;
    var upPageWord ='« Previous Page';
    var downPageWord ='Next Page »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
<script type='text/javascript'>
  /*<![CDATA[*/
    var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
  /*]]>*/
</script>
</b:if>
</b:if>

3. Simpan Templatenya

Memasang CSS

Untuk memasang CSS, sangat mudah. Cari kode ]]></b:skin>

Lalu paste kode css ini diatasnya.

1. Untuk pagination warna merah

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#e74c3c;border:none;border-bottom:3px solid #862B20;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#c0392b;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

2. Untuk pagination warna biru

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#3498db;border:none;border-bottom:3px solid #246EA0;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2980b9;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

3. Untuk pagination warna hijau

 #blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#2ecc71;border:none;border-bottom:3px solid #208C4D;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#27ae60;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

4. Untuk pagination warna gelap

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#34495e;border:none;border-bottom:3px solid #202D3A;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2c3e50;color:#FFF}
.showpageOf{display:none!important}
@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

Langkah terkahir tentu simpan template anda
semoga bermanfaat ya teman2>>>>>>>>http://roronoa-aby.blogspot.com/

Read More ->>