Membuat Suatu Halaman Selalu Berada di Depan

Sebelumnya, sebenarnya trik ini sudah pernah saya bahas di postingan dengan judul membuat postingan lama menjadi halaman depan. Namun, entah kenapa beberapa teman saya masih banyak yang bertanya kepada saya tentang trik tersebut. Yaaa...dari sini mungkin saya sudah cukup mengerti kalau apa yang saya sampaikan masih kurang jelas, hehehe gak apa-apa lah. Postingan ini saya buat hitung-hitung buat ngerinciin postingan yang saya bilang tadi.

Langsung saja, langkah-langkahnya sebagai berikut:

"APABILA YANG DIINGINKAN OLEH TEMAN-TEMAN ADALAH MENAMPILKAN SATU HALAMAN DI HOMEPAGE DAN SELALU HALAMAN ITU... SAJA WALAU ANDA MENGUPDATE POSTINGAN ANDA, MAKA BERIKUT LANGKAH AWALNYA"

Pergi ke halaman Pengaturan => Klik Format, lalu pada bagian "Tampilkan sebanyak mungkin" (bagian paling atas), isikan dengan angka 1. Ini dimaksudkan agar pada homepage/halaman depan blog anda akan tampil selalu satu postingan saja. => Klik Simpan Setelan.

TRIK DI ATAS DILEWATKAN SAJA, JIKA ANDA TIDAK INGIN HANYA SATU POSTINGAN SAJA YANG TAMPIL DI HALAMAN DEPAN BLOG ANDA!

Selanjutnya, yang harus anda lakukan adalah mengatur data waktu penerbitan postingan anda:

1. Silahkan anda pilih, postingan mana yang ingin dijadikan selalu tampil di halaman depan? Caranya gampang saja, jika anda berada di halaman pemostingan, maka anda bisa langsung mengklik Edit Entri. Namun, untuk lebih mudahnya, silahkan untuk pergi ke dasbor anda, dan kliklah Edit Entri pada blog yang diinginkan, lihat tampilan berikut


2. Selanjutnya anda bisa memilih postingan mana yang hendak diubah data waktunya


3. Setelah masuk di halaman postingan, silahkan untuk langsung mengklik menu Opsi Entri

Dengan begitu sekarang anda bisa mengatur data waktu dengan cara mengganti waktu yang lama dengan waktu yang lebih baru. Contoh: Jika postingan anda tersebut telah diterbitkan pada tanggal 17 Agustus 2010, maka gantilah dengan tanggal bahkan bulan ataupun tahun yang lebih baru, contoh: maka menjadi tanggal 18 September 2020 hehe...pokoknya ganti ke waktu yang lebih baru....^

Di screeNshot berikut menyatakan postingan telah diterbitkan pada tanggal 30 Nov 2009 pada jam 06:25 (pagi).

Maka agar selalu ada di depan, ganti saja dengan format tanggal 12/11/10, dengan artian tanggal 10 Nov 2012, gampang bukan?

Dah itu, silahkan langsung untuk mengklik Terbitkan Entri...Dah^

Semoga bermanfaat []

sumber : http://t4belajarblogger.blogspot.com

Cara Menghilangkan Tulisan Entri Lawas

Sebenarnya cara menghilangkan tulisan entri lawas bukanlah hal sepele. Bila sebuah blog sudah di pasang widget label atau kategori, maka begitu diklik salah satu labelnya maka akan muncul tampilan seperti ini:

Itulah pengaturan standar dari blogspot. Tetapi sebagian blogger merasa terganggu dengan tampilan lawas ini. Alasannya membuat halaman posting kurang rapi, terlalu ribet dan mempengaruhi loading blog, ada juga yang bbilang bahwa blognya kurang keren lah.... Nah, terlepas dari apa yang menjadi alasan, jika anda juga ingin menghilangkan kotak tampilan entri lawas ini, anda bisa lakukan langkah-langkah berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.
2. Kemudian klik pada Edit HTML.
3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.
4.Kemudian centanglah Expand Template Widget.

5. Kemudian carilah kode: <b:includable id='status-message'>
6. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.
7. Kemudian scroll sedikit ke bawah, maka akan tampak beberapa baris kode pengiringnya, sehingga lengkapnya akan terlihat seperti dibawah ini :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

8. Nah, sekarang gantilah semua kode tersebut dengan kode di bawah ini. Agar lebih mudah anda bisa copy saja lalu timpalah (pastekan) tepat pada semua kode di atas.

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

9. Jika sudah, SIMPAN TEMPLATE.

Menampilkan Judul Posting Saja Pada Halaman Pencarian

