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
(Arahkan kursor anda ke gambar di bawah)
Ikuti langkah pembuatan mengubah kursor ketika diarahkan ke gambar :
- Log in ke blog anda
- Posting >> New post
- Upload gambar melalui add image (Seperti biasa)
- Setelah gambar terupload, berikutnya click tab "Edit Html"
- 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>
!! Yang harus diubah/diedit :
Mudeng kan? Nah, jadi caranya hanya tinggal mengganti kode "Cursor". Kalau sudah mengerti, teh dan camilannya udah habis kan? Langsung aja praktekkan. Selamat mencoba.
Por: wongsalam | En: Mengubah Kursor ketika Diarahkan ke Gambar | 0 komentar
Membuat Link ke Halaman Atas / Top Page
- Log in ke akun blogger anda.
- Cari kode ]]></b:skin>
- 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. - Cari kode </body>
- Copy kode di bawah ini dan paste di atas kode </body>
<div id="trik_pojok">
<a href='#' onclick='new Element.scrollTo('top'); 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. - Save
Por: wongsalam | En: Cara Membuat Link ke Halaman Atas / Top Page | 0 komentar
Mengenal perintah IFRAME
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.
contoh kode yang di pasang seperti ini :
contoh kode yang di pasang seperti ini :
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.
contoh kode yang di pasang seperti ini :
Por: wongsalam | En: Mengenal perintah IFRAME | 0 komentar
Membuat foto animasi
Membuat foto animasi
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 :
- Silahkan buka situs www.slide.com
- Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut
- Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)
- Masukan alamat email sobat pada kolom yang disediakan. isi juga password yang diinginkan
- Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account sobat
- Langkah selanjutnya adalah melakukan pembuatan animasi
- Klik style, untuk memilih gaya dari animasi
- klik skin, untuk memilih bingkai animasi
- klik Size untuk memilih ukuran
- Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan
- klik tombol Upload untuk melakukan proses upload foto
- Jika proses upload selesai, klik tombolSave
- Copy kode HTML yang di berikan, lalu paste pada program notepad
- Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser
- 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
Por: wongsalam | En: Membuat foto animasi | 0 komentar
Cara Membuat Efek Photo Samar (blur)
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
- Silahkan login ke blogger dengan ID anda.
- Klik Tata letak.
- Klik tab Edit HTML.
- Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).
- Silahkan cari kode berikut : ]]></b:skin>
- Copy paste kode berikut di atas kode ]]></b:skin>
- Klik tombol Simpan Template.
- 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 { Jika nilai opacity=30 di kurangi, misal menjadi opacity=10, maka gambar akan terlihat lebih samar, contoh : |
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 :
Por: wongsalam | En: Cara Membuat Efek Photo Samar (blur) | 0 komentar
Membuat Gambar Horizontal Thumbnail Dengan CSS
Membuat Gambar Horizontal Thumbnail Dengan CSS
#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;
}
<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>
Cara yang lebih detail :adalah seperti ini :
Langkah pertama :
- Sign in di blogger dengan ID anda tentunya dong.
- Klik menu Layout.
- Klik menu Edit HTML.
- Klik link Download full template, silahkan save untuk backup data (penting).
- Copy kemudian paste kode CSS berikut di atas kode ]]></b:skin>
Langkah kedua :
- Klik menu Elemen Halaman
- Klik tulisan Tambah sebuah Elemen Halaman
- Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML
- Copy paste kode berikut ke dalam elemen yang muncul
<a class="gambar-kecil" href="#nogo" title="thumbnail image">
Selamat mencoba dan berkreasi
Por: wongsalam | En: Membuat Gambar Horizontal Thumbnail Dengan CSS | 0 komentar
Tutorial Membuat Horizontal Navigasi
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 ;
- Silahkan login ke blogger dengan ID anda
- Klik Tata Letak.
- Klik tab Edit HTML.
- Cari Kode kode ]]></b:skin>
- Copy paste kode berikut persis di atas kode ]]></b:skin>
================== */
#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;
}
- Tuju bagian bawah, lalu cari seperti berikut ini :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div> - Copy paste code berikut persis di bawah kode yang tadi :
<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 --> - Klik tombol SIMPAN TEMPLATE.
- 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 :
Anda harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template anda. misal : width:990px./* 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;
}
#navleft {Yang inipun sama, anda harus mengubahnya sesuai dengan nilai yang pas untuk template anda.
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
<li><a href='http://www.blogspottutorial.com/'>home</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”.
<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>
Selamat mencoba!
Por: wongsalam | En: Tutorial Membuat Horizontal Navigasi | 0 komentar
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:
Selamat mencoba....!
Por: wongsalam | En: Embed YouTube Pilihan Kode - Autoplay | 0 komentar
Variasi dan efek marquee
Variasi dan efek Marquee
• 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>
• 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>
- 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
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 !
Secantik BIDADARI yang setia menemani diriku |
Contoh marquere Background gambar dalam bingkai Tiga Dimensi
Contoh marquee Background gambar polos
Tutorial blog belajar SEO blogger dan Tips dan Trik BLOGGER
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
Por: wongsalam | En: Variasi dan efek marquee | 0 komentar