Menampilkan berita metrotv,detik,okezone di blog

Jika anda ingin menampilkan berita dari headline news situs-situs terkenal seperti CNN,BBC,Yahoo News, Google News ataupun dari dalam negeri seperti detik,okezone,metrotv dan lain-lain,
caranya tidak sesudah yang anda kira. Kemarin saya menuliskan script pendek tentang bagaimana cara menampilkan newsticker metrotv, sekarang saya berikan beberapa langkah mudah untuk menampilkan berita dari 3 situs terkenal yang sesuai judul diatas.

Secara umum, tidak perlu background programming untuk membuat berita online tersebut tampil di website / web-blog anda, yang perlu anda kuasainya hanya COPY dan PASTE JAVASCRIPT yang nantinya di BURN oleh provider yang menyediakan space / direktori khusus untuk menyimpan berita yang akan mereka BIND / EMBED dari okezone,detikinet,metrotv tersebut.

Yang harus anda ketahui adalah anda harus menyediakan URL address RSS/XML nya situs-situs yang ingin angkut tersebut. Saya kasih bocoran RSS ketiga situs berita diatas :

detikinet mempunyai alamat http://www.detikinet.com/index.php/feed/ ,
okezone mempunyai URL address http://www.okezone.com/rss ,
metrotv mempunyai link URL http://www.metrotvnews.com/rss_docs.asp ,

setelah mendapatkan URL RSS mereka, anda tinggal menuju ke

http://www.tickermyfeed.com/

Membuat Readmore dengan Page Break

Mungkin ini adalah teknik biasa, bahkan mungkin sudah pada tahu fungsi “Page break” ini. Memang seiring perkembangan jaman, pihak blogger terus memberikan fitur-fitur tambahan yang memudahkan kita dalam membuat blog. Dulu sewaktu belum ada fitur “page break” ini, seorang blogger harus susah payah mencari info tentang membuat “read more” kemudian mempraktekkan pada blognya dengan cara edit html yang rumit. Kini pihak Blogger sudah memberikan fitur khusus yang berfungsi seperti “read more” bahkan cukup mudah tanpa utak atik template dan penambahan script yang njlimet. Hanya saja, untuk menggunakan fitur ini, pengguna harus menulis pada mode “compose” bukan pada mode “edit html”. Dan memang fitur ini dibuat untuk kemudahan bagi blogger yang tidak menguasai bahasa HTML ( Hyper Text Markup Language ). Ikon fitur ini ditampilkan pada mode “compose” dengan simbol “kertas sobek”. Jika penulis hendak menerapkannya, cukup tentukan pada baris mana tulisan hendak
dipotong dan meletakkan kursor pada baris tersebut dan klik ikon “page break” tadi. Maka pada kolom postingan akan ditampilkan garis yang memotong tulisan seperti tampilan Microsoft Word yang menyatukan halaman atas dan bawahnya. Berikut contoh tampilan penggunaan fitur “page break” :

Cara Mempercantik dan menghias Blog

Blog kita akan terasa lebih cantik apabila di isi dengan berbagai hiasan seperti jam, buku tamu, yahoo emotion, tukaran link, beberapa logo, dan juga lain2 sebagainya. sebetulnya hiasan ini bisa kita dapatkan dengan cara mudah karena hiasan ini sebetulnya free, jadi apabila anda melihat blog yang ada hiasan seperti jam atau lain2 anda tinggal menklik saja hiasan itu maka kita akan dibawa ke web penyedia hiasan itu. tapi sebelum kita mengambil hiasan itu sudah pasti terlebih dahulu kita harus melakukan registrasi.
Untuk masalah hiasan saya akan memberikan beberapa contoh saja. karena saya yakin yang lainnya anda pasti akan bisa setelah mempelajari dikit demi sedikit tentang kode HTML yang ada dari hiasan itu.

Gambar Animasi Bergerak

cup..cup..cup….

1.kodenya :

<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/2animated234.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Animated Graphic Comments</a></center>

lari terus ahhh…

2.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated124.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Animated Graphic Comments</a></center>

gambar apa hayoo
3.kodenya :
<center><a href=”http://www.zwani.com/graphics/funny_pictures/”><img src=”http://images.zwani.com/graphics/funny_pictures/images/66funny-pictures52.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.twitterbackgrounds.org/” target=”_blank”>Free Twitter Backgrounds</a></center>

agggggggggrrrrrrrrr

4.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated16.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Comments & Graphics</a></center>

5.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated162.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Comments & Graphics</a></center>

Apa Loe..hihihi
6.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated163.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Animated Graphic Comments</a></center>

Asek…..asek……..hihihi
7.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated219.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Graphics</a></center>

APA-APAan ini
8.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated2.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Graphics</a></center>

aaaaaGGG rrrrr……
9.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated204.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Graphics</a></center>

ehek..ehek..ehek…
10.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated222.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Graphics</a></center>

ARE you READY….
11.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated226.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Graphics</a></center>

Tolong……..!!!!!!!
12.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated24.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Comments</a></center>

