Explorepati: Kerangka Blogger Keren Responsive Buat Template Bikin Pusing

Geishavana - Yah pengen buat template blogger susahnya minta ampun ni sahabat Geishavana. Jlimet tur yo ribet kalau istilahnya bahasa jawa hehe. Ya dari pada susah buat sendiri mending kita download aja ya sahabat Geishavana. Tapi kalau kita beli template kita pasti sama dengan yang lain.

Jika kalian memiliki uang maka kita bisa beli atau pesan untuk membuatkan template. Ya tapi itu perlu biaya yang cukup lumayan mahal ya sahabat Geishavana. Nah Geishavana punya saran ni buat temen-temen yang suka utak-atik script code Blogger. Geishavana punya kerangka blogger keren abis dan yang tidak kalah keren kerangka Blogger ini juga responsive.

Gimana sahabat Geishavana minat buat template sendiri...? Ni Geishavana kasih kode scriptnya

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<meta content='description' name='description'/>
<meta content='keyword' name='keywords'/>
<b:if cond='data:blog.pageType != "item"'>
<link href='https://plus.google.com/+URLG+?rel=publisher' rel='author'/>
<link href='https://www.blogger.com/change-favicon.do' rel='icon' type='image/gif'/>
<meta content='GSV' name='google-site-verification'/>
<meta content='Alexa ID' name='alexaVerifyID'/>
</b:if>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' 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 == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex,follow' name='robots'/>
<meta content='noindex,follow' name='googlebot'/>
</b:if>


<b:skin><![CDATA[/]]></b:skin>
<style type='text/css'>
/* -----------------------------------------------------
Name : Geishavana
Author : Geishavana
URL : http://geishavana.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 ---------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/

#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;
}

/*--------------------------------------------- Batas Header ---------------------------------------------*/

/*------------------------------------------------------------------------------------------------*/
/*--------------------------------------------- Main ---------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/
#main-wrapper{
margin:10px;
}

/*--------------------------------------------- Main ---------------------------------------------*/
#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;
}
/*--------------------------------------------- Batas Main ---------------------------------------------*/

/*--------------------------------------------- Sidebar ---------------------------------------------*/
#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;
}
/*--------------------------------------------- Batas Sidebar ---------------------------------------------*/

/*--------------------------------------------------------------------------------------------------*/
/*--------------------------------------------- Footer ---------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/

#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;
}
/*--------------------------------------------- Batas Footer ---------------------------------------------*/

/*------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------- Responsive ---------------------------------------------*/
/*------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------- Responsive 1024px ---------------------------------------------*/
@media screen and (max-width:1024px) {
// CSS Untuk reponsive //
}
/*--------------------------------------------- Batas Responsive 1024px ---------------------------------------------*/

/*--------------------------------------------- Responsive 980px ---------------------------------------------*/
@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%}
}
/*--------------------------------------------- Batas Responsive 980px ---------------------------------------------*/

/*--------------------------------------------- Responsive 800px ---------------------------------------------*/
@media screen and (max-width: 800px){
// CSS Untuk reponsive //
}
/*--------------------------------------------- Batas Responsive 800px ---------------------------------------------*/

/*--------------------------------------------- Responsive 750px ---------------------------------------------*/
@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%}
}
/*--------------------------------------------- Batas Responsive 750px ---------------------------------------------*/

/*--------------------------------------------- Responsive 770px ---------------------------------------------*/
@media screen and (max-width: 770px){
// CSS Untuk reponsive //
}
/*--------------------------------------------- Batas Responsive 770px ---------------------------------------------*/

/*--------------------------------------------- Responsive 480px ---------------------------------------------*/
@media screen and (max-width: 480px){
// CSS Untuk reponsive //
}
/*--------------------------------------------- Batas Responsive 480px ---------------------------------------------*/

/*--------------------------------------------- Responsive 320px ---------------------------------------------*/
@media screen and (max-width: 320px){
// CSS Untuk reponsive //
}
/*--------------------------------------------- Batas Responsive 320px ---------------------------------------------*/

/*--------------------------------------------- Responsive 240px ---------------------------------------------*/
@media screen and (max-width: 240px){
// CSS Untuk reponsive //
}
/*--------------------------------------------- Batas Responsive 240px ---------------------------------------------*/

</style>


</head>



<body>


<div id='outer-wrapper'>


<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>



<div id='main-wrapper'>


<div id='header-navigation'>

</div>



<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>



<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<div style='clear:both;'/>
</div>
<div class='clear' style='height:40px'/>



<div class='credit'>
<p>Copyright <a expr:href='data:blog.homepageUrl' title='All Rights Reserved'> <data:blog.title/></a></p>
<span>Designed By: <a href='/' title='Geishavana'>Geishavana</a></span>
<div class='clear'/>
</div>


</div>


</div>



<b:include data='blog' name='google-analytics'/>

</body>

</HTML>

Semoga kerangka Bloggernya bermanfaat ya buat temen-temen. Jangan lupa di share ya sahabat Geishavana. Terimakasih...

Explorepati

Pages

Wednesday, July 27, 2016

Kerangka Blogger Keren Responsive Buat Template Bikin Pusing - Geishavana

2 comments: