Membuat Kerangka Template Blogspot Sendiri

Kali ini +EL Mahbub mau bagi-bagi Kerangka Template Blogspot, kamu boleh mengedit sesuka hati template ini. Silahkan bagi yang mau mencoba membuat template sendiri dar NOL. Kerangka ini boleh diedit creditnya. Sooo,, silahkan berkreasi sesukamu. ^_^


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<!--:[ START HEADING ]:-->
<head>
<b:include data='blog' name='all-head-content' />

<!-- Start Title -->
<title><data:blog.pageTitle/></title>
<!-- End Title -->

<!--:[ START STYLE ]:-->
<b:skin><![CDATA[
/* -----------------------------------------------------
Name:     ELtemplate45
Author:   EL-Mahbub.com
URL:      http://www.gubuk45.com
-------------------------------------------------------- */
#navbar-iframe{display:none;height:0;visibility:hidden}

html{-webkit-text-size-adjust:none}

body{background:#f8f8f8}

#outer-wrapper{width:980px;margin:0 auto;background:#fff;overflow:hidden;box-shadow:0 2px 6px rgba(100,100,100,.3);-moz-box-shadow:0 2px 6px rgba(100,100,100,.3);-webkit-box-shadow:0 2px 6px rgba(100,100,100,.3);color:#222;font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, 'AppleGothic', sans-serif;font-size:1em;line-height:1.575em;text-align:left}

#header-wrapper{margin:0 auto}
#header{width:100%;height:120px;clear:both}
#header-inner{margin:20px;padding:20px}

#header h1,#header h3{color:#222;font-family:Lucida sans unicode,Georgia, Times New Roman;font-weight:400;margin:0;padding:0;font-size:35px}
#header h2{color:#888;font-family:Georgia, Times New Roman;font-weight:400;text-decoration:none;margin:0;padding:0;font-size:12px}

#header-navigation{border-top:1px solid #ddd;border-bottom:1px solid #ddd}
#header-navigation ul{padding:0}
#header-navigation li{width:20px;padding:10px;list-style:none;display:inline;text-decoration:none}

#main-wrapper{margin:10px}
#content-wrapper{float:left;width:600px;border-right:1px solid #eee;margin: 0 10px}
.post-body img{padding:5px;border:1px solid #eee;box-shadow:0 2px 4px #999}
.post-body h2{border-bottom:1px solid #ccc;font:Segoe UI, Serif;line-height:1.4em;letter-spacing:.1em;color:#549D50;font-size:1.25em;margin:10px 0 4px;}
.post-body h3{font:Segoe UI, Serif;line-height:1.4em;letter-spacing:.1em;color:#303035;font-size:150%;margin-top:10px;margin-bottom:2px;}
.post-body img{overflow:hidden;border:1px solid #dcd9d9;max-width:100%;padding:5px;box-shadow:0 2px 6px rgba(100,100,100,.3);-moz-box-shadow:0 2px 6px rgba(100,100,100,.3);-webkit-box-shadow:0 2px 6px rgba(100,100,100,.3)}

img{max-width:100%;height:auto}
.video{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
.video iframe,.video object,.video embed{position:absolute;top:0;left:0;width:100%;height:100%}

a{color:#00adeb;text-decoration:none}
a:hover{color:#000609}

#sidebar-wrapper{float:right;width:320px;margin:0 10px 0 0}
.sidebar ul{padding:0}
.sidebar li{list-style:none}
.sidebar h2,.sidebar h4{font-size:16px;}
.item-thumbnail{width:72px;height:72px;padding:5px;border:1px solid #eee;box-shadow:0 2px 4px #999}

#footer-wrapper{width:100%;margin:0 auto;border-top:3px double #ccc;padding-top:10px;clear:both}
#footer1{width:33%;float:left;margin:0}
#footer2{width:33%;float:left;margin:0 0 0 5px}
#footer3{width:33%;float:right;margin:0}

.credit{margin-top:20px;border-top:2px solid #ddd}
.credit,.credit a{color:#999}
.credit p{float:left;margin-left:20px}
.credit span{display:block;float:right;margin-right:20px;margin-top:15px;font-size:75%}
.Top{border-bottom:15px solid #000;border-left:15px solid transparent;border-right:15px solid transparent;position:fixed;bottom:0;right:10%;width:0;height:0;z-index:1}

::-webkit-scrollbar{width:15px;background:rgba(0,0,0,.07);}
::-webkit-scrollbar-thumb{background:#790;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;}

@media screen and (max-width: 980px) {
body,#outer-wrapper,#header-wrapper,#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{width:95.725%;margin:0 auto}
#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{display:inline-block;width:100%}
}

@media screen and (max-width: 750px) {
body,#outer-wrapper,#header-wrapper,#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{width:90%;margin:0 auto}
#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{display:inline-block;width:100%}
}
]]></b:skin>
<!--:[ END STYLE ]:-->

</head>
<!--:[ END HEADING ]:-->

<!--:[ START BODY ]:-->
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>

<!--:[ Start Outer ]:-->
<div id='outer-wrapper'>

<!--:[ Start Header ]:-->
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Smart Theme (Header)' type='Header'/>
</b:section>
</div>
<!--:[ End Header ]:-->

<!--:[ Start Main Wrapper ]:-->
<div id='main-wrapper'>

<!--:[ Start Header Navigation ]:-->
<div id='header-navigation'>
<b:section class='topmenu' id='topmenu' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Menu' type='LinkList'>
<b:includable id='main'>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
</div>
<!--:[ End Header Navigation ]:-->

<!--:[ Start Content Wrapper ]:-->
<div id='content-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
</div>
<!--:[ End Content Wrapper ]:-->

<!--:[ Start Sidebar Wrapper ]:-->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<div style='clear:both;'/>
<div class='sidebar21' style='float:left;width:42.5%;'>
<b:section class='sidebar' id='sidebar-right-2-1' preferred='yes'/>
</div>
<div class='sidebar22' style='float:right;width:57.5%;'>
<b:section class='sidebar' id='sidebar-right-2-2' preferred='yes'/>
</div>
<div style='clear:both;'/>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
<div style='clear:both;'/>
</div>
<div class='clear' style='height:40px'/>
<!--:[ End Sidebar Wrapper ]:-->

<!--:[ Start Footer Wrapper ]:-->
<div id='footer-wrapper'>
<div id='footer-bottom' style='text-align: center; padding-top:10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer1'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
<div style='clear:both;'/>
<!--:[ End Footer Wrapper ]:-->

<!--:[ Start Credit Links ]:-->
<div class='credit'>
<p>Copyright &amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='All Rights Reserved'> <data:blog.title/></a></p>
<span>Designed By: <a href='http://www.gubuk45.com' title='gubuk 45'>Gubuk45</a></span>
<div class='clear'/>
</div>
<!--:[ End Credit Links ]:-->

</div>
<!--:[ End Main Wrapper ]:-->

</div>
<!--:[ End Outer Wrapper ]:-->

<!--:[ START EMBEDDED WIDGET ]:-->
<b:include data='blog' name='google-analytics'/>
<!--:[ END EMBEDDED WIDGET ]:-->
</body>
<!--:[ END BODY ]:-->

</html>


.

Komentar

  1. Tanks gan,sangat membantu tutorialnya. .

    BalasHapus
  2. cara modif sidebarnya gimana gan ??

    BalasHapus
  3. Balasan
    1. ya gitu doang gan,,,
      cara makainya copy semua code htmlnya ini ctrl+C, terus beralih ke Edit HTML blog nya agan dan ctrl+A, trus ctrl+V langsung simpen deh.... (y)
      dan setelah itu, baru di edit2 sesuka agan... :)

      Hapus
  4. Yang bagus seditnya pake apa gan.... Mohon rekomendasinya,, soalnya saya pemula yang ingin belajar..

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Kumpulan Pribahasa Arab Lengkap - Mahfudzot

DO'A SEORANG LELAKI UNTUK GADIS PUJAANNYA

FATIN SHIDQIA - Jalan Cinta (Sherina) 19 April