Menu Tab dengan jQuery


Untuk menghemat tempat, tab view menu sangat efisien untuk solusinya karena Ukuran yang relatif kecil tapi bisa memuat space yang lumayan. kali ini saya akan membagikan cara membuat tab menu, silahkan simak jika anda sedang mencari cara membuatnya.

Jika setelah jadi nanti lebar atau tinggi menu tab ini tidak sesuai, silahkan anda sesuaikan sendiri dengan ukuran widtget isi atau elemen dari menu yang anda buat ini.

Copy dan letakkan kode berikut di atas kode ]]></b:skin> atau </style>

ul.tabs {
  width: 300px;
  height: 80px;
  margin: 0 auto;
  list-style: none;
  overflow: hidden;
  padding: 0;
}
ul.tabs li {
  float: left;
  width: 100px;
}
ul.tabs li a {
  position: relative;
  display: block;
  height: 30px;
  margin-top: 40px;
  padding: 10px 0 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: #369;
  -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  border: 0px solid #000000;
  -webkit-transition: padding 0.2s ease, margin 0.2s ease;
  -moz-transition: padding 0.2s ease, margin 0.2s ease;
  -o-transition: padding 0.2s ease, margin 0.2s ease;
  -ms-transition: padding 0.2s ease, margin 0.2s ease;
  transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
  z-index: 3;
}
.tabs li:nth-child(2) a { z-index: 2; }
.tabs li:last-child a {
  z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
}
ul.tabs li a:hover {
  margin: 35px 0 0 0;
  padding: 10px 0 5px 0;
}
ul.tabs li a.active {
  margin: 30px 0 0 0;
  padding: 10px 0 10px 0;
  background: #2c3e50;
  color: #D3FEF5;
  /*color: #ff6831;*/
  z-index: 4;
  outline: none;
}
.group:before,
.group:after {
  content: " ";
  display: table; 
}
.group:after { clear: both; }
#panels {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background: #2c3e50;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
}
#panels p {
  font-family: 'Open Sans', sans-serif;
  padding: 30px 40px;
  color: #ffffff;
  line-height: 16px;
  font-size: 12px;
  margin: 0;
}
#one { }
#two { display: none; }
#three { display: none; }

Letakkan kode HTML di bawah ini di sidebar atau elemen lain yang anda inginkan.

<ul class="tabs group">
  <li><a class="active" href="#/one">Tab 1</a></li>
  <li><a href="#/two">Tab 2</a></li>
  <li><a href="#/three">Tab 3</a></li>
</ul>
<div id="panels">
  <p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit aliquam mauris, a mattis lectus varius id. Ut dolor tortor, hendrerit et porttitor in, gravida sed felis. Donec vehicula ex nec venenatis pulvinar. Donec vel sodales neque.</p>
  <p id="two">Donec tincidunt tortor ut magna mollis sagittis. Mauris eu nibh non purus gravida hendrerit. Donec enim nisi, pretium eu libero sit amet, bibendum sagittis velit. Pellentesque non dapibus leo. Suspendisse ante tellus, volutpat ac leo eget, venenatis rhoncus sem.</p>
  <p id="three"> Aenean dapibus eleifend venenatis. Integer et suscipit dui. Nam tellus diam, mattis in ultrices et, feugiat ac libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
</div>

Letakkan jQuery berikut di atas kode </head> atau </body> namun saya recomendasikan di atas kode yang terakhir.

<script type='text/javascript'>
//<![CDATA[ 
(function($) {
    var tabs =  $(".tabs li a");
    tabs.click(function() {
 var panels = this.hash.replace('/','');
 tabs.removeClass("active");
 $(this).addClass("active");
    $("#panels").find('p').hide();
    $(panels).fadeIn(200);
 });
})(jQuery);
//]]>
</script>


Jika anda ingin tampilan menu tab dengan warna yang berbeda dan lebih lebar anda bisa menggunakan css di bawah ini.