Biasanya jika ada pengunjung yang mencari artikel diblog kita baik dengan label maupun dengan search box atau kotak pencari. Maka yang muncul adalah judul posting beserta isinya. Coba anda bayangkan jika konten yang mengandung keyword yang ingin dicari pengunjung mencapai 50-100 artikel. Berapa lama waktu yang diperlukan pengunjung untuk mencari topik yang diinginkan. Apalagi topik yang diinginkan berada dihalaman paling belakang bisa-bisa pengunjung akan kabur sebelum menemukan kontennya.

Dengan demikian maka anda perlu mengatasinya dengan cara menampilkan judul posting saja pada halaman pencarian. Contohnya seperti gambar disamping. Yang muncul hanya judul posting saja.

Ok lalu bagaimana cara untuk mengimplementasikannya?

1. Login ke blogger. Buka menu Edit HTML
2. Backup template anda lalu beri tanda centang pada "Expand Widget Templates"
3. Cari kode yang dibawah ini

<b:include data='post' name='post'/>

4. Ganti kode diatas dengan kode dibawah ini

<b:if cond='data:blog.homepageUrl
!= data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><data:post.title/></a>
<br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

5. Jika sudah klik Save Template. Silahkan dicoba hasilnya

Cara Membuat Iklan Melayang Versi Dua

Inilah versi kedua cara membuat iklan melayang setelah sebelumnya teman-teman telah saya perkenalkan pada iklan melayang versi pertama.

 Sign In dulu pastinya >> pilih tata letak >> tambah gadged >> Pilih HTML/Java Script terus masukkan kode dibawah ini :

<style type="text/css">

#topbar{
position:absolute;
border: 1px solid #000000;padding: 2px;
background-color: #ffffff;
width: 620px;visibility: hidden;
z-index: 100;
}

</style>

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Code via http://beben-koben.blogspot.com/
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="HTTP://URL-GAMBAR-UNTUK-MENUTUP" border="0" /></a>

LETAKKAN KONTENNYA DISINI

</div>

Terakhir save dan lihat hasilnya, gimana mudahkan



Ket :

Konten Bisa Di isi dengan script apa saja, buku tamu, baner, gambar dll

sebaiknya ditempatkan dibawah header

yang berwarna biru :
border: 1px solid #000000; Bisa sobat rubah sesuai yg sobat inginkan u/ borderdan warna bordernya, kalau g ingin ada bordernya tinggal hapus yang semula seperti ini border: 1px solid #000000; tinggal hapus yang warna hijau.


background-color: #ffffff; untuk backgroundnya juga bisa sobat rubah sesuai keinginan sobat, kalau g ingin ada begroundnya tinggal hapus yang semula seperti ini background-color: #ffffff; tinggal hapus yang warna hijau.


width: 620px; lebarnya silakan sesuaikan sendiri angkanya yang yang berwarna hijau



Kode yang awalnya :
<a onclick="closebar(); return false" href="http://www.blogger.com/"><img src="http://url-gambar-untuk-menutup/" border="0" /></a>


Rubahlah jadi seperti dibawah ini :
<a onclick="closebar(); return false" href="http://www.blogger.com/"><span style="FLOAT: right">[X]</span></a>

Semoga bermanfaat dan berhasil

Cara Membuat Iklan Melayang

Mungkin Teman-teman penasaran karena sering melihat iklan yang melayang-layang minta diklik? Cara membuatnya sebenarnya mudah saja, begini:


1. Login ke Blogger
2. Masuk ke Tata Letak --> Edit HTML
3. Copy kode di bawah inidi atas kode ]]></b:skin>

#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
}

4. Kemudia psate kode berikut diatas kode </head>

<script src="http://s2.sigmirror.com/files/52659_xu57s/js_pop_up.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>

5. Terakhir paste kode di bawah ini di atas kode </body>

<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><img src="http://mortgage-education.com/Images/Close.png" /></a></div>
ISI DARI POP UP
</div>

6. Simpan template kamu

Nah, sudah selesai. Gimana??? Bisa ngga ??

Cara Membuat Headline News

Jika anda ingin membuat tampilan blog anda lebih menarik dengan headlines judul-judul artikel blog anda pada saat yang sama membantu anda untuk menampilkan artikel-artikel anda supaya menarik perhatian pengunjung blog anda untuk membaca artikel-artikel anda, berarti anda patut untuk mencoba widget Healine News di blog anda. Caranya sangat mudah.

Caranya seperti berikut:

1. Login ke blogger
2. Klik Tata Letak
3. Tambahkan gadget anda dan pilih HTML javascript
4. Copas kode berikut ini dan paste anda gadget anda

<script type="text/javascript">
var hn_url_blog = "http://BLOGKAMU.blogspot.com";
var hn_jumlah_post = 5;
var hn_warna_latar = "#EEEEEE";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://zykry.googlecode.com/files/headline-news.js">
</script>

Keterangan:
Ganti kode yang ber warna merah dengan url blog kamu
var hn_url_blog = URL blog
var hn_jumlah_post = jumlah judul artikel posting yang ditampilkan
var hn_warna_latar = warna latar belakang headline news
var hn_warna_garis = garis border headline news
var hn_posisi = posisi headline news
var hn_backlink = bila ingin backlink ditampilkan

