Tampilkan postingan dengan label membuat marquee. Tampilkan semua postingan
Tampilkan postingan dengan label membuat marquee. Tampilkan semua postingan

Rabu, 16 Januari 2008

Pasang Feed Dalam Kode Marquee


Salah satu sahabat blog kang rohman yaitu Setangguh kaktus ! (nama yang diperkenalkan beliau melalui kotak komentar) menanyakan bagaimana cara membuat Feed dalam kode marquee. Bagi blogger yang mencintai tampilan yang lebih di namis, memang dengan pemakaian kode marquee bisa menambah semarak karena suatu objek bisa bergerak dengan bantuan sedikit kode HTML.




Kembali ke pertanyaan di atas yaitu apakah pemasangan feed bisa di pasang dalam kode marquee? jawabannya tentu saja bisa, namun pengertian pasang feed disini adalah seperti yang pernah saya ulas di sini. Trus bagaimana cara memasangnya? silahkan di baca sampai tuntas.



Sebagai contoh, saya mengasumsikan bahwa anda belum memasang feed apapun di blog anda, dan silahkan ikuti langkah-langkah berikut ini :



Langkah ke 1 :


  1. Sign in di blogger dengan ID anda.

  2. Klik menu layout.

  3. Klik menu Elemen Halaman.

  4. Klik tulisan Tambahkan sebuah Elemen Halaman.

  5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan Feed.

  6. Tulis alamat ini pada kotak di samping tulisan URL feed --> http://kolom-tutorial.blogspot.com/atom.xml

  7. Klik tombol SIMPAN PERUBAHAN.

  8. Pindahkan elemen yang baru saja di buat pada tempat yang anda kehendaki.

  9. Klik tombol SIMPAN .

  10. Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat.




langkah ke 2 :


  1. Klik tab Edit HTML.

  2. Klik tulisan Download Template Lengkap, silahkan di save dulu untuk backup (penting untuk di lakukan).

  3. Beri tanda centang pada kotak di samping tulisan Expand Template Widget

  4. Tunggu beberapa saat ketika proses sedang berlangsung

  5. Silahkan anda cari kode berikut pada kode template milik anda :

  6. <b:widget id='Feed1' locked='false' title='Blog Kang Rohman' type='Feed'>
    <b:includable id='main'>
    <h2><data:title/></h2>
    <div class='widget-content'>
    <ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
    <b:loop values='data:feedData.items' var='i'>
    <li>
    <span class='item-title'>
    <a expr:href='data:i.alternate.href'>
    <data:i.title/>
    </a>
    </span>
    <b:if cond='data:showItemDate'>
    <b:if cond='data:i.str_published != ""'>
    <span class='item-date'>
     - <data:i.str_published/>
    </span>
    </b:if>
    </b:if>
    <b:if cond='data:showItemAuthor'>
    <b:if cond='data:i.author != ""'>
    <span class='item-author'>
     - <data:i.author/>
    </span>
    </b:if>
    </b:if>
    </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>

  7. Tambahkan kode marquee seperti pada contoh kode berikut :



    <b:widget id='Feed1' locked='false' title='Blog Kang Rohman' type='Feed'>
    <b:includable id='main'>

    <h2><data:title/></h2>
    <marquee align='center' direction='up' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
    <div class='widget-content'>
    <ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
    <b:loop values='data:feedData.items' var='i'>
    <li>
    <span class='item-title'>
    <a expr:href='data:i.alternate.href'>
    <data:i.title/>
    </a>
    </span>
    <b:if cond='data:showItemDate'>
    <b:if cond='data:i.str_published != ""'>
    <span class='item-date'>
     - <data:i.str_published/>
    </span>
    </b:if>
    </b:if>
    <b:if cond='data:showItemAuthor'>
    <b:if cond='data:i.author != ""'>
    <span class='item-author'>
     - <data:i.author/>
    </span>
    </b:if>
    </b:if>
    </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
    </div>
    </marquee>
    </b:includable>
    </b:widget>


  8. Klik tombol Simpan Template.

  9. Selesai. Silahkan lihat hasilnya !




Perlu di ketahui bahwa, pemasangan kode marquee kurang begitu bagus kalau di lihat pada browser mozilla/firefox, kode ini berfungsi secara baik apabila di lihat pada browser internet explorer.



Selamat mencoba !

Senin, 27 Agustus 2007

Marquee with Javascript