ul.tabs {
  width: 600px;
  height: 80px;
  margin: 0 auto;
  list-style: none;
  overflow: hidden;
  padding: 0;
}
ul.tabs li {
  float: left;
  width: 200px;
}
ul.tabs li a {
  position: relative;
  display: block;
  height: 30px;
  margin-top: 40px;
  padding: 10px 0 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: #1abc9c;
  -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  border: 0px solid #000000;
  -webkit-transition: padding 0.2s ease, margin 0.2s ease;
  -moz-transition: padding 0.2s ease, margin 0.2s ease;
  -o-transition: padding 0.2s ease, margin 0.2s ease;
  -ms-transition: padding 0.2s ease, margin 0.2s ease;
  transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
  z-index: 3;
  -webkit-border-top-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a { z-index: 2; }
.tabs li:last-child a {
  z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}
ul.tabs li a:hover {
  margin: 35px 0 0 0;
  padding: 10px 0 5px 0;
}
ul.tabs li a.active {
  margin: 30px 0 0 0;
  padding: 10px 0 10px 0;
  background: #2c3e50;
  color: #D3FEF5;
  /*color: #ff6831;*/
  z-index: 4;
  outline: none;
}
.group:before,
.group:after {
  content: " "; 
  display: table;
}
.group:after { clear: both; }
#panels {
  width: 600px;
  height: 300px;
  margin: 0 auto;
  background: #2c3e50;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
#panels p {
  font-family: 'Open Sans', sans-serif;
  padding: 30px 40px;
  color: #ffffff;
  line-height: 26px;
  font-size: 18px;
  margin: 0;
}
#one { }
#two { display: none; }
#three { display: none; }


pastikan di template anda sudah ada jQuery <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script> agar menu tab ini bisa berjalan atau berfungsi.

Membatasi jumlah posting di halamam label


Seringkali terkadang jumlah posting yang muncul di halaman search label blogger melebihi jumlah yang sudah kita terapkan di pengaturan dasar, ketik kita telah mengatur jumlah posting yang muncul di halaman beranda blogger dengan jumlah maksimal misalkan sepuluh posting maka poating yang akan muncul di halaman label akan tetap berada di jumlah default.

untuk mengatasi hal tersebut kita bisa menggunakan trik yang cukup sederhana untuk di terapkan bagi sobat blogger yang sudah paham dan untuk sobat yang belum tahu jadi ikuti saja sob triknya...

Halaman label akan muncul ketika kita membuka link label yang ada di blogger, bisa sobat lihat di blog masing masing, umumnya link label ini terdapat di menu nav atau menu drop down, label dan menu breadcrum. cara yang harus kita lakukan adalah:

Buka editor template anda, lalu cari kode dan Temukan kode apa saja yang tampak kurang lebih seperti ini (kususkan pencarian pada tag yang memiliki atribut expr:href, beberapa atribut lain mungkin juga ditemukan di dalam tag yang sama misalnya expr:dir tips tekan Ctrl + F untuk pencarian cepat:

<a expr:href='data:label.url'>

Ubah atribut di ats yang di awali expr:href menjadi seperti ini:

<a expr:href='data:label.url + &quot;?max-results=5&quot;'>

nilai max-results=5 adalah jumlah posting yang akan di tampilkan dsi halaman label ketika di buka, silahkan anda ubah sesuai keingan.

langkah berikutnya, tambah atribut di bawah ini di url yang ada pada menu drop dwon atau nav blog

?max-results=5

sehingga menjadi seperti berikut:

<a href='http://defandaky.blogspot.com/search/label/HTML?max-results=5'>HTML</a>

tinggal anda lihat dan klik sana sini untuk mencoba hasilnya...

Jangan lupa untuk mengubat semua atribut di widget label dan menu breadcrum yang ada di template, cara cari atribut sampai semua telah terlihat anda tambahkan kode + "?max-results=5"

semoga membantu dan berguna...

Pencarian dengan tombol bersihkan


Salah satu yang membuat blog kita menjadi user friendly adalah dengan adanya kotak pencarian, Kotak pencarian ini sangat penting untuk memudahkan pengunjung menjelajahi blog Anda atau mencari artikel lainnya di blog Anda.

Fungsi kotak pencarian untuk saya sendiri adalah untuk mempermudah mencari posting yang akan saya tambahkan sebagai link internal ketika akan menerbitkan sebuah posting baru.

Pada kali ini saya akan share sebuah kotak pencarian dengan tambahan fitur tombol pembersih text input, kotak pencarian ini sederhana hanya ada sedikit tambahan jQuery.

CSS

#search-form {width:200px;padding:4px;background:#242424;}
.text-input-wrapper {
  border:1px solid #282828;
  padding:0px;
  display:inline-block;   
  width:150px; 
}
.text-input-wrapper input {
  border:none;
  background:#fff;
  outline:none;
  padding:0;
  margin:0;
  font:inherit;   
  width:150px; 
}
.text-input-wrapper span {
  cursor:pointer;
  color:#369;
  font-weight:bold;
  visibility:hidden;
}
.bersih{ background:#fff;margin-left:-15px}
.search-btn{cursor:pointer;width:40px;height:22px;background:#444;color:#fff;border:1px solid #262626;}
.search-btn:hover{background:#666;}

HTML From

<form id="search-form" action="/search" method="get">
    <span class="text-input-wrapper"><input type="text" name="q" autocomplete="off" size="18"/><span class="bersih" title="bersihkan!">&times;</span></span>
    <button class='search-btn' type="submit" value="Submit">cari</button>
</form>

jQuery

<script type="text/javascript">
//<![CDATA[
(function() {
 var searchForm = document.getElementById('search-form'),
  textInput = searchForm.q,
  clearBtn = textInput.nextSibling;
 textInput.onkeyup = function() {
  clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden";
 };
 clearBtn.onclick = function() {
  this.style.visibility = "hidden";
  textInput.value = "";
 };
})();
//]]></script>


Penambahan fungsi pembatasan hasil pencarian:


jika anda ingin membatasi hasil pencarian sesuai dengan nilai atau jumlah yang ingin anda sesuaikan tambahkan kode berikut

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

Perhatikan pada nilai value='8' ini bisa anda rubah sesuai kebutuhan.

Cara membuat judul header untuk tag pre


Selamat malam sobat blogger kali ini saya mau berbagi tentang cara dan trik membuat judul pada tag pre demo lihat blog ini, biar blognya tambah keren dan terlihat bagus. untuk demo dan hasilnya silahkan lihat di blog ini. cara dan langkahnya cukup mudah silahkan saja ikuti trik di bawah ini.

pertama silahkan buka editor template blogger sobat dan cari kode </style> atau jika sobat masih menggunakan struktur template defaul blogger cari kode ]]></b:skin> setelah ditemukan silahkan copy dan letakkan kode css di bawah ini di atas kode tadi:

pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Arial,Sans-serif;
font-size:14px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre[data-codetype=&quot;CSS&quot;]:before{background-color:#006666}
pre[data-codetype=&quot;HTML&quot;]:before{background-color:#ffcc66}
pre[data-codetype=&quot;JavaScript&quot;]:before{background-color:#ff6c60}
pre[data-codetype=&quot;JQuery&quot;]:before{background-color:#99c262}

untuk menggunakan atau memanggilnya di dalam posting, buat di pos editor kode berikut ini

<pre data-codetype="CSS"><code>...........</code></pre> Untuk CSS
<pre data-codetype="HTML"><code>...........</code></pre> Untuk HTML
<pre data-codetype="JavaScript"><code>...........</code></pre> Untuk JavaScript
<pre data-codetype="JQuery"><code>...........</code></pre> Untuk kode JQuery

Silahkan hapus tulisan untuk css, html, js dan jquery yang ada di kode. jika anda ingin menambahkan lebih banyak judul untuk kode tag pre lakukan langkah seperti di atas dan jika setelah langkah semua diatas sudah sobat lakukan atur kembali css 

margin:-11px -13px 10px -54px;

kode diatas menyesuaikan letak judul tag pre lebih ke kiri atau kanan.

semoga berhasil...

Menandai komentar admin dengan css


Buat sahabta blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya.
blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, lalu bagaimana jika kita ingin membuat tampilan komentar yang berbeda pada blok komentar administrator secara keseluruhan? Dulu kita bisa menggunakan tag kondisional, tapi sekarang tidak lagi.
jadi untuk lebih mudahnya kita akan menggunakan dan memanfaatkan css tanpa javascript...


oke langsung saja simak trik di bwah ini:

Pertama buka editor template blogger

cari kode tag berikut ini dalam template sobat...

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

lalu temukan kode di bawah ini dalam area tag komentar tersebut

<b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a> 
   <b:else/>
  <data:comment.author/> 
</b:if>

setelah anda temukan, letakkan kode berikut ini di bawah kode di atas

<span class='comment_author_flag'>Admin</span>

Kemudian, tambahkan kode ini di atas ]]></b:skin> atau </style>:

.comment_admin .comment_author_flag {display:inline;background:#bbb;font-size:13px;font-weight:normal;padding:2px 6px;margin-left:8px;color:#fff;border-radius:4px;text-transform:uppercase;letter-spacing:.1em}

untuk mengubah background komentar milik admin tambahkan kode css berikut ini di atas   ]]></b:skin> atau </style>:

div.comment_inner.comment_admin {background:#394549;}

jika dalam template sobat sudah ada, ganti saja warnanya dengan tampilan warna yang anda suka dengan merubah nilai pada {background:#394549;}

sekarang tinggal lihat hasilnya...

demikian saja semoga berguna dan bermanfaat sob...

Memasang meta tag agar blog lebih SEO Friendly


Salam sobat blogger, share lagi ni buat lebih mengoptimalkan seo pada blog agar bisa tampil di halaman pertama halaman mesin pencari. tapi jangan lantas ini di jadikan trik utama karena masih ada trik trik lain yang perlu sobat lakukan untuk membuat blognya lebih seo, ini hanya sebagaian trik sja yang memang cukup efektif di hasilnya.

sudah banyak tutor dan share membuat meta tag seo friendly buat blog apa lagi yang di barengi dengan akhiran super seo 2014 tapi memang pendapat dan penilaian setiap blogger berbeda beda tentang hal tersebut, nah untuk itu buat sobat yang menilai meta tag ini baik silahkan di pakai dan yang merasa kurang silahkan di lewati saja :-)

Di bawah ini adalah meta tag yang bisa sobat pakai

<meta charset='utf-8'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,minimum-scale=1.0,maximum-scale=3.0' name='viewport'/>
<b:else/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
</b:if>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404: Maaf halaman yang ada cari tidak ada - judul blog anda</title>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.searchQuery'>
<title>Pencarian keyword untuk :: <data:blog.searchQuery/> :: judul blog anda</title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title>Arsip Artikel Bulan <data:blog.pageName/> judul blog</title>
<meta expr:content='&quot;Arsip Artikel Bulan &quot; + data:blog.pageName + &quot; diskripsi&quot;' name='description'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<title><data:blog.pageName/> judul blog</title>
<meta expr:content='data:blog.pageName + &quot;. Silahkan baca artikel &quot; + data:blog.pageName + &quot; selengkapnya di judul blog&quot;' name='description'/>
<b:else/>
<b:if cond='data:blog.searchLabel'>
<title>Pencarian semua Label :: <data:blog.pageName/> :: judul blog</title>
<meta expr:content='&quot;Pencarian pada kategori ::&quot; + data:blog.pageName + &quot;:: selengkapnya silahkan kunjungi di udul blog.&quot;' name='description'/>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
</b:if>
</b:if>
<meta content='kata kunci' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> judul blog</title>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot;. Silahkan baca artikel &quot; + data:blog.pageName + &quot; selengkapnya di judul blog&quot;' name='description'/>
</b:if>
<meta expr:content='data:blog.pageName + &quot;, kata kunci&quot;' name='keywords'/>
</b:if>

untuk menempatakan meta tag di atas di blog anda, cari saja meta tag yang dulu pernah sobat pasang dan ganti dengan ini, buat yang belum pernah cari saja <b:include data='blog' name='all-head-content'/> dan letakkan meta tag di atas di bawah kode tersebut.

sekedar tips, buat sobat yang masih menggunakan meta seperti

<meta content='index, follow' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='all-language' http-equiv='Content-Language'/>
<meta content='global' name='Distribution'/>
<meta content='global' name='target'/>
<meta content='all' name='Scooter'/>
<meta content='ALL' name='spiders'/>
<meta content='Indonesia' name='geo.
<meta content=' NAMA PENGGUNA BLOG ' name='author'/>
<meta content='2014, ISI DENGAN JUDUL BLOG ' name='copyright'/>country'/>
<meta content='all' name='robots'/>
<meta content='all' name='googlebot'/>
<meta content='1 days' name='revisit-after'/>
<meta content='id' name='language'/>
<meta content='all' name='Googlebot-Image'/>
<meta content='all' name='Slurp'/>
<meta content='all' name='ZyBorg'/>
<meta content='all' name='msnbot'/>

lebih baik di hilangkan saja, kerena sudah tidak ada gunanya... menurut saya sekali lagi :-), kalau sobat masih merasa penting silahkan saja di pertahankan...

Cukup segitu saja sobat, silahkan di simak dan di pelajari tentang memasang meta tag agar lebih seo... semoga bermanfaat.

Side Menu dengan jQuery

Memfungsikan ikon awesome dan jquery

letakkan kode berikut di atas kode </head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

Menu vertical side memiliki tampilan memanjang atau menurun kebawah, Biasanya menu vertical ditempatkan dibagian kanan atau kiri laman blog.

Berikut adalah kode CSS, HTML dan jQuerynya :

CSS

#menu {
  position: fixed;
  background-color: #252525;
  height: 100%;
  z-index: 10;
  width: 280px;
  color: #bbb;
  top: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
  font-family: 'Source Sans Pro', sans-serif;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
#menu ul {
  list-style: none;
  margin-top: 0;
  padding: 0
}
#menu ul li { border-bottom: 1px solid #2a2a2a; }
#menu>ul>li>a { border-left: 4px solid #444; }
#menu ul li a {
  color: inherit;
  font-size: 16px;
  display: block;
  padding: 8px 0 8px 10px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 600;
}
#menu ul a i {
  margin-right: 10px;
  font-size: 18px;
  margin-top: 3px;
  width: 20px;
}
#menu ul a i[class*='fa-caret'] { float: right; }
#menu ul a:hover,
#menu ul a.active {
  background-color: #111;
  border-left-color: #369;
  color: #369;
}
#menu ul a:hover i:first-child { color: #369; }
/* Submenu */
#menu ul li a.active+ul { display: block }
#menu ul li ul {
  margin-top: 0;
  display: none;
}
#menu ul li ul li { border-bottom: none; }
#menu ul li ul li a { padding-left: 30px; }
#menu ul li ul li a:hover { background-color: #1A1A1A; }
/* show menu */
.left { left: -280px; }
.show { left: 0; }
#showmenu {
  margin-left: 100%;
  position: absolute;
  top: 0;
  padding: 6px 10px 7px 10px;
  font-size: 1.3em;
  color: #369;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

