Cara Membuat Atau Menambah 3 Kolom Dibawah Header

hari ini akhirnya berkesempatan Lagi untuk mengurus Dapur setelah beberapa hari ini Dapur Ditinggalkan karna disibukkan Dengan Proyek Akhir dan Tugas Akhir Skripsi jadi Sekedar istrahat dan menghilangkan Jenuhnya Pikiran yang dipres selama satu bulan maka Dapur Tutorial Blogspot Sempatkan untuk membuat tutorial lagi.

Tutorial blog kali ini kembali membahas tetang cara menambah Eleman Halaman Pada Blog. Buat anda yang senang menambahkan aksesoris  dihalaman blog atau sobat ingin Memasang Space iklan300 x 250 trik ini sangat cocok untuk diterapkan. Tema Kali ini Dapur Tutorial Blogspot Akan Membahas Tetang  Cara Membuat Atau Menambah 3 Kolom Dibawah Header.


Cara Membuat Atau Menambah 3 Kolom Dibawah Header berhubungan dengan tutorial sebelumnya tentang Cara Membuat Atau Menambah 2 Kolom Dibawah Header. Dari tutorial tersebut kita akan menambahkan sedikit kode untuk Merubahnya menjadi 3 kolom.

Berikut Lankah-Langkah Untuk Menambah 3 Kolom Dibawah Header :
  1.  Pastikan anda sudah login ke akun blogger/blogspot
  2. Setelah ada berada pada halaman Panel Blog anda Pilih " Template"


  3. Klik Tombol Edit HTML


  4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut


  5. Jangan lupa Centang Expand Template Widget.


  6. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini 
  7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode)
  8. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin> 
  9. <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
    </div> 
  10. Selanjutnya Cari kode <div id='main-wrapper'> atau <div id="main-outer"> atau <div class='main-outer'>
  11. Copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'>   atau <div id="main-outer"> atau <div class='main-outer'>
  12. <div id='box-kolom-widget'>
    <div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
    </div>
    <div style='clear:both;'/>
    </div>
  13. Lankah terakhir klik Tombol Simpan Template 


  14. Selesai dan lihat hasilnya
Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout  jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar

Demikian Tutorial Kali ini tetang Cara Membuat atau Menambahkan 3 Kolom Dibawah Header Semoga bisa bermanfaat

Kanata Blogger Template

Kanata Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Template NameKanata Blogger Template
DescriptionKanata is a free blogger template adapted from WordPress with 2 columns, left sidebar and grunge style.
Template Authorhttp://btemplates.com/author/deluxe-templates/
Designer9th Sphere
Instructions URL How to install Blogger Template
Kanata Blogger Template
Source : btemplates.com

Cara Membuat atau Menambahkan 2 Kolom Dibawah Header


Sudah hampir satu bulan blog ini tidak di update dan sekarang mumpung lagi ada kesempatan jadinya saya duduk sejenak untuk berbagi informasi tetang cara membuat atau menambahkan 2 kolom di bawah header. Seblumnya Dapur Tutorial Blogspot Sudah Pernah Menyampaikan Tetang tutorial Cara Menambahkan Elemen Halaman Baru Dibawah Header Blog dan Cara Menambahkan Elemen Halaman Baru Di Atas Header Blog

Nah...Untuk menambahkan 2 kolom dibawah header tidak begitu sulit kita hanya memodifikasi sedikit dari kode tersebut.

Berikut langkah-langkah yang harus anda lakukan :
  1. Login menggunkan akun blog anda
  2. Setelah anda masuk ke Dashboard pilih Menu "Template"


  3. Klik  Tombol Edit HTML


  4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut


  5. Centang Expand Template Widget.


  6. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini
  7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode) 
  8. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>
  9. #box-kolom-widget { clear:both; } .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor; }
  10. Sekaran Anda cari Kode <div id='main-wrapper'>   atau <div id="main-outer"> 
  11. Apabila sudah ketemu copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'>   atau <div id="main-outer">
  12. </div>
    <div id='box-kolom-widget'>
    <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>

    <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>

    <div style='clear:both;'/>
  13. Lankah terakhir klik Tombol Simpan Template


  14. Selesai dan lihat hasilnya
Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout  jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar


Demikian Tutorial Kali ini tetang Cara Membuat atau Menambahkan 2 Kolom Dibawah Header Semoga bisa bermanfaat

Red Light Blogger Template

Red Light Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Template NameRed Light Blogger Template
DescriptionRed Light is a free blogger template adapted from WordPress with 3 columns, sidebar on the right and left, grunge style and vectorial elements.
Template Authorhttp://btemplates.com/author/falcon-hive/
DesignerTemplateLite
Instructions URL How to install Blogger Template
Red Light Blogger Template
Source : btemplates.com

Menu Dropdown dengan Background

Menu Dropdown dengan Background | Tutorial Blog

Dulu saya pernah posting cara Membuat Menu Dropdown, pada postingan ini kita akan membuat menu dropdown dengan background image.
Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :
  • Login ke blogger Anda, klik menu Design > Edit HTML.
  • Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.
  • Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut diatasnya.
    <script>
    var last_expanded = &#39;&#39;;
    function showHide(id)
    {
    var obj = document.getElementById(id);
    var status = obj.className;
    if (status == &#39;hide&#39;) {
    if (last_expanded != &#39;&#39;) {
    var last_obj = document.getElementById(last_expanded);
    last_obj.className = &#39;hide&#39;;
    }
    obj.className = &#39;show&#39;;
    last_expanded = id;
    } else {
    obj.className = &#39;hide&#39;;
    }
    }
    </script>
  • Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.
    .dropdown-b {
    background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
    text-align:center;
    width:165px;
    font-family: georgia, Helvetica, sans-serif;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom: 10px;
    margin-top: 4px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 8px;
    }
    .dropdown-bg {
    background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
    text-align:center;
    width:165px;
    font-family: georgia, Helvetica, sans-serif;
    padding-left:20px;
    padding-right:20px;
    padding-top:13px;
    padding-bottom: 10px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 8px;
    }
    .hide{
    display: none;
    }
    .show{
    display: block;
    }
    a{cursor: hand}
  • Lalu klik Save Template.
  • Kemudian klik menu Design > Page Element > Add a Gadget.
  • Pilih HTML/Javascript, lalu masukkan kode berikut ini :
    <a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
    <div id="dropdown-b-1" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div>
    <a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
    <div id="dropdown-b-2" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
    <div id="dropdown-b-3" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
    <div id="dropdown-b-4" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
     <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div>
  • Terakhir klik tombol Save. Selesai...
Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.

Photoplus Blogger Template

Photoplus Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Template NamePhotoplus Blogger Template
DescriptionPhotoplus is a free premium blogger template with 3 columns, gallery-styled, perfect for photologs and minimalist. Excellent layout for blogs about photography.
Template Authorhttp://btemplates.com/author/dante-araujo/
DesignerDante Araujo
Instructions URL How to install Blogger Template
Photoplus Blogger Template
Source : btemplates.com

Optimasi SEO Menggunakan Anchor Text

Optimasi SEO Menggunakan Anchor Text | Tutorial Blog

Anchor text merupakan sebuah teks berisi tautan link yang menuju pada sebuah halaman. Anchor Text dapat meningkatkan pageview, memperbanyak backlink dan meningkatkan trafik. hal tersebut dapat membuat sebuah situs memiliki tempat penting pada halaman Search Engine Result Page (SERP).
Dalam membuat Anchor text sebaiknya mengandung kata kunci yang di targetkan, menarik, dan mengandung arti yang mudah di mengerti.
Berikut beberapa contoh penulisan kode html untuk membuat anchor text :
  • Membuat Anchor Text sesuai judul Blog.
    <a href="http://wadahtutorial.blogspot.com/">Tutorial Blog</a>
  • Membuat Anchor Text untuk salah satu artikel.
    <a href="http://wadahtutorial.blogspot.com/2011/12/widget-recent-comment-valid-xhtml.html">Widget Recent Comment Valid XHTML</a>
  • Membuat Anchor Text pada image.
    <a href="http://wadahtutorial.blogspot.com/"><img alt="Tutorial Blog" border="0" src="Url Image" />Tutorial Blog</a>
Beberapa hal yang perlu diperhatikan dalam penggunaan anchor text :
  • Kerapatan keyword dalam sebuah postingan. Beberapa forum SEO menyarankan kerapatan anchor teks yang baik minimal 300 karakter terdapat 1 anchor text.
  • Jumlah karakter anchor text maksimal 60 karakter, karena search engine biasanya mengambil 60 karakter terdepan dari keyword. Jika lebih terkadang search engine tidak mampu mengindeks keywordnya.
  • Anchor text untuk link di dalam blog sebaiknya berhubungan dengan judul postingan atau lebih baik jika keyword yang di gunakan juga terdapat di judul postingan, meta tag, judul blog, nama domain dan deskripsi blog agar robot searcgh engine memberi bobot relevansi yang tinggi. Jika halaman target di luar blog Anda sebaiknya gunakan keyword yang berhubungan dengan judul halaman yang akan di link.
  • Perhatikan pesaing Anda di google search, jika kita menggunakan blog yang masih rendah Pageranknya, sebaiknya lakukan optimasi dari keyword yang rendah saingannya. contoh: keyword Bisnis Online lebih ketat persaingannya dibanding keyword Teknik Bisnis Online, Bisnis Online untuk pemula. Usahakan mendapatkan backlink dengan keyword yang anda optimasi tersebut agar cepat muncul di halaman pertama mesin pencari.
  • Optimasi keyword seiring dengan peningkatan trafik, jika di dalam sebuah blog terlalu banyak link tetapi jumlah kunjungan berkurang, maka akan menyebabkan pagerank halaman tersebut berkurang. Dan bisa mempengaruhi google pagerank blog secara keseluruhan. Semakin banyak keyword yang anda pasang maka semakin banyak trafik yang dibutuhkan untuk mengimbangi, agar pagerank halamannya bisa bertahan atau meningkat.(sebagai catatan: setiap halaman mempunyai pagerank sendiri).
  • Anda bisa melakukan rotasi anchor teks, misalnya dalam 3 bulan pertama gunakan Cara Mudah Belajar Bisnis Online untuk pemula, kemudian 3 bulan berikutnya ganti dengan Teknis Bisnis Online, dalam melakukan rotasi sebaiknya gunakan potongan dari keyword awal, dengan catatan anda harus menambah kalimat baru untuk menempatkan keyword baru tanpa mengubah struktur kalimat lama.
  • Terus membuat keyword baru pada postingan baru, karena search engine senang jika mendeteksi update pada blog/website.
  • Anchor text Anda perlukan untuk membangun backlink, bisa dengan melakukan link antar halaman dalam sebuah blog, atau link dari blog lain ke blog anda.
  • Hindari penggunaan anchor teks yang kurang tepat, misal : d@wnload (kombinasi simbol dan alfabet), dan kata tidak baku lainnya.
  • Hindari menggunakan keyword yang tidak dikenali oleh search engine. misalnya dalam pertukaran link menggunakan kata : Namapemilikblog, url tetap terindeks, tetapi penempatan keywordnya yang kurang tepat,karena mungkin 50% pengguna internet jarang mencari nama atau url di search engine saat mencari blog, terkecuali jika blog anda sudah terkenal maka biasanya banyak pengunjung yang mengetikkan nama anda untuk menemukan blog.
Semoga artikel ini bermanfaat buat kita dalam optimasi blog.

Web Blog Blogger Template

