marquue dalam bingkai tv flat

Rubrik Elektronik


Electronic Rubric


Kolom iklan

Leer más

Mengubah Kursor ketika Diarahkan ke Gambar

Cara Mengubah Kursor memang menarik, terutama ketika diarahkan ke gambar. Kursor yang defaultnya berupa pointer (gambar tangan), akan berubah ketika diarahkan langsung ke area gambar, benar-benar menarik. Caranya sangat mudah,

Cara Mengubah Kursor ketika Diarahkan ke Gambar

Cara Mengubah Kursor memang menarik, terutama ketika diarahkan ke gambar. Kursor yang defaultnya berupa pointer (gambar tangan), akan berubah ketika diarahkan langsung ke area gambar, benar-benar menarik. Caranya sangat mudah, tidak perlu edit css. Penasaran?..

Hasilnya nanti seperti ini
(Arahkan kursor anda ke gambar di bawah)

Bagaimana? Terlihat kan perubahannya. Jadi, ketika anda mengarahkan kursor anda ke kotak hitam tersebut, otomatis kursor berubah menjadi gambar monyet YoYo. Yuk belajar cara membuatnya bersama..Jangan lupa siapkan teh dan camilan.

Ikuti langkah pembuatan mengubah kursor ketika diarahkan ke gambar :

1. Log in ke blog anda
   
2. Posting >> New post
   
3. Upload gambar melalui add image (Seperti biasa)
   
4. Setelah gambar terupload, berikutnya click tab "Edit Html"
   
5. Secara default gambar yang terupload mempunyai kode seperti ini :
   
   
   <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDASpNBp1clkqEETzI2_85XJjJbflHNOyTmEo77pCo9UR0vjztq2RZuo18lHfzWO-MsS2kUCrhghj1VITrfkzwbj8-_p2-QMNczXd82s9Z1B8VBMxxlUFgdZKuB2HEhmCzf26c1SDrKiH/s1600-h/kotak+kursor.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 189px; height: 92px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDASpNBp1clkqEETzI2_85XJjJbflHNOyTmEo77pCo9UR0vjztq2RZuo18lHfzWO-MsS2kUCrhghj1VITrfkzwbj8-_p2-QMNczXd82s9Z1B8VBMxxlUFgdZKuB2HEhmCzf26c1SDrKiH/s320/kotak+kursor.jpg" alt="" id="BLOGGER_PHOTO_ID_5437226557469385330" border="0" /></a>
   Akan menghasilkan gambar dengan kursor pointer (gambar tangan) :
   
   
   
   Ganti kode di atas yang saya beri warna merah menjadi kode seperti di bawah ini.
   
   
   <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDASpNBp1clkqEETzI2_85XJjJbflHNOyTmEo77pCo9UR0vjztq2RZuo18lHfzWO-MsS2kUCrhghj1VITrfkzwbj8-_p2-QMNczXd82s9Z1B8VBMxxlUFgdZKuB2HEhmCzf26c1SDrKiH/s1600-h/kotak+kursor.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: url(http://img42.imageshack.us/img42/290/yoyoemoticon.gif), wait; width: 189px; height: 92px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDASpNBp1clkqEETzI2_85XJjJbflHNOyTmEo77pCo9UR0vjztq2RZuo18lHfzWO-MsS2kUCrhghj1VITrfkzwbj8-_p2-QMNczXd82s9Z1B8VBMxxlUFgdZKuB2HEhmCzf26c1SDrKiH/s320/kotak+kursor.jpg" alt="" id="BLOGGER_PHOTO_ID_5437226557469385330" border="0" /></a>
   Akan menghasilkan gambar dengan kursor YoYo (gambar YoYo) :
   
   

   

!! Yang harus diubah/diedit :

cursor:url(http://img42.imageshack.us/img42/290/yoyoemoticon.gif) . Ganti teks yang berwarna biru dengan url gambar anda, jangan gambar yang terlalu besar dan jangan gambar wanita.

Mudeng kan? Nah, jadi caranya hanya tinggal mengganti kode "Cursor". Kalau sudah mengerti, teh dan camilannya udah habis kan? Langsung aja praktekkan. Selamat mencoba.

Leer más

Membuat Link ke Halaman Atas / Top Page

 Cara membuat link ke halaman atas/top page :

1. Log in ke akun blogger anda.
   
2. Cari kode ]]></b:skin>
   
