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