Cara Membuat Sidebar Kanan Pada Template Blog

Cara Membuat Sidebar Kanan Pada
Template Blog
Written by Jamaluddin Muhammad on 9/27/2014 , ,
Cara Membuat Sidebar Bersebelahan Dengan Artikel Pada Template Blog - Artikel ini
merupakan lanjutan dari artikel sebelumnya yaitu Cara Membuat Template Blog. Sekarang
kita akan belajar membuat Sidebar Kanan yang bersebelahan langsung dengan artikel blog.
Pada tutorial header, kemarin kita membuat widget tersebut bersebelahan. Kode CSS nya
kurang lebih memakai float:left dan float:right. Begitu pula dengan cara membuat Sidebar.
Jika anda ingin membuat artikelnya berada di kiri, gunakan css float:left dan Sidebar berada
di kanan, gunakan float:right.
Sebelum membuat Sidebar, kita harus menentukan berapa ukuran artikel dan berapa ukuran
sidebar. Ukurannya akan kita sesuaikan dengan ukuran kemarin yang terdapat pada artikel
Cara Membuat Template, artikel berukuran 680px dan sidebar berukuran 1000-680 px =
320px. Pastinya sudah tau kan kenapa sidebarnya dibuat berukuran 320px? Sidebar dibuat
dengan ukuran 320px tujuannya untuk menyesuaikan dengan iklan yang biasanya berukuran
300 x 250 px.
Kita anggap nama CSS untuk artikel yaitu #artikel-wrapper dan untuk sidebar yaitu #sidebar-
wrapper. Sudah disepakati sebelumnya di atas ukuran-ukuran dan letak-letaknya. Artikel
680px berada di kiri dan sidebar 320px berada di kanan. Kurang lebih CSS nya seperti
dibawah ini.
#artikel-wrapper{float:left;width:680px;overflow:hidden;}
#sidebar-wrapper{float:right;width:320px;overflow:hidden;}
Letakkan CSS tersebut di bawah #wrapper
Nah, bagaimana cara untuk meletakkan HTML-nya? Caranya mudah, sama seperti tutorial
membuat header, ada pembungkus dan ada element widget (b:section). Gantikan kode
<b:section class='main' id='main'>...sampai...</b:section>
Ganti dengan kode dibawah ini.

<aside id='artikel-wrapper'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar'/>
</aside>
Maka hasilnya akan terlihat seperti gambar dibawah.
Sekarang coba Simpan Template dan lihat hasilnya. Apabila ada kesulitan bisa bertanya
dengan cara berkomentar. Selamat mencoba dan semoga sukses.
Cara Membuat Template Blog Sendiri
Cara Membuat Template Blogger - Hi sobat blogger, kali ini saya akan membagikan sebuah artikel
yaitu Cara Membuat Template Blog. Sebenarnya cara ini bukan saya yang membuatnya, tetapi saya
hanya re-share Tutorial yang diberikan oleh Mas Noval Bintang, tepatnya pada artikel Cara Mandiri
Membuat Template Blog Sendiri.
Seperti yang kita ketahui, template merupakan dasar dari blog. Tanpa template, blog tidak akan bisa
ditampilkan. Itulah pentingnya sebuah template bagi blog.
Membuat template sebenarnya sangat susah dan membutuhkan waktu yang lama. Namun, jika
sudah terbiasa maka akan lebih mudah dan cepat untuk membuatnya. Jadi jangan salah jika
beberapa orang tidak membagikan templatenya secara gratis namun dijual sebagai template
premium.
Dalam membuat template anda juga perlu mendesign seperti apa template yang akan anda buat.
Pada tutorial ini anda akan belajar membuat template dari design template yang sudah ada yaitu
"Fast Simple 2014" Pada template ini anda akan membuat dasar-dasar dari template seperti:
 Header
 Artikel
 Sidebar
 Footer
Keempat itu menurut saya adalah dasar dari template. Pada artikel ini kita akan membuat patokan
dari templatenya dulu, untuk Header, Sidebar, dan Footer akan dibahas pada artikel selanjutnya.
Cara Membuat Template Blogger