3. Copy kode di bawah ini dan paste di atas kode ]]></b:skin>
   
   
   #trik_pojok {
   position:fixed;_position:absolute;bottom:0px; left:0px;
   clip:inherit;
   _top:expression(document.documentElement.scrollTop+
   document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
   ** Ganti tulisan bottom dengan top bila anda ingin gambar berada di atas.
   ** Ganti tulisan left dengan right bila anda ingin gambar berada di kanan.
4. Cari kode </body>
   
5. Copy kode di bawah ini dan paste di atas kode </body>
   
   <div id="trik_pojok">
   <a href='#' onclick='new Element.scrollTo(&apos;top&apos;); return false;'><img border='0' src='http://img36.imageshack.us/img36/4563/backtotopg.jpg'/></a>
   </div>
   **http://img36.imageshack.us/img36/4563/backtotopg.jpg >> Bisa anda ganti menjadi gambar favorit anda sendiri. Secara default saya buatkan gambar tanda panah ke atas 3D.
6. Save

Leer más

Mengenal perintah IFRAME

Untuk tutorial kali ini saya ingin sedikit mengulas tentang salah satu fungsi kode HTML yakni perintah <iframe>. Dengan perintah iframe kita dapat menampilkan isi dari situs ataupun blog milik orang lain pada blog milik kita, namun walaupun demikian kita tidak boleh sembarangan tentunya harus mendapatkan izin terlebih dahulu dari pemilik blog yang ingin di tampilkan.

Perintah dasar dari iframe adalah sebagai berikut : <iframe> .... isi dari iframe .... </iframe>

Beberapa atribut yang sering di pasang dalam iframe adalah :

ALIGN="left/right" --> Untuk mengatur posisi iframe WIDTH="lebar" -->: Mengatur lebar IFRAME dalam pixel atau persen HEIGHT="tinggi" --> Untuk mengatur tinggi dari iframe dalam pixel atau persen FRAMEBORDER="garis pembatas" --> Untuk memberi garis pembatas SCROLLING="auto/yes/no" --> Untuk memberi atau tidak memberi scrolling pada iframe SRC="url yg ingin di tampilkan" --> alamat sumber yang ingin di tampilkan pada iframe

Agar lebih mudah untuk di fahami, maka saya akan memberikan dua contoh dari fungsi perintah iframe. Misalkan alamat sumber yang ingin saya tampilkan adalah isi dari blog saya yang lain yang beralamat di http://unique-r1-8.blogspot.com/, lebar yang ingin saya gunakan adalah sebesar 500 pixel, dan tinggi sebesar 300 pixel.

IFRAME yang tidak mempunyai garis pembatas dan tidak mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :

<iframe align="left" frameborder="0" height="300" scrolling="no" src="http://panduan-wongsalam.blogspot.com" width="500"></iframe><br />

IFRAME yang mempunyai garis pembatas dan mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :

<iframe align="left" frameborder="10" height="300" scrolling="auto" src="http://panduan-wongsalam.blogspot.com" width="680"></iframe><br />

Bagaimana sobat, tentunya dengan iframe kita dapat mengintip isi dari blog milik orang lain pada blog milik kita. Akan tetapi jangan lupa untuk meminta ijin terlebih dahulu kepada pemiliknya apabila tidak ingin kena damprat sang pemilik blog.

IFRAME yang mempunyai garis pembatas dan mempunyai fasilitas scrolling dalam efek marquee yang dibingkai frame 3 dimensi

/>

contoh kode yang di pasang seperti ini :

<table bgcolor="#0077ff" border="10" cellpadding="3" height="135" style="width: 600px;"><tbody> <tr><td><br /> <marquee align="center" direction="up" height="600" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="600"><br /> <br /> <br /> <iframe align="left" frameborder="10" height="1500" scrolling="auto" src="http://panduan-wongsalam.blogspot.com" width="600"></iframe>/><br /> <br /> <br /> <br /> <br /> </marquee></td></tr> </tbody></table>

Selamat bereksperimen !

Leer más

Membuat foto animasi

Lagi-lagi saya berbicara tentang animasi, memang dengan animasi bisa bikin hidup jadi hidup ( kaya iklan aja ). Ya dalam kesempatan kali ini akan coba di bahas tentang bagaimana cara membuat animasi gambar ataupun foto. Bagi para sobat (mulai sekarang saya akan membiasakan diri menyebut anda menjadi sobat, biar lebih familier ya) yang sudah terbiasa menggunakan program animasi semisal MacroMedia Flash Player ataupun teman-temannya sudah barang tentu bukan hal yang wah ataupun aneh, tapi bagi sekelompok orang seperti saya ini, membuat animasi foto adalah suatu hal yang sangat sulit sekali.

Adakah diantara para sobat blogger yang seperti saya? jika jawabannya ada ya kita emang senasib (hiduplah senasib), tapi jangan dulu patah semangat sobat blogger, pepatah bilang banyak jalan menuju rhoma (irama).. dalam hal inipun sama ada jalannya yakni kita bisa menggunakan jasa situs-situs pembuat animasi. Di internet buaanyak sekali situs pembuat animasi foto, jumlahnya ribuan atau bahkan jutaan. Nah sebagai contoh yaitu http://www.slide.com. Untuk membuat sebuah foto animasi di slide.com, silahkan ikuti langkah-langkah berikut :

1. Silahkan buka situs www.slide.com
2. Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut
3. Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)
4. Masukan alamat email sobat pada kolom yang disediakan. isi juga password yang diinginkan
5. Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account sobat
6. Langkah selanjutnya adalah melakukan pembuatan animasi
7. Klik style, untuk memilih gaya dari animasi
8. klik skin, untuk memilih bingkai animasi
9. klik Size untuk memilih ukuran
10. Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan
11. klik tombol Upload untuk melakukan proses upload foto
12. Jika proses upload selesai, klik tombolSave
13. Copy kode HTML yang di berikan, lalu paste pada program notepad
14. Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser
15. Langkah selanjutnya adalah memasukan kode HTML animasi tersebut ke dalam blog sobat, nah untuk cara memasukan kode HTML sudah sering saya bahas pada postingan terdahulu, jika lupa silahkan klik di sini

Leer más

Cara Membuat Efek Photo Samar (blur)

 Bagaimana cara membuat efek photo samar (blur) pada blog/web? wah sepertinya ini tidak terlalu sulit untuk di terangkan, soalnya masih sedikit kaku nih jadi mending yang gampang-gampang saja dulu. Setelah melihat contoh yang di berikan oleh sahabat yang betanya, ternyata memang menarik juga untuk di pasang. Efek photo yang di maksud adalah photo (gambar) akan terlihat samar ketika pertama kali dilihat, namun apabila photo atau gambar tersebut di sorot oleh mouse komputer anda maka photo atau gambar tersebut menjadi terlihat jelas, bingung? sok di sorot dahulu photo di bawah ini agar jelas apa yang sedang saya bicarakan :

Tertarik juga untuk membuat efek yang seperti di atas, begini nih caranya :

Langkah #1

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata letak.
3. Klik tab Edit HTML.
4. Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).
5. Silahkan cari kode berikut : ]]></b:skin>
6. Copy paste kode berikut di atas kode ]]></b:skin>
   
   
   .linkopacity img {<br /> filter:alpha(opacity=30);<br /> -moz-opacity: 0.30;<br /> opacity: 0.30;<br /> border:0;<br /> }<br /> .linkopacity:hover img {<br /> filter:alpha(opacity=100);<br /> -moz-opacity: 1.0;<br /> opacity: 1.0;<br /> border:0;<br /> }<br /> .linkopacityxtra:hover img {<br /> filter:alpha(opacity=1.1);<br /> -moz-opacity: 1.1;<br /> opacity: 1.1;<br /> border:0;<br /> }
   
   
     
7. Klik tombol Simpan Template.
8. Langkah #1 selesai.

Langkah #2

Setiap anda memasang photo atau gambar, sisipkan kode seperti ini :

<a href="url tujuan" class="linkopacity"><img src="url sumber gambar"></a>




Semisal gambar ini ingin nge link ke http://panduan-wongsalam.blogspot.com, maka kode yang di pasang adalah seperti di bawah ini :

<a href="http://panduan-wongsalam.blogspot.com" class="linkopacity"><img src="https://lh6.googleusercontent.com/-kjr_AeGJzqs/TdNCKLCe5JI/AAAAAAAAAhM/_WBAkcIoC_s/s512/11.jpg"></a>

Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik saja jika mau :





Jika gambar anda tidak ingin nge link ke mana-mana, maka cukup gantikan saja alamat url tujuan dengan dengan kode #nogo, contoh :

<a href="#nogo" class="linkopacity"><img src="https://lh6.googleusercontent.com/-kjr_AeGJzqs/TdNCKLCe5JI/AAAAAAAAAhM/_WBAkcIoC_s/s512/11.jpg"></a>

Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik dan pasti tidak akan terjadi apa-apa :





Sudah paham? pastinya sudah, soalnya tentang cara nampilin gambar pernah saya tulis panjang lebar pada postingan tentang Google page creator, di baca lagi jika masih belum paham betul.

Tentang kode CSS yang di atas, anda bisa mengubah tingkat pengkaburan gambar (blur) dengan cara menambah atau mengurangi nilai opacity, contoh : .linkopacity img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; }      Jika nilai opacity=30 di kurangi, misal menjadi opacity=10, maka gambar akan terlihat lebih samar, contoh : .linkopacity img { filter:alpha(opacity=10); -moz-opacity: 0.10; opacity: 0.10; border:0; }

Silahkan bereksperimen sendiri untuk mendapatkan hasil yang lebih baik. Sampai jumpa pada posting berikutnya. Don't miss it dude.


Variasi lain :
 
Foto efek blurr Dalam Binkai :

Secantik BIDADARI yang setia menemani diriku

Selamat berkreasi......Salam buat Senior Master Bloger

Leer más

Membuat Gambar Horizontal Thumbnail Dengan CSS

Dengan CSS kita akan coba mengulas tentang cara membuat gambar horizontal thumbnail dengan CSS. Apa itu horizontal Thumbnail? 

Langsung aja  kita lihat hasilnya

Bagaimana bagus tidak? kalau anda ingin tahu cara membuatnya ya musti di baca sampai akhir biar tambah seru. Begini nih caranya :

Pertama:  Buatlah terlebih dahulu gambar-gambar yang sekiranya mau di pajang di blog atau website milik anda. Misalkan gambar yang mau di pajang seperti ini :

Kedua :Uploadlah gambar-gambar tersebut ke hosting untuk menyinpan gambar, mau di blogger atau pada hosting lainnya seperti google pages, photobucket, geocities, dll.

Ketiga :simpanlah kode CSS berikut diantara style sheet css yang ada :

#latar {
padding:20px;
margin:25px;
float:left;
background:#ebe9dc;
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
}

.tabel {
padding:5px;
margin:0;
float:left;
}

.thumbnail {
position:relative;
z-index:100;
}

.thumbnail a.gambar-kecil, .thumbnail a.gambar-kecil1:visited {
display:block;
text-decoration:none;
background:transparent;
top:0;
left:0;
border:3px solid #000;
}

.thumbnail a img {
border:0;
}

.thumbnail a.gambar-kecil:hover {
text-decoration:none;
background-color:#8c97a3;
color:#000;
border:3px solid #43b843;
}

.thumbnail a .gambar-besar1 {
display:block;
position:absolute;
width:0;
height:0;
border:0;
top:0;
left:0;
}

.thumbnail a.gambar-kecil:hover .gambar-besar1 {
display:block;
position:absolute;
top:100px;
left:0px;
width:400px;
height:300px;
border:5px solid #000;
}

.thumbnail a .gambar-besar2 {
display:block;
position:absolute;
width:0;
height:0;
border:0;
top:0;
left:0;
}

.thumbnail a.gambar-kecil:hover .gambar-besar2 {
display:block;
position:absolute;
top:100px;
left:0px;
width:400px;
height:300px;
border:5px solid #000;
}

.thumbnail a .gambar-besar3 {
display:block;
position:absolute;
width:0;
height:0;
border:0;
top:0; left:0;
}

.thumbnail a.gambar-kecil:hover .gambar-besar3 {
display:block;
position:absolute;
top:100px;
left:0px;
width:400px;
height:300px;
border:5px solid #000;
}


Keempat:  Silahkan simpan kode di bawah ini di dalam body template ( mau lewat elemen halaman juga boleh ).

<div id="latar">
<span class="tabel">
<span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar1" src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" title="gambar besar" alt="gambar besar" /></a></span></span>
<span class="tabel">

<span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar2" src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a></span>
</span>

<span class="tabel">
<span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="Gambar Thumbnail"><img src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Thumbnail image" /><img class="gambar-besar2" src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" title="gambar besar" alt="gambar besar" /></a></span>
</span>
</div>

Kelima :  Di save aja biar datanya tersimpan. Trus ya udah, kan sudah klimaks, tinggal lemesnya aja deh .

Cara yang lebih detail :adalah seperti ini :

Langkah pertama :

1. Sign in di blogger dengan ID anda tentunya dong.
2. Klik menu Layout.
3. Klik menu Edit HTML.
4. Klik link Download full template, silahkan save untuk backup data (penting).
5. Copy kemudian paste kode CSS berikut di atas kode ]]></b:skin>
#latar { padding:20px; margin:25px; float:left; background:#ebe9dc; border-right: 3px solid #ccc; border-bottom: 3px solid #ccc; } .tabel { padding:5px; margin:0; float:left; } .thumbnail { position:relative; z-index:100;} .thumbnail a.gambar-kecil, .thumbnail a.gambar-kecil1:visited { display:block; width:90px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:3px solid #000; } .thumbnail a img { border:0; } .thumbnail a.gambar-kecil:hover { text-decoration:none; background-color:#8c97a3; color:#000;border:3px solid #43b843; } .thumbnail a .gambar-besar1 { display:block; position:absolute; width:0; height:0; border:0; top:0; left:0; } .thumbnail a.gambar-kecil:hover .gambar-besar1 { display:block; position:absolute; top:100px; left:0px; width:400px; height:300px; border:5px solid #000; } .thumbnail a .gambar-besar2 { display:block; position:absolute; width:0; height:0; border:0; top:0; left:0; } .thumbnail a.gambar-kecil:hover .gambar-besar2 { display:block; position:absolute; top:100px; left:0px; width:400px; height:300px; border:5px solid #000; } .thumbnail a .gambar-besar3 { display:block; position:absolute; width:0; height:0; border:0; top:0; left:0; } .thumbnail a.gambar-kecil:hover .gambar-besar3 { display:block; position:absolute; top:100px; left:0px; width:400px; height:300px; border:5px solid #000; }
6. Klik tombol SIMPAN TEMPLATE

