Cyber Drops

Bagaimana cara menarik lebih banyak pembaca & pengunjung ke blog Anda? Untuk membuat blog Anda lebih terlihat (lebih mudah dicari), solusinya kita harus men-submit URL blog/RSS Feed sebanyak mungkin ke direktori blog. Ada ratusan situs yang menyatakan diri mereka sebagai mesin pencari blog, blog directory hosts, feed aggregators & traffic exchanges. Beberapa pencipta situs web bertujuan untuk mendapatkan dolar yang cepat, menjual situs & database anggota mereka di eBay saat traffic mereka cukup banyak.


Selama beberapa minggu yang lalu, saya telah men-submit blog & RSS feed ini ke berbagai direktori blog yang gratisan. Yang pertama, tentunya men-submit blog ke berbagai search engine dulu, seperti search engine Google, Yahoo & MSN. Baca artikel Submit Blog ke Search Engine untuk men-submit blog ke berbagai search engine.


Sebelum Anda men-submit blog Anda ke direktori-direktori ini, saran saya, Anda buat akun email gratis hanya untuk tujuan ini. Untuk mencegah banyaknya email update yang dikirim ke alamat email pribadi Anda oleh berbagai administrator direktori.


Setiap direktori punya formulir yang berbeda-beda ketika men-submit blog Anda. Biasanya instruksi dari mereka mudah untuk diikuti. Ada beberapa hal yang perlu Anda perhatikan;


1. Beberapa direktori mensyaratkan Anda untuk mendaftar sebelum men-submit Blog. Walaupun kebanyakan blog direktori boleh men-submit blog lebih dari 1 dalam 1 akun, tapi ada juga yang tidak boleh, hanya1 saja (untuk men-submit blog kita yang banyak, kita harus punya akun yang banyak pula)


2. Jika Anda diminta untuk RSS feed/URL Feed Anda, pastikan di bawah Settings > Site Feed, pilih "Allow Blog Feed" yang "Full" atau "Short". Jangan pilih "None". URL feed Anda adalah URLblogAnda/feeds/posts/default atau URLblogAnda/feeds/posts/default?alt=rss dimana URL Blog Anda diawali dengan http://. Jangan ketik "www" untuk blog Blogger. Contohnya, URL Feed Atom blog ini http://tips-blogging4u.blogspot.com/feeds/posts/default. Anda bisa uji URL itu benar/tidak dengan cara mengetik alamat feed Anda ke web browser & lihatlah. Jika Anda punya alamat feed eksternal seperti alamat feed Feedburner, Anda bisa men-submitnya juga


3. Kadang-kadang, ada juga direktori blog yang meminta banner blog Anda (walaupun tidak diisi, tidak apa-apa) untuk diisi di formulir mereka, Anda bisa menggunakan Photoshop/Google’s Picasa untuk membuatnya


4. "Reciprocal URL Link" adalah halaman utama di mana Anda akan menempatkan link ke direktori blog mereka


5. "meta keywords" / "tags" adalah kata kunci yang mewakili isi blog Anda. Demikian pula "meta description" adalah beberapa kalimat singkat yang menjelaskan tentang blog Anda. Pada dasarnya, tag "meta" menyediakan informasi tentang blog Anda yang berguna bagi mesin pencari untuk mengidentifikasi

Technorati

Fuel My Blog

Blogtoplist

Mybloggingarea
Topblogarea
Topblogging
Blogroll
Worldtopblogs
Topbloglists

Blogvillage
Blogelites
Myblogdirectory
Blogcatalog
Blogarama
Blogion
Bloghop
Bloggingfusion
Blog-search
Blogpoint
Blogs-collection
Globeofblogs
Blogoriffic

Blogflux
Blogsearch
Bloggernity
Bloggernow
Weblog-index
5starblogs

Getblogs
eBlogzilla
Search4Blogs
BloggerTalk
LSblogs

BlogHub

Bloghints

Blogdup

Wilsdomain

Total Blog Directory

Blog-Directory




Mungkin sewaktu-waktu kami akan meng-update daftar direktori blog ini.

 Apa itu twitter? Twitter adalah situs jejaring social yang sangat populer saat ini. Bersaing dengan Facebook. saya sendiri jarang menggunakan Twitter, karena twitter sendiri featurenya terbatas.. tapi tidak ada salahnya kita mencoba membuat twiter dan kemudian memasang component status atau berita twitter kita di blo oke ini dia step by stepnya
 Fitur utama twitter adalah fitur UPDATE STATUS, sama seperti Facebook. Nah pada tips dan trik blog kali ini, saya ingin sharing bagaimana cara memasukkan twitter update kita di blogspot.

Cara nya sangat mudah :

1. Masuk ke Twitter.com

2. Login dengan username dan password anda

3. Pilih menu setting

4. Lihat pada kolom MORE INFO URL, kemudian klik tulisan (You can also add Twitter to your site here)
 5. Kemudian pilih menu My Website
 6. Pilih Profile Widget
 7. Anda akan ditunjukkan 4 kolom menu,disitulah tempat mengedit tampilan widget twitter yang akan di pasang di blog anda.Jangan lupa masukkan username anda pada menu yang tersedia
 8. Setelah selesai setting semuanya, anda lihat di button paling bawah, kemudian klik FINISH & GRAB CODE
 9. Anda akan mendapatkan kode javascript yang bisa di pasang di blog anda, atau anda bisa menggunakan menu ADD TO BlOGGER yang ada di bawah nya.

Cara pasang di blog :

1. Masuk ke dashboard blogspot anda

2. Pilih menu LAYOUT / TATA LETAK

3. Pilih menu HTML/JAVESCRIPT

