Read More Yahoo! Style

Blog anda sudah mengaplikasi Read More dan anda ingin membuat variasinya? Read more Yahoo! style ini mengacu pada tulisan "read more"-nya ala Yahoo. - yang posisinya di samping kanan. Variasi ini kelihatannya belum banyak yang mengaplikasikan. Anda mau mencoba? Ok, ikuti langkah-langkahnya ya?!

1. Memasukan kode
Login ke blogger, pilih layout, buka halaman Edit Html kemudian centang tulisan Expand Template Widget.
Setelah itu taruh kode ini di bawah ]]></b:skin>

.more {
bottom:5px;
font-family:verdana;
font-size:80%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding-right:10px;
text-align:right;
white-space:nowrap;
}

2. Memasukan tag <p class='more'>..</p> pada elemen Html.

Cari tulisan "Read More" atau �Selengkapnya� atawa �Baca Selengkapnya�! Kamu bisa gunakan kotak pencarian browser ( Ctrl + F ).
Can you find it? Good�

<a expr:href='data:post.url'>Read More......</a>

Tambahkan tag <p class='more'>&#187; ..</p> seperti tulisan di bawah.

<a expr:href='data:post.url'> <p class='more'>&#187; Read More.... </p></a>

Silahkan berimprovisasi sendiri pada tulisan " Read More " misalkan diganti dengan �Baca Selanjutnya", �Seterusnya�, �teruskan bacanya ya?!�� dll. Up to you dech!!!
Ok beres. Simpan Perubahan.

3. Menambah Gambar.

Anda pun bisa menambahkan dengan gambar.

