Blog Buat Bloggers


Berbagi Pengetahuan di Internet

4
Melanjutkan postingan blogger tutorial sebelumnya tentang cara design blog template blogger adalah cara membuat sidebar wrapper template blogger blogspot, Sidebar atau bagian bar halaman terdiri dari beberapa bagian diantaranya sidebar bagian kanan (sidebar right), sidebar bagian kiri (sidebar left) dan sidebar 2 bagian berada disebelah kanan dan kiri template blog..

Di beberapa template bagian bagian sidebar tersebut banyak digunakan, kita tinggal memilih buat mendownload template dengan sidebar yang diinginkan sesuai keperluan widget blog,  ataupun jika tidak sesuai dengan template yang diinginkan buat menampilkan widget pada gadget sidebar tersebut, kita bisa membuat sidebar template blog menjadi dua bagian, misalnya sidebar kanan (sidebar right) menjadi dua bagian, sidebar kiri (sidebar left) menjadi dua bagian, atau sidebar dua bagian berada disebelah kanan dan sebelah kiri halaman posting.

Postingan tentang cara membuat sidebar terbagi dua bagian berikut adalah tutorial buat cara membuat sidebar sebelah kanan menjadi dua bagian, untuk tutorial membuat sidebar sebelah kiri menjadi dua bagian tinggal mengganti float right dengan float left, sehingga sidebar dua bagian sebelah kanan menjadi sidebar dua bagian sebelah kiri. Sedangkan tutorial untuk cara membuat sidebar berada disebelah kiri dan kanan akan dibahas pada postingan berikutnya

Setelah anda mengerti tata letak sidebar seperti yang sudah dijelaskan diatas, Tutorial cara Membuat Sidebar Terbagi 2 seperti berikut

1. Sign in ke blogger.com

2. Klik menu Layout,  Tata letak

3. Kklik Edit HTML

4. Klik Download full template untuk Cadangan

5. Copy paste kode CSS dibawah ini diatas kode ]]></b:skin>

#Sidebar-2 {
float: right;
word-wrap: break-word;
overflow: hidden;
}

#sidebar {
width: 300px;/* SESUAIKAN */
float: left;
overflow: hidden;
margin:0px 0px 10px 0px;
}

#sidebar h2 {
color: #FFFFFF;
background: #000000;
font-family: Arial;
font-size:16px;
display:block;
text-align: center;
padding:5px 0px 5px0px;
margin:0 0 5px 0;
border: 1px solid #cccccc;
}

#sidebarL{
width:140 px;/* SESUAIKAN */
float:left;
background:#FFFFFF;
margin-bottom: 4px;
padding: 10px 0px 10px 0px;
border: 1px solid #cccccc;
}

#sidebarR{
width:140 px;/* SESUAIKAN */
float:right;
background:#FFFFFF;
margin-bottom: 4px;
padding: 10px 0px 10px 0px;
border: 1px solid #cccccc;
}

#sidebarL .widget-content {margin:0px 5px;5px 5px;}
#sidebarR .widget-content {margin:0px 5px;5px 5px;}

6. Kemudian copy paste lagi kode - kode dibawah ini di atas kode seperti <div id='sidebar-wrapper'>
<div id='Sidebar-2'>
<div id='sidebar'>

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

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

</div>
</div> <!-- end Sidebar-2 -->

7. Klik pertinjau,lihat tampilan sidebar jika anda ingin Sidebar 2 berada di bawah sidebar utama simpan kode kode di atas sesudah kode - kode seperti
<div id='sidebar-wrapper'>
.............
</b:section>
</div><div style='clear:both;'/>

8. Simpan Template

NB:
Sesuaikan widht, background, margin, padding

0
Menu Navigasi Horizontal pada template blogger adalah menu navigasi mendatar kesamping buat menampilkan link halaman home, page, label, atau link postingan pilihan seperti link daftar isi, blogroll, contact us dan sebagainya. Setelah mengetahui fungsi menu navigasi template blogger ada beberapa cara untuk membuat menu naavigasi horizontal di template blogger.

