HTML : Post Title Marquee in Blogger’s Layout

Marquee? siapa yang tak kenal efek yang dihasilkannya. Kode HTML marquee memang sering digunakan untuk menyulap tampilan teks atau gambar untuk lebih aktif bergerak. Manjur untuk menghilangkan kesan monoton.

Nah kali ini edittag ingin berbagi untuk menyetingnya di layout blogger. Bagian yang ingin digerakkan adalah pada judul postingan.

Untuk itu ikuti prosedur berikut :

Klik subtab edit HTML pada bagian Template. Atau bila kita memulainya dari dasboard maka langkahnya adalah klik tautan Layout, lalu klik Edit HTML. Bila sudah tiba disini, centanglah kotak Expand Template Widget. Tunggu sesaat agar dimuat semua kode XMLnya.

Lalu coba cari kode berikut :
<b:includable id=’post’ var=’post’>
<div class=’post hentry uncustomized-post-template’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h3 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Lalu kita akan memasang kode marquee di bagian depan title. Karena keterbatasan ruangan disini, maka yang kiranya layak digunakan adalah atribut direction left atau right. Hingga akan termuat kode lengkapnya menjadi berikut :

<b:includable id=’post’ var=’post’>
<div class=’post hentry uncustomized-post-template’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<marquee direction=’left’><h3 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></marquee>
</b:if>

Tentu ada catatan ringan nih, semoga ingat akan ketentuan marquee di postingan sebelumnya akan kebutuhan teknis penggunaan marquee di browser. Contoh bisa dilihat disini.

Postingan terkait :
- Masalah teknis penggunaan Marquee.
- Atribut HTML pada Marquee.

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

HTML : Post Title Marquee in Blogger’s Layout

Marquee? siapa yang tak kenal efek yang dihasilkannya. Kode HTML marquee memang sering digunakan untuk menyulap tampilan teks atau gambar untuk lebih aktif bergerak. Manjur untuk menghilangkan kesan monoton.

Nah kali ini edittag ingin berbagi untuk menyetingnya di layout blogger. Bagian yang ingin digerakkan adalah pada judul postingan.

Untuk itu ikuti prosedur berikut :

Klik subtab edit HTML pada bagian Template. Atau bila kita memulainya dari dasboard maka langkahnya adalah klik tautan Layout, lalu klik Edit HTML. Bila sudah tiba disini, centanglah kotak Expand Template Widget. Tunggu sesaat agar dimuat semua kode XMLnya.

Lalu coba cari kode berikut :
<b:includable id=’post’ var=’post’>
<div class=’post hentry uncustomized-post-template’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h3 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Lalu kita akan memasang kode marquee di bagian depan title. Karena keterbatasan ruangan disini, maka yang kiranya layak digunakan adalah atribut direction left atau right. Hingga akan termuat kode lengkapnya menjadi berikut :

<b:includable id=’post’ var=’post’>
<div class=’post hentry uncustomized-post-template’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<marquee direction=’left’><h3 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></marquee>
</b:if>

Tentu ada catatan ringan nih, semoga ingat akan ketentuan marquee di postingan sebelumnya akan kebutuhan teknis penggunaan marquee di browser. Contoh bisa dilihat disini.

Postingan terkait :
- Masalah teknis penggunaan Marquee.
- Atribut HTML pada Marquee.

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

HTML : Post Title Marquee in Blogger’s Layout

Marquee? siapa yang tak kenal efek yang dihasilkannya. Kode HTML marquee memang sering digunakan untuk menyulap tampilan teks atau gambar untuk lebih aktif bergerak. Manjur untuk menghilangkan kesan monoton.

Nah kali ini edittag ingin berbagi untuk menyetingnya di layout blogger. Bagian yang ingin digerakkan adalah pada judul postingan.

Untuk itu ikuti prosedur berikut :

Klik subtab edit HTML pada bagian Template. Atau bila kita memulainya dari dasboard maka langkahnya adalah klik tautan Layout, lalu klik Edit HTML. Bila sudah tiba disini, centanglah kotak Expand Template Widget. Tunggu sesaat agar dimuat semua kode XMLnya.

