November 2013

Cara Membuat Search Box Blog Seperti Search Box Google di Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Blog Masholeh || Membuat Search Box Blog Seperti Search Box Google - Membuat search box blog seperti search box kepunyaan Google ini cukup sederhana dengan sedikit kode CSS agar tampilannya mirip, seperti yang bisa Anda lihat di atas postingan ini (jika belum saya ganti lagi hehehe...). Jika ada yang tertarik untuk mencobanya juga silahkan copy kode-kodenya di bawah ini. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zZPvWiVkUZp6OdYa1rB0pzuEN46JIcfNoPlHXZnCXHfajNTGSYdkQEjmL7UF1YhZO8r0tyq2yhAhbEe1jus45wPTmyM59165z3Bl2X_ptZcbNHu3FSM8jde6Dl1x_gRavlQR-HxFFrs/s1600/Search+Box+Google.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Search Box Blog Seperti Search Box Google di Blogger" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zZPvWiVkUZp6OdYa1rB0pzuEN46JIcfNoPlHXZnCXHfajNTGSYdkQEjmL7UF1YhZO8r0tyq2yhAhbEe1jus45wPTmyM59165z3Bl2X_ptZcbNHu3FSM8jde6Dl1x_gRavlQR-HxFFrs/s320/Search+Box+Google.png" title="Cara Membuat Search Box Blog Seperti Search Box Google di Blogger" width="320" /></a></div>
 
 
<div>
</div>
<div>
</div>
<div>
</div>
<div>
 Membuat Search Box Blog Seperti Search Box Google : 1. Buka blogger 2. Simpan kode CSS di bawah ini di atas kode ]]></b:skin></div>
 
<div>
 
<blockquote class="tr_bq">
#search {background: #fff;border-radius: 2px;} 
#search-form {color:gray;width:50%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #ccc;border-radius:2px;} 
.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;} 
#search-form:hover{border:1px solid #aaa} 
#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}</blockquote>
*Agar menjadi responsive maka saya gunakan persentase untuk lebarnya (width) pada search-form-nya, silahkan atur-atur agar sesuai dengan blog Anda.</div>
<div>
 </div>
 
<div>
3. Kemudian silahkan copy kode HTML-nya di bawah ini dan silahkan simpan di mana Anda ingin menampilkannya.</div>
 
<blockquote class="tr_bq">
<div id='search'> <form id='searchform' action='/search' method='get' target='_blank'> <input id='search-form' 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='Search here ...'/> <button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZFrr4YhdAeNG9PRFKzpkyhKnBh-1mBz_HRqvCdiad_i6bfehiTiM1gHVoZyXCrAB61Z-U9jaJjXNwPQH72sFJIjBHuWxv8r8YOY-UOfb9x_W1fP4JjWJ3zb15alYcHmyHX-vuuVJrx65J/s1600/search.png' title='Search' width='21'/> </button> </form> </div></blockquote>
bisa di simpan pada gadget -> HTML/Javascript, ataupun di dalam template html 5. simpan template :D</div>

Blog Masholeh || Membuat Search Box Blog Seperti Search Box Google - Membuat search box blog seperti search box kepunyaan Google ini cuku...

Baca selengkapnya »

21.07 +

Cara Membuat Tombol Demo dan Download di Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
Blog Masholeh || Cara Membuat Tombol Demo dan Download di Blogger - Banyak tutorial bagaimana cara membuat tombol demo dan download, nah kali ini saya share CSS tombol Demo dan Download ala kangismet, dgn warna dan efek gulir hover yg halus membuat tombol demo dan download lebih enak dipandang :).  mau tau gimana tampilannya ? berikut SSnya</div>
<div style="text-align: center;">
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYaFHrPjShX5Qzb7CxYn9BmUh0iOQZ42bqtvff8ZQfinQRlrHY_6zu87bXigjtPQrD2uKYoZRZtNBQrbWFmkRLtTz3_J8Tt9kUk_Zi76pO3KfGa0cNNDMbjPOwmozxYdqTKp_rujnGuPE/s1600/demo_download_button.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Tombol Demo dan Download di Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYaFHrPjShX5Qzb7CxYn9BmUh0iOQZ42bqtvff8ZQfinQRlrHY_6zu87bXigjtPQrD2uKYoZRZtNBQrbWFmkRLtTz3_J8Tt9kUk_Zi76pO3KfGa0cNNDMbjPOwmozxYdqTKp_rujnGuPE/s1600/demo_download_button.png" title="Cara Membuat Tombol Demo dan Download di Blogger" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Cara Membuat Tombol Demo dan Download di Blog : 
<div>
1. Buka Blogger 
 