Menu Navigasi atau menu bar terdiri dari beberapa macam diantaranya menu navigasi css dengan menggunakan background warna dan backgound gambar, menu navigasi jquery dengan menggunakan background warna dan menggunakan backgound gambar yang bisa berfungsi dengan menggunakan kode JavaScript jQuery, tutorial lainnya adalah menu navigasi dengan menggunakan kode php, ajax, dan kode pemrograman lainnya.

Tutorial cara membuat menu navigasi horizontal berikut ini, saya akan membuat menu navigasi horizontal dengan menggunakan gambar / image. demo menu navigasi horizontal. Menu navigasi tersebut bisa langsung dipasang pada template blogger atau bisa mengganti gambar background menu navigasi tersebut dengan gambar yang sesuai dengan template blog blogger sobat, dengan cara menambahkan kode css dan html pada postingan berikut ini ke template blogger.

Cara membuat menu navigasi pada template blogger. sebelumnya sobat bloggers harus menghapus terlebih dahulu kode menu navigasi yang terdapat pada template anda dan mengganti dengan kode menu navigasi berikut. Setelah pada template sobat bloggers sudah tidak terdapat menu navigasi, cara berikutnya adalah memasang kode navigasi horizintal diatas pada template blogger

1. Login ke blogger.com

2. Klik Tata Letak atau Rancangan

3. Klik Edit Html

4. Klik Download template "sebagai Cadangan"