4. Copy paste kode javascript tadi ke menu HTML/JAVASCRIPT

5. Selesai...

Selamat mencoba...

Kalau ada kesulitan, bisa bertanya melalui kolom komentar.

Terimakasih
Sumber: http://www.trikblog.co.cc

Ingin mempunyai layanan sms gratis pada blog anda.. oke ini dia cara2nya hanya di tutorial dan software

 pilih HTML/Java Script

Pada kolom JUDUL isi misalnya SMS GRATIS kemudia silahkan copy paste kode di bawah ini

<iframe name="widgetsms" src="http://www.sms-online.web.id/widget" style="border:0" scrolling="no" width="270" height="350"> not support </iframe>

Atau kode di bawah ini

 <iframe name="blacksms" src="http://www.sms-online.web.id/widget/black.php" style="border:0" scrolling="no" width="170" height="310"> not support </iframe>

Lalu Simpan, bila telah sukses menambah widget sms gratis silahkan isi disini agar link anda bisa ditampilkan disini

Umumnya untuk menammpilkan kategori atau label, yang ditampilkan adalah semua nama kategori atau labelnya. Lalu, adakah cara untuk untuk menampilkan kategori atau label berdasarkan nama kategori atau label? jawabannya ada.

Menampilkan kategori berdasarkan nama label dirasa lebih menarik karena lebih spesifik, misal blog anda mempunyai kategori : ekonomi, politik, entertainment dan lain sebagainya.

Langkah awal yang harus anda persiapkan yaitu kategori apa yang mau anda tampilkan, lalu catat atau copy paste nama kategori atau label tersebut, misal politik. Untuk nama kategori yang mempunyai spasi kosong, harus di ganti dengan %20 , misal untuk kategori blogger tutorial, nama kategori tersebut diganti menjadi :

blogger%20tutorial

Hal lain yang harus anda ketahui adalah, nama label ini bersifat case-sensitive atau peka terhadap hurup besar (huruf kapital) atau kecil, misal kategori blogger%20tutorial berbeda dengan Blogger%20tutorial.

Langkah kedua adalah menyiapkan alamat feed untuk nama kategori yang anda inginkan, format dasarnya seperti berikut :



http://alamat_blog_anda/feeds/posts/default/-/nama_label



Misal blog kang Rohman alamat blognya adalah http://tutorialdansoftware.blogspot.com dan nama label yang mau di tampilkan adalah blogger%20tutorial maka alamat feed yang dipersiapkan adalah :

http://tutorialdansoftware.blogspot.com/feeds/posts/default/-/blogger%20tutorial

Sumber: http://kolom-tutorial.blogspot.com

Kali ini tutorial dan software akan menyajikan tutorial modifikasi dari tutorial sebelum ini.. jika pada sebelumnya kategori otomatis dengan thumbnail nya dengan tulisan.. namus sekarang hanya thumbnailnya saja.. dan thumbnailnya berderet kesamping


Berikut adalah langkah-langkahnya :

Langkah pertama

•     Login ke blogger dengan ID anda.
•     Klik Rancangan.
•     rancangan
•     Klik tab Edit HTML.

    Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
    Carilah kode ]]></b:skin>, copy lalu paste kode berikut persis diatas kode ]]></b:skin>

    /*** Labels Thumbs ***/
    img.label_thumb{
    float:left;
    border:1px solid #ccc;
    width:85px;
    height:70px;
    margin-right:10px;
    margin-bottom:10px;
    }

    Carilah kode </head>, copy lalu paste kode berikut persis diatas kode </head>

    <script type='text/javascript'>
    //<![CDATA[
    function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
    var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
    else thumburl='';}
    document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
    if(i!=(numposts-1))
    document.write('');}
    document.write('</div>');}
    //]]>
    </script>

    Klik tombol SIMPAN TEMPLATE.
    Langkah pertama selesai.

Langkah kedua

•     Klik tab Rancangan.
•     rancangan
•     Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman.
•     elemen laman
•     Klik Tambah Gadget untuk menambahkan gadget baru.
•     tambah gadget
•     Setelah muncul jendela baru, klik tanda plus untuk HTML/JavaScript
•     html javascript

    Copy script dibawah ini, lalu paste pada kolom yang tersedia. Beri juga judul yang sesuai dengan yang anda inginkan. Namun sebelumnya anda harus mengubah tulisan yang di beri warna hijau dengan nama kategori yang di inginkan.

    <script type='text/javascript'>var numposts = 6;</script>
    <script type="text/javascript" src="/feeds/posts/default/-/namalabelmu?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

     script label
    Klik tombol SIMPAN
    Langkah kedua Selesai.

Jika anda ingin menambahkan widget lain untuk nama kategori yang lain, anda hanya melakukan hal yang sama dengan urutan Langkah Kedua.

Untuk pengaturan custom seperti mengubah ukuran thumbnail, border dan lainnya, anda dapat mengubah pengaturan di bagian CSS, silahkan kreasikan sendiri :

/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}

Untuk mengatur jumlah thumbnail yang ingin tampil anda tinggal mengubah angka 6 dengan nilai angka yang lain.



<script type='text/javascript'>var numposts = 6;</script>

Manampilkan kategori hanya thumbnail, mungkin cocok untuk blog yang bersifat gallery template, gallery photo dan sejenisnya.

Sumber: http://kolom-tutorial.blogspot.com/

Live demo
Kali ini blog tutorial dan software akan memberikan sebuah tutorial yang sangat bagus dan menarik.. yang diambil dari sebuah template berbayar
Langkah pertama