Web Blog Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Template NameWeb Blog Blogger Template
DescriptionWeb Blog is a free blogger template with 2 columns, right sidebar, slideshow and abstract.
Template Authorhttp://btemplates.com/author/alexiel/
DesignerTemplate Mo
Instructions URL How to install Blogger Template
Web Blog Blogger Template
Source : btemplates.com

Menampilkan Tag Clouds di Blogger

Menampilkan Tag Clouds di Blogger | Tutorial Blog

Selain label dalam bentuk daftar, blogger juga menyediakan label dalam bentuk Cloud, jika fitur ini diaktifkan, label yang lebih populer muncul dalam font yang lebih besar daripada label yang kurang populer.
Berikut cara Menampilkan Tag Clouds di Blogger :
  • Login ke akun anda klik Dasbor > Design > Page Elements > Add a Gadget.
  • Kemudian pilih Label. Pada display ganti dari Daftar menjadi Cloud.
    Menampilkan Tag Clouds di Blogger
  • Lalu klik Save.
Sekarang Lihat blog anda, label clouds harusnya sudah di tampilkan. Kalau belum berhasil, lanjutkan dengan langkah berikut :
  • Klik Design > Edit HTML, beri centang pada Expand Template Widget.
  • Copy kode dibawah ini, letakkan tepat di atas kode ]]></b:skin>
    /* Label Cloud Styles */
    #labelCloud {text-align:center;font-family:arial,sans-serif;}
    #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
    #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
    #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
    #labelCloud a{text-decoration:none}
    #labelCloud a:hover{text-decoration:underline}
    #labelCloud li a{}
    #labelCloud .label-cloud {}
    #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
    #labelCloud .label-cloud li:before{content:"" !important}
  • Copy kode dibawah ini, letakkan tepat di bawah kode ]]></b:skin>
    <script type='text/javascript'>
    // Label Cloud User Variables
    var cloudMin = 1;
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];
    var lcShowCount = false;
    </script>
  • Simpan template Anda dan lihat hasilnya!.
Sekian tutorial tentang Menampilkan Tag Clouds di Blogger.

Masunurin Blogger Template

Masunurin Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Template NameMasunurin Blogger Template
DescriptionMasunurin is a free premium blogger template adapted from WordPress with 2 columns, right sidebar, rounded corners, space for ads and neutral colors.
Template Authorhttp://btemplates.com/author/themecraft/
DesignerPadd IT Solutions
Instructions URL How to install Blogger Template
Masunurin Blogger Template
Source : btemplates.com

Optimasi SEO pada Image

Optimasi SEO pada Image | Tutorial Blog

Image dapat menjadi salah satu sumber traffic dalam optimasi seo. Namun Image tersebut harus kita optimalkan, maksudnya Image yang kita beri "ALT TAG", hal ini merupakan bagian dari optimasi seo on page. Sama halnya seperti tag HTML normal lainnya yang digunakan sebagai teks alternatif ketika image/gambar tidak dapat ditampilkan.
Untuk mengoptimalkan image, dapat kita lakukan melalui dua cara, yaitu melalui nama file dan penggunaan alt tag. Alt berasal dari kata alternatif, hal ini memungkinkan kita untuk menentukan teks alternatif bagi gambar jika tidak dapat ditampilkan karena bermacam alasan, juga sebagai identitas gambar/image di search engine, misalkan saat kita mencari pada Google Image, maka Alt tag tersebut sangat berfungsi pada hasil pencarian. Ketika search engine menjelajah halaman web atau blog, mereka menganggap nama file dan alt tag sebagai isi gambar.
Berikut beberapa Tips yang mungkin bisa Anda gunakan dalam Optimasi SEO pada Image :
  • Jangan gunakan "gambar1.png" atau "gambar2.jpg" sebagai nama file. Cobalah gunakan nama file Anda sebagai kata kunci atau keyword, contoh, "seo-on-page.png" atau "alt-tag.jpg"
  • Gunakan nama file dan alt tag yang singkat tapi deskriptif, hindari penulisan alt tag yang panjang, karena terkadang mungkin bisa dianggap spam
  • Pasokan alt tag bisa menggunakan gambar sebagai link, hal ini bekerja sebagai anchor text
  • Format gambar dengan jenis file - JPEG, GIF, PNG, dan BMP
  • Simpan semua gambar dalam direktori yang sama.
