Blogger template Da-blue responsive

Kembali saya share template blogger yang pernah saya pakai untuk anda yang sedang mencari template silahkan di gunakan dan di simpan sesuka anda tentunya tanpa syarat apa pun. template ini sudah di lengkapai beberapa tool yang sedang di minati para blogger yaitu

Fitur template

1. Valid HTML5
2. Responsive
3. Top menu
4. Hightlight current menu
5. Thread Comment
6. Hash button from comment
7. SEO 100%
8. SEO Optimizing
9. 3 Column
10. 404 Error page
11. Responsive thumbnail post
12. Breadcrumbs
13. Related Posts with Thumb
14. Share Button
15. Numbered Page Navigation
16. Button scrolling
17. Show hide emoticon
18. show hide converter
19. show hide search box

jika menurut anda anda yang kurang silahkan di tambahkan dengan mencari tutorialnya, dan jika da yang belum sesuai silahkan di otak atik sesuka hati :)

penampakan tampilan halaman penuh dari template ini sbb:

untuk responsive bisa di lihat di gambar bawah ini

lihat demonya sendiri

• Demo

jika anda berminat template ini bisa di donwload di link berikut

• Download

yang perlu di sesuaikan

<nav id="db-fixed-nav"></nav>

temukan kode tersebut dan ubah semua menu berikut
<li><a href="#">menu</a></li> dengan kebutuhan di blog anda

<div id="header-inner"></div>

ubah logo blog di template dengan menemukan kode tersebut dan ganti kode src='url logo blog' dengan link logo anda sendiri

<div class="description"></div>

temukan kode tersebut dan ganti diskripsi blog. ganti dengan deskripsi blog anda

max-results=5"

cari kode tersebut dan ubah nilai sesuai keinginan berapa batasan posting yang ingin di munculkan di halaman search label

Jquery light box

di template ini sudah tertanam jquery lightbox anda tinggal menyisipkan class lightbox pada elemen tertentu untuk di beri efek ini

pagger di posting

sesuaikan saja pagger tersebut sesuai warna keinginan anda sendiri

sekian saja semoga template ini berguna untuk anda semua...

Template ini sudah di berikan secara gratis, jadi harap credite template ini tidak di hilangkan, terimakasih

Blogger template Mazda DB Responsive

Template sederhana responsive untuk blogger ini bisa sobat donwload dan simpan secara gratis, buat anda yang mungkin tertarik bisa langsung melakukan pada bagian tertentu saja.

Fitur template

1. Valid HTML5
2. Responsive
3. Related Post
4. Thread Comment
5. Emoticon comment
6. SEO 100%
7. SEO Optimizing
8. 2 Column
9. Responsive thumbnail post
10. Breadcrumbs
11. Related Posts with Thumb
12. Share Button
13. Top Menu
14. Main Menu responsive
15. Numbered Page Navigation
16. Button scrolling
17. Show hide emoticon
18. show hide converter

berikut ini ss fullpagenya

untuk ss responsive

• Demo

yang perlu di sesuaikan

TOP MENU

<nav id='db-fixed-nav'>
<ul>
<li>
<a href='/'><span class='on-db-logo' style='font-size:24px;vertical-align:middle'>
<img alt='logo blog' src='link gambar'/></span>
</a>
</li>
<li><a href='#'>menu</a></li>
<li><div class='right-link'>Menu</li>
</ul>
</nav>  

MENU RESPONSIVE

<div class='nav-container'>
              <div>
              <label class='responsive_menu' for='responsive_menu'>
              <span>Menu</span>
              </label>
                <input id='responsive_menu' type='checkbox'/>
              <ul class='menu'>
                <li><a href='#'>Beranda</a></li>
              <li class='dropdown'><a href='#'>menu drop</a>
                <ul>
                  <li><a href='#'>sub 1</a></li>
                  <li><a href='#'>sub 2</a></li>
                  <li><a href='#'>sub 3</a></li>                                          
                </ul>
              </li>
             <li><a href='#'>menu </a></li>
             <li><a href='#'>menu</a></li>
             <li><a href='#'>menu</a></li>
          </ul>
        </div>
</div>       

tertarik, silahkan download di link bawah ini

• Download

