MEMBUAT FOOTER 2 KOLOM

Menyambung posting sebelumnya mengenai Menambah Footer 3 Kolom, kali ini adalah untuk versi 2 kolomnya. Dan langsung saja berikut ini

langkah-langkahnya :

• Login ke Blogger, pilih Rancangan
• Klik edit HTML
• Kalau sudah, cari kode ]]></b:skin>
• Tambahkan kode di bawah ini :

#footer-column-divide {clear:both;} .footer-column { padding: 10px;}

• Letakan tepat di atas kode ]]></b:skin>
• Lalu cari kode dibawah ini :

    <div id='footer-wrapper'>

    <b:section class='footer' id='footer'/>

    </div>

• Hapus kode<b:section class='footer' id='footer'/> lalu ganti dengan kode dibawah ini :

<div id='footer-column-divide'> <div id='footer1' style='width: 50%; float:left;margin:0; text-align:left;'><b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/></div> <div id='footer2' style='width: 50%; float: left;margin:0; text-align: left;'><b:section class='footer-column' id='col2'preferred='yes' style='float:left;'/></div><div style='clear:both;'/></div>

• Terakhir klik Save Template.

Catatan Penting :
Tiap kali kita mengutak-atik template melalui edit HTML, usahakan download template lengkap terlebih dahulu, demi keamanan dan jaga-jaga bila hasilnya kurang memuaskan.

Read More

MEMBUAT FOOTER 3 KOLOM

Footer adalah bagian bawah Template, biasanya terdiri dari 1, 2, 3, atau 4 kolom. Footer yang sesuai tentunya dapat mempercantik tampilan Blog.
Bila kita menggunakan template bawaan dari Blogger, tentunya tidak akan mengalami kesulitan mengatur footer. Karena Blogger telah menyediakan pirantinya, yaitu Perancang Template, nah masalahnya bila kita menggunakan template dari penyedia template lain. Berikut ini cara-caranya :     

• Login Blogger, pada dashbord klik Rancangan lalu klik edit HTML. Untuk keamanan terlebih dahulu downloadlah template lengkap.

 ini kode CSSnya :

#footer-column-container {</div><div style="color: black;">clear:both;</div><div style="color: black;">}</div><div style="color: black;">.footer-column {</div><div style="color: black;">padding: 10px;</div><div style="color: black;">}

• Copy dan pastekan sebelum kode </b:skin>
• Lalu cari kode <b:section class='footer' id='footer'/> (pakai CTRL+F)
• Copy dan paste kode dibawah ini, di bawah kode tersebut:

<div id='footer-column-container'></div><div style="color: black;"><div id='footer2' style='width: 30%; float: left;</div><div style="color: black;">margin:0; text-align: left;'></div><div style="color: black;"><b:section class='footer-column' id='col1'</div><div style="color: black;">preferred='yes' style='float:left;'/></div><div style="color: black;">        </div></div><div style="color: black;"><div id='footer3' style='width: 40%; float: left;</div><div style="color: black;">margin:0; text-align: left;'></div><div style="color: black;"><b:section class='footer-column' id='col2'</div><div style="color: black;">preferred='yes' style='float:left;'/></div><div style="color: black;">        </div></div><div style="color: black;"><div id='footer4' style='width: 30%; float: right;</div><div style="color: black;">margin:0; text-align: left;'></div><div style="color: black;"><b:section class='footer-column' id='col3'</div><div style="color: black;">preferred='yes' style='float:right;'/></div><div style="color: black;">        </div></div><div style="color: black;"><div style='clear:both;'/></div><div style="color: black;"><p></div><div style="color: black;"><hr align='center' color='#5d5d54' width='90%'/></p></div><div style="color: black;"><div id='footer-bottom' style='text-align: center; padding:</div><div style="color: black;">10px; text-transform: lowercase;'></div><div style="color: black;"><b:section class='footer' id='col-bottom' preferred='yes'></div><div style="color: black;"><b:widget id='Text2' locked='false' title='' type='Text'/></div><div style="color: black;"></b:section></div><div style="color: black;"></div></div><div style="color: black;"><div style='clear:both;'/></div><div style="color: black;"></div>

• Simpan template. 

Read More

MEMASANG TRANSLATOR DI BLOG

Gadget ini berfungsi untuk menerjemahkan bahasa blog Sahabat ke bahasa yang diinginkan oleh pembaca blog. Dengan gadget Google Translate ini, si
pembaca akan dengan mudah mengerti isi blog Sahabat. Keuntungannya bagi blog Sahabat adalah meningkatkan traffic kunjungan blog, karena bisa dimengerti oleh seluruh dunia.

Langkah - langkahnya adalah sebagai berikut:

• Kunjungi Google Translate.
• Pada Select the language of your webpage,ubah sesuai bahasa blog kita.
• Copy dan paste kode HTML yang berada didalam kotak.
• Login pada blogger.
• Klik Layout pada Dashboard.
• Klik Add a Gadget, dan pilih HTML/Javascript
• Masukkan kode HTML yang telah dicopy (seperti pada langkah 4) dan beri judul titlenya, misalnya Google Translate.
• Setelah itu, Save.

Selesai sudah pemasangan Google Translate di blog kita.

Read More

TAB MENU BERJAJAR TIGA

Ada satu lagi cara untuk menghemat ruang di blog kita, sebut saja Tab Menu Berjajar Tiga. Berikut ini langkah-langkah untuk membuatnya.

1. Login BLOGGER
2. Pada menu Dashbord pilih Rancangan
3. Klik Tambah Wiget di sidebar template Sahabat
4. Pilih HTML / Java Scrept, dan pastekan kode di bawah ini :

<style type="text/css"></div><div style="color: black;">    div.TabView div.Tabs</div><div style="color: black;">    {height: 30px;overflow: hidden}</div><div style="color: black;">    div.TabView div.Tabs a {float:left; display:block; width: 60px; /* Lebar Menu Utama Atas */</div><div style="color: black;">    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */</div><div style="color: black;">    padding-top:8px; vertical-align:middle; border:1px solid #2E2E2E; /* Warna border Menu Atas */</div><div style="color: black;">    border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */</div><div style="color: black;">    font-weight:bold; color:#FFFFFF; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}</div><div style="color: black;">    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #424242; /* Warna background Menu Utama Atas */ }</div><div style="color: black;">    div.TabView div.Pages {clear:both; border:1px solid #2E2E2E; /* Warna border Kotak Utama */ overflow:hidden; background-color:#151515; /* Warna background Kotak Utama */ }</div><div style="color: black;">    div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}</div><div style="color: black;">    div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}</div><div style="color: black;">    </style></div><div style="color: black;">    <script type='text/javascript'></div><div style="color: black;">    //<![CDATA[</div><div style="color: black;">    function tabview_aux(TabViewId, id)</div><div style="color: black;">    {</div><div style="color: black;">      var TabView = document.getElementById(TabViewId);</div><div style="color: black;">      // ----- Tabs -----</div><div style="color: black;">      var Tabs = TabView.firstChild;</div><div style="color: black;">      while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;</div><div style="color: black;">      var Tab = Tabs.firstChild;</div><div style="color: black;">      var i   = 0;</div><div style="color: black;">      do</div><div style="color: black;">      {</div><div style="color: black;">        if (Tab.tagName == "A")</div><div style="color: black;">        {</div><div style="color: black;">          i++;</div><div style="color: black;">          Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";</div><div style="color: black;">          Tab.className = (i == id) ? "Active" : "";</div><div style="color: black;">          Tab.blur();</div><div style="color: black;">        }</div><div style="color: black;">      }</div><div style="color: black;">      while (Tab = Tab.nextSibling);</div><div style="color: black;">      // ----- Pages -----</div><div style="color: black;">      var Pages = TabView.firstChild;</div><div style="color: black;">      while (Pages.className != 'Pages') Pages = Pages.nextSibling;</div><div style="color: black;">      var Page = Pages.firstChild;</div><div style="color: black;">      var i    = 0;</div><div style="color: black;">      do</div><div style="color: black;">      {</div><div style="color: black;">        if (Page.className == 'Page')</div><div style="color: black;">        {</div><div style="color: black;">          i++;</div><div style="color: black;">          if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";</div><div style="color: black;">          Page.style.overflow = "auto";</div><div style="color: black;">          Page.style.display  = (i == id) ? 'block' : 'none';</div><div style="color: black;">        }</div><div style="color: black;">      }</div><div style="color: black;">      while (Page = Page.nextSibling);</div><div style="color: black;">    }</div><div style="color: black;">    // ----- Functions -------------------------------------------------------------</div><div style="color: black;">    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }</div><div style="color: black;">    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }</div><div style="color: black;">    //]]></div><div style="color: black;">    </script></div><div style="color: black;">    <form action="tabview.html" method="get"></div><div style="color: black;">    <div id="TabView" class="TabView"></div><div style="color: black;">    <div style="width: 300px;" class="Tabs"></div><div style="color: black;">    <a>menu 1</a></div><div style="color: black;">    <a>menu 2</a></div><div style="color: black;">    <a>menu 3</a></div><div style="color: black;">    </div></div><div style="color: black;">    <div style="width:300px; height:250px; " class="Pages"></div><div style="color: black;">    <div class="Page"></div><div style="color: black;">    <div class="Pad"></div><span style="color: cyan;">     Isi menu tab 1</span><br /><div style="color: black;">    </div></div><div style="color: black;">    </div></div><div style="color: black;">    <div class="Page"></div><div style="color: black;">    <div class="Pad"></div><div style="color: black;">    Isi menu tab view 2</div><div style="color: black;">    </div></div><div style="color: black;">    </div></div><div style="color: black;">    <div class="Page"></div><div style="color: black;">    <div class="Pad"></div><div style="color: black;">    Isi menu tab view 3 </div><div style="color: black;">    </div></div><div style="color: black;">    </div></div><div style="color: black;">    </div></div><div style="color: black;">    </div></div><div style="color: black;">    </form></div><div style="color: black;">    <script type="text/javascript"></div><div style="color: black;">    tabview_initialize('TabView');</div><div style="color: black;">    </script>

5. Klik save.

Read More

MENAMBAH ELEMENT DIATAS HEADER

Bila template blog kita belum memiliki element diatas header untuk menambahkan gaget atau lainnya, misalkan menambahkan TAB MENU HORISONTAL. Kita bisa menambahkannya
sendiri, dan langkah - langkahnya adalah seperti ini:

• Login Blogger
• Masuk Dashboard, pilih Rancangan
• Pilih Edit HTML, lalu centang expand
• Cari Kode :

<b:section class='header' id='header'

• Pada kode di atas setelah id=’header’ biasanya terdapat kode lain yang mengikuti seperti :

“maxwidgets=’1′ showaddelement=’no’>“.

• Jika tidak ada tidak menjadi masalah, yang penting seluruh bagian kode html pada point pertama di atas, gantilah dengan kode html baru sebagai berikut :

<b:section class='header' id='header'  showaddelement='yes'>

6. Klik Save.

Read More

TAB MENU NAVIGATOR HORISONTAL

Bila kita blogwalking ke beberapa site, pasti akan melihat beberapa dari site tersebut memiliki tab menu navigator horizontal pada headernya. Bila blog kita belum memiliki element diatas header, silahkan lihat cara MEMBUAT ELEMENT DI ATAS HEADER.
Tab menu tersebut tentunya sangat bermanfaat sekali, karena kita bisa menyimpan URL penting di sana, dan/atau para pengunjung bisa langsung masuk ke halaman tersebut hanya dengan satu kali klik saja.

Berikut ini adalah langkah - langkah cara membuat tab menu horizontal.

Langkah I :

• Login ke Blogger lalu Masuk ke Dasbor
• Pilih menu Rancangan
• Klik Tab Edit HTML lalu centang expand
• Silahkan cari di dalam template kode : ]]></b:skin>
• Sebelum kode tersebut pastekan script di bawah ini