5. Masukan kdoe berikut diatas kode ]]></b:skin>
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(http://3.bp.blogspot.com/-rov-sfCneN0/TbFFFexCG4I/AAAAAAAABDo/xvXokiCUtlc/s1600/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}

ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(http://3.bp.blogspot.com/-rov-sfCneN0/TbFFFexCG4I/AAAAAAAABDo/xvXokiCUtlc/s1600/nav_bg.png) 0px -30px no-repeat;
}


ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(http://3.bp.blogspot.com/-rov-sfCneN0/TbFFFexCG4I/AAAAAAAABDo/xvXokiCUtlc/s1600/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}
6. Kemudian cari kode <div id='main-wrapper'> tambahkan kode dibawah ini tepat di atas kode <div id='main-wrapper'> :
<div>
<ul id='menu'>
<li class="button"><a class='current' href='#' >Home</a></li>
<li class="button"><a href='#' >Menu 1</a></li>
<li class="button"><a href='#' >Menu 2</a></li>
<li class="button"><a href='#' >Menu 3</a></li>
<li class="button"><a href='#' >Menu 4</a></li>
<li class="button"><a href='#' >Menu 5</a></li>
</ul>
</div>
7. Simpan Template

0
Garis Sudut Template blog dengan bahasa css adalah border, border template berfungsi buat menampilkan batas garis template blog, warna border garis template biasanya disesuaikan dengan template yang digunakan. contoh kode border template seperti border:1px solid #F5F5F5;,  jika di urai kode border template tersebut adalah, border sebagai perintah css untuk membuat garis template, 1px solid ketebalan border dan #F5FF warna border template.

Kode garis border template tersebut adalah kode css border yang biasa digunakan pada template blogger dan template template blog lainnya dengan bentuk persegi. sedangkan untuk membuat garis border template lengkung harus menambahkan kode perintah css lengkung dengan kode -moz-border-radius pada kode border template.

Sebagai contoh untuk menambahkan kode -moz-border-radius pada border template untuk membuat garis lengkung sudut template adalah seperti berikut:

Cari gadget atau widget yang akan diganti dengan sudut lengkung, misalnya border sudut yang akan diganti dengan sudut lengkung adalah sudut postingan, caranya cari kode .post atau #post .widget pada kode template yang digunakan, kemudian tambahkan kode -moz-border-radius di bawah kode border:1px solid yang terdapat di bagian kode posting diatas.

Untuk lebih jelasnya cara membuat garis lengkung pada sudut template, cara caranya akan saya jelaskan dibawah ini. untuk lebih jelasnya saya mengambil contoh membuat sudut lengkung pada widget postingan. Setelah anda membaca tutorial diatas cara penambahan kode -moz-border-radius pada widget postingan adalah sebagai berikut:


1. Login ke blogger.

2. Klik Tata Letak atau Rancangan

3. Klik Edit Html

4. Kemudian cari kode
.post {
margin:0px 0px 15px 0px;
padding:10px;
background: #FFFFFF;
border:1px solid #F5F5F5;
}
5. Tambahkan kode di bawah kode border
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
5. Sampai menjadi seperti berikut
.post {
margin:0px 0px 15px 0px;
padding:10px;
background: #FFFFFF;
border:3px solid #cccccc;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}
6. Klik Pertinjau, buat meninjau dan menyesuaikan border dan border radiusnya,

7. Klik Simpan Template.

Selamat mencoba!.

0
Halaman postingan atau halaman buat content postingan artikel pada blog adalah bagian dari laman gadget template blog dengan kode main wrapper dan widget dengan kode post. Kode halaman postingan pada template blog blogger blogspot terbagi menjadi beberapa bagian diantaranya post, post img, post body, post pooter, post date dan sebagainnya.

Menambah background image pada halaman postingan adalah buat design blog template yang digunakan agar terlihat .lebih menarik. Background halaman postingan template banyak yang menggunakan warna , ada juga yang menggunakan background gambar (image), tergantung dari designer yang membuat template tersebut.. Buat template yang menggunakan background warna dan ingin mengganti dengan background gambar (image) tutorialnya di bawah ini.

Buat cara membuat background gambar halaman postingan, yang pertama adalah
Sediakan gambar yang akan di jadikan background pada template blog blogspot
Sesuaikan ukuran gambar yang akan digunakan dengan kode .post pada kode template blog
Upload gambar yang sudah di sesuaikan ukurannya tersebut ke hosting yang biasa digunakan atau ke hostingan blogger blogspot di postingan blogger. atau ingin menggunakan hostingan gambar gratis seperti photobucket, tinypic dan lainnya.

Setelah gambar tersebut anda upload ambil link gambar tersebut
Sebagai contoh
"http://i689.photobucket.com/albums/vv259/upload/halaman-posting.jpg".
Gabungkan Url image / gambar diatas dengan menambah kode;
background:url(http.....) repeat;
Hingga Hasilnya seperti:
background: url (http://i689.photobucket.com/albums/vv259/upload/halaman-posting.jpg) repeat;
Kemudian cara selanjutnya:

1. login ke Blogger

2. Pilih Tata Letak atau Rancangan

3. Klik Edit Html

3. Klik Download template sebagai cadangan

4. Cari kode seperti ;
.post {
margin:0px 0px 15px 0px;
border:1px solid $bordercolor;
padding:10px;
background: #FFFFFF;
}
5. Ganti kode background seperti background: #FFFFFF; dengan background image diatas, contoh seperti dibawah ini:
.post {
margin:0px 0px 15px 0px;
border:1px solid $bordercolor;
padding:10px;
background: url (http://i689.photobucket.com/albums/vv259/upload/halaman-posting.jpg) repeat;
}
6. Simpan Template

3
Kolom Postingan Kotak kotak
Blogger tutorial  yang akan di posting kali ini adalah tentang cara Untuk membuat kolom postingan kotak-kotak, maksud dari membuat postingan kotak kotak pada tutorial ini adalah halaman postingan tampak terlihat kotak kotak dengan menampilkan warna border kode template pada blog. blog akan tampak terlihat mempunyai banyak kotak seperti contoh gambar disamping

Sebagai contoh saja, misalnya background template blog yang anda gunakan adalah dengan warna white (#FFFFFF) kemudian anda ingin membuat halaman postingan tampak kotak kotak dengan menampilkan warna border template dengan warna yang lebih jelas misalnya dengan warna black (#000000). yang sebelumnya pada border halaman posting tersebut dengan warna yang sama atau tidak menggunkan border.  caranya cukup mudah hanya dengan mengganti atau menambah kode border seperti (
bordert: 1px solid #000000;) pada kode #main-wrapper template anda.

Banyak template bloggers yang menggunakan Kolom Postingan Kotak-kotak pastinya buat design blog agar tampilan halaman blog tersebut tampak menarik, atau alasan lain dari membuat kolom postingan kotak-kotak agar kelihatan terpisah antara postingan yang satu  dan postingan lainya.
.
Untuk anda yang ingin Membuat Kolom Postingan Kotak-kotak, langkah - langkahnya sebagai berikut;

1. Login ke blogger anda

2. Pilih Tata Letak / Rancangan

3. Klik Edit HTML

4. Kemudian cari kode seperti::
#main-wrapper{
width: 588px;
float:left;
word-wrap:break-word;
overflow:hidden;
margin-top:10px; 
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
background: #f5f5f5;
bordert: 1px solid #e6e6e6;
display:inline; }
5. Kemudian delete pada bagian
background: #f5f5f5;
bordert: 1px solid #e6e6e6;
6. Cara selanjutnya Membuat Kotak Kolom Postingan

.post {
.........................
.........................
}

7. Tambahkan / ubah background dan border yang anda inginkan, misalnya:
background: #FFFFFF;
bordert: 1px solid #000000;
8.Misalkan hasil akhir penambahannya seperti
.post {
margin:0px 0px 15px 0px;
padding:10px;
background: #FFFFFF;
bordert: 1px solid #000000;
}
9. Klik Pertinjau untuk melihat tampilan baru template anda sesuaikan "warna dan border",

10. Klik SIMPAN TEMPLATE

Selamat mencoba

0
Membuat Header Terbagi 2
header blog, merupakan kepala bagian atas blog yang berfungsi buat menampilkan Judul blog (title) dan description blog untuk ditampilkan pada template blog yang digunakan. header blog sangat penting pada SEO karena robot crawl search engine mengindeks blog yang pertama di indeks adalah kode header buat mencari title blog dan description blog pada sistem blogger. Setelah itu robot crawl search engine akan mengindeks keywords kemudian mengindeks blog menurut alogaritma robot crawl search engine.

Pentinggya header pada sebuah blog seperti yang sudah dijelaskan diatas. kita harus menggunakan header blog pada template blog yang digunakan, lalu bagaimana jika kita tidak ingin menggunakan header pada blog, misalnya ingin membuat header blog blank atau kosong tanpa menggunakan judul blog dan deskripsi blog, atau ingin menampilkan banner iklan di bagian atas blog? dan tidak ingin menggunakan header blog sedikitpun, setelah conten contoh diatas. Hal tersebut bisa saja tetapi tidak perlu menghilangkan kode - kode header pada menu css dan html template blog. karena hal tersebut akan menggangu blog anda di search engine.

Tutorial lain pada postingan kali ini adalah membuat header blog menjadi dua bagian, misalnya header bagian kiri buat tiitle dan description blog dan header bagian kanan buat banner banner iklan blog atau anda merasa header blog pada template anda kepanjangan dan ingin menambah banner atau widget lainnya pada header blog, cara membagi gadgetnya bisa dengan dua cara diantaranya:

1.Mengedit kode template blog pada koe header widget
2.Mengganti semua kode header template blog. dengan kode header template yang baru.

Buat cara no 1 untuk Membuat Header Terbagi 2, tentunya anda harus mengetahui tentang kode css dan html pada template, sedangkan cara no 2 adalah cara mudah karena cukup mengganti semua kode header template dengan kode dibawah ini, pengaturan yang harus dibuat adalah menyesuaikan kode warna, width, dan height.

Pada template default blogger kode header blog adalah menggunakan kode header wrapper, tetapi para designer template blogger banyak yang menggunakan kode header blog dengan beberapa macam nama kode header template .Kode kode yang digunakan untuk membuat header terbagi 2 di bawah ini  menggunakan kode dari designer template. Tutorialnya buat edit template blogger Membuat header Terbagi 2 bagian, caranya ;

1. login ke blogger,com anda

2. Pilih Tata Letak / Rancangan

3. Klik Edit HTML.

4. Download Template (disarankan)

5. Kemudian tambahkan variable berikut ke template anda sebelum kode */
<Variable name="BG2headercolor" description="Header Description Color"
type="color" default="#F5F5F5" value="#000000">
6. Ganti kode Header pada template anda dengan kode Header berikut
#BG2header{
width: 960px;/* samakan deengan outher wrapper */
margin: 0;
padding: 0;
}

#header-wrapper {
width: 960px; /* samakan deengan outher wrapper */
height:150px;
font-size: 12px;
margin: 0 ;
padding: 0;
overflow: hidden;
}

#head-kiri {
width:500px;/* sesuaikan */
margin:0;
padding:0;
float:left;
}

#header h1 {
color: #000000;
margin: 0;
padding: 10px 0 0 20px;
text-decoration: none;
font: $BG2headercolor;
}

#header .description {
color: #0000000;
margin-left: 12px;
padding: 10px 0 0 10px;
font: $BG2headercolor; /* sesuaikan */
text-align: left;
}

#head-kanan{
width:440px;/* sesuaikan */
height:150px;
float: right;
padding:0;
margin:0;
text-align:left;
font-size:12px;
}

#head-kanan h2{
color: #FFFFFF;
font: $BG2headercolor;
text-align:center;
background:#000000;
padding:5px 0px 5px 0px;/* untuk judul gadget */
}

#head-kanan a, #head-kanan a:hover, #head-kanan a:visited{
color:$BG2headercolor;/* sesuaikan */}
6.Kemudian cari lagi kode header di dekat kode <div id='main-wrapper'> delete dan ganti dengan kode berikut; /* delete dengan tepat ulah mupus anu lain pupusen */
<div id='BG2header'>
<div id='header-wrapper'>
<div id='head-kiri'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='percobaan templates (Header)'
type='Header'/>
</b:section>
</div>
<div id='head-kanan'>
<b:section class='head-kanan' id='head-kanan' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Ada Apa Disini' type='HTML'/>
</b:section>

</div>
</div>
</div><!-- end BG2header -->
5.Simpan Template,

Selamat Mencoba !!!

0
Navbar Blogger adalah fasilitas Navigation Bar default blogger berupa Form yang melintang horizontal di atas blog, yang mempunyai beberapa fungsi seperti Search, Share, Login, Logout, follow dll. Contoh Navbar Blogger seperti gambar dibawah ini.