Langkah kedua :

1. Klik menu Elemen Halaman
2. Klik tulisan Tambah sebuah Elemen Halaman
3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
4. Copy paste kode berikut ke dalam elemen yang muncul
<div id="latar"> <span class="tabel"> <span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar1" src="http://photos.friendster.com/photos/25/77/27287752/2553499759340l.jpg" title="gambar besar" alt="gambar besar" /></a></span></span> <span class="tabel"> <span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar2" src="http://pic50.picturetrail.com/VOL399/8403005/15651300/237997596.jpg" title="Gambar besar" alt="gambar besar" /></a></span> </span> <span class="tabel"> <span class="thumbnail"><a class="gambar-kecil" href="#nogo" title="thumbnail image"><img src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" width="90" height="75" title="Gambar Thumbnail" alt="Gambar Thumbnail" /><img class="gambar-besar2" src="http://photos.friendster.com/photos/25/77/27287752/26659203510677l.jpg" title="Gambar Thumbnail" alt="Gambar Thumbnail" /></a></span> </span> </div>
5. Klik tombol Simpan
6. Pindahkan elemen yang baru di buat ke tempat yang kira-kira tepat menurut anda.
7. Klik tombol Simpan yang berada di sebelah atas
8. Selesai.

Tambahan , pada kode di atas ada tertulis seperti ini :

<a class="gambar-kecil" href="#nogo" title="thumbnail image">

Tulisan #nogo tidak usah di ganti apabila gambar yang di pajang tidak ingin nge link ke manapun, namun apabila photo yang di pajang ingin dalam bentuk link, silahkan ganti tulisan #nogo dengan alamat URL,

Selamat mencoba dan berkreasi

Leer más

Tutorial Membuat Horizontal Navigasi

Akhir – akhir ini banyak sekali yang bertanya ke kang Rohman tentang bagaimana cara membuat tombol navigasi seperti HOME, RUBRIK ELEKTRONIK, FREE TEMPLATE, BLOG TUTORIAL, dan sebagainya seperti gambar ilustrasi di bawah ini :

Sebenarnya untuk membuat tombol navigasi yang seperti contoh ilustrasi di atas sudah sering kang Rohman bahas, coba saja baca postingan tentang “membuat navigasi dengan CSS”, “Navigasi dengan CSS (2)”, “Dynamic-FX Slide Menu (V 6.5)”, “Horizontal Menu J” “Horizontal Tab Menu 10”, “CSS Menu Tabs 6”. Tuh bener kan banyak banget, coba deh dibaca, mungkin tertarik dengan salah satu menu navigasi yang pernah saya posting.
Selain yang kesulitan menemukan artikel tentang cara membuat tombol navigasi, ada juga yang sudah berhasil membuatnya namun kesulitan untuk memasukan alamat link kedalam tombol-tombol tersebut. Hmmmm… berarti tutorial kang Rohman kurang jelas yah. OK deh, tutorial kali ini saya akan mencoba sejelas mungkin agar mudah untuk di pahami.
Perlu anda ketahui bahwa suatu desain template sangatlah komplek dan berbeda antara yang satu dengan yang lainnya, sehingga ketika anda membaca trik yang kang Rohman berikan anda perlu bekerja lebih ekstra untuk menyesuaikan dengan template yang anda pakai.
Sebelum anda membuat tombol navigasi, ada beberapa hal yang perlu anda persiapkan, antara lain adalah anda perlu menyiapkan keyword apa yang akan di pasang pada tombol-tombol tersebut, misalkan kang Rohman memutuskan untuk memasang keyword HOME, RUBRIK ELEKTRONIK, FREE TEMPLATE, BLOG TUTORIAL, untuk di pasang pada tombol navigasi yang kang Rohman Pakai. Persiapan yang lainnya adalah link-link  yang akan anda pasang. Link yang di pakai bisa berupa link ke alamat blog atau web lain, link ke postingan blog lain atau bisa juga berupa link kedalam posting blog anda sendiri. Sebagai contoh, karena kang Rohman mempunyai beberapa blog maka kang Rohman menginginkan agar tombol navigasi kang Rohman di isi dengan link blog tersebut, misalkan alamat blog-blog tersebut adalah sebagai berikut :
http://rubrik-elektronik.blogspot.com
http://blogtemplate4u.com
http://www.blogspottutorial.com
Bagaimana jika link yang di inginkan adalah masih dalam blog sendiri bukan nge link ke blog lain? ini tentu saja bisa. Namun ada satu kekurangan  blogger di bandingkan dengan wordpress yaitu blogger tidak bisa membuat halaman statis. Apa yang di maksud dengan halaman statis? halaman statis yang di maksud di sini adalah halaman yang tidak masuk ke dalam deretan halaman posting, contoh yaitu halaman about me atau tentang Saya jika di wordpress. Nah, blogger tidak bisa seperti itu, jika anda menginginkan suatu halaman bisa di link, maka anda harus mempostingnya. Jadi silahkan posting halaman yang anda inginkan untuk di link. Bagaimana cara mengetahui alamat link suatu postingan? caranya adalah anda harus klik judul halaman tersebut atau klik menu Read more atau baca Selengkapnya jika anda sudah memakai sistem read more, kemudian lihat ke address bar  browser anda, itulah alamat link postingan anda, copy lalu paste pada notepad agar gampang untuk di gunakan. contoh alamat posting :
http://kolom-tutorial.blogspot.com/2008/11/ikutan-kontes-menulis-kliksayacom-yuk.html
http://kolom-tutorial.blogspot.com/2008/11/solusi-mengatasi-kotak-komentar-yang.html
Ilustrasi :


