Blog Masholeh

Membuat efek kertas terselip dengan CSS

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFs6iiCwbk5lNWuyEYDJAhNc0_r8gRU6GkTpkBUy84NqHx_OCVdm946M3_l1XnFQEui0E_cUaSdHr6HhW-nIhSqDKfPJPwauy_GnSU06k5-rP_tQtSdtOObEVWotavI5aE4wjjUpGdwaxv/s1600/thumb-efek-kertas-terselip.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFs6iiCwbk5lNWuyEYDJAhNc0_r8gRU6GkTpkBUy84NqHx_OCVdm946M3_l1XnFQEui0E_cUaSdHr6HhW-nIhSqDKfPJPwauy_GnSU06k5-rP_tQtSdtOObEVWotavI5aE4wjjUpGdwaxv/s1600/thumb-efek-kertas-terselip.jpg" width="200" /></a></div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
 </div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Efek yang akan kita buat pada tutorial ini adalah efek kertas yang terselip. Efek ini juga merupakan contoh lain dari penerapan Pseudo-Element Before dan After yang sebelumnya telah anda pelajari dalam tutorial berjudul “Mengenal lebih dalam CSS Pseudo Element” dan beberapa kasus yang pernah dibahas, seperti pada tutorial “Membuat CSS Tooltip”</div>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Kembali ke pembahasan utama, kali ini kita akan membuat sebuah efek kertas yang terselip ke dalam lubang. Berikut ini adalah screenshot dari efek yang kita bicarakan jika anda masih belum memiliki gambarannya.</div>
<div class="post-image" style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 13px; margin: 20px 0px; padding: 20px; text-align: center;">
<img alt="Efek Kertas Terselip Preview" src="https://lh3.googleusercontent.com/-jPUTJyZxX6Y/UdDNZAQmCaI/AAAAAAAACIw/HHLEfSPtnXY/s800/01-07-2013%25207-28-40.png" style="margin: 0px; max-width: 100%; padding: 0px;" /></div>
<div class="post-image" style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 13px; margin: 20px 0px; padding: 20px; text-align: center;">
<a class="button" href="https://dl.dropboxusercontent.com/u/26808427/cdn/ariona/demo/tucked-paper/index.html" style="background-color: #32beff; background-position: initial initial; background-repeat: initial initial; color: black; display: inline-block; margin: 0px; padding: 10px 20px; text-decoration: none;" target="_blank" title="Demonstrasi Efek Kertas Terselip">Demonstrasi</a></div>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
Markup HTML</h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Untuk markup HTMLnya sederhana saja, kita hanya membutuhkan sebuah div sebagai objek kertas, saya beri kelas kertas pada div tersebut. Saya juga tambahkan sedikit random/dummy text pada kertas tersebut.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; font-size: 14px; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;"><div class="kertas">
 <h1>Lorem Ipsum Dolor Sit Amet</h1>
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut at consectetur officia et accusamus inventore dolor cupiditate tempore fuga alias aliquam quo dolorum voluptatem tenetur ipsum corporis commodi vitae! Iusto!
 