Navigation Bar biasanya sering digunakan admin blog, dalam keadaan login untuk mempercepat membuka halaman account, dashboard, ketika tidak sedang membuka beberapa tab browser. Namun beberapa fungsi tersebut tidak begitu berguna dikarenakan style Navbar banyak yang tidak sesuai dengan Design template.

Navbar Blogger biasanya digunakan jika sesuai dengan template blogger sebagai tambahan design blog pada template. Navbar Blogger sifatnya wajib digunakan pada blog blogger blogspot, sebagai tanda pengguna blogger buat pengunjung yang membuka blog dari blog blogger tersebut. buat yang anda yang tidak ingin menggunakan fungsi Navbar tersebut apa dan bagaimana dari pihak blogger jika blog menghilangkan fasilitas Navbar Blogger, namun cara lainnya adalah tidak menampilkan Navbar Blogger saja seperti bloggers bloggers pengguna blog dari blog blogger blogspot.

Cara menghilangkan Navbar Blogger tersebut adalah dengan tidak menampilkan atau menggunakan fungsi  hidden Navbar Blogger pada template blogger.

Cara Menghilangkan Navbar Blogger caranya:

Login ke blogger.com

Klik Tata Letak / Rancangan

Klik Edit Html

Kemudian cari kode

#navbar-iframe {}

Ganti dengan kode Navbar berikut

#navbar-iframe {
display : none;
visibility : hidden;
}
Simpan Template

