Membuat Menu di Bawah Header/ Judul Blog

Bagi rekan blogger yang menggunakan template yang belum difasilitasi dengan menu horisontal di bawah header pada blognya, berikut postingan bagaimana cara membuat menu tersebut. Fungsi dan kegunaan menu ini adalah agar memudahkan kita dalam menelusuri semua isi yang terkandung didalam blog tersebut.
Hal pertama yang harus dilakukan adalah login ke blogger > Layout/Tata Letak > Edit Html.
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F
 

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol' showaddelement='no'>

<b:widget id='HTML1' locked='false' title='' type='HTML'/>

</b:section>

</div>

Lalu ubah kode showaddelement='no' menjadi showaddelement='yes' , kalau sudah klik simpan ya

Setelah yang pertama sudah disimpan, sekarang klik Page elements > Tambah Gadget > HTML/Javascript , copy kode dibawah ini, simpan dan letakan tepat dibawah header

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">HOME</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">CONTACT</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">BUKU TAMU</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">FACEBOOK</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">TWITER</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">DOWNLOAD</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">LAIN-LAIN</a>

<a href="http://www.hajar-aswar.blogspot.com" class="navigation">CHATTING</a>

*Alamat url diatas silahkan sesuaikan dengan blog Anda

Hal ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.

Klik Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan tombol CTRL+F
Copy kode di bawah ini dan letakan tepat diatas kode </b:skin> kemudian simpan.

a.navigation {

background: #3333ff ;

color: #ffffff;

margin: 1px;

padding: 2px;

border-width: 0;

text-transform: uppercase;

text-decoration: none;

font-weight: bold;

}

a.navigation:hover {

background: #333333;

color: #ffffff;

text-decoration: none;

}

Perhatikan kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda.Dan yang berwarna merah adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera.
Selamat mencoba..... Baca Selengkapnya..

Cara Mengganti Tanggal Posting dengan Icon Kalender

Yang pertama harus kita lakukan yaitu mengganti setting tanggal dulu, caranya seperti biasa Login dulu ke blogger terus pilih Settings --> Formatting, ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy) nha yang masih pemula pasti bingung maksudnya kan? itu lho disebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun contohnya 1.13.2008 terus simpan
Langkah yang kedua pilih menu Layout --> Edit HTML . Trus beri tanda centang pada kotak Expand Widget Templates, Oh ya, jangan lupa di back-up dulu template kamu. Yang nggak tahu caranya memback-template silahkan lihat dulu artikel ini. udah? kalo udah mari kita mulai ke jeroannya.
1. Cari kode ini <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas) kalo dah ketemu taruh script berikut ini dibawahnya persis
<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://hajar-aswar.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>
2. kalo udah cari kode ini:
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
kalo ggak ada coba cari yang ini
h2.date-header {
margin:1.5em 0 .5em;
}
3. Kalo dah ketemu taruh script berikut dibawahnya
.dateblock {
background: url("http://kendhin.890m.com/kalender/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}
Kode http://kendhin.890m.com/kalender/bluecalend.gif
adalah gambar icon kalender. kamu bisa menggantinya mengantinya dengan gambar-gambar dibawah ini caranya ganti hurus yang dicetak tebal dengan kode gambar berikut ini, misalnya kamu pingin kelender yang berwarna merah, caranya kamu ganti text bluecalend.gif dengan redcalend.gif.
Trus kode color:#3366CC; adalah kode warna tanggal, kamu bisa menggantinya dengan warna yang lain.
4. langkah selanjutnya yaitu kamu cari kode ini <data:post.dateHeader/> , cara nyarinya biar gampang copy kode tersebut, terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, nah langsung ketemu kan. kalo udah ketemu ganti kode tersebut dengan script dibawah ini.
<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>
5. Simpan Template kamu dan lihat hasilnya. Berhasil nggak ya? :t

Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {

NB: Kalo Tanggalnya berubah menjadi tulisan "Undefine" itu pasti kamu tidak memperhatikan tutorial ini dari awal. Coba lihat lagi tutorial ini dari awal dan baca baik-baik perintahnya. :D

Selamat mencoba.....
Baca Selengkapnya..

Cara Menulis Script pada Postingan Blog

Sebenarnya ada beberapa cara untuk menambahkan script pada postingan blog, tapi untuk kesempatan kali ini saya mencoba menuliskan cara yang paling mudah untuk dilakukan, yaitu dengan melalui sebuah situs.
Jelasnya dalam penulisan kode script pada blog, jika kita langsung menuliskan script code, maka code tersebut tidak akan terbaca sebagai postingan. Jadi, sebelum menuliskan pada postingan blog, kita terlebih dahulu merubah script tersebut agar dapat terbaca sebagai tulisan/postingan. caranya yaitu silahkan buka situs http://centricle.com/tools/html-entities/, terus tuliskan kode-kode yang akan diposting ke dalam kotak yang tersedia.
Kalau sudah, klik tombol encode, maka akan muncul kode baru yang akan dituliskan dalam postingan.
Selanjutnya, copy kode tersebut dan paste ke dalam postingan.
Selamat mencoba dan semoga berhasil.....
Baca Selengkapnya..

Cara Membuat Read More/Baca Selengkapnya...

Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :
1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) 
:<p><data:post.body/></p>
4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>
"Tulisan Read More pada kode di atas dapat diganti, misalnya dengan Baca Selengkapnya"
5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:
<span class="fullpost">


</span>
8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang Compose dan Edit Html, Nha pilih Yang Edit HTML, Maka secara otomatis akan tampak kode seperti berikut :
<span class="fullpost">


</span>

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalaman utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
11. Selamat mencoba dan semoga bermanfaat
Baca Selengkapnya..

Ubah Domain Blogspot Jadi Domain cz.cc

Mungkin anda canggung dengan domain dari blogger seperti http://namaanda.blogspot.com/ yang bagi anda panjang sekali. Kini ada alternatif agar anda mempunyai domain gratis seperti http://www.hajaraswar.cz.cc/ seperti domain yang saya pakai.

Domain tersebut pun tidak ada Advertisment dan mempunyai masa berlaku sampe 2 tahun (lumayan khan?)



Klik banner diatas untuk mengarahkan anda untuk registrasi. KLIK DISINI dan anda pun disuruh untuk menuliskan domain yang anda inginkan. Dan jika anda belum memiliki akun anda diminta registrasi terlebih dahulu.

Berikut step by step cara mengganti domain http://blogger.com/ ke http://nama-domain.cz.cc/ :

Setting di http://cz.cc/

1. Isikan nama domain yang anda inginkan pada kotak yang disediakan. Check Availability. Jika available, tentukan waktu registernya, lalu klik check out

2. Login ke akun http://cz.cc/ jika belum registrasi dulu Klik di Sini

3. Klik My Domains di menu paling atas

4. Klik Manage lalu klik Zone Records

• Pada form host www (harus www kalau mau tambah blog tapi nanti ada yang diganti pada saat setting di blogger)
• Pada form Record Type pilih: CNAME
• Pada form Content ketik ghs.google.com
• Pada form TTL pilih: 1 Day, Prority: 0

5. Klik Create Zone dan Selesai anda konfigurasi di http://cz.cc/

Setting di http://blogger.com/
 
1. Login ke akun http://blogger.com/

2. Klik Setting --> Publishing --> Custom Domain

3. Klik switch to Advanced Setting

4. Masukkan domain punya anda http://www.nama-domain.cz.cc/

5. Ketik kode verifikasi dan Save Setting
Selesai deh. Dan anda sekarang punya domain sendiri.
Baca Selengkapnya..