4 Cara Mudah Mengedit Navbar di Blogspot

Share

Nah kali ini saya akan menjelaskan bagaimana cara memunculkan Navbar, Menyembunyikan Navbar, membuat navbar auto hide, dan merubah ukuran dari navbar.
kita bahas satu persatu.

A. Cara Memunculkan Navbar

1. Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4. setelah itu cari kode seperti (atau kode mirip):

#navbar, #navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

5. Hapuslah kode di atas, kemudian simpan template, dan lihat hasilnya.


B. Cara Menyembunyikan Navbar

1. Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4. Masukkan kode berikut sebelum atau diatas kode ]]></b:skin>

/* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }

5. Jika sudah tinggal di Simpan Template dan lihat hasilnya.


C. Cara membuat navbar auto-hide

1. Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4. Masukan kode dibawah ini, dan simpan tepat diatas kode ]]></b:skin>

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

5. Simpan template, dan lihat hasilnya.


D. Cara Merubah Lebar Navbar

1. Pertama Login ke account blog sobat.

2. Pilih Tata Letak kemudian Edit HTML.

3. Centang Expland Template Widget.

4. Masukan kode dibawah ini, dan simpan tepat diatas kode ]]></b:skin>

#navbar-iframe {
width:980px;margin:0 auto;
background:#6f0566;
}

Ukuran WIDTH saya sesuaikan dengan lebar dari template, demikian juga dengan warna Background.

5. Simpan template dan lihat perubanhannya.

Cara Mempercepat Loading Blog 2

Share Pada tutorial kali ini  akan memposting artikel tentang Cara Mempercepat Loading Blog, blog yang terlalu banyak widget biasanya akan lambat loadingnya. dan tentunya hal ini akan sangat menjengkelkan bagi para tamu blog yang hanya menggunakan modem-modem yang tergantung pada sinyal. karena tidak akan mampu untuk membuka isi blog secara keseluruhan, untuk mengatasi hal itu ada cara yang bisa kita siasati. yaitu dengan cara menkompress kode CSS yang ada di halaman edit HTML.
Ikuti beberapa langkah di berikut ini:

1. Masuklah  ke halaman dasbor blog sobat blogger mania lalu klik "Rancangan".
2. Kemudian klik "Edit HTML".
3. Jangan lupa "download template lengkap" dulu untuk berjaga-jaga kalau tempalte tidak bisa di parse.
4. Selanjutnya copylah (atau langsung cut) semua kode CSS yang terletak antara kode  
<b:skin><![CDATA[/*
dan kode
]]></b:skin>   

Kemudian bukalah situs cssdrive. setelah situs terbuka, kliklah tombol Tools pada Navbarnya, kemudian pilih CSS Compressor:

  Langkah selanjutnya pilihlah jenis Kompresi yang anda inginkan:

Makin ke bagian bawah yang anda centang pada menu kedua kelompok tersebut maka makin tinggilah tingkat kompresinya. Itu artinaya susunan kode CSSnya juga akan semakin rapat. Karena itu centang lah sesuai dengan kesiapan anda menerima kerapatan susunan kode CSSnya.

Apabila sudah, pastekanlah kode CSS template anda tadi pada kotak yang sudah disediakan. Kemudian kliklah tombol compress it. Dan tunggulah hingga prosesnya selesai.

  Dan inilah hasil kompresinya. Di bagian bawah kotak kode tampak perbandingan berat file sebelum dan sesudah dikompres. Termasuk jumlah persentase pengurangnnya. Sekarang anda tinggal klik tombol Hightlight Code untuk menyorot semua kode CSSnya. Setelah itu copylah kode tersebut.

Selanjutnya masuklah kembali ke halaman Edit HTML blog sobat blogger mania dan pastekan lah semua kode ini  diantara kode  
<b:skin><![CDATA[/*
dan kode
]]></b:skin>   

Setelah itu yang paling terakhir dan paling utama simpanlah template.

Selamat mencoba dan mempraktekanya. semoga blog sobat blogger mania semakin enteng dan para tamu yang hanya menggunakan modem modem flash/ sinyal bisa lebih puas untuk membuka blog sobat blogger mania

Cara Memasang Widget Follow Tersembunyi

Share Bagi Anda yang Blognya tidak terlalu banyak ruangan pada sidebarnya disini saya akan memberikan jalan alternatif mudah-mudahan bermanfaat untuk anda dan untuk kita semua yaitu WIDGET FOLLOWER TERSEMBUNYI/MELAYANG yang tentunya tidak memerlukan tempat banyak.:...

Baiklaah...kali ini akan saya share bagaimana cara membuat widget follower melayang dengan mode show/hide. Postingan ini merupakan permintaan dari beberepa sobat blogger (hehehe..sebenarnya saya sudah berniat memposting sebelumnya). 

Trik ini merupakan pengembangan dari Script untuk membuat BUKU TAMU TERSEMBUNYI, hehe..,,yasudahlah yang penting Follownya bisa show/hide. Mau tau caranya?? mari ikuti langka langkah berikut :

1. Pastikan login Blogger terlebih dahulu
2. Masuk ke Perancangan Elemen Laman
3. Tambahkan Gadget Html/Java Script
4. Copas kode berikut :

<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #000;
background:#fff;
-moz-border-radius-topleft:20px; -moz-border-radius-bottomright:20px;
box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493;
padding:10px;
}
.flcontent:hover{
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIfDYQPMqkoVWeGwVEVShet-FXHMJ5JLnNP90zjfGdEWiB3sVU13nJRxh4SH7EyCqUJAgB5U5KLzjn2trcwWMkc45Ei0z5xIXdPlq4Kf__JPU0PyV57eadO04VlhGcl5UujZ079gjdmoT/)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">

Kode Widget Follow Disini

<div style="text-align: right;">
<a href="javascript:showHideFL()">
<img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Click here to Close" /></a></div>
<font size="2"><a href="http://www.uttafreak-987.co.cc/2011/04/cara-memasang-widget-follow-tersembunyi.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">Widget By Utta' Vifer</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Eits..jangan disave dulu, mari lanjut ke langkah selanjutnya

6. untuk mengambil kode widget follownya silahkan masuk ke link ini [http://www.google.com/friendconnect]
7. Lihat Gambar dibawah

-[1] Pilih blog sobat yang akan dipasang widget follownya
-[2] Klik "Tambahkan gadget anggota"
-[3] Silahkan diatur ukuran, warna  dll nya..
-[4] Klik "Buat kode"
-[5] Silahkan Copy kodenya, dan ikuti langkah selanjutnya
8. Paste kode Widget Follow tadi pada kode nomor 4 (*Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi)
9. Save..
hohoho...ternyata tidak cukup sampai disini, masih ada 1km perjalanan lagi
10. Untuk memasang tombol Navigasinya, silahkan masuk ke :
Perancangan>>Edit HTML.
11. Cari kode <body> dan paste code brikut tepat diatas kode <body>

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; top:60px;left:1px;' title='Follow This Blog'><img src='http://i52.tinypic.com/2vn1hxh.png'/></a>

12. Simpan template
lihat hasilnya... "Semoga Berhasil"

Cara Membuat Daftar isi Melayang

Share Pada postingan kali ini akan memposting artikel tentang cara membuat daftar isi melayang. yang biasanya sesuatu yang melayang ini dipakai oleh para blogger mania untuk memasang iklan agar lebih optimal. disamping untuk mempercantik blog tentunya, juga untuk menghemat widget sidebar. untuk pembuatanyapun sangat mudah dan tidak repot. yang tentunya hal ini tidak saya desain sendiri tetapi script ini saya dapatkan dari sobat blogger saya. baiklah untuk lebih jelasnya ikuti langkah langkah berikut itupun bagi sobat blogger mania yang ingin mencobanya. dan untuk contohnya bisa sobat lihat pada blogger .

Step Step/langkah langkah:

1. Masuk ke blogger

2. Tata Letak

3. Tambah widget Html atau Javascript

4. Copy paste script dibawah ini

<style type="text/css">
#di{ position:fixed; top:10px; z-index:+1000; }
* html #di{position:relative;}
.ditab{ height:200px; width:30px; float:left; cursor:pointer; background:url('http://imgur.com/Ly9Fh.jpg') no-repeat; }
.dicontent{ height:400px; float:left; border:2px solid #CCCCCC; background:#F5F5F5; padding:10px; }
</style>
<script type="text/javascript">
function showHideID(){
var di = document.getElementById("di");
var w = di.offsetWidth;
di.opened ? moveID(0, 30-w) : moveID(10-w, 0);
di.opened = !di.opened;
}
function moveID(x0, xf){
var di = document.getElementById("di");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
di.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveID("+x+", "+xf+")", 10);}
}
</script>
<div id="di">
<div class="ditab" onclick="showHideID()"> </div>
<div class="dicontent">
<div style="padding: 1px; overflow:auto; height: 400px;width: 300px;">
<div id="cl_option"> Loading... </div>
<div id="cl_content_list"> </div>
<script type="text/javascript">var jumlah_kata_dalam_ringkasan = 200;</script>
<script src="http://copycat91.googlecode.com/svn/trunk/contentlist.js"> </script>
<script src="http://fajar7siblings.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script>
Modif By <a href='http://fajar7siblings.blogspot.com.blogspot.com/2010/04/membuat-daftar-isi-melayang.html'>Spirit 89 Blog</a>
</div> </div></div>
<script type="text/javascript">
var di = document.getElementById("di");
di.style.right = (30-di.offsetWidth).toString() + "px";
</script>

5. Ganti tulisan yang berwarna pink dengan alamat blog sobat blogger mania

6. yang terakhir dan paling utama save/simpan dan lihat hasilnya.

Selamat mencoba semoga bermanfaat. Sukses selalu buat anda...

Membuat Search Box atau Kotak Pencari di Blog

Share

Saya yakin para netter pasti sudah tidak asing lagi dengan yang namanya search box. Karena kita rata-rata mencari alamat website atau informasi dengan tool ini.

Secara singkat, search box adalah sebuah tool yang digunakan untuk mencari data-data atau alamat website dengan memasukkan kata kunci yang ingin kita cari.

Namun search box atau kotak pencari yang biasa kita gunakan hanya memungkinkan kita untuk mencari data di mesin pencari seperti Google, Yahoo, dan MSN. Lalu bagaimana kalau kita ingin mencari data hanya pada blog kita saja?

Mungkin sekarang sudah banyak template yang sudah disediakan kotak pencari atau search box. Tapi bagi template yang tidak dilengkapi dengan fasilitas ini. Anda juga bisa memasangnya sendiri dengan cara sebagai berikut:

1. Login ke Blogger. Klik menu Design -> Page Elements. Lalu klik pada Add a Gadget.

2. Klik Add a Gadget -> HTML/Java script

3. Masukkan kode dibawah ini kedalam kotak dan klik Save

<p align="left">
<form id="searchthis" action="ALAMAT URL BLOG/search" style="display:inline;" method="get">
<strong>NAMA KOTAK<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Ganti ALAMAT URL BLOG dengan alamat URL blog Anda. Misalnya, http://chumhienk-mhienk.blogspot.com/ dan ganti NAMA KOTAK dengan nama yang ingin Anda tampilkan pada kotak. Misalnya, Search Articles, Cari artikel disini, Cari disini, dan lain-lain.

4. Jika sudah selesai, klik Save lalu klik View Blog untuk melihat tampilannya di blog.

Jika Anda merasa kotaknya terlalu panjang atau pendek. Anda bisa mengubah ukurannya dengan mengganti nilai pada size. Anda juga bisa mengganti nama tombol Search dengan nama lain misalnya, Cari atau lanjut.

Sebagai contoh, saya mengganti "size=30" dan "value=cari" maka hasilnya akan seperti yang dibawah ini.


Selamat mencoba..

Cara Mengubah Tampilan Kursor Blog

Share Secara default, tampilan cursor pada blog adalah berbentuk panah namun bagi anda yang merasa bosan dengan tampilan tersebut atau ingin memberi decak kagum bagi pengunjung. Anda bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan.

Untuk mengubah tampilan kursor menjadi icon gambar (seperti tampilan di blog ini), caranya sangat mudah. Berikut langkah-langkahnya:

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode </head>
3. Letakkan kode css berikut diatasnya

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/tail2.gif"), auto;}
</style>

Keterangan:
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin anda gunakan.

4. Setelah itu, simpan template anda. Selesai

Jika anda tidak memiliki icon kursor, coba kunjungi Totally Free Cursors. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa anda pilih sesuai selera.

Selamat mengkreasi blog anda :)

CARA MEMASANG MUSIK DI BLOG

Share Mungkin beberapa tutorial cara pasang music di blog yang beredar pada saat ini sering sekali memberikan cara bahwa untuk memasukan lagu ke dalam blog kita mesti masuk ke sebuah situs dengan meng-copy embed code nya ke dalam blog, sebenarnya cara ini sudah sangat kuno sekali .

Ada cara baru bagaimana kita memasang musik/lagu ke blog, blog yang saya maksud disini adalah blog yang di buat melalui blogger.com, namun apabila ada yang pake wordpress/joomla sebenarnya bisa juga, tapi kalo wordpress dan joomla kan biasa nya udah ada plugin/component tersendiri .

Nah, berikut cara pasang musik/lagu di blog:

1. Login ke blogger.com

2. Untuk blogger0blogger pastilah sudah tau, tinggal kita pasang widget “TEXT/HTML” aja kan.

3. Lalu copy code yang berwarna biru di bawah ini.

<embed autostart=”false” height=”40″ loop=”true” playcount=”2″ src=”URL of music file” width=”300″/></embed>

Ket:

URL OF MUSIC (tulisan berwarna merah) : URL dimana ada music streaming yang sudah kita temukan.

Autostart : tentukan nilai nya, kalo “false” berarti lagu gak langsung di mainkan, tetapi kalo “true” berarti ketika pngunjung datang lagu akan secara otomatis dimainkan.

loop: pengulangan atau tidak bila lagu selesai.

Jika kita mau pasang musik secara background bisa langsung gunakan code di bawah ini, gak beda jauh koq sama yang di atas .