Contoh penggunaan Alt tag pada Image / gambar
<a href="URL image"><img style="border-width: 0px; margin: 0px; title="title image" alt="alt tag image" src="URl image" align="right" border="0" width="180" height="120"></a>
Semoga artikel ini berguna bagi kita dalam meningkatkan Optimasi SEO.

MusicBlog Blogger Template

MusicBlog Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Template NameMusicBlog Blogger Template
DescriptionMusicBlog is a free blogger template with 2 columns, right sidebar, exclusive design for Blogger, slideshow, social icons and vectorial elements.
Excellent layout for blogs about girls or music.
Template Authorhttp://btemplates.com/author/deluxe-templates/
DesignerDeluxe Templates
Instructions URL How to install Blogger Template
MusicBlog Blogger Template
Source : btemplates.com

Recent Comments Blogger dengan Avatar

Membuat Recent Comments Blogger dengan Avatar | Tutorial Blog

Tutorial kali ini sama saja dengan tutorial memasang Widget Recent Comment Valid XHTML, cuman kodenya aja yang berbeda. Jadi untuk tutorial yang lebih jelas silakan baca Widget Recent Comment Valid XHTML. Untuk postingan ini saya buat singkat saja.
Berikut caranya :
  • Buat widget HTML/JavaScript.
  • Beri judul Recent Comments atau apalah terserah Anda.
  • Lalu masukkan kode berikut :
    <style type="text/css">
    ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
    .tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    // Recent Comments Settings
    var
    numComments = 5,
    showAvatar = true,
    avatarSize = 30,
    characters = 60,
    defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits = true;
    //]]>
    </script>
    <script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
    <script type="text/javascript" src="http://wadahtutorial.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>
    Keterangan :
    numComments : 5, jumlah komentar yang ditampilkan
    avatarSize : 30, ukuran avatar dalam pixel
    characters : 60, jumlah karakter yang ditampilkan
    wadahtutorial.blogspot.com ganti dengan URL blog Anda.
    max-results=5, jumlah komentar yang ditampilkan, ganti sesuai keinginan Anda.
  • Terakhir klik Save. Selesai...
Selamat mencoba Membuat Recent Comments Blogger dengan Avatar.

Outubro Blogger Template

Outubro Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Template NameOutubro Blogger Template
DescriptionOutubro is a free blogger template with 2 columns, right sidebar, neutral colors and posts thumbnails.
Template Authorhttp://btemplates.com/author/templates-novo-blogger/
DesignerTemplates Novo Blogger
Instructions URL How to install Blogger Template
Outubro Blogger Template
Source : btemplates.com

Cara Menambahkan Elemen Halaman Baru Dibawah Header Blog

Setelah Dapur Tutorial Blogspot sukses posting tutorial blogspot tetang Cara Menambahkan Elemen Halaman Baru Diatas Header Blog  kali ini Dapur Tutorial Blogspot akan kembali menyampaikan cara menambahkan elemen halaman.

Elemen halaman yang akan ditambahkan kali ini berda di bawah header blog anda seperti gambar berikut


Fungsinya tetap sama sebagai tempat untuk meletakan widget yang pada umumnya digunakan oleh banyak orang untuk meletakan Iklan atau menu horizontal.

