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 :



<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> 



6. 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>
   

   
   


7. Klik tombol Simpan Template.


8. 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 !

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>










<br />#isi-marquee{<br />position: relative;<br />width: 200px; /*lebar marquee */<br />height: 200px; /*tinggi marquee */<br />background-color: white; /*warna background */<br />overflow: hidden;<br />padding: 2px;<br />padding-left: 4px;<br />}<br /><br />








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











<br /><script type="text/javascript"><br /><br />/***********************************************<br />* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)<br />* This notice MUST stay intact for legal use<br />* Visit http://www.dynamicdrive.com/ for this script and 100s more.<br />***********************************************/<br /><br />var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)<br />var marqueespeed=1 //angka 2 adalah nilai kecepatan marquee, ubah jika ingin mengubahnya<br />var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?<br /><br />////TIDAK ADA YANG PERLU DI UBAH PADA BAGIAN INI////////////<br /><br />var copyspeed=marqueespeed<br />var pausespeed=(pauseit==0)? copyspeed: 0<br />var actualheight=''<br /><br />function scrollmarquee(){<br />if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))<br />cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"<br />else<br />cross_marquee.style.top=parseInt(marqueeheight)+8+"px"<br />}<br /><br />function initializemarquee(){<br />cross_marquee=document.getElementById("vmarquee")<br />cross_marquee.style.top=0<br />marqueeheight=document.getElementById("isi-marquee").offsetHeight<br />actualheight=cross_marquee.offsetHeight<br />if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit<br />cross_marquee.style.height=marqueeheight+"px"<br />cross_marquee.style.overflow="scroll"<br />return<br />}<br />setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)<br />}<br /><br />if (window.addEventListener)<br />window.addEventListener("load", initializemarquee, false)<br />else if (window.attachEvent)<br />window.attachEvent("onload", initializemarquee)<br />else if (document.getElementById)<br />window.onload=initializemarquee<br /></script><br />







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











<br /><table border="3"><tr><td><table border="1"><tr><td><br /><div id="isi-marquee" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"><br /><div id="vmarquee" style="position: absolute; width: 98%;"><br /><br /><div align="center"><br />Apabila sobat mempunyai pertanyaan atau kritik tentang blog ini, tulis aja tulis pada shoutbox, atau jika ingin langgeng tulis di kotak komentar. Atau jika ingin puas langsung kirim via email <br/><br/><br />Jika ada sobat yang sudah pasang link blog ini dan belum saya linkback, tolong di kasih tahu pada shoutbox atau email saja langsung ke saya. <br /><br/><br/>Terima kasih </div><br /><br /></div><br /></div><br /></td></tr></table></td></tr></table><br />







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>
   
   
   
   
   
   
   
   

   
   <br />#isi-marquee{<br />position: relative;<br />width: 200px; /*lebar marquee */<br />height: 200px; /*tinggi marquee */<br />background-color: white; /*warna background */<br />overflow: hidden;<br />padding: 2px;<br />padding-left: 4px;<br />}<br />

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











<br /><script type="text/javascript"><br />//<![CDATA[ <br />/***********************************************<br />* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)<br />* This notice MUST stay intact for legal use<br />* Visit http://www.dynamicdrive.com/ for this script and 100s more.<br />***********************************************/<br /><br />var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)<br />var marqueespeed=1 //angka 2 adalah nilai kecepatan marquee, ubah jika ingin mengubahnya<br />var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?<br /><br />////TIDAK ADA YANG PERLU DI UBAH PADA BAGIAN INI////////////<br /><br />var copyspeed=marqueespeed<br />var pausespeed=(pauseit==0)? copyspeed: 0<br />var actualheight=''<br /><br />function scrollmarquee(){<br />if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))<br />cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"<br />else<br />cross_marquee.style.top=parseInt(marqueeheight)+8+"px"<br />}<br /><br />function initializemarquee(){<br />cross_marquee=document.getElementById("vmarquee")<br />cross_marquee.style.top=0<br />marqueeheight=document.getElementById("isi-marquee").offsetHeight<br />actualheight=cross_marquee.offsetHeight<br />if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit<br />cross_marquee.style.height=marqueeheight+"px"<br />cross_marquee.style.overflow="scroll"<br />return<br />}<br />setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)<br />}<br /><br />if (window.addEventListener)<br />window.addEventListener("load", initializemarquee, false)<br />else if (window.attachEvent)<br />window.attachEvent("onload", initializemarquee)<br />else if (document.getElementById)<br />window.onload=initializemarquee<br />//]]><br /></script><br />







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











<br /><table border="3"><tr><td><table border="1"><tr><td><br /><div id="isi-marquee" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"><br /><div id="vmarquee" style="position: absolute; width: 98%;"><br /><br /><div align="center"><br />Apabila sobat mempunyai pertanyaan atau kritik tentang blog ini, tulis aja tulis pada shoutbox, <br />atau jika ingin langgeng tulis di kotak komentar. Atau jika ingin puas langsung kirim via email <br/><br/><br />Jika ada sobat yang sudah pasang link blog ini dan belum saya linkback, tolong di kasih tahu pada shoutbox atau email saja langsung ke saya. <br /><br/><br/>Terima kasih </div><br /><br /></div><br /></div><br /></td></tr></table></td></tr></table><br />







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 !