Lalu coba cari kode berikut :
<b:includable id=’post’ var=’post’>
<div class=’post hentry uncustomized-post-template’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h3 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Lalu kita akan memasang kode marquee di bagian depan title. Karena keterbatasan ruangan disini, maka yang kiranya layak digunakan adalah atribut direction left atau right. Hingga akan termuat kode lengkapnya menjadi berikut :

<b:includable id=’post’ var=’post’>
<div class=’post hentry uncustomized-post-template’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<marquee direction=’left’><h3 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></marquee>
</b:if>

Tentu ada catatan ringan nih, semoga ingat akan ketentuan marquee di postingan sebelumnya akan kebutuhan teknis penggunaan marquee di browser. Contoh bisa dilihat disini.

Postingan terkait :
- Masalah teknis penggunaan Marquee.
- Atribut HTML pada Marquee.

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

HTML : Post Title Marquee in Blogger’s Layout

Marquee? siapa yang tak kenal efek yang dihasilkannya. Kode HTML marquee memang sering digunakan untuk menyulap tampilan teks atau gambar untuk lebih aktif bergerak. Manjur untuk menghilangkan kesan monoton.

Nah kali ini edittag ingin berbagi untuk menyetingnya di layout blogger. Bagian yang ingin digerakkan adalah pada judul postingan.

Untuk itu ikuti prosedur berikut :

Klik subtab edit HTML pada bagian Template. Atau bila kita memulainya dari dasboard maka langkahnya adalah klik tautan Layout, lalu klik Edit HTML. Bila sudah tiba disini, centanglah kotak Expand Template Widget. Tunggu sesaat agar dimuat semua kode XMLnya.

Lalu coba cari kode berikut :
<b:includable id=’post’ var=’post’>
<div class=’post hentry uncustomized-post-template’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h3 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Lalu kita akan memasang kode marquee di bagian depan title. Karena keterbatasan ruangan disini, maka yang kiranya layak digunakan adalah atribut direction left atau right. Hingga akan termuat kode lengkapnya menjadi berikut :

<b:includable id=’post’ var=’post’>
<div class=’post hentry uncustomized-post-template’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<marquee direction=’left’><h3 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></marquee>
</b:if>

Tentu ada catatan ringan nih, semoga ingat akan ketentuan marquee di postingan sebelumnya akan kebutuhan teknis penggunaan marquee di browser. Contoh bisa dilihat disini.

Postingan terkait :
- Masalah teknis penggunaan Marquee.
- Atribut HTML pada Marquee.

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

CSS : Change Your LI Type with Background Image

Di kesempatan sebelumnya, edittag pernah menulis mengenai type UL di dalam file xml Blogger. Disitu juga tersebut adanya pembatasan tipe untuk menampilkan tampilan daftar item (list item).

Lalu bagaimana agar kita punya tampilan yang berbeda, tak mau hanya terima dengan apa yang ditawarkan pihak Blogger? Untuk urusan UL dan LI sebenarnya kita bisa melakukan perombakan tampilanya melalui CSS.

Yakni dengan penambahan background pada atribut LI. Namun penggunaan cara ini memang masih menyisakan masalah klasik bagi sebagian perambah (browser). Bukan berarti tak semuanya tak mampu mendukung CSS ul dan li, karena bila kita sempat melongok beberapa layout atau template bawaan blogger, beberapa diantaranya menyertakan CSS background untuk LI.

Biasanya di layout baku (bawaan blogger) kita seringkali melihatnya di bagian CSS yang disebut sebagai Typography : Main entry. Coba lihatlah bagian CSS berlabel komentar seperti diatas. Masuk ke dasboard, lalu klik Layout, dan tuju Edit HTML. Lalu coba turun kebawah hingga menemukan kode seperti ini :