•     Login ke blogger dengan ID anda.
•     Klik Rancangan.
•     rancangan
•     Klik tab Edit HTML.

    Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
    Carilah kode ]]></b:skin>, copy lalu paste kode berikut persis diatas kode ]]></b:skin>

    

    /*** Featured Categories ***/
         img.label_thumb{
            float:left;
        padding:5px;
        border:1px solid #8f8f8f;
        background:#D2D0D0;
        margin-right:10px;
        height:55px;
        width:55px;
        }
         img.label_thumb:hover{
        background:#f7f6f6;
        }
         .label_with_thumbs {
        float: left;
        width: 100%;
        min-height: 70px;
        margin: 0px 10px 2px 0px;
        adding: 0;
        }
         ul.label_with_thumbs li {
        padding:8px 0;
        min-height:65px;
        margin-bottom:10px;
        }
        .label_with_thumbs a {}
        .label_with_thumbs strong {}

    Carilah kode </head>, copy lalu paste kode berikut persis diatas kode </head>

    <script type='text/javascript'>
    //<![CDATA[
    function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Lal98p72ErJhL3oe9wSblJicoWtzwxgcuWKUfjVFZj39Wp_XRDAfDyIGZenEecX9Vxsk4pD5GTz62EAu4VFOUIXZrMKpshrg8dYMJ4f_SDhw_oNR2OBzMmg8fpOQAl-vuIrhDPf11zPK/';}
    var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
    document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
    else
    if("summary"in entry){var postcontent=entry.summary.$t;}
    else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
    else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
    var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
    if(showcommentnum==true)
    {if(flag==1){towrite=towrite+' | ';}
    if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
    if(displaymore==true)
    {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
    document.write(towrite);document.write('</li>');if(displayseparator==true)
    if(i!=(numposts-1))
    document.write('');}document.write('</ul>');}
    //]]>
    </script>

    Klik tombol SIMPAN TEMPLATE.
    Langkah pertama selesai.

Langkah kedua

•     Klik tab Rancangan.
•     rancangan
•     Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman.
•     elemen laman
•     Klik Tambah Gadget untuk menambahkan gadget baru.
•     tambah gadget
•     Setelah muncul jendela baru, klik tanda plus untuk HTML/JavaScript
•     html javascript

    Copy script dibawah ini, lalu paste pada kolom yang tersedia. Beri juga judul yang sesuai dengan yang anda inginkan. Namun sebelumnya anda harus mengubah tulisan yang di beri warna hijau dengan nama kategori yang di inginkan.

    <script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

    <script type="text/javascript" src="/feeds/posts/default/-/Gadget?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

    gadget corner
    Klik tombol SIMPAN
    Langkah kedua Selesai.

Jika anda ingin menambahkan widget lain untuk nama kategori yang lain, anda hanya melakukan hal yang sama dengan langkah-langkah diatas.

Apakah script diatas bisa di customisasi? bisa. Dalam kode diatas ada bebebrapa yang dapat anda atur misal jumlah karakter yang ingin di tampilkan, thumbnail, jumlah posting, tanggal posting, komentar, serta more link.

Dalam script tersebut ada tulisan severti ini :

var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var showcommentnum = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 80;

Kode berwarna merah adalah kode yang bisa anda edit, true berarti tampilkan, false berarti jangan di tampilkan, 80 adalah jumlah karakter, silahkan coba-coba ganti saja.

Sumber: http://kolom-tutorial.blogspot.com

ini article sebelumnya sudah pernah saya tulis tapi entah knapa kok tidak ada di blog ini jadi saya akan menulis ulang untuk anda yang sedang beljar ngeblog

Nah dibawah ini adalah caranya :

1. Langkah pertama yang Anda harus lakukan Adalah Log In ke Blogger lalu menuju bagian

"Layout" kemudian masuk "Edit HTML"

2. Setelah itu centang "Expand Widget Templates"

3. Kemudian cari code dibawah ini :

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>

4. Setelah ketemu code diatas lalu tambahkan code dibawah ini diatasnya

&lt;a href='ymsgr:sendIM?akbar.ibnu800'&gt; &lt;img src='http://opi.yahoo.com/online?u=akbar.ibnu800&amp;amp;m=g&amp;amp;t=1&amp;amp;l=us'/&gt;
&lt;/a&gt;&lt;br/&gt;

Code yang berwarna ungu diatas ganti dengan ID YM kamu, dan angka yang berwarna orange adalah bentuk dari lambang status YM, keterangan lebih jelasnya bisa dibaca disini.

5. Kalau sudah kemudia SAVE

berikut ini saya akan memberikan anda apa yang dimaksud margin dan pading dalam CSS dan HTML.. tutorial berikut sangat bermanfaat untuk anda  yang ingin mengedit template blog atau bukan oke langsung saja.

Persoalan klasik namun masih banyak yang mendapat problem disesi ini.

apa itu makhluk yang bernama margin dan padding itu?

margin adalah menentukan jarak komponen dari bagian paling luar, sedangkan padding adalah sebaliknya yaitu yang bagian dalam.

tarulah sekarang kita mengedit layout blogspot. (bagian content atau potingan dan sitebar).

yang saya tandai dengan garis merah tersebut adalah merupakan bagian luar dari komponen ini. tarulah saya tentukan ukuran lebarnya 760px saya beri nama bagian_content_luar. Nah pada bagian dalam komponen ini akan ada 2 komponen lagi yang tercipta. oleh karena itu perlu ditentukan berapa jaraknya dari bagian komponen (bagian_content_luar) ke bagian postingan dan header.