Selain link posting anda juga bisa memasang link untuk label atau kategori, fungsi ini sangat berguna bagi anda yang menginginkan ketika suatu tombol navigasi diklik, maka yang terbuka adalah semua posting yang termasuk kedalam kategori tersebut. Contoh, apabila pengunjung klik tombol navigasi akan terbuka semua posting yang berkategori free template :
http://kolom-tutorial.blogspot.com/search/label/free%20template



OK, sekarang Kang Rohman anggap anda sudah mengerti langkah pertama yang harus di lakukan. Langkah selanjutnya adalah  menambahkan kode navigasi ke template anda. Contoh navigasi yang akan kang Rohman terangkan bisa anda lihat contohnya di sini!
Perlu di ingat sekali lagi bahwa desain template antara yang satu dengan yang lain sangatlah berbeda, sehingga sangat besar kemungkinan apa yang saya terangkan berbeda dengan template yang anda gunakan. Untuk itu kang Rohman menyarankan agar anda membuat satu blog percobaan, agar jika terjadi kesalahan tidak merusak blog utama anda, silahkan pilih template  white minima yang biasa.
Yuk kita mulai percobaannya ;

1. Silahkan login ke blogger dengan ID anda
2. Klik Tata Letak.
3. Klik tab Edit HTML.
   
   
4. Cari Kode kode ]]></b:skin>
   
5. Copy paste kode berikut persis di atas kode ]]></b:skin>
   

   /*  navbar
   ==================  */
   #bg_nav {
       background: #000000;
       width: 660px;
       height: 29px;
       font-size: 11px;
       font-family: Arial, Tahoma, Verdana;
       color: #FFFFFF;
       font-weight: bold;
       margin: 0px auto 0px;
       padding: 0px;
       border-top: 1px solid #333333;
       border-bottom: 1px solid #333333;
       overflow: hidden;
       }
   #bg_nav a, #bg_nav a:visited {
       color: #FFFFFF;
       font-size: 11px;
       text-decoration: none;
       text-transform: uppercase;
       padding: 0px 0px 0px 3px;
       }
   #bg_nav a:hover {
       color: #FFFFFF;
       text-decoration: underline;
       padding: 0px 0px 0px 3px;
       }
   #navleft {
       width: 440px;
       float: left;
       margin: 0px;
       padding: 0px;
       }
   #navright {
       width: 200px;
       font-size: 11px;
       float: right;
       margin: 0px;
       padding: 6px 5px 0px 0px;
       }
   #navright a img {
       border: none;
       margin: 0px;
       padding: 0px;
       }
   #nav {
       margin: 0px;
       padding: 0px;
       list-style: none;
       }
   #nav ul {
       margin: 0px;
       padding: 0px;
       list-style: none;
       }
   #nav a, #nav a:visited {
       background: #222222;
       color: #FFFFFF;
       display: block;
       font-weight: bold;
       margin: 0px;
       padding: 8px 15px 8px 15px;
       border-left: 1px solid #000000
       }
   #nav a:hover {
       background: #6e6d6d;
       color: #FFFFFF;
       margin: 0px;
       padding: 8px 15px 8px 15px;
       text-decoration: none;
       }
   #nav li {
       float: left;
       margin: 0px;
       padding: 0px;
       }
   #nav li li {
       float: left;
       margin: 0px;
       padding: 0px;
       width: 150px;
       }
   #nav li li a, #nav li li a:link, #nav li li a:visited {
       background: #333333;
       width: 160px;
       float: none;
       margin: 0px;
       padding: 7px 30px 7px 10px;
       border-bottom: 1px solid #000000;
       border-left: 1px solid #000000;
       border-right: 1px solid #000000;
       }
   #nav li li a:hover, #nav li li a:active {
       background: #666666;
       padding: 7px 30px 7px 10px;
       }
   #nav li ul {
       position: absolute;
       width: 10em;
       left: -999em;
       }
   #nav li:hover ul {
       left: auto;
       display: block;
       }
   #nav li:hover ul, #nav li.sfhover ul {
       left: auto;
       }
   

6. Tuju bagian bawah, lalu cari seperti berikut ini :

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
   </div>

7. Copy paste code berikut persis di bawah kode yang tadi :

   <div id='bg_nav'>
   <div id='navleft'>
   <div id='nav'>
   <ul>
   <li><a href='http://www.blogspottutorial.com/'>home</a></li>
   <li><a href='http://www.kangrohman.com/'>My Notes</a></li>
   <li><a href='http://template-unik.blogspot.com/'>Free Template</a></li>
   <li><a href='http://rubrik-elektronik.blogspot.com/'>Electronic Rubric </a></li>
   
   </ul>
   </div>
   </div>
   <div id='navright'>
   <form action='http://AlamatBlogAnda.blogspot.com/search' id='searchform' method='get' name='searchform'>
   <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>
       </div>
   </div><!-- akhir bg_nav -->

8. Klik tombol SIMPAN TEMPLATE.
9. Selesai.

Untuk sementara percobaan ini sudah selesai, namun tentunya jika anda menerapkan pada template anda, ada beberapa yang perlu di sesuaikan. Beberapa di antaranya yaitu lebar dari navigasi, link, keyword yang di inginkan serta yang lainnya. beberpa contoh di antaranya :

/*  navbar
==================  */
#bg_nav {
    background: #000000;
    width: 660px;
    height: 29px;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    color: #FFFFFF;
    font-weight: bold;
    margin: 0px auto 0px;
    padding: 0px;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    overflow: hidden;
    }

Anda harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template anda. misal : width:990px.

#navleft {
    width: 440px;
    float: left;
    margin: 0px;
    padding: 0px;
    }
#navright {
    width: 200px;
    font-size: 11px;
    float: right;
    margin: 0px;
    padding: 6px 5px 0px 0px;
    }

Yang inipun sama, anda harus mengubahnya sesuai dengan nilai yang pas untuk template anda.

<li><a href='http://www.blogspottutorial.com/'>home</a></li>
<li><a href='http://www.kangrohman.com/'>My Notes</a></li>
<li><a href='http://template-unik.blogspot.com/'>Free Template</a></li>
<li><a href='http://rubrik-elektronik.blogspot.com/'>Electronic Rubric </a></li>

