Welcome to kocomon.blogspot.com
go to my homepage
Go to homepage

Selasa, 20 September 2011

MEMBUAT POSTER BATMAN "DARK KNIGHT"


Seperti yang anda lihat pada gambar diatas, kali ini saya akan menunjukan kepada anda bagaimana cara membuat Poster film Batman the Dark Knight, tehnik-tehnik dalam tutorial ini cukup sederhana dan sangat mudah. Saya tidak akan membuat poster ini seperti bentuk aslinya, karna saya tahu itu tidak mungkin, karena saya percaya Poster yang asli dibuat dalam bentuk 3D.

Jadi bersiaplah, karna dalam tutorial kali ini membutuhkan waktu beberapa jam, jadi buatlah senyaman mungkin dudukan anda....

Langkah 1
Buka Photoshop, lalu buat dokumen baru. disini saya menggunakan ukuran (2550 x 3500 pixels). lalu warnai baackground dengan warna abu-abu (#b0adad).


Langkah 2
Langkah selanjutnya adalah, carilah Logo Batman, anda bisa mendapatkannya di Mbah Google. Jka sudah, tempatkan posisi logo batman tersebut seperti gambar di bawah ini. Untuk urusan warna logo itu gak terlalu penting.






langkah 3
Seperti yang saya katakan di awal tutorial ini adalah kolase foto-foto besar, dimana hal yang penting adalah menemukan gambar-gambar yang tepat. Dalam tutorial ini kita harus menempatkan beberapa bangunan. Anda dapat menemuknanya di Shutterstock dan anda bisa cek dibawah ini.



http://www.shutterstock.com/pic-20863036/stock-photo-modern-buildings-in...
http://www.shutterstock.com/pic-346534/stock-photo-three-corporate-build...
http://www.shutterstock.com/pic-2286315/stock-photo-corporate-buildings-...
http://www.shutterstock.com/pic-80798674/stock-photo-corporate-buildings...



Langkah 4
Mulailah menempatkan Gambar bangunan seperti gambar dibawah ini. gunakan logo batman sebagai refrensi ukuran dan posisi gedung.



Langkah 5
Buatlah persis seperti gambar dibawah ini.




Langkah 6
Dalam rangka untuk membuat bangunan ini hancur seperti pada poster asli,  disini saya menggunakan beberapa gambar dari Shutterstock yang sudah saya download. Anda dapat menemukannya disini  http://www.shutterstock.com/pic-73243228/stock-photo-abstract-character-...



Langkah 7
Hanya dengan menyalin beberapa potongan pada gambar yang sudah anda download tadi, anda dapat anda dapat mengubah, memutar atu menjadikannya sebuah Brush. karna saya malas, jadi saya hanya akan meng Copy paste saja.



Langkah 8
Agar gambar lebih realisis, anda perlu menambahkan beberapa efek Blurr, klik Filter>Blurr>Motion Blurr.



Langkah 9
Disini gambar akan terlihat hancur.




Langkah 10
Carilah gamabar tekstur beton, lalu tempatkan pada posisi paling atas dari semua layer. lalu ubah Blend Mode'nya menjadi Multiply.





Langkah 11
Pilih semua layer, kecuali layer Background, lalu Klik Layer>Group Layers. Setelah itu gunakan Magic Wand Tool pada simbol Batman.



Langkah 12
Setelah itu Klik Layer>Layer Mask>Hide Selection, sekarang gambar pada simbol batman tadi sudah menghilang kan..?. Ini terlihat bagus, tapi terlalu sempurna. Jadi sekarang kita gunakan Brush (B) dan pilih Grunge Brush untuk menciiptakan efek hancur pada bangunan. idenya disini adalah untuk mengancurkan tepi dari simbol batman. Gunakan gambar dibawah sebagai refrensi.



Langkah 13
Buatlah layer baru, tempatkan layer ini paling atas dari layer sebelumnya. Dan dengan menggunakan Brush yang halus berwarna hitam, warnai bagian pinggir layer seperti gambar dibawah.



Langkah 14
Menurut saya bangunan yang hancur ini masih terlalu bersih, jadi saya tambahkan lagi beberap serpihan dan juga cat beberapa jendela menggunakan warna putih dan hitam dengan menggunaka Brush Grunge. Idenya adalah membuat bangunan benar benar hancur. Rincian lain adalah ketika Anda membuat tepi simbol batman kurang seragam, cobalah untuk membuat bangunan itu benar-benar jatuh pada bagian tertentu. Gunakan gambar dibawah sebagai refrensi.



Langkah 15
Jika sudah, sekarang waktunya urusan warna. Klik Layer > New Adjustment Layer > Hue and Saruation. Ubah Hue menjadi 196, Saturation menjadi 8, dan Lightness menjadi -7. Jangan lupa centang Colorize'nya






Langkah 16
Jika sudah, Klik Layer>New Adjustment Layer> Level. Gunakan gambar dibawah sebagai refrensi. Tips: kedua lapisan penyesuaian harus di atas lapisan lainya.






Langkah 17
Inilah hasil sementara






Langkah 18
Untuk lebih Real'nya kita tambahkan sebuah awan buatan. carilah gambar awan. Lalu ubah menjadi Hitam putih dengan cara Klik Layer>Adjustment>Desature. lalu ubah Blend Mode'nya menjadi Multiply. Tepatkan gambar  ini di belakang layer bangunan. 






Langkah 19
Buatlah Layer baru, dan tempatkan di blakan layer bangunan. Dan dengan menggunakan Brush kecil, gambar rangka bangunan seperti gambar dibawah.






Langkah 20
Jika anda melihat gambar poster asli DARK KNIGHT disitu terdapat gambar batu yang jatuh dari langit. Jadi sekarang kita tambahkan beberapa batu juga. Saya menggunakan gambar lain dari Shutterstock untuk referensi, Anda dapat menemukannya di sini  http://www.shutterstock.com/pic-24964786/stock-photo-zoom-of-gravel-gray ....  Saya pilih salah satu gambar batu lalu saya copy dan saya paste kedalam layer.






Langkah 21
Paste gambar batu yang anda pilih, Putar, Kecilkan atau besar'kan gambar batu hingga menyerupai gambar dibawah ini. 






Langkah 22
Jika sudah, Klik Layer>Layer Stye>Pattern Overlay. Ganti blend modenya menjadi Multiply. Dan untuk Pattern'nya pilih Black Marble.






Langkah 23
Masih di Lyer Style, Pilih Color Overlay, Ubah Blend Modenya menjadi Multiply. dan untuk warna ubah dengan warna abu-abu.






Langkah 24
Klik inner Shadow, Aturlah seperti gambar dibawah..




Langkah 25
Inilah gambar batu dengan efek yang barusan kita buat. Perhatikan bahwa lapisan penyesuaian berada diatas lapisan batu juga. Hal lain yang penting di sini adalah untuk menerapkan blur (Filter> Blur> Motion Blur) ke bebatuan seperti yang kita lakukan untuk lapisan lain dalam langkah 7-9. 



Langkah 26
Tambahkan lebih banya gambar batu dalam desai anda. Ingatlah sudut Inner Shadow akan bervariasi sesuai lokasi batu.






Langkah 27
Langkah terakhir.... 
Pilih semua Layer lalu duplikatkan lalu buatlah menjadi 1 layer dengan menggunakan Merge Layer. Lalu ubah blend mde menjadi Soft light, Dan ganti Opacity menjadi 50%. Duplikat lagi layer tadi, Lalu ubah blend modenya menjadi Screen dan ganti Opacitynya menjadi 100%. dan Klik Blurr>Motion Blurr.Buat radiusnya menjadi 20%.






Hasil Akhir



Gimana...?? rada rumit ya.... Itu mah wajar klo bwat pemula,, tp klo sering2 latihan bakalan bisa koq....


Sumber: Abduzeedo
Penasaran..?? Lanjooot disini bacanya.......

Minggu, 18 September 2011

Membuat Image Slider Carousel di Blog

Kali ini saya bikin postingan Keren neh... "Bikin Image Slider". Image slider adalah bla.. bla.. blah... males njelasinnya,, kalo pengen tau apa itu Image slidder coba deh lihat di halaman blog saya,, keren kan.?... tenang aja tu gambarnya bisa diubah sesuka otak anda,, saya dapet Trik ini dari http://lorongilmu.blogspot.com/ 
Langsung aja deh.....


Langkah 1
Login ke Blogger 


Langkah 2
Klik Rancangan > Elemen Laman > Tambah Gaget


Langkah 3
Copy Paste ko dibawah ini.:

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUJ6fyvY2lu-HUPoqYEFGa4m1GCR8LlHLoBYrzYsqG2xVm3d0liE2l80a8w9Om1gCRDJh146nCnp2-A3VkKxmuumGLRDcgfG98KmBqXcQVi-Nbsk8E-NNPcCtgbdJKArUmglhY-GSGj-Oq/', 30, 60 ], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHEIJyaWbYluX-hUrS4thg7UlqaHoexoN_xXWThw5D_cdXFV7EC_-H96ZzbMgT8Xnns4u4pT3eP2vM26NSeXtJ7XpYyCO1dogthhaMrNCKUhPqxVWaekRafNinISwAaELPQO8-8ncm4h39/', -55, 60 ]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">


