Cara Membuat Template Blog Responsive Sendiri (1 Kolum)

Friday, March 21, 2014

Cara Membuat Template Blogger Responsive Sendiri (1 Kolum)

Responsive Template Blogger - Merupakan sebuah template blog yang dapat menyesuaikan ukuran templatenya sendiri sesuai dengan ukuran device nya. Sebelumnya juga saya sudah pernah membuat artikel tentang cara memodifikasi template agar menjadi responsive di blog Hack4rt. Namun, kali ini di blog baru ini TUMPAS akan memberikan hal yang baru, saya akan menjelaskan bagi anda yang ingin membuat template blog sendiri dan responsive! Namun, masih 1 kolum. Di blog TUMPAS ini, tidak akan ada lagi cloning-cloning template atau widget, okay. Agar tidak terjadi kesalahan, yang ingin mencoba tutorial ini silahkan buat blog baru :D

Tahap Pembuatan Template

1. Buat Kerangka Template (CSS + HTML)

2. Buat Post Snippet di HomePage

3. Tambahkan CSS media query untuk responsive

4. Design lagi untuk memperindah

Mulai

Kerangka Template

Disini saya sudah menyediakan kerangka template yang paling dasar dari template blog. Pada kerangka template ini sudah tersedia widget HEADER dan POST dan juga CSS paling dasar. Hapus semua isi template bawaan anda kemudian gantikan dengan kode berikut.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html >
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.title/></title>
<b:skin><![CDATA[
/*
Designer: Noval Bintang
URL : http://www.tumpas.com
URL : http://www.hack4rt.us
*/
#navbar-iframe{height:0;visibility:hidden;display:none}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}
body{background:#fff ;color:#000;margin: 0 auto;font-family:Arial, sans-serif;font-size: .8em;word-wrap: break-word;}
a:link,a:visited{color:#1e598e;text-decoration:none}
a:hover,#nav a:hover,#header a:hover,.post h2 a:hover,.footer a:hover,#nav h1 a:hover,#nav h2 a:hover {color:#1e598e; -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out}
a img{border-width:0}
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
#blog-pager{clear:both;}
#clear,.clear{clear:both}
#tumpas-wrapper{width:768px;margin:0 auto;border:1px solid #eee;padding:5px;}
#header{text-align: center;
max-width: 100%;
background: #eaeaea;
padding: 5px;}
#header h1.title, #header p.title{border-bottom: 1px solid #fff;
color: #00a3ff;
font-size: 30px;
text-shadow: 1px 1px #fff, 2px 2px #ccc, 3px 3px #ddd, 4px 4px #eee;}
#header .description {
font-family: Racing Sans One,Arial,Sans-Serif;
text-shadow: 1px 1px #fff;
font-size: 13px;
color: #f00;
letter-spacing: 1px;
margin: 0;
padding: 0;
}
]]></b:skin>
</head>
<body>
<b:section class='header' id='header' maxwidgets='1' showaddelemenet='no'>
<b:widget id='Header1' locked='true' title='titl blog (Header)' type='Header'/>
</b:section>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</body>
</html>

Kemudian simpan template anda.

Post Snippet pada HomePage

PostSnippet ini agar memotong artikel anda sehinggan membuat loading lebih cepat pada homepage. Untuk membuatnya silahkan keluar dari menu Template kemudian masuk lagi ke menu Template agar isi dari widget POSTING terlihat.

Gantikan kode KEDUA <data:post.body/> dengan kode berikut

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' itemprop='articleBody'>
<b:if cond='data:post.thumbnailUrl'>
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=70;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postthumb" alt="'+post_title+'" title="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
<a expr:href='data:post.url'><script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script></a>
<b:else/>
<a expr:href='data:post.url'><img class='postthumb' expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkg64nj2RUQAdO3UbSFC5hdDLB2ON9q7wI4AknW4o3HZVkwMLb7Ewh4eTtxnQY227hukEnke-Wu4OprazGoAe1DKC3Bllsb1Lu0c5kHiWTO01V5l7pnrMPcVmKjSPVvgnvlwP9blcIFBg/s70-c/default.png'/></a>
</b:if>
<b:if cond='data:post.snippet'><data:post.snippet/>
</b:if>
</div>
<b:else/>
<b:if cond='data:blog.metaDescription == ""'>

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> 
</div>
</b:if>
</b:if>
</b:if>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Kemudian letakkan kode CSS berikut tepat di bawah ]]></b:skin>

<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post{margin-bottom: 10px;
background: #f5f5f5;
width: 100%;
float: left;
margin-top: 10px;
overflow: hidden;
text-align: justify;}
.post-footer{display:none;}
.postthumb{float:left;}
</style>
</b:if>

Simpan Template Anda

Pembuatan Responsive

Berikut beberapa permasalahan yang akan diselesaikan dengan cara damai (?) yaitu pada device ukuran 800px, template mulai terlihat terlalu lebar. Agar menyesuaikan dengan ukuran device dari 800px sampai 0px akan dibuat #tumpas-wrapper dengan width 100%, padding dihilangkan dan border dihilangkan.

Kode media query dasar nya seperti berikut

@media screen and (max-width:UKURANDEVICEpx){
#NAMAELEMENT{CSS:VALUE}
}

Prakteknya, seperti berikut. Letakkan kode berikut tepat di atas ]]></b:skin>

@media screen and (max-width:800px){
#tumpas-wrapper{width:100%;border:0px solid #eee;padding:0px;}
}

Simpan Template. Selesai anda telah membuat template responsive anda sendiri!

Loh kok cuma hanya pada ukuran 800px?

Karena yang hanya menjadi masalah pada ukuran device 800px dan pada kode media query, ukuran device paling besar akan diikuti oleh yang lebih kecil. Misalkan anda membuat kode responsive dari 1024px, kode itu juga akan berlaku pada ukuran 768px, 600px, dan lebih kecil lagi.

Design Kembali

Kalau anda ingin template yang anda buat ini menjadi template blog anda selamanya, silahkan redesign ulang walaupun hanya 1 kolum. Dikesempatan waktu lain, semoga saya bisa membuat artikel yang 2 kolum atau bahkan fullscreen 3 kolum seperti template blog TUMPAS ini :D

DEMO

SUMBER : TUMPAS.COM

Si Color V2