Cara Membuat Menu Horizontal Tabs Sederhana di Blogger

Aldojoe mengucapkan Selamat datang

Aldojoe mengucapkan Selamat datang

Tips Trik Blogger: Buka Rahasia Blogspot kembali lagi dengan persembahan Menu Horizontal untuk Blogger/Blogspot. Seperti menu-menu horizontal sebelumnya, menu horizontal ini masih berkutat dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Posting menu horizontal ini juga dibuat untuk memenuhi permintaan pada komentar sobat Klik Menarik di posting Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot untuk dibuatkan menu horizontal yg sama dengan menu horizontal sebuah blog lain. Tentu saja menu ini telah mengalami beberapa modifikasi agar sesuai sebagai widget tambahan. Namun sekiranya ada kemiripan lah. Hope you enjoy and like it!

kode CSS

/* Navigasi tabs Sederhana alomban.blogsot.com Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

kode HTML

<!-- Navigasi tabs Sederhana http://alomban.blogspot.com Starts -->
<div id='burasbar'>
<a href="#" class="burastabs">Home

</a>
<a href="#" class="burastabs">About</a>
<a href="#" class="burastabs">Tips Blog </a>
<a href="#" class="burastabs">SEO Tips</a>
<a href="#" class="burastabs">Contact</a>
<a href="#" class="burastabs">Sitemap</a>
<a href="#" class="burastabs">Advertise</a>
</div>
<!-- Navigasi tabs Sederhana Ends -->

Sebelumnya copy & edit terlebih dahulu kode HTML di atas. Ganti "#"

dengan URL yg dikehendaki. Ganti juga Home, Blog Tips, SEO Tips, dan seterusnya dengan anchor text yg diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian, <a href="#" class="burastabs">Anchor Text</a>.

Cara Membuat Menu Horizontal Tabs Sederhana di Blogger/Blogspot:
1. Masuk ke Dashboard > Design/Rancannga > Edit HTML.
2. Copy kode CSS di atas,
4. Cari]]></b:skin>

(cari dengan Ctrl + F) & letakkan/paste Kode CSS tepat di atasnya.
5. Save Template.
6. Masuk ke Page Elements > Klik Add a Gadget7. Setelah pop up window muncul, pilih opsi HTML/Javascript
8. Masukkan kode HTML yg telah diedit tadi pada kolom
9. Klik save.
10. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan save lagi.
Selamat Mencoba semangatttt

Read More

cara membuat colom baru di bagian header tutorial blogger MODIFIKASI BLOG

Menambah teks atau image di bagian header memang tak bisa dilakukan tanpa mengadakan renovasi ruang header. Desain template dari blogger memang hanya menyertakan ruang untuk judul blog dan ruang deskripsi blog. Membangun kolom baru di bagian ini perlu untuk melakukan penambahan KODE HTML. Cara termudah merupakan satu solusi yang banyak diharapkan karena yang jelas tidak bikin pusing bagi yang belum begitu memahami tentang per"KODE"an (seperti juga aku! Baru latihan dan ternyata sangat asyik !). Penambahan kolom akan kita lakukan di bagian sebelah kanan. Untuk lebar kolom atau tingginya dapat kita atur sesuai kebutuhan, begitupun jumlah kolom yang diinginkan. Satu persyaratan yang harus dilakukan supaya tidak terlalu banyak KODE asli bawaan blogger yang harus di rubah, kamu harus masuk dulu di halaman "Elemen Laman" untuk "memurnikan" kolom header terlebih dahulu. Apabila kolom header sudah dalam kondisi normal, maka perubahan untuk penambahan kolom langsung dapat kita lakukan.
LANGKAH-LANGKAH YANG DIPERLUKAN UNTUK MENAMBAH KOLOM DI BAGIAN HEADER :

1. Login ke Blogger.
2. KLIK Tata Letak (Layout).
3. Tampak Susunan Elemen Laman. Cari kolom header (sebelah atas).
4. KLIK Edit pada Header.
5. Hapus gambar yang ada jika kamu menggunakan background image pada header.
6. KLIK Simpan (SAVE).
7. KLIK Edit HTML.
8. Amankan template.
9. Tetap di Edit HTML.
10. Cari KODE #header h1
11. Bentuk KODE pada #header h1

#header h1{ background:url("http://www1.blogblog.com/no897/bg_header.gif") no-repeat left top;
margin:0;
padding:70px 0 30px;
line-height: 97px;
font: normal bold 200% Helvetica, Arial, Verdana, Sans-serif;
text-transform:lowercase;
_height: 0px;
}

KETERANGAN/CATATAN :


Tidak semua KODE seperti KODE di atas. KODE CSS tersebut hanya salah satu contoh yang digunakan oleh template Blogger.

TAMBAHKAN KODE BERIKUT PERSIS DI BAWAHNYA :

.boksheaderbaru{
background:yellow;
border:1px solid blue;
float:right;
margin:5px 5px 0 20px;
width:300px;
}
.boksheaderbaru .atas{
background:blue;
border:1px solid orange;
margin:5px;
font:14px Arial;
font-weight:bold;
color:red;
height:40px;
}
.boksheaderbaru .tengah{
background:red;
border:1px solid blue;
margin:5px;
font:16px Arial;
font-weight:bold;
color:yellow;
height:40px;
}
.boksheaderbaru .bawah{
background:green;
border:1px solid red;
margin:5px;
font:18px Arial;
font-weight:bold;
color:#CC99FF;
height:auto;
float:right;
}

12. Tambahkan tinggi pada KODE -->

#header{
height: ...;
width: ...;
...
...
...
}

dengan menambahkan KODE :

MIN-HEIGHT:180PX;


bila sudah ada height:...; ganti dengan KODE di atas !

13. KLIK Simpan Template (SAVE template).
14. Setelah tersimpan dengan baik lanjutkan dengan KLIK Expand Template Widget.
15. Cari KODE : --> posisinya di bawah tag <head>

<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>

16. Selipkan KODE berikut di antara <div class='titlewrapper'> dan <h1 class='title'>

17. KODE Tambahan :

<div class='boksheaderbaru'>
<div class='atas'>Kolom Header Baru Bagian Atas</div>
<div class='tengah'>Kolom Header Baru Bagian Tengah</div>
<div class='bawah'>Kolom Header Baru Bagian Bawah</div>
</div>

Sehingga KODE yang baru berbentuk seperti ini :

<div class='titlewrapper'>
<div class='boksheaderbaru'>
<div class='atas'>Kolom Header Baru Bagian Atas</div>
<div class='tengah'>Kolom Header Baru Bagian Tengah</div>
<div class='bawah'>Kolom Header Baru Bagian Bawah</div>
</div>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>

18. KLIK Simpan Template (SAVE Template)!

KETERANGAN/CATATAN :


1. Ganti teks "Kolom Header Baru ...." dengan teks baru.
2. Untuk merubah ukuran teks, rubah KODE --> font: ..px Arial; dengan ukuran yang sesuai.
3. Untuk merubah warna teks, ganti KODE --> color: ..; dengan warna baru.
4. Border bisa diganti warna atau dihilangkan total dengan tidak menyertakan KODE border:1px solid ...;
5. Untuk mengganti warna background, ganti KODE --> background: ..; dengan warna baru.
6. background bisa juga diberikan warna "transparent".
7. Untuk menambahkan background image (gambar) rubah KODE:

background:red; --> sebagai contoh, menjadi :
background:transparent url(image.gif);

Read More

cara menganti tamplate Blogger

Banyak teman-temanku yang bertanya-tanya "gimana cara ganti template blog?".. ya diantarannya.................
Kasih tau gak ya...........
Ya udah deh gak usah.., hehehe.
Namannya Puspita & Devi...,
nih buat caranya buat ganti template blog untuk kalian dan teman-teman yang lain yang belum tau cara mengganti template blog :
1.Cari situs yang menyediakan template blog.., salah satunnya *DI SINI*
2.Pilih template yang kamu inginkan lalu download.
3.Buka file yang didownload tadi lalu di extract di desktop (agar lebih mudah)

4. Setelah itu login ke blog kalian >> tata letak >> Edit HTML.
5. Lalu ambil file yang di extract di desktop tadi pakai "Choose File".

6. Lalu simpan template.
7. Liat blog kalian dan template kalian pun telah berubah.
8. Jangan lupa comment ya.... hehe.

Read More

Cara menyembunyikan Widget/ Gadget Chatbox ( Buku Tamu ) di kanan

Asslamualikum,wr,wb . Sekarang saya akan memberikan cara menyembunyikan Widget atau Chat Box (buku tamu) di kanan. Bagi blog yang tidak mempunyai banyak ruang di blognya, pasti cara ini sangat di perlukan, karena Widget-widget yang di tempel di blog hanya mengotori/Mengurangi space di blog. Langsung saja caranya sebagai berikut :


1. Login ke blogger terlebih dahulu.
2. Setelah itu Buka Rancangan - Elemen Laman.
3. Tambah Widget - Html/javascript
4. Copy paste Code berikut di sana

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCEl-3DThkguhRZG4Vq0rze0q0vPy4q8mJZYZTyq75Z0DrGaTwGhnYyWAu5wPVX748FI2tX4wH1Di9Q1E7uES47o5wUdtOlB7DJGb5lwqsHZmgJS17PbHXVs-AbBLmPh6r522c4xkYMy4/s1600/cbred-LEFT+copyasasd.png') no-repeat;
}
.gbcontent{
float:left;
border:6px solid #de7300;
background:#F5F5F5;
padding:5px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Ganti Dengan Code Script Chat Box (Buku Tamu) Kamu



Get This <a href="http://alomban.blogspot.com/2012/03/cara-menyembunyikan-widget-gadget.html">Gadget</a></div>
<div style="text-align: right;">
<a href="javascript:showHideGB()">
Close
</a></div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

5. Ganti tulisan yang berwarna Merah dengan script chat box kamu, jika belum memiliki chat box silahkan klik di sini

6. Lalu simpan.
Selamat Anda memiliki tampilan Chatbox baru.

Read More

cara membuat warna background pada posting

Memberi warna atau background mungkin akan lebih dalam anda memposting hal2 yang di spesialisasikan jadi kamu harus tau cara membuat background dalam postingan,saya melihat temen2 suka memberi bacground juga,misalnya saat menunjukkan kode html atau sorotan tertentu.jadi mari yuk kita belajar bersama cara membuat background dalam postingan.

1.Buat postingan anda
2.Pilih tab edit html bukan compose
3.Trus anda tinggal masukan code berikut ini di halaman postingan anda:

<div style="background:kode warna background;">


Di sini Postingan anda

</div>

Trus anda ganti tulisan CODE WARNA BACKGROUND dengan code warna yang ingin anda pakai...ok selamat mencoba..

Read More

Cara Memasang search engin pada blog

Cara Memasang search engin pada blog >> Search engin?.. apa to?... itu lo kota buat nyari2 artikel pada blog...iya! bener sekali,itulah yang ane maksud, kadang template yang kita pakai tidak ada fasilitas yang satu ini, jadi buat sobat yang gk punya mesin pencari pada blognya gk usah khawatir ya...simak saja tutorial yang satu ini.

Langsung saja kopi kode dibawah ini:
_________________________________________________________________
_________________________________________________________________
<form id="searchform" action="http://BlogAnda.blogspot.com/search" name="searchform" method="get"><br /><input id="s" onfocus="if (this.value == 'cari di blog ini . . .') {this.value = '';}" value="cari di blog ini . . ." name="q" onblur="if (this.value == '') {this.value = 'cari di blog ini . . .';}" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>
_________________________________________________________________
_________________________________________________________________
caranya ialah sbb:
1. masuk ke "blogger.com" dan "login"
2. masuk ke tab "layout" atau "tata letak"
3. pada tab "elemen halaman" atau "page element" klik "add gadget" atau "tambah gadget"
4. pilih "HTML/JavaScript"
5. pada textbox "content" atau "konten" paste kode yg disediakan
6. ganti "bloganda.blogspot.com" dengan alamat sesuai blog anda
7. silahkan diberi judul atau tidak, tekan "save" atau "simpan"

<<--->>JANGAN LUPA COMMENT NYA<<--->>

Read More