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" ?>Kemudian simpan template anda.
<!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>
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/AVvXsEia6MsCmMSp2PtP2taGuQMPeJ1-aycVwKxlWReQZG9V8ikIHnoK7DQKphzBl_dwAxIg3S40lioVj_TdpRjAJ5pJisn4dn6T2kyqv9ZIsAMRN53sVmKL2OmqYXmiwOFraa8domyJxLs9IpY/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 == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</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;'/> <!-- clear for photos floats -->
</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!
Posting Komentar