Membuat Template Blogspot Sendiri

By Bertuah -

Tutorial Cara Membuat Template Blog



Membuat Template Blogspot Sendiri Blogger


Dengan membuat template blog sendiri, akan menjadikan seorang blogger lebih mandiri dan kreatif dalam menyajikan tampilan blog :D

<!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' prefix='og: http://ogp.me/ns#' 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[
/* -----------------------------------------------------
Smart Template For Blogspot By http://fau2i.blogspot.com
Name:     Smart Template
Author:   Muhammad Fauzi
URL:      http://fau2i.blogspot.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://fau2i.blogspot.com' title='Fauzi Blog'>Fauzi Blog</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>

Comments

Post a Comment

Popular posts from this blog

Tombol Like Facebook Share Twitter Dan Google Plus

By Bertuah -
Image
Cara memasang Tombol Like Facebook Share Twitter Dan Google Plus di blogspot. <b:if cond='data:blog.pageType == &quot;item&quot;'> <style> .social-network{width:100%;height:auto;margin:10px 0;clear:both} .social-network li{display:inline-block;height:20px;list-style:none outside none;padding:10px;transition:all 0.8s linear 0s;vertical-align:middle;box-shadow:0 1px 4px 1px rgba(0,0,0,.5)} .social-network li:first-child{background:#c4302b} .social-network li + li{background:#00a0d1} .social-network li:last-child{width:50%;background:#3b5998} .social-network li:hover{background:rgba(255,255,255,.7)} </style> <div class='social-network'> <li class='gplus'> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'/> <g:plusone expr:href='data:post.url' size=''/> </li> <li class='twitter'> <a class='twitter-share-button' data-count='h
Read more

CSS Arrow Kotak Dengan Tanda Panah

By Bertuah -
Cara Membuat Kotak Dengan Tanda Panah Dengan Menggunakan CSS Arrow. Tanda Panah Atas .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: #88b7d5; border-width: 30px; left: 50%; margin-left: -30px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #c2e1f5; border-width: 36px; left: 50%; margin-left: -36px; } Tanda Panah Bawah .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-top-color: #8
Read more

Jobera Perfect Job Portal [1.8]

By Bertuah -
Image
Jobera is a complete solution for a similar job matchmaking Job Bank Web site. Theme is equipped with a variety of features, which help you create an amazing job portals job openings within a few seconds. Theme is highly customizable, offering endless possibilities can be freely modified. Its main feature is a user-friendly interface, custom layouts, flexible settings. Theme Features: Responsive Design Retina Support Variety of color schemes Variety of home layout Powerful admin panel Embed YouTube, Dailymotion, Vimeo or Selfhosted movie Over more than 100 Google API Fonts WordPress 3.5+ Google Analytics (Analysis) PSD layered file customization 7 Custom Gadgets Supports all major browsers Documentation Demo Download
Read more