2. Klik Template -> Edit HTML 
 
3. Copy kode dibawah ini dan paste diatas kode ]]></b:skin></div>
<blockquote class="tr_bq">
/* -- M-S Button --*/ 
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;} 
.button ul {margin:0;padding:0} 
.button li{display:inline;margin:0;padding:0} 
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; } 
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;} 
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 } 
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }</blockquote>
<div>
 
4. Simpan template 
 
5.  Untuk penggunaannya, buat kode seperti ini ketika membuat postingan (gunakan mode HTML)</div>
<blockquote class="tr_bq">
<div style="text-align: center;"> 
<ul class="button"> 
<li><a class="demo" href="http://blog.masholeh.web.id/" target="_blank">Demo</a></li> 
<li><a class="download" href="http://blog.masholeh.web.id/" target="_blank">Download</a></li> 
</ul> 
</div> 
<div class="clear"></div></blockquote>
5. Kemudian publikasikan dan lihat hasilnya 
<div>
 
Keterangan : 
Ganti Link yang berwarna merah dengan link demo anda ! 
Ganti Link yang berwarna hijau dengan link download anda !</div>
</div>
</div>

Blog Masholeh || Cara Membuat Tombol Demo dan Download di Blogger - Banyak tutorial bagaimana cara membuat tombol demo dan download, nah...

Baca selengkapnya »

05.16 +

Membuat Efek Loading di Blog dengan CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG9zrYKXpjVUAYFzHYlOLYk4V870daPXDCh1NXbhy0H1aKBPFD_73Srhd2Rv6t57eJANsKpCQklcB87GC-mY3egQ0LQVXhjID-GYMyLbH5Imw2d4X3wAvowE00fiY_DEOp0atyC7f4CCEX/s1600/efek+loading+blogger+jquery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Efek Loading di Blog dengan CSS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG9zrYKXpjVUAYFzHYlOLYk4V870daPXDCh1NXbhy0H1aKBPFD_73Srhd2Rv6t57eJANsKpCQklcB87GC-mY3egQ0LQVXhjID-GYMyLbH5Imw2d4X3wAvowE00fiY_DEOp0atyC7f4CCEX/s1600/efek+loading+blogger+jquery.jpg" title="Membuat Efek Loading di Blog dengan CSS" /></a></div>
 
Blog Masholeh || Membuat Efek Loading di Blog dengan CSS, Kali ini kita membuat efek animasi yang ditampilkan bukan karena terpicu oleh momen klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang efek animasi loading ketika perpindahan halaman dengan cara ini: 
 
Anggaplah JQuery sudah terpasang di blog kita. Pertama, masuklah ke halaman editor HTML template, kemudian letakkan kode CSS ini di atas kode tag ]]></b:skin> atau <span style="background-color: white; border: 0px; color: #333333; font-family: Times, 'Times New Roman', serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;"></head> dengan pembungkus <style>...</style>: 
 
<pre style="background-color: #002b36; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 3px; color: #111111; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 11.6px; line-height: 1.5em; margin-bottom: 1em; margin-top: 1em; padding: 0.5em 1em; position: relative; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;"><code class="css" style="background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; color: #859900; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; margin: 0px auto; padding: 0px; vertical-align: baseline;">#efek-load-db {
 position:fixed !important;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 z-index:9999;
 background-color:black;
 color:white;
 padding:1em 1.2em;
 display:none;
}</code></pre>
 