.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid <span style="color: red;">#000000</span>;}</div><div style="color: cyan;"><br /> </div><div style="color: cyan;">.menuhorisontal ul{margin:0; padding:0; padding-left:0px; font:13px Arial; list-style-type:none}</div><div style="color: cyan;"><br /> </div><div style="color: cyan;">.menuhorisontal li{display:inline; margin:0}</div><div style="color: cyan;"><br /> </div><div style="color: cyan;">.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#000000; background:<span style="color: red;">#CCCCCC</span>;}</div><div style="color: cyan;"><br /> </div><div style="color: cyan;">.menuhorisontal li a:hover{color:<span style="color: red;">#FFFFFF</span>; background:<span style="color: red;">#2E2EFE</span>}

6. Klik Simpan Template

Langkah II :

• Masuk ke Dasbor
• Klik Tab Tata Letak
• Klik Tab Element Halaman
• Klik Tambah Gadget yang berada di posisi header ( atas )
• Klik pilihan menu HTML/JavaScript
• Pastekan script berikut ini ke dalam kolom konten tersebut

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid <span style="color: red;">#FFFFFF</span>; background:<span style="color: red;">#FFFFFF</span>;"></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><div class="menuhorisontal"></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><li></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><a href="<span style="color: blue;">your link here</span>" target="_blank"><span style="color: orange;">your menu here</span></a></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"><br /> </div><div style="color: cyan;"></li></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"></div></div><div style="color: cyan;"><br /> </div><div style="color: cyan;"></div></div><div style="color: cyan;"><br /> </div></div>

• Script berwarna merah di atas adalah kode-kode warna, ganti dengan warna yang sesuai dengan blog kita. Untuk mengetahui kode-kode warna silahkan "klik disini"
• Silahkan ganti script URL yang berwarna biru dengan URL/link.
• Silahkan ganti script yang berwarna orange dengan Menu.
• Klik Simpan
• Selesai

Catatan :

Untuk jumlah menu sesuaikan dengan kebutuhan kita, kita bisa menambah atau menguranginya dengan mengikuti struktur kode HTML tersebut diatas.

Read More