aDuh BingunG
13.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated26.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Comments</a></center>

silup,,,aaaaggrr..hihihi..
14.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated32.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Comments</a></center>

KAme-Kame Haaa…
15.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated33.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>kame…kame haaaa……..</a></center>

tott….totttt…
16.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated35.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Graphics for Animated Comments</a></center>

nyam..nyam……
17.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated36.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Graphics for Animated Comments</a></center>

La,,LAa,,,,la..
18.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated39.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Graphics for Animated Comments</a></center>

CitCuit…….
19.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated4.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Graphics for Animated Comments</a></center>

aseeeekkkk…
20.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated46.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Graphics for Animated Comments</a></center>

Pahlawan datang
21.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated47.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Graphics for Animated Comments</a></center>

Gelantungan Cape Juga
22.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated48.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Graphics for Animated Comments</a></center>

hohoohoho…
23.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated49.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Graphics for Animated Comments</a></center>

alien keren
24.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated58.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Comments</a></center>

hacimmmmmmm
25.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated68.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.zwani.com/graphics/animated/” target=”_blank”>Myspace Animated Comments</a></center>

LAnjut-Lanjut
26.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated75.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.twitterbackgrounds.org/” target=”_blank”>Twitter Backgrounds</a></center>

amin
27.kodenya :
<center><a href=”http://www.zwani.com/graphics/animated/”><img src=”http://images.zwani.com/graphics/animated/images/animated80.gif”  alt=”zwani.com myspace graphic comments” border=0></a><br><a href=”http://www.twitterbackgrounds.org/” target=”_blank”>Twitter Backgrounds</a></center>

Pengen Lebih banyak Gambar MaSuk DiSINI !…

sukses yau,,,,,,,,,,,,,

Pasang Banner di Header Blog

Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline pada YM milik saya yang isinya kira-kira seperti ini :

"Bagaimana caranya menyimpan banner pada header blog"

Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain "apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?" jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.

Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header.

Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner.

Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.

Untuk Template Klasik

Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif

dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):





Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :

1. Sign in di blogger
2. Klik menu Template
3. Klim menu Edit HTML
4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template
5. Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan
/* Header ----------------------------------------------- */ @media all { #header { width:660px; margin:0 auto 10px; border:1px solid #ccc; background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif) no-repeat top center; } }
6. Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :
#blog-title { margin:5px 5px 0; padding:20px 20px .25em; border:1px solid #eee; <-- hapus (delete) border-width:1px 1px 0; <-- hapus (delete) font-size:200%; line-height:1.2em; font-weight:normal; color:#666; text-transform:uppercase; letter-spacing:.2em; } #description { margin:0 5px 5px; padding:0 20px 20px; border:1px solid #eee; <-- hapus (delete) border-width:0 1px 1px; <-- hapus (delete) max-width:700px; font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif; text-transform:uppercase; letter-spacing:.2em; color:#999; }
7. Klik tombol Pratinjau untuk melihat perubahan
8. Jika sudah OK, klik tombol Simpan Perubahan Template
9. Selesai.

Untuk template baru

Bagi sobat pengguna template baru, bisa menggunakan dua cara.

Cara pertama :

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan
/* Header ----------------------------------------------- */ #header-wrapper { width:660px; margin:0 auto 10px; border:1px solid #ccc; background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif)no-repeat top center; } }
8. Klik tombol Pratinjau untuk melihat perubahan yang ada
9. Bila sudah OK, klik tombol SIMPAN TEMPLATE
10. Selesai.

Langkahnya diatas sama dengan yang di template klasik.


Cara kedua :

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
5. Klik kotak kecil di samping tulisan Expand Template Widget
6. Tunggu beberapa saat sampai proses selesai
7. cari kode berikut pada template sobat :
<b:section class='header' id='header' maxwidgets='1'> pada kode maxwidgets='1'. Rubah angka satu menjadi angka 2, sehingga kodenya menjadi seperti ini : <b:section class='header' id='header' maxwidgets='2'>
8. Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah :

1. Klik menu Elemen Halaman
2. KLik tulisan Edit yang ada pada elemen Header
3. Tunggu beberapa saat
4. Pilih radio button yang ada di samping tulisan dari komputer Anda
5. Klik tombol Browse...
6. Pilih banner yang telah di buat yang ada pada komputer sobat
7. Tunggu beberapa saat sampai proses selesai.
8. Gambar banner sobat akan di tampilkan
9. Klik tombol SIMPAN PERUBAHAN
10. Selesai.

Nah silahkan sobat lihat hasilnya!

jika sobat merasa banner tersebut, maka sobat bisa menggantinya lagi, ulangi saja langkah-langkah di atas.

Ok sobat, mungkin pembahasan tentang cara mengganti banner sudah selesai, untuk melihat contoh blog yang sudah saya tambahkan banner silahkan klik di sini. Pembahasan diatas adalah untuk menambahkan hanya satu banner saja, apabila sobat tertarik membuat banner yang bisa berubah-ubah, silahkan baca di sini. Untuk melihat contohnya silahkan klik di sini

Selamat mencoba sobat