Letakkan kode CSS di atas di antara/bersama CSS yang lain di blog anda, atau di atas kode </style>

HTML

<!-- menu vertical -->
<nav id="menu" class="left">
  <ul>
    <li><a href="#" class="active"><i class="fa fa-home"></i> Beranda</a></li>
    <li><a href="#"><i class="fa fa-user"></i> Tentang</a></li>
    <li> <a href="#"><i class="fa fa-tags"></i> Kategori <i class="fa fa-caret-down"></i></a>
      <ul>
        <li><a href="#">Musik</a></li>
        <li><a href="#">Film</a></li>
        <li><a href="#">Video</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-phone-square"></i> Kontak</a></li>
  </ul>
  <a href="#" id="showmenu"> <i class="fa fa-align-justify"></i> </a> 
</nav>
<!-- end menu vertical -->

Untuk HTMLnya anda bisa meletakkan di bawah elemen footer atau di atas kode </body>, pengecualian pada peletakkan <a href="#" id="showmenu"><i class="fa fa-align-justify"></i></a> ini adalah ikon yang berfungsi untuk membuka menu side vertikal ini, jika anda ingin meletakkan di area tertentu ubah nilai position: absolute dengan position: relative pada css dan sesuaikan letak jarak kiri kanan di css.

jQuery

