Tuesday, 11 February 2014

Kerangka Template Blogger

Halo, kali ini saya sempatkan untuk menulis sebuah artikel yang semoga bisa bermanfaat bagi nusa dan bangsa :) Buat para newbie yang pengen membuat Template asli buatan sendiri, saya akan memberikan kerangka Template yang keren dan menuju responsive :) langsung saja :

Ini hanya dasar template yang bisa dekembangkan :D

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<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'/>

<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.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

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

<!--:[ START STYLE ]:-->
<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]
<style>
/* -----------------------------------------------------
Name:     Kerangka FI-KA
Author:   Hafizuddin Slamet Irmawan
URL:      http://hafizsec.blogspot.com
-------------------------------------------------------- */
#navbar-iframe{display:none;height:0;visibility:hidden}

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

body{background:#f8f8f8}

#fi-ka-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}

#fi-ka-main{margin:10px}
#fika-content{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}

#fika-sidebar{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}

#fika-footer{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,#fi-ka-wrapper,#header-wrapper,#header-navigation,#fika-content,#fika-sidebar,#fika-footer{width:95.725%;margin:0 auto}
#header-navigation,#fika-content,#fika-sidebar,#fika-footer{display:inline-block;width:100%}
}

@media screen and (max-width: 750px) {
body,#fi-ka-wrapper,#header-wrapper,#header-navigation,#fika-content,#fika-sidebar,#fika-footer{width:90%;margin:0 auto}
#header-navigation,#fika-content,#fika-sidebar,#fika-footer{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='fi-ka-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='fi-ka-main'>

<!--:[ 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>
 </div>
</b:includable>
</b:widget>
</b:section>
</div>
<!--:[ End Header Navigation ]:-->

<!--:[ Start Content Wrapper ]:-->
<div id='fika-content'>
    <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='fika-sidebar'>
<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='fika-footer'>
<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://hafizsec.blogspot.com' title='Hafiz'>Hafiz</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>
</HTML>


 Hal Yang Perlu Di Perhatikan
Jika menambah suatu widget, jangan lupa menghapus kode : <b:include name='quickedit'/> agar template valid HTML 5
Diposkan oleh di
Label: ,
Share this article :
Facebook Twitter Google+

9 komentar

avatar
Balas Hapus
fizzi

premium aja :D pertamaxnya mahal. ckckck

11 February 2014 at 18:49
avatar
Balas Hapus
R

Nice post gan
izin coba yaa

13 February 2014 at 06:30
avatar
Balas Hapus
Hendra

wow.. maksih udah share ginian (y)

13 February 2014 at 16:30
avatar
Balas Hapus
fizzi

Semoga bermanfaat gan :D

13 February 2014 at 21:35
avatar
Balas Hapus
Septian Rizky Pratama

Ijin Copy Script Nya Gan.Mau Buat Template Sendiri

19 February 2014 at 19:25
avatar
Balas Hapus
Anonymous

Premium sekarang juga mahal :3

7 November 2014 at 07:37

Dont give us spam and active link :))

Contact Form

Name

Email *

Message *

ads

Hot Minggu Ini

DONASI SEIKHLASNYA

2014 Design by Hafizuddin S I // All Rights Reserved ®
close