Kemudian sisipkan kode ini di atas tag kode </body>: 
 
<pre style="background-color: #002b36; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 3px; color: #111111; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 11.6px; line-height: 1.5em; margin-bottom: 1em; margin-top: 1em; padding: 0.5em 1em; position: relative; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;"><code class="xml" style="background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; color: #859900; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; margin: 0px auto; padding: 0px; vertical-align: baseline;"><script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="efek-load-db">Sedang Memuat...</div>');
$(window).on("beforeunload", function() {
 $('#efek-load-db').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script></code></pre>
 
Klik Simpan Template. 
 
Jika sobat ingin memambahkan / memberi animasi gunakan contoh css dibawah ini: 
 
<pre style="background-color: #002b36; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 3px; color: #111111; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 11.6px; line-height: 1.5em; margin-bottom: 1em; margin-top: 1em; padding: 0.5em 1em; position: relative; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;"><code class="css" style="background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; color: #859900; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; margin: 0px auto; padding: 0px; vertical-align: baseline;">#efek-load-db {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#222222 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jOUiO8hw0dWyoGdB6Jno7tbLbWYPDbFDzehBDFxzttuY3wCGkOpH4M3SwUOLfPqU6nw5WZ6wKGxIrB8eqO2g8VCdGeY5ZmasGQFhJtk_4oiS5XZccr_Tw9gYDv8T32zgarlZpE3MVUA/s1600/AjaxLoader.gif') no-repeat 50% 50%;font:0/0 a;
text-shadow:none;
padding:1em 1.2em;
display:none;
}</code></pre>
 
untuk membuat animasi loading kunjungi <a href="http://www.ajaxload.info/">http://www.ajaxload.info/</a> 
 
Semoga berguna dan bermanfaat..</div>

Blog Masholeh || Membuat Efek Loading di Blog dengan CSS , Kali ini kita membuat efek animasi yang ditampilkan bukan karena terpicu ol...

Baca selengkapnya »

13.57 +

Cara Membuat Efek Blur pada Item menggunakan CSS dan JQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZi9r27kDmU3rbZ9xdhm-_TMPh4pcjD9-M2P0tDCbMp_NX7eUTBD7ki2gCRUnbQXyJuIRp2ic7EVSWDeK88EHDhlshlL5H-5kA88Kk1KB41N5NQ_CIf1DvqxerwrPIrISLRPvLM2UKHrt9/s1600/ItemBlurEffect1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Blur pada Item menggunakan CSS dan JQuery" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZi9r27kDmU3rbZ9xdhm-_TMPh4pcjD9-M2P0tDCbMp_NX7eUTBD7ki2gCRUnbQXyJuIRp2ic7EVSWDeK88EHDhlshlL5H-5kA88Kk1KB41N5NQ_CIf1DvqxerwrPIrISLRPvLM2UKHrt9/s320/ItemBlurEffect1.jpg" title="Cara Membuat Efek Blur pada Item menggunakan CSS dan JQuery" width="320" /></a></div>
 
Blog Masholeh || Cara Membuat Efek Blur pada Item menggunakan CSS dan JQuery, Dalam tutorial ini saya ingin menunjukkan kepada Anda bagaimana untuk membuat efek blur sederhana untuk item berbasis teks. Idenya adalah untuk memiliki satu kotak teks yang akan berefek kabur saat Item dalam fokus cursor. Hal ini akan membuat semacam "fokus" efek yang menarik perhatian ke item saat yang lain kabur. Kita akan menggunakan CSS3 transisi dan beberapa jQuery untuk menerapkan efek tersebut. hasil terbaik dapat dilihat di Safari atau Chrome (di sini anda akan mendapatkan transisi halus). 
 
Karena kita akan menggunakan transisi, efek ini hanya akan bekerja dengan baik di browser yang mendukung efek ini. Jadi mari kita mulai! 
 
 
Kode Markup 
 
Struktur ini akan menjadi bagian dengan beberapa artikel. Setiap item artikel akan memiliki header dan paragraf: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
<section class="ib-container" id="ib-container"> 
    <article> 
        <header> 
                         <h3><a href="#">Judul Anda</a></h3> 
             Teks Lainnya 
        </header> 
        Cuplikan teks 
    </article> 
    <article> 
         
    </article> 
     
</section></blockquote>
 
CSS 
 
Wadah utama untuk lebar tetap dan berpusat : 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
.ib-container{ 
    position: relative; 
    width: 800px; 
    margin: 30px auto; 
}</blockquote>
 
Mari kita float ( artikel keluar akan mengambang ) dengan bantuan dari :before dan :after pseudo elements: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
.ib-container:before, 
.ib-container:after { 
    content:""; 
    display:table; 
} 
.ib-container:after { 
    clear:both; 
}</blockquote>
 
Sekarang , mari kita beri gaya pada item artikel. kita akan membuat efek melayang dan menambahkan dua bayangan pada kotak. 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
.ib-container article{ 
    width: 140px; 
    height: 220px; 
    background: #fff; 
    cursor: pointer; 
    float: left; 
    border: 10px solid #fff; 
    text-align: left; 
    text-transform: none; 
    margin: 15px; 
    z-index: 1; 
    box-shadow: 
        0px 0px 0px 10px rgba(255,255,255,1), 
        1px 1px 3px 10px rgba(0,0,0,0.2); 
    transition: 
        opacity 0.4s linear, 
        transform 0.4s ease-in-out, 
        box-shadow 0.4s ease-in-out; 
}</blockquote>
 
Untuk browser WebKit kita akan menambahkan 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
-webkit-backface-visibility: hidden</blockquote>
 
untuk menghindari flicker singkat. 
 
Gaya elemen teks dan membuat beberapa tipografi yang bagus. Warna dan teks - bayangan setiap elemen: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
.ib-container h3 a{ 
    font-size: 16px; 
    font-weight: 400; 
    color: rgba(0, 0, 0, 1); 
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 1); 
    opacity: 0.8; 
} 
.ib-container article header span{ 
    font-size: 10px; 
    font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
    padding: 10px 0; 
    display: block; 
    color: rgba(255, 210, 82, 1); 
    text-shadow: 0px 0px 0px rgba(255, 210, 82, 1); 
    text-transform: uppercase; 
    opacity: 0.8; 
} 
.ib-container article p{ 
    font-family: Verdana, sans-serif; 
    font-size: 10px; 
    line-height: 13px; 
    color: rgba(51, 51, 51, 1); 
    text-shadow: 0px 0px 0px rgba(51, 51, 51, 1); 
    opacity: 0.8; 
}</blockquote>
 