1. Siapkan blog baru untuk memulai pembuatan template.
2. Seperti biasa, masuk ke Template > Edit HTML
3. Kode dibawah ini adalah HTML dasar dalam pembuatan template.
<HTML>
<head>
</head>
<body>
</body>
</HTML>
Itu adalah sebuah HTML dasar. Namun, untuk sebuah template, anda tidak bisa hanya menggunakan
HTML diatas, karena template diatas belum mengandung CSS dan Kode-kode yang seharusnya sudah
ada dalam template. Template dasar dari sebuah blog yaitu seperti yang ada dibawah ini. Template
dasar ini sudah dirancang dengan CSS, meta tag yang paling dasar dan hanya memiliki widget artikel
saja.
<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='YOUR DESCRIPTION HERE' name='description'/>
<meta content='YOUR KEYWORD1, YOUR KEYWORD2, YOUR KEYWORD3' name='keywords'/>
</b:if>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:title='data:blog.title + " - Atom"' href='/feeds/posts/default' rel='alternate'
type='application/atom+xml'/>
<link href='https://plus.google.com/YOUR-GPLUS-ID' rel='author'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0'
name='viewport'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<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.homepageUrl == data:blog.url'>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' name='keywords'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='mas.bintangblog' property='fb:admins'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
<b:else/>
<meta content='index,follow' name='robots'/>
</b:if>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<title><data:blog.pageTitle/> Mobile Version</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title>Archive for <data:blog.pageName/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<meta content='5;/' http-equiv='refresh'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
</b:if>
</b:if>
</b:if>
<style type="text/css"><!-- /* <b:skin><![CDATA[
/*
NAME : Template Percobaan
DESIGNER : Masterbama
URL : www.masterbama.blogspot.com
*/
#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,addres
s,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;b
order: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>
</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>
4. Sekarang coba Simpan dan lihat hasilnya.
5. Pasti hasilnya masih jelek, untuk membuatnya lebih rapi maka perlu dibuat pembungkus pada
artikel, sebut saja #Wrapper. Untuk membuatnya anda harus memberikan CSS berikut tepat diatas
]]</b:skin>
#wrapper{width:1000px;margin:0 auto;overflow:hidden;background: #fff;}
Dan memberikan kode dibawah ini tepat di bawah <body>
<div id='wrapper'>
Jangan lupa untuk menambahkan penutupnya tepat diatas </body>
</div>
6. Simpan template, dan sekarang lihat hasilnya.
Cara Membuat DropDown Menu Dibawah

Header Pada Template Blog
Cara Membuat DropDown Menu Dibawah Header Pada Template Blog - Setelah sebelumnya kita
belajar membuat Sidebar dan Header. Maka sekarang kita akan belajar membuat DropDown.
DropDown yang akan kita buat nantinya akan berada tepat dibawah header.
Cara membuatnya cukup mudah dari tutorial-tutorial sebelumnya. Untuk membuatnya cukup
menambahkan CSS dan HTMLnya saja.
Cara Membuat Dropdown :

Taruh CSS dibawah ini diatas ]]</b:skin>
nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;}