</div></pre>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
CSS</h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Pertama-tama kita beri style terlebih dahulu kertas yang akan kita selipkan nantinya beserta background dari bodynya.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; font-size: 14px; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">body{
 background:#d8d8d8;
}
.kertas{
 background:white;
 width:400px;
 margin:20px auto;
 padding:20px;
 position:relative;
 font-family:cambria,serif;
 box-shadow:0 1px 10px rgba(0,0,0,.3);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Selanjutnya adalah efek utama yang akan kita buat, Tekniknya sangat sederhana, kita buat tambahkan pseudo element pada class kertas, yang akan menjadi efek lubang untuk menyelipkan kertas.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; font-size: 14px; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">.kertas::before, .kertas::after{
 background:#d8d8d8;
 content:"";
 width:100px;
 height:50px;
 position:absolute;
 top:-25px;
 box-shadow:0 5px 10px -7px rgba(0,0,0,.3);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
style tersebut akan membuat sebuah box yang akan kita gunakan untuk menutupi ujung-ujung kertas dan pada style selanjutnya kita akan mengatur rotasi dari tiap ujung.</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; font-size: 14px; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">.kertas::before{
 left:-50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
.kertas::after{
 right:-50px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Silahkan simpan pekerjaan anda dan perhatikan apa yang ditampilkan dalam browser.</div>
<h2 style="background-color: white; font-family: 'Crete Round', Arial; font-weight: normal; margin: 0px 0px 20px; padding: 0px;">
Efek Selotip</h2>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Dengan teknik yang sama, kita juga bisa membuat efek kertas yang menempel dengan menggunakan <a href="https://www.google.com/search?q=selotip&tbm=isch&tbo=u&source=univ&sa=X&ei=A8XQUbvTJcTlrAfpxYGgAQ&ved=0CEYQsAQ" style="color: #ef8700; margin: 0px; padding: 0px; text-decoration: none;" title="Selotip">selotip</a> di setiap ujungnya. yang perlu kita lakukan hanyalah merubah tinggi dari pseudo element dan memberi background yang transparan</div>
<pre class="prettyprint" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 2px; background-color: #fffcef; border-bottom-color: rgb(255, 225, 109); border-bottom-width: 1px; border-style: solid none; border-top-color: rgb(255, 225, 109); border-top-width: 1px; box-shadow: none; font-family: consolas, monaco; font-size: 14px; margin: 20px -20px; overflow: auto; padding: 20px; text-shadow: white 0px 1px 1px;">.kertas::before, .kertas::after{
 background:rgba(255,255,255,.5);
 content:"";
 width:100px;
 height:25px;
 position:absolute;
 top:-10px;
 box-shadow:0 5px 10px -7px rgba(0,0,0,.3);
}</pre>
<div style="background-color: white; font-family: roboto, calibri, 'segoe ui', arial, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 20px; padding: 0px;">
Dalam contoh di atas saya memberikan warna transparan dengan system rgba, anda bisa menggunakan background-image dan membuat gambar selotip yang lebih realistis.</div>

Efek yang akan kita buat pada tutorial ini adalah efek kertas yang terselip. Efek ini juga merupakan contoh lain dari penerapan Pseudo-...

Baca selengkapnya »

03.01 +

Free Download Flat UI Pro Personal License PSD & HTML

Masholeh || Free Download Flat UI Pro Personal License PSD & HTML  
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Fix8MYZPdz-icJyxTqUnbXsUcAux5Mg4iwYq7mzbam5NDyGhvr6E1LS_C4oCUPIhR9LlYugNkFpmWIx7OXABQiqj0qOCE1QTNFwNt0FDoOxPb5s4y0RC-aUa8eFurdNK00APyXV_sM4/s1600/Flat+UI+pro.png" imageanchor="1" style="color: #999999; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Free Download Flat UI Pro Personal License PSD & HTML" border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Fix8MYZPdz-icJyxTqUnbXsUcAux5Mg4iwYq7mzbam5NDyGhvr6E1LS_C4oCUPIhR9LlYugNkFpmWIx7OXABQiqj0qOCE1QTNFwNt0FDoOxPb5s4y0RC-aUa8eFurdNK00APyXV_sM4/s400/Flat+UI+pro.png" style="border: 1px solid rgb(219, 219, 219); height: 150px; max-width: 100%; padding: 4px; width: 220px;" title="" width="400" /></a></div>
 
<blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9RIqMgf_O7VQka1Hzoai7F4rYiaDZd7PG7k4ksdYd6qKTLtYwkDEUElUyLlU0ptI6neylBAn1uKuWE3kd9Cetx4ac_D87lJ6xDs4AczqmX83mJ-v_3HcCSkb67jBTr2h4gpJTI6-oQ8d6/s1600/quotation-l.png); background-position: 0% 5px; background-repeat: no-repeat no-repeat; color: #777777; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin: 20px; padding-left: 40px;">
<div style="text-align: justify;">
Bootstrap, the popular front-end framework which hailed from Twitter, continues to grow as a quick way for developers to get an attractive site up and running in little time. It’s a great starting point, but Bootstrap is often left completely un-customized, and its popularity has left the framework’s distinct design looking default and monotonous.</div>
<div style="text-align: justify;">
To bring some variety to this space, Designmodo, the team behind Dribbbleboard and this slick IMDB concept, is launching Flat UI, a free HTML user interface kit based on Bootstrap. The kit packs PSD files of buttons, inputs, selects, checkboxes, tags, menus, progress bars, sliders and navigation elements, as well as color swatches and SVG glyphs.</div>
</blockquote>
 Bootstrap, kerangka populer front-end yang berasal dari Twitter, terus berkembang sebagai cara cepat bagi pengembang untuk mendapatkan situs Facebook yang menarik dan berjalan dalam waktu sedikit. Ini adalah titik awal yang bagus, tapi Bootstrap sering tersisa benar-benar tidak disesuaikan, dan popularitasnya telah meninggalkan desain yang berbeda kerangka yang mencari default dan monoton. Untuk membawa beberapa variasi untuk ruang ini, Designmodo, tim di belakang Dribbbleboard dan konsep IMDB licin ini, meluncurkan FLAT UI, gratis kit antarmuka pengguna HTML berdasarkan Bootstrap. Kit bungkus file PSD tombol, input, memilih, checkbox, tag, menu, progress bar, slider dan elemen navigasi, serta swatch warna dan mesin terbang SVG. 