$("#showmenu").click(function(e){
 e.preventDefault();
 $("#menu").toggleClass("show");
});
 $("#menu a").click(function(event){
  event.preventDefault();
 if($(this).next('ul').length){
 $(this).next().toggle('fast');
 $(this).children('i:last-child').toggleClass('fa-caret-down fa-caret-left');
    }
});

untuk jQuerynya anda letakkan di atas tag kode </body> jangan lupa bungkus dengan kode awalan <script text/javascript'> //<![CDATA[dan akhiran //]]> </script>
.
Demo Side Menu

Membuat ucapan terimakasih di bawah komentar


Pagi sobat blogger lagi liburan buat posting hiasan untuk blogger, kali ini saya mau share cara dan trik untuk membuat pesan ucapan terimakasih di bawah kotak komentar.
 

Triknya cukup mudah tinggal menambahkan css dan sedikit kode html di template sobat, langsung aja berikut ini caranya

Buka editor template blogger anda sperti biasanya, dan tekan Ctrl + F untuk menemukan kode

<b:includable id='threaded-comment-form' var='post'>

setelah anda temukan gulung kebawah dan cari kedi di bawah ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

ada dua kode serupa seperti diatas, tapi yang membedakan adalah akhiran kode name='comment-editor' style='display: none'/> jadi lewati kode ini, ini adalah kode untuk tampilan form komentar mobile.

lalu letakkan kode berikut setelah kode di atas

<div class='db-comment-thanks'>Terima kasih telah berkomentar</div>

kemudian kita beri style kode di atas dengan css berikut, letakkan di antara css template blog anda