<!-- Ganti link dengan link kalian -->

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-wireless-kungfu-networking.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ08op2I_n2o2yPQFVmVenpioz0FVkAk7-A0RVx-viAdlv5wtizajRf_D7rOIMpxY4Fl5XVsZ4Z0mmvGusZIZPb-0vqD3yz5o-TnHQnE5NsaqunPaYgxYK5tyFAriKghlQMqzb4N6RdyE/s1600/1.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-computer-worm-1.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF_GBiv9_iRQEvi3Qcszds-tm8nQ-rYZc0emXvK9faeM5nkvSK9LC0hfjSZcltNuV6Myv38Xn_eHay7AgYjt2Tv6uU5DExFNc-K4MuQCN1hnZimGZ5cJ-uX5oghbmgCpVJca9TLe-tfzY/s320/2.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-computer-worm-2.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS4ietPpgBPKRE9m3KsXlPJCoQbggR_9nLkwLkRdRk7xSxQiQtqri14ZoheObl8h49AaauNk2EgFhEppHRKGQLKJBt6jYwGEnZUelIC4Jwak1BwloyXEtaryBCdhR37Bnz_iYBIaj7JaQ/s320/3.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-pembobol-kartu-kredit.html">
<img src="http://3.bp.blogspot.com/-BNod3fYuxhk/TezHfbaFRtI/AAAAAAAAAS0/kGF49ZtSjkU/s320/4.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-panduan-lengkap-memakai.html">
<img src="http://3.bp.blogspot.com/-BzeCtYoUfhE/TezWWgKA3HI/AAAAAAAAATA/LfY0cT86OO8/s320/6.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-chip-spesial-networking.html">
<img src="http://1.bp.blogspot.com/-CJtJtGc1Sfs/TezdIhq-ScI/AAAAAAAAATE/NuiexuEifmg/s320/7.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-tutorial-windows-server-2003.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrsPWUhghKVmld2plnuNFCXAQYayWDvoymd1ISdnio4KOudTLLR0JZmNZxiI9lYfk7CnA7QbspCvpnF1ZO4Tn6AeGxwqxrLHU8meTHfce117jqDlbuXKcTCQjxQbZ64OoWzi4ARaOYSv0/s1600/8.jpeg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-beginning-microsoft-visual.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-eCJ5vOM-qMc7-mIDeH_ybPdJfzgRj51TBBBucSvZWzRrg_g-IUKGVmNtfLX3mXAPLhW3iORrE0azXzDY6ZevSMM3REpxNe6fpRJ42hDx5xaeIBfh0CD9_LuoTkvy_VCBt1lN67bq8bI/s1600/8.jpg" width="100px" height="135px" /></a>
</div>