.post li {
line-height:1.5em;
list-style:none;
background:url(“http://www.blogblog.com/scribe/list_icon.gif”) no-repeat 0px

Hasilnya tentu sama-sama bisa dilihat. Bila dalam suatu postingan terselipkan kode UL dan LI maka akan ada tampilan gambar bulatan (list_icon.gif) didepannya. Tentu ini berlaku bila kita tak menambahkan type dibelakang LI. Atau dalam hal ini diwakili oleh kode CSS diatas, yakni : list-style:none;.

Bila kita memiliki gambar lain sebagai pengganti ikon LI ini (lebih bagus bila ukuranya 10*10 pixel), kita bisa menunggahnya terlebih dahulu. Bisa kita mengunggahnya dengan metode seperti di profile atau di googlepages. Lalu salin alamat URL file gambar tersebut. Dan gantikan pada bagian background:url.

Hingga misalnya akan menjadi :

.post li {
line-height:1.5em;
list-style:none;
background:url(“http://eninesia.googlepages.com/bullet_e.gif”) no-repeat 0px

Tak lupa untuk menyimpan layoutnya bila sudah diedit.
Untuk menyimak hasilnya, bisa dilihat contoh berikut :

•   Pertama
•   Kedua

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

Blogger : Use English Subject in Post just for Adsense?

“saya juga baru aja nemu blog pake bhs indonesia, tapi bisa nampilin full adsense, mungkin karena google ngenalin url dari tiap postingan di blogspot, saya lihat blog ini, semua judul postingnya pake english. ini trik baru kali ya…”
(pesan dicukil darisini.)

Paragraf diatas edittag temukan dari Komunitas Forum Joomla Indonesia. Ditulis oleh blogger Jogja yang aktif menjalankan beragam situs dengan platform joomla. Blogger ini juga sering mampir ke edittag untuk sekedar meninggalkan pesan di Shoutbox.

Perhatikan pada kalimat yang diselimuti tautan yang merujuk ke blog ini. Sang penulis berencana menanyakan tentang keabsahan trik yang (diduga) digunakan oleh edittag kepada mejelis forum. Namun semenjak postingan kalimat diatas tak tampak lagi ada reaksi dari anggotya forum lainnya. Entah karena tak sempat, atau sekedar tak penting untuk dibahas, atau memang tak ada yang tahu kebenaran trik ini.

Sayang sekali edittag tak terjalin sebagai anggota forum disana. Jadi tak punya kuasa untuk sekedar memberikan pendapat. Jadi maaf bila ditulis di blog ini.

Ada dua alasan mengapa edittag menggunakan judul postingan berbahasa Inggris :

1. Alasan konten. Dari sejak pertama (tanggal 15 maret 2006) edittag memang sering menulis postingan mengenai penggunaan kode HTML dan CSS. Dengan konten seperti ini maka akan mudah diingat bila hanya mencantumkan subyek postingan yang pendek dan bernas. Misalnya mencantumkan judul “HTML : UL List” dibagian ini. Daripada misalnya “Cara mencantumkan kode HTML LI ke dalam blog”. Terlalu panjang dan bisa merusak maksud yang ingin ditegaskan dalam sebuah postingan. Jadi ini tak ada kaitanya dengan program Adsense.

2. Alasan pengkategorian. Semoga para pengguna blogspot di awal-awal penggunaanya masih ingat akan keterbatasan fitur yang disajikan pihak pengelola. Maka dengan alasan agar memudahkan pengunjung akan akses ke halaman lain, terbesitlah ide untuk memajang label atau kategori. Nah dari sini memang akhirnya menemukan ide berupa pencantuman subyek tertentu guna memudahkan javascript (yang kala itu dipakai) untuk bekerja mengkategorikan postingan. Kali ini pun tak ada kaitan dengan Adsense.

Bila dilihat dari kronologis postingan diatas dengan dimulainya penggunaan Adsense di blog ini, maka semoga ini bisa menggugurkan dugaan. Namun bila ditanya “apakah edittag merasa menyesal akan penggunaan Bahasa Inggris” bila kaitanya sebagai bagian dari optimalisasi keberadaan iklan Adsense? jawabannya tentu tidak. Bahkan bersyukur sudah memulainya dari awal. Berita bagusnya, kini makin banyak edittag temukan postingan pada blog berbahasa Indonesia menggunakan Bahasa Inggris di bagian subyek. Semoga ikut tertular ramai blognya dikerubuti Adsense ya……

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

Friendster : Add Video to Profile.

Tak adil bila memasukan video baru dibahas disini untuk lingkungan blogspot, begitu pula bila di friendster hanya diberikan langkah memasukan media suara. Bagaimana bila keduanya digabungkan, maksudnya memasang file video ke dalam Friendster.

Untuk melakukannya, kita mesti menyiapakan file video kan? trik sebelumnya juga bisa dipakai. Lalu kita juga memerlukan tempat untuk menempatkan file video, maka kebutuhan ini akan bisa terwakili dengan mengakses website Youtube. Haruskah di Youtube? jelas akan lebih baik, karena website ini pula yang direkomendasikan pihak Friendster.

Masuklah ke bagian edit profile sesaat setelah masuk log ke Friendster. My Profile -> Customize. Di tab Customize My Profile gulung halaman hingga bagian bawah. Temukan bagian bertuliskan Add Media. Masih ingat kan? bagian ini pula yang dituju saat menambahkan file suara di postingan yang lalu. Nah kali ini kita akan diminta untuk memasukan obyek video dibagian ini. Lalu bagaimana bila di kolom ini sudah terpasang kode untuk suara? menggabungkan suara dan video pun masih diijinkan disini. Atau bila kita buka tautan di bagian ini maka akan ada pemberitahuan sebagai berikut :

Ok, tahan halaman ini. Lalu buka window atau tab baru di browser. Ketikan alamat website Youbute. Sign in (atau daftar bagi yang belum memiliki akun). Setelah itu temukan tautan ini (biasanya ada di bagian bawah). Bila kita memiliki file AVI atau MP4 segera unggah di bagian Upload File. Bila proses pengunggahan selesai, akan muncul bagian kode seperti berikut.

Salin kode ini, lalu kembali ke halaman profile Friendster yang masih terbuka, dan salin kodenya dibagian Add Media.

Tekan save untuk menyimpangnya.

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

Blogger : Delete Post When You Just Need Image URL

Isu penggunaan blogger.com sebagai media penyimpanan file gambar memang mengundang decak kekaguman. Meski memiliki banyak “saudara kembar”, tak sedikit menghapus keraguan akan keampuhan media penyimpanan file di blogger.com. Sebut saja nama-nama seperti Googlepages, Hello, Picasa yang masih terhitung akrab di telinga (dan mungkin juga hapal seberapa besar kekuatan daya tampung masing-masing penyimpananya ).

Paling awal dulu edittag sempat merekomendasikan simpan ke draft untuk menunggah poto. Edittag juga sempat menemukan jawaban dari Forum Blogger yang menyebutkan bahwa kapasitas blogger tak sekedar yang tertulis dalam layananya. Meski hal ini tak disebut dalam dokumen formal, sepertinya memang teruji dalam kasus berikut :

Ketika pertama kali kita memiliki akun blog di Blogspot, maka hal yang sering ditanyakan adalah tempat menyimpan file photo ketika hendak menyunting tampilan Profil. Di bagian ini memang tak disediakan porsi “Browse” untuk mengunggah file poto agar tertampil. Walhasil kita mesti terlebih dahulu kerepotan untuk mencari media yang tepat. Tak jarang “pintu paling cepat” adalah mengungahnya di dalam postingan.

Maka kemudian tangan kita menekan tautan “Membuat Postingan”, lalu mencari ikon bergambar pemandangan, browse, mencari file poto di hardisk lokal dan setelah berhasil terunggah akan muncul gambar kita di dalam postinganya. Karena yang dibutuhkan untuk mengisi poto profil adalah alamat URL gambar poto, maka kemudian kita ganti mode editor postingannya ke bentuk “Edit HTML”. Lalu menyorot alamat URL file tadi seperti alamat berikut : http://bp1.blogger.com/potoku.jpg. Beres mendapatkan alamat filenya kita pun kembali bertanya : “apakah postingan yang hanya berisi poto akan dipertahankan atau dibuang?”.

Jika kita memilih opsi dibuang, apakah file gambar tadi akan ikut hilang? ternyata tidak!. Profile Blogger masih sanggup menemukan file gambar tadi. Lalu dimanakah Blogger menyimpannya ya

Tautan terkait :
- Melongok Profil tetangga sebelah.
- Photo hosting di Blogger.
- Apakah ada batasan penyimpanan dalam Blogger?

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

Blogger : Add Video in Post

Waktunya mencicipi fitur yang “melompat” dari layanan draft ke layanan resmi. Bagaimana sih podcasting di Blogspot?

Tentu yang pertama kali perlu disiapkan adalah file video. Diantara jenis file video yang diijinkan untuk diunggah adalah AVI, MPEG, QuickTime, Real, dan Windows Media. Bagaimana dengan file 3GP? jenis file yang sering kita simpan dalam telepon genggam yang kita miliki. Mengapa tak disebut? lalu bagaimana bila punya file 3gp yang patut kita sebar melalui blog?

Untuk keperluan spesial seperti ini, kita memerlukan bantuan piranti lunak untuk mengubahnya ke bentuk file yang bisa diterima pihak Blogger. Cobalah googling dengan kata kunci “3GP converter”. Pilih yang sekiranya freeware agar tak diusik pihak yang keberatan dengan permasalah digital copyright.

Sulit menentukan pilihan ? Cobalah 3GP Converter. File ini bisa diunduh di http://www.videohelp…/3GP_Converter. Ukuran filenya pun ringan, hanya 3.48 MB.

Setelah menyimpanya dalam hardisk lokal, kita perlu meng-extractnya agar mendapatkan file Setupnya. Temukan file Setup.exe dan klik ganda untuk menginstalnya. Selanjutnya bila terbuka jendela mini dengan huruf yang tak dimengerti, cobalah ganti saja ke bahasa Inggris.

Setelah itu perhatikan kolom diatasnya, akan ada perubahan di bagian tipe konfigurasi file.

Kali ini kita coba pilih general : AVI, MPEG4 general Setting. Lalu tekan apply. Lanjutnya akan muncul jendela baru seperti ini.
Pertama tentukan output directory. Biarkan opsi QVGA Normal quality 15fps Mono pada bagian General:AVI, MPEG4 General Setting tetap terpilih. Lalu seret file 3GP di bagian Drag&Drop files here. Biarkan sejenak menunggu proses berlangsung. Setelah selesai cek di direktori yang telah ditentukan sebelumnya. Sudah ada? ok…

Selanjutnya kita unggah file AVI ini ke dalam postingan. Temukan ikon unggah video ()dibagian tolbar editor. Setelah jendela onthefly muncul,

klik tombol browse untuk mencari file yang baru saja kita ciptakan. Beri penamaan pada Judul Video. Tak lupa beri tanda centang pada radio button “saya setuju dengan syarat dan Ketentuan Meng-Upload”. Bila selesai tekan UPLOAD VIDEO. Begitu kembali ke editor blogger, kita bisa saja menambahkan konten teks bila memang diperlukan.
Tekan Mempublikasikan Posting untuk mengakhiri.

Nah, berikut contoh file video yang akan muncul (pastikan Flash Player telah tertanam di browser yang kita gunakan) :

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com

WEB : Another Visitor from Google’s ISP

Selesai postingan terakhir kemarin, memang sempat berharap agar sentilan memanggil kepedulian pihak Google berimbas. Memang agak sedikit paranoid nih melihat banyak sekali kejadian yang berlaku aneh di lingkungan blog. Ada blog yang dengan mudah bisa dinilai manfaat baiknya untuk yang lain namun ujungnya tak menyenangkan, ditutup oleh penyedianya. Lalu ada juga blog lain yang secara terang-terangan memuat konten yang bersingungan dengan produk hasil bajakan, namun masih melenggang dengan tenangnya. Jadi kita tak akan pernah tahu akan kemana ujungnya. Niat baik memang tak selalu mendapat tanggapan sesuai harapan ya….

Nah, makanya ketika mengetahui blog ini sempat dilongok oleh pengunjung dengan menggunakan layanan dari ISP google, deg! sempat berdesir aliran darahnya. Langsung ada 2 kemungkinan nih, mendapat apresiasi baik atau malah sebaliknya. Karena sebelumnya juga dengan alamat tautan yang sama sempat tertangkap 25 menit sebelumnya. Ada kemungkinan alamat tautan yang menuju ke edittag ini sempat mampir ke beberapa pengunjung di lingkup sekitarnya.

Dan juga yang perlu dicermati adalah pintu masuk yang tak lagi referensi dari Google. Peluang untuk terlempar alamat tautanya ke yang lain juga masih terbuka. Dan semoga sih ini punya andil yang baik agar blognya terdengar ke pihak intern Google ya, bukan sebaliknya

Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com