Ketika anda menggunakan code padding…. maka secara otomatis sisa ruang untuk dua komponen bagian dalam ini akan berkurang. tarulah anda memberi nilai padding: 10px; maka ukuran yang tersisa tinggal 740px; sebab akan terhitung dari komponen bagian_content_luar untuk sisa bagian dalam. lain halnya bila menggunakan code Margin, bila menggunakan perintah margin maka komponen bagian_content_luar ini akan bergeser (yang kiri bergeser ke kanan sebanyak 10px, dan kanan tidak bergeser namun akan memberi jarak kosong pada sebelah kanan sebanyak 10px; begitu pula pada bagaian atas dan bawah.

Sebaiknya…. bila anda memilih dalam menggunakan margin..!!! tentukan bagian per bagian, atau dengan kata lain atasnya berapa, kanan berapa, bawah… dll, dalam penulisan code untuk menentukan bagian per bagain terdiri dari dua cara yaitu:

1. margin: 2px 2px 5px 0px; urutannya –> Atas, kanan, bawah, kiri

2. margin-top: 2px; margin-right: 2px; margin-bottom: 5px; margin-left: 0px;

demikian juga halnya dengan padding bila di tulis bagian per bagain.

Ok saya akhir dulu postingan ini… sengaja saya posting pendek2 sebab bila postingan panjang sekali, saya khawatir… anda akan ngeri melihatnya maksud saya…!!! jangan sampai anda belum baca sudah takut… karena panajang sekali :D

Sumber: http://www.kangnoval.com

Pernahkah anda berniat ingin menambah module position / widget position pada blog anda.. sebenernya cara ini sudah pernah saya jelaskan.. namun jika anda belum berhasil pada tutorial yang sebelumnya cobalah tutorial berikut ini.. dan dijamin bisa.. oke langsung saja hanya di BLOG TUTORIAL DAN SOFTWARE.

Menambah elemen di atas footer

    Login ke blogger dengan id anda
    Tuju menu Tata Letak
    Pada tab menu, klik Edit HTML
    Backup template anda, klik Download Template Lengkap
    Sekarang cari kode ini :

        #footer {
        width:900px;
        clear:both;
        margin:0 auto;
        padding-top:15px;
        line-height: 1.6em;
        text-transform:uppercase;
        letter-spacing:.1em;
        text-align: center;
        }

    Tambahkan atau copy lalu paste kode berikut di bawah kode tadi

        /* bottom
        ----------------------------------------------- */
        #bottom {
        width:900px;
        clear:both;
        margin:0 auto;
        float:left;
        padding:10px 0;
        color:#333;
        background:#ffffff;
        border-top:1px solid #333;
        }
        #bottom a:link {
        color:#006699;
        text-decoration:none;
        }
        #bottom a:hover {
        color:#c06000;
        text-decoration:underline;
        }
        #bottom a:visited {
        color:#045FB4;
        text-decoration:none;
        }
        #bottom h2 {
        padding:20px 0 2px 0;
        margin:0 0 10px 0;
        border-bottom:1px dotted #cccccc;
        font-size:11px;
        font-weight:bold;
        line-height:1.4em;
        text-transform:uppercase;
        }
        #bottom ul {
        padding:0;
        margin:0;
        color:#333;
        }
        #bottom ul li {
        list-style-type:none;
        border-bottom:1px dotted #333;
        background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .17em;
        padding-left:17px;
        margin-top:2px;
        }
        #left-bottom {
        width:200px;
        float:left;
        padding-left:15px;
        }
        #center-bottom {
        width:200px;
        float:left;
        padding:0 20px 0 20px;
        }
        #right-bottom {
        width:420px;
        float:right;
        padding-right:15px;
        }

    Sekarang kita membuat id untuk elemen di atas footer tersebut. Cari kode ini :

        <div id='footer-wrapper'>
        <b:section class='footer' id='footer'/>
        </div>

    Tambahkan kode berikut di atas kode tadi :

        <div id='bottom'>
        <b:section class='bottom' id='left-bottom' preferred='yes'/>
        <b:section class='bottom' id='center-bottom' preferred='yes'/>
        <b:section class='bottom' id='right-bottom' preferred='yes'/>
        </div> <!-- end bottom -->

    Sekarang klik tombol SIMPAN TEMPLATE
    Selesai

pernahkah anda merasa kesusahan saat ingin mengecek blog anda melalu HP oke ini dia solusinya... cara empercepat blog saat dibuka di hp.. oke ini dia tutorial yang di tulis admin tutorial dan software malam ini

# Login ke Dashboard > Rancangan > Edit HTML
# Temukan kode berikut ini :


# Copy kode dibawah ini, dan paste tepat sebelum kode diatas.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

# Save dan selesai.

selanjutnya anda hanya perlu memastika perubahan melalui browser HP anda

OKe kali ini saya akan memberitahu 1 lagi module yang wahhh hehehe knapa wah.. karena saya pertama kali melihat module ini pada blog film thehacker... dan saya iseng2 ambil source code nya trus cari di google... untuk lanjutannya deh.. oke ini dia cara2 memasang module ini..

1. login dulu ke blogger anda
2. klik tata letak
3. klik edit html
4. klik "expand template widget"
5. Cari kode ]]></b:skin>.
6. Copy paste kode berikut persis di atas kode  ]]></b:skin>.

.adscolumn{
width:933px;
padding:10px 3px;
background:#fff;
margin:5px 10px 0px 10px;
text-align:center;
border:1px solid #C0C0C0;
}
.adscolumn .widget{
}

7. Lihat ke bagian bawah, lalu cari kode berikut :

<div id='main-wrapper'>

8. Copy paste kode berikut persis di atas kode <div id='main-wrapper'>

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

9. Klik tombol SIMPAN TEMPLATE.

Ok..langkah diatas adalah langkah membuat elemen persis dibawah header, coba anda clik tata letak, lalu elemen halaman sudah adakah elemen halaman tersebut dibawah header yang nantinya jadi seperrti ini :

