Menambah link “Read More” pada postingan

update 20 Febuari 2006 : ralat koding untuk bagian style sheet. sebelumnya
Karena menurutku petunjuk ini penting, maka aku nyoba menjelaskannya dalam bahasa Indonesia. Karena baru pertama kali bikin petunjuk seperti ini, harap dimaklum kalo ada yang membingungkan. just tell me in your comment here, jadi bisa ditindaklanjuti..=)

tertulis: “……” yang seharusnya tertulis “……”

update 14 Febuari 2006 : nyoba lagi pake Internet Explorer (IE) 7 The Beta 2 Preview link read morenya bisa terlihat.pengguna IE, kalau mau, upgrade IEnya jadi IE7 =)

update 12 Febuari 2006 : untuk sementara (insyaAllah) tips ini baru bisa berjalan kalo menggunakan browser Firefox. baru ketahuan hari ini (12 Febuari 2006) setelah 3 minggu “mengudara” ^_^; mudah2an bisa ditemukan solusinya insyaAllah, ditunggu jg ya sarannya.

Petunjuk menambah link “Read More” pada artikel di blog Anda [untuk Blogger user]:


pastikan bahwa option “Enable Post Pages” untuk blog Anda sudah aktif [caranya liat bagian Settings-->Archiving-->Enable Post Pages? jika dalam kondisi "No", rubah menjadi "Yes"]
Kemudian lihat bagian Template–>Edit Current. Kita akan melakukan sedikit modifikasi pada kode template blog Anda. Untuk mengantisipasi kesalahan yang mengakibatkan kerusakan pada layout, jangan lupa untuk membackup kode template Anda! [copy paste kode template awal Anda ke Notepad dan simpan di tempat yang mudah Anda temukan].
Kita akan menambah beberapa baris kode CSS pada style sheet template Anda. Selanjutnya copy-pastekan kode CSS berikut:

a.more{display:none;}span.fullpost {display:none;}span.fullpost + a.more{display:inline;}span.fullpost + div + a.more{display:inline;}span.fullpost {display:inline;}style sheet dapat ditemukan pada bagian atas template Anda dan terletak diantara tag html . pastikan bahwa Anda meletakkannya di antara kedua tag tersebut.


langkah selanjutnya adalah menambahkan link “Read More” pada main page blog Anda. masih pada kode template blog Anda, kita akan memodifikasi area sekitar <$BlogItemBody$> sehingga menjadi seperti berikut:

<$BlogItemBody$>Read more...

lalu simpan dengan menekan tombol “Save Template Changes” lalu Republish blog Anda.


Saat Anda akan membuat post baru, tambahkan kode ini di post Anda:
contoh penggunaannya:

Ini adalah bagian awal dari post ini Dan ini adalah lanjutannya.


hasilnya setelah di-publish adalah sebagai berikut:

Ini adalah bagian awal dari post ini Read more…

Kalau link “Read More” di klik maka akan menuju halaman yang menampilkan keseluruhan teks:

Ini adalah bagian awal dari post ini. Dan ini adalah lanjutannya.

jika Anda tidak ingin repot-repot menuliskan tag setiap akan membuat post baru, Anda bisa memanfaatkan fungsi “Post Template” yang disediakan Blogger, sehingga ketika Anda membuat post baru, tag tersebut sudah tersedia otomatis. caranya lihat bagian Setting–>Formatting–>Post Template. Isi text box di samping tulisan “Post Template” dengan tag tersebut. Kemudian klik tombol Save Settings lalu Republish blog Anda. Karena tag tersebut adalah kode HTML, Anda baru akan bisa melihatnya di area “Edit HTML”.
selamat mencoba.

Read More......

Membuat tulisan berjalan

Untuk membuat tulisan berjalan digunakan kode HTML "Marquee"
Nah gini cara buatnya, pertama Copy Paste kode di bawah ni, misal di About Me

TEXT KAMU

Kode tadi, Gini hasilnya...

TEXT KAMU

Trus, ganti tulisan TEXT KAMU dengan tulisan yang kita kehendaki.

Kita dapat mengatur lebar (width) dengan mengganti angka 100%
Untuk mengatur tinggi (height) dengan mengganti 200 dengan nilai yang anda kehendaki. Kode scrollamount="2", menunjukkan kecepatan pergerakan teks, semakin besar nilainya, maka semakin cepat gerakannya.

Arah gerak dapat anda ganti dengan mengubah teks "left" dengan "right", "up", atau "down".

Tulisan berjalan yang telah kita buat, dapat dimodifikasi menjadi bergerak bolak-balik dengan menambahkan kode behavior="alternate", sehingga kodenya berubah menjadi :

TEXT KAMU BOLAK BALIK
Nah jadinya gini...
TEXT KAMU BOLAK BALIK


Nah sekarang marquee dengan background :

TULIS TEXT KAMU DISINI

Kode tadi bgini jadinya..

TULIS TEXT KAMU DISINI


Untuk mengganti warna backroun => BGCOLOR="warna yang kamu pengen"

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Ni contohnya :

TUNJUK AKU

Gini jadinya...
TUNJUK AKU


Untuk sementara ini dulu, entar kalo sempat ditambahin yang leannya...


Perhatian : Sekarang pihak FS tidak memperbolehkan lagi makai script marquee, jadi udah ga bisa..


TEXT KAMU

Read More......

Membuat Box Style Link Cantik ala dr.emi dengan CS

Membuat Box Style Link Cantik ala dr.emi dengan CSS

Jimanee nDesign box link cantik dengan menggunakan CSS ?

Pernah liat page link nyang ada di :
http://www.dremi.info/tutorial/photoshop-forum.php ???

nah bagian paging na gw pake CSS bwat bikin box link na, kali ini kita bikin nyang sama tapi dengan style CSS nyang berbeda.

Simple aja mulai dengan style ke gini:

<style>
#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}
#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}
#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>

Tros terapkan ke dalam halaman HTML lu:

<div id="pagin">
<a class="sel">1</a><a href="http://csslovers.co.cc">2</a>
<a href="http://dremi468.blogspot.com">3</a>
<a href="http://dremi.info/tutorial/photoshop-forum.php">4</a>
</div>

heehe jadi dah, lagi lagi tutorial CSS na singket !!! biarin weks :P !!

Penasaran kan mao liat hasilna ?? klik ajah link dibawah ini, bwat preview hasilna:

http://www.dremi.info/web/tips/css-box-style-design.html

Tros kalo mao download disini:

http://www.ziddu.com/download/1774822/css-box-style-design.rar.html

Thanks, dr.emi

Thanks to brotherhood and sister of ilmuwebsite.com

Bwat ephi.... opo iku boooyoooo ??????? gyaahahahahahhahahaha :P

Read More......