0
Sidebar Wrapper adalah sebuah laman gadget blog buat menampilkan widget widget blog atau content yang di tampilkan pada blog. Sidebar Wrapper adalah nama kode default css untuk membuat sebuah gadget dengan menggunakan kode perintah html. Kode Sidebar Wrapper bisa saja di ganti dengan kode lainnya namun kode template Sidebar Wrapper tersebut sangat berpengaruh pada pengindekan sebuah blog untuk SEO dan SERP. Jika kita merubah atau mengganti kode Sidebar Wrapper dengan kode yang hanya dimengerti oleh anda kode tersebut akan menghambat SEO blog di SERP, karena kode sidebar yang anda buat sesuai dengan keinginan anda dianggap sebagai kode ilegal oleh sistem blogger blogspot.

Buat Designer template Blogger atau yang suka utak - atik kode template blog perlu memperhatikan penjelasan diatas, karena pengaruh patalnya pada blog jika menggunakan kode sidebar wrapper dengan kode sidebar sendiri adalah blog anda bisa di delete pihak blogger karena dianggap sebagai spam blog. Pada postingan ini saya akan menjelaskan tentang Membuat Sidebar Wrapper. Namun jika anda ingin membuat Sidebar Wrapper anda perlu mencari terlebih dahulu template - template default blogger atau yang tersedia di dasbor blogger buat kode Sidebar Wrapper. Kode kode Sidebar Wrapper pada template yang disediakan blogger adalah kode legal yang di akui dan digunakan pihak blogger

Saya ulangi lagi Sidebar Wrapper adalah elemen laman gadget buat menampilkan widget atau content blog. Sidebar Wrapper atau Sidebar biasanya berada disebelah kanan atau kiri Main Wrapper  (Laman postingan), Buat tutorial cara membuat Sidebar Wrapper blog, sebagai contoh yang akan saya jelaskan adalah Membuat Sidebar Wrapper sebelah kanan blog, Langkah membuatnya sebagai berikut:


1. Login ke blogger,

2. Pilih Tata Letak / Rancangan,

3. Klik Edit html,

4. Kemudian cari kode ]]></b:skin> gunakan Ctrl+F untuk mencari tekan F3 untuk enternya,dan simpanlah kode berikut di atas kode tadi!

    #SidebarKanan-wrapper {
width: 375px;
float: right;
margin: 5px 0px 10px 5px;
padding: 5px 5px 5px 5px;
word-wrap: break-word;
overflow: hidden;
} /* sesuaikan "width" */


    #sidebarkanan {
width: 348px;
margin: 5px 3px 5px 3px;
padding: 10px;
color: #000000;
background: #FFFFFF;
border: 2px solid #cccccc;
}


    #sidebarkanan .widget {
margin: 0px;
padding: 0px;
}


    #sidebarkanan h2 {
margin:0;
padding: 3px 0px 3px 0px;
text-align: center;
color: #ffffff;
font-family:"Trebuchet MS",Verdana,sans-serif;
background: #000000;
border: 2px solid #ffffff;
}


    #sidebarkanan a {
color: f5f5f5;
text-decoration: none;
}


    #sidebarkanan a:hover {
text-decoration: underline;
color: #FF0000;
}


    #sidebarkanan a:visited {
text-decoration: none;
color: #f5f5f5;
}


    .sidebar {
margin: 0;
padding: 0;
text-align: left;
line-height: 1.4em;
font-family:"Trebuchet MS",Verdana,sans-serif;
}


    .sidebar ul {
margin: 0px;
padding: 0px;
}


    .sidebar li{
margin: 0;
padding: 0;
line-height: 1.5em;
background:#FF0000;
}


    .sidebar a img {
margin: 0px;
padding: 0px;
}
NB :Sesuaikan ukuran lebar (width) dan kode warna #......; ,
Kode SidebarKanan-wrapper  diatas adalah kode pengganti dari kode Sidebar Wrapper, Jika ingin menggunakan kode default delete SidebarKanan-wrapper dan ganti dengan Sidebar-wrapper

5. Setelah di simpan cari lagi kode postingan <div id='main-wrapper'> dan simpan lagi kode di bawah ini setelah selesai kode - kode postingan tadi, biasanya diakhiri kode </div>
<div id='SidebarKanan-wrapper'>
<b:section class='sidebar' id='sidebarkanan' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Sidebar' type='HTML'/>
</b:section>
</div>
</div>
6. Simpan template,

Lihat hasilnya!!!