Membanned spamer di komentar dengan jquery


Kali ini saya ingin berbagi buat sobat yang udah males dan capek menghapus komentar para spammer, yang satu ini palinf buat suasana jadi males dan menjengkelkan bila hadir di komentar blog kita. jquery ini bisa sobat gunakan untuk menghapus dan membanned para spamer tersebut dengan menghilangkan isi komentar juga link profile mereka agar user lain tidak merasa terganggu.


langsung saja buat sobat yang ingin memasang jquery ini, buka template editornya dan letakkan kode jquery berikut di atas tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
var spamlist=[
'http://www.blogger.com/profile/ogoh-ogoh-muke-spamer' /* URL Profile spamer */
];
for(var v=0; v<spamlist.length; v=v+1){
$("a[href='"+spamlist[v]+"']").each(function(){
$(this).closest(".comment_inner").find(".comment_body")
.replaceWith("<div class='.comment_body' style='color:red'>Pergilah kelaut ente, nyelem dan jangan timbul lagi!!!</div>"),
$(this).replaceWith("<span style='color:red'>BANNED USER!</span>");
})}
//]]>
</script>

Jika lebih dari satu profile silahkan tambahkan daftar seperti yang saya tuliskan di tas dengan di beri jeda koma (,) seperti di bawah ini

cara menambahkan url profile spamer berikutnya

<script type='text/javascript'>
//<![CDATA[
var spamlist=[

'http://www.blogger.com/profile/ogoh-ogoh-muke-spamer', /* URL Profile spamer */
'http://www.blogger.com/profile/ogoh-ogoh-muke-spamer2' /* URL Profile spamer berikutnya */

];
for(var v=0; v<spamlist.length; v=v+1){
$("a[href='"+spamlist[v]+"']").each(function(){
$(this).closest(".comment_inner").find(".comment_body")
.replaceWith("<div class='.comment_body' style='color:red'>Pergilah kelaut ente, nyelem dan jangan timbul lagi!!!</div>"),
$(this).replaceWith("<span style='color:red'>BANNED USER!</span>");
})}
//]]>
</script>

untuk kata - kata yang akan di tampilkan bisa sobat ubah dengan sesuai keinginan, ganti saja "Pergilah kelaut ente, nyelem dan jangan timbul lagi!!!" dengan kalimat milik anda sendiri.

jquery di atas di terapkan untuk komentar hack seperti blog ini untuk sobat yang menggunakan struktur komentar lama silahkan ubah class milik komentar lama. class komentar yang bisa sobat ganti yaitu

ganti class comment_inner dengan comment-block dan class comment_body dengan class comment-content pastikan semua sudah sobat ganti agar bisa berjalan dengan baik.

demikian share kali ini dari saya semoga berguna, kali ini blog sobat bisa bebas spamer...

Blogger template responsive DB Droid


Share kali ini adalah template DB Droid tempilannya cocok untuk blog personal, berikut fiturnya

Fitur yang ada di Templat DB Droid:

  1. Responsive
  2. SEO
  3. Recent Comment notifikasi
  4. Font awesom
  5. Posting costume homepage
  6. Thread Comment
  7. Num Page
  8. Hide search box
  9. Fixed Menu/sticky menu
  10. Siycky widget
  11. Show hide emo, konverter,
  12. Post box author
  13. Share button
  14. Light box
  15. Related Post

Pengaturan Template:

Template ini menggunakan fitur thumbnail yang hanya muncul di halaman depan atau beranda memakai tag konditional yang di eksekusi dari class separator, jika anda membuat posting silahkan memberi dua gambar untuk fitur ini. caranya cukup mudah dan bisa dilihat dalam editor posting HTML ketika anda mengupload gambar posting akan muncul kode seperti berikut jika di lihat dari editor HTML posting:

<div class="separator" style="clear: both; text-align: center;">
<a href="url gambar" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="url gambar" height="315" width="320" />
</a>
</div>

kemudian untuk gambar kedua hilangkan class separator di atas sehingga menjadi seperti berikut

<div style="clear: both; text-align: center;">
<a href="url gambar" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="url gambar" height="315" width="320" />
</a>
</div>

langkah ini di buat agar gambar kedua muncul di halaman posting.