</div>
</div>


Langkah 4
Klik Simpan..  


Langkah 5
Klik edit HTML, Lalu cari kode ]]></b:skin>, Lalu tambahkan kode dibawah ini tepat diatas kode  ]]></b:skin> :


.carousel{
         float:left;
         margin: 0;
         padding:0px;
         }

 .carousel .widget {
         width: 720px;
         background:#c4d5ec;
         margin: 0;
         padding:0;
 }

 .carousel h2{
         display:none;
         }
 .stepcarousel{
         position: relative;
         overflow: scroll;
         width: 765px;
         height: 160px;
 }

 .stepcarousel .belt{
        position: absolute;
        left: 0;
        top: 0;
 }

 .stepcarousel .panel{
      float: left;
      overflow: hidden;
      margin: 5px 20px 5px 0px;
      width: 140px;
 }

 .stepcarousel .panel img{
      float: left;
      background:#940f04;
      margin: 5px;
      padding:5px;
      border:1px solid #ccc;
 }

 .stepcarousel .panel img:hover{
      background:#ffffff;
      }
.quickedit{display:none}

#under_header{
opacity: 100;

 }


Langkah 6
Jika sudah,  Copy kode dibawah ini tepat di bawah kode ]]></b:skin>


<script src='http://lorong-ilmu.googlecode.com/files/gallery1.js' type='text/javascript'/>
<script src='http://lorong-ilmu.googlecode.com/files/gallery2.js' type='text/javascript'/>

Langkah 7
Klik save. dan lihat hasilnya.... :)


Keterangan:
Ganti kode berwarna Merah dengan link gambar anda
Dan ganti kode berwana Biru dengan Link yang bersangkutan dengan gambar




Selamat mencoba.... :)
Penasaran..?? Lanjooot disini bacanya.......

Sabtu, 17 September 2011

Membuat Read More Otomatis di Blog

Postingan kali ini saya bakalan kasih tau anda bagaimana cara "Membuat Read More Otomatis di Blog", apa bedanya ama read more otomatis biasa..?? ini yang keren... kita ga perlu lagi ngedit HTML postingan kita lagi, ga perlu repot-repot ngetik bahasa HTML yang  rumit, dan denga adanya readmore otomatis ini postingan blog kita bakalan lebih rapi.
Otree... lanjut menn....

Langkah 1.
Login ke blogger

Langkah 2.
Pilih Rancangan > Edit HTML.

Langnkah 3.
Jangan lupa centang kotak Expand Widget Template.

Langkah 4.
Cari kode </head>, lebih gampangnya cari kode klik Ctrl+F.
Trus paste kode dibawah ini di bawah kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/> 

Langkah 5.
Trus cari kode berikut <data:post.body/> atau <p><data:post.body/></p> 

Langkah 6.
ganti kode diatas menjadi kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 


 Keterangan:
Kode berwarna merah dapat anda ganti sesuka anda
- Summary noimg 430 = tinggi artikel terpotong tanpa Gambar
- Summar img 430 = tinggi artikel terpotong dengan gambar
- Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

Langkah 7.
Ini langkah yang paling simple, cuman klik SAVE.
selese dah.....

coba cek blog anda sekarang,, ada yang berubah..??

Selamat testing testing ya....  :)
Penasaran..?? Lanjooot disini bacanya.......

Jumat, 16 September 2011

Cara Membuat Buku Tamu Bergeser

Loha... pa kabar menn...? dah lama nih ga posting blog,,,
Kali ini saya buat postingan blog khusus untuk mempercantik blog aja, sekedar membuat buku tamu kita menjadi lebiih hemat tempat,. disini saya akan kasih tau anda bagaimana membuat buku tamu kita bertengger di samping blog kita.


Langsung aja menn:
1. Login ke Blogger
2. Klik Rancangan
3. Disitu ada tulusan "Tambah Gaget" klik aja.
4. Trus pilih HTML.
5. Lalu pastekan kode berikut:
  <style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:210px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i275.photobucket.com/albums/jj300/H4L4LYI/cepotgift.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:#999999;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=370377&amp;boxtag=antrop&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=370377&amp;boxtag=antrop&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->

<font size="2">
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</font></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>



6. Setelah itu Simpan.
Oh ya, hampir aja lupa,, kode yang berwarna merah tu ganti aja ama kode HTML bukku tamu milik anda. Kalo belon ngerti caranya buat buku tamu cari aja di Mbah Google banyak koq...


Selamat mencoba menn....  :)
Penasaran..?? Lanjooot disini bacanya.......

Rabu, 10 Agustus 2011

MEMBUAT READMORE PADA BLOG

Dalam beberapa postingan blog, sering kita mendapati postingan blog tersebut sangat panjang dan membuat tampilan blog tersebut menjadi tidak rapi kitapun jadi malas membacanya. Maka di postingan kali ini saya akan kasih tau, gimana caranya membuat blog kita menjadi rapi dan tidak menghabiskan banyak halaman...


Langkah 1:
- login ke Blogger,
- Lalu klik Rancangan
- Pilih Edit HTML
- Jangan lupa Klik Expand widget'nya

Langkah 2:
- Cari kode ]]></b:skin>
- Setelah itu Copy kode dibawah ini setelah kode ]]></b:skin>

<style>
<b:if cond='data:blog.pageType == "item"'> 
   span.fullpost {display:inline;}
<b:else/>
   span.fullpost {display:none;} 
</b:if>
</style>
 

- Selanjutnya agar postingan terpotong cari kode ini

<p><data:post.body/></p>

- Tambahkan kode dibawah ini dibawah persis kode <p><data:post.body/></p>

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
 
 
- Lalu Save.

Langkah 3:
- Klik Setelan pada menu Dasbor,
- Klik Format, lalu isikan kode di bawah ini kedalam kotak Template Entry

<span class="fullpost">  </span>

- Simpan setelan

Jika anda membuat postingan baru akan muncul kode   

<div dir="ltr" style="text-align: left;" trbidi="on"> 


<span class="fullpost">  </span></div>

- Nah disetiap anda akan membuat postingan baru, pastikan isi postingan anda berada antara kode berwarna merah dan biru.
- Dan sisa postingan pastikan berada antara kode </span> ISIKAN SISA POSTINGAN ANDA DISINI</div>

Masih binggung.......
Saya beri Contoh :


<div dir="ltr" style="text-align: left;" trbidi="on"> 

ISIKAN BEBERAPA POSTINGAN ANDA DISINI. NANTINYA POSTINGAN INI YANG AKAN TAMPIL DI DEPAN BLOG ANDA

<span class="fullpost"> LALU KETIK SISA POSTINGAN ANDA DI SINI. NANTINYA POSTINGAN INI AKAN TERSEMBUNYI  </span></div>


Hasilnya akan seperti ini:


ISIKAN BEBERAPA POSTINGAN ANDA DISINI. NANTINYA POSTINGAN INI YANG AKAN TAMPIL DI DEPAN BLOG ANDA..... READ MORE... 

Gimana gampangkan.....

Selamat mencoba,, jangan lupa komentar ya... :) 

Penasaran..?? Lanjooot disini bacanya.......

Senin, 08 Agustus 2011

Membuat Teks Berjalan (MARQUEE)

Apa itu marquee.?? marquee adalah suatu tag HTML unutk membuat sebuah teks atau gambar bergerak. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.

Saya kasih contoh:
1. Ini adalah marquee dari kiri ke kanan atau sebaliknya:
<marquee direction="left">ini adalah marquee dari kiri ke kanan</marquee>
Contoh:
ini adalah marquee dari kiri ke kanan

 
<marquee direction="right">ini adalah marquee dari kanan ke kiri</marquee>
Contoh:
ini adalah marquee dari kanan ke kiri


Keterangan:
"direction" merupakan kode yang berguna untuk mengtur kemana arah teks berjalan, dan anda dapat mengisinya dengan Up, Left, Right, Down

2. Marquee dengan kecepatan tertentu
<marquee scrollamout="9">ini adalah marque dengan kecepatan tertentu</marquee>
Contoh:
ini adalah marquee dengan kecepatan tertentu

Keterangan:
 "Scrollamout" merupakan kode yang berguna untuk mengatur kecepatan anda bisa mengganti angka "9" dengan angka yang anda inginkan, yang dengan catatan semakin besar angka yang anda masukan semakin cepat teks itu berjalan.

3. Marquee teks dengan menambahkan background
<marquee bgcolor="#000000">marquee teks dengan gambar background</marquee>
Contoh:
marquee teks dengan gambar background

Keterangan:
Anda bisa mengganti angka pada"Bgcolor" dengan angka yang anda inginkan.

4. Efek Marquee berjalan memantul
<marquee behavior="alternate">teks ini berjalan memantul</marquee>
Contoh:
teks ini berjalan memantul

5. Marquee hover (mouse over)
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" bgcolor="#000000">coba anda geser panah mouse anda ke dalam teks ini</marquee>
Contoh:
coba anda geser panah mouse anda ke dalam teks ini

Keterangan:
anda bisa menambahkan sebuah Link dalam marquee ini dengan cara menambahkan beberapa tag HTML.

Contoh:
ini adalah tag untuk menambahkan gambar pada marquee anda
<marquee><img src="http://alamat Url gambar anda"/></marquee>

ini contoh tag untuk menambahkan sebuah link:
<marquee onmouseover="this.stop()" onmouseover="this.start()" scrollamout="9"><a href="http://ganti dengan link yang anda inginkan</a>Nama Link Anda</marquee>

Yahhh,, sepertinya hanya ini yang saya ketahui tentang "Marquee",, jika anda punya tag marquee yang lain anda bisa share ke blog ini...
Selamat mencoba... :)

Oh ya,, jangan lupa koment ya.... ^^a
Penasaran..?? Lanjooot disini bacanya.......
Related Posts Plugin for WordPress, Blogger...

Sang Blogger

Protected by Copyscape DMCA Copyright Search

  © Free Inspiration Blog My Blog by RAInDY Blog

Back to TOP