5. Jangan lupa di simpan

Cara Membuat Kotak Komentar Di Bawah Posting

Anda ingin kotak komentar muncul di bawah postingan? Memang dulu pengguna Blogger tidak bisa menampilkan kotak komentar ini. Tidak seperti Wordpress. Jangan berkecil hati, karena sekarang di Blogger sudah tersedia fasilitas tersebut. Mau tau cara pembuatannya. Ikuti terus ya pembahasannya.
 
Begini caranya :

1. Silahkan Login ke http://draft.blogger.com dengan ID blogger anda. Ingat! bukan login ke blogger.com tapi ke draft.blogger.com karena fasilitas ini masih dalam tahap uji coba.
2. Kemudian pilih blog yang ingin anda edit, masuk Settings >> Commnets. Pada opsi Comment Form Placement pilih Embedded below post sepeti gambar dibawah
   
   
   
   
   
   
   
   
   
   
   
   
   
   
3. Kemudian klik Save Settings

Kemudian coba lihat apakah kotak komentar Anda sudah muncul dibawah posting. Bila sudah berarti selesai, bila belum muncul maka ikuti cara-cara berikut ini :

1. Pada posisi di dashboard blogger, klik link Layout kemudian masuk ke Edit HTML
2. Jangan lupa centang/tandai/aktifkan Expand Widget Templates untuk bisa mengedit template secara keseluruhan.
3. Kemudian cari kode-kode di bawah ini :
   
   
   <p class='comment-footer'>
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
   <data:postCommentMsg/></a>
   </p>
   </b:if>
   
   
4. Kemudian hapus kode-kode di atas dan ganti dengan kode-kode dibawah ini :
   
   
   
   <p class='comment-footer'>
   <b:if cond='data:post.embedCommentForm'>
   <b:include data='post' name='comment-form'/>
   <b:else/> <b:if cond='data:post.allowComments'>
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
   <data:postCommentMsg/></a>
   </b:if> </b:if> </p> </b:if>
   
   
5. Klik Save dan lihat hasilnya.

Nah, selamat mencoba

sumber:  
http//belajartrikblog.blogspot.com

AUTO NAVBAR Pada Blogger

Navbar adalah bagian dari blog khususnya yang menggunakan Blogger yang dapat anda lihat di atas header. Navbar disini memiliki fungsi sebagai navigasi menuju ke blog-blog lain selain blog kita.

Bagaimana agar kita bisa menghilangkan navbar tetapi navbar itu masih ada ketika disorot?

Salah satu solusinya yaitu dengan cara cukup menyembunyikan saja (auto hide) ,  ketika anda mengarahkan mouse anda ke tempat navgar, maka otomatis navgar akan muncul secara otomatis dan ketika mouse dijauhkan makan navbarpun akan sembunyi secara otomatis. Jadi, dengan bagini kita tidak usah menghilangkan navgar secara permanen .  Penampilan blog andapun akan terlihat profesional.

Berikut cara pengaturannya :

• Pilih menu Layouts dan pilih Edit HTML
• Tekan ctrl + F di keyboard anda dan ketik body { untuk mencari tulisan tersebut.
• Copy Paste (CoPas) kode di bawah ini di atas tulisan body { yang telah anda temukan

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

• Contohnya seperti berikut ini :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
body {

• Setelah selesai, klik SAVE TEMPLATE

Setelah semuanya selesai, coba anda lihat blog anda dan arahkan mouse anda ke tempat navgar yang telah tersembunyi. Gimana..?? Berhasilkan..??

Selamat mencobah deh.. Dan jangan lupa tinggalkan komentarnya ya.. hehehe...

Horizontal Menu Navigasi

Yang sering berkujung ke blog om pasti sudah tidak asing dengan horizonal menu navigasi. Nah tutor kali ini kita mencoba membuat menu navigasi yang sebenarnya meminjam salah satu widget dari bawaan standar blogger. Dengan sedikit sentuhan pada CSS, widget Linklist yang semula banyak digunakan sebagai blogroll secara vertikal akan kita modifikasi menjadi menu navigasi secara horizontal. Ya sudah, dari pada om cuap2 gak jelas langsung ke cara pembuatan aja ya :)

Pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah ini lalu letakan diatas kode ]]></b:skin>

/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

/*-- (Search) --*/
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

Masih pada halaman Edit HTML kemudian cari kode  <div id='outer-wrapper'><div id='wrap2'> biasanya kode ini terletak di bawah html tag <body> kemudian copi-paste semua kode dibawah ini, dan letakan kodenya dibawah kode warna hijau diatas.

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Cari artikel disini&apos;;}' onfocus='if (this.value == &apos;Cari artikel disini&apos;) {this.value = &apos;&apos;;}' type='text' value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Silahkan disimpan dan lihat hasilnya. oh hampir lupa..rekan bisa menyesuaikan warna latar dan textnya sendiri ya :)

Untuk menambah menu, silahkan buka kembali "Elemen Halaman" kemudian perhatikan widget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan. Selamat Mencoba :)


sumber:oom.com (best guru)

Pasang Navigasi Breadcrumb di blogger

Breadcrumb, Breadcrumb itu sendiri merupakan Navigasi yang berisikan kategori atau label pada suatu postingan / artikel, untuk contohnya sobat bisa lihat tepat diatas judul Postingan ini, di situ terlihat jelas ada menu Navigasi yang berisikan seperti ini Home >> Blog >> Blogger >> SEO >> Tips dan Trik >> Pasang Navigasi Breadcrumb di blogger.




Dalam penggunaan Breadcrumb mempunyai manfaat diantaranya ialah untuk menunjukkan lokasi atau path dari sebuah halaman Artikel (Postingan) serta dapat memudahkan pengunjung melakukan navigasi perpindahan halaman dari halaman yang di kunjungi ke halaman sebelumnya

Yah dari pada bahas terlau panjang lagian mungkin yang lain sudah pada ngerti jadi kita langsung saja ke tahap Pemasangan Navigasi Breadcrumb di blogger :

1. Seperti biasa, login dulu ke blogger dengan account kepunyaat sobat,
2. Pilih Tata Letak
3. Pilih lagi Edit HTML dan jangan lupa mencentang pilihan pada kotak kecil Expand Template Widget
4. Letakka kode CSS berikut tepat diatas kode ]]></b:skin>
.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:95%; line-height:1.4em; border-bottom:4px double #cadaef}
5. Setelah itu, cari kode <div class='post hentry uncustomized-post-template'> lalu letakkan kode berikut tepat setelah kode tersebut
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>
6. Jangan lupa di simpan dan coba sobat lihat hasilnya, maknyuskan?

sumber: meambo.blogspot.com

Cara Mudah Membuat Menu Navigasi Blogger

Untuk cara mudah membuat menu navigasi baik itu yang berbentuk Vertical (atas ke bawah) atau Horizontal (kiri ke kanan), sobat bisa memanfaatkan salah satu tool yang tersedia yang secara otomatis mengcreate scrip css serta html menu untuk di pasang pada blog sobat hanya cukup dengan beberapa ketikan dan klak klik saja. Untuk langkah-langkah pembuatan menu di blogger dengan menggunakan tool ini, silahkan disimak di bawah ini yah :

Langsung tuju ke tool otomatisnya di http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/, dan akan tampak form webnya seperti

Dari gambar step 1 di atas yang perlu dilakukan ialah mengisi data-data menu apa saja yang akan ditampilkan untuk contoh blog Komputer Teknologi ini saya membuat dua menu yaitu menu Home yang megarah ke url http://meambo.blogspot.com/ dan menu Bisnis yang mengarah ke link label http://meambo.blogspot.com/search/label/Bisnis

Jika sobat sekalian ingin menampilkan menu lebih dari dua cukup dengan mengklik Add Top Level Navigation Item, sedangkan jika ingin menambahkan Sub Level Menu dari salah satu Top Level Menu yang ada, cukup dengan mencentang kotak kecil (Check Box) pada This link contains sub-level navigation (optional),

Jika sudah lengkap lanjutkan ke step 2 dengan mengklik tombol I’m done, Show me the styles dan akan tampil form seperti gambar dibawah

Seperti pada gambar diatas tentukan menu yang akan dibuat apakah model Horizontal atau Vertical dan jangan lupa tentukan pula jenis style tampilannya yang berada pada kotak yang ber scroll. Jika sudah lanjutkan lagi dengan mengklik tombol Show me the markup, dan secara otomatis akan tampil form yang berisi kode css dan html yang diperlukan untuk mebuat menu diblogger.

Ambil kode css dan html tersebut dan simpan sementara misalnya di notepad.

Sekarang tugas yang perlu dilakukan yaitu ke tahap pemasangan kedua scrip yang telah diperoleh tadi ke template blog sobat dengan cara :

1. Login ke blogger.com menggunakan account sobat,
2. Pada halaman Daskbor, klik Tata Letak setelah itu pilih lagi Edit HTML,
3. Untuk jaga-jaga, sebelum mengedit sebaiknya backup dulu template dengan cara klik Download Template Lengkap, sekarang siap untuk modifikasi template,
4. Pada halaman Edit HTML jangan lupa centang kotak kecil (check Box) Expand Widget Templates,
5. Cari kode ]]></b:skin> pada template sobat, biar gampang nemunya, tekan Ctrl-f kemudian copy script ]]></b:skin> lalu paste di kotak find,
6. Jika sudah ketemu, copy scrip css yang tadi diperoleh tepat diatas kode ]]></b:skin>,
7. Jika sudah, cari lagi kode <div id='content-wrapper'>, beberapa template mungkin berbeda jadi cari yang mirip-mirip,
8. Jika sudah ketemu, copy scrip html yang tadi diperoleh tepat diatas kode <div id='content-wrapper'>,
9. Untuk melihat hasilnya, klik tombol Pratinjau, jika sudah puas dengan hasilnya silahhkan di save dengan cara mengklik pilihan Simpan Template.

