Membuat persentase ketika scroll digulung


Mungkin trik ini terbilang tidak penting untuk mendukung apa pun di dalam blog, namun untuk anda para sobat yang suka dengan kreasi dan menambah unik tampilan, persentase scroll bisa dipasang sebagai hiasan. Dengan menambahkan persentase scroll, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll/ia gulung, jika penggulungan telah mencapai element batas maka di scroll akan muncul pensentase angka menjadi 100%.


Cara memasang scroll persentase pun tidak sulit, anda hanya perlu

Langkah 1 : Silahkan masuk ke akun Blogger dan pilih Template lalu Edit HTML. Copy dan pastekan kode dibawah ini di atas </style> atau ]]></b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}

#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #333;
}

Langkah 2 : Copy kode berikut ini dan letakkan di bawah kode tag </head>

<div id='scroll'></div>

Langkah 3 : Paste JavaScript ini di atas kode tag </body>

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Langkah 4 : Simpan Template.

Lihat hasilnya dengan buka halaman blog anda dan scroll/gulung halaman.

Semoga berguna dan berhasil....

Memahami CSS dan Penerapan CSS pada HTML


Css sendiri berfungsi untuk mendesain tampilan/layout agar terlihat lebih indah dan berkualitas.selain itu css juga dapat meringkas kode-kode yang di gunakan pada template anda dan tentunya anda pun akan sedikit menggunakan kode kode pada blog.

  • CSS adalah singkatan dari Cascading Style Sheets
  • CSS digunakan untuk mendesain tampilan dari html, jadi intinya jika anda mau belajar css, belajar dahulu html .
  • CSS  dapat digunkana untuk meringkas pekerjaan.
  • CSS mempunyai kode kode untuk mendesain tampilan html ke bentuk yang berkualitas. 

CSS biasanya dipisahkan kedalam tiga tipe :

1. Internal CSS : CSS yang terdapat dalam halaman HTML.
2. Eksternal CSS : CSS yang disisipkan/ditambahkan pada halaman HTML dengan cara dipanggil melalui link.
3. Inline CSS

Pada umumnya, menggunakan Eksternal CSS lebih di anjurkan karena  memberikan konsistensi untuk site-wide dan mengurangi kompleksitas atau pengulangan dari pada menggunakan Internal CSS. Adapun keuntungan apabila sobat menggunakan CSS adalah :

  • Menambahkan tampilan baru pada halama HTML sobat.
  • Meperbaharui seluruh tampilan website/blog sobat hanya dengan sedikit merubah/menambahkan kode CSS.
  • Mebuat setiap halaman web/blog sobat menjadi lebih interaktif dan menarik.

Anda dapat menambahkan kode CSS ke dalam halaman HTML sobat dengan cara :

Menggunakan file CSS.
Menggunakan elemen <style> pada bagian head HTML sobat.
Menggunakan atribut  "style" pada setiap elemen HTML sobat (misalnya, <p style = "...">...</p> ).

Dibawah ini contoh-contoh penggunaan CSS pada halaman HTML.

<html>
<head>
<style type="text/css">
body {
background-color:#d0e4fe;
}
h2 {
color:red;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:18px;
}
</style>
</head>

<body>

<h2>Contoh CSS</h2>
<p>Di sini isi kontent.</p>

</body>
</html>

Penulisan kode css ( SYNTAX )

dalam penulisan kode css, BERBEDA dengan kode-kode html. di dalam css terdapat selector dan declarations, perhatikan gambar dibawah ini:


Selector :

simbol kode - kode yang di pakai untuk nantinya dapat di terapkan pada html ,sebagai contoh ( body, h1,h2,h3,a,header,outerwrapper, dan lain sebagainya)

Declaration :

bisa kita lihat dari contoh di atas bahwa di dalam declaration terdapat pula properti - properti  dan juga value, jadi intinya declaration itu adalah kumpulan dari properti dan juga value yang di ringkas dalam satu paket dengan awalan pembuka "{" dan di tutup dengan "}"

Property :

proeprty adalah atribut - atribut style yang dapat anda ubah untuk mendesain html sesuai ke butuhan blog/web anda. dalam setiap properti memiliki Value ( nilai ).

Value :

Value adalah nilai - nilai dari property seperi yang telah saya jelaskan sebelumnya.

CSS comment ( tulisan yang tidak terbaca oleh mesin ) atau biasa di sebut comment.

untuk menambahkan tulisan coment hal yang harus anda lakukan adalah menambahkan kode "/*" pada awal kata dan di akhiri dengan kode "*/". lihat contoh dibawah ini:

/*Disini tulisan comment*/
p { text-align:center;
/*Di sini tulisan yang tidak terbaca */
color:black; font-family:arial;
}

Fungsi ID dan CLASS pada CSS

Fungsi ID :

ID di gunakan untuk style elemen tunggal yang unik dan biasanya mempunyai banyak element-element lain di dalamnya.
ID di  lambangkan dengan simbol "#" ( pager )
ID di tulis ke html/body  dengan style "<div id="nama_selector">" di tutup dengan kode </div>
   
Contoh singkat penggunaan ID 

#nama-selector {
text-align : center;
color : red;
background : #ffffff;
margin :0px;
padding:10px;
}

Dari contoh di atas dapat di simpulkan bahwa pemakaian ID dengan selector "nama-selector" pada html/body seperti di bawah ini :

<div id="nama-selector"> di tutup kode </div>

Fungsi CLASS :

Class digunakan untuk menentukan style pada sekelompok element
Class biasanya terdapat di dalam selector ID
Class memungkinkan kalian untuk menetapkan style tertentu  untuk setiap element html  dengan banyak class yang sama .
Class di lambangkan dengan simbol "." ( titik )

lihat contoh di bawah ini agar lebih jelasnya :

.center {text-align:center;}

dari contoh di atas kita coba tambahkan kode html h1 agar letaknya menjadi di tengah ( di tengah karena css class di atas menggunakan nilai center, jika anda menggunkan kode css lain juga bisa, asalkan sesuai ketentuan. berikut hasil penggabungan kode di atas dengan h1.

p.center {text-align:center;}

Jika anda seorang Blogger atau  ingin menjadi Web Design menguasai CSS adalah suatu keharusan dikarenakan seluruh Themes/Template semua untuk pengeditan suatu template semua menggunakan bahasa CSS atau CSS Rule.

Semoga membantu dan berguna...

Modifikasi Alert Emoticon


Saya telah membuat postingan Emoticon komentar otomatis namun pada postingan dahulu itu tidak ada modifikasi pemberitahuan pada saat emoticon tersebut di klik yang mana tampilannya masih menggunakan tampilan alert default.


Dan pada postingan saya kali ini saya akan membagikan cara modifikasi tampilan alertnya sesuka hati kita agar tidak terlalu sederhana (menggunakan alert default).

Baik langsung saja, Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML

untuk yang pernah memasang emoticon ini silahkan ganti semua jsnya dengan js berikut ini:

<script type='text/javascript'>
//<![CDATA[
$(function () {
    if (putEmoAbove) {
        $(putEmoAbove).before('<div class="wrap-emo" id="emo-bar"> :) :( ^_^ :D ;) :-bd :yaya: :&#39;( :&#92; :p B) :Q :Ozz 7:( &#92;o/ **p &lt;3 0:) :-a 7:O *fck* x@ X@ ~x( =p*  </div>');
    }
    function emo(emo, imgRep, emoKey) {
        $(emoRange).each(function () {
            $(this).html($(this).html().replace(/<br ?\/?>(:|;|=|\^)/ig, "<br> $1").replace(emo, " <img src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));
        });
    }
    emo(/\s:\)+/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/smile.gif", ":)");
    emo(/\s;\)+/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/wink.gif", ";)");
    emo(/\s:\(/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/sad.gif", ":(");
    emo(/\s:yaya:/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/yaya.gif", ":yaya:");
    emo(/\s:\\/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/memble.gif", ":&#92;");
    emo(/\s:D/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/haha.gif", ":D");
    emo(/\s\^(\_|)\^/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/senyum-tulus.gif", "^_^");
    emo(/\s:'\(/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/cry.gif", ":&#39;(");
    emo(/\sB\)/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/cool.gif", "B)");
    emo(/\s:Q/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/smoking.gif", ":Q");
    emo(/\s\*\*p/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/crazy.gif", "**p");
    emo(/\s7:\(/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/conf.gif", "7:(");
    emo(/\s:p/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/wee.gif", ":p");
    emo(/\s:Oz+/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/sleep.gif", ":Ozz");
    emo(/\s7:O/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/angry.gif", "7:O");
    emo(/\s\\o\//ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/applause.gif", "&#92;o/");
    emo(/\s&lt;3/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/love.gif", "&amp;amp;lt;3");
    emo(/\s0:\)+/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/angelgreen.gif", "0:)");
    emo(/\s:-a/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/vomit.gif", ":-a");
    emo(/\s\*fck\*/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/fuck.gif", "*fck*");
    emo(/\sx\@/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/marahbesar.gif", "x@");
    emo(/\s\X\@/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/arrgh.gif", "X@");
    emo(/\s:-bd/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/topmarkotop.gif", ":-bd");
    emo(/\s\~x\(+/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/ugh.gif", "~x(");
    emo(/\s=p\*/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/ball2.gif", "=p*");
    var one = 0; 
    $(document.body).on("click", function () {
        $('.emo-Key').remove();
    });
    $('.emo').css('cursor', 'pointer').on("click", function (e) {
        $('.emo-Key').remove();
        $(this).after('<input class="emo-Key" type="text" size="6" value=" ' + this.alt + '" />');
        $('.emo-Key').trigger("select");
        if (emoMessage && one === 0) {
            $('#panel-emo').css('opacity', 1);
            $('#panel-emo .message').html(emoMessage);
            one = 1;
        }
        e.stopPropagation();
    });
    $('#panel-emo .close').on("click", function () {
        $('#panel-emo').css('opacity', 0);
    });
});
var emoRange    = "#comments p, div#emo-bar",
    putEmoAbove = "#comment-editor",
    emoMessage  = "Untuk menyisipkan emotikon setidaknya Anda harus menambahkan satu spasi di depan. Jangan pernah melupakan itu atau emotikon Anda tidak bisa diterjemahkan.";

//]]>
</script>

Simpan kode CSS di bawah ini di atas ]]></b:skin> atau kode </style> 

#panel-emo {
  position:fixed !important;
  position:absolute;
  top:50px;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
  width:370px;
  margin:0 auto;
  padding-bottom:10px;
  height:auto;
  background-color:#333;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  box-shadow:0 1px 2px rgba(0,0,0,0.4);
  z-index:1000;
  opacity:0;
}
#panel-emo .title {
  background-color:#3B5998;
  padding:10px;
  color:#fff;
  font:normal 14px;
  margin:0;
  position:relative;
}
#panel-emo .message {
  padding:5px 10px;
  text-align:left;
  display:block;
  font-size:12px;
  color:#fff;
}
.wrap-emo {padding:10px;background-color:#555;border:1px solid #369;}
#panel-emo a{color:#fff;}
#panel-emo .close-wrapper .close a{
  position:relative;
  font:bold 10px Arial,Sans-Serif;
  
  cursor:pointer;
}
#panel-emo .close-wrapper .close:hover {
  color:#aaa;
}

untuk yang belum, Temukan kode </body>

Salin kode di bawah ini dan letakkan di atasnya:

<script type='text/javascript'>
//<![CDATA[
$(function () {
    if (putEmoAbove) {
        $(putEmoAbove).before('<div class="wrap-emo" id="emo-bar"> :) :( ^_^ :D ;) :-bd :yaya: :&#39;( :&#92; :p B) :Q :Ozz 7:( &#92;o/ **p &lt;3 0:) :-a 7:O *fck* x@ X@ ~x( =p*  </div>');
    }
    function emo(emo, imgRep, emoKey) {
        $(emoRange).each(function () {
            $(this).html($(this).html().replace(/<br ?\/?>(:|;|=|\^)/ig, "<br> $1").replace(emo, " <img src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />"));
        });
    }
    emo(/\s:\)+/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/smile.gif", ":)");
    emo(/\s;\)+/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/wink.gif", ";)");
    emo(/\s:\(/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/sad.gif", ":(");
    emo(/\s:yaya:/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/yaya.gif", ":yaya:");
    emo(/\s:\\/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/memble.gif", ":&#92;");
    emo(/\s:D/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/haha.gif", ":D");
    emo(/\s\^(\_|)\^/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/senyum-tulus.gif", "^_^");
    emo(/\s:'\(/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/cry.gif", ":&#39;(");
    emo(/\sB\)/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/cool.gif", "B)");
    emo(/\s:Q/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/smoking.gif", ":Q");
    emo(/\s\*\*p/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/crazy.gif", "**p");
    emo(/\s7:\(/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/conf.gif", "7:(");
    emo(/\s:p/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/wee.gif", ":p");
    emo(/\s:Oz+/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/sleep.gif", ":Ozz");
    emo(/\s7:O/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/angry.gif", "7:O");
    emo(/\s\\o\//ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/applause.gif", "&#92;o/");
    emo(/\s&lt;3/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/love.gif", "&amp;amp;lt;3");
    emo(/\s0:\)+/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/angelgreen.gif", "0:)");
    emo(/\s:-a/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/vomit.gif", ":-a");
    emo(/\s\*fck\*/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/fuck.gif", "*fck*");
    emo(/\sx\@/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/marahbesar.gif", "x@");
    emo(/\s\X\@/g, "http://reader-hosting.googlecode.com/svn/branches/emotion/arrgh.gif", "X@");
    emo(/\s:-bd/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/topmarkotop.gif", ":-bd");
    emo(/\s\~x\(+/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/ugh.gif", "~x(");
    emo(/\s=p\*/ig, "http://reader-hosting.googlecode.com/svn/branches/emotion/ball2.gif", "=p*");
    var one = 0; 
    $(document.body).on("click", function () {
        $('.emo-Key').remove();
    });
    $('.emo').css('cursor', 'pointer').on("click", function (e) {
        $('.emo-Key').remove();
        $(this).after('<input class="emo-Key" type="text" size="6" value=" ' + this.alt + '" />');
        $('.emo-Key').trigger("select");
        if (emoMessage && one === 0) {
            $('#panel-emo').css('opacity', 1);
            $('#panel-emo .message').html(emoMessage);
            one = 1;
        }
        e.stopPropagation();
    });
    $('#panel-emo .close').on("click", function () {
        $('#panel-emo').css('opacity', 0);
    });
});
var emoRange    = "#comments p, div#emo-bar",
    putEmoAbove = "#comment-editor",
    emoMessage  = "Untuk menyisipkan emotikon setidaknya Anda harus menambahkan satu spasi di depan. Jangan pernah melupakan itu atau emotikon Anda tidak bisa diterjemahkan.";

//]]>
</script>
<div id="panel-emo">
    <div class='title'>PENTING UNTUK DIPERHATIKAN</div>
    <div class="message"></div>
    <a href='#' class="close">OK</a> 
</div>

Simpan kode CSS di bawah ini di atas ]]></b:skin> atau kode </style>

#panel-emo {
  position:fixed !important;
  position:absolute;
  top:50px;
  right:0;
  left:0;
  z-index:9999;
  text-align:center;
  width:370px;
  margin:0 auto;
  padding-bottom:10px;
  height:auto;
  background-color:#333;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  box-shadow:0 1px 2px rgba(0,0,0,0.4);
  z-index:1000;
  opacity:0;
}
#panel-emo .title {
  background-color:#3B5998;
  padding:10px;
  color:#fff;
  font:normal 14px;
  margin:0;
  position:relative;
}
#panel-emo .message {
  padding:5px 10px;
  text-align:left;
  display:block;
  font-size:12px;
  color:#fff;
}
.wrap-emo {padding:10px;background-color:#555;border:1px solid #369;}
#panel-emo a{color:#fff;}
#panel-emo .close-wrapper .close a{
  position:relative;
  font:bold 10px Arial,Sans-Serif;
  
  cursor:pointer;
}
#panel-emo .close-wrapper .close:hover {
  color:#aaa;
}
#emo-bar {
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}
img.emo, input.emo-Key {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}
input.emo-Key {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
  width:20px;
}

Terakhir Simpan dan lihat hasilnya.

sekian saja semoga bermanfaat...

Menu Rocking dan Rolling Rounded


Kali ini saya menemukan menu yang unik untuk di bahas, yaitu menu bericon yang mempunyai efek melebar dan bertampilan unik hasil dari kreasi http://tympanus.net/. Menu ini memanfaatkan efek berputar dan scaling Patch jQuery dari Zachary Johnson yang dapat ditemukan di sini.

Langsung saja kita lanjut untuk mengupas menu ini

IKode Markup

Untuk menu ini kita tidak akan membuat daftar, tapi elemen div untuk setiap item menu. Kita akan mengepak item menu dalam div utama yang disebut menu. Setiap item akan memiliki ikon sebagai link elemen dan div isi dengan judul dan paragraf di mana kita akan menambah link atau kotak pencarian:

<div class="menu">
 <div class="item">
  <a class="link icon_mail"></a>
  <div class="item_content">
   <h2>Contact us</h2>
   <p>
    <a href="#">eMail</a>
    <a href="#">Twitter</a>
    <a href="#">Facebook</a>
   </p>
  </div>
 </div>
 <div class="item">
  <a class="link icon_help"></a>
  <div class="item_content">
   <h2>Help</h2>
   <p>
    <a href="#">FAQ</a>
    <a href="#">Live Support</a>
    <a href="#">Tickets</a>
   </p>
  </div>
 </div>
 <div class="item">
  <a class="link icon_find"></a>
  <div class="item_content">
   <h2>Search</h2>
   <p>
    <input type="text"></input>
    <a href="">Go</a>
   </p>
  </div>
 </div>
 <div class="item">
  <a class="link icon_photos"></a>
  <div class="item_content">
   <h2>Image Gallery</h2>
   <p>
    <a href="#">Categories</a>
    <a href="#">Archives</a>
    <a href="#">Featured</a>
   </p>
  </div>
 </div>
 <div class="item">
  <a class="link icon_home"></a>
  <div class="item_content">
   <h2>Start from here</h2>
   <p>
    <a href="#">Services</a>
    <a href="#">Portfolio</a>
    <a href="#">Pricing</a>
   </p>
  </div>
 </div>
</div>

Awalnya, div item yang mengelilingi ikon akan sama besar, kita akan membuatnya berkembang dan kemudian akan membuka isi sesudahnya.

IIPenggunaan CSS

Gaya umum untuk menu seperti font akan didefinisikan sebagai berikut:

.menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}

Item dalam menu akan membuka, dan mengatur item untuk memperluas ke kiri dan mendorong item lainnya hilang:

.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

Kemudian kita mendefinisikan gaya ikon (kelas link) dengan cara sebagai berikut:

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(../images/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(../images/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(../images/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(../images/photos.png) no-repeat top left;
}

Elemen konten lainnya sebagai berikut:

.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}

Dengan text-shadow putih kita dapat membuat efek teks terukir bagus.
Ok, mari kita tambahkan beberapa sihirnya.

IIIMenambahkan JavaScript

Pertama, kita perlu menambahkan inklusi script jQuery dan dua skrip lainnya dari Zachary.
Kemudian kita akan menambahkan fungsi-fungsi berikut:

$('.item').hover(
 function(){
  var $this = $(this);
  expand($this);
 },
 function(){
  var $this = $(this);
  collapse($this);
 }
);
function expand($elem){
 var angle = 0;
 var t = setInterval(function () {
  if(angle == 1440){
   clearInterval(t);
   return;
  }
  angle += 40;
  $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
 },10);
 $elem.stop().animate({width:'268px'}, 1000)
 .find('.item_content').fadeIn(400,function(){
  $(this).find('p').stop(true,true).fadeIn(600);
 });
}
function collapse($elem){
 var angle = 1440;
 var t = setInterval(function () {
  if(angle == 0){
   clearInterval(t);
   return;
  }
  angle -= 40;
  $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
 },10);
 $elem.stop().animate({width:'52px'}, 1000)
 .find('.item_content').stop(true,true).fadeOut()
          .find('p').stop(true,true).fadeOut();
}

Javascript di atas memiliki dua fungsi, satu untuk memperluas item dan satu untuk menyembunyikan. Fungsi expand akan membuat ikon memutar 4 kali di sekitar itu sendiri (360 kali 4 adalah 1440). lalu item memperluas dengan menghidupkan peningkatan lebarnya. konten muncul, pertama seluruh div dan kemudian elemen paragraf.

Fungsi menyembunyikan akan memutar ikon kembali, mengurangi lebar item dan membuat konten menghilang.

Dan itu saja! Saya harap Anda menikmatinya dan semoga berguna!

Cara memasang kotak pencarian pada menu navigasi


Terkadang kita tertarik pada sebuah tampilan menu navigasi drop down yang cantik, namun kemudian muncul kekecewaan bagi para sobat yang ingin dalam menu navigasi yang cantik tersebut seharusnya di sertai dengan kotak pencarian agar lebih cantik sehingga semuanya menjadi praktis dalam satu paket dan tidak perlu untuk menambah pekerjaan lagi untuk membuat element baru kotak pencarian. karena itu, sekarang saya akan memberikan cara dan trik bagaimana memasang kotak pencarian didalam menu navigasi drop down anda. silahkah simak caranya dibawah ini:

Misalnya kita telah memiliki kode HTML untuk menu navigasi drop down seperti dibawah ini:

<div id='navbarmenu'>
     <div id='menu'>
         <ul id='nav'>
            <li><a href='/'>Home</a></li>
            <li><a href='#'>Drop Down</a>
                <ul>
                   <li><a href='#'>Link 1</a></li>
                   <li><a href='#' target='_blank'>Link 2</a></li>
                   <li><a href='#'>Link 3</a></li>
                   <li><a href='#'>Link 4</a></li>
                   <li><a href='#' target='_blank'>Link 5</a></li>
                </ul>
           </li>
            <li><a href='#'>Link 1</a></li>
            <li><a href='#' target='_blank'>Link 2</a></li>
            <li><a href='#'>Link 3</a></li>
            <li><a href='#'>Link 4</a></li>
            <li><a href='#' target='_blank'>Link 5</a></li>
         </ul>
     </div>
</div>

Menu diatas tidak memiliki element kotak pencarian, untuk meletakkan kotak pencarian di dalamnya kita akan membuat sebuah element baru, lihat dibawah ini:

<div id='search-form'>
... form pencarian ...
</div>

Jangan lupa untuk memasang formulir kotak pencarian, berikut kodenya:

<form action='/search' id='header-search' method='get' style='display:inline;'>
      <div id='search'>
              <input class='field' id='s' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari disini...'/>
              <input class='submit btn' src='http://irwan.co/wp-content/themes/Resizable/images/ico-search.png' type='image' value='Go'/>
       </div>
</form>

Kode kotak pencarian di atas sudah saya beri id dan class, silahkan anda buat sendiri sesuai keinginan. jika element dan kotak pencarian keduanya di satukan, maka akan jadi demikian:

<div id='search-form'>
   <form action='/search' id='header-search' method='get' style='display:inline;'>
      <div id='search'>
              <input class='field' id='s' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari disini...'/>
              <input class='submit btn' src='http://irwan.co/wp-content/themes/Resizable/images/ico-search.png' type='image' value='Go'/>
       </div>
    </form>
</div>

Setelah element kotak pencarian selesai dan telah diberi form pencarian, saatnya menempatkannya dalam element menu navigasi. kembali lagi ke menu navigasi, perhatikan antara tag element pembungkus dan class menu, element kotak pencarian akan kita tempatkan diatas tag penutup pembungkus element menu, lihat kode di bawah ini:

<div id='navbarmenu'>
     <div id='menu'>
         <ul id='nav'>
            <li><a href='/'>Home</a></li>
            <li><a href='#'>Drop Down</a>
                <ul>
                   <li><a href='#'>Link 1</a></li>
                   <li><a href='#' target='_blank'>Link 2</a></li>
                   <li><a href='#'>Link 3</a></li>
                   <li><a href='#'>Link 4</a></li>
                   <li><a href='#' target='_blank'>Link 5</a></li>
                </ul>
           </li>
            <li><a href='#'>Link 1</a></li>
            <li><a href='#' target='_blank'>Link 2</a></li>
            <li><a href='#'>Link 3</a></li>
            <li><a href='#'>Link 4</a></li>
            <li><a href='#' target='_blank'>Link 5</a></li>
         </ul>
     </div>
     ... Letakkan kode element kotak pencarian disini....
</div>

Maka hasil dari semua pekerjaan diatas adalah sebagai berikut:

<div id='navbarmenu'>
     <div id='menu'>
         <ul id='nav'>
            <li><a href='/'>Home</a></li>
            <li><a href='#'>Drop Down</a>
                <ul>
                   <li><a href='#'>Link 1</a></li>
                   <li><a href='#' target='_blank'>Link 2</a></li>
                   <li><a href='#'>Link 3</a></li>
                   <li><a href='#'>Link 4</a></li>
                   <li><a href='#' target='_blank'>Link 5</a></li>
                </ul>
           </li>
            <li><a href='#'>Link 1</a></li>
            <li><a href='#' target='_blank'>Link 2</a></li>
            <li><a href='#'>Link 3</a></li>
            <li><a href='#'>Link 4</a></li>
            <li><a href='#' target='_blank'>Link 5</a></li>
         </ul>
     </div>
     <div id='search-form'>
           <form action='/search' id='header-search' method='get' style='display:inline;'>
               <div id='search'>
               <input class='field' id='s' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Cari disini...'/>
              <input class='submit btn' src='http://irwan.co/wp-content/themes/Resizable/images/ico-search.png' type='image' value='Go'/>
              </div>
           </form>
      </div>
</div>

Sekarang anda sudah bisa mencoba untuk menerapkan dalam menu blogger anda, semoga berguna dan bermanfaat...

Catatan: menu drop down dengan kotak pencarian di atas hanya sebuah contoh, karena tidak saya sertai dengan style dan lainnya. jika anda ingin menggunakannya dalam blog, silahkan berkreasi dengan id/class dan css keinginan anda.

Berbagai trik membuat single page


Single page/halaman penuh adalah satu halaman yang tidak dihiasi oleh widget atau pun element sidebar. ada tujuan dan kebutuhan tertentu sehingga author atau pemilik blog membuah sebuah single page di blognya, misalnya untuk menempatkan forum, membuat halaman daftar isi, aboute blog juga alasan lainnya. untuk demo, silahkan klik link aboute atau forum pada blog ini. kali ini kita akan mencoba untuk membuatnya bagi sobat yang ingin tahu caranya, silahkan ikuti trik berikut ini.

Saya akan memberikan dua cara untuk membuat single page/halaman penuh di blogger, yaitu dengan cara menggunakan tag conditional dan dengan cara memasukkan style melalui Editor Laman/Entri. Langsung ke cara pertama

01Membuat single page blogger menggunakan tag conditional

Sebelum sobat melakukan trik ini, sebaiknya lihat dulu beberapa element blog anda agar nanti anda tidak bingung ketika memutuskan ID/Class mana dalam element yang ingin di sembunyikan, misal #main_wrapper, #out-wrapper, #page-wrapper, .post, .side-wrapper atau #sidebar_wrapper karena ini penting untuk nanti menentukan element mana yang akan di sembunyikan. yang perlu anda ingat, setiap template memiliki ID dan Class yang berbeda jadi silahkan dipahami struktur template anda.

Untuk membuat single page menggunakan tag conditional, silahkan login terlebih dahulu ke akun blogger anda
Pilih Template -> Edit HTML

sekarang kita buat tag conditional seperti di bawah ini

<b:if cond='data:blog.url == &quot;URL yang anda inginkan&quot;'>
... css disini ...
</b:if>

lalu kita letakkan css di dalamnya untuk mengatur dan menyembunyikan element ID/Class tertentu. misal kita akan membuat single page untuk aboute me dengan menghilangkan semua ID/Class header, sidebar dan footer maka contohnya seperti berikut:

<b:if cond='data:blog.url == &quot;sub-domain-anda/p/aboute-me.html&quot;'>
#header-wrapper, #sidebar-wrapper, #footer-wrapper { display:none; }
</b:if>

tag conditional diatas telah menghilangkan semua id/class header, sidebar dan footer namun belum mengatur tinggi, lebar, jarak, warna latar, warna font, gaya font dan lain sebagainya dalam halaman tersebut, maka kita harus memberikan tambahan style, misal:

#main-wrapper { width:100%; heigth:100%; background-color: red; padding: 1em; margin: 2em; }
.post  { width: 100%; background: white; margin:0; padding:0;}
.post h3 { font-family: arial 14px georgia, sanserif; font-weight: bold; color: blue; text-decoration: underline; line-height:1.2em; }

style diatas, kita masukkan kedalam tag conditional tadi, menjadi:

<b:if cond='data:blog.url == &quot;sub-domain-anda/p/aboute-me.html&quot;'>
#header-wrapper, #sidebar-wrapper, #footer-wrapper { display:none; }
#main-wrapper { width:100%; heigth:100%; background-color: red; padding: 1em; margin: 2em; }
.post  { width: 100%; background: white; margin:0; padding:0;}
.post h3 { font-family: arial 14px georgia, sanserif; font-weight: bold; color: blue; text-decoration: underline; line-height:1.2em; }
</b:if>

Lalu letakkan diatas kode tag </head> dan bungkus dengan <style>...</style> seperti berikut ini:

<style>
<b:if cond='data:blog.url == &quot;sub-domain-anda/p/aboute-me.html&quot;'>
#header-wrapper, #sidebar-wrapper, #footer-wrapper { display:none; }
#main-wrapper { width:100%; heigth:100%; background-color: red; padding: 1em; margin: 2em; }
.post  { width: 100%; background: white; margin:0; padding:0;}
.post h3 { font-family: arial 14px georgia, sanserif; font-weight: bold; color: blue; text-decoration: underline; line-height:1.2em; }
</b:if>
</style>

lalu simpan perubahan template anda.

Catatan: ubah sesuai yang anda inginkan, seperti warna gaya font dll, edit css contoh diatas sesuai element id/class struktur template anda.


02Membuat single page blogger dengan menempatkan style dari Editor HTML post

Untuk membuat single page dengan cara ini memang lebih mudah, kita hanya perlu membuat style dan menempatkan dalam posting.

Masuk ke akun blogger anda
Pilih Entri Baru/Laman baru, jika anda telah membuat posting/laman yang ingin di ubah menjadi single page buka saja dan edit post/laman lalu letakkan kode style berikut di dalamnya melalui tab editor HTML

<style>
#header-wrapper, #sidebar-wrapper, #footer-wrapper { display:none; }
#main-wrapper { width:100%; heigth:100%; background-color: red; padding: 1em; margin: 2em; }
.post  { width: 100%; background: white; margin:0; padding:0;}
.post h3 { font-family: arial 14px georgia, sanserif; font-weight: bold; color: blue; text-decoration: underline; line-height:1.2em; }
</style>

Simpan hasil pekerjaan atau hasil edit anda.

Catatan: style diatas mungkin berbeda dengan element id/class struktur template anda, jadi silahkan untuk disesuaikan. kemudian trik ini memiliki kelemahan, tidak seperti tag conditional yang langsung menyembunyikan id/class element langsung ketika dimuat, melainkan jika anda gunakan untuk menyembunyikan header, maka header akan muncul terlebih dahulu sebelum element post ini termuat, dan jika element post termuat baru kemudian header akan hilang. tips saya, lebih baik ini digunakan untuk menyembunyikan element yang dimuat setelah element post termuat terlebih dahulu, seperti sidebar, footer dll.

Semoga bermanfaat pertanyaan silahkan sampaikan dikomentar....

Menu navigasi drop down dengan pure CSS3


Anda pasti sudah tidak heran lagi dengan menu drop down, karena sudah banyak artikel yang membahas dan memberikan tutorial ini. kali ini saya akan berbagi sebuah menu drop down yang apik dengan css3. Ini adalah Navigation Menu Dengan Multi Level Drop Down yang dikembangkan dengan menggunakan CSS3 murni dengan efek tambahan seperti border-radius, box-shadow, text-shadow dan gradien linier. Menu navigasi ini tampil sempurna pada Firefox, Chrome dan juga Safari. silahkan anda gunakan jika tertarik.


Kode HTML Untuk Menu Navigation Dengan Multi Level Drop Down

<!-- Pure CSS3 Multi Level Drop Down Navigation Menu  -->

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>

<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a>
 <ul>
 <li><a href="#">Level 2.1</a></li>
 <li><a href="#">Level 2.2</a></li>
 <li><a href="#">Level 2.3</a></li>
 <li><a href="#">Level 2.4</a></li>

 <li><a href="#">Level 2.5</a></li>
 </ul>
</li>
<li><a href="#">Three Levels</a>
 <ul>
 <li><a href="#">Level 2.1</a></li>
 <li><a href="#">Level 2.2</a></li>
 <li><a href="#">Level 2.3</a>

  <ul>
  <li><a href="#">Level 2.3.1</a></li>
  <li><a href="#">Level 2.3.2</a></li>
  <li><a href="#">Level 2.3.3</a></li>
  <li><a href="#">Level 2.3.4</a></li>
  <li><a href="#">Level 2.3.5</a></li>

  <li><a href="#">Level 2.3.6</a></li>
  <li><a href="#">Level 2.3.7</a></li>
  </ul>
 </li>
 <li><a href="#">Level 2.4</a></li>
 <li><a href="#">Level 2.5</a></li>
 </ul>

</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

<!-- Pure CSS3 Multi Level Drop Down Navigation Menu -->

CSS Kode Untuk Menu Navigation Dengan Multi Level Drop Down

/* Pure CSS3 Multi Level Drop Down Navigation Menu */

#nav {
    float: left;
    font: bold 12px Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    border-top: 1px solid #2b2e30;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
}

#nav ul {
 margin:0;
 padding:0;
 list-style:none;
}

#nav ul li {
 float:left;
}

#nav ul li a {
    float: left;
 color:#d4d4d4;
   padding: 10px 20px;
 text-decoration:none;
    background:#3C4042;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
 background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
 border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(0,0,0,0.2);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav ul li a:hover,
#nav ul li:hover > a {
    color: #252525;
    background:#3C4042;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
 background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
 background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover, 
#nav ul li li:hover > a  {
    color: #2c2c2c;
   background: #5C9ACD;
 background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
 background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
 background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
    border-bottom: 1px solid rgba(0,0,0,0.6);
    border-top: 1px solid #7BAED9;
    text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#nav li ul {
     background:#3C4042;
     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
     background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
     background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
     border-radius: 0 0 10px 10px;
     -moz-border-radius: 0 0 10px 10px;
     -webkit-border-radius: 0 0 10px 10px;
     left: -999em;
     margin: 35px 0 0;
     position: absolute;
     width: 160px;
     z-index: 9999;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
     border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
     left: auto;
}

#nav li ul a {
     background: none;
     border: 0 none;
     margin-right: 0;
     width: 120px;
     box-shadow: none;
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     border-bottom: 1px solid transparent;
     border-top: 1px solid transparent;
}

#nav li li ul {
     margin: -1px 0 0 160px;
     -webkit-border-radius: 0 10px 10px 10px;
     -moz-border-radius: 0 10px 10px 10px;
     border-radius: 0 10px 10px 10px;
     visibility:hidden;
}

#nav li li:hover ul {
     visibility:visible;
}

#nav ul ul li:last-child > a {
 -moz-border-radius:0 0 10px 10px;
 -webkit-border-radius:0 0 10px 10px;
 border-radius:0 0 10px 10px;
}

#nav ul ul ul li:first-child > a {
 -moz-border-radius:0 10px 0 0;
 -webkit-border-radius:0 10px 0 0;
 border-radius:0 10px 0 0;
}

Jika ingin anda bisa mendownload menu navigasi ini di [link ini]

Untuk pertanyaan silahkan sampaikan di formulir komentar, semoga bermanfaat...