Cara Membuat Top Menu Di Blogger

Top menu di blogger sebagian besar template gratisan alias free yang ada, sudah di lengkapi dengan top menu. Namun untuk yang belum ada dan kepingin blognya di kasih Top Menu ini ni tutorialnya... di simak ya..

Ikuti langkah - langkah di bawah ini :

1. Masuk ke account Blogger kamu.
2. Lalu pilih Tataletak/layout dan pilih tab Edit Html.
3. Jangan lupa backup Blog kamu dulu, klik Download Template Lengkap dan juga contreng Expand Template Widget.
4. Cari Kode di bawah ini :


]]></b:skin>

Copy paste kode di bawah ini di atas kode tersebut

/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}


1. Kemudian Cari kode di bawah ini :


Catatan agar Top Menu sesuai dengan blog kamu, perlu disesuaikan warna background, dan ukurannya(width dan height).

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

... dan seterusnya ...

</b:section>
</div>


copy paste kode di bawah ini tepat di bawahnya. Untuk kode yang berwarna merah dan biru sesuaikan dengan kebutuhan menu blog kamu.

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>

</div><!-- akhir bg_nav -->



1. OK sudah selesai jangan lupa klik simpan template, trus cek deh blog kamu sudah ada Top menunya kan?

Mudah bukan? Semoga berhasil..

Continue

Menambah Fungsi Read More di Blogger 2

Menyambung artikel saya kemarin, fungsi Jump Breaks dari Blogger ini tak luput dari kelemahan. Bagi mereka yang menggunakan template minim modifikasi, Jump Breaks harus dimasukkan post by post atau harus dimasukkan ketika anda menulis tiap post (karena bukan fungsi otomatis). Kalau kelupaan ya blanggentak... postnya luber-luber.

Kelemahan lain adalah fungsi ini tidak bisa diletakkan di dalam tag <div> dan </div>. Jika Jump Breaks diletakkan di antara kedua tag tersebut, template anda bisa membacanya menjadi sebuah kode. Akibatnya antara lain sidebar njeblos masuk ke bawah post, template jadi acak adul dan lain sebagainya.

Perhatikan kode di bawah ini:

<div>
Awal artikel anda
<!-- more -->
Sisa artikel anda
</div>

Kode di atas adalah contoh kasus yang terjadi ketika anda meletakkan Jump Breaks di antara <div> . Agar tidak mengubah template, anda sebaiknya menutup tag dengan  </div> dan melakukan pemotongan seperti ini:

<div>
Awal artikel anda
</div>
<!-- more -->

<div>
Sisa artikel anda

</div>

Bagaimana cara memperbaikinya? Pertama, hapuslah dulu semua tag  <div> yang muncul di post (atau tulis/kopi paste ulang artikel anda tanpa menambahkan aksesoris dulu dari teks editor). Berikutnya, lakukan pemotongan dengan menggunakan Jump Breaks dan terapkan penambahan aksesoris dengan melakukan blok (shift + klik, masa ga tau sih? hehehe...) dari awal artikel hingga sebelum Jump Breaks dan selanjutnya menambah aksesoris teks setelah pemotongan hingga akhir artikel (masih menggunakan blok).

Begitu? Semoga berhasil.

Post mengenai Read More ini akan saya lanjutkan di lain kesempatan karena hari ini saya kok ngantuk banget. Hehehehe... 

Continue

Menambah Fungsi Read More di Blogger 1

Mendengarkan permintaan banyak penggunanya, pengelola Blogger secara resmi akhirnya mengeluarkan fitur terbaru mereka yaitu Post Summaries dengan Read More (apaan tuh? Singkatnya – potongan artikel dengan penggunaan link berupa teks ‘baca lanjutan’ yang akan memperpendek posting di halaman utama). Dengan adanya fitur ini kita tidak lagi membutuhkan trik penggubah template untuk menampilkan post summaries dan penggunaan read more jadi-jadian di halaman utama.

Blogger memperkenalkan apa yang disebut Jump Breaks (Lompatan patah-patah? Yang jelas bukan goyang poco-poco, heheheh…). Jump Breaks adalah tag special yang bisa diletakkan dimanapun di halaman post dengan menggunakan text editor Blogger. Jika anda memasukkan Jump Breaks ke dalam post maka bagian atas dari post (atau bagian sebelum Jump Breaks) akan menjadi bagian potongan atau penggalan artikel.

Gimana tuh cara memasukkan Jump Breaks? Jika anda menggunakan text editor versi baru, anda bisa dengan mudah memasukkan Jump Breaks melalui text editor dengan langsung klik tombolnya. Tapi jika anda menggunakan text editor versi lama maka anda harus mengetikkan tag jump break secara manual ke dalam post. Caranya mudah saja, letakkan <!-- more --> pada post untuk memenggal artikel (Perhatikan bahwa  ada tambahan spasi setelah kata more).

Sayangnya jika anda menggunakan template mutakhir versi lama yang sudah diutak-atik sedemikian rupa sehingga, kemungkinan anda akan mengalami masalah. Mungkin dengan penyelesaian berikut masalah bisa diatasi: masuk ke halaman layout blogger anda. Pilih edit HTML dan centang expand Widget templates. Lalu cek kode berikut:

<data:post.body/>