Anda harus mengubah link yang ada dengan link yang anda inginkan, untuk masalah ini sudah di bahas pada keterangan diatas. Misalkan http://www.blogspotutorial.com di ubah menjadi http://contoh.blogspot.com. Untuk keywordnya pun anda bisa ganti sesuai dengan keinginan, misal “home” di ubah menjadi “Depan”.
Selamat mencoba!

Leer más

Embed YouTube Pilihan Kode - Autoplay

Embed YouTube Pilihan Kode - Autoplay

Berikut adalah beberapa masalah yang saya hadapi ketika embedding video YouTube di website saya.
Pertama, pengguna harus mengklik tombol "bermain" untuk video untuk bermain. Orang yang baru untuk video online mungkin tidak tahu bagaimana untuk melakukannya.

Kedua, di akhir video, "video terkait" pop up membawa pengunjung ke situs lain. Dengan kata lain, dari situs anda!

Jadi apakah Anda pernah ingin embedded video YouTube Anda untuk secara otomatis bermain (autoplay) ketika membuka  halaman Anda? Bagaimana mematikan "video terkait" fitur di akhir video?
Anda telah datang ke tempat yang tepat. Setelah banyak bereksperimen, di sini adalah semua variasi kode embed YouTube untuk mendapatkan video Anda seperti yang Anda inginkan. Hanya mengganti URL video dengan video yang ingin menanamkan:





YouTube Default Embed Code:

<embed src="http://www.youtube.com/v/EBM854BTGL0&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="344"> </ span><br />

Selamat mencoba....!

Leer más

Variasi dan efek marquee

POSTING dengan efek MARQUEE

Dulu.... pernah muncul pertanyaan bagaimana cara membuat gambar bisa bergerak/berjalan seperti sama halnya dengan text yang bergerak dengan menggunakan perintah Marquee, dan untuk pertanyaan ini sudah saya jawab disini Ada lagi pertanyaan yang muncul, pertanyaannya kira-kira seperti ini : Bagaimana cara membuat gambar yang berbingkai yang di dalamnya terdapat tulisan yang bergerak?    Pertanyaan yang cukup menantang sekaligus membingungkan. Pertanyaan ini muncul ketika saya sedang berchatting ria dengan salah seorang sobat, ketika itu saya tidak bisa menjawab langsung pertanyaan ini, dan saya meminta waktu untuk berpikir. Setelah waktu lumayan senggang barulah saya memikirkan jawabannya, dan akhirnya ketemu juga nih jawabannya. But i think, lebih baik jawaban ini saya tuliskan saja di postingan agar sobat yang lain yang sama-sama berminat dapat mengetahuinya. Teknik dasar yang saya gunakan adalah saya membuat sebuah wadah, nah wadah tersebut saya isi dengan gambar serta tulisan yang berjalan sehingga antara gambar dengan tulisan dapat bersatu dalam satu wadah (frame), kemudian wadah tersebut saya beri bingkai. Maka hasil akhir dari teknik yang saya buat ini adalah sebuah gambar yang berbingkai yang di dalamnya terdapat tulisan yang berjalan. Masih bingung? ya udah baca lagi deh kelanjutannya biar lebih mengerti. Untuk menampilkan sebuah gambar, tentu saja sobat harus mempunyai gambar yang telah di upload ke hosting tempat menyimpan gambar. Untu membuat frame gambar silahkan ikuti langkah-langkah berikut : •  untuk template klasik Sigin di blogger Klik menu Template Klik menu Edit HTML Copy seluruh kode HTML yang ada, kemudian paste pada notepad lalu save untuk backup buat jaga-jaga apabila terjadi kesalahan editting Copy paste kode berikut diatas kode <style> #gambar { background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */ height:300px; /* untuk mengatur tinggi gambar */ width:500px; /* untuk mengatur lebar gambar */ } #tulisan { font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */ font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */ color:#ffffff; /* ini kode warna untuk hurup */ } Copy paste kode berikut pada tempat yang sobat inginkan <table border="10" cellpadding="3" height="135" width="500"/> <tr> <td> <div id="gambar"> <div id="tulisan"> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> Secantik BIDADARI yang setia menemani diriku </marquee> </div> </div> </td> </tr> </table> Klik tombol Simpan Perubahan Template Selesai. •  Untuk Template Baru Sign in di blogger Klik menu Layout Klik menu Edit HTML Klik tulisan Download Full Template, silahkan save dulu untuk berjaga-jaga apabila terjadi kesalahan editting 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> #gambar { background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */ height:300px; /* untuk mengatur tinggi gambar */ width:500px; /* untuk mengatur lebar gambar */ } #tulisan { font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */ font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */ color:#ffffff; /* ini kode warna untuk hurup */ } Klik tombol SIMPAN TEMPLATE Klik menu Elemen Halaman Klik tulisan Tambah sebuah Elemen Halaman Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript Copy paste kode berikut pada elemen yang muncul <table border="10" cellpadding="3" height="135" width="500"/> <tr> <td> <div id="gambar"> <div id="tulisan"> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> Ini adalah photo putriku tersayang sedang menghirup udara pagi yang segar sambil bermain-main di lapangan tegal lega bandung. </marquee> </div> </div> </td> </tr> </table> Klik tombol SIMPAN PERUBAHAN Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop) Klik tombol SIMPAN Selesai. Pada kode-kode diatas sudah saya sertakan keterangan tentang kode-kode css yang saya pasang untuk memudahkan sobat dalam hal mengedit sesuai keinginan sobat. Selamat berkreasi ! Contoh marquee dengan background gambar Secantik BIDADARI yang setia menemani diriku Contoh marquere Background gambar dalam bingkai Tiga Dimensi Scrip marquere Background gambar dalam bingkai Tiga Dimensi   <table bgcolor="#0077ff" border="10" cellpadding="3" height="135" style="width: 195px;"><tbody> <tr><td><br /> <marquee align="center" direction="up" height="132" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="192"><br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <img height="130" src="https://lh3.googleusercontent.com/_dgj6_wF6PkM/TdCoKbGqkbE/AAAAAAAAAgE/01Q9xapXO4Q/s144-c/May16201104.jpg" width="190" /><br /> <br /> <img height="130" src="https://lh5.googleusercontent.com/_dgj6_wF6PkM/TdNCbjcjJGI/AAAAAAAAAhQ/763sKDA0QiE/s640/21.jpg" width="190" /><br /> <br /> <br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TZ5iEMOFegI/AAAAAAAAAXo/0E5FkQHNdNw/bakar%20poto.jpg" width="190" /><br /> <br /> <img height="130" src="http://i598.photobucket.com/albums/tt69/Cyber011/74276.gif" width="300" /><br /> <br /> <br /> <br /> </marquee></td></tr> </tbody></table> Contoh marquee Background gambar polos Scipt untuk marquee Background gambar polos <marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%"><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <img height="130" src="https://lh3.googleusercontent.com/_dgj6_wF6PkM/TdCoKbGqkbE/AAAAAAAAAgE/01Q9xapXO4Q/s144-c/May16201104.jpg" width="190" /><br /> <br /> <img height="130" src="https://lh5.googleusercontent.com/_dgj6_wF6PkM/TdNCbjcjJGI/AAAAAAAAAhQ/763sKDA0QiE/s640/21.jpg" width="190" /><br /> <br /> <br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TZ5iEMOFegI/AAAAAAAAAXo/0E5FkQHNdNw/bakar%20poto.jpg" width="190" /><br /> <br /> <img height="130" src="http://i598.photobucket.com/albums/tt69/Cyber011/74276.gif" width="300" /><br /> <br /> <br /> </marquee> <br /> Contoh marguere scroll Tutorial blog belajar SEO blogger dan Tips dan Trik BLOGGER Scrip untuk marguere scroll <div align="left"><span style="color: white; font-family: georgia;"><b><marquee behavior="alternate" bgcolor="RED" scrollamount="3" width="100%"><br /> Tutorial blog belajar SEO blogger dan Tips dan Trik BLOGGER<br /> <br /> <br /> <br /> </marquee></b></span></div> Contoh marquee Texs yang di dalam nya terdapat link : tutorial-membuat-horizontal navigasi Tutorial blog dan belajar SEO blogger Tips dan Trik BLOGGER Buat Kolom Dibawah Header Pada Magazine Template 2... Free HTML dan PHP Editor pasang-widget alexa di blog tips-meningkatkan-alexa rank tutorial-membuat-horizontal navigasi Scrip marquee Texs yang di dalam nya terdapat Link <marquee align="center" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%"><br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/tutorial-membuat-horizontal-navigasi.html" target="new"> tutorial-membuat-horizontal navigasi</a><br /> <br /> <br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/" target="new">Tutorial blog dan belajar SEO blogger<br /> <br /> Tips dan Trik BLOGGER<br /> </a><br /> <br /> <br /> <a href="http://draft.blogger.com/%20http://panduan-wongsalam.blogspot.com/2011/05/buat-kolom-dibawah-header-pada-magazine.html%0A%0A" target="new"> Buat Kolom Dibawah Header Pada Magazine Template 2... </a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/free-html-dan-php-editor.html" target="new"> Free HTML dan PHP Editor </a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/pasang-widget-alexa-di-blog.html" target="new"> pasang-widget alexa di blog</a><br /> <br /> <br /> <a href="http://draft.blogger.com/%20http://panduan-wongsalam.blogspot.com/2011/05/tips-meningkatkan-alexa-rank.html%20%0A" target="new">tips-meningkatkan-alexa rank</a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/tutorial-membuat-horizontal-navigasi.html" target="new"> tutorial-membuat-horizontal navigasi</a><br /> <br /> <br /> <br /> </marquee><br />