Nah yang dilingkari brush hitam itulah yang disebut elemen percis dibawah header..(maaf lingkarannya pletat pletot..hehe)
Ok sekarang lanjut,,sekarang kita mulai masuk untuk membuat step carousel, sekarang anda kembali ke edit html. cari kode  ]]></b:skin> kemudian paste kode css berikut ini diatas kode ]]></b:skin>

.carousel{
        float:left;
        margin: 0;
        padding:0px;
        }

.carousel .widget {
        width: 980px;
        background:#c4d5ec;
        margin: 0;
        padding:0;
}

.carousel h2{
        display:none;
        }
.stepcarousel{
        position: relative;
        overflow: scroll;
        width: 940px;
        height: 160px;
}

.stepcarousel .belt{
       position: absolute;
       left: 0;
       top: 0;
}

.stepcarousel .panel{
     float: left;
     overflow: hidden;
     margin: 5px;
     width: 140px;
}

.stepcarousel .panel img{
     float: left;
     background:#940f04;
     margin: 5px;
     padding:5px;
     border:1px solid #ccc;
}

.stepcarousel .panel img:hover{
     background:#ffffff;
     }

berikutnya kita langsung masuk ke kode javascriptnya,  sebelumnya tolong klik link dibawah untuk melihat seperti apa kode javascript yang akan kita pakai, lalu copy kode tersebut.

berikutnya kita langsung masuk ke kode javascriptnya,  sebelumnya tolong klik link dibawah untuk melihat seperti apa kode javascript yang akan kita pakai, lalu copy kode tersebut.


nah, sudah lihat bagaimana kode javascriptnya..?, jangan dipikirkankan..!!!, copy ajah langsung lalu paste kode javascript tersebut diatas kode

nah selesai sudah penyisipan kode di page html, kalau anda belum yakin jangan langsung save tuh kode...lihat dulu kebenarannya dengan mengklik "pratinjau", setelah yakin tidak ada kesalahan, baru anda langsung save.

eits,,belum selesai sobat,,,sekarang kita langsung menuju tata letak, lalu elemen halaman dan klik tambah gatdet di kolom elemen halaman dibawah header yang baru saja kita tambahkan, nih saya kasih lihat lagi gambarnya :
gimana..sudah jelas kan,,? nah lalu pilih html/javascript, kronologisnya gini nih..
# Tata letak

# Elemen halaman

# Tambah gatget

# Html/Javascript

# lalu masukkan kode berikut ini :


<script type="text/javascript">