<div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 18px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmT8Dd9K9NOpTIeP6dkCisit28R5ccogoRV8devZouxrT7dN_h_33_CKLJp-g7XRHalxFUNvz6CHWG5N2AENNq4p6tyRFTPfpVaD7q0W3oop75usNknbXlc0ZLqFthZWQ30K8lgkSJR7A/s1600/flat+UI.png" imageanchor="1" style="color: #999999; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Free Download Flat UI Pro Personal License PSD & HTML" border="0" height="139" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmT8Dd9K9NOpTIeP6dkCisit28R5ccogoRV8devZouxrT7dN_h_33_CKLJp-g7XRHalxFUNvz6CHWG5N2AENNq4p6tyRFTPfpVaD7q0W3oop75usNknbXlc0ZLqFthZWQ30K8lgkSJR7A/s320/flat+UI.png" style="border: 1px solid rgb(219, 219, 219); height: 150px; max-width: 100%; padding: 4px; width: 220px;" title="" width="320" /></a></div>
 
<blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9RIqMgf_O7VQka1Hzoai7F4rYiaDZd7PG7k4ksdYd6qKTLtYwkDEUElUyLlU0ptI6neylBAn1uKuWE3kd9Cetx4ac_D87lJ6xDs4AczqmX83mJ-v_3HcCSkb67jBTr2h4gpJTI6-oQ8d6/s1600/quotation-l.png); background-position: 0% 5px; background-repeat: no-repeat no-repeat; color: #777777; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin: 20px; padding-left: 40px;">
This time i want to share Flat UI PSD & HTML from Designmodo.com . Its very interesting for web designer and very easy to use especially for prototyping </blockquote>
<blockquote class="tr_bq" style="background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9RIqMgf_O7VQka1Hzoai7F4rYiaDZd7PG7k4ksdYd6qKTLtYwkDEUElUyLlU0ptI6neylBAn1uKuWE3kd9Cetx4ac_D87lJ6xDs4AczqmX83mJ-v_3HcCSkb67jBTr2h4gpJTI6-oQ8d6/s1600/quotation-l.png); background-position: 0% 5px; background-repeat: no-repeat no-repeat; color: #777777; font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.6em; margin: 20px; padding-left: 40px;">
 You can see at designmodo.com website , for complete details about <a href="http://designmodo.com/flat/" style="color: #999999; text-decoration: none;">Flat UI Pro</a></blockquote>
 Kali ini saya ingin berbagi Flat UI PSD & HTML dari Designmodo.com. Yang sangat menarik bagi desainer web dan sangat mudah digunakan terutama untuk prototyping Anda dapat melihat di website designmodo.com, untuk rincian lengkap tentang <a href="http://designmodo.com/flat/" style="color: #999999; text-decoration: none;">Flat UI Pro</a> 
<div style="background-color: white; color: #666a76; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; line-height: 28px; margin-bottom: 1.777em; orphans: 3; text-align: center; widows: 3;">
<a href="https://www.dropbox.com/s/w0xcf5jn34mt7lg/Flat-UI-PSD-HTML-Personal-License.zip" style="color: #53a1b8; text-decoration: none;" title="Download Flat UI Pro"><img alt="Download" class="aligncenter size-medium wp-image-49" height="117" src="http://ramazeta.com/wp-content/uploads/2013/09/toolbar-download-300x117.png" style="border-bottom-left-radius: 0.201em; border-bottom-right-radius: 0.201em; border-top-left-radius: 0.201em; border-top-right-radius: 0.201em; border: 0px; box-sizing: border-box; display: block; height: auto; margin: 0px auto 1.777em; max-width: 100%; padding: 4px; width: 220px;" width="300" /></a></div>
<div style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 28px; margin-bottom: 1.777em; orphans: 3; text-align: right; widows: 3;">
Sumber : http://ramazeta.com/flat-ui-personal-license-psd-html/</div>

