GO Blog

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:


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



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/AVvXsEiV-uIUYp9w8UBSEJnh4A9DF_Vf4ywF-lVihEAM1dcEMeYQ9s0FpBHPHLdjGLpVIh5XeUBz_7e3C5wZSAZbDqZ-XJKnMP-2E1VfIOsGgJ8CzqT6PMICOgkHiUBNDCysHcv0mGXjksOemdk/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.