Walowwwww...... semuanya. Nongol lagi nih, setelah beberapa hari absen dari nge-blog. Yups... karena kemarin kantorku abis ngadain Tour ke kampung halamanku Bandung. Acyiiiik... banget, makan-makan di kampung daun trus lihat kawah tangkuban perahu, and then berendem air panas di sari ater, pokonya ga inget deh ama yang namanya blog apalagi sama yang ngajuin pertanyaan lewat Shoutbox kaciaaaaaan deh lho ga ada yang nanggepin

( saya lagi jahat nih )



OK sobat, setelah enak tertawa, kita kembali ke...... blog tutorial.... tentunya bukan laptop emangnya saya tukul arwana apa? Yoi... pada kesempatan
kali ini saya mau membicarakan tentang pembuatan fungsi teks berjalan yang sering menggunakan perintah marquee, akan tetapi tentu saja bukan memakai
fungsi marquee biasa seperti yang saya terangkan di sini, karena sama-sama kita ketahui bahwa fungsi marquee tidak bekerja dengan baik pada browser Mozilla atau firefox. Artikel ini saya tulis di sebabkan ada beberapa sobat yang komplain akibat perintah marquee tidak berjalan dengan baik pada Mozilla




Untuk membuat sebuah fungsi marquee agar terlihat bekerja dengan baik pada banyak browser, kali ini saya menggunakan javascript sebagai adaptor nya. Prinsip dasar dari yang akan saya terangkan adalah seperti ini :



  • Kode CSS untuk patokan kode marquee yang ingin di tampilkan




  • Javascript sebagai adaptor agar fungsi marquee dapat bekerja dengan baik pada berbagai browser




  • isi yang ingin di tampilkan





  • Nah kira-kira seperti itu deh kalau menurut saya sih. Bentuk variasi dari marquee ini tentunya bisa berbagai macam bentuk serta ragam yang dapat di ciptakan, akan tetapi kali ini akan saya terangkan satu contoh saja sebagai acuan dasar.



  • Untuk Template klasik





    1. Sign in di blogger




    2. Klik menu Template




    3. Klik menu Edit HTML




    4. Copy seluruh kode HTML yang ada, kemudian paste notepad lalu save sebagai backup




    5. Copy paste kode berikut di atas kode </style>













    6. Copy kode berikut, lalu paste di atas kode </head>













    7. Copy kode berikut lalu paste pada tempat yang sobat inginkan (biasanya di simpan di sidebar)













    8. Klik tombol Simpan Perubahan template




    9. Selesai.






  • Untuk Template baru





    1. Sign in di blogger




    2. Klik menu Layout




    3. KLik menu Edit HTML




    4. Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting




    5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
      ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
      ]]></b:skin>












    6. Copy kode berikut lalu paste di atas kode </head>













    7. Klik tombol SIMPAN TEMPLATE




    8. Klik menu Elemen Halaman




    9. Klik tulisan Tambah sebuah Elemen Halaman




    10. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript




    11. Copy paste kode berikut pada elemen yang muncul













    12. Klik tombol SIMPAN PERUBAHAN




    13. Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)




    14. Klik tombol SIMPAN




    15. Selesai.






    Pada kode marquee yang di terangkan di atas adalah memuat contoh kata-kata yang saya buat, silahkan sobat ganti sendiri sesuai dengan keinginan sobat. Karena fungsi ini adalah mirip dengan kode marquee biasa, maka untuk menciptakan variasi lainnya maka silahkan sobat bandingkan dengan artikel saya lainnya yang memuat pembuatan kode marquee.



    Untuk melihat contoh hasil dari yang saya terangkan di atas, silahkan sobat klik di sini !



    Selamat mencoba !



    Minggu, 15 Juli 2007

    Image dalam Kode Marquee


    Sobat guest (karena beliau tidak memperkenalkan namanya) mengajukan pertanyaan sampai dua kali pada shoutbox dalam dua hari berturut-turut. Sebuah keinginan yang di dorong rasa ingin tahu tentang apakah bisa sebuah gambar atau image di masukan ke dalam kode marquee ( kode untuk membuat text bisa bergerak/berjalan ). Keingintahuan yang harusdi jawab, dan sebenarnya sudah saya jawab melalui shoutbox/buku tamu pula.
    Akan tetapi sebuah jawaban singkat saja mungkin tidak akan dapat mewakilinya, dan
    agar jawabannya dapat di cerna dengan mudah sengaja saya tuangkan ke dalam artikel ini.



    Jawabannya adalah sebuah ataupun beberapa buah gambar dapat di masukan ke dalam kode
    marquee. Seperti halnya teks biasa, kita hanya perlu memasukan kode gambar ke dalam kode marquee.



    Prinsip dasarnya seperti ini :



    <marquee>



    Teks, links, gambar, atau apa saja yang ingin di masukan.



    </marquee>



    Dari prinsip dasar diatas, maka kita hanya perlu memasukan kode gambar diantara kode marquee, sangat sederhana. Kode marquee yang dipakai tentu saja banyak variasinya, tergantung mana yang akan di pakai. Dan tidak hanya terpatok di situ saja, kita bisa memadukan berbagai kode HTML di dalam marquee, semisal apabila teks ingin berada di tengah-tengah, rata kiri, rata kanan, rata kiri-kanan, memakai bingkai, menggunakan warna latar belakang, dan atau apa saja. Tentunya di perlukan suatu kreatifitas agar kita bisa memadukannya.



    Perlu di ketahui bahwa kode marquee ini tidak terlalu dimengerti oleh browser Firefox, terutama versi yang terdahulu. Untuk versi terbaru pun memang sudah bisa mengerti (soalnya sekarang saya pake versi terbaru) akan tetapi tetap saja tidak seindah seperti ketika kita melihatnya melalui internet explorer. Akan tetapi lagi nih, jangan dulu berburuk sangka bahwa browser firefox tidak bagus, tentunya banyak kode-kode HTML yang lain akan berfungsi dengan baik apabila di lihat dengan firefox dan tidak berfungsi dengan baik apabila di lihat dengan internet explorer. Jadi pikir-pikir dulu apabila ingin menggunakan kode marquee, terlebih dalam jumlah yang banyak alias setiap sudut halaman blog menggunakan kode marquee.



    Kembali lagi ke bahasan utama yaitu membuat gambar bisa bergerak dengan marquee, sobat tinggal memasukan kode gambar di dalamnya. Jika ingin ada beberapa buah gambar untuk memisahkannya (tidak berdempetan), sobat harus menyisipkan kode <br/> diantara kode gambar untuk arah vertikal dan kode &nbsp; (jika sobat memakai firefox, kode yg sobat lihat mungkin salah kode yg benar ini -->       & n b s p ;     tapi tanpa sepasi alias bersatu). Saya berikan contoh, alamat foto yang saya miliki seperti ini :





    http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg



    http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg





    Untuk membuat foto tersebut tampil harus menggunakan kode html tambahan :






    <img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" />



    <img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" />






    hasilnya seperti ini :
















    yang di tampilkan di atas adalah dalam ukuran asli, jika ingin memperkecil maka tinggal memasukan atribut width="..." serta height="...". sebagai contoh saya ubah menjadi, tinggi 130 pixel dan lebar 190 pixel maka kodenya menjadi seperti ini :






    <img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />



    <img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />






    Maka hasilnya akan seperti ini :














    Sekarang bagaimana memasukan kode gambar tersebut ke dalam marquee?



    Saya ambil contoh, kode marquee yang di pakai adalah dengan variasi agar ketika mouse menyorot pada gambar berhenti, maka kodenya akan seperti ini :






    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" align="center">



    <img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />


    <br/><br/>

    <img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />



    </marquee>






    Itu tadi yang polos alias gambar saja yang yang bergerak. Jika ingin sedikit variasi bisa memakai bingkai.
    kodenya seperti ini :






    <table border="10" cellpadding="3" height="135" width="195"/>

    <tr>

    <td>

    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

    <img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />

    <br/>

    <img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />


    </marquee>

    </td>

    </tr>

    </table>








    Itu tadi memakai bingkai dengan warna latar belakang default (putih), jika ingin ada warna latar belakang (background) maka tinggal menyisipkan atribut background pada kode tabel, contoh dengan warna background biru muda :






    <table border="10" cellpadding="3" height="135" width="195" bgcolor="#b1c3d9" />

    <tr>

    <td>

    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

    <img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/238003026.jpg" height="130" width="190" />

    <br/>

    <img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" height="130" width="190" />


    </marquee>

    </td>

    </tr>

    </table>








    Untuk melihat efek dari kode-kode yang saya tulis, silahkan sobat klik di sini !



    Mudah-mudahan mudah untuk di mengerti. Selamat mencoba !