Masholeh || Free Download Flat UI Pro Personal License PSD & HTML Bootstrap, the popular front-end framework which hailed from Tw...

Baca selengkapnya »

21.20 +

Bagaimana Cara Membuat Efek Loading dengan Javascript di Blog

<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/AVvXsEjH6V_cGCdmHF74y7KpB7fhKEdZk4tti2gik0JHfBkC-kR66cKZHkyIgn8S6K5x07lpQzJH3jJViNDp919HfwjUOAYJfKebOYAKo5SIhUgPek-XhC4wTj7fjyi8kL6mSSOCLBTZ4rsaLow/s1600/loading-thumb.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bagaimana Cara Membuat Efek Loading di Blog" border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH6V_cGCdmHF74y7KpB7fhKEdZk4tti2gik0JHfBkC-kR66cKZHkyIgn8S6K5x07lpQzJH3jJViNDp919HfwjUOAYJfKebOYAKo5SIhUgPek-XhC4wTj7fjyi8kL6mSSOCLBTZ4rsaLow/s320/loading-thumb.jpg" title="Bagaimana Cara Membuat Efek Loading di Blog" width="320" /></a></div>
 Blog Masholeh || Bagaimana Cara Membuat Efek Loading di Blog - Mungkin anda sering melihat efek loading di beberapa blog orang. Menurut saya efek loading ini sangat menambah cantik penampilan blog, dan membuat pengunjung mau menunggu karena blog sedang loading.(wkwkwkwkwk) 
 Untuk membuatnya, silahkan ikuti langkah-langkah di bawah ini : Langkah 1 : Tambahkan jQuery pada blog sobat Simpan kode di bawah ini sebelum <code style="font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px;"></head></code> 
<pre style="background-color: #002028; border-left-color: rgb(24, 78, 89); border-left-style: solid; border-left-width: 3px; clear: both; color: #84999b; font-size: 12px; line-height: 23.390625px; margin-bottom: 1.3em; margin-top: 1.3em; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="xml" style="color: #839496; display: block; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; line-height: 16px; padding: 0.5em;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/></code></pre>
<blockquote style="background-color: #445787; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: white; font-family: Ubuntu, Arial, sans-serif; font-size: 13px; line-height: 23.390625px; margin: 0.75em 0px; padding: 10px 15px; position: relative;">
Apabila template sobat sudah memiliki jQuery, lewati langkah ini. Harap diperhatikan, tidak boleh ada script jQuery lebih dari satu.</blockquote>
 
Langkah 2 : Tambahkan CSS Simpan CSS ini di atas <code style="font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px;">]]></b:skin></code> 
<pre style="background-color: #002028; border-left-color: rgb(24, 78, 89); border-left-style: solid; border-left-width: 3px; clear: both; color: #84999b; font-size: 12px; line-height: 23.390625px; margin-bottom: 1.3em; margin-top: 1.3em; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="css" style="color: #839496; display: block; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; line-height: 16px; padding: 0.5em;">#page-loader {
 position:fixed !important;
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 z-index:9999;
 background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPGiUMEYEmTtbA6IRSpCR6dvfm9N3LO1VxXYyh0k6CtwgVkwMNSdVQxJUl4rY2m4KyU6hhAyYmJcN72ZI3DCgS2gKdZCzh4YPUzjOcp6Mq3eOOehhtKp-M8yvfNVc7A-8DMcMGLXz2m4w/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
 color:white;
 padding:1em 1.2em;
 display:none;
}</code></pre>
Untuk merubah warna sesuai dengan blog sobat, silahkan edit warna dan gambar pada kode 
<pre style="background-color: #002028; border-left-color: rgb(24, 78, 89); border-left-style: solid; border-left-width: 3px; clear: both; color: #84999b; font-size: 12px; line-height: 23.390625px; margin-bottom: 1.3em; margin-top: 1.3em; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="bash" style="color: #839496; display: block; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; line-height: 16px; padding: 0.5em;">background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPGiUMEYEmTtbA6IRSpCR6dvfm9N3LO1VxXYyh0k6CtwgVkwMNSdVQxJUl4rY2m4KyU6hhAyYmJcN72ZI3DCgS2gKdZCzh4YPUzjOcp6Mq3eOOehhtKp-M8yvfNVc7A-8DMcMGLXz2m4w/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;</code></pre>
 