.db-comment-thanks {font-family:Arial, sans-serif;font-size:12px;right:27px;margin-top:-73px;padding:6px 12px;background:#f8f8f8;color:#999;border:1px solid #c9cacb;border-radius:3px;position:absolute;}

jangan lupa untuk menyesuaikan letak ucapan terimakasih ini lebih kekiri atau kanan dan atas bawahnya demgan merubah nialai pada css right:27px; margin-top:-73px;.

semogas berhasil dan membantu...

Menerapakan jquery lightbox evolution


Salam sobat blogger membuat postingan untuk share kali ini buat sobat yang masih bingung tentang jquery lightbox evolution. jquery lightbox ini saya gunakan di template ini pada konversi kode dan kontak bisa sobat lihat seperti apa itu jquery lightbox.

untuk sobat yang tertarik dan ingin menerapkan ini untuk blognya saya akan memberikan trik dan caranya memasang trik ini, silahkan disimak sampai paham...

pertama untuk memasang jquery lightbox silahkan letakkan kode berikut ini di atas kode </head> pada template sobat

<link href='https://googledrive.com/host/0B05MjHQkbOjhSXduOHNBdmFUTWc' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/0B05MjHQkbOjhZWhBM2JHRGczX2s' type='text/javascript'/>

jika di dalam template sobat sudah terpasang jquery library versi lama silahkan ganti dengan versi terbaru <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> agar jquery lightbox nanti bisa berfungsi dan berjalan di template.

setelah selesai dengan semua langkah di atas sekarang kita akan membuat file htmnya untuk demo, contoh lihat di bawah ini

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
    <title>contohku lo ini</title>
     <style type="text/css">
      /* tulis css ente disini gan */
     </style>
   </head>
 <body>
   /* html contoh aja bro tanpa div elemen */
    <h4>Berhasil berhasil berhasil dora dora dora</h4>
    <h5>gimana coi ganteng kan</h4>
</body>
</html>

setelah selesai kita unggah lalu share untuk public seperti langkah biasanya yang anda lakukan saat menyimpan file di google drive maka simpan terlebih dahulu linknya contohnya seperti ni https://googledrive.com/host/0B05MjHQkbOjhbVVpWUhzNHpSS0k

sekarang saya akan membuat sebuah tombol dan sedikit css untuk demo dan contoh trik ini, silahkan di lihat

untuk css tombolnya saya buat sebagai berikut

.tombol{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.tombol ul {margin:0;padding:0}
.tombol li{display:inline;margin:0;padding:0}
.db-tombol-demo {border-radius:2px;padding: 8px 10px !important; background: #000; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.db-tombol-demo:hover { background: #FF8C00; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

lalu untuk html tombolnya seperti berikut

<div style="text-align: center;">
<ul class="tombol">
<li><a class="db-tombol-demo" href="#">Demo lihat disini coi...</a></li>
</ul>
</div>
<div class="clear"></div>

nah sekarang tiba di bagian meletakkan pemanggilan jquery lightbox tadi, maka yang harus kita tambahkan adalah class='lightbox' jadi hasilnya akan seperti ini

<li><a class="db-tombol-demo lightbox" href="#">Demo lihat disini coi...</a></li>

cara menambahkan file html dalam trik ini adalah gunakan langkan sebagai berikut yaitu memanggile file html kita tadi menggunakan iframe

<a data-options='{&quot;width&quot;:600, &quot;height&quot;:450, &quot;iframe&quot;: true}' href='link html yang telah di unggah di host'></a>

silahkan ubah ukuran nilai pada lebar width&quot;:600, dan tinggi height&quot;:450, sesuai keinginan atau kebutuhan

jadi untuk hasil akhir jika semua langkah di atas di satukan maka demikianlah hasil kodenya

<div style="text-align: center;">
<ul class="tombol">
<li><a class="db-tombol-demo lightbox" data-options='{&quot;width&quot;:600, &quot;height&quot;:450, &quot;iframe&quot;: true}' href='link html yang telah di unggah di host'>Demo lihat disini coi...</a></li>
</ul>
</div>
<div class="clear"></div>

untuk penerapan pada gambar,  video,  file swf tau banner boleh lihat kode di bwah ini

Penggunaan untuk video

<a class="lightbox" href="http://www.youtube.com/watch?v=e1c-wAT0b6g">YouTube</a>

Banner atau SWF

<a class="lightbox" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Flash</a>

Penggunaan pada gambar

<a class="lightbox" href="url-gambar-besar-ente-gan"><img src="url-gambar-ente-kecil-gan" alt=""/></a>

untuk penerapan lainnya coba saja di pelajari sendiri...

demikian saja sob, selamat mencoba dan berekperimen sesuai kesenangan ya....

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