Cerita BlogKu: Cara membuat template blogger Sendiri yang Keren

halo selamat pagi abang dan teteh.......
kembali lagi ya ketemu sama saya penulis yang ceplass ceplos nggak ada duanya ini... hehehehehh...

sebelumnya kita sudah belajar bagaimana cara membuat yang namanya blog ya yang kita buat melalui program blospot.

Nah kali ini abang dan teteh, setelah membuat blog tentu kita pengennya membuat atau mempercantik tampilan dari blog kita pribadi yaa.... saya kira membuat templat harus ya biar enak kita melihat tampilan blog kita sendiri......

Baik abang dan teteh pada kesempatan kali ini kita akan membahas mengenai bagaimana kita membuat tampilan blog kita peribadi... sudah tahukah kamu bagimana cara membuat templat blog sendiri yang keren.

baiklah abang dan teteh pada kesempatan ini akan saya bantu abang dan teteh dalam membuat templat blog sendiri ....... kali ini kita akan membuat templat blog sendiri dengan struktur Header, Header ads, Content, Sidebar dan Footer

Pertama abang dan teteh masuk ke Editor template blogger.

hapus semua kode yang ada pada templat tersebut atau bisa juga dengan jalan menggunakan control A +delete. setelah itu abang dan teteh copy semua isi templat dibawah ini kemudian klik paste templat yang sudah abang dan teteh copy pada laman tersebut.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<HTML>

<head>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>

<meta content='noindex,nofollow' name='robots'/>

</b:if>

<b:include data='blog' name='all-head-content'/>

<meta content='####################' name='google-site-verification'/>

<meta content='####################' name='msvalidate.01'/>

<meta content='####################' name='alexaVerifyID'/>

<meta content='index, follow, noodp, noydir' name='robots'/>

<meta content='id' name='geo.country'/>

<meta content='Mas Yadi' name='author'/>

<meta content='1 days' name='revisit-after'/>

<meta content='Indonesia' name='geo.placename'/>

<meta content='blogger' name='generator'/>

<meta content='general' name='rating'/>

<meta content='index, follow, snipet' name='googlebot'/>

<b:if cond='data:blog.pageType == "index"'>

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

<meta content='website' property='og:type'/>

<meta expr:content='data:blog.title' property='og:site_name'/>

<meta content='id_id' property='og:locale'/>

<meta expr:content='data:blog.pageTitle' property='og:title'/>

<meta expr:content='data:blog.metaDescription' property='og:description'/>

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

<title><data:blog.pageTitle/></title>

<meta content='KEYWORD+BLOG_ANDA' name='keywords'/>

</b:if>

<b:if cond='data:blog.pageType != "index"'>

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

<meta content='article' property='og:type'/>

<meta expr:content='data:blog.title' property='og:site_name'/>

<meta content='id_id' property='og:locale'/>

<meta expr:content='data:blog.pageName' property='og:title'/>

<meta expr:content='data:blog.metaDescription' property='og:description'/>

<b:if cond='data:blog.postImageThumbnailUrl'>

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

</b:if>

<title><data:blog.pageName/> - <data:blog.title/></title>

<meta expr:content='data:blog.pageName' name='keywords'/>

</b:if>

<style type="text/css"><!-- /* <b:skin><![CDATA[

Bagi anda yang mengerti dan blogger profesional pastinya tidak akan menghapus link ini. Membuat template ini tidak cukup 1 jam bro!

Blogger Template Style

Name : Nama Template Anda

Date : Tanggal Pembuatan Template Ini

Updated by : Komplek petani/Namamu

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

a:link,a:visited{color:#1BC7A5;text-decoration:none;margin-left:0px;margin-right:0px;}

a img{border-width:0;}

img{max-width:100%;vertical-align:middle;border:0;height:auto;}

.quickedit{display:none;}

.clear{clear:both;}

body{background:#eaeaea;margin:0;padding:0;font-family: calibri;color:#2c3e50;}

]]></b:skin>

<style type='text/css'>

</style>

</head>

<body>

<b:section class='main' id='main'>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>

</b:section>

</body>

</HTML>

Membuat Wrapper pada template

abang dan teteh tinggal memasang kode css berikut ini diatas tampilan </Style

#wrapper{

background:#FFF;

width:1024px;

overflow:hidden;

margin:0 auto;

}

Tahukan anda abang dan teteh setelah supaya css tersebut berfungsi dengan baik maka kita panggil dengan memasang kode HTMlnya ya... caranya kita cari kode <Body> kemudian abang dan teteh letakkan kode tersebut di bawah tepat kode <body> tersebut

Kemudian abang dan teteh tutup kode wrapper tersebut dengan memasang penutup div dibawah ini di atas kode <body>

</div>

Setelah itu abang dan teteh tinggal menyimpan dan bisa melihat hasilnya,, pada tahap ini abang dan teteh sudah bisa membuat templat sederhana sendiri ... hehehh....

Cara membuat header dan header Ads

abang dan teteh pasang kode css berikut ini diatas kode </style>

#header-wrapper{width:100%;overflow:hidden;}

#header{width:262px;overflow:hidden;float:left;}

#header-ads{width:728px;overflow:hidden;float:right;}

.header .widget{padding:10px;}

abang dan teteh tinggal memasang kode HTMl berikut ini di bawah <div id='wrapper'>

<b:section class='header' id='header' maxwidgets='1'>

<b:widget id='Header1' locked='true' title='Mas Yadi Blogger Template (Header)' type='Header'></b:widget>

</b:section>

<b:section class='header' id='header-ads' maxwidgets='1'/>

</header>

Cara membuat Post dan Sidebar di Blog

abang dan teteh tinggal pasang CSS kode postingan dan sidebar berikut ini di atas </style>

#artikel-wrapper{float:right;width:724px;overflow:hidden}

#sidebar-wrapper{float:left;width:300px;overflow:hidden}

#sidebar{padding:5px}

.sidebar h2,.sidebar h3{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}

Pasang kode HTML berikut ini dan pasang diatas <b:section class='main' id='main'>

<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>

</aside>

Abang dan teteh pasang Kode Html artikel ini dan taruh di atas <b:section class='main' id='main'>

<aside id='artikel-wrapper'>

Langkah terakhir abang dan teteh tinggal menutup kode Html tadi dengan meletakkan kode penutup dibawah ini tepat di bawah </b:section> atau bisa juga diatas </div>

</aside>

Cara membuat 3 Footer di Blog

abang dan teteh pasang kode Css Footer dibawah ini diatas kode </style>

#footer-wrapper{width:100%;clear:both}

.footer h3,.footer h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}

.footer{width:32%;padding:5px}

#footer-1{float:left}

#footer-2{float:left}

#footer-3{float:right}

selanjutnya pasang kode Html footer berikut ini dan letakkan di atas </div> yang terakhir.

<b:section class='footer' id='footer-1' showaddelement='yes'/>

<b:section class='footer' id='footer-2' showaddelement='yes'/>

<b:section class='footer' id='footer-3' showaddelement='yes'/>

</footer> 

Nah begitu lah langkah-langkahnya Cara membuat tEmplat blok sendiri yang sederhana untuk abang dan teteh sekalian

Cerita BlogKu

Wednesday, November 4, 2015

Cara membuat template blogger Sendiri yang Keren

No comments:

Post a Comment