RSS
email
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Kamis, 06 Oktober 2011

Cara buat "Readmore" pada Blogger

Langkah Pertama:

Buka Template - Edit HTML - Berikan tanda centang pada "Expand widget template"


Langkah Kedua:

Jangan Lupa backup blogger dengan mengklik "dowlnoad template lengkap"


Langkah Ketiga:

Cari kode dibawah ini:
<div class='post-header-line-1'/> <div class='post-body'>

Tips : Untuk mempermudah pencarian kode diatas sebaiknya ikuti tips berikut ini. pertama kamu buka program text editor misalnya notepad.exe ( Pada MS Windows tekan menu Start -> Proggram -> Accessories -> Notepad) kemudian kopy/paste kode HTML tadi ke notepad. kemudian pada notepad pilih Menu Edit -> Find. pada box find masukan kode ini <div class='post-header-line-1'/> kemudian klik tombol Find next. (jika masih gak ketemu terpaksa kita melakukan pencarian secara manual)

Jika sudah menemukan kode diatas, Copy-Paste kode dibawah ini kemudian letakan kode tersebut dibawah kode diatas.



<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>



Kemudian dibawah kode diatas kita akan menemukan kode:
<p><data:post.body/></p>


Lakukan Copy-Paste kode dibawah ini dibawah code diatas

<a expr:href='data:post.url'>Readmore »»</a>
</b:if>


 

Tips: Kode Readmore diatas bisa ganti dengan kalimat sendiri (contoh "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya")

Kode selengkapnya jika dilihat akan tampak sebagai berikut:

<div class='post-header-line-1'/>
<div class='post-body'>

<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'>Readmore »»</a>
</b:if>

<div style='clear: both;'/>

Jika kita mengedit langsung pada halaman blogger Edit HTML dan semua kode diatas sudah dilakukan perubahan, jangan lupa disimpan ya :)
Ini jika kita menggunakan Text Editor Notepad : Setelah melakukan pengeditan kode pada notepad, lalu hapus semua kode yang ada pada halaman edit blogger, kemudian masukan seluruh kode pada notepad tadi dengan cara copy/paste) Sampai disini pengeditan kode selesai, jangan lupa disimpan.


Langkah Empat

Setelah kode diatas disimpan kita kembali dan masuk ke tab Pengaturan -> Format -> cari "Post Template" Kemudian pada kotak masukan kode dibawah ini

<div class="fullpost">
</div>


Jangan lupa disimpan :)


Langkah Kelima :

Disini saya akan menjelaskan cara penggunaan readmore pada halaman posting. Ketika kita melakukan posting pertama kali kita akan melihat kode:

<div class="fullpost">
</div>


ingat jangan hapus kode diatas karena kode tersebut merupakan kode yang akan kita gunakan dalam pemenggalan posting nantinya.

Cara menampilkan pesan pada jam tertentu (Time Message)


Pernah terpikirkan untuk menampilkan pesan pada jam tertentu (Time Message) pada blog kita? tentu saja ya, Ada kalanya ketika sedang tidak online kita ingin memberikan pesan kepada pengunjung mengenai keadaan kita saat ini misalkan, "maaf, saya jam 1 ada rapat jadi gak bisa online" atau "jangan lupa ya sekarang pukul 13.00 jadi acara kumpul blogger akan dimulai" atau sebagai alarm plus pesan pengingat berguna.

Menampilkan pesan pada jam tertentu (Time Message) tentu saja sangat membantu, disisi lain pengunjung juga akan mengetahui informasi apa yang ingin kita sampaikan pada jam berikutnya tanpa harus online sekedar menulis pesan. Selain menambah nilai plus berupa pesan singkat, blog kita juga tentu saja terlihat berbeda :). Ok ikuti terus tutorial ini untuk cara pemasangan kodenya:

Cara Pasang Time Message:
Cara pasang pada blog tinggal copi-paste aja kode dibawah ini dengan menambahkan elemen halaman baru, kemudian jangan lupa mengedit pesan yang ingin ditampilkan yang ditandai dengan teks berwarna merah dibawah ini.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write("<left><font size=+1>")
day = new Date()
hr = day.getHours()
if (hr == 1)
document.write("
pesan jam 1 pagi")
if (hr == 2)
document.write("
pesan jam 2 pagi")
if (hr == 3)
document.write("
pesan jam 3 pagi")
if (hr == 4)
document.write("
pesan jam 4 pagi")
if (hr == 5)
document.write("
pesan jam 5 pagi")
if (hr == 6)
document.write("
pesan jam 6 pagi")
if ((hr == 7) || (hr == 8) || (hr == 9) || (hr == 10))
document.write("
pesan jam ini berlangsung pada jam 7,8,9,10 pagi")
if (hr == 11)
document.write("
pesan jam 11 pagi")
if (hr == 12)
document.write("
pesan jam 12 siang")
if (hr == 13)
document.write("
pesan jam 1 siang")
if ((hr == 14) || (hr == 15) || (hr == 16))
document.write("
pesan jam ini berlangsung pada jam 2,3 dan 4")
if ((hr == 17) || (hr == 18) || (hr == 19) || (hr == 20) || (hr == 21) || (hr == 22))
document.write("
pesan jam ini berlangsung pada jam 5,6,7,8 sore - malam")
if (hr == 23)
document.write("
pesan jam 11 malam")
if (hr == 0)
document.write("
sudah tengah malam saya tidur dulu ya")
document.write("</font></left>")
// End -->
</SCRIPT>



Kemungkinan yang ditanyakan:

if ((hr == 7) || (hr == 8) || (hr == 9) || (hr == 10))
document.write("
pesan jam ini berlangsung pada jam 7,8,9,10 pagi")

Penjelasan code diatas, ini berarti kita membuat pesan yang sama pada jam yang sudah di tentukan misalnya pada jam 7,8,9,10 pagi. Jika ingin menampilkan pesan pada jam berbeda tinggal di lakukan sedikit perubahan pada kode seperti dibawah ini :

if ((hr == 7)
document.write("pesan jam 7 pagi")
 if  (hr == 8)
document.write("pesan jam ini 8 pagi")
if  (hr == 9)
document.write("pesan jam ini 9 pagi")
if  (hr == 10))
document.write("pesan jam 10 pagi")



Menambahkan permintaan teman kita mengenai bagaimana jika menampilkan ketika contoh jam antara 1:00 - 1:20 atau hanya tampil jam 1:20?

Berikut kode yang ditambahkan pada script sebelumnya:

now = new Date()


if (now.getMinutes() < 10) {
document.write("ini tampil jam antara jam 1:00 - 1:10")
}
else if (now.getMinutes() == 20) {
document.write("ini tampil jam 1:20")
}
else if (now.getMinutes() < 30) {
document.write("ini tampil jam antara jam 1:00 - 1:30 ")
}
else {
document.write("pesan jam 1 pagi")
}



Kode Selengkapnya:

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
document.write("<left><font size=+1>")
day = new Date()
hr = day.getHours()

now = new Date()
if (hr == 1)
if (now.getMinutes() < 10) {
document.write("ini tampil jam antara jam 1:00 - 1:10")
}
else if (now.getMinutes() == 20) {
document.write("ini tampil jam 1:20")
}
else if (now.getMinutes() < 30) {
document.write("ini tampil jam 1:00 - 1:30 ")
}
else {
document.write("pesan jam 1 pagi")
}

document.write("pesan jam 1 pagi")
if (hr == 2)
document.write("pesan jam 2 pagi")
if (hr == 3)
document.write("pesan jam 3 pagi")
if (hr == 4)
document.write("pesan jam 4 pagi")
if (hr == 5)
document.write("pesan jam 5 pagi")
if (hr == 6)
document.write("pesan jam 6 pagi")
if ((hr == 7) || (hr == 8) || (hr == 9) || (hr == 10))
document.write("pesan jam ini berlangsung pada jam 7,8,9,10 pagi")
if (hr == 11)
document.write("pesan jam 11 pagi")
if (hr == 12)
document.write("pesan jam 12 siang")
if (hr == 13)
document.write("pesan jam 13 siang")
if ((hr == 14) || (hr == 15) || (hr == 16))
document.write("pesan jam ini berlangsung pada jam 2,3 dan 4")
if ((hr == 17) || (hr == 18) || (hr == 19) || (hr == 20) || (hr == 21) || (hr == 22))
document.write("pesan jam ini berlangsung pada jam 5,6,7,8 sore - malam")
if (hr == 23)
document.write("pesan jam 11 malam")
if (hr == 0)
document.write("sudah tengah malam saya tidur dulu ya")
document.write("</font></left>")
// End -->
</SCRIPT>


Tinggal ditambah dan di modifikasi ya untuk jam yang lain. kalo masih bingung bisa tanya lagi :)

Selamat mencoba, Happy blogging :)

Kamis, 15 September 2011

cara menghilangkan judul blog di header

Title Blog atau yang sering disebut Judul Blog merupakan Judul dari Blog tersebut.Sedangkan Deskripsi Blog adalah Suatu teks dibawah Judul Blog.Kali saya ini Akan Mengulas tentang"Cara Menghapus Title Blog dan Deskripsi Blog".Pasti semua blogger di Dunia ingin Di Header Blognya terdapat Gambar yang menyangkut isi blog atau Gambar Tulisan yang merupakan nama Blog itu Sendiri.Supaya Header Blognya Dapat Diberi Gambar,alangkah baiknya kalau "Title Blog dan Deskripsi Blog"Di hilangkan/dihapus.Dengan Menghilangkan/dihapusnya Title Blog dan Deskripsi Blog Ruang Gambar akan lebih jelas dan Bagus.Tidak usah panjang lebar lagi,Berikut Tutorialnya: 

1. Login Ke Blogger.Com
2. Masuk ke Tab Tata Letak---->Edit HTML
3.Cari Kode Berikut ini



#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

nahh seperti halnya menghilangkan tanggal posting kita tambahkan Code Css visibility:hidden; Kedalam Css Diatas Sehingga kurang lebih menjadi seperti dibawah

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}


 1. Login Ke Blogger.Com
2. Masuk ke Tab Tata Letak---->Edit HTML
3.Cari Kode Berikut ini


}
#header .description {
color:#999999;
font-family:georgia;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:italic;
font-variant:normal;
font-weight:normal;
letter-spacing:0;
line-height:normal;
margin:0 5px 5px;
max-width:700px;
padding:0 20px 15px 0;
text-transform:none;
}

dan akan menjadi sperti ini :


 }
#header .description {
color:#999999;
font-family:georgia;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:italic;
font-variant:normal;
font-weight:normal;
letter-spacing:0;
line-height:normal;
margin:0 5px 5px;
max-width:700px;
padding:0 20px 15px 0;
text-transform:none;
visibility:hidden;
}

Sabtu, 10 September 2011

How to Add Favicon in Blogger Blog ?

Go to your Blogger dashboard>layout>Edit html


and look for this code(it is at the top the template)

<title><data:blog.pagetitle/></title>

and add the below code just after the above one[as shown in the below screenshot]

<link href='ICON FILE URL' rel='shortcut icon'/>
<link href='ICON FILE URL' rel='icon'/>

and replace the 'ICON FILE URL' with the url of your icon file. (like http://gogogo.com/favicons/bt.ico)