Kalau sudah anda temukan, masukkan kode berikut di bawah kode yang tertera di atas.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Lalu coba untuk memenggal post terbaru anda dan cek halaman depan. Taraaa… post anda sudah terpotong dan muncul kalimat Read More yang berisi link menuju halaman post. Tunggu-tunggu… "Read More"? Bisa diganti nggak tuh... saya ingin menggantinya menjadi "Okelah Kalau Begitu"? Oho! Mudah sekali, masuk ke halaman Layout Blogger, pilih menu Page Elements. Edit bagian Blog Post pada kolom Post Page Link Text dan anda bisa memasukkan kata yang anda pilih di sana.

Bagaimana kalau kata Read More diganti dengan menggunakan gambar? Bisakah? Bisa juga… anda bisa mengganti dengan pilihan gambar. Kode berikut bisa dicoba:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src="ganti_dengan_url_gambar_anda" border="0" alt="keterangan gambar" /></a>
</div>
</b:if >

Tentunya anda harus mengubah kalimat "ganti_dengan_url_gambar_anda" dengan url gambar anda dan  "keterangan gambar" dengan keterangan tambahan untuk gambar.

Mudah-mudahan berhasil!

Bahasan tentang Post Summaries dan Read More ini masih belum selesai, tapi berhubung saya belum sarapan – saya cari makan dulu. Disambung di post berikutnya yaa? Hihihi…

Continue

Cara Menambah Widget di Bawah Header Blog

Selamat Hari Natal ya buat yang ngerayani.. semoga Tuhan Yang Maha Esa selalu melindungi kita semua.

Jurus permak Blogs kali ini tentang cara menambah widget di bawah header. Sebagian besar tempalte blogspot kita tidak dapat menambahkan widget di bawah header. Why alias Kenapa kok bisa gitu? ini karena tempalte telah mengunci kode htmlnya agar tidak bisa menambah Widget di bawah Header.

Untuk apa sich kok di tambah widget segala? banyak gunanya, kalau kamu suka adsense bisa nampilin iklan adsense disini, kalau yang suka affilied juga bisa buat nampilin iklannya atau keperluan yang laun juga boleh tergantung selera. Lalu kalau mau nambah widget bagaimana caranya? tenang saja menurut pengalaman di dunia per permakan semua ada caranya. langsung sajo yo....

Ikuti langkah-langkah berikut ini :

1. Masuk ke Account Blogger kamu.
2. Pilih tab Tata Letak klik Edit Html.
3. Jangan lupa backup template dengan klik Download Template Lengkap setelah itu conntreng Expand Template Widget.
4. Cari kode di bawah ini :


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
</b:section>


5. ubahlah kode berwarna merah menjadi seperti di bawah ini:


<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>
</b:section>


6. Setelah selesai klik Simpan Template
7. Lihat pada Element halaman bila disana sudah terlihat ada tulisan tambah gadget berarti kamu dah berhasil.. selamat ya.. :)

catatan : maxwidgets dapat di ubah sesuai keinginan kamu.

Ok mudah bukan, gmana komentar anda tentang permak blogs ? asik bukan kalau sukses..
Good luck deh buat kalain... semoga berhasil...

Continue

Cara Pasang Shoutbox

Holaho! Gimana kabar, permakers? Tempo hari saya sudah memperlihatkan beberapa pilihan gaya shoutbox. Sudah anda pilih salah satu? Belum? Lho kok belum? Ya sudah sekarang dikerjakan, kalau sudah selesai dikumpulkan di meja guru... heheheheheh... untuk memberi contoh pemasangan shoutbox, saya pilihkan satu ya?  Kenapa satu? Supaya ringkas dong, kalau dipilih enam belas namanya bukan contoh tapi nekat. Pilihan saya jatuh ke http://www.shoutmix.com tanpa ada alasan khusus toh sebagian besar shoutbox memiliki proses yang sama dalam pendaftarannya.

1. Yang pertama anda lakukan adalah melaju ke situs shoutbox dan melakukan pendaftaran (coba cari teks register atau join in untuk bergabung). Di shoutmix.com, klik button create shoutbox. Anda akan dibawa ke form pendaftaran, isi semua form yang dibutuhkan dengan lengkap, setelah selesai mengisi klik continue. Eh, tapi jangan lupa untuk mencentang (centang atau contreng si yang bener?) kotak di depan tulisan "I have read and agree to Terms of Service". Selesai, lanjutkan dengan continue.

2. Pada halaman berikutnya anda akan dibawa ke halaman kontrol shoutmix. Untuk menyingkat waktu, langsung saja klik link Get Codes pada kotak Quick Start. Sebelumnya maaf karena saya mencoba membuat shoutbox ini pada dummy-blog alias blog coba-coba maka beberapa bagian saya blur / kaburkan. Di halaman berikutnya anda sudah masuk ke bagian kode. Tentukan panjang dan lebar kotak, lalu copy kode yang ada di kotak Generates Codes (untuk jaga-jaga bolehlah anda paste ke notepad dulu).

3. Kembali ke Blogspot. Login dengan username dan password anda, jangan username tetangga, kasihan dia. Lalu masuk ke menu Layout blog yang hendak anda berikan shoutbox, pilih Page Elements kemudian pilih lokasi yang tepat untuk memasang shoutbox anda nanti (jangan dipasang di kompor). Misalnya anda memilih sidebar, klik add gadget, pilih  opsi HTML / Javascript dan paste kode shoutbox di lokasi gadget tambahan.

Sudah. Selesai. Finito. Done. Mudah kan? Klik view blog dan makjegagig, shoutbox sudah mejeng. Misalnya ukurannya kegedean atau terlalu lebar, utak atik lagi di kolom panjang lebar shoutmix.

Selamat mencoba.

Continue