Selamat Berkreasi

 Variasi dan efek Marquee

Sering kali muncul pertanyaan bagaimana cara membuat gambar bisa bergerak/berjalan seperti sama halnya dengan text yang bergerak dengan menggunakan perintah Marquee, dan untuk pertanyaan ini sudah saya jawab disini Ada lagi pertanyaan yang muncul, pertanyaannya kira-kira seperti ini :

Bagaimana cara membuat gambar yang berbingkai yang di dalamnya terdapat tulisan yang bergerak?

   Pertanyaan yang cukup menantang sekaligus membingungkan. Pertanyaan ini muncul ketika saya sedang berchatting ria dengan salah seorang sobat, ketika itu saya tidak bisa menjawab langsung pertanyaan ini, dan saya meminta waktu untuk berpikir. Setelah waktu lumayan senggang barulah saya memikirkan jawabannya, dan akhirnya ketemu juga nih jawabannya. But i think, lebih baik jawaban ini saya tuliskan saja di postingan agar sobat yang lain yang sama-sama berminat dapat mengetahuinya.

Teknik dasar yang saya gunakan adalah saya membuat sebuah wadah, nah wadah tersebut saya isi dengan gambar serta tulisan yang berjalan sehingga antara gambar dengan tulisan dapat bersatu dalam satu wadah (frame), kemudian wadah tersebut saya beri bingkai. Maka hasil akhir dari teknik yang saya buat ini adalah sebuah gambar yang berbingkai yang di dalamnya terdapat tulisan yang berjalan. Masih bingung? ya udah baca lagi deh kelanjutannya biar lebih mengerti.

Untuk menampilkan sebuah gambar, tentu saja sobat harus mempunyai gambar yang telah di upload ke hosting tempat menyimpan gambar.

Untu membuat frame gambar silahkan ikuti langkah-langkah berikut :

•  untuk template klasik

1. Sigin di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode HTML yang ada, kemudian paste pada notepad lalu save untuk backup buat jaga-jaga apabila terjadi kesalahan editting
5. Copy paste kode berikut diatas kode <style>
#gambar { background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */ height:300px; /* untuk mengatur tinggi gambar */ width:500px; /* untuk mengatur lebar gambar */ } #tulisan { font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */ font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */ color:#ffffff; /* ini kode warna untuk hurup */ }
6. Copy paste kode berikut pada tempat yang sobat inginkan
<table border="10" cellpadding="3" height="135" width="500"/> <tr> <td> <div id="gambar"> <div id="tulisan"> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> Secantik BIDADARI yang setia menemani diriku </marquee> </div> </div> </td> </tr> </table>
7. Klik tombol Simpan Perubahan Template
8. 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>
   
   
   #gambar { background:url('http://pic50.picturetrail.com/VOL399/8403005/15651300/237997613.jpg'); /* alamat gambar yg mau ditampilkan */ height:300px; /* untuk mengatur tinggi gambar */ width:500px; /* untuk mengatur lebar gambar */ } #tulisan { font-size:300%; /* ini adalah kode untuk merubah besarnya hurup */ font-weight:normal; /* ini agar hurup yg tampil normal, jika ingin tebal ganti dengan bold */ color:#ffffff; /* ini kode warna untuk hurup */ }
   
   
   
6. Klik tombol SIMPAN TEMPLATE
7. Klik menu Elemen Halaman
8. Klik tulisan Tambah sebuah Elemen Halaman
9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
10. Copy paste kode berikut pada elemen yang muncul
<table border="10" cellpadding="3" height="135" width="500"/> <tr> <td> <div id="gambar"> <div id="tulisan"> <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="left" width:500px height:25px;> Ini adalah photo putriku tersayang sedang menghirup udara pagi yang segar sambil bermain-main di lapangan tegal lega bandung. </marquee> </div> </div> </td> </tr> </table>
11. Klik tombol SIMPAN PERUBAHAN
12. Sorot elemen yang baru di buat, klik lalu tahan dan kemudian pindahkan pada tempat yang sobat inginkan (di drag and drop)
13. Klik tombol SIMPAN
14. Selesai.

Pada kode-kode diatas sudah saya sertakan keterangan tentang kode-kode css yang saya pasang untuk memudahkan sobat dalam hal mengedit sesuai keinginan sobat.


Selamat berkreasi !

Contoh marquee dengan background gambar

Secantik BIDADARI yang setia menemani diriku

Contoh marquere Background gambar dalam bingkai Tiga Dimensi

Scrip marquere Background gambar dalam bingkai Tiga Dimensi

 
<table bgcolor="#0077ff" border="10" cellpadding="3" height="135" style="width: 195px;"><tbody> <tr><td><br /> <marquee align="center" direction="up" height="132" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="192"><br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <img height="130" src="https://lh3.googleusercontent.com/_dgj6_wF6PkM/TdCoKbGqkbE/AAAAAAAAAgE/01Q9xapXO4Q/s144-c/May16201104.jpg" width="190" /><br /> <br /> <img height="130" src="https://lh5.googleusercontent.com/_dgj6_wF6PkM/TdNCbjcjJGI/AAAAAAAAAhQ/763sKDA0QiE/s640/21.jpg" width="190" /><br /> <br /> <br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TZ5iEMOFegI/AAAAAAAAAXo/0E5FkQHNdNw/bakar%20poto.jpg" width="190" /><br /> <br /> <img height="130" src="http://i598.photobucket.com/albums/tt69/Cyber011/74276.gif" width="300" /><br /> <br /> <br /> <br /> </marquee></td></tr> </tbody></table>

Contoh marquee Background gambar polos

Scipt untuk marquee Background gambar polos

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%"><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <img height="130" src="https://lh3.googleusercontent.com/_dgj6_wF6PkM/TdCoKbGqkbE/AAAAAAAAAgE/01Q9xapXO4Q/s144-c/May16201104.jpg" width="190" /><br /> <br /> <img height="130" src="https://lh5.googleusercontent.com/_dgj6_wF6PkM/TdNCbjcjJGI/AAAAAAAAAhQ/763sKDA0QiE/s640/21.jpg" width="190" /><br /> <br /> <br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TdCtIJZbWnI/AAAAAAAAAgM/P96mpmGd6rc/Picture%20C30%20237.gif" width="190" /><br /> <br /> <img height="130" src="https://lh4.googleusercontent.com/_dgj6_wF6PkM/TZ5iEMOFegI/AAAAAAAAAXo/0E5FkQHNdNw/bakar%20poto.jpg" width="190" /><br /> <br /> <img height="130" src="http://i598.photobucket.com/albums/tt69/Cyber011/74276.gif" width="300" /><br /> <br /> <br /> </marquee> <br />

Contoh marguee scroll

Tutorial blog belajar SEO blogger dan Tips dan Trik BLOGGER

Scrip untuk marguere scroll

<div align="left"><span style="color: white; font-family: georgia;"><b><marquee behavior="alternate" bgcolor="RED" scrollamount="3" width="100%"><br /> Tutorial blog belajar SEO blogger dan Tips dan Trik BLOGGER<br /> <br /> <br /> <br /> </marquee></b></span></div>

Contoh marquee Texs yang di dalam nya terdapat link :

tutorial-membuat-horizontal navigasi




Tutorial blog dan belajar SEO blogger

Tips dan Trik BLOGGER



Buat Kolom Dibawah Header Pada Magazine Template 2...


Free HTML dan PHP Editor


pasang-widget alexa di blog


tips-meningkatkan-alexa rank


tutorial-membuat-horizontal navigasi

Scrip marquee Texs yang di dalam nya terdapat Link

<marquee align="center" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%"><br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/tutorial-membuat-horizontal-navigasi.html" target="new"> tutorial-membuat-horizontal navigasi</a><br /> <br /> <br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/" target="new">Tutorial blog dan belajar SEO blogger<br /> <br /> Tips dan Trik BLOGGER<br /> </a><br /> <br /> <br /> <a href="http://draft.blogger.com/%20http://panduan-wongsalam.blogspot.com/2011/05/buat-kolom-dibawah-header-pada-magazine.html%0A%0A" target="new"> Buat Kolom Dibawah Header Pada Magazine Template 2... </a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/free-html-dan-php-editor.html" target="new"> Free HTML dan PHP Editor </a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/pasang-widget-alexa-di-blog.html" target="new"> pasang-widget alexa di blog</a><br /> <br /> <br /> <a href="http://draft.blogger.com/%20http://panduan-wongsalam.blogspot.com/2011/05/tips-meningkatkan-alexa-rank.html%20%0A" target="new">tips-meningkatkan-alexa rank</a><br /> <br /> <br /> <a href="http://panduan-wongsalam.blogspot.com/2011/05/tutorial-membuat-horizontal-navigasi.html" target="new"> tutorial-membuat-horizontal navigasi</a><br /> <br /> <br /> <br /> </marquee><br />

Selamat mencoba ....! 

jangan lupa kasih Komentar Bro......Salam Buat Senior Master Blogger

Leer más