Langkah 2 : Tambahkan JavaScript Tambahkan kode JavaScript ini di atas <code style="font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; font-size: 12px; line-height: 16px;"></body></code> 
<pre style="background-color: #002028; border-left-color: rgb(24, 78, 89); border-left-style: solid; border-left-width: 3px; clear: both; color: #84999b; font-size: 12px; line-height: 23.390625px; margin-bottom: 1.3em; margin-top: 1.3em; overflow: auto; padding: 0.5em 1em; word-wrap: normal;"><code class="xml" style="color: #839496; display: block; font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, monospace; line-height: 16px; padding: 0.5em;"><script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
 $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script></code></pre>
 
Simpan template SEKIAN & TERIMA KASIH</div>

Blog Masholeh || Bagaimana Cara Membuat Efek Loading di Blog - Mungkin anda sering melihat efek loading di beberapa blog orang. Menurut ...

Baca selengkapnya »

18.13 +

Cara menghilangkan tulisan "Langgan: Entri (Atom)" pada blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Blog Masholeh || Cara menghilangkan tulisan "Langgan: Entri (Atom)" pada blog, artikel ini saya tujukan untuk teman saya yang bertanya, "Broo, Coro ngilangke tulisan Langgan: Entri (Atom) i piye ? 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi37RhLrmK-cajYDb_5Rj93wK7GxnRPrpiRO_8xIy2u5ipcB5F8ReaUcroA3BfuULuR1Fa6jMxc8oHxTflyedDwRIS46iUAtZ7u3e2yMEig-1DvVDX6TGJCINc2X2XXyXRY8NiUjt_N-oU/s1600/images+(1).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara menghilangkan tulisan "Langgan: Entri (Atom)" pada blog" border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi37RhLrmK-cajYDb_5Rj93wK7GxnRPrpiRO_8xIy2u5ipcB5F8ReaUcroA3BfuULuR1Fa6jMxc8oHxTflyedDwRIS46iUAtZ7u3e2yMEig-1DvVDX6TGJCINc2X2XXyXRY8NiUjt_N-oU/s320/images+(1).jpg" title="Cara menghilangkan tulisan "Langgan: Entri (Atom)" pada blog" width="320" /></a></div>
 
 
<div class="separator" style="clear: both; font-size: 13px; line-height: 17px; text-align: center;">
 </div>
Kadang blog kita ingin terlihat rapi, tentu saja begitu bukan? Ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"? Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut kita tidak penting adan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya gar lebih rapi.  Blog yang rapi, dengan tampilan yang sederhana, tidak terlau banyak tulisan atau lebar, mungkin sampai ke bawah banget :( Kita akan belajar bagaimana cara menghilangkan tulisan "Langgan: Entri (Atom)". Sehingga blog kita diharapkan bisa lebih rapi lagi, dan menarik pengunjung untuk berlama-lama di blog kita Cara Menghilangkan Tulisan "Langgan: Entri (Atom)" 1. Login ke Blogger. 2. Di halaman Dasbor, kita pilih Tata Letak. 3. Kemudian pilih Edit HTML 4. Beri tanda centang pada Expand Template Widget 5. Cari kode berikut ini  
<div class="alert" style="background-color: #333333; border: 1px dotted rgb(34, 51, 68); color: white; font-family: 'Trebuchet MS', Verdana, Arial, sans-serif; font-size: 13px; line-height: 17px; padding: 5px;">
<div class='feed-links'> 
<data:feedLinksMsg/> 
<b:loop values='data:links' var='f'> 
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> 
</b:loop> 
</div></div>
 
6. Hapus (delete) kode tersebut. 7. Simpan template jika sudah selesai. </div>

Blog Masholeh || Cara menghilangkan tulisan "Langgan: Entri (Atom)" pada blog, artikel ini saya tujukan untuk teman saya yang b...

Baca selengkapnya »

01.42 +

Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog

<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/AVvXsEj0aYU_6dptXaAKHfXPrtOhDd2jlUvTtucM3KhMGevzc7uImZkjEftFADxfqRVgN1KNQ7CXnn8CfRWD_Kmbj2qf-KBVQenFOhrZBFCs_Kp7RWOPPg4VbTwmv-QmS0FkIlhxt_XbHeEDmTSz/s1600/images+(2).jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0aYU_6dptXaAKHfXPrtOhDd2jlUvTtucM3KhMGevzc7uImZkjEftFADxfqRVgN1KNQ7CXnn8CfRWD_Kmbj2qf-KBVQenFOhrZBFCs_Kp7RWOPPg4VbTwmv-QmS0FkIlhxt_XbHeEDmTSz/s1600/images+(2).jpg" title="Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog" /></a></div>
 