stepcarousel.setup({
    galleryid: 'mygallery', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panel', //class of panel DIVs each holding content
    autostep: {enable:true, moveby:1, pause:3000},
    panelbehavior: {speed:500, wraparound:false, persist:true},
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i41.tinypic.com/j0b0j7.png', 30, 60], rightnav: ['http://i41.tinypic.com/mcu1zk.png', -65, 60]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

</script>

<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- change the links with your own links -->

<div class="panel">
<a href="http://tutorialdansoftware.blogspot.com"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_581635038l.jpg"/></a>
</div>


</div>
</div>

# perhatikan kode berwarna hijau dan biru diatas, untuk yang berwarna biru ganti dengan link gambar    anda..dan untuk gambar hijau ganti dengan link gambar yang menghubungkan gambar tersebut ke artikel yang anda tulis.

# catatan: kode seperti dibawah ini bisa anda tambahkan sesuai selera anda


<div class="panel">
<a href="http://tutorialdansoftware.blogspot.com"><img border="1" src="http://photos-318.friendster.com/e1/photos/81/33/27313318/1_581635038l.jpg"/></a>
</div>

# (biasanya blog yang berisi kumpulan design, template, dan gallery gambar akan sangat membutuhkannya untuk menampung gambar mereka dalam satu gallery..seperti blogku ini..hehe)

# ok sudah selesai simpan hasil pekerjaan anda dan lihat blog anda ...

sebenarnya widget ini bisa disimpan dimanapun selain di bawah header..namun pada umumnya widget ini disimpan tepat dibawah header...
selamat mencoba..

Sebenarnya cara ini sudah bertebaran di dunia maya... bahkan dasar bgt, tapi ga ada salahnya kalau saya membahas lagi khususnya bagi para pemula dan yang sedang belajar seperti saya.
Ini dia step by step nya:
1. login ke blogger
2. pilih design
3. pilih edit html
4. lalu cari semua kode ini: showaddelement='no'
5. rubah menjadi showaddelement='yes'
6. jika sudah di save template

Finish hehe sekian dari saya semoga article sederhana ini bermanfaat bagi kalian semua blogger...

oke script ini sebelumnya saya dapatkan dari blogger senior.. dan sudah saya modifikasi lagi mohon mav jika ada kesamaan dan ada kesalahan.. tapi berhsail kok sudah saya tes di blog saya di http://tutorialdansoftware.blogspot.com tanpa basa-basi oke langsung aja.. ini dia cara nya..




1. login ke blogger.
2. pilih design
3. tambah gadget-->>pilih-->>HTML JAVASCRIPT

lalu coppy script ini..

 yap kali ini saya akan memberitahukan kode2 penting yang berhasil saya himpun ketika jalan2 di blog master blogger o-om.com
Seperti yang kita ketahui, template blog dengan gaya Magazine Style merupakan salah satu favorit template yang sering di pakai oleh para blogger. Salah satu ciri template blog dengan gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog.


Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda terapkan untuk mengatur tampilan widget blog Anda.


1. Hanya pada Halaman Utama Blog

<b:if cond='data:blog.url == data:blog.homepageUrl'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika sobat mengklik Label Post atau membaca postingan secara keseluruhan.
Contoh penggunaan kode ini bisa anda liat pada demo blog berikut. Jika sobat membaca artikel secara keseluruhan atau mengklik kategori post, 3 kolom diatas main post akan menghilang.


2. Kategori Post dan Single Post


<b:if cond='data:blog.url != data:blog.homepageUrl'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (membaca postingan secara keseluruhan).
Contoh penggunaan kode ini bisa Anda lihat pada demo blog tadi dimana ketika sobat mengklik kategori post atau membaca postingan secara keseluruhan, widget pada kolom footer dengan judul DheTemplate.com - New Free Blogger Template Everyday baru muncul. Widget ini tidak akan muncul pada halaman utama blog.


3. Halama Utama Blog dan Kategori Post


<b:if cond='data:blog.pageType != &quot;item&quot;'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca postingan secara keseluruhan.
Contoh penggunaan kode ini pada demo blog tersebut adalah widget pada sidebar kiri dengan judul New Templates. Jika sobat membaca suatu postingan secara keseluruhan atau mengklik kategori post (About dan DheTemplate pada menu navigasi), maka widget tersebut akan menghilang.


4. Single Post


<b:if cond='data:blog.pageType == &quot;item&quot;'> ... </b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.
Contoh penggunaan kode ini pada demo blog tersebut adalah widget sidebar kiri dengan judul Blog Template dimana saat sobat membaca suatu postingan secara keseluruhan, maka widget tersebut baru muncul.


5. Halama Utama Blog dan Kategori Post

<b:if cond='data:blog.pageType == &quot;index&quot;'>

Fungsi kode ini sama dengan fungsi kode pada nomer 3.


6. Menampilan Widget Blog Pada Postingan Tertentu Saja

<b:if cond='data:blog.url == &quot;URL_POST_TERTENTU&quot;'> ... </b:if>

Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu. Untuk lebih jelasnya silahkan sobat melihat demo blog tersebut. Lalu klik artikel post dengan judul DheTemplate.com - New Free Blogger Template Everyday. Anda akan melihat widget blog dengan judul Templates By DheTemplate muncul. Widget tersebut tidak akan muncul apabila sobat membaca postingan blog yang lain. Misalnya sobat membaca postingan pada demo blog tersebut dengan judul DheTemplate.com, maka widget tersebut tidak akan muncul.

7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja

<b:if cond='data:blog.url != &quot;URL_POST_TERTENTU&quot;'> ... </b:if>


Kode ini merupakan kebalikan dari kode no 6 dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul pada postingan yang lain. Untuk lebih jelasnya, sobat klik artikel post dengan judul DheTemplate.com - New Free Blogger Template Everyday dan bandingan jika sobat mengklik postingan dengan judul DheTemplate.com. Apa yang akan Anda dapat?? Widget blog dengan judul BlogList tidak muncul pada artikel postingan dengan judul DheTemplate.com - New Free Blogger Template Everyday dan widget tersebut baru muncul pada artikel postingan dengan judul DheTemplate.com. termasuk juga artikel postingan yang lain dan halaman utama dan kategori post 


Mungkin itu saja yang saya tahu tentang cara membuat widget blog dari muncul menjadi menghilang atau menghilang kemudian muncul. Untuk penerapan kode-kode diatas ada 2 cara yaitu langsung pada widget dan secara kelompok (mungkin pada artikel selanjutnya). Semoga bermanfaat.

ouuu iya cara pemasangannya begini contoh untuk kode no 1..
Pada kondisi default Widget akan ditampilkan pada semua halaman di Blog anda. Jika anda ingin menampilkan widget hanya pada halaman utama saja kami akan coba membantu dengan postingan kali ini. Sebenarnya caranya tidak terlalu sulit, berikut ini cara-caranya : Seperti biasa, Login ke Blogger. Pada Dashboard klik Layout >> Edit HTML. Contreng 'Expand widget templates'. Carilah kode seperti ini

<b:widget id= 

lengkapnya seperti ini:  

<b:widget id='Label1' locked='false' title='Title' type='Label'>  

kopi kode ini  

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

dan letakkan di bawah  

<b:includable id='main'>:




lalu cari kode ini
scroll kebawah sedikit, ada kode kopi lagi kode ini

letakkan setelah




atau sebelum  kode ini


di ambil dari HTTP://O-OM.COM

Yang dimaksud Script Like dari pertanyaan diatas mungkin adalah tombol Facebook Like yang seperti ada di facebook kali yah, koreksi jika salah .

Tombol facebook Like berfungsi untuk mempermudah pengunjung blog anda untuk berbagi atau merekomendasikan artikel anda ke teman-teman mereka yang ada di facebook. Hal ini tentu saja apabila postingan anda dirasa bermanfaat bagi mereka dan ingin memberitahukan kepada teman-temannya.
Memasang tombol facebook like merupakan salah satu trik untuk mendapatkan jumlah pengunjung yang melimpah dari mereka para penggemar facebook, mengingat facebook merupakan situs jejaring sosial paling populer saat ini. Jadi, bagaimana cara memasang tombol facebook like di blogger?

Cara mengambil kode Tombol Facebook Like

Pada dasarnya, untuk mendapatkan tombol face book like, anda bisa mengambil dari halaman Facebook develover. Anda tinggal memasukkan beberapa settingan dan kode facebook like akan di generate.
Namun, agar tidak repot khusus untuk tombol facebook like yang kan di pasang di postingan blogger berikut adalah kodenya :

1. Silahkan login ke blogger dengan ID anda.
2. Klik Rancangan. 

 Klik tab Edit HTML.
 Lakukan backup terlebih dahulu template anda dengan klik Download Template Lengkap. 
 Beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget.

1. Silahkan cari kode berikut pada template anda ( tips : gunakan fasilitas find pada browser anda agar lebih cepat dalam pencarian, tekan Ctrl+F untuk mengaktifkan, lalu masukkan kode yg dicari).
   
   
2. Copy kode berikut, lalu paste dibawah kode yang tadi :
   
   <iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>
   

8. Klik tombol SIMPAN TEMPLATE.
9. Selesai.

Tutorial ini diambil dari blog kang rohman= http://kolom-tutorial.blogspot.com

Masuk ke dashboard ► LAYOUT/DESIGN ► EDIT HTML ► Download Full Template untuk berjaga-jaga bila terjadi kesalahan ► Centang Expand Widget ► sisipkan kode berikut dan paste di atas ]]> ► Save Template.

    /*-----pasang bubble tooltips di blogs-start----*/
    a.tt{
    position:relative;
    z-index:24;
    color:#B40404;
    font-weight:bold;
    text-decoration:none;
    }
    a.tt span{ display: none; }

    /*background:; ie hack, something must be changed in a for ie to execute it*/
    a.tt:hover{ z-index:25; color: #2E9AFE; background:;}
    a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
    padding: 15px 0 0 0;
    width:200px;
    color: #000000;
    text-align: center;
    filter: alpha(opacity:90);
    KHTMLOpacity: 0.90;
    MozOpacity: 0.90;
    opacity: 0.90;
    }
    a.tt:hover span.top{
    display: block;
    padding: 30px 8px 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioMHWOa-p4of-SeBMl2sqU2tB20owDCD7LRmWZpL_ZFRX8EZH8DYT7e4vRp1cSeWOlWr3xV4Da71nHgD01C7u8iFrx8oAJqp7dDpxfX4knNwnWqXYo4C36oU7nygxkxpn6GUh3FT8G3zQ/) no-repeat top;
    }
    a.tt:hover span.middle{ /* different middle bg for stretch */
    display: block;
    padding: 0 8px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6nMzAv5MG4UfyZlPZez-NTVTMW7KYiv86ougBs0HkCXMhYcuXjCunUTJ38wnGOSZINAq-Z-_x2EUmPB4i66ASWh3aoGI8v2jnnIaYJY48PVmBjOaeejAwKezKjBbQgBW13iAl316Afg/) repeat bottom;
    }
    a.tt:hover span.bottom{
    display: block;
    padding:3px 8px 10px;
    color: #151515;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioMHWOa-p4of-SeBMl2sqU2tB20owDCD7LRmWZpL_ZFRX8EZH8DYT7e4vRp1cSeWOlWr3xV4Da71nHgD01C7u8iFrx8oAJqp7dDpxfX4knNwnWqXYo4C36oU7nygxkxpn6GUh3FT8G3zQ/) no-repeat bottom;
    }
    /*----membuat bubble tooltips di artikel -end----*/