nav * {margin:0 0 0 0;padding:0 0 0 0;list-style:none;}
nav ul {overflow: hidden;float:left;background:#1BC7A5;margin: 5px 0;width: 100%;}
nav li {float:left;display:inline;}
nav li a {padding:3px 15px;line-height:40px;color:#fff !important;display:block;text-
decoration:none;}
nav li ul{margin:0px;display:block;width:170px;position:absolute;left:auto;z-
index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s;}
nav li li {display:block;float:none;width:100%;}
nav li:hover > ul {visibility:visible;width:200px;opacity:1;}nav li li ul {left:200px;margin-top:-40px;}
nav li.sub > a {position:relative;padding-right:30px;}
nav li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-style:solid;border-
color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px;}
nav li.sub li.sub > a:after {content:"";width:0px;height:0px;border-width:4px;border-
style:solid;border-color:transparent transparent transparent
#eee;position:absolute;top:16px;right:10px;}
nav li li:hover{background:rgba(0, 0, 0, 0.16);}
Dan letakkan HTML dibawah ini tepat dibawah </header>
<nav>
<ul>
<li><a href='/'>Beranda</a></li>
<li class='sub'><a href='/search/label/Blog'>Template</a><ul>
<li><a href='/search/label/CSS3'>CSS3</a></li>
<li><a href='/search/label/HTML5'>HTML5</a></li>
<li><a href='/search/label/Responsive'>Responsive</a></li>
<li><a href='/search/label/SEO'>SEO</a></li>
</ul>
</li>
</ul>
</nav>
Atur tulisan berwarna merah dengan link tujuan dan yang berwarna hijau dengan Tulisan yang akan
ditampilkan. Jika sudah, silakan Simpan Template dan lihat hasilnya. Selamat mencoba.
Internet Download Manager + Crack 2014

Written by Jamaluddin Muhammad on 3/12/2014 ,
Pada postingan kali ini masterbama akan berbagi sedikit ilmu tentang Internet Download Manager
atau lebih terkenal dengan sebutan IDM. Ini adalah software downloader yang paling terkenal saat
ini, dimana orang-orang sering menggunakan software ini untuk mendownload file yang besar.
Kelebihan IDM ini adalah pada kecepatan download yang bisa mencapai 10x kecepatan download
biasa, selain itu kita dapat meneruskan file download yang lama jadi misalkan internet kita terputus,
kita masih dapat mendownloadnya lain waktu.
Pernahkah kalian waktu selagi mendownload menghabiskan waktu yang lama dan quota yang
banyak lalu internetnya terputus? Jika begitu pasti harus mendownload dari awal. IDM adalah
solusinya, kita dapat meneruskan download yang terputus jadi ga perlu khawatir kalau downloadnya
hilang, dengan IDM semua itu teratasi.
Tapi setelah kita mendeownload IDM, kita hanya mendapat trial 30 hari dan setelah itu IDM tidak
bisa digunakan lagi. Maka dari itulah saya menulis postingan ini. Oke ga usah lama-lama kita
langsung ke TKP.
Cara Crack :
1. Matikan Antivirus
2. Instal IDM (Restart komputer bila disuruh)
3. Extract Crackya . Password rar : www.masterbama.blogspot.com
4. Close IDM dan matikan Melalui Windows Task Manager
5. Copy Cracknya “Patch 1 dan Patch 2” dan paste kedalam folder IDM (C:\Program Files
(x86)\Internet Download Manager)
6. Jalankan kedua Patchnya

7. Nyalakan IDM kembali
Link Download versi terbaru belum tersedia dan akan segera diperbarui.

Cara Membuat Sidebar Kanan Pada Template Blog

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cara Membuat Sidebar Kanan Pada Template Blog

Diunggah oleh

Hak Cipta:

Format Tersedia

Cara Membuat Sidebar Kanan Pada

Letakkan CSS tersebut di bawah #wrapper

Ganti dengan kode dibawah ini.

Maka hasilnya akan terlihat seperti gambar dibawah.

Cara Membuat Template Blogger

2. Seperti biasa, masuk ke Template > Edit HTML

3. Kode dibawah ini adalah HTML dasar dalam pembuatan template.

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

4. Sekarang coba Simpan dan lihat hasilnya.

#wrapper{width:1000px;margin:0 auto;overflow:hidden;background: #fff;}

Dan memberikan kode dibawah ini tepat di bawah <body>

Jangan lupa untuk menambahkan penutupnya tepat diatas </body>

6. Simpan template, dan sekarang lihat hasilnya.

Cara Membuat DropDown Menu Dibawah

Cara Membuat Dropdown :

nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;}

Dan letakkan HTML dibawah ini tepat dibawah </header>

Internet Download Manager + Crack 2014

6. Jalankan kedua Patchnya

Anda mungkin juga menyukai