jika anda ingin menghilangkan trik ini, silahkan cari kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.thumbnail {display:none}
#blog-pager {font-weight:400;font-size:20px;}
#blog-pager a{color:#2c3e50}
#blog-pager a:hover{color:#c34755; text-decoration:none}
.breadcrumbs{background:#6699cc;padding:12px 20px 12px 65px;font-size:13px;color:#fff;border-radius:4px 4px 0px 0px;margin-bottom:-19px;position:relative;}
.post {margin:0 0 1.5em;padding:2.5%;background-color:#fff;border-radius:0px 0px 5px 5px;overflow:hidden;}
.separator{display:none;}
</style>
</b:if>

lalu hilangkan .separator{display:none;} dari kode di atas.

Pengaturan sticky menu.

Cari kode di bawah ini pada template menggunakan cara cepat Ctrl + F

<div id='top-menuwrapper'>
<div id='top-menuwrap'>
<div id='top-menu'>
<div class='logo'>
<a href='/'><img alt='Dafin Blog' src='url logo anda'/></a>
</div>
<ul>
<li>
<div class='search-hide' title='klik untuk membuka kotak pencarian'><i class='fa fa-search'/> Cari</div>
<div id='search-box'>
<form action='/search' id='cse-search-box' method='get'>
<input id='search-text' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari di sini ...'/><button id='search-button' type='submit'/>
</form>
</div>
</li>
<li><a href='#' target='_blank'><i class='fa fa-circle-o'/> About</a></li>
<li><a class='lightbox' data-options='{&quot;width&quot;:915, &quot;height&quot;:557, &quot;iframe&quot;: true}' href='#'><i class='fa fa-circle-o'/> Contact</a></li>
<li><a href='#'><i class='fa fa-circle-o'/> Sitemap</a></li>
<li><a class='current event-see'><i class='fa fa-info'/> Read me</a></li>
<li><div id='notif' title='Buka komentar terbaru'/><div id='notif-db' title='Tutup Notifikasi'/><div id='show-total'/></li>
</ul>
</div>
</div>
</div>

Sesuaikan semua link di menu tersebut sesuai kebutuhan anda, misalkan seperti beriikut:

<li><a href='http://www.contoh.com'><i class='fa fa-circle-o'/> About</a></li>

jangan lupa untuk mengganti logo dengan logo milik anda.

Pengaturan Menu Navigasi.

Cari kode di bawah ini:

<div id='menu-wpapper'>
<nav id='autonav'>
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='/search/label/HTML?&amp;amp;max-results=5'>HTML</a></li>
<li><a href='/search/label/SEO?&amp;amp;max-results=5'>SEO</a></li>
<li><a href='/search/label/CSS?&amp;amp;max-results=5'>CSS</a></li>
<li><a href='/search/label/Widget?&amp;amp;max-results=5'>WIDGET</a></li>
<li><a href='/search/label/Javascript?&amp;amp;max-results=5'>JAVASCRIPT</a></li>
<li><a href='/search/label/Trik?&amp;amp;max-results=5'>TRIK</a></li>
<li><a href='/search/label/Template?&amp;amp;max-results=5'>TEMPLATE</a></li>
<li><a href='/search/label/Komentar?&amp;amp;max-results=5'>KOMENTAR</a></li>
<li><a href='/search/label/Templateku?&amp;amp;max-results=5'>DB Template</a></li>
<li><a href='/p/blog-page_1466.html'>KODE WARNA</a></li>
<li><a class='db-oot' href='/p/out-of-topic_18.html'>OOT</a></li>
</ul>
</nav>
</div>

ubah semua yang anda perlukan pada kode

<li><a href='/search/label/HTML?&amp;amp;max-results=5'>HTML</a></li>

pada kode ?&amp;amp;max-results=5 adalah trik untuk membatasi hasil pencarian per label.

Pengaturan warna posting di homepage sesuai label.

Untuk trik ini, saya menggunakan trik tag conditinal label, jadi tidak memakai javascript. jangan lupa untuk mengatur cssnya sesuai warna yang anda inginkan dengan mencari kode di bawah ini:

.home-index.Handphone {background:#a9d86e;}
.home-index.Tablet {background:#009900;}
.home-index.Teknologi {background:#006699;}
.home-index.Internet {background:#333366;}
.home-index.Nootbook {background:#663300;}
.home-index.Javascript {background:#82a5ce;}
.home-index.CSS {background:#dfbc42;}
.home-index.Trik {background:#990099;}
.home-index.Komentar {background:#98cdca;}
.home-index.HTML {background:#24887B;}

ubah nilai warna pada kode background:xxxx; diatas.

Widget komentar.

Buka tata letak templat di blog anda, lalu pilih gadget Javascript/HTML tambahkan kode ini kedalamnya:

<style type="text/css" scoped="">
.sakahayang_recent_comments{}
ul.sakahayang_recent_comments{font-family:&#39;Oswald&#39;,sans-serif;list-style:none;margin-top:0px;padding:0;}
.sakahayang_recent_comments li{ padding:4px 10px 4px 0px !important;list-style: none; display:block;}
.sakahayang_recent_comments li .avatarImage{display:block;width:35px;height:35px;padding:4px;background:#ccc;box-shadow:0 1px 1px #111;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{border-radius:10px;}
.sakahayang_recent_comments li img{padding:0px;overflow:hidden;display:block;}
.sakahayang_recent_comments li span{margin-top:-4px;color: #666;display: block;font-size: 13px;font-style: italic;line-height: 1.2;}
.sakahayang_recent_comments li a:hover { color:#808000; text-decoration: none; }
.sakahayang_recent_comments li span{margin-top:-8px;color: #666;display: block;font-size: 13px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 35,
roundAvatar = true,
characters = 30,
defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJn7J8UjhiulbEynJC6RkFr0S6dSdLhB-FofatdeJY3HgVJ5lpyKL2gC_LXF3eyQ3x88yQCcSuhKzD0_ZxGDgDqisPeODQgjeBpsBtECM1grfSeokwQnmSw8wuBasZYVTCfgOhsiBvw7A/s1600/anonymous.png",
hideCredits = true;
maxfeeds=20,
adminBlog='Dafiin Defandaky';
//]]>
</script>
<script type="text/javascript" src="http://google-js.googlecode.com/files/rcno.js"></script>
<script type="text/javascript" src="http://defandaky.blogspot.com/feeds/comments/default?alt=json&amp;callback=sakahayang_recent_comments&amp;max-results=20">
</script>

jangan lupa untuk menyimpannya.

Pengaturan sticky widget.

Cari kode di bawah ini:

<div id='meneng'>
<div>
<a class='twitter-follow-button' data-lang='id' href='url twitter'>Ikuti @D,Blog</a>
</div>
<script type='text/javascript'>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='id google+' data-rel='author'/>
<div class='g-plusone' data-count='true' data-href='http://defandaky.blogspot.com/' data-size='medium' data-width='100'/>
<a href='http://whos.amung.us/stats/p6vcrkz53rzl/' target='_blank'><img alt='online' src='http://whos.amung.us/swidget/p6vcrkz53rzl'/></a>
</div>

ubah semua link akun media sosial yang anda miliki. pada widget amoungus ganti dengan id milik widget amoungus anda.

Pengaturan Dialog.

Cari kode di bawah:

<div id='intro-db-dialog'>
<div class='tutup'><i class='fa fa-power-off'/></div>
<p>...teks anda....</p>
</div>

Jika anda sudah menemukan silahkan tulis teks yang anda ingin pada <p>...teks anda....</p>.

Pengaturan author box

Untuk author box temukan kode di bawah ini:

<div class='admin-db'>
<h1>Author : <a href='https://plus.google.com/u/0/102331886274459115104/posts'>Dafin Defandaky</a> - Dafin Blogger Admin </h1>
<div class='kontainer'>
<img alt='admin' height='85' src='https://lh6.googleusercontent.com/-PGirmW8eUT4/AAAAAAAAAAI/AAAAAAAABxE/qlhWrXMUf9w/s120-c/photo.jpg' width='80'/>
Saya hanya seorang blogger biasa yang mencoba berbagi tentang hal yang sedikit banyak telah saya pahami dan pelajari untuk sobat semua, terimakasih sudah membaca dan salam blogging.
<p><span style='float:left;text-align:left;'>
Temukan saya di: <a href='https://twitter.com/DDefandaky' rel='nofollow' target='_blank'>Twitter</a> - <a href='http://www.blogger.com/profile/09882050325461413449' rel='nofollow' target='_blank'>Google Plus</a> - <a href='http://www.blogger.com/follow-blog.g?blogID=8533049206313896611' target='_blank'>Follow this blog</a></span>
</p>
<div style='clear:both;'/>
</div>
</div>

ubah https://plus.google.com/u/0/102331886274459115104/posts dengan url anda dan nama anda, sesuaikan akun twitter, google+ dan facebook. anda juga bisa merubah teks yang ada di dalam author box ini sesuai dengan keinginan.

widget amoung tanpa javascript


Memasang widget amoung memang bukan hal yang rahasia bagi blogger, widget among berguna sebagai counter banyak user yang sedang mengunjungi laman di blog kita tapi mungkin penggunaan javascript dari widget ini menambah beratnya dan waktu memuat laman kita dalam blog apalagi blog sobat yang sdah memasang banyak javascript.

untuk itu kali ini saya akan mengeshare cara memasang widget amoung tanpa menggunakan javascript itung itung sedikit mengurangi beban load atau muat pada blog sobat blogger sekalain.

langsung saja kita bahas triknya, silahkan ikuti langkah di bawah ini:

Buat sobat blogger yang belum memiliki widget amoung silahkan daftar di wibsitenya secara gratis di whos.amung.us
Setelah itu copy javascriptnya lalau ambil id yang ada dalam javascript tersebut, lihat pada gambar berikut


gunakan kode di bawah ini sesuai selera anda dan letakkan di widget sobat

online
kodenya

<a href="http://whos.amung.us/stats/kode-anda"><img src="http://whos.amung.us/widget/
kode-anda" /></a>

online
kodenya

<a href="http://whos.amung.us/stats/kode-anda"><img src="http://whos.amung.us/cwidget/kode-anda/ff0000ffffff/" /></a>

online
kodenya

<a href="http://whos.af/mung.us/stats/kode-anda"><img src="http://whos.amung.us/cwidget/kode-anda/ffc20e000000/" /></a>

online
kodenya

<a href="http://whos.af/mung.us/stats/kode-anda"><img src="http://whos.amung.us/swidget/kode-anda" /></a>

agar valid dalam validator html5, berikan gambar dengan atribut alternatif dengan alt seperti berikut ini:

<a href="http://whos.af/mung.us/stats/kode-anda"><img alt='online' src="http://whos.amung.us/swidget/kode-anda" /></a>

simpan dan lihat hasilnya...

demikian saja share saya kali ini, tentang memasang widget amoung tanpa javascript semoga berguna.

Kerangka template ala Dafin Blogger


Selamat pagi sobat blogger iseng - iseng membuat kerangka template buat sobat yang suka utak - atik template saya share biar jadi bahan percobaan, tinggal tambahkan beberapa bagian dan hasilnya bisa sobat lihat sendiri tentunya sesuai selera. untuk percobaan demo kerangkanya silahkan lihat demonya saja ya di buka sana sini dan di lihat kalau sobat tertarik.

untuk html templatenya silahkan copy saja di bawah ini

/* kerangka template blogger by dafin */

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'><link href='https://plus.google.com/101920216061028840078' rel='author'/></b:if>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

/* meta tag seo disini */

<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
#db-on_header-wrapper {width:21%}
#db-left_page-bar {width:73%;float:left}
#db-artikel_main-wrapper {width:75%;float:right;}
#db-widget_sidebar-right {width:24.2%;float:right}
*/]]></b:skin>
<style type='text/css'>
/*
Blogger Template Style
Name : Dong dang dung
Author : Dafin
Url : http://defandaky.blogspot.com/
Url : http://www.yuuhu.info
Google+ : http://www.blogger.com/profile/09882050325461413449
*/

#navbar-iframe, #ContactForm1 {height:0px;visibility:hidden;display:none;}
header, nav, section, aside, article, footer {display:block;}
body, .body-fauxcolumn-outer {background:#272f37;margin:0;padding:0;color:#999;
font:normal normal 13.5px/20px &quot;Roboto_Regular&quot;,&quot;Roboto&quot;,&quot;Roboto Regular&quot;,&quot;Franklin Gothic Medium&quot;,&quot;Franklin Gothic Book&quot;,&quot;Lucida Sans&quot;,&quot;Lucida Sans Unicode&quot;,Helmet,Freesans,Sans-Serif;text-align:left;height:100%;min-height:100%;}
a:link {color:#5886a7;text-decoration:none;}a:visited {color:#5886a7;text-decoration:none;}a:hover {color:#74a2c3;text-decoration:none;}a img {border-width:0;}

/* header */
#db-on_header-wrapper {float:left;padding:2% 2% 2% 1%;background-color:#2E3740;width:12%;color:white;position:absolute;left:0;top:50px;}
#header { text-align:left;color:#999;margin:0;}
#header h1 {margin:0;padding:0;font-size:240%;font-weight:normal;text-transform:uppercase;font-family:Oswald, Arial, Sans-Serif;}
#header a {color:#999;text-decoration:none;}
#header a:hover {color:#999;}
#header .description {text-align:center;margin-top:10px;padding:0;line-height:1.4em;color:#999;}

/* Navigation */
#db-fixed-nav {width:100%;font-weight:normal;float:left;font-family: Oswald, Arial, Sans-Serif;text-transform:uppercase;font-size:100%;}
#db-fixed-nav ul {height:50px;margin:0;padding:0;width:100%;float:left;background-color:#336699;}
#db-fixed-nav li {list-style:none;display:inline;margin:0;padding:0;}
#db-fixed-nav li a {line-height:50px;text-decoration:none;color:#999;padding:15px;transition:.4s ease-out;}
#db-fixed-nav li a:hover {line-height:50px;background-color:#74a2c3;color:white;}

/* Wrapper */
#db-show_content-wrapper {width:100%;background:none;margin:0 auto;padding:0;text-align:left;}
#db-left_page-bar {width:73%;float:left;background-color:#2E3740;background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVEhsfbdfHqC4aQl-HKsB6FKy6qR-s27ByJyF6po0jvlI0Kvu48T9LP-Zojrq8z09b-yMY3PFuCiQ1nbSkTzQQ5YVnxdw4HyBP011Sz6ZwL-L84tcNBZ_-qcLJunqANicNEt7rbDGS_9s/s1600/sprite.png&#39;);background-repeat:repeat-y;background-position:21.7%;border-bottom:5px solid #272f37;}
#db-artikel_main-wrapper {width:75%;padding:1.5%;float:right;background-color:#fff;word-wrap:break-word;overflow:hidden;}
#db-widget_sidebar-right {float:right;padding:1%;}
#db-widget_sidebar-right {background-color:#2E3740;width:24.2%;word-wrap:break-word; overflow:hidden;}
#db-widget_sidebar-right h2 {font-family: Oswald, Arial, Sans-Serif;font-size:110%;letter-spacing:0;color:#999;padding:5px 0 10px 0;margin:0px 0px 10px;font-weight:normal;text-align:left;border-bottom: 5px solid #ccc}
#db-widget_sidebar-right .widget-content {padding:0;margin:0 10px;}

/* Footer */
#db-credit-footer {width:auto;clear:both;margin:0 auto;padding:1%;color:white;background-color:#708090;border-top:1px solid #708090;text-align:center;display:block;}
#db-credit-footer a{color:#009933;}
#db-credit-footer a:hover{color:#ff6600;}

/* Posts */
.date-header {margin:1.5em 0 .5em;display:none;}
.post {margin:0 0 1.5em;padding:2.5%;background-color:#fff;border-radius:5px;overflow:hidden;}.post h2 {margin-top:0px;padding:0 0 4px;font-size:240%;font-weight:normal;line-height:1.4em;color:#222;font-family:Gnuolane, Oswald, Arial, Sans-Serif;}.post h2 a, .post h2 a:visited, .post h2 strong {display:block;text-decoration:none;color:#4a4a4a;}.post h2 strong, .post h2 a:hover {color:#c94e5c;}.post h4{font-family:Gnuolane, Oswald, Arial, Sans-Serif;font-size:180%;color:#222;margin:40px 0 15px;padding:0;font-weight:normal}.post .post-title {margin-bottom:15px;margin-top:15px;}.post-body {margin:0 0 .75em;line-height:1.4em;}.post-body img{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8TQrp-v-We_Mg9MbtjtHWEc0AjkNek1wDDfXkLHQ4_N4AYsXZcXuwO5S_iasZnLaKnbFoibHOzXl_3j1ncegLqfGLxYAKF8ZLJezgItUFXPAZvaR02ahhGtM6eScEezGW2ColVMQdlg/s1600/img+loader.gif)no-repeat 50% 50%}.post-body h3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4A1V8L4wxgJLPq5UrXgEMpc9Q5TFXhpKbG4ghm2FWAjfY7W_-ob28EEEzlx3lbhe1BF511JYrXoY-x328FA2ypHWnPzQet20o7zyRVgFd3HghMjz1-M5KUhhJDCX9UUeo10wxDXmbH4g/s1600/bottom-line.gif) left bottom no-repeat;font-size:200%;font-weight:400;margin:5px 0;padding-bottom:12px;font-family:Gnuolane, Oswald, Arial, Sans-Serif;}.post-body h3 code {font-size:100%}.post-body h4{font-size:180%;font-weight:normal;margin-top:20px !important;margin-bottom:10px;padding-bottom:12px;margin-top:0;}.post-body img {max-width: 98%;border-width: 0;padding: 0;margin-right: 10px;border:1px solid #b1b1b1;box-shadow:0 0 5px #aaa;page-break-after:always;}.separator img {width:430px;height:auto;position:relative;}.post-footer {margin:.75em 0;color:#999999;letter-spacing:.1em;line-height:1.4em;font-size:80%;padding: 5px 0px 5px 0px;margin: 30px 0px 15px 0px;display:none;}.post-footer ul{margin-left:0;}.comment-link {margin-left:.6em;}.tr-caption-container img {border:none;padding:0;}
table, td, th{border:1px solid #ddd;}

/* share button */
.share {font-family:Oswald, Arial, sans-serif;font-size:12px;padding:10px 0 8px 0;margin-top:25px;position:relative}.share a, .share a:hover {color:#fff}
.fb-db-sf, .tw-db-sw, .gp-db-sg {text-align:center; padding:3px 12px; font-size:12px; border-radius:3px}.fb-db-sf { background-color:#1358BA}.tw-db-sw { background-color:#03C7E9}.gp-db-sg { background-color:#FE1635}.fb-db-sf:hover, .tw-db-sw:hover, .gp-db-sg:hover {background-color:#547279; transition:background-color 0.7s ease-out 0s}.share::after {content:&quot;&quot;;width:190px;height:30px;position:absolute;bottom:-320px;left:80px;background:#fff;}

/* Headings */
h5 {margin:0;padding:0;}

/* Sidebar */
.sidebar { color:#999;line-height:1.5em;}
.sidebar ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.sidebar li {margin:0;padding-top:.5em;padding-right:0;padding-bottom:.8em;line-height:1.6em;color:#f2f2f2;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtxLJ-vJPcF_JIO45cQIysvvSTqfiIoWviL9z5D_KuYtvb00S2zSwfzMlJTLWiuOHlaScoykAy853zLuoewZG1TcaaCJ_R5PmyS9ik2NYcIplWgd7LSlIyc8nFyBumpjrKp5miNfsZUs/s1600/border-back.png) repeat-x bottom left;}
.sidebar .widget, .main .widget { margin:0 0 .5em;padding:0 0 .5em;}
.main .Blog { border-bottom-width:0;}

/* label */
#Label1 {padding-bottom:10px}
#Label1 ul {margin:10px 0 20px -10px}
#Label1 li {float: left;display: inline;margin: 0 3px 3px 0;padding: 0 4px;height: 22px;line-height: 22px;color: #aaa;background-color: #0088b2;transition: background-color 0.5s linear;}
#Label1 li a {padding: 0 4px;color: #fff;}
#Label1 li:hover {background-color: #008888;}
#Label2 li {text-align:right;}
#Label2 li a {color: #bbb;text-decoration:none;}
#Label2 li a:hover, #Label2 li a:active, #Label2 li a:focus {color: #f2f2f2;text-decoration:none;}
#Label2 li .label-counter {float:left;background-color:#4b535b;color:#999;line-height:1;margin:2px 0 0;padding:3px 5px;border-radius:2px;text-align: center;font-size:11px}
#Label2 li:hover .label-counter {background-color:#5498C9;color:white}

/* Contact Form Container */
.contact-form-widget {width: 754px;max-width: 626;margin: 0 auto;padding: 10px;background: #F8F8F8;color: #000;border: 1px solid #C1C1C1;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);border-radius: 10px;}.contact-form-name, .contact-form-email, .contact-form-email-message {width: 750px;max-width: 750px;margin-bottom: 10px;}.contact-form-button-submit {border-color: #C1C1C1;background: #E3E3E3;color: #585858;width: 20%;max-width: 20%;margin-bottom: 10px;}.contact-form-button-submit:hover{background: #4C8EF9;color: #ffffff;border: 1px solid #FAFAFA;}

/* Pesan Komentar */
#threaded-comment-form p{position: relative;color:#999 !important;padding: 10px;font-size: 14px;font-weight:400;line-height: 1.6em;margin-top: 10px;border-radius:2px;background:#54687c;width:95%;}#blog-pager-newer-link {float:left;}#blog-pager-older-link {float:right;}#blog-pager {text-align:center;padding-right:2%;padding-top:2%;padding-bottom:5%;font-weight:normal;margin-bottom:20px;}.feed-links {display:none;}.home-link{display:none}#blog-pager-newer-link {width:100px;float:left; text-align:left;font-size:18px}#blog-pager-older-link {width:100px;float:right; text-align:right;font-size:18px}

/* Profile */
.profile-img {float:left;margin-top:0;margin-right:5px;margin-bottom:5px;margin-left:0;padding:4px;border:1px solid #cccccc;}.profile-data {margin:0;text-transform:uppercase;letter-spacing:.1em;font:normal normal 78% Cuprum;color:#999999;font-weight:bold;line-height:1.6em;}.profile-datablock {margin:.5em 0 .5em;}.profile-textblock {margin:0.5em 0;line-height:1.6em;}.profile-link {font:normal normal 78% Cuprum;text-transform:uppercase;letter-spacing:.1em;}

/* home page */
img {max-width:100%;height:auto;width:auto;text-align:center;}.home-index{border:none;box-shadow:none;width:250px;height:175px;text-align:center;float:left;margin:-32px 15px -30px -22px;position:relative;background:#993333;border-radius:5px 0 0 5px}.home-index img{padding:0;width:100px;height:100px;border:5px solid #bbb;border-radius:100px 100px;margin-top:33px;}.home-index img:hover{border:5px solid #000;border-radius:100px 100px;}.home-index:before{content:&quot;&quot;;width:0;height:0;position:absolute;top:45%;right:0;border:7px solid transparent;border-color:transparent #fff transparent transparent;}.home-index span{font-size:26px;line-height:90px;font-weight:bold;color:#eee}

/* Page Navigation */
#showpageArea {font:normal normal 11px Verdana, Geneva, sans-serif;margin-top:0;padding-top:0;}.showpageOf{display:none;margin:0;}.showpageArea a {font-size:14px;font-weight:bold;text-decoration:none;}.showpageNum a,.showpage a {background:#1966C1;margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap;}.showpageNum a:hover,.showpage a:hover {background:#B22222;color:#e4905a;text-decoration:none;}.showpageOf{margin:0 8px 0 0;background:#1966C1;line-height:30px;padding:3px 10px;color:#FFF;}.showpagePoint {background:#2F4F4F;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;color:#e4905a;font-weight:bold;}

/* infos */
#comment-butde{color:#222;margin-right:10px;padding:3px 15px;background-color:#ff0000;font-size:12px;font-family: &#39;Abel&#39;, sans-serif;font-weight:400;text-transform:none;filter:progid:.Microsoft.gradient(GradientType=0, startColorstr=&#39;#46a0fb&#39;, endColorstr=&#39;#2c87e2&#39;);background-image:linear-gradient(top, #46a0fb 0%, #3892ed 50%, #2c87e2 100%);border-radius:4px;box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #333;text-shadow:0px -1px 0px rgba(0,0,0,0.3);color:#ffffff;text-decoration:none;outline:none;}#comment-butde a{color:#222 !important;}#comment-butde a:hover{text-decoration:none;}#comment-butde:hover {background-color:#860000;filter:progid:.Microsoft.gradient(GradientType=0, startColorstr=&#39;#3892ed&#39;, endColorstr=&#39;#2379cf&#39;);background-image:linear-gradient(top, #3892ed 0%, #2c87e2 50%, #2379cf 100%);color:#ffffff;}.add-comment {background:#bbb;text-decoration: none;color:#fff;border:1px solid #ccc;border-radius:5px;padding:3px 6px;margin-top:-10px;}

/* nav */
.breadcrumbs{background:#6699cc;padding:12px 20px 12px 65px;font-size:13px;color:#fff;margin-bottom:19px;position:relative;}.breadcrumbs a{color:#fddbd8;text-decoration:none;}.breadcrumbs a:hover{color:#fff;text-decoration:none;}.breadcrumbs:before{content: &quot;\f041&quot;;font-family:fontAwesome;font-size:22px;font-style: normal;background-color:#0099cc;color:#fff;border-radius:4px 0 0 4px;top:0;left:0;padding:12px 20px;position:absolute;}

/* post */
.post-label{position:absolute;top:15px;right:0;z-index:99;}.post-label a{font-family: &#39;Oswald&#39;, Verdana,Sans-serif;text-transform:uppercase;background-color:#0099ff;color:#fff;font-size:10px;display:block;float:left;padding:4px 8px;}.post-label:first-child a {border-radius:5px 0 0 0}.post-label a:hover{background:#996600;}.post-info-icon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-oH67rByXKDgg1DvqAH-WGdEx5P34iUSo578xcWpZbgy2WtYHDV-d9gLpo4oAUHIX14hUdZsrchHGirt9lY-txAfGHTYF98g3v9kjuIMlC1pZa_pHKymquiwWy9cPnZiitBFs8nGW1dw/s1600/icnall.png);background-repeat:no-repeat;}.post-info{display:block;margin:5px 0 5px 0px;padding:3px 0;color:#999;line-height:1.6em;border-top:1px dotted #e2e2e2;border-bottom:1px dotted #e2e2e2;font-size:11px;overflow:hidden;}.post-info a{color:#999;}.post-info-icon{display:inline-block;float:left;margin:0 12px 0 0;}.post-info a:hover{color:#000;}.jam{background-position:0 -98px;height:16px;padding:0 0 0 17px}.komentar{background-position:0 -132px;height:16px;padding:0 0 0 17px;}.label{background-position:0 -166px;height:16px;padding:0 0 0 17px;}.admin{background-position:0 1px;height:16px;padding:0 0 0 17px;}.tanggal{background-position:0 -32px;height:16px;padding:0 0 0 17px;}div#widget_bounds{font-family:Arial, Sans-serif}

/* Related Posts */
.related-post{margin:2em auto 0;font-size:13px;background:#fff;border-bottom:1px solid #ccc}.related-post h4{font-size:14px;margin:0 0 .5em;background:#6699cc;color:#fff;padding:14px 20px 14px 75px;font-weight:normal;position:relative;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase}.related-post h4:before{content:&quot;\f074&quot;;font-family:fontAwesome;font-size:22px;font-style:normal;background-color:#0099cc;color:#fff;border-radius:4px 0 0 0;top:0;left:0;padding:13px 20px;position:absolute}ul.related-post-style-1{padding-left:0!important;margin-top:-12px}.related-post-style-1 li{list-style:none;padding:15px;border-top:1px solid #eceef5}.related-post-style-1 li a{color:#79798d;text-decoration:none}.related-post-style-1 li a:hover{color:#ff6600;text-decoration:none}.related-post-style-1 li:before{content:&quot;\f08e&quot;;font-family:fontAwesome;color:#c7cbd4;font-style:normal;top:0;left:0;margin-right:13px}.jump-link{display:none}.admin-db {display:block; width:auto; border:1px solid #ccc;padding:0; margin:20px 0 10px 0; font:normal 12px Arial,Sans-Serif; color:#222}.admin-db .kontainer{padding:5px}.admin-db h1{background:#3399cc; border:none; border-bottom:1px solid #C0C0C0; color:#fff; text-transform:normal; text-shadow:0 1px 0 rgba(0,0,0,0.4); font:bold 12px Arial,Sans-Serif; padding:5px 10px; margin:0 0 0 0; display:block}.admin-db h1 a{color:#FEEA83;text-decoration:none;}.admin-db img{width:70px; height:70px; margin:0 10px 0 0; float:left; border:0px solid #E6E6FA; padding:2px; background:#E6E6FA;}

/* komentar */
#comments {line-height:1.4em;margin: 60px 0 0 0;position:relative;background:#000000;border-radius:4px;padding:25px 17px 30px 17px;}
#comments h3 {font-size:14px;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase;font-weight:normal;left:0;top:-53px;background:#6699cc;color:#fff;width:85.8%;padding:13px 20px 13px 85px;position:absolute;}
#comments h3:before {content:&quot;\f0e6&quot;;font-family:fontAwesome;font-size:22px;font-style: normal;background-color:#0099cc;color:#fff;top:0;left:0;padding:13px 20px;position:absolute;}
#comments .db-form-comment{color:#fff;float:right;display:inline-block;background: #003300;padding: 2px 5px;font: bold 11px Roboto;text-transform: none;border-radius: 3px;position: relative;}
.comment_avatar_wrap{width:42px;height:42px;border: 1px solid #cfcfcf;background:#e0e0e0;padding:4px;text-align:center;margin-bottom:20px;}#comments .avatar-image-container {float: left;margin: 0 10px 0 0;width: 42px;height: 42px;max-width:42px;max-height:42px;padding: 0;margin-bottom:10px;}#comments .avatar-image-container img {width: 42px;height: 42px;max-width: 42px;max-height: 42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBU2foD7hJrOqwn6Eob0uj0AUgm_aEpN_Z4CuUPGBvpTtBafRtqVfwEuE00U267ISBTi60CYsd86zgihy_VJ3Uu397jH-29GNOZROM9o4QXqsteVsNYmMRmMMlv7pm6ui2NqtMYmPDB7_V/s1600/anon.jpg) no-repeat;}
.comment_name a {font-family:Oswald, Arial, Sans-serif;padding-bottom:10px;font-size:14px;text-decoration: none;}
.comment_admin .comment_name {font-family:Oswald, Arial, Sans-serif;padding-bottom:10px;font-size:14px;text-decoration: none;}
.comment_admin .comment_date {font-weight: normal;font-size:11px;}
.comment_name {font-family:Oswald, Arial, Sans-serif;padding-bottom:10px;font-size:14px;font-weight:normal;position:relative;}
.comment_service{margin-top:5px;}
.comment_date {color: #333;float:right;font-size:11px;font-weight:normal;}
.comment_date a{color: #a9a9a9;float:right;font-size:11px;font-weight:normal;}
.comment_date a:hover{color: #a9a9a9;text-decoration:none;}
.comment_body{margin-top:-72px;margin-left:65px;border: 1px solid #dcdcdc;background:#fff;padding:15px;color: #333;}
div.comment_inner.comment_admin{background:#394549;}
.comment_body p {line-height: 1.5em;margin: 5px 0 0 0;color: #333;font-size: 13px;word-wrap:break-word;padding-bottom:10px;}
.comment_inner {padding: 15px;margin: 5px 0 5px 0;background-color:#708090;}
.comment_child .comment_wrap {padding-left:5%;}
.comment_reply {display: inline-block;margin-top:8px;margin-left:-5px;padding: 1px 12px;color: #fff !important;text-align: center;text-decoration: none;border-radius: 2px;background: #555;font: 11px/18px sans-serif;transition: background-color 1s ease-out 0s;}
.comment_reply:hover {text-decoration: none !important;;background: #333;}
.unneeded-paging-control {display: none;}
#comment-editor {width:100% !important;background:#d9d9d9 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1iYaTg9T7UHoWh3xC4pob077b8W_GO2EIuGhDuvkvj9ZLd91jwcq7JeHsSSKULUoklW4-w1b3Huho8TUVErOktivzdeD4qdGEu6B5qoMZJAPrHpGYyIYCwXEE2dftf250sQaTaEiDr54/s1600/db-loader.gif&#39;) no-repeat 50% 30%;border-radius:4px;margin-bottom:20px;position:relative;}
.comment-form {max-width: 100% !important;}
.comment_form a {text-decoration: none;text-transform: uppercase;font-weight: bold;font-family: Arial, Helvetica, Garuda, sans-serif;font-size: 15px;}
.comment_form a:hover {text-decoration: underline;}.comment_reply_form {padding: 0 0 0 70px;}.comment_reply_form .comment-form {width: 100%;}
img.comment_emo {margin:0;padding:0;vertical-align:middle;}
.comment_emo_list{display:none;clear:both;width:100%;}.emo-rapper-db {background:#fff;border-radius:5px;margin-bottom:5px;}
.comment_emo_list .item {float: left;text-align: center;margin: 10px 5px 10px 0;height: 40px;width:30px;color:#999;}
.comment_emo_list span {color:bbb;display: block;font-weight: normal;font-size: 11px;letter-spacing: 1px;}.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto;}
.comment_img {max-width:100%!important;}
.comment_header{width:50px;}#respond {overflow: hidden;padding-left: 10px;clear: both;}
.comment_avatar img{width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBU2foD7hJrOqwn6Eob0uj0AUgm_aEpN_Z4CuUPGBvpTtBafRtqVfwEuE00U267ISBTi60CYsd86zgihy_VJ3Uu397jH-29GNOZROM9o4QXqsteVsNYmMRmMMlv7pm6ui2NqtMYmPDB7_V/s1600/anon.jpg) no-repeat;}
.comment-delete img{float:right;margin-left:15px;margin-top:3px;}.comment_author_flag {display:none;}iframe{border:none;overflow:hidden;}.deleted-comment {background:#daabab url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-tqM5qjuX8l2DZ4XPCPbJwkplD8VdemvAlyrh8W5qQw80OsDiIzkbRfRJHBJM-jD8Hltg8DWRIdiFMjUNyruPC6JcFpVr_SOHznFwE4vLsoJ1NYDdzrHGN9aSUsgk3A6_jThN904fEqM/s1600/tempat-sampah.png) no-repeat 2% 50%;color:#fff;line-height: 22px;padding:10px 15px 10px 45px;margin:5px 0;display: block;font-size:13px;}.comment-form p { background: #6d6d6d;padding: 10px 10px 14px 10px;margin: 5px 0 5px 0;color: #e5eff0;font-size: 13.6px;line-height: 20px;width:97,8%;border-radius:5px;position:relative;}div.comment_avatar img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKrrX2mG-uE1FAMm95arz7MKu1qsN-eVcp5Z0_2kU_NSClG2ZPrVinXZDB6IxcNmdFR44b3ZIFjN-2OElRDGaC0YfA-PknDrIMoALCfeM7K12JJzpZL8Tzj-YcmWnjno3lavOzRiOXUp0/s45-c/gravatar.png);}div:target .comment_inner{background:#3399cc;transition:all 15s ease-out;}div:target .comment_child .comment_wrap .comment_inner{background:#0099cc;}.center {text-align:center;}img.cm-prev {max-width:400px;margin:10px auto;page-break-after:always;display:block;text-align:center !important;}.comment_admin .comment_author_flag {display:inline;background:#800000;font-size:13px;font-weight:normal;padding:2px 6px;margin-left:8px;color:#fff;border-radius:4px;text-transform:uppercase;letter-spacing:.1em}.db-comment-thanks {font-family:Arial, sans-serif;font-size:12px;right:25px;margin-top:-73px;padding:6px 12px;background:#f8f8f8;color:#999;border:1px solid #c9cacb;border-radius:3px;position:absolute;}

/* error page */
#error-db {background-color:#e9e9e9;position:fixed !important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999;}
#error-db-suit {margin:11% auto;}#error-db-suit .box-404-db {width:200px;height:200px;background:#1966C1;color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative;}#error-db-suit .box-404-db::after {content:&quot; &quot;;width:0;height:0;bottom:-8px;border-color:#1966C1 transparent transparent;border-style:solid;border-width:9px 9px 0;position:absolute;left:47%;}#error-db-suit h1 {text-transform:uppercase;}#error-db-suit p {line-height:0.7em;font-size:15px;}

@media screen and (max-width:1024px) {
#db-show_content-wrapper {width:100%;}
#db-artikel_main-wrapper {float:left;width:97%;}
#db-on_header-wrapper {display:none;}
#db-left_page-bar {width:73%;}}
</style>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.post h2{font-size:140%;margin:0px; !important;margin-bottom:5px !important;font-weight:400;line-height:1.4em;color:#4a4a4a}
.post{font-weight:400;font-size:13px;border:1px solid #ccc;padding-bottom:5px;box-shadow: inset 0 -1px 0 rgba(163, 163, 163, 0.8), 0 1px 3px rgba(163, 163, 163, 0.4);}
#blog-pager{width:100%}
.post .post-title {margin-bottom:15px;margin-top:0px;}.footer-wrapper {display:none;}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#blog-pager {font-weight:400;font-size:20px;}
#blog-pager a{color:#2c3e50}
#blog-pager a:hover{color:#c34755; text-decoration:none}
.breadcrumbs{background:#6699cc;padding:12px 20px 12px 65px;font-size:13px;color:#fff;margin-bottom:-10px;position:relative;}
.post {margin:0 0 1.5em;padding:0;background-color:#fff;border-radius:0px 0px 5px 5px;overflow:hidden;}
</style>
</b:if>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<link href='https://googledrive.com/host/0B05MjHQkbOjhekNlaHNPajU3OHc' rel='stylesheet' type='text/css'/>
</head>
<body>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

/* edit menu navigasi di bawah ini */

<nav id='db-fixed-nav'>
<ul>
<li><a href='/'><span style='font-size:25px;margin-right:10px;vertical-align:middle'><i class='icon-home-alt'/></span>Home</a></li>
<li><a href='/'>About</a></li>
</ul>
</nav>

/* headernya silahkan di ganti */

<div id='db-page-onlist_outer-wrapper'>
<header id='db-on_header-wrapper'>
<div class='header section' id='header'>
<div class='widget Header' id='Header1'>
<div id='header-inner'>
<a href='/' style='display: block'>
<img alt='Dafin Blogger' id='Header1_db-done-img-pool' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIxGCtatSY_oet0kywPF98n62D0F1KDgoWoQoPYGqCpMhEA09EBGE5ezRxDsQXSQAmD1EQVa8b-oBP8fdIiC-Xb_ZDRIyA41JIQkuIy4wE0I9pReD3CnRUYLQ08a3JoTs9aEzl1XeU54/s1600/logodb.png' style='display: block;'/>
</a>
<div class='descriptionwrapper'>
<p class='description'><span>Sharing &amp; Care</span></p>
</div>
</div>
</div>
</div>
</header>
<div id='db-show_content-wrapper'>
<div id='db-left_page-bar'>
<div id='db-artikel_main-wrapper'>

/* konten blog sobat disini */

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script>
//<![CDATA[
function resizeThumb(parentID, size) {
var parent = document.getElementById(parentID),
image = parent.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
image[i].width = size;
image[i].height = size;
}
} resizeThumb('Blog1', 120);
//]]>
</script>
</b:if>
</b:if>
<!-- google_ad_section_end -->
</div>
<script type='text/javascript'>window.___gcfg = {&#39;lang&#39;: &#39;in&#39;};</script>
</div>
</div>

</div>


<aside id='db-widget_sidebar-right'>
<b:section class='sidebar section' id='sidebar-r' preferred='yes'/>
</aside>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>
<!-- end content-wrapper -->
<footer id='db-show_footer-wrapper'>
<div class='db-credit-footer-end section' id='db-credit-footer'>
Copyright &#169; 2014 <a id='db-credit' class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> all right reserved
</div>
</footer>
<!-- end outer-wrapper -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var postperpage=5;
var numshowpage=4;
var upPageWord=&quot; &#9668; &quot;;
var downPageWord=&quot; &#9658; &quot;;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1y\'>1z "+f+\' 1A \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1B"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ... \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1C">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\'...\'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}6 E=y.1D("E");6 18=y.1E("1F-1G");1h(6 p=0;p<E.P;p++){E[p].1j=5}4(E&&E.P>0){5=\'\'}4(18){18.1j=5}}C 1a(Q){6 R=Q.R;6 1k=K(R.1H$1I.$t,10);1g(1k)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1l("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=1J}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1l(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1m(\'1n\')[0];6 z=y.1o(\'m\');z.1p=\'1q/1r\';z.1s("T",B+"U/V/W?1t-1u="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1v(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1m(\'1n\')[0];6 z=y.1o(\'m\');z.1p=\'1q/1r\';z.1s("T",B+"U/V/W/-/"+n+"?1t-1u="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1v(z)}C 1b(Q){1c=Q.R.1K[0];6 1w=1c.1x.$t.F(0,19)+1c.1x.$t.F(1L,1M);6 1d=1N(1w);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}1O.9=1e}',62,113,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))
//]]></script>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-db'>
<div id='error-db-suit'>
<div class='box-404-db'>404</div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>

</div>
</div>
</b:if>
</body>
</HTML>

yang saya tandai adlah di mana sobat tinggal meletakkan yang di perlukan saja, mau di modifikasi sampai jreng juga silahkan pokoknya sesuai selera...

semoga berguna dan bermanfaat kerangka templatenya ... :-)

kerangka ini bebas anda gunakan dengan tidak menghapus creditnya

situs generator animasi loading


Salam sobat blogger, agak lama gak timbul buat posting dan sekarang saya mau shar daftar situs yang menyediakan animasi loading untuk blog sobat yang mungkin sedang sobat cari. buat sobat yang memerlukan di bawah ini adalah daftar situs penyedia aniasi loding yang tinggal kita gunakan langsung saja di kunjungi.

  • Preloaders.net

    Preloaders.net has a fantastic categorized collection of APNG and GIF AJAX loaders images. You can set your preloaders’ image type (support APNG & GIF), background (transparent is available) and foreground color, size with constrain proportion option, animation speed and many other options.
  • CSSLoad.net

    If you want to have an AJAX loading icon but don’t want to use an image to save HTTP request, this CSS3 loading spinner generator is for you. It makes use of of CSS3 transitions, transforms and CSS3 animation to achieve a “loading GIF” image effect.
  • spin.js

    spin.js is another spinner or preloader generator that doesn’t use any images. It used JavaScript for modern browsers and uses VML as fallback in old IEs to have a loading icon image effect. It doesn’t require any JavaScript library to work but it does have jQuery plugin which you might want to check out.
  • CanvasLoader Creator

    Heartcode CanvasLoader Creator is a free online tool which you can use to generate preloaders (spinners or throbblers). This loading icon generator uses the CanvasLoader UI Library – a lightweight JavaScript UI library which can be used to create spinners using the HTML5 Canvas object in modern browsers, or VML in older ones. Same with spin.js, no external images or CSS are required.
  • NETEYE Activity Indicator

    This is jQuery plugin that renders a vector-based, translucent activity indicator (spinner) using SVG or VML. No images or external CSS are required, works in all major browsers (including IE6), supports Alpha transparency, degrades gracefully and is highly configurable. Unfortunately, this doesn’t have a UI so you have to manually pass some options into your code.
  • Ajaxload

    Ajaxload.info is still in Beta and the only option for it’s loading icon that you can set is it’s background and foreground color. It has only a limited number of loading GIFs compared to Preloaders.net.
  • Chimply

    Chimply is in beta stage but it has also a nice collection of categorized Ajax loading icons (spinner and animated bar icons). Common settings/options include background and foreground colors, animation speed, width and size. You can download the generated loading icon in GIF & SWF formats.
  • Loading GIF

    Loading GIF Image Generator has some few, nice loading icons ready to download. Unlike most of the loading image generators, the only customization you can made on the loading image icon is it’s background and foreground color.
jadi silahkan sobat pilih mana yang menurut sobat menarik dan tentunya sesuai selera.
semoga bermanfaat...

Highlighter Language Autodetection


Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Syntax Highlighter Language Autodetection ini di blog anda.

jika sebelumnya anda sudah pernah memasang Syntax Highlighter sebaiknya css dan jsnya di pindahkan dulu agar tidak ada masalah nantinya. langsung saja

Struktur penggunaannya agar berbeda dari Syntax Highlighter yang pernah anda gunakan setiap bahasa memiliki kelas berbeda. coba lihat di bawah ini

    Java Script  ⇒ data-codetype="JavaScript" , code class="Javascript"
    HTML ⇒ data-codetype="HTML" , code class="HTML"
    JQuery ⇒ data-codetype="JQuery" , code class="JQuery"
    XML ⇒ data-codetype="XML" , code class="XML"
    CSS  ⇒ data-codetype="CSS" , code class="CSS"

Cara pemasangan Syntax Highlighter Language Autodetection

silahkan masuk ke editor Template kemudian pilih Edit HTML, copy css berikut

pre,i[rel="pre"]{
display:block;
padding:5px .5em 5px 1em;
font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
background-color:#e6e9f1;
position:relative;
overflow:auto;
word-wrap:normal;
white-space:pre
}
pre:hover,i[rel="pre"]:hover {
background-color: #DDE0E7
}
pre code{
display:block;
color:#111;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
letter-spacing:0;
white-space:pre
}
pre[rel="HTML"],pre[data-codetype="HTML"]{
border-left-color:#0B7E88
}
pre[rel="CSS"],pre[data-codetype="CSS"]{
border-left-color:#5DA028
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]{
border-left-color:#40627E
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]{
border-left-color:#40627E
}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"]{
border-left-color:#40627E
}
pre[rel="XML"],pre[data-codetype="XML"]{
border-left-color:#C44032
}
pre[rel*="+"],pre[data-codetype*="+"]{
border-left-color:#0B7E88
}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{
color:#00BB4B;font-style:italic
}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title{
color:#859900
}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{
color:#A60A0A
}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id{
color:#103197
}
pre .tag .title,pre .rules .property,pre .django .tag .keyword{
font-weight:bold
}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label{
color:#0499D3
}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata{
color:#cb4b16
}
pre .deletion{
color:#dc322f
}
pre .tex .formula{
background:#073642
}
pre.numbered{
border-left-width:2px;
padding-left:1em
}
pre .line-number,pre.numbered code{
display:block;
line-height:16px
}
pre .line-number{
float:left;
margin:0 1em 0 -1em;
color:#586E75;
border-right:2px solid #9B9DA1;
text-align:right;
min-width:35px
}
pre .line-number span{
display:block;
position:relative;
padding:0 .5em 0 1em
}
pre .line-number span:nth-child(even){
background-color:#FAFAFA
}
pre .line-number span em{
position:absolute;
bottom:-1px;
left:100%;
background-color:red;
padding:0 2px 1px 2px;
border:1px solid black;
font-style:normal;
color:black;
display:none
}
pre .line-number span:hover em{
display:block
}
pre .line-number span:target a{
display:block;
color:white;
position:relative;
background-color:#268bd2;
margin:0 -.5em 0 -1em;
padding:0 .5em 0 0
}
pre.numbered code span{
line-height:12px
}
pre[data-codetype="HTML"] .line-number span:target a{
background-color:#4584BE
}
pre[data-codetype="CSS"] .line-number span:target a{
background-color:#5DA028
}
pre[data-codetype="JavaScript"] .line-number span:target a{
background-color:#bbbbbb
}
pre[data-codetype="JQuery"] .line-number span:target a{
background-color:#7073CF
}
pre[data-codetype="JQuery UI"] .line-number span:target a{
background-color:#E36B23
}
pre[data-codetype="XML"] .line-number span:target a{
background-color:#C44032
}
pre[data-codetype*="+"] .line-number span:target a{
background-color:#0B7E88
}
pre[rel],pre[data-codetype]:before {
content: attr(data-codetype);
display: block;
position: static;
top: 0;
right: 0;
left: 0;
background-color: #666;
padding: 5px 7px;
margin: -5px -6px 0px -12px;
font: bold 11px/20px Arial,Sans-Serif;
color: white;
}
pre[rel="CSS"],pre[data-codetype="CSS"]:before {
background-color: #5DA028;
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="HTML"],pre[data-codetype="HTML"]:before {
background-color: #0B7E88;
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]:before, pre[rel="JavaScript"],pre[data-odetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="XML"],pre[data-codetype="XML"]:before {
background-color: #E55E48;
}
pre[data-codetype*="+"]:before {
background-color: #0B7E88;
}
pre .line-number span:target:before{
content:"";
display:block;
height:150px;
margin-top:-150px;
visibility:hidden
}

silahkan letakkan CSS di atas tepat diatas kode </style> atau ]]></b:skin>  pada template anda

kemudian silahkan letakkan kode di bawah ini di atas kode </body>

<script type="text/javascript">//<![CDATA[
/*
Syntax highlighting with language autodetection.
http://softwaremaniacs.org/soft/highlight/
*/

function autoSelect(a){var b,range;if(window.getSelection){b=window.getSelection();range=document.createRange();range.selectNodeContents(a);b.removeAllRanges();b.addRange(range)}else if(document.selection){b=document.selection.createRange().text;range=document.body.createTextRange();range.moveToElementText(a);range.select()}}function makeNumber(){var a=document.getElementsByTagName('pre'),pl=a.length;for(var i=0;i<pl;i++){if(/(^| )numbered( |$)/.test(a[i].className)){a[i].innerHTML='<span class="line-number"></span>'+a[i].innerHTML+'<span class="cl"></span>'}}for(var j=0;j<pl;j++){if(a[j].getElementsByTagName('span')[0]&&a[j].getElementsByTagName('span')[0].className=='line-number'){var b=a[j].getElementsByTagName('code')[0].innerHTML.split(/\n/).length,line=a[j].getElementsByTagName('span')[0];for(var k=0;k<b;k++){line.innerHTML+='<span id="line-'+(j+1)+'-'+(k+1)+'"><em>line-'+(j+1)+'-'+(k+1)+'</em><a href="#line-'+(j+1)+'-'+(k+1)+'">'+(k+1)+'</a></span>'}}}var code=document.getElementsByTagName('code'),clen=code.length;for(var i=0;i<clen;i++){code[i].ondblclick=function(){autoSelect(this);if(document.getElementById('tt-search')){document.getElementById('tt-search').style.display="none"}}}}

var hljs=new function(){function m(p){return p.replace(/&/gm,"&amp;").replace(/</gm,"&lt;")}function c(r,q,p){return RegExp(q,"m"+(r.cI?"i":"")+(p?"g":""))}function j(r){for(var p=0;p<r.childNodes.length;p++){var q=r.childNodes[p];if(q.nodeName=="CODE"||q.nodeName=="SPAN"){return q}if(!(q.nodeType==3&&q.nodeValue.match(/\s+/))){break}}}function g(t,s){var r="";for(var q=0;q<t.childNodes.length;q++){if(t.childNodes[q].nodeType==3){var p=t.childNodes[q].nodeValue;if(s){p=p.replace(/\n/g,"")}r+=p}else{if(t.childNodes[q].nodeName=="BR"){r+="\n"}else{r+=g(t.childNodes[q])}}}if(/MSIE [678]/.test(navigator.userAgent)){r=r.replace(/\r/g,"\n")}return r}function a(s){var q=s.className.split(/\s+/);q=q.concat(s.parentNode.className.split(/\s+/));for(var p=0;p<q.length;p++){var r=q[p].replace(/^language-/,"");if(d[r]||r=="no-highlight"){return r}}}function b(p){var q=[];(function(s,t){for(var r=0;r<s.childNodes.length;r++){if(s.childNodes[r].nodeType==3){t+=s.childNodes[r].nodeValue.length}else{if(s.childNodes[r].nodeName=="BR"){t+=1}else{q.push({event:"start",offset:t,node:s.childNodes[r]});t=arguments.callee(s.childNodes[r],t);q.push({event:"stop",offset:t,node:s.childNodes[r]})}}}return t})(p,0);return q}function l(y,z,x){var r=0;var w="";var t=[];function u(){if(y.length&&z.length){if(y[0].offset!=z[0].offset){return(y[0].offset<z[0].offset)?y:z}else{return z[0].event=="start"?y:z}}else{return y.length?y:z}}function s(C){var D="<"+C.nodeName.toLowerCase();for(var A=0;A<C.attributes.length;A++){var B=C.attributes[A];D+=" "+B.nodeName.toLowerCase();if(B.nodeValue!=undefined&&B.nodeValue!=false&&B.nodeValue!=null){D+='="'+m(B.nodeValue)+'"'}}return D+">"}while(y.length||z.length){var v=u().splice(0,1)[0];w+=m(x.substr(r,v.offset-r));r=v.offset;if(v.event=="start"){w+=s(v.node);t.push(v.node)}else{if(v.event=="stop"){var q=t.length;do{q--;var p=t[q];w+=("</"+p.nodeName.toLowerCase()+">")}while(p!=v.node);t.splice(q,1);while(q<t.length){w+=s(t[q]);q++}}}}w+=x.substr(r);return w}function i(){function p(u,t,v){if(u.compiled){return}if(!v){u.bR=c(t,u.b?u.b:"\\B|\\b");if(!u.e&&!u.eW){u.e="\\B|\\b"}if(u.e){u.eR=c(t,u.e)}}if(u.i){u.iR=c(t,u.i)}if(u.r==undefined){u.r=1}if(u.k){u.lR=c(t,u.l||hljs.IR,true)}for(var s in u.k){if(!u.k.hasOwnProperty(s)){continue}if(u.k[s]instanceof Object){u.kG=u.k}else{u.kG={keyword:u.k}}break}if(!u.c){u.c=[]}u.compiled=true;for(var r=0;r<u.c.length;r++){p(u.c[r],t,false)}if(u.starts){p(u.starts,t,false)}}for(var q in d){if(!d.hasOwnProperty(q)){continue}p(d[q].dM,d[q],true)}}function e(J,D){if(!i.called){i();i.called=true}function z(r,M){for(var L=0;L<M.c.length;L++){if(M.c[L].bR.test(r)){return M.c[L]}}}function w(L,r){if(C[L].e&&C[L].eR.test(r)){return 1}if(C[L].eW){var M=w(L-1,r);return M?M+1:0}return 0}function x(r,L){return L.iR&&L.iR.test(r)}function A(O,N){var M=[];for(var L=0;L<O.c.length;L++){M.push(O.c[L].b)}var r=C.length-1;do{if(C[r].e){M.push(C[r].e)}r--}while(C[r+1].eW);if(O.i){M.push(O.i)}return c(N,"("+M.join("|")+")",true)}function s(M,L){var N=C[C.length-1];if(!N.t){N.t=A(N,H)}N.t.lastIndex=L;var r=N.t.exec(M);if(r){return[M.substr(L,r.index-L),r[0],false]}else{return[M.substr(L),"",true]}}function p(O,r){var L=H.cI?r[0].toLowerCase():r[0];for(var N in O.kG){if(!O.kG.hasOwnProperty(N)){continue}var M=O.kG[N].hasOwnProperty(L);if(M){return[N,M]}}return false}function F(M,O){if(!O.k){return m(M)}var N="";var P=0;O.lR.lastIndex=0;var L=O.lR.exec(M);while(L){N+=m(M.substr(P,L.index-P));var r=p(O,L);if(r){t+=r[1];N+='<span class="'+r[0]+'">'+m(L[0])+"</span>"}else{N+=m(L[0])}P=O.lR.lastIndex;L=O.lR.exec(M)}N+=m(M.substr(P,M.length-P));return N}function K(r,M){if(M.sL&&d[M.sL]){var L=e(M.sL,r);t+=L.keyword_count;return L.value}else{return F(r,M)}}function I(M,r){var L=M.cN?'<span class="'+M.cN+'">':"";if(M.rB){q+=L;M.buffer=""}else{if(M.eB){q+=m(r)+L;M.buffer=""}else{q+=L;M.buffer=r}}C.push(M);B+=M.r}function E(O,L,Q){var R=C[C.length-1];if(Q){q+=K(R.buffer+O,R);return false}var M=z(L,R);if(M){q+=K(R.buffer+O,R);I(M,L);return M.rB}var r=w(C.length-1,L);if(r){var N=R.cN?"</span>":"";if(R.rE){q+=K(R.buffer+O,R)+N}else{if(R.eE){q+=K(R.buffer+O,R)+N+m(L)}else{q+=K(R.buffer+O+L,R)+N}}while(r>1){N=C[C.length-2].cN?"</span>":"";q+=N;r--;C.length--}var P=C[C.length-1];C.length--;C[C.length-1].buffer="";if(P.starts){I(P.starts,"")}return R.rE}if(x(L,R)){throw"Illegal"}}var H=d[J];var C=[H.dM];var B=0;var t=0;var q="";try{var v=0;H.dM.buffer="";do{var y=s(D,v);var u=E(y[0],y[1],y[2]);v+=y[0].length;if(!u){v+=y[1].length}}while(!y[2]);if(C.length>1){throw"Illegal"}return{r:B,keyword_count:t,value:q}}catch(G){if(G=="Illegal"){return{r:0,keyword_count:0,value:m(D)}}else{throw G}}}function f(t){var r={keyword_count:0,r:0,value:m(t)};var q=r;for(var p in d){if(!d.hasOwnProperty(p)){continue}var s=e(p,t);s.language=p;if(s.keyword_count+s.r>q.keyword_count+q.r){q=s}if(s.keyword_count+s.r>r.keyword_count+r.r){q=r;r=s}}if(q.language){r.second_best=q}return r}function h(r,q,p){if(q){r=r.replace(/^((<[^>]+>|\t)+)/gm,function(t,w,v,u){return w.replace(/\t/g,q)})}if(p){r=r.replace(/\n/g,"<br>")}return r}function o(u,x,q){var y=g(u,q);var s=a(u);if(s=="no-highlight"){return}if(s){var w=e(s,y)}else{var w=f(y);s=w.language}var p=b(u);if(p.length){var r=document.createElement("pre");r.innerHTML=w.value;w.value=l(p,b(r),y)}w.value=h(w.value,x,q);var t=u.className;if(!t.match("(\\s|^)(language-)?"+s+"(\\s|$)")){t=t?(t+" "+s):s}if(/MSIE [678]/.test(navigator.userAgent)&&u.tagName=="CODE"&&u.parentNode.tagName=="PRE"){var r=u.parentNode;var v=document.createElement("div");v.innerHTML="<pre><code>"+w.value+"</code></pre>";u=v.firstChild.firstChild;v.firstChild.cN=r.cN;r.parentNode.replaceChild(v.firstChild,r)}else{u.innerHTML=w.value}u.className=t;u.result={language:s,kw:w.keyword_count,re:w.r};if(w.second_best){u.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function k(){if(k.called){return}k.called=true;var r=document.getElementsByTagName("pre");for(var p=0;p<r.length;p++){var q=j(r[p]);if(q){o(q,hljs.tabReplace)}}makeNumber()}function n(){if(window.addEventListener){window.addEventListener("DOMContentLoaded",k,false);window.addEventListener("load",k,false)}else{if(window.attachEvent){window.attachEvent("onload",k)}else{window.onload=k}}}var d={};this.LANGUAGES=d;this.highlight=e;this.highlightAuto=f;this.fixMarkup=h;this.highlightBlock=o;this.initHighlighting=k;this.initHighlightingOnLoad=n;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="\\b(0x[A-Za-z0-9]+|\\d+(\\.\\d+)?)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|\\.|-|-=|/|/=|:|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\.",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.inherit=function(p,s){var r={};for(var q in p){r[q]=p[q]}if(s){for(var q in s){r[q]=s[q]}}return r}}();hljs.LANGUAGES.javascript={dM:{k:{keyword:{"in":1,"if":1,"for":1,"while":1,"finally":1,"var":1,"new":1,"function":1,"do":1,"return":1,"void":1,"else":1,"break":1,"catch":1,"instanceof":1,"with":1,"throw":1,"case":1,"default":1,"try":1,"this":1,"switch":1,"continue":1,"typeof":1,"delete":1},literal:{"true":1,"false":1,"null":1}},c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM,hljs.CNM,{b:"("+hljs.RSR+"|case|return|throw)\\s*",k:{"return":1,"throw":1,"case":1},c:[hljs.CLCM,hljs.CBLCLM,{cN:"regexp",b:"/",e:"/[gim]*",c:[{b:"\\\\/"}]}],r:0},{cN:"function",b:"\\bfunction\\b",e:"{",k:{"function":1},c:[{cN:"title",b:"[A-Za-z$_][0-9A-Za-z$_]*"},{cN:"params",b:"\\(",e:"\\)",c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM]}]}]}};hljs.LANGUAGES.css=function(){var a={cN:"function",b:hljs.IR+"\\(",e:"\\)",c:[{eW:true,eE:true,c:[hljs.NM,hljs.ASM,hljs.QSM]}]};return{cI:true,dM:{i:"[=/|']",c:[hljs.CBLCLM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:{"font-face":1,page:1}},{cN:"at_rule",b:"@",e:"[{;]",eE:true,k:{"import":1,page:1,media:1,charset:1},c:[a,hljs.ASM,hljs.QSM,hljs.NM]},{cN:"tag",b:hljs.IR,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[hljs.CBLCLM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[a,hljs.NM,hljs.QSM,hljs.ASM,hljs.CBLCLM,{cN:"hexcolor",b:"\\#[0-9A-F]+"},{cN:"important",b:"!important"}]}}]}]}]}}}();hljs.LANGUAGES.xml=function(){var b="[A-Za-z0-9\\._:-]+";var a={eW:true,c:[{cN:"attribute",b:b,r:0},{b:'="',rB:true,e:'"',c:[{cN:"value",b:'"',eW:true}]},{b:"='",rB:true,e:"'",c:[{cN:"value",b:"'",eW:true}]},{b:"=",c:[{cN:"value",b:"[^\\s/>]+"}]}]};return{cI:true,dM:{c:[{cN:"pi",b:"<\\?",e:"\\?>",r:10},{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style",e:">",k:{title:{style:1}},c:[a],starts:{cN:"css",e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script",e:">",k:{title:{script:1}},c:[a],starts:{cN:"javascript",e:"<\/script>",rE:true,sL:"javascript"}},{cN:"vbscript",b:"<%",e:"%>",sL:"vbscript"},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:"[^ />]+"},a]}]}}}();hljs.LANGUAGES.java={dM:{k:{"false":1,"synchronized":1,"int":1,"abstract":1,"float":1,"private":1,"char":1,"interface":1,"boolean":1,"static":1,"null":1,"if":1,"const":1,"for":1,"true":1,"while":1,"long":1,"throw":1,strictfp:1,"finally":1,"protected":1,"extends":1,"import":1,"native":1,"final":1,"implements":1,"return":1,"void":1,"enum":1,"else":1,"break":1,"transient":1,"new":1,"catch":1,"instanceof":1,"byte":1,"super":1,"class":1,"volatile":1,"case":1,assert:1,"short":1,"package":1,"default":1,"double":1,"public":1,"try":1,"this":1,"switch":1,"continue":1,"throws":1},c:[{cN:"javadoc",b:"/\\*\\*",e:"\\*/",c:[{cN:"javadoctag",b:"@[A-Za-z]+"}],r:10},hljs.CLCM,hljs.CBLCLM,hljs.ASM,hljs.QSM,{cN:"class",b:"(class |interface )",e:"{",k:{"class":1,"interface":1},i:":",c:[{b:"(implements|extends)",k:{"extends":1,"implements":1},r:10},{cN:"title",b:hljs.UIR}]},hljs.CNM,{cN:"annotation",b:"@[A-Za-z]+"}]}};hljs.LANGUAGES.php={cI:true,dM:{k:{and:1,include_once:1,list:1,"abstract":1,global:1,"private":1,echo:1,"interface":1,as:1,"static":1,endswitch:1,array:1,"null":1,"if":1,endwhile:1,or:1,"const":1,"for":1,endforeach:1,self:1,"var":1,"while":1,isset:1,"public":1,"protected":1,exit:1,foreach:1,"throw":1,elseif:1,"extends":1,include:1,__FILE__:1,empty:1,require_once:1,"function":1,"do":1,xor:1,"return":1,"implements":1,parent:1,clone:1,use:1,__CLASS__:1,__LINE__:1,"else":1,"break":1,print:1,"eval":1,"new":1,"catch":1,__METHOD__:1,"class":1,"case":1,exception:1,php_user_filter:1,"default":1,die:1,require:1,__FUNCTION__:1,enddeclare:1,"final":1,"try":1,"this":1,"switch":1,"continue":1,endfor:1,endif:1,declare:1,unset:1,"true":1,"false":1,namespace:1},c:[hljs.CLCM,hljs.HCM,{cN:"comment",b:"/\\*",e:"\\*/",c:[{cN:"phpdoc",b:"\\s@[A-Za-z]+",r:10}]},hljs.CNM,hljs.inherit(hljs.ASM,{i:null}),hljs.inherit(hljs.QSM,{i:null}),{cN:"variable",b:"\\$[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*"},{cN:"preprocessor",b:"<\\?php",r:10},{cN:"preprocessor",b:"\\?>"}]}};

hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
//]]></script>

atau untuk lebih praktisnya letakkan kode ini di atas kode </head>

<script type="text/javascript" src='https://googledrive.com/host/0B-GXzRKoPbNnMW01UElwUUNCR2s'/> 

simpan apa yang tadi sudah di kerjakan.

Untuk menggunakannya, silahkan pastekan kode di bawah ini pada tab HTML di postingan ketika membuat postingan.

<pre class="numbered" data-codetype="JavaScript"><code class="Javascript"> ... kode Javascript ... </code></pre>
<pre class="numbered" data-codetype="CSS"><code class="CSS"> ... kode CSS ... </code></pre>
<pre class="numbered" data-codetype="HTML"><code class="HTML"> ... kode HTML ... </code></pre>
<pre class="numbered" data-codetype="XML"><code class="XML"> ... kode XML ... </code></pre>
<pre class="numbered" data-codetype="JQuery Ui"><code class="JQuery Ui"> ... kode JQuery Ui ... </code></pre>
<pre class="numbered" data-codetype="JQuery"><code class="JQuery"> ... kode JQuery ... </code></pre>

sekarang tinggal lihat hasilnya, anda sudah memiliki Syntax Highlighter Language Autodetection di blog anda, sekian saja semoga bermanfaat...

Membatasi jumlah pencarian posting


Kalau sebelumnya saya membahas tentang cara bagaimana membatasi jumlah posting yang di sajikan dalam pencarian per label, kali ini saya akan membahas cara membatasi jumlah posting yang akan di tampilkan ketika user atau pengunjung menggunakan form pencarian untuk menemukan sebuah artikel atau posting bukan dari kategori label.

Bingung? coba lakukan pencarian di blog ini dan lihat adressbar maka akan terlihat seperti gambar di bawah ini


tentunya jumlah posting yang muncul juga akan sesuai dengan jumlah yang telah di tentukan.

untuk membuatnya langsung saja simak langkah berikut ini.

Pertama seperti biasa login terlebih dahulu ke dasboard blogger anda
Pilih edit HTML template
Temukan kode markup html formulir pencarian anda, seperti berikut ini

<form action='/search' class='form-wrapper-db-sc' method='get'>
<input id='a' name='q' placeholder='Cari disini...' type='text'/>
</form>

jika sudah, sekarang letakkan kode berikut ini yang berguna untuk mengatur berapa jumlah posting yang akan di tampilkan di hasil pencarian

<input name='max-results' type='hidden' value='8'/>

jika langkahnya di lakukan hasilnya akan seperti berikut

<form action='/search' class='form-wrapper-db-sc' method='get'>
<input id='a' name='q' placeholder='Cari disini...' type='text'/>
<input name='max-results' type='hidden' value='8'/>
</form>

setelah itu silahkan simpan semua perubahan yang telah anda lakukan. sebagai hasil akhirnya tes dan coba jalankan agar anda tahu hasil dari pekerjaan yang telah anda lakukan.

Silahkan ubah nilai value sesuai kebuthan anda

demikian saja, semoga berguna dan semoga sukses...