Tutorial Blog for Stylish Blogger

Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS

Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.

Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.

Your ads here!!!

Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

▼ ▲

SIMPLE NAVIGATION BUTTONS WITH CSS

3 Komentar

Simple navbar with CSS. Navbar atau navigation bar, yang merupakan menu utama dari sebuah halaman weblog. Adapun fungsinya untuk menyimpan link pilihan kita untuk mempermudah dalam memasuki sebuah halaman (halah pusing keterangannya ~x() Biasanya sih diisi sama home, about us, contact dan lain-lain :D Pernah juga posting tentang navbar, tapi lupa dimana yak :D (cari di arsip saja)

Sekarang BeBeN si bloglang ganteng kalem tea memilih cara membuat navbar sederhana dengan CSS. Biasa dapat yang unik, mudah, gaya tentunya langsung ta' eumpost :"> Sangkin sederhana jadi dipostingkan, kalau yang pusing-pusing berat ah =)) Bagian master Doyok saja yang berat² ;))

Masukan kode CSS berikut diatas/sebelum kode ]]></b:skin>

ul#list-nav {
list-style:none;
margin:5px;
padding:0;
width:510px
}
ul#list-nav li {
display:inline
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:100px;
background:#333;
color:#eee;
float:left;
text-align:center;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
background:#00FF00;
color:#6600CC;
}

Lalu kode HTMLnya dimasukan didalam tag <body>...</body>

<ul id="list-nav"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> </ul>

Sekarang yang kedua, tahapannya sama dengan diatas cuma tinggal ganti saja kode-kodenya ;) Masukan kode CSS berikut...

#nav-wrapper {
width:465px;
margin:0 auto;
padding:20px 0;
background:#666666;
}
ul#nav {
font-family: Verdana;
font-size:14px;
list-style:none;
margin:0 auto;
padding:0;
width:455px;
overflow: auto;
}
ul#nav li {
display:inline;
}
ul#nav li a {
text-decoration:none;
display: block;
padding:5px 21px;
background:#5F3222;
color:#eee;
float:left;
text-align:center;
border-top:2px solid #815444;
border-right:2px solid #3d1000;
border-bottom:2px solid #3d1000;
border-left:2px solid #815444;
}
ul#nav li a:hover {
background:#FFFF00;
color:#FF6600;
border-top:2px solid #815444;
border-right:2px solid #c59888;
border-bottom:2px solid #c59888;
border-left:2px solid #815444;
}

Nah ini kode HTMLnya...

<div id="nav-wrapper"> <ul id="nav"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">FAQ</a></li> <li><a href="">Contact</a></li> </ul> </div>

Silahkan mau pakai yang mana :) Demikian acara berbloglang sampai bertemu semoga bermanfaat bagi yang mau membuat navbar.Source by : www.vanseodesign.com

▼ ▲

Javascript for encode. Kalau membicarakan script, tidak dapat dipungkiri keberadaannya dalam perkembangan khususnya dunia blog. Apalagi blog yang penuh dengan GAYA =)) Dengan seiring perkembangan script yang begitu cepat, banyak pula sekarang web-web yang menawarkan script secara bebas (free script) Pokoknya bejibun deh para scripter-scripter sekarang :) Disini BeBeN si bloglang ganteng kalem tea mau berbagi script seperti yang ada di centricle.com

Ya benar, script yang berfungsi untuk membuat kode-kode HTML, script ataupun kode yang memang harus di phrase (encode) terlebih dahulu :D supaya bisa nongol di postingan kita ;)) ~~nongol~~!!! :-? Tercipta dari buka-buka daleman web orang nih, si script ini terlahir >:) Script untuk memphrase ini hanya bisa dipakai pada kode yang terdapat unsur lambang-lambang <, >, ", ±, ©, dan ®. Kalau ada sobat yang mau bikin lebih kumplit, sharing² yaaa :"> Yuk bagaimana cara memasukkannya ke blog kita.

Seperti biasa, kalau sobat berada pada halaman Dashboard tinggal masuk saja ke halaman Layout. Nah ini yang susahnya nih, pada sesi Page Elements pilih Add a Gadget dan ambil deh yang HTML/Javascript :D Susah kan :-" Masukan script berikut...

<script type="text/javascript">
function convert(){
var ele1 = document.getElementById("conv1");
var replaced;
replaced = ele1.value;
replaced = replaced.replace(/</ig, "&lt;");
replaced = replaced.replace(/>/ig, "&gt;");
replaced = replaced.replace(/"/ig, "&quot;");
replaced = replaced.replace(/'/ig, "&#39;");
replaced = replaced.replace(/±/ig, "&#177;");
replaced = replaced.replace(/©/ig, "&#169;");
replaced = replaced.replace(/®/ig, "&#174;");
ele1.value = replaced;
}
</script>
<table border="0" cellpadding="0" cellspacing="1" width="300"><tbody><tr><td valign="top" width="400"><textarea id="conv1" style="border: 3px groove rgb(222, 190, 148);" cols="37" rows="6"></textarea><br /><input value="Convert Code" onclick="convert();" type="button" /></td></tr></tbody></table>

Kalau panjangnya kurang pas di blog sobat silahkan dirubah yang tulisan width ya :) Jadi deh kita punya tools untuk mendecode ;)) Kalau untuk membalikan decodenya ya kunjungi saja web yang dibilang ma BeBeN diawal pembukaan :)) Selamat menikmati, permisi dulu...bloglang mau melancong lagi. Happy blogging keep your spirit. b-) WassaLam :-h

▼ ▲

COMMENTS BOX WITH THE SAME PAGE

10 Komentar

▼ ▲

ABOUT THIS BLOG

8 Komentar

▼ ▲

JQUERY IMAGE MAGNIFY V1.1

14 Komentar

Magnify zoom effect plugin jQuery. Postingan ini terinspirasi dari pengunjung cBoxnya BeBeN si bloglang yang ganteng kalem tea (http://kianhome.blogspot.com) :D Postingannya tenyata mengenai jQuery Image Magnify v1.1. jQuery magnify ini Plug-in dengan script jQuery yang ada di directory si embah google. Lagi males walking-walking mentok deh di web script yang sudah tidak asing lagi di kalangan pengguna dan pencari script (www.dynamicdrive.com).

Dilihat dari funsingnya mengenai si Magnify ini, tenyata seperti trik Lightbox yang Gaya juga ;)) Sama-sama memperbesar gambar sewaktu diklik secara dinamis dan lembut :"> Silahkan bagi sobat yang mau memakai trik dan tips ini mengunjungi halaman Dynamic Drive DHTML Scripts - jQuery Image Magnify Dapatkan juga deh script-script yang lainnya full GAYA =))

Oke mari kita mulai trik ini dengan gaya bahasa si bloglang...

Harus punya script jquery.min.js.

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Masukan sscript magnifynya.

<body>

jQueryMagnifier.js

SAVE deh :D

Script Magnify yang mau ditanam langsung didalam template sobat jadi seperti ini penulisannya...

Silahkan tuh diambil scriptnya...:D Itu bagi yang mau ditanam didalam template sih ;) Untuk memanggil supaya trik ini berjalan didalam postingan para sobat, hanya perlu sedikit penambahan tulisan didalam sebuah link gambar. Link gambar kan biasanya seperti ini penulisannya...

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE2LEQ66fZOEobK5NT519YBtE99u5IoBsqJP6xbE-wIPY6pIJEGLsSsGkYNGlx_Bq9hKMWvybXquIzQI6Mys4vA-O7hJoL7n1ldkQWIcnFR_MS4BOCTat_07sfHlSAxzhJUDHn6i7wxN4/" width="XXXpx" height="XXXpx" alt=""/>

Nah sobat tinggal menambahkan atribut class="magnify" didalam penulisan semua link gambar nanti yang ingin diberi efek magnify ini.

<img class="magnify" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE2LEQ66fZOEobK5NT519YBtE99u5IoBsqJP6xbE-wIPY6pIJEGLsSsGkYNGlx_Bq9hKMWvybXquIzQI6Mys4vA-O7hJoL7n1ldkQWIcnFR_MS4BOCTat_07sfHlSAxzhJUDHn6i7wxN4/" width="XXXpx" height="XXXpx" alt=""/>

Mudah kan sobat :) Pada script ini zoom defaultnya pada nilai 3 :-/ Kalau zoomnya memang dirasa sobat kurang besar maka dalam penulisan link efek magnify ini menjadi seperti...

<img class="magnify" data-magnifyby="5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE2LEQ66fZOEobK5NT519YBtE99u5IoBsqJP6xbE-wIPY6pIJEGLsSsGkYNGlx_Bq9hKMWvybXquIzQI6Mys4vA-O7hJoL7n1ldkQWIcnFR_MS4BOCTat_07sfHlSAxzhJUDHn6i7wxN4/" width="XXXpx" height="XXXpx" alt=""/>

Tinggal menambahkan data-magnifyby="4/5/6/7", yang didalam script di default 3. Selamat berkreasi sobat ;) DEMO

▼ ▲