anda boleh menggunakan template ini secara gratis tanpa batasan dengan catatan jangan menghapus credite template yang sudah di sertakan

demikian saja share saya kali ini, semoga bermanfaat untuk anda semua, salam blogger...

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.

• Demo

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/AVvXsEifMDHMs4GLi8IEI4NaqGi4VmH7eauD-gbqpZRveUrDfXlmpjy87uKe5vmvc_01X_igC-EClLfBY3cgFEDC4t8zaxzg6pxSZX3H_dxS-2qcrbkQ1g_ZTbV-5vhleOccTNyFYvyvPv45F6Q/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/AVvXsEgcZFceKzv6vCoLBygxGyajnQnhugbYpktmnEptg3dhXxDIHpX8oF_kuPmOMV-twcjAEznzrmtkE4uXL0MzeoLcR-7vDegRU1-acpK2XHtPpWM5bYqxNoCLof91f-BXQre11Ap01vGVACg/s1600/img+loader.gif)no-repeat 50% 50%}.post-body h3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuzhNR0GVIW8NUtxitDJd1SGrLqQ6kOChCTDBbhevZ5nYj4xW_t6zITCDSMSFnBcEH-maf0j-IYJX56rDmdHqovvno05b7itrQBdIzbAO12wDrAcGGhuXZJAx_ZC_ZQ6ZAsPwAxQTVAvI/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/AVvXsEj3P4QpDPx3WwQMSi7ZegwmBkSxB-zWWubXU52doeKtOPUEFD-dfX9MKM3CY9c9N8pwbhXEOd3M7-ANXeebbZumqBGvIQ9Azp_jeqC2O94GFL6uqEB2dzjBJa81ouUbc_ASTEx_FZAz2_Y/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/AVvXsEg8ISYqSJAgBkxbtDyzi-K1MXDKmeSoUB_vgddUxeEFGNdXRLrjLoUWFC7IzAn_Tv6yGIuRi2cIjJL1mR7A7aGeNFw3C4E52mW9g0pQ8rtjMvpBW2lD-p2E3OrXMO3qAt3xlTGGosywlBU/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/AVvXsEjVfcg3_lAdKm4nHVV2DfPD8tGKgUv4VrTGFPH5ht2d0NsW9qWkVzwRparzHdSl9QTviVhUW-nQt696pHmyDcOCdT_oaJLk11GQdCCKPZJLoVMiQ9pP2Jex54Tgx0pXt4Cwpx_e3sY2up24/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/AVvXsEjRUB-9w97eYhya0PXhOHEZXt3ohz5V68xragKjniIVdSQCeoc_DIPslQJKXTZFv-ZfIy352eNyTore7cinpm0ENxNySk0vUaRqP02XMx0Vw4aj2KRNgnGP3SSCmEPBdfXiblzaoXWtCqI/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/AVvXsEjVfcg3_lAdKm4nHVV2DfPD8tGKgUv4VrTGFPH5ht2d0NsW9qWkVzwRparzHdSl9QTviVhUW-nQt696pHmyDcOCdT_oaJLk11GQdCCKPZJLoVMiQ9pP2Jex54Tgx0pXt4Cwpx_e3sY2up24/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/AVvXsEhNxBAD1w1RD10ptJCUGqS0ELFzey21JAXLAMqXEkTdl00FS4nVcP8L-pr97Pj29BuAUSL-90S7V2xGX0fIqGzF5qZ4Gz53ava-NE3Q8fzhgTm2sDbU_UZAckc78QlwfBDEE5SPHlN6kw8/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/AVvXsEjlwJX1aHU1M9dULD_ir4bKQNd3_zK5MonOhboLoKnrDbWnpGG1SYzwbRC7eRh9DQ20xmf_eZwWduucrWTvSIuY82Z24Ppq4K6Rwtt2SQSOjC9K6XCLE3SK9Z3V1Zhz95x10WSFczc9VGc/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/AVvXsEjDuVcjVIop6VBdXg73h9hHqx8uGz2Nnv2jOuVW30MLnxwUI-imas747KjPgzgwrqxwrVp5ETEvtJlMB6FiJkxZsxjYtp7vk9REtdZBUyK9k5P-ZOUHg1hRRyTEx7fr5NEl7ntSlnyEgUg/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