Desember 2013

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 +

Blogger

CSS

Javascript

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

Entri Populer

Arsip Blog