Berikut lankah-Lankah yang Harus anda lakukan untuk menabah Elemen Halaman baru dibawah Header :
  1. Login Menggunakan Akun Blogspot anda pilih menu "Template"


  2. Selanjutnya akan tampil seperti halaman berikut, klik pada tombol Edit HTML


  3. Klik tombol Next/Lanjutkan setelah itu anda akan dibawa kehalaman edit HTML seperti berikut


  4. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini
  5. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode) 
  6. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>
  7. #under_header{
    margin:10px 0;
    padding:1%;
    width:100%;
    }
  8. Sekarang anda cari kode yang mirip dengan kode berikut ini
    • Kode Yang harus anda cari jika anda menggunakan template lama blogger
    • <div id='header-wrapper'> 
      <b:section class='header' id='header' maxwidget="1" showaddelement="no">
      <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
      </b:section>
          </div>
    • Kode yang harus anda temukan jika anda menggunkan template baru blogger
    • <div id='header-outer'> 
      <b:section class='header' id='header' maxwidget="1" showaddelement="no">
      <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
      </b:section>
          </div>
  9. Apabila sudah ketemu copas kode dibawah ini dan letakan dibawah kode diatas
  10. <div id="under_header">
    <b:section class='header' id='gadgetheader' preferred='yes'/>
    </div>
  11. Lankah terakhir klik simpan


  12. Selesai
Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak jika ada Elemen tambahan dibawah Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar



Demikian Tutorial Kali ini tetang Cara Menambahkan Elemen Halaman Baru Dibawah Header Blog Semoga bisa bermanfaat

Menampilkan Smiley Pada Postingan Blogger

Menampilkan Smiley Pada Postingan Blogger | Tutorial Blog

Sebenarnya sudah banyak postingan dari para blogger master tentang Menampilkan Smiley Pada Postingan, namun tidak ada salahnya saya memposting ini, kali aja masih ada yang belum tau.
Trik ini dapat membuat tampilan postingan sobat menjadi lebih menarik, karena kita dapat menampilkan pic smile seperti Menampilkan Smiley Pada Postingan,Menampilkan Smiley Pada Postingan,Menampilkan Smiley Pada Postingan, Smiley, Smiley, Smiley, Smiley dan lain lain.
Caranya gampang Sob, silakan ikuti tutorial berikut :
  • Login ke blogger trus pilih Layout > Edit HTML.
  • Beri tanda centang pada Expand Widget Templates.
  • Cari kode ini ]]></b:skin> .
  • Masukkan script berikut ini dibawah kode ]]></b:skin>
    <script src='http://wadah-tutorial.googlecode.com/files/ysmileys.js' type='text/javascript'/>
  • Terakhir klik Save Template. Selesai...
Berikut beberapa kode yang dapat Anda gunakan :
:DMenampilkan Smiley Pada Postingan:PMenampilkan Smiley Pada Postingan
:)Menampilkan Smiley Pada Postingan;)Menampilkan Smiley Pada Postingan
:-S Menampilkan Smiley Pada Postingan:-B Menampilkan Smiley Pada Postingan
:-h Menampilkan Smiley Pada Postingan:-a Menampilkan Smiley Pada Postingan
:xMenampilkan Smiley Pada Postingan:(Menampilkan Smiley Pada Postingan
:-t Menampilkan Smiley Pada Postingan:-bdMenampilkan Smiley Pada Postingan
:-c Menampilkan Smiley Pada Postingan:-*Menampilkan Smiley Pada Postingan
8-7Menampilkan Smiley Pada Postingan8-|Menampilkan Smiley Pada Postingan
7:PMenampilkan Smiley Pada Postingan=D7Menampilkan Smiley Pada Postingan
8-}Menampilkan Smiley Pada PostinganX(Menampilkan Smiley Pada Postingan
Sebenarnya masih ada beberapa kode lagi, berhubung saya sudah lupa jadi segitu dulu, jika ada yang mau menambahkan silakan tulis di kolom komentar.
Selamat mencoba dan semoga berhasil...
 
Support : PING by :Ping-o-Matic | Pusat Promosi
Copyright © 2011. Tutorial dan Free Download - All Rights Reserved
Template Modify by Creating Website
Re Design by Bang Aris