Cara Membuat/Menampilkan Jam, Hari & Tanggal dengan Javascript - Jam, Hari dan Tanggal (Waktu) tidak lepas dari kehidupan, Pada kesempatan kali ini saya ingin berbagi pengetahuan tentang "Bagaimana Cara Membuat/Menampilkan Jam dan Tanggal dan Hari dengan JavasScript" .. 
 
CEKIDOT...... 
<div style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
 
Berikut Pilihan Javascript untuk Menampilkan Jam / Tanggal / Hari , sesuai dengan kebutuhan sobat : </div>
<h2 style="border-top-color: rgb(51, 51, 51); border-top-style: dashed; border-top-width: 1px; color: #222222; font-family: Coda, cursive; font-size: 20px; line-height: 1.2em; margin: 0em 0px 0px; padding-top: 10px;">
Cara Menampilkan Tanggal dengan Javascript :</h2>
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;">
<script type='text/javascript'>

</script></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
Hasilnya :  
<div style="background-color: #fbfbfb; border: 5px solid rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 1px 1px 5px; font-weight: bold; padding: 5px; width: 525px;">
<script type="text/javascript">

</script></div>
</center>
 
<h2 style="border-top-color: rgb(51, 51, 51); border-top-style: dashed; border-top-width: 1px; color: #222222; font-family: Coda, cursive; font-size: 20px; line-height: 1.2em; margin: 0em 0px 0px; padding-top: 10px;">
Cara Menampilkan Hari dan Tanggal dengan Javascript :</h2>
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;"><script type='text/javascript'>

</script></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
Hasilnya :  
<div style="background-color: #fbfbfb; border: 5px solid rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 1px 1px 5px; font-weight: bold; padding: 5px; width: 525px;">
<script type="text/javascript">

</script></div>
</center>
 
<h2 style="background-color: #fbfbfb; border-top-color: rgb(51, 51, 51); border-top-style: dashed; border-top-width: 1px; color: #222222; font-family: Coda, cursive; font-size: 20px; line-height: 1.2em; margin: 0em 0px 0px; padding-top: 10px;">
Cara Menampilkan Jam saat ini! dengan Javascript ( Pasif ) :</h2>
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;"><script type="text/javascript">

</script></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
Hasilnya :  
<div style="background-color: #fbfbfb; border: 5px solid rgb(255, 255, 255); box-shadow: rgb(204, 204, 204) 1px 1px 5px; font-weight: bold; padding: 5px; width: 525px;">
<script type="text/javascript">

</script></div>
</center>
 Dengan Format AM/PM :  
<blockquote style="background-color: #f0f0f0; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) rgb(51, 51, 51); border-style: solid; border-width: 1px 1px 1px 4px; color: #111111; font-family: Coda, cursive; font-size: 17px; line-height: 23.09375px; margin: 10px 0px; padding: 10px 50px; position: relative;">
<pre style="white-space: pre-wrap; width: 645px; word-wrap: break-word;"><code class="xml" style="color: black; display: block; font-family: Coda, cursive; padding: 0.5em;">
<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12) {
 a_p = "AM";
} else {
 a_p = "PM";
}
if (curr_hour == 0) {
 curr_hour = 12;
}
if (curr_hour > 12) {
 curr_hour = curr_hour - 12;
}

function checkTime(i) {
 if (i < 10) {
 i = "0" + i;
 }
 return i;
}
setInterval(showTime, 500);
//-->
</script></div>
</div>
</center>
 
Silahkan berikan komentar jika ada pertanyaan :)</div>

Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog

Cara Membuat/Menampilkan Jam, Hari & Tanggal dengan Javascript - Jam, Hari dan Tanggal (Waktu) tidak lepas dari kehidupan, Pada kes...

Baca selengkapnya »

16.03 +

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 +

Blogger

CSS

Javascript

Membuat efek kertas terselip dengan CSS

Free Download Flat UI Pro Personal License PSD & HTML

Bagaimana Cara Membuat Efek Loading dengan Javascript di Blog

Cara menghilangkan tulisan "Langgan: Entri (Atom)" pada blog

Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog

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

Entri Populer

Arsip Blog