Cara Membuat Menu Gaya Televisi

Banyak variasi menu, tapi variasi yang ini unik. Unik karena kita bisa membuat menu untuk anchor link ke halaman lain dengan tampilan tv. List item dari link kita buat dengan angka 1 sampai 5, tapi jika ingin lebih, tentu saja masih dimungkinkan. Ketika link dengan gaya channel tivi diletakkan kursor maka otomatis pada gambar tivi berganti, layaknya sebuah tivi yang diganti channel.

Nah.. Banyak kemungkinan yang bisa dibuat dengan menu yang satu ini agar lebih asyik. Bayangkan jika foto yang kita jadikan menu adalah sebuah gambar dalam bentuk gif, gambar yang bergerak, maka menu channel tivi benar-benar seperti tivi sesungguhnya.

Contoh yang kita gunakan adalah foto dengan format jpg, jadi tivinya seperti apa anda saksikan, tapi saya berniat akan membuat foto dalam bentuk gif biar lebih seru. Karena ini hanya sebuah contoh, maka menu css dalam bentuk seperti tivi hanyalan versi sample aja.

Menu TV

channel

Menggunakan menu dengan kode CSS selain sangat cepat loading, juga bebas dari intervensi script lain, tidak bisa disusupi script yang tidak diinginkan, ini karena kode CSS mandiri dan hanya berinteraksi dengan browser. Jadi jangan takut, kode CSS itu semuanya bebas virus.

Pasang Menu CSS gaya tivi ini ke blog anda. Caranya:

Pertama:Kopi kode CSS di bawah ini dan paste ke dalam template blog anda. Login ke blog, lalu >> Element Halaman >> Edit HTML. Lalu tempatkan semua kode di bawah ini sebelum kode /skin.

#bulunggadung {width:224px; height:220px; margin:100px auto; position:relative;}

#rimbang {width:200px; height:120px; border-top:4px solid #cecece; border-right:12px solid #9b9b9b; border-bottom:6px solid #969696; border-left:12px solid #cacaca; background:#e8e8e8; position:relative;}

#siala {width:120px; height:2px; border-left:10px solid #efefef; border-right:10px solid #efefef; background:#adadad; position:absolute; top:-3px; left:30px; overflow:hidden;}

#alas {width:50px; height:3px; border-left:45px solid #ddd; border-right:45px solid #ddd; background:#aaa; position:absolute; bottom:-4px; left:30px; overflow:hidden;}
#sipode {width:100px; height:6px; border-bottom:6px solid #969696; border-right:1px solid #9b9b9b; border-left:1px solid #9b9b9b; background:#ddd; position:absolute; bottom:-30px; left:48px; overflow:hidden;}

#arambir {width:50px; height:15px; background:#888; position:absolute; bottom:-21px; left:75px; overflow:hidden;}

#lasiak {width:170px; height:100px; border:4px solid #666; background:#08c; position:absolute; top:6px; left:10px; overflow:hidden; text-align:center; line-height:100px; color:#ff0}

#sira {position:absolute; top:170px; left:50px; width:200px; height:100px; font-family:"courier new", monospace;}

#sira:hover {background:transparent;}

#sira a:visited {color:#fff; text-decoration:none; font-size:14px; background:#000;}

#sira a {color:#fff; text-decoration:none; font-size:14px; background:#000;}

#sira a span {display:none; width:0; height:0; position:absolute; border:0;}

#sira a div {display:none;}

#sira a:hover {color:#fff; background:#c00; text-decoration:none;}

#sira a img {display:block; position:absolute; top:-84px; left:38px; width:0; height:0; border:0;}

#sira a:hover img {display:block; position:absolute; top:-155px; left:-24px; width:170px; height:100px; border:0;}

#sira a:hover .line {display:block; position:absolute; top:25px; left:0px; width:15px; height:2px; overflow:hidden; background:#c00;}

#sira a:hover .line1 {display:block; position:absolute; top:25px; left:0px; width:35px; height:2px; overflow:hidden; background:#c00;}

#sira a:hover .line2 {display:block; position:absolute; top:25px; left:0px; width:60px; height:2px; overflow:hidden; background:#c00;}

#sira a:hover .line3 {display:block; position:absolute; top:25px; left:0px; width:85px; height:2px; overflow:hidden; background:#c00;}

#sira a:hover .line4 {display:block; position:absolute; top:25px; left:0px; width:110px; height:2px; overflow:hidden; background:#c00;}

#sira a:hover .point {display:block; position:absolute; top:20px; left:5px; width:0; height:0; overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}

#sira a:hover .point1 {display:block; position:absolute; top:20px; left:25px; width:0; height:0; overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}

#sira a:hover .point2 {display:block; position:absolute; top:20px; left:50px; width:0; height:0; overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}

#sira a:hover .point3 {display:block; position:absolute; top:20px; left:75px; width:0; height:0; overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}

#sira a:hover .point4 {display:block; position:absolute; top:20px; left:100px; width:0; height:0; overflow:hidden; border-left:5px solid #fff; border-right:5px solid #fff; border-bottom:5px solid #f00;}

.sipulut {position:absolute;top:200px; left:52px; font-size:14px; font-weight:bold; color:#000; letter-spacing:10px;}

Kedua : Kopi kode di bawah ini kedalam sidebar. Klik >> Element Halaman (Layout) >> Lalu Add Widget Html/Javascript >> Paste semua kode di bawah ini.

<div id="bulunggadung">

<div id="rimbang">

<div id="siala"></div>

<div id="alas"></div>

<div id="sipode"></div>

<div id="arambir"></div>

<div id="lasiak">Menu TV</div>

</div>

<div id="sira">

<a href="/"> 1 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu_6cK4uvu85irCKtkjebWRY3yZdW1DMeVcnFqS71kx3puiQHzN9-EIcnoxJUehAXPij1B9MGlMm7gnZr4p272xC8urZhrGkwJY4HENl1Wy0z3gt_e2Kj5g7uVU9_ErBmERWsKMkcJvAE/s400/men1.jpg" alt=""><span class="line">.</span><span class="point">.</span></a><a href="/"> 2 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSSuOzsElcgeCmVivg2R0cCVuxsHBJv_94rz6so85v_uKAZks8FVunz8pPidBXP5_X7SNeCAU0u9k6R5-_mAP1AZ43Ew4XU3tmg1zuWMLIBdC4395gr7Tts7B4g5MqLD6ydTcwcsE6JfQ/s400/men2.jpg" alt=""><span class="line1">.</span><span class="point1">.</span></a><a href="/"> 3 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-FpMwLNaHvbLcc8N_VY13emANzclWHQrUorYvRIEhoAQtfeFipup5hCojMhxO8MDOSfO6azk6loYngn-gJK4Cog4d4IsMfJhBX62Tn9ckhNMChweB3pQOuYfjJ0vBMi0IEDHmX67g9G4/s400/men3.jpg" alt=""><span class="line2">.</span><span class="point2">.</span></a><a href="/"> 4 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5LgBoQQisfmTr1Qvd1RSAvAsmqAnhK1S_g79dukOocpovezW39imuIkeO083WgbvvT7kuO9YM7EIBfTJpKQoBwWuTvtULBbE1aN9TjTRgsGo8wMjA4oBDH83XJHDJBMEyLdGdpn2rPsQ/s400/men4.jpg" alt=""><span class="line3">.</span><span class="point3">.</span></a><a href="/"> 5 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfDoXuMDQM9wEcvrEGyovSQSy4IljzjSwLqT_Ul8zRjSixWOdvalkOdAyWDEyoQkOH3i8WqyEvMjqsxAZL1iXfCvDDQBI1v8OG43uaq-AhhKmmkU7hDmG96jrcanaJ0yRUlx9X5MIIlL8/s400/men5.jpg" alt=""><span class="line4">.</span><span class="point4">.</span></a>

</div>

<div class="sipulut">channel</div>

</div>

Save Html anda lalu lihat hasilnya. Sekarang yang perlu anda lakukan adalah mengganti link sehingga sesuai dengan keinginan anda. Selain itu, mengganti gambar dengan gambar milik anda. Saran saya, gunakan gambar gif. Dalam hal ini 4 gambar gif untuk tampilan layar, masing-masing 170px X 100px. Jika bentuk tivi mau di rubah, anda mesti mengedit photo yang baru lagi. Gunakan photoshop untuk mengedit foto. Jika anda belum memilikinya, Download photoshop di sini:

Download Photoshop CS5 Full Crack Keygen

Selamat berkreasi..

Cara Membuat Menu Gaya Televisi

Posting Komentar