Senin, 05 Oktober 2009

Cara Membuat Baca Selengkapnya Di Blog

Biasanya dalam artikel sebuah blog yang terposting hanya menampilkan cuplikan dari halaman teratas artikel / tulisan. Tentunya tujuannya agar yang membacanya tidak terlalu panjang, apalagi kalau artikel yang di posted lebih dari satu , tentu orang yang baca akan capek scroll ,mousenya. Bagamana membuat tulisan tersebut hanya ditampilkan sebagian kecil saja, sehingga apabila ada yang mau membaca secara secara utuh dia hanya tinggal klik aja Selengkapnya atau bisa dimodifikasi dengan baca selengkapnya dan dengan kata yang lainya menurut selera pemilik blog.

Caranya seperti ini :

* Login ke blogger.com, pilih blog yang pengen kamu edit, klik link Layout kemudian masuk ke Edit HTML
* Untuk bisa ngedit template secara keseluruhan, kamu harus centang/tandai/aktifkan Expand Widget Templates
* Masukkan kode berikut sebelum kode</head> atau tepat sesudah kode } ]]></b:skin> seperti ini:

<style><b:if cond='data:blog.pageType == "item"'> span.fullpost

Selanjutnya mengatur supaya postingan terpotong, cari kode <p><data:post.body/></p> dalam template kamu dan tambahkan kode berikut tepat dibawahnya:

<b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.

Nah supaya terpotong, setiap kali kamu posting, klik pada bagian posting dimana kamu pengen tulisan Selengkapnya... muncul, dan ketik <span class="fullpost"> sisa postingan sampai selesai </span>. Untuk menmbahkan kode ini, ketika posting kamu harus dalam mode Edit HTML bukan Compose Contoh penulisan posting:

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. <span class="fullpost"> Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link
Selengkapnya... diklik

Hasil akhir postingan akan seperti ini:

Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja.
Selengkapnya...Selamat Mencoba!

Cara Memberikan Icon di Label

Untuk Menambah Icon sebelum label maksudnya yaitu memberikan gambar/icon kecil sebelum Macam-macm label yang ada di blog caranya adalah sebagai berikut:

1.Login dulu ke blogger
2. Pilih Layout (tata letak) kemudian masuk menu Edit HTML
3. Copy kode dibawah tepat di atas kode ]]></b:skin> atau di deretan Kode CSS

*Label
----------------------*/
#Label1 ul, #Label2 ul{
list-style:none;
margin:0 0 0;
padding:0 0 8px;
}
#Label1 li, #Label2 li{
background:url(Alamat gambar ) no-repeat;
padding-top:0;
padding-right:0;
padding-bottom:3px;
padding-left:20px;
margin-bottom:3px;
border-bottom:1px dotted #666666;
line-height: 1.2em;
}

4. Silahkan ganti tulisan Alamat Gambar dengan almat dimana gambar sobat di upload.
Sebagai contoh aku ambilkan dari blognya Mas Anas
Photobucket
http://i296.photobucket.com/albums/mm169/anasku/folder-16x16.png

Photobucket
http://i296.photobucket.com/albums/mm169/anasku/folder-open-16x16.png

Photobucket
http://i296.photobucket.com/albums/mm169/anasku/folder-explorer-16x16.png

Photobucket
http://i296.photobucket.com/albums/mm169/anasku/forder-biru.png

Terakhir save template!!!!


Cara Membuat Tampilan nama blog berbentuk Flash

Rekan-rekan saya akan mencoba menuliskan bagaimana membuat nama Blog kita mempunyai tampilan yang dinamis dan eksclusive ( keren banget ). Sebenarnya bukan hanya nama blog kita saja yang bisa ditulis tetapi kebanyakan dibuat sebagai pemanis tampilan Blog kita , seperti selamat datang di blog......, dsb , Tulisan yang kita buat akan nampak bergerak dengan perpaduan sinar putih yang bertemu ditengah. Caranya cukup mudah, seperti dibawah ini :

Buka layout kemudian add widget terserah diletakkan dimana, kemudian klik HTML/jaxa script , lalu Rekan-rekan cukup copy paste kode berikut , kodenya seperti ini

<a href="http://www.widgeo.net"><img border="0" width="1" src="http://www.widgeo.net/tracking.php?id=597339" height="1"/></a>
<script>var compteurcc_adultvar = "0";</script>
<script src="http://www.widgeo.net/effets/effets.php?id=2&i=203.130.236.193&msg=4venged-7fold&taille=400"></script>
<noscript><a href="http://www.widgeo.net">stats</a></noscript>

Tulisan 4venged-7fold dan angka 400 ,dapat rekan-rekan ganti dengan tulisan sendiri dan sesuaikan dengan tempat blog anda.

Cara Membuat Text Berjalan di Bar Menu

Anda mungkin pernah melihat di sebuah blog dengan teks yang berjalan di menu bar(di bagian atas), anda pasti dapat membuatnya . Kembali kepada pokok permasalahan ,sebenarnya ada banyak mode teks berjalan yang dapat di pasang pada menu bar,tapikita akan belajar membuat teks berjalan seperti yang ada di blog jgc35.blogspot.com

Anda tentu tertarik membuatnyakan karna lebih membuat blog lebih hidup,lebih fres gitu, sebenarnya caranya cukup mudah hanya dengan sedikit trik aja,anda dapat melakukannya baiklah kita langsung aja mulai membuatnya,silahkan anda copy kode di bawah ini dan letakan diatas kode<head>.


Ikuti Langkah Berikut :

1. Sign in ke Blogg anda
2. Pilih tata letak
3. Kemudian Pilih edit html
4. Cari Kode</head>
5. Letakkan tepat diatas kode tersebut

Jika anda masih kesulitan dalam mencari kode tersebut silahkan tekan Ctrl+f pada keyboard anda kemudian tulis kode tersebut kedalamnya, maka akan secara otomatis mencari sendiri.

<script language='javascript'>>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"

scrollSpeed = 130
lineDelay = 0

// Do not change the text below //

txt = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>

Anda dapat mengisi kata -kata tersebut dengan kata-kata sendiri , terimakasih semoga bermanfaat

Cara Membuat Gambar Melayang Di Pojok Blog

Apa itu gambar melayang yang dimaksud dengan judul diatas. Sebenarnya semacam gambar animasi , ataupun gambar lain yang menarik bagi anda yang selalu muncul untuk menghias page blog anda. Seperti contoh dalam blog ini, anda akan selalu melihat gambar animasi di pojok kiri bawah halaman.

Caranya sebagai berikut :

1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin>
kalo dah ketemu letakkan kode berikut ini di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

3. Text yang dicetak miring adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "buttom", jika pingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letakkan script berikut ini sebelum kode </body>


<div id="trik_pojok">
<a href="http://trik-kis.blogspot.com">
<img src="http://i288.photobucket.com/albums/ll163/kis_me1x/peanut-1.gif" border="0" /></a>
</div>

http://i288.photobucket.com/albums/ll163/kis_me1x/peanut-1.gif adalah lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Simpan hasil kerja kamu dan lihat hasilnya.