Wah capek juga nih buat tutorial membuat menu navigasi blogger panjang banget, dari penjelasan yang ada saya rasa sudah cukup lengkap dan bisa dimengerti jika di simak baik-baik, namun jika ada sebagian kawan-kawan yang belum mengerti, jangan ragu untuk ditanyakan!.


Sumber: meambo.blogspot.com

Horizontal Link Tab Menu di Blogger

Sistem navigasi yang baik dalam blog sangatlah diperlukan yang jelas2 dapat mempermudah pengunjung blog saat sedang menjelajahi isi blog kamu. Sistem navigasi ini bisa berupa Menu, baik horizontal maupun vertikal, atau berupa post yg dengan sedemikian rupa diubah menjadi halaman navigasi. Lalu, apa yg menarik dari Menu Horizontal Tab ini?


Menu Horizontal bisa menjadi alternatif buat Menu Vertikal biasanya dan bisa jadi ngebuat halaman blog jadi lebih hemat. Melihat dari pentingya keberadaan nya, Menu Horizontal Tab biasanya diletakkan di tempat yg mudah dilihat pengunjung. Di bawah Header contohnya.

1. Langkah pertama, masuk ke Layout > Edit HTML.

2. Masukkan kode CSS ke dalam template, gampangnya letakkan di atas kode ]]></b:skin>

#navigation{font-size:110%;
height:2.2em;
line-height:2.2em;
margin:0 1px;
color:#999;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ccc;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #999;
}
* html #navigation a {width:1%;}
#navigation a:hover{
background:#ccc;
color:#fff;
text-decoration:none;
}

3. Selanjutnya cari kode ini:

<b:section class="header" id="header" maxwidgets="1" showaddelement=”no”>

Kalo engga ketemu cari section dengan class="header".
Lalu ubah menjadi:

<b:section class="header" id="header" maxwidgets="10" showaddelement="yes">

Ini dilakukan supaya kamu bisa memasukkan element di bawah bagian header blog kamu.

4. Lalu masuk ke Page Elements. Di bawah bagian Header, klik Add a Gadget. Pilih HTML/JavaScript

5. Masukkan kode2 ini ke dalamnya:

<div style="text-align: center;">
<div id="navigation">
<ul>
<li class="selected">
<a href="http://blogkamu.blogspot.com/">Home</a></li>
<li><a href="http://blogger-holic.blogspot.com/search/label/LABEL" >Link Label</a></li>
<li><a href="http://blogger-holic.blogspot.com/">Blogroll Links</a></li>
</ul>
</div>
</div>

6. Klik save.


Menu horizontal tab sebaiknya diisi dengan link yg bisa menjadi 'pintu2' bagi artikel lainnya. Contohnya dengan link menuju label tertentu. Dan jangan juga mengisi nya dengan terlalu banyak link, tentunya bakal bikin jadi penuh nantinya.

Pas lagi2 jalan ke blognya O-OM, saya nemuin ada sebuah online tools yg bisa ngedesain menu, horizontal bisa.. vertikal apalagi. Namanya MyCSSMenu. Tools ini rasanya perlu dicoba, selain prosesnya yg mudah, pilihan menunya juga banyak. Thanks infonya O-OM ^.^b


Sumber:lintasberita.com

Horizontal Menu Black Blogger

Menu navigasi merupakan hal yang essensial bagi para blogger,Apalagi menu navigasi juga merupakan informasi link yang ditujukan untuk para pengunjung blog agar tahu tentang bagian - bagian blog lainnya.Nah diantaranya ada menu navigasi,yaitu horizontal navigation menu.Jika anda seorang bloger yang menggunakan template yang ber bakground black,maka tak ada salahnya untuk mencoba pasang menu navigasi black blogger kali ini.

Nah tertarik untuk pasang menu navigasi ini?jika anda tertarik untuk memasangnya di blog anda sangat mudah.Pertama silahkan login dulu ke akun blogger anda lalu pilih edit HTML karena kita akan mulai utak - atik template kita.Cari tag ]] lalu tambahkan kode di bawah ini pada bagian atasnya.