Tambahkan saja properti Background:url (alamat gambarmu) no-repeat right; di bawah kode more {

.more {
background:none;url(http://i120.photobucket.com/albums/o190/jaloewig/blogger/reedmore-bg.gif) no-repeat right;
bottom:5px;
font-family:verdana;
font-size:80%;

Penjelasan.
.more {
bottom:5px;
font-family:verdana;
font-size:80%; = ukuran teks bisa juga pake satuan pixel misal 10px.
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold; = ukuran tebal teks lawannya Normal
line-height:normal;
padding-right:10px;
text-align:right; = posisi teks di samping kanan lawanya left or center
white-space:nowrap;
}
Hoi bro, coba donk. Jangan Cuma baca and duduk-duduk�..

Icon baru untuk status Yahoo! Messenger

Yang Baru untuk status yahoo! Messengermu. Untuk menampilkan icon status online yahoo ! messenger, sekarang kita bisa memilih banyak pilihan icon statusnya..Tercatat sebanyak 15 pilihan baru yang lebih keren,catchy dan atraktif. Yakni style id 0 sampe id 1 4. Apa perbedaan dari style id baru ini? Perbedaannya adalah ukuran dari icon dan tampilan gambar yang berbeda beda , untuk melihat perbedaan style id, silahkan sobat perhatikan gambar berikut; dan bisa pilih salah satu.

















<a href="ymsgr:sendIM?YaMesmu"> <img src="http://opi.yahoo.com/online?u=YaMesmu&m=g&t=14&l=us"/></a>

YaMesmu = diganti dengan account yahoo messenger mu
14 = Ganti dengan nomor pilahanmu. Pilih angka dari 0-14

Sumber : www.tanpatinta.blogspot.com

Membuat Read More versi 2

Artikel ini saya dapat dari Mas Kendhin.
Lho? maksudnya apa? gini lho kalo read more yang lama, yang sudah pernah dibahas kita bahas dulu (udah baca belum?, kalo belum baca dulu gih), kan kalo kita ng-klik tulisan read more atau Baca Selengkapnya itu kita akan membuka halaman baru sehingga akan meloading lagi halaman web kita, ya tho?. Nha Read more yang ini, yang akan kita bahas ini nggak gitu cara kerjanya, cara kerjanya yaitu berangkat jam 08.00 pagi pulang jam 16.00 WIB (emangnya PNS) Gini lho cara kerjanya :
Di trik Read more yang baru ini, kita akan membuat link Read more yang jika kita meng-klik link tersebut, maka keseluruhan artikel akan terpampang dibawahnya, jadi tidak perlu meload ke halaman yang lain. Piye? uenak tho? bagi yang sudah kebelet ingin menyimak trik ini silahkan langsung ikuti trik berikut ini (langsung loncat dua baris ke bawah). Dan bagi yang kebelet mo pipis silahkan ke kamar mandi dulu, he...he..

Berikut ini langkah-langkahnya:

1. Login ke Blogger
2. Pilih Setting --> Template --> Edit HTML
3. Kamu mau memback-up template kamu dulu nggak?, kalo iya kilik tulisan Download Template lalu simpan.
4. Beri tanda centang pada kotak yang bertuliskan Expand Template Widget
5. Kopi kode berikut ini dan taruh tepat diatas kode </head>

<script src='http://www.geocities.com/kendhin_x/blog/Readmore.js'
type='text/javascript'/>

6. Sudah? sudah belum? ditanya kok diam aja gimana sih ?
7. Kalo sudah cari kode dibawah ini

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

8. Nha dibawahnya kan ada kode gini <div class='post-body entry-content'> Nha ganti kode tersebut menjadi seperti ini:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

9.Terus dibawahnya kan kan ada kode gini <p><data:post.body/></p>
10. Tembahkan kode ini dibawahnya.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

11. jadi seluruh kodenya akan menjadi seperti ini :

<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

12. Tulisan 'Selengkapnya' dan 'Ringkasan' bisa diganti dengan apa aja kata yang kamu suka.
13. Lalu simpan template.
14. Pilih menu Setting -->> Formatting
15. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.

<span id="fullpost">


</span

Ohya, kalo memposting pilih yang "Edit Html", letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas kode <span id="fullpost"> sementara sisanya letakkan di antara kode <span id="fullpost"> dan </span
Trus bagaimana bagi yang sudah pakai 'read more' yang lama dan pingin ganti dengan 'read more' yang baru ini?
gini caranya:

'Read more' yang lama kan kodenya seperti ini :

<div class='post-header-line-1'/>
<div class='post-body entry-conten'>
<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>

hapus text yang berwarna biru, lalu ikuti langkah-langkah diatas.
oh ya jangan lupa ikuti langkah berikut ini
1. Pilih menu Setting -->> Formatting
2. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.

<span id="fullpost">


</span

bedanya apa sama read more yang dulu? perhatikan text yang berwarna merah, kalo dulu kan tulisannya "class" sekarang ganti menjadi "id".

Gimana? Sudah bisa belum?
Pinter.... anak siapa siiihhh??? duh lutunya
Sumber: Kendhin (www.trik-tips.blogspot.com)

Membuat Read More/ Baca Selengkapnya

Sering saat kita memposting artikel baru, maka postingan tersebut akan ditampilkan di halaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan memenuhi halaman utama yang notabenenya akan membuat blog kamu terlihat sangat panjang. Jika ingin supaya postingan kamu yang ditampilkan di halaman utama cuma abstraksinya atau sebagian yang biasanya adalah bagian atas saja (satu ato dua paragraf)kemudian di bawahnya ada sebuah link Read More / Baca Selengkapnya untuk melihat keseluruhan posting maka kamu perlu cara ini dengan mengikuti langkah-langkah berikut :

1. Buka menu Template 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) :

<div class='post-body entry-content'>

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

Kamu bisa mencarinya dengan menekan control+F pada keyboard trus masukkan kode diatas.

4. Kalau sudah ketemu, Ganti kode tersebut menjadi seperti ini :

<div class='post-body entry-content'>

<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....." itu bisa kamu ubah semaumu, misalnya jadi �Selengkapnya� atau "Baca Selengkapnya".

5. Tekan simpan template.
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 artikel baru, pilih EDIT HTML. Maka secara ostosmastis alaah.....otomatis akan tampak kode di atas.
10. Letakkan abstraksi posting atau artikel yang ingin kamu di halamam utama (sebelum tulisan "Readmore") diatas kode ini :<span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>

Form Email Subscriber / Berlangganan Lewat Email

Form ini berfungsi untuk mempermudah para pembaca blog kita agar bisa berlangganan atau mendapatkan info terbaru posting kita melalui alamat email mereka. Jadi setiap kita memposting artikel baru maka para pelanggan/pembaca yang sudah memasukkan email mereka melalui form tersebut akan secara otomatis mendapatkan kiriman email yang berisi postingan terbaru kita. Dengan begitu para pelanggan tidak perlu susah-susah untuk membaca artikel lewat blog dan tidak perlu setiap hari mengecek apakah blog kita sudah ada artikel yang baru atau belum. Hal seperti ini mempermudah pelanggan membaca artikel baru, lha wong tinggal buka email mereka doank kok!

Begini cara membuat form "Email Subscriber" tersebut :

1. Kunjungi situs ini : http://www.feedburner.com
2. Saat pertama kali datang kamu akan langsung disodori kotak untuk mengisikan alamat feed blogmu yang akan diburn.
3. Biasanya alamat feed blog kamu seperti ini http://NAMABLOGMU.blogspot.com/feeds/posts/default , ganti tulisan NAMABLOGMU dengan nama alamat blogmu.
4. Isikan nama feed blogmu tadi dalam kotak yang disodorkan tersebut, jika blogmu itu isinya hanya video2 maka beri tanda centang pada kotak "I am a podcaster", jika tidak ya gak usah dicentang. Kemudian klik tombol "next"
   
5. Setelah itu kamu akan disodori form pendaftaran, isikan data yang perlu diisikan disana, trus klik tombol "Activate Feed"
6. Kalo berhasil nanti akan ada informasi "Congrats! your ......".
7. Dibawahnya akan ada tombol "Next" dan link "Skip directly to feed management" kali ini pilih yang link "Skip directly to feed management", sebenarnya lewat tombol "next" bisa sih.
8. Kemudian nanti akan ada beberapa menu, kali ini pilih menu "Publicize"
9. Setelah itu disebelah kiri akan muncul beberapa menu. PIlih menu "Email Subscriptions".
10. Kemudian klik tombol "Activate"
11. Nha setelah itu nanti akan ada beberapa kotak yang berisi kode2. Nha kalo km pinginnya yang berbentuk form maka pilih kode yang ada di kotak "Subsciption Form Code".
12. Copy kode yang ada dalam kotak tadi, trus klik tombol "Save" untuk mengaktifkan layanan tersebut.
13. Cara pasangnya, Login ke blogger, pilih http://www.feedburner.com> nha paste deh kode yang sudah kamu copy di situ.
    

Menampilkan Status Yahoo Messenger Kita

Dalam trik ini kita akan mencoba cara untuk menampilkan status Offline/Online Yahoo Messenger. Hal ini berfungsi untuk mengetahui klo kamu online atau offline. Tapi bagi yang belum punya Account Yahoo ya buat dulu lah, tapi aku yakin klo kalian pasti dah pada punya. Dengan tanda seperti itu kan nanti pengunjung blogmu akan bisa langsung berinteraksi langsung denganmu, dengan begitu kan nanti para penggemar setia dan pengunjung blogmu jadi tambah sayang kamu. Tak kenal maka tak sayang, he..he..
Contohnya seperti ini, jika status kamu offline maka gambarnya akan seperti ini :



Jika kamu sedang online, maka gambar akan berganti seperti ini




Cara buatnya sangat gampang kamu tinggal copy script berikut ini trus kamu pasang di sidebar kamu, udah tahu kan cara pasanganya, itu lho seperti kalo km masang "page element", Masuk ke "Page Element" trus "Add page elements --> HTML/Javascript".

<a href="ymsgr:sendIM?YaMesmu"> <img src="http://opi.yahoo.com/online?u=YaMesmu&amp;m=g&amp;t=2&amp;l=us"/>
</a>


Ganti text yang warna merah (Yamesmu) dengan id YM kamu. Misal, YaMesku street_spirit_11, ya isi dengan itu. Terus perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan akan berbeda-beda.

Gimana bro, sip kan? Siiiip........
Oke deh, klo gitu kita bersulang dulu

Kotak Blogroll Model Marquee

Kalo kamu hanya punya tempat yang kecil alias sempit atawa cuilik buat menamung banyak link temen kamu maka kotak ini bisa menjadi solusinya. Karena kotak yang bernama �marquee� ini mampu menampung banyak link dalam tempat yang sempit. Kotak blog roll ini tidak memiliki rollbar. Itu lho�..yg biasanya disebelah kanan trus bisa ditarik ulur sampe mulur ke atas dan ke bawah. Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
Pasang code berikut ini di kedalam element kamu (Page Element --> Add Page Element --> HTML /Javascript)

<MARQUEE align="center" direction="up" height="200" scrollamount= "2"

onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>

Gimana sampe sini donk to? Klo donk, tarik maaaaaaaaaaaaang��
Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right sesuai dengan keinginan mu.
- Jika kamu memilih untuk bergerak horizontal (left ato right) maka hilangkan kode.
- Angka "200" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

Dah jadi, sekarang liat blogmu�.. Gimana? Ok kan? Asyek��..

Kotak Blogroll Model Textarea

Langsung aja ya? Nha begini cara membuatnya :
Pasang code berikut ini di kedalam element kamu (Page Element --> Add Page Element --> HTML /Javascript)

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link seterusnya...... <br />

</div>


keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar, maka hilangkan kode <br />