Selanjutnya Untuk membuat teks yang memiliki bubble tooltip silakan copy kode di bawah ini :
klik<a href="Tujuan link yang di inginkanl" class="tt">di sini<span class="tooltip"><span class="top"></span><span class="middle">untuk konfirmasi</span><span class="bottom"></a>

Hasilnya :
 

oke kali ini saya akan memberitahukan bagaimana cara membuat page navigation oke langsung saja ya
ini adalah gambar page navigation
Jika Anda ingin memasangnya untuk blog Anda, ikuti langkah-langkah berikut ini :

   1. Masuk kedalam Dasboard Blogger anda terus Layout > Edit HTML
   2. Jangan di ceklish atau centang "Expand Widget Templates"
   3. Cari Kode di bawah ini

      ]]></b:skin>

      dan ganti dengan kode di bawah ini




.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

Kemudian cari kode di bawah ini

</body>

dan ganti kode tadi dengan kode dibawah ini

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://akbaribnuabdillah.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>
</b:if>
<!--Page Navigation Ends-->
</body>

Simpan pekerjaan Anda dan silakan lihat hasilnya, blog Anda sudah punya page navigation

 Untuk membuat 3 kolom Tambah Gadget (Add Page Element) dibawah header caranya adalah sebagai berikut: 

1. Login ke Blogspot--> Tata LeTak --> Edit HTML 
 2. Untuk berjaga-jaga bila nanti pada hasil editnya ada hal yang tidak sesuai dengan keinginan, maka download terlebih dahulu template awal, sehingga kita bisa mengembalikan kondisi template seperti semula dengan cara meng-upload (unggah) template awal yang telah didownload sebelumnya itu. 
 3. Setelah itu cari kode ]]></b:skin> 
dan tambahkan kode berikut diatas kode ]]></b:skin> 

#under_header1{ 
float:left; 
width:33.33%;} #under_header2{ 
float:left; 
width:33.33%;} 
#under_header3{ 
float:right; 
width:33.33%;}

sehingga susunan baris kodenya akan terlihat seperti pada gambar dibawah ini:
 4. Setelah itu cari baris kode berikut (atau yang mirip, tergantung model template yang dipakai ya):

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no"> 
<b:widget id='Header1' locked='true' title='Blog Doddy (Header)' type='Header'/> 
</b:section> 
</div>

dan tambahkan kode berikut dibawah ini dibawah kode tersebut diatas:


<div id="under_header1"> 
<b:section class='header' id='underheader1' preferred='yes'/> 
</div> 


<div id="under_header2"> 
<b:section class='header' id='underheader2' preferred='yes'/> 
</div> 


<div id="under_header3"> 
<b:section class='header' id='underheader3' preferred='yes'/> 
</div>

sehingga susunan kodenya akan menjadi seperti terlihat pada gambar dibawah ini:

 5. Setelah itu klik tombol SIMPAN TEMPLATE, dan periksa pada Elemen Halaman apakah kolom Tambah Gadget yang baru dibuat sudah muncul dibawah header seperti terlihat pada gambar pertama diatas.

6. Jika ingin posisi kolom Tambah Gadgetnya seperti pada gambar dibawah ini: 

 maka baris kode seperti tersebut pada poin 3 dirubah menjadi seperti berikut:

#under_header1{
} #under_header2{ 
float:left;
width:50%; } 
#under_header3{ 
float:right;
width:50%; }

sehingga susunan baris kodenya akan seperti terlihat pada gambar berikut:
 7. Atau jika ingin posisi kolom Tambah Gadgetnya kebalikan dari posisi pada poin 6 seperti terlihat pada gambar dibawah ini:
 maka baris kode pada poin 3 akan menjadi seperti terlihat dibawah ini:

#under_header1{ 
float:left;
width:50%; } 
#under_header2{ 
float:right;
width:50%; } 
#under_header3{ 
}

sehingga susunan baris kodenya akan menjadi seperti terlihat pada gambar berikut:
 8. Atau jika ingin posisi kolom Tambah Gadgetnya menjadi seperti terlihat pada gambar dibawah ini: 
 maka baris kode pada poin 3 akan menjadi seperti terlihat dibawah ini:

#under_header1{ 
float:left;
width:50%; } 
#under_header2{ 
float:right;
width:50%; } 
#under_header3{
margin: 0 12.5%; float:left;
width:75%; }

sehingga susunan baris kodenya menjadi seperti terlihat dibawah ini:
 Catatan:
Margin adalah jarak antar elemen pada template. Angka pertama menunjukan jarak bagian atas dan bawah elemen, angka kedua menunjukan jarak bagian kiri dan kanan elemen. Satuannya bisa %, px, em. Rubah nilainya sesuai keinginan. 
float menunjukan letak kolom Page Element (Tambah Gadget) yang dibuat nantinya akan berada di sebelah kiri atau kanan. 
width adalah lebar kolom Page Element (Tambah Gadget) yang dibuat. Satuannya bisa %, px, em. Rubah nilainya sesuai keinginan.
* Untuk memudahkan pencarian baris kode, tekan Ctrl + F untuk menampilkan kolom pencarian yang letaknya ada dibawah kolom Edit HTML seperti terlihat pada gambar dibawah ini, lalu ketikan atau kopi paste baris kode yang ingin dicari pada kotak pencarian. Baris kode yang sesuai akan ditunjukan dengan diberi warna hijau. 

yaps article kali ini kita akan melanjutkan article yang kemarin  yang part 1 atau anda bisa lihat disini
MEMBUAT 2 KOLOM TAMBAH GADGET (ADD PAGE ELEMENT) DI BAWAH HEADER

 Untuk membuat 2 kolom tambah gadget (add page element) di bawah header, caranya tidak berbeda jauh dengan cara membuat 1 kolom tambah gadget di bawah header.
Caranya adalah sebagai berikut:

1. Login ke Blogspot--> Tata LeTak --> Edit HTML
 2. Untuk berjaga-jaga bila nanti pada hasil editnya ada hal yang tidak sesuai dengan keinginan, maka download terlebih dahulu template awal, sehingga kita bisa mengembalikan kondisi template seperti semula dengan cara meng-upload (unggah) template awal yang telah didownload sebelumnya itu.




 4. Setelah itu cari baris kode berikut (atau yang mirip, tergantung model template yang dipakai ya):

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='Blog Doddy (Header)' type='Header'/>
</b:section>
</div>

dan tambahkan kode berikut dibawah ini dibawah kode tersebut diatas:

<div id="under_header1">
<b:section class='header' id='underheader1' preferred='yes'/>
</div>


<div id="under_header2">
<b:section class='header' id='underheader2' preferred='yes'/>
</div>

sehingga susunan kodenya akan menjadi seperti terlihat pada gambar dibawah ini:
 5. Setelah itu klik tombol SIMPAN TEMPLATE, dan periksa pada Elemen Halaman apakah kolom Tambah Gadget yang baru dibuat sudah muncul dibawah header seperti terlihat pada gambar pertama diatas.

6. Jika ingin kolom yang dibuat tadi berada sejajar dan selebar dengan kolom posting dan kolom sidebar di sebelah kanan seperti terlihat pada gambar dibawah ini:
 maka baris kode seperti tersebut pada poin 3 ditambahkan lagi kodenya menjadi seperti berikut:

#under_header1{
float:left;
width:410px; } #under_header2{
margin:0 10px;
float:right;
width:200px; }

sehingga susunan baris kodenya akan seperti terlihat pada gambar berikut:
 Catatan:
Margin adalah jarak antar elemen pada template. Angka pertama menunjukan jarak bagian atas dan bawah elemen, angka kedua menunjukan jarak bagian kiri dan kanan elemen. Satuannya bisa %, px, em. Rubah nilainya sesuai keinginan.
float menunjukan letak kolom Page Element (Tambah Gadget) yang dibuat nantinya akan berada di sebelah kiri atau kanan.
width adalah lebar kolom Page Element (Tambah Gadget) yang dibuat. Satuannya bisa %, px, em. Rubah nilainya sesuai keinginan.
* Untuk memudahkan pencarian baris kode, tekan Ctrl + F untuk menampilkan kolom pencarian yang letaknya ada dibawah kolom Edit HTML seperti terlihat pada gambar dibawah ini, lalu ketikan atau kopi paste baris kode yang ingin dicari pada kotak pencarian. Baris kode yang sesuai akan ditunjukan dengan diberi warna hijau.