/*credits : http://konsultasiblogger.blogspot.com -------*/
#tabs11
{
float:left;
width:100%;
font:normal 13px sans-serif;
height:61px;
padding:24px 0 0 0;
background:url('http://i654.photobucket.com/albums/uu264/mastegar/css%20gambar/main-button-tile.
}
#tabs11 ul
{
margin:0;
list-style-type:none;
padding:0;
}
#tabs11 li
{
display:inline;  
margin:0;  
padding:0;  
}
#tabs11 a
{
float:left;
background:url('http://i654.photobucket.com/albums/uu264/mastegar/css%20gambar/gallerybuttons_07.png') no-repeat;
height:37px;
width:109px;
margin:0;
text-decoration:none;
padding:12px 0 0 0;
color:#fff;
text-align:center;
}
#tabs11 a:hover
{
background:url('http://i654.photobucket.com/albums/uu264/mastegar/css%20gambar/gallerybuttons_08.png') no-repeat;
color:#ffff00;
}  

Kemudian simpan template kamu.

Setelah tersimpan kembali lagi ke tata letak halaman untuk tambah widget untuk menambahkan menu navigasi horizontal tersebut.setelah itu klik tambah widget,lalu pilih saja tambah HTML tau Java Script





Jika sudah silahkan simpan menu pada navigasi berikut




<div id="tabs11">
<ul>
<li><a href="http://www.konsultasiblogger.blogspot.com/">Home</a></li>
<li><a href="http://www.konsultasiblogger.blogspot.com">Menus</a></li>
<li><a href="http://www.konsultasiblogger.blogspot.com">Relax</a></li>
<li><a href="http://www.konsultasiblogger.blogspot.com">SEO</a></li>
</ul>
</div>







Selamat menikmati menu navigasi baru anda

Mengatur Lebar Kolom Blog

Sedikit berbagi pengetahuan soal merubah lebar kolom pada blog tetapi merasa kurang sreg sama lebar kolom yang ada tidak sesuai keinginan kita, baik itu lebar kolom sidebar (yang adanya disamping) atau mainbar (buat tempat posting). lumayan nih ada tips buat mengakalinya supaya lebar kolom menjadi sesuai dengan keinginan kita sendiri.

Contoh letak kode-kode untuk mengatur lebar kolom:


#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width:900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

}
#sidebar-wrapper {
width: 220px;
float: right;
}

Dah liat khan kode-kode diatas, yang diwarnain merah artinya ukuran lebar suatu kolom. Width (lebar) klo 900px adalah ukuran lebarnya yaitu sebesar 900 pixel.

Agar lebih faham, kode-kode diatas saya uraikan :

header-wrapper : biasanya sebagai kolom judul blog / kepala pada blog.
outer wrapper : adalah lebar keseluruhan yang di sediakan untuk kolom-kolom yang ada, didalamnya ada kolom main-wrapper, dan sidebar-wrapper.
main-wrapper : adalah kolom halaman posting, apa-apa yang kita posting maka akan masuk ke halaman ini.
sidebar-wrapper :adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya
width : ukuran lebar
xxxxpx : nilai lebar dalam pixel, contoh ( 900px berarti mempunyai lebar sebesar 900px)
border : adalah bingkai atau garis tepi (solid = garis penuh, dashed = garis putus-putus, dotted = garis berupa titik-titik)
$bordercolor; : Warna untuk border , contoh ( ffffff = putih, 000000 = hitam )

Cara Membuat Scroll Box Pada Widget Sidebar

Label: Blog Tips

Seringkali saat aku mengunjungi suatu blog, blog tersebut menampilkan beberapa widget yang panjang kebawah. Sampai-sampai nye-croll nya cape sendiri dech. Padahal pasti sang pemilik blog menampilkan widget tersebut agar dilihat pengunjung yang datang ke blog nya dong. Nah sebagai newbi seperti aku ini, tentu aku ga mau juga dong buat blog ku seperti itu yang menurut pendapat pribadiku kurang efektif (ini pendapatku loch…..). Akhirnya kucari bagaimana agar suatu blog efektif dan tampilan widgetnya tidak terlalu panjang, dan jawabannya kudapat dengan memasang fungsi scroll pada widget yang tampilannya terlalu panjang.

Oh yah hampir lupa nich, adapun contoh beberapa widget yang cenderung berjejer ke bawah/memanjang misalnya adalah: arsip blog, label, feedjit, shout box dan lain-lain. Di bawah ini adalah salah satu contoh tampilan widget feedjit:

Okay sekarang sudah tahu kan maksud tulisan ku yang diatas, sekarang kita langsung aja gimana cara buat scroll box yang kumaksud.

1. Masuk ke blog sobat, dari halaman dasbor pilih Rancangan.

2. Kemudian klik Edit pada widget yang akan sobat beri scroll box.

3. Kemudian sisipkanlah kode dibawah ini kedalam widget tersebut, yang berwarna biru diawal dan warna merah diakhir.

<div style="overflow:auto; width:100%px; height:400px; padding:0px; border:1px solid #999999;">

</div>

4. Contoh detilnya seperti di bawah ini:

<div style="overflow:auto; width:100%px; height:400px; padding:0px; border:1px solid #999999;">
<center><script type="text/javascript" src="http://feedjit.com/serve/?vv=531&amp;tft=3&amp;dd=0&amp;wid=08439e9cd9b93dce&amp;pid=0&amp;proid=0&amp;bc=FFFFFF&amp;tc=000000&amp;brd1=012B6B&amp;lnk=135D9E&amp;hc=FFFFFF&amp;hfc=2853A8&amp;btn=D8E6DA&amp;ww=200"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript></center>
</div>

Catatan:

* height:400px = tinggi kotak scroll

* padding:0px = jarak isi widget dari kiri dan atas

* border:1px = ukuran garis pinggir kotak

* #999999 = kode warna

5. Jika sudah, klik simpan

6. Hasilnya akan seperti dibawah ini:

Berhasil kan sobat? Semoga bermanfaat.

Sumber: http:hadi-99.blogspot.com

Kode-kode Warna

Dalam pengaturan warna di halaman website ataupun pada aplikasi lain di komputer pada dasarnya menggunakan kode RGB yang ditampilkan dalam nilai hexadesimal. Tiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh jika pada dua digit pertama terdapat angka 00 maka tidak ada warna merah pada kombinasi warna tersebut. Berikut contoh dari kode-kode warna sebagai bahan referensi teman-teman tuk mewarnai web maupun blog. Masing-masing kode warna ditambahkan tanda # (pagar) di depan kode tersebut. misal : #ff0000

FF0000	FFFF00	00FF00	00FFFF	0000FF	FF00FF	FFFFFF	EBEBEB	E1E1E1
d7d7d7	cccccc	c2c2c2	b7b7b7	acacac	a0a0a0	959595	ed1c24	faf591
fff200	00a650	00bff3	2e3092	ec008c	898989	7c7c7c	707070	626262
464646	363636	252525	111111	000000	f69679	f9ad81	fdc689	fff799
c4df9b	a2d39c	82ca9c	7accc8	6dcff6	7da7d8	8393ca	8781bd	a186be
bc8cbf	f49ac1	f5989d	f26c4f	f68e56	fbaf5d	fff468	acd373	7cc576
3cb878	1cbbb4	00bff3	448cca	996633	5574b9	605ca8	8560a8	a863a8
f06ea9	f26d7d	ed1c24	f26522	f7941d	fff200	8dc63f	39b44a	00a650
00a99d	00adef	0072bc	0054a6	2e3092	662d91	92278f	ec008c	ed145a
9d0a0e	a0410d	a36109	aba000	598527	197a30	007236	00736a	004a80
003471	1b1464	440e62	620460	9e005d	9d0039	790000	7b2e00	7d4900
827a00	3f6618	005e20	005825	005951	005b7f	003663	002157	0d004c
32004b	4b0049	7b0046	790026	c7b299	988675	736257	534741	362f2d
c69c6d	a57c52	8c6239	754c24	603913

Sumber:http:akhsa.wordpress.com

Membuat Table Untuk Artikel Sidebar

Sering kita lihat di blog pada artikel sidebar kita terasa berantakan dan tidak tersusun rapi. Nah ada cara membuat tampilan artikel sidebar anda terlihat rapi tersusunan sesuai dengan keinginan anda yaitu dengan menggunakan table. Disini kita menggunakan kode HTML untuk membuat table sidebar tersebut. Dalam membuat kode HTML ini anda bisa menggunakan software macromedia dreamweaver.

Bagaimana cara membuat tablenya? Baik mari kita bahas tentang pembuatan table ini.

LANGKAH 1 : Buka kustomisasi pada sisi kanan atas blog anda lalu pilih tambah gadget, kemudian pilih HTML/JAVA script.

LANGKAH 2 : Copy kode HTML dibawah ini :

<div align="left"><table border="1" width="180"><tbody><tr><td width="180" height="100%" bgcolor="#CCCCCC"><a>JUDUL ARTIKEL ANDA</a></p></div><div align="center"><a href="http://www.linkyangdituju.com/"></a></div></table>

LANGKAH 3 : Paste di gadget HTML /Java script tadi.

LANGKAH 4 :

1. Ganti JUDUL ARTIKEL dengan judul artikel yang anda inginkan
2. Ganti link yang dituju dengan alamat link artikel anda
3. Simpanlah file tersebut

Contoh artikel yang telah di beri table :


Nah setelah anda melakukan 4 tahap di atas silahkan anda lihat sidebar blog anda...

Selamat mencoba dan Salam sukses
 

Sumber: http:bisnisrizal-table.blogspot.com

Cara Membuat Related Post / Posting Terkait

Sudah cukup lama saya nggak nulis soal tutorial blog. Setelah mikir-mikir, akhirnya saya pilih tutorial cara membuat related post untuk postingan kali ini. Meski ini bukan teknik baru, tampaknya masih banyak blogger yang blognya belum disupport related post. Padahal, fungsi related post atau posting terkait atau artikel yang berhubungan cukup penting. Yakni pengunjung bisa dengan mudah menemukan informasi lain yang masih ada hubungannya dengan artikel yang sedang dibaca. Keuntungan lain adalah kita bisa ‘mempromosikan’ artikel-artikel lama. Jika halaman blog diibaratkan toko, maka related post ini etalasenya.

Oke, langsung saja ke tutorialnya berikut ini:

1. Login ke blog anda

2. Masuk menu 'Layout-->Edit HTML'

3. Centang kotak 'Expand Widgets Template'

4. Cari kode ini <data:post.body/>

5. Letakkan script berikut ini di bawah kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

6. Simpan. Selesai.

Anda bisa mengganti tulisan 'Related Post' dengan kalimat lain misalnya 'posting terkait', 'artikel terkait', dll. Kalau di blog saya tulisannya 'Baca juga postingan di bawah ini'

Selamat mencoba.

Update:
Jika dengan script di atas gagal atau tidak jalan, coba ganti dengan script di bawah ini:

Membuat Metatag

Seberapa pentingkah meta tag itu dibuat ! meta tag sangat diperlukan untuk membantu dari dalam tentang isi ataupun ringkasan dari blog/site kita,yg berpengaruh dalam meningkatkan rangking di search engine dan juga mempernbaiki seo terhadap blog kita.

Memang kita sudah memiliki metatag dari Yahoo ataupun Google,tapi kita masih memerlukan meta tag tambahan ,secara trafik saya belum bisa menunjukan hasil pengunaan meta tag, karena saya baru memakai meta tag tambahan baru seminggu yang lalu. Untuk membuat meta tag kunjungi
http://www.2serveu.net/meta-tags.htm . Isi semua kategori yg ada, bila tidak jelas click info disebelahnya.
1. Untuk page title usahakan sampai 70 karakter
2. Untuk description maksimalkan sampai 200 karakter
3. Untuk keyword maksimalkan juga sampai 500 karakter
4. Untuk Abstract adalah description kedua atau cadangan
5. Untuk UR: site isikan blog / situs anda
6. Untuk Author isi nama atau email anda
7. Untuk robot isi select All untuk semua robot search engine
8. Untu robot index pilih Index and follow
9. Untuk robot revisit saya memilih 15 day
10. Info laguage pilih English ( Indonesia tidak ada )
11. Encoding pilih standart

Bila semuanya telah selesai click create meta tag, copy and paste code tersebut diatara head nad head atau dibawah page title.. Untuk blog biasanya ada permintaan penambahan kode end tag ( /> ) ataupun kode open quote 1 ( ‘ ), setelah itu save template. Dan meta tag siap diuji. Untuk mengujinya meta tag anda sudah bisa dindex atau belum akan dibahas di tulisan saya berikutnya.



Dari http:www.o-om.com

Untuk memasang Meta tag diBlogger caranya cukup mudah, pertama masuk ke Edit HTML kemudian copy paste  kode dibawah ini, biasanya kode meta tags diletakan dibawah kode <title><data:blog.pageTitle/></title>  dan jangan lupa merubah kode warna merah di bawah sesuai dengan deskripsi blog kamu.

<meta content=' Tulis deskirpsi disini'  name='description'/>
<meta content='keyword1 keyword2 keyword3 ...' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

Dua Cara Menghilangkan Navbar Blogger

Saya setuju kalau navbar yang disediakan oleh pihak blogspot tidak terlalu berguna. Bahkan saya sendiri merasa kalau ini merugikan. Navbar ini hanya berpotensi untuk memalingkan user dari blog kita. Karena itu, disini saya ingin share dua cara menghilangkan navbar dari Blog.

1. Sembunyikan Dia.
Trik ini hanya menyembunyikan tampilan navbar meskipun pada dasarnya dia masih nongol di blog dan akan tetap terload oleh browser walaupun tidak ditampilkan. Kode inti pada properti adalah value "diplay:none" yang berfungsi untuk menyembunyikan navbar dari tampilan.

/* Navbar Iframe */
#navbar-iframe {
visibility:hidden;
display:none
}

Copy code diatas dan paste pada bagian style sheet CSS dari halaman Edit HTML. Paling tidak diatas tag ]]></b:skin>

2. Menghapusnya Secara Utuh
Source asli berasal dari theyoboo. Trik ini benar benar menghilangkan navbar blogger yang mengandung banyak Error itu dari blog anda. Untuk konsekuensinya belum saya ketahui yang jelas beberapa blog sudah menerapkannya.

Caranya, paste kode dibawah ini persis diatas kode </head>

<!-- </head><body> -->

lalu save. Akan ada peringatan untuk menghapus navbar tersebut. Hantam saja tombol "Hapus Widget". Selesai...



Sumber:  

http:www.i-biyan.com