Dan sekarang kita akan menambahkan transisi ke ketiga. Sekali lagi, tiga sefek yaitu: opacity, text-shadow dan warna: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
.ib-container h3 a, 
.ib-container article header span, 
.ib-container article p{ 
    transition: 
    opacity 0.2s linear, 
    text-shadow 0.5s ease-in-out, 
    color 0.5s ease-in-out; 
}</blockquote>
 
Kelas blur akan diterapkan ke semua turunan dari item saat melayang, untuk membuat kotak terlihat kabur. kita juga akan menurunkan efek opacity sedikit: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
.ib-container article.blur{ 
    box-shadow: 0px 0px 20px 10px rgba(255,255,255,1); 
    transform: scale(0.9); 
    opacity: 0.7; 
}</blockquote>
 
Dalam rangka untuk membuat elemen teks terlihat buram, kita akan membuat warna transparan dengan menetapkan opacity dari nilai RGBA ke 0, dan kita akan memperbesar efek text-shadow jarak blur : 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
.ib-container article.blur h3 a{ 
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9); 
    color: rgba(0, 0, 0, 0); 
    opacity: 0.5; 
} 
.ib-container article.blur header span{ 
    text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9); 
    color: rgba(255, 210, 82, 0); 
    opacity: 0.5; 
} 
.ib-container article.blur  p{ 
    text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9); 
    color: rgba(51, 51, 51, 0); 
    opacity: 0.5; 
}</blockquote>
 
Item saat melayang akan sedikit membesar dan menyesuaikan bayangan kotak. Kita juga akan menetapkan z.index tinggi untuk menjamin bahwa item akan selalu berada di atas yang lain: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
.ib-container article.active{ 
    transform: scale(1.05); 
    box-shadow: 
        0px 0px 0px 10px rgba(255,255,255,1), 
        1px 11px 15px 10px rgba(0,0,0,0.4); 
    z-index: 100;  
    opacity: 1; 
}</blockquote>
 
Terakhir, tapi bukan akahir, kita akan mengatur opacity elemen teks ke 1: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
.ib-container article.active h3 a, 
.ib-container article.active header span, 
.ib-container article.active p{ 
    opacity; 1; 
}</blockquote>
 
CSS dari semuanya telah selesai, Mari kita lihat JavaScriptnya. 
 
JavaScript 
 
Jadi, ketika kita memiliki lebih dari satu artikel, kita akan memberikan semua artikel lainnya efek kelas blur: 
 
<pre style="background-color: #002b36; border-color: rgb(200, 200, 200) rgb(200, 200, 200) rgb(200, 200, 200) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 3px; color: #111111; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 11.6px; line-height: 1.5em; margin-bottom: 1em; margin-top: 1em; padding: 0.5em 1em; position: relative; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;"><code class="ruby" style="background-image: none; background-position: initial initial; background-repeat: initial initial; border: none; color: #859900; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; margin: 0px auto; padding: 0px; vertical-align: baseline;">var $container = $('#ib-container'),
 $articles = $container.children('article'),
 timeout;

$articles.on( 'mouseenter', function( event ) {
 
 var $article = $(this);
 clearTimeout( timeout );
 timeout = setTimeout( function() {
 
 if( $article.hasClass('active') ) return false;
 
 $articles.not($article).removeClass('active').addClass('blur');
 
 $article.removeClass('blur').addClass('active');
 
 }, 75 );
 
});

$container.on( 'mouseleave', function( event ) {
 
 clearTimeout( timeout );
 $articles.removeClass('active blur');
 
});</code></pre>
 
Demikian langkah dari semuanya, Saya harap Anda menikmati tutorial kecil ini dan dapat berguna....</div>

Blog Masholeh || Cara Membuat Efek Blur pada Item menggunakan CSS dan JQuery , Dalam tutorial ini saya ingin menunjukkan kepada Anda b...

Baca selengkapnya »

03.22 +

Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
Blog Masholeh || Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS , Dalam tutorial ini kita akan belajar tentang membuat Menu Accordion menggunakan CSS3. Ada banyak tutorial CSS3 akordeon yang bisa sobat temukan, namun dalam versi ini kita akan menggunakan css :target pseudo-class dan menu ini akan bekerja pada browser yang mendukung properti CSS3. cara dan langkajnya silahkan disimak dibawah ini: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF0sfnfAfP2BMj4ypUOn19O0KTbCAuumU4Yub8fSPGXnWRpoGBDF6AnOG6nI_pAVU_WLlmHjRwi0MnyCt-C6assNi8-TZvlUQXvcGPD1cL0G253L71KdAOcbx_syXX3fa60cdLoPg4swk0/s1600/html-css3-accordian-menu-tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS " border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF0sfnfAfP2BMj4ypUOn19O0KTbCAuumU4Yub8fSPGXnWRpoGBDF6AnOG6nI_pAVU_WLlmHjRwi0MnyCt-C6assNi8-TZvlUQXvcGPD1cL0G253L71KdAOcbx_syXX3fa60cdLoPg4swk0/s320/html-css3-accordian-menu-tutorial.jpg" title="Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS " width="320" /></a></div>
 
 
<span style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;">Langkah awal membuat wrapper & menu 
 Pertama kita membuat wrapper utama tag div untuk menampung & pusat semua konten menunya di dalam tag body. Di dalam tag wrapper, kita perlu membuat daftar unordered dengan nama kelas dan memberi setiap item dengan id berbeda. Dengan memberikan setiap daftar item id itu sendiri, kita akan menggunakan: Target pemilih yang akan memungkinkan kita untuk memberi gaya dan efek membuka layaknya menu akordeon. Anda perlu membuat setiap daftar id yang berbeda (misalnya satu, dua dst) untuk target pemilih sebagai fungsi, ini akan membuat sub menu terlihat dengan efek membuka ketika element menu diklik. lihat kode dibawah ini: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
<div id="wrapper"> 
    <ul class="menu-akordeon"> 
        <li id="satu"><a href="#link">Menu satu</a></li> 
        <li id="dua"><a href="#link">Menu dua</a></li> 
        <li id="tiga"><a href="#link">Menu tiga</a></li> 
        <li id="empat"><a href="#link">Menu empat</a></li> 
    </ul> 
</div></blockquote>
 
<span style="background-color: white; border: 0px; color: #333333; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif; line-height: 22.390625px; margin: 0px auto; padding: 0px; vertical-align: baseline;">Menambahkan sub Menu Untuk sub menu, kita perlu menambahkan unordered daftar kedua dengan nama kelas sendiri dalam setiap item daftar. kegunaan dari sub menu ini adalah ketika menu utama di klik, maka daftar menu ini yang akan muncul, cara membuatnya sbb: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
<li id="satu"><a href="#link">Menu satu</a> 
     <ul class="sub-menu"> 
           <li><a href="#link satu">Terbuka 1</a></li> 
           <li><a href="#link satu">Terbuka 2</a></li> 
           <li><a href="#link satu">Terbuka 3</a></li> 
     </ul> 
</li></blockquote>
 
jika menu dan sub menu sampai pada hasil akhir, maka kode htmlnya akan menjadi seperti ini jika menu dan sub menu disatukan: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
<div id="wrapper"> 
    <ul class="menu-akordeon"> 
        <li id="satu"><a href="#link">Menu satu</a></li> 
              <ul class="sub-menu"> 
                 <li><a href="#link satu">Terbuka 1</a></li> 
                 <li><a href="#link satu">Terbuka 2</a></li> 
                 <li><a href="#link satu">Terbuka 3</a></li> 
              </ul> 
        </li> 
        <li id="dua"><a href="#link">Menu dua</a></li> 
        <li id="tiga"><a href="#link">Menu tiga</a></li> 
        <li id="empat"><a href="#link">Menu empat</a></li> 
    </ul> 
</div></blockquote>
 
jika anda lebih banyak sub menu, silahkan lakukan langkah yang sama membuat sub menunya dan tempatkan seperti yang telah saya terapkan. sedangkan untuk cssnya, kita buat wrappernya dulu seperti ini: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
#wrapper { 
width:250px; 
margin: 0 auto; 
}</blockquote>
 
ubah lebar 250 pixel sesuai keinginan atau kebutuhan anda. jika ingin anda bisa menambahkan gaya background, font, margin, pading dsb. untuk css menunya perhatikan kode css berikut: Sebagai langkah pertama untuk menu akordeon, Anda perlu menambahkan ulang gaya menu. css berikut ini akan menghapus margins, paddings, list styles, borders dan outline. 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
.menu-akordeon, 
.menu-akordeon ul, 
.menu-akordeon li, 
.menu-akordeon a, 
.menu-akordeon span { 
 margin: 0; 
 padding: 0; 
 border: 0; 
 outline: none; 
} 
 
.menu-akordeon li { 
 list-style: none; 
}</blockquote>
 
Sekarang membuat css untuk link menu, ini termasuk gaya CSS3 Gradient, gaya font, bayangan dengan beberapa css dasar. 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
/* Contoh css3 menu Accordian db */ 
 
.menu-akordeon li > a { 
 display: block; 
 position: relative; 
 min-width: 160px; 
 padding: 0 10px 0 0; 
 text-align: center; 
 height: 32px; 
 color: #FFFFFF; 
 font: bold 12px/32px Arial, sans-serif; 
 text-decoration: none; 
 background: #343435; 
 background: -moz-linear-gradient(top, #343435 1%, #4a4a4a 100%); 
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#343435), color-stop(100%,#4a4a4a)); 
 background: -webkit-linear-gradient(top, #343435 1%,#4a4a4a 100%); 
 background: -o-linear-gradient(top, #343435 1%,#4a4a4a 100%); 
 background: -ms-linear-gradient(top, #343435 1%,#4a4a4a 100%); 
 background: linear-gradient(top, #343435 1%,#4a4a4a 100%); 
 -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
 -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
 box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
} 
 
.menu-akordeon > li:hover > a, 
.menu-akordeon > li:target > a { 
 text-shadow: 1px 1px 1px rgba(255,255,255, .2); 
 background: #20a4ca; 
 background: -moz-linear-gradient(top, #20a4ca 1%, #47b5d4 100%); 
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#20a4ca), color-stop(100%,#47b5d4)); 
 background: -webkit-linear-gradient(top, #20a4ca 1%,#47b5d4 100%); 
 background: -o-linear-gradient(top, #20a4ca 1%,#47b5d4 100%); 
 background: -ms-linear-gradient(top, #20a4ca 1%,#47b5d4 100%); 
 background: linear-gradient(top, #20a4ca 1%,#47b5d4 100%); 
 -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
 -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
 box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
}</blockquote>
 
Selanjutnya Anda perlu membuat css untuk sub-menunya, ini termasuk warna latar belakang, bayangan dan dasar-dasar lainnya untuk membantu membuat sub-menu terlihat rapi. lihat kode css ini: 
 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
/* Contoh CSS Sub-Menu db */ 
 
.sub-menu li a { 
 color: #797979; 
 text-shadow: 1px 1px 0px rgba(255,255,255, .2); 
 background: #eae9e9; 
 border-bottom: 1px solid #c1bfbf; 
 -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
 -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
 box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); 
} 
 
.sub-menu li:hover a { background: #f6f5f5; }</blockquote>
 
Untuk melengkapi menu akordeon, Anda perlu menyelesaikan stylesheet dengan kode di bawah ini: 
<blockquote class="tr_bq" style="background-color: #eeeeee; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(128, 0, 0); border-style: solid; border-width: 1px 1px 1px 5px; color: #222222; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.8em; margin: 20px 0px; overflow: auto; padding: 10px 20px; position: relative; quotes: none; vertical-align: baseline;">
/* CSS untu mengfungsikan Accordian */ 
 
.menu-akordeon li > .sub-menu { 
 height: 0; 
 overflow: hidden; 
 -webkit-transition: height .2s ease-in-out; 
 -moz-transition: height .2s ease-in-out; 
 -o-transition: height .2s ease-in-out; 
 -ms-transition: height .2s ease-in-out; 
 transition: height .2s ease-in-out; 
} 
 
.menu-akordeon li:target > .sub-menu { 
 height: 98px; 
}</blockquote>
 
CSS diatas untuk membuat efek menyembunyikan sub-menu, yaitu gaya transisi yang memberi akordeon sub-menu drop out ketika diklik. saya membuat ukuran 98px untuk tinggi karena saya membuat menu dengan ukuran yang sama dari sub link untuk setiap menu. Jika Anda berniat untuk membuat yang berbeda dari sub-link untuk setiap menu, Anda harus menambahkan ketinggian yang berbeda untuk masing-masing sub-menu tergantung pada berapa banyak link yang Anda tempatkan.  
 
Semoga berguna dan bermanfaat...</div>

Blog Masholeh || Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS , Dalam tutorial ini kita akan belajar tentang membuat Menu Acco...

Baca selengkapnya »

14.31 +

Blogger

CSS

Javascript

Cara Membuat Search Box Blog Seperti Search Box Google di Blogger

Cara Membuat Tombol Demo dan Download di Blogger

Membuat Efek Loading di Blog dengan CSS

Cara Membuat Efek Blur pada Item menggunakan CSS dan JQuery

Cara Membuat Menu Vertikal Accordion di Blog Dengan CSS

Entri Populer

Arsip Blog