M-S Blog: Blogger

Showing posts with label Blogger. Show all posts

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/AVvXsEha4qUpV3EM_AXmQibmohC4lJL07Hg2PHXJrrSMBmC06okjXruyWhVTvle3Zil7xitL58N-2PAFTI2ea2UvO7xqDEVD23C4aK7ENtzeE6ogv4tPFyzVzUJ5g7n8OEbI7Tc86IagMnzkcYeb/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/AVvXsEha4qUpV3EM_AXmQibmohC4lJL07Hg2PHXJrrSMBmC06okjXruyWhVTvle3Zil7xitL58N-2PAFTI2ea2UvO7xqDEVD23C4aK7ENtzeE6ogv4tPFyzVzUJ5g7n8OEbI7Tc86IagMnzkcYeb/s1600/images+(2).jpg" title="Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog" /></a></div>
<br />
<span style="background-color: white;"><b style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">Cara Membuat/Menampilkan Jam, Hari & Tanggal dengan Javascript</b><span style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;"> - Jam, Hari dan Tanggal (Waktu) tidak lepas dari kehidupan, Pada kesempatan</span></span><span style="background-color: white; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;"> kali ini saya ingin berbagi pengetahuan tentang "</span><b style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">Bagaimana Cara Membuat/Menampilkan Jam dan Tanggal dan Hari dengan JavasScript</b><span style="background-color: white; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">" ..</span><br />
<br />
<span style="background-color: white; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; line-height: 23.09375px;"><b><i><span style="font-size: large;">CEKIDOT......</span></i></b></span><br />
<div style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;"> <br />
Berikut Pilihan Javascript untuk Menampilkan Jam / Tanggal / Hari , sesuai dengan kebutuhan sobat : </span></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;">
<span style="background-color: white;">Cara Menampilkan Tanggal dengan Javascript :</span></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;">
<span class="tag"><<span class="title" style="font-weight: bold;">script</span> <span class="attribute">type</span>=<span class="value" style="color: #880000;">'text/javascript'</span>></span><span class="javascript" style="opacity: 0.5;">
</span>
</span><span class="tag"></<span class="title" style="font-weight: bold;">script</span>></span></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;">Hasilnya : </span><br />
<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>
<span style="background-color: white;"><br style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;" /></span> <br />
<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;">
<span style="background-color: white;">Cara Menampilkan Hari dan Tanggal dengan Javascript :</span></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;"><span class="tag"><<span class="title" style="font-weight: bold;">script</span> <span class="attribute">type</span>=<span class="value" style="color: #880000;">'text/javascript'</span>></span><span class="javascript" style="opacity: 0.5;">
</span>
</span><span class="tag"></<span class="title" style="font-weight: bold;">script</span>></span></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;">Hasilnya : </span><br />
<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>
<br style="background-color: #fbfbfb; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;" />
<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 ( <span style="color: #990000;">Pasif </span>) :</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;"><span class="tag"><<span class="title" style="font-weight: bold;">script</span> <span class="attribute">type</span>=<span class="value" style="color: #880000;">"text/javascript"</span>></span><span class="javascript" style="opacity: 0.5;">
</span>
</span><span class="tag"></<span class="title" style="font-weight: bold;">script</span>></span></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;">Hasilnya : </span><br />
<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>
<span style="background-color: white;"><br style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;" /><span style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">Dengan Format AM/PM : </span></span><br />
<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;">
<span class="tag"><<span class="title" style="font-weight: bold;">script</span> <span class="attribute">type</span>=<span class="value" style="color: #880000;">"text/javascript"</span>></span><span class="javascript" style="opacity: 0.5;">
<!--
<span class="keyword" style="font-weight: bold;">var</span> a_p = <span class="string" style="color: #880000;">""</span>;
<span class="keyword" style="font-weight: bold;">var</span> d = <span class="keyword" style="font-weight: bold;">new</span> Date();
<span class="keyword" style="font-weight: bold;">var</span> curr_hour = d.getHours();
<span class="keyword" style="font-weight: bold;">if</span> (curr_hour < <span class="number" style="color: #008800;">12</span>) {
    a_p = <span class="string" style="color: #880000;">"AM"</span>;
} <span class="keyword" style="font-weight: bold;">else</span> {
    a_p = <span class="string" style="color: #880000;">"PM"</span>;
}
<span class="keyword" style="font-weight: bold;">if</span> (curr_hour == <span class="number" style="color: #008800;">0</span>) {
    curr_hour = <span class="number" style="color: #008800;">12</span>;
}
<span class="keyword" style="font-weight: bold;">if</span> (curr_hour > <span class="number" style="color: #008800;">12</span>) {
    curr_hour = curr_hour - <span class="number" style="color: #008800;">12</span>;
}

<span class="keyword" style="font-weight: bold;">var</span> curr_min = d.getMinutes();
curr_min = curr_min + <span class="string" style="color: #880000;">""</span>;
<span class="keyword" style="font-weight: bold;">if</span> (curr_min.length == <span class="number" style="color: #008800;">1</span>) {
    curr_min = <span class="string" style="color: #880000;">"0"</span> + curr_min;
}
document.write(curr_hour + <span class="string" style="color: #880000;">" : "</span> + curr_min + <span class="string" style="color: #880000;">" "</span> + a_p);
<span class="comment" style="color: #888888;">//--></span>
</span><span class="tag"></<span class="title" style="font-weight: bold;">script</span>></span>
</code></pre>
</blockquote>
<br style="background-color: #fbfbfb; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;" />
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;">Hasilnya : </span><br />
<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">
<!--
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;
}

<span class="function"><span class="keyword" style="font-weight: bold;">function</span> <span class="title" style="color: #880000; font-weight: bold;">checkTime</span><span class="params">(i)</span> {</span>
    <span class="keyword" style="font-weight: bold;">if</span> (i < <span class="number" style="color: #008800;">10</span>) {
        i = <span class="string" style="color: #880000;">"0"</span> + i;
    }
    <span class="keyword" style="font-weight: bold;">return</span> i;
}
setInterval(showTime, <span class="number" style="color: #008800;">500</span>);
<span class="comment" style="color: #888888;">//--></span>
</span><span class="tag"></<span class="title" style="font-weight: bold;">script</span>></span></code></pre>
</blockquote>
<center style="color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">
<span style="background-color: white;">Hasilnya : </span><br />
<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;">
<div id="clock">
<div id="clock">
</div>
<script type="text/javascript">
<!--
function showTime() {
    var a_p = "";
    var today = new Date();
    var curr_hour = today.getHours();
    var curr_minute = today.getMinutes();
    var curr_second = today.getSeconds();
    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;
    }
    curr_hour = checkTime(curr_hour);
    curr_minute = checkTime(curr_minute);
    curr_second = checkTime(curr_second);
 document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p;
    }

function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
setInterval(showTime, 500);
//-->
</script></div>
</div>
</center>
<br style="background-color: #fbfbfb; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;" />
<span style="background-color: white; color: #333333; font-family: 'Open Sans', 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px; line-height: 23.09375px;">Silahkan berikan komentar jika ada pertanyaan :)</span></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...

07:08 +

Cara Membuat Navigasi Menu Full Color 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/AVvXsEhiw2-sP9hiR4DHt6_i434uSbeIQPcMjhhOklNOB040WdQJnfNT_nfz85HSt4ksiA7fVIypi951bpxLXBACf6ohALmZxAsB8o-s19lMUc0a61-qn80upVgeoIBhZg3qzBpwfxjzrUszFZQ/s1600/Menu+Full+Color.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Navigasi Menu Full Color di Blog" border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiw2-sP9hiR4DHt6_i434uSbeIQPcMjhhOklNOB040WdQJnfNT_nfz85HSt4ksiA7fVIypi951bpxLXBACf6ohALmZxAsB8o-s19lMUc0a61-qn80upVgeoIBhZg3qzBpwfxjzrUszFZQ/s1600/Menu+Full+Color.jpg" title="Menu Navigasi Blog" width="640" /></a></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><b><br /></b></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><b>M-S Blog || Cara Mudah Membuat Navigasi Menu Full Color</b>, sangat menarik jika blog sobat di buat dengan navigasi menu seperti gambar di atas , tentu juga dengan blog sobat yang menarik akan membuat pengunjung betah dan merasa enak di pandang oleh pengunjung blog sobat . Dengan menu yang Full Color dan dapat di setting sesuai keinginan warna yang sobat mau . Sangat mudah memasang Navigasi menu Full Color ini , cuma  menambahkan class yang berisi background untuk setiap warnanya pada link menu . </span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">Berikut Tutorial Memasangnya :</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">1. Masuk Blogger</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">2. Dashboard >Pilih Template > Edit HTML</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">3. Cari code<b> </b><span style="color: red;"><b>]]></b:skin></b> </span>supaya mudah , Pake CTRL+F aja</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">4. Masukan Code CSS tepat di atas<span style="color: red;"><b> </b></span><span style="color: red;"><b>]]></b:skin></b></span></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white; color: red;"><b><span style="font-family: Verdana, sans-serif;"><br /></span></b></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
</div>
<div style="border: 1px solid rgb(121, 66, 10); color: #333333; height: 300px; line-height: 17.600000381469727px; overflow: auto; padding: 10px; width: 450px;">
<div style="margin: 0cm 0cm 13.5pt;">
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0cm;">
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">navmenu { background: #111; border-bottom: 5px solid #0091d6; position: relative; height:35px; margin: 0 auto; text-transform: uppercase; z-index: 1; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor { list-style: none; padding: 0; font: 14px Arial; font-weight: bold; width:auto; line-height: 15px; margin: auto; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li { float: left; position: relative; margin: 0px 1px 0px 0px; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li a, ul.navfullcolor li a:link { color: #fff; text-decoration: none; display: block; padding: 10px 26px; transition: all 0.2s ease; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li a:hover { color: #fff; transition: all 1s ease; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li ul { display: none; top: 35px; border-top: 5px solid #FF8000; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li:hover ul { position: absolute; display: block; padding: 0; list-style: none; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li ul li { float: none; background: #282321; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230; width:210px; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li ul li a, ul.navfullcolor li ul li a:link { color: #aaa; display: block; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">ul.navfullcolor li ul li a:hover { background: #FF8000; }<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">.green{background-color:#01A451 !important;} .green:hover{background-color:#52e052 !important;}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">.yellow{background-color:#FBC700 !important;} .yellow:hover{background-color:#FFE500 !important;}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">.red{background-color:#D52100 !important;} .red:hover{background-color:#ff0000 !important;}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">.purple{background-color:#660099 !important;} .purple:hover{background-color:#D580FE !important;}<o:p></o:p></span></span></div>
<div class="MsoNormal">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">.blue{background-color:#0091d6 !important;} .blue:hover{background-color:#80C8FE !important;</span></span></div>
</div>
</div>
</div>
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><b style="border: 0px; color: #555555; line-height: 18.031999588012695px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"></b><br style="color: #333333; line-height: 17.600000381469727px;" /></span></span>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">5. Selanjutnya letakan HTML ke dalam template,</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">    Pilih  Tata Letak > Tambah Widget ( di Atas Pos ) pilih > HTML/Javascript.<br />6. Copy kode berikut ini, lalu paste ke dalam widget HTML/Javascript</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
</div>
<div style="border: 1px solid rgb(121, 66, 10); color: #333333; height: 300px; line-height: 17.600000381469727px; overflow: auto; padding: 10px; width: 450px;">
<div style="margin: 0cm 0cm 13.5pt;">
<div class="MsoNormal" style="line-height: normal; margin-bottom: 0cm;">
<div class="MsoNormal">
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><div class='navmenu'><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><ul class='navfullcolor'><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='red'>Menu 1</a><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 1</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 3</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 4</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 5</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        </ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    </li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='yellow'>Menu 2</a><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 1</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 3</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 4</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        </ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    </li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='green'>Menu 3</a><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com>Sub Menu 1</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 3</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        </ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    </li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='purple'>Menu 4</a><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 1</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        <li><a href='http://ilmuane11.blogspot.com'>Sub Menu 2</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">        </ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    </li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='red'>Menu 5</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='yellow'>Menu 6</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;">    <li><a href='http://ilmuane11.blogspot.com' class='green'>Menu 7</a></li><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"></ul><o:p></o:p></span></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="background-color: white;"><span style="font-family: Courier New, Courier, monospace; font-size: x-small;"></div></span></span></div>
</div>
</div>
</div>
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br style="color: #333333; line-height: 17.600000381469727px;" /><b style="border: 0px; color: #555555; line-height: 18.031999588012695px; margin: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"></b><span style="color: #333333; line-height: 17.600000381469727px;"></span></span></span><br />
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">7. Klik Simpan > Selseai tinggal Review deh . jangan kaget  kalau sangat keren :D</span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;"><br /></span></span></div>
<div class="separator" style="clear: both; color: #333333; line-height: 17.600000381469727px;">
<span style="background-color: white;"><span style="font-family: Verdana, sans-serif;">Selsai , sekian tutorial blog dari saya , semoga bermanfaat :D</span></span></div>
</div>

M-S Blog || Cara Mudah Membuat Navigasi Menu Full Color , sangat menarik jika blog sobat di buat dengan navigasi menu seperti gambar d...

04:39 +

Modifikasi Popular Post Sederhana Tanpa Thumbnails

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW61ty8Vjb0CLlxE72V3sKmEQtWq5cg1CRf5wr2h2T7d7JaeS1PraFqoI7rsNe67yQwoF3MlXvTkHS05HciHNrwu44NpjZIPlxDe4rj1SF5ybKx_69g_PgeQGN1OhgVoghvLDncPXLV3g/s1600/popularposts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Modifikasi Popular Post Sederhana Tanpa Thumbnails" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW61ty8Vjb0CLlxE72V3sKmEQtWq5cg1CRf5wr2h2T7d7JaeS1PraFqoI7rsNe67yQwoF3MlXvTkHS05HciHNrwu44NpjZIPlxDe4rj1SF5ybKx_69g_PgeQGN1OhgVoghvLDncPXLV3g/s1600/popularposts.png" title="widget pupular post" /></a></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; line-height: 25.600000381469727px; text-align: justify;">
<b><span style="font-size: large;"><br /></span></b></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; line-height: 25.600000381469727px; text-align: justify;">
<b><span style="font-size: large;">M-S Blog |</span></b>| Sebenarnya dasar dari modifikasi popular post ini adalah dari modifikasi popular post warna warni yang sudah banyak bertebaran di Google. Saya sendiri kurang tahu asal script-nya dari mana, namun yang jelas dengan ini kita bisa menentukan background berbeda untuk tiap item popular post-nya. Di sini saya menggunakan popular post tanpa thumbnail dan snippets, dan juga tidak menggunakan penomoran seperti pada popular post warna-warni kebanyakan.</div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
Dengan begitu kode CSS-nya menjadi lebih sedikit dan lebih simple. Di sini saya hanya menggunakan warna dominan abu-abu, namun sebenarnya Anda bisa memberikan warna-warna cerah lainnya untuk setiap item-nya. Screenshot-nya tampak pada gambar di bawah ini.</div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOU811mgMgelWzM835ib5cUSsueYT1swePWiBqnfr7GCTMOo2lKkkJdUBinQ-gsLChOYxQRH7LON5OWA7AAmTha9hrFOEpVF5Ue5rKoEx2gcYMmFpsjbiZGBKBHYbymbSGN7LmwI1mIOM/s1600/popular+post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Modifikasi Popular Post Sederhana Tanpa Thumbnails" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOU811mgMgelWzM835ib5cUSsueYT1swePWiBqnfr7GCTMOo2lKkkJdUBinQ-gsLChOYxQRH7LON5OWA7AAmTha9hrFOEpVF5Ue5rKoEx2gcYMmFpsjbiZGBKBHYbymbSGN7LmwI1mIOM/s1600/popular+post.png" title="" width="184" /></a></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
Untuk membuatnya tentunya Anda harus menambahkan widget popular post dahulu melalui Tata Letak >> Add a gadget >> Pilih Popular Post dan hilangkan tanda centang pada thumbnails dan snippets serta tentukan jumlahnya 10 item.</div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
Kemudian silahkan copy kode CSS di bawah ini dan simpan di atas kode <b>]]></b:skin></b> atau <b></stytle></b></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<pre class=" language-css" style="background-color: #f2f2f2; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(187, 187, 187); border-style: solid; border-width: 1px 1px 1px 3px; clear: both; color: #666666; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; line-height: 25.600000381469727px; margin: 15px 25px; overflow: auto; padding: 10px;"><code class=" language-css" style="color: #126aaf; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 13px !important;"><span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">margin-top</span><span class="token punctuation" style="color: maroon;">:</span>-7px<span class="token punctuation" style="color: maroon;">;</span><span class="token property" style="color: #881280;">padding</span><span class="token punctuation" style="color: maroon;">:</span>7px <span class="token important" style="font-weight: bold;">!important</span><span class="token punctuation" style="color: maroon;">;</span><span class="token property" style="color: #881280;">list-style-type</span><span class="token punctuation" style="color: maroon;">:</span>none<span class="token punctuation" style="color: maroon;">;</span><span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">position</span><span class="token punctuation" style="color: maroon;">:</span>relative<span class="token punctuation" style="color: maroon;">;</span><span class="token property" style="color: #881280;">padding</span><span class="token punctuation" style="color: maroon;">:</span>10px <span class="token important" style="font-weight: bold;">!important</span><span class="token punctuation" style="color: maroon;">;</span><span class="token property" style="color: #881280;">width</span><span class="token punctuation" style="color: maroon;">:</span>100%<span class="token punctuation" style="color: maroon;">;</span><span class="token property" style="color: #881280;">margin-bottom</span><span class="token punctuation" style="color: maroon;">:</span>1px<span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li:nth-child(1)</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">background</span><span class="token punctuation" style="color: maroon;">:</span>#444<span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li:nth-child(2)</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">background</span><span class="token punctuation" style="color: maroon;">:</span>#555<span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li:nth-child(3)</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">background</span><span class="token punctuation" style="color: maroon;">:</span>#666<span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li:nth-child(4)</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">background</span><span class="token punctuation" style="color: maroon;">:</span>#777<span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li:nth-child(5)</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">background</span><span class="token punctuation" style="color: maroon;">:</span>#888<span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li:nth-child(6)</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">background</span><span class="token punctuation" style="color: maroon;">:</span>#999<span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li:nth-child(7)</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">background</span><span class="token punctuation" style="color: maroon;">:</span>#aaa<span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li:nth-child(8)</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">background</span><span class="token punctuation" style="color: maroon;">:</span>#bbb<span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li:nth-child(9)</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">background</span><span class="token punctuation" style="color: maroon;">:</span>#c1c1c1<span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li:nth-child(10)</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">background</span><span class="token punctuation" style="color: maroon;">:</span>#ccc<span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li a</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">color</span><span class="token punctuation" style="color: maroon;">:</span>white<span class="token punctuation" style="color: maroon;">;</span><span class="token property" style="color: #881280;">text-decoration</span><span class="token punctuation" style="color: maroon;">:</span>none<span class="token punctuation" style="color: maroon;">;</span><span class="token punctuation" style="color: maroon;">}</span>
<span class="token selector" style="color: #994500;">.PopularPosts .widget-content ul li a:hover</span><span class="token punctuation" style="color: maroon;">{</span><span class="token property" style="color: #881280;">color</span><span class="token punctuation" style="color: maroon;">:</span>#20c1ea<span class="token punctuation" style="color: maroon;">;</span><span class="token punctuation" style="color: maroon;">}</span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
Jika Anda ingin merubah background pada tiap itemnya, silahkan ganti background pada kode <b>.PopularPosts .widget-content ul li:nth-child(1) - (10)</b></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
Jika Popular Post ini tidak rata kiri dengan widget lainnya, silahkan tambahkan margin-left minus, misalnya seperti ini margin-left:-5px dan tambahkan pada kode <b>.PopularPosts .widget-content ul</b></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
Kemudian jangan lupa untuk menghapus kode <b><b:include name='quickedit'/></b> untuk mengurangi error pada validasi HTML5.</div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
Kemudian untuk menambahkan title tag pada link popular post-nya silahkan Jump To Widget dan pilih PopularPosts1 dan temukan kode seperti di bawah ini:</div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<pre class=" language-markup" style="background-color: #f2f2f2; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(187, 187, 187); border-style: solid; border-width: 1px 1px 1px 3px; clear: both; color: #666666; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; line-height: 25.600000381469727px; margin: 15px 25px; overflow: auto; padding: 10px;"><code class=" language-markup" style="color: #126aaf; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 13px !important;"><span class="token comment" spellcheck="true" style="color: #008200; font-style: italic;"></span>
            <span class="token tag" style="color: #881280;"><span class="token tag"><span class="token punctuation" style="color: maroon;"><</span>a</span> <span class="token attr-name" style="color: #994500;"><span class="token namespace" style="opacity: 0.8;">expr:</span>href</span><span class="token attr-value" style="color: #227bc0;"><span class="token punctuation" style="color: maroon;">=</span>'data:post.href'</span><span class="token punctuation" style="color: maroon;">></span></span><span class="token tag" style="color: #881280;"><span class="token tag"><span class="token punctuation" style="color: maroon;"><</span><span class="token namespace" style="opacity: 0.8;">data:</span>post</span>.<span class="token attr-name" style="color: #994500;">title</span><span class="token punctuation" style="color: maroon;">/></span></span><span class="token tag" style="color: #881280;"><span class="token tag"><span class="token punctuation" style="color: maroon;"></</span>a</span><span class="token punctuation" style="color: maroon;">></span></span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
Kemudian ganti dengan kode di bawah ini:</div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<pre class=" language-markup" style="background-color: #f2f2f2; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(187, 187, 187); border-style: solid; border-width: 1px 1px 1px 3px; clear: both; color: #666666; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 12px !important; line-height: 25.600000381469727px; margin: 15px 25px; overflow: auto; padding: 10px;"><code class=" language-markup" style="color: #126aaf; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 13px !important;"><span class="token comment" spellcheck="true" style="color: #008200; font-style: italic;"></span>
            <span class="token tag" style="color: #881280;"><span class="token tag"><span class="token punctuation" style="color: maroon;"><</span>a</span> <span class="token attr-name" style="color: #994500;"><span class="token namespace" style="opacity: 0.8;">expr:</span>href</span><span class="token attr-value" style="color: #227bc0;"><span class="token punctuation" style="color: maroon;">=</span>'data:post.href'</span> <span class="token attr-name" style="color: #994500;"><span class="token namespace" style="opacity: 0.8;">expr:</span>title</span><span class="token attr-value" style="color: #227bc0;"><span class="token punctuation" style="color: maroon;">=</span>'data:post.title'</span><span class="token punctuation" style="color: maroon;">></span></span><span class="token tag" style="color: #881280;"><span class="token tag"><span class="token punctuation" style="color: maroon;"><</span><span class="token namespace" style="opacity: 0.8;">data:</span>post</span>.<span class="token attr-name" style="color: #994500;">title</span><span class="token punctuation" style="color: maroon;">/></span></span><span class="token tag" style="color: #881280;"><span class="token tag"><span class="token punctuation" style="color: maroon;"></</span>a</span><span class="token punctuation" style="color: maroon;">></span></span></code></pre>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: 'PT Sans Narrow'; font-size: 16px; line-height: 25.600000381469727px; text-align: justify;">
Selesai dan selamat mencoba ....</div>

M-S Blog | | Sebenarnya dasar dari modifikasi popular post ini adalah dari modifikasi popular post warna warni yang sudah banyak berteb...

16:53 +

Cara Edit Robot.txt Blog atau Website yang Benar Agar SEO

<h2 style="font-weight: normal; margin: 0px; padding: 0px;">
<b><span style="font-family: Verdana, sans-serif; font-size: x-small;">M-S Blog || Cara Edit Robot.txt Blog atau Website yang Benar Agar SEO Friendly, </span></b><b style="font-family: Verdana, sans-serif; font-size: small;">Robot.txt</b><span style="font-family: Verdana, sans-serif; font-size: x-small;"> adalah komponen penting dalam sebuah website atau blog untuk '</span><i style="font-family: Verdana, sans-serif; font-size: small;">memanage'</i><span style="font-family: Verdana, sans-serif; font-size: x-small;"> sebuah halaman blog di</span><i style="font-family: Verdana, sans-serif; font-size: small;"> Mesin Pencari</i><span style="font-family: Verdana, sans-serif; font-size: x-small;"> seperti </span><i style="font-family: Verdana, sans-serif; font-size: small;">Google dan Bing</i><span style="font-family: Verdana, sans-serif; font-size: x-small;">. Sebuah </span><b style="font-family: Verdana, sans-serif; font-size: small;">robot.txt </b><span style="font-family: Verdana, sans-serif; font-size: x-small;">biasanya digunakan oleh para webmaster dan blogger untuk mengatur halaman mana yang ingin di </span><i style="font-family: Verdana, sans-serif; font-size: small;">crawl </i><span style="font-family: Verdana, sans-serif; font-size: x-small;">atau dirayapi mesin pencari dan halaman mana yang tidak ingin dirayapi </span><i style="font-family: Verdana, sans-serif; font-size: small;">search enginer. </i></h2>
<div style="margin: 0px; padding: 0px; text-align: left;">
<i><span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></i></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="color: black; margin-left: auto; margin-right: auto; padding: 4px; text-align: center;"><tbody>
<tr><td style="margin: 0px; padding: 0px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU028aL3MML0qXYkJzcJdZPAfEQEbVMbvuunSOWkJHWP5VaO22xUuzR5qUpRBlVnKy5Qm93azZvbyNHNE2IJLY2lwChdcNcdoCAhf7XWnC_xKNHMZX2oNgyQvLkI67Jf_X8lxTiF8yToU/s1600/edit+robot+di+blogger.jpg" imageanchor="1" style="color: #1e598e; margin-left: auto; margin-right: auto; text-decoration: none;"><span style="font-family: Verdana, sans-serif; font-size: x-small;"><img alt="Cara Edit Robot.txt Blog atau Website yang Benar Agar SEO Friendly" border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU028aL3MML0qXYkJzcJdZPAfEQEbVMbvuunSOWkJHWP5VaO22xUuzR5qUpRBlVnKy5Qm93azZvbyNHNE2IJLY2lwChdcNcdoCAhf7XWnC_xKNHMZX2oNgyQvLkI67Jf_X8lxTiF8yToU/s400/edit+robot+di+blogger.jpg" title="" width="400" /></span></a></td></tr>
<tr><td class="tr-caption" style="margin: 0px; padding: 0px;"><span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></td></tr>
</tbody></table>
<div style="margin: 0px; padding: 0px; text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;">Mengingat sangat penting nya sebuah <b><a href="http://www.netomaniak.com/2013/12/edit-robot-seo-friendly-di-blog.html" style="color: #1e598e; text-decoration: none;">robot.txt</a></b> di sebuah blog atau website ini yang sering juga di gunakan agar halaman tertata dengan baik di Google atau Bing (<b>SEO Friendly</b>). Kali ini <i>netomaniak.com </i>ingin membagikan tips<b> mengedit robot.txt yang baik dan benar di Blogger agar SEO friendly</b>:</span></div>
<div style="margin: 0px; padding: 0px; text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></div>
<div style="margin: 0px; padding: 0px; text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;">Sebelum memulai, saya akan melakukan tutorial ini yang saya terapkan di <b>blogspot, </b>dan berikut caranya:</span></div>
<div style="margin: 0px; padding: 0px; text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></div>
<div style="margin: 0px; padding: 0px; text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;">1. Masuk ke <b>Dasboard Blogger</b> anda.</span></div>
<div style="margin: 0px; padding: 0px; text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;">2. Klik Menu <b>Setelan/Setting </b>pada bagian paling bawah dasboard blog, lalu klik <b>Preferensi Penelusuran </b><i>(kedua paling bawah)</i></span></div>
<div style="margin: 0px; padding: 0px; text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;">3. Lihat pada bagian "Perayap dan pengindeksan", silahkan klik <b>Edit </b>pada <b>robot.txt khusus</b></span></div>
<div style="margin: 0px; padding: 0px; text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;">4. Maka akan terlihat form kosong atau default nya. Silahkan Setting sesuai halaman mana yang akan ingin dirayapi google. Lihat</span><span style="font-family: Verdana, sans-serif; font-size: x-small;"> </span><i style="font-family: Verdana, sans-serif; font-size: small;">pengaturan robot</i><span style="font-family: Verdana, sans-serif; font-size: x-small;"> </span><span style="font-family: Verdana, sans-serif; font-size: x-small;">di blog saya ini:</span></div>
<div style="font-family: Verdana, sans-serif; font-size: small; text-align: left;">
<br /></div>
<b style="background-color: #cccccc; font-family: Verdana, sans-serif; font-size: small;"><div style="text-align: left;">
<b>User-agent: Mediapartners-Google</b></div>
</b><b style="background-color: #cccccc; font-family: Verdana, sans-serif; font-size: small;"><div style="text-align: left;">
<b>Disallow: </b></div>
</b><b style="background-color: #cccccc; font-family: Verdana, sans-serif; font-size: small;"><div style="text-align: left;">
<br /></div>
</b><span style="background-color: white; font-size: x-small;"><span style="font-family: Courier New, Courier, monospace;"><b><div style="text-align: left;">
<b><span style="color: blue;">User-agent: Googlebot</span></b></div>
</b><b><div style="text-align: left;">
<b>Disallow: /search</b></div>
</b><b><div style="text-align: left;">
<b>Disallow: /?m=1</b></div>
</b><b><div style="text-align: left;">
<b>Disallow: /?m=0</b></div>
</b><b><div style="text-align: left;">
<b>Disallow: /*?m=1</b></div>
</b><b><div style="text-align: left;">
<b>Disallow: /*?m=0</b></div>
</b><b><div style="text-align: left;">
<br /></div>
</b><b><div style="text-align: left;">
<b><span style="color: lime;">User-agent: *</span></b></div>
</b><b><div style="text-align: left;">
<b>Disallow: /search?updated-min=</b></div>
</b><b><div style="text-align: left;">
<b>Disallow: /search?updated-max=</b></div>
</b><b><div style="text-align: left;">
<b>Disallow: /search/label/*?updated-min=</b></div>
</b><b><div style="text-align: left;">
<b>Disallow: /search/label/*?updated-max=</b></div>
</b><b><div style="text-align: left;">
<b><span style="color: yellow;">Disallow: /p/*</span></b></div>
</b><b><div style="text-align: left;">
<b>Allow: /</b></div>
</b><b><div style="text-align: left;">
<br /></div>
</b><b><div style="text-align: left;">
<b>Sitemap: http://<span style="color: red;">www.netomaniak.com</span>/feeds/posts/default?orderby=UPDATED</b></div>
</b></span></span><b style="font-size: small;"><div style="text-align: left;">
<br /></div>
</b><i style="font-family: Verdana, sans-serif;"><div style="text-align: left;">
<i><b>Keterangan:</b></i></div>
</i><div style="font-family: Verdana, sans-serif; font-size: small; text-align: left;">
<br /></div>
<ul style="margin: 0px; padding: 0px;">
<li style="margin: 0px; padding: 0px; text-align: left;"><span style="font-family: Verdana, sans-serif; font-size: x-small;">Untuk Tulisan berwarna<i> </i><b style="font-style: italic;"><span style="color: blue;">biru</span> </b>adalah sebuah 'kode' pada robot untuk <b>tidak <a href="http://www.netomaniak.com/2013/12/Keyword-terbanyak-diGoogle-2013.html" style="color: #1e598e; text-decoration: none;" target="_blank">merayapi</a></b> halaman berakhiran<i> </i><b style="font-style: italic;">?m=1 & ?m=0. </b>Biasanya halaman ini ada jika visitor membuka blog anda lewat Ponsel. Jika hal ini tidak di atur pada robot, maka dipastikan akan banyak sekali halaman duplikat yang terindex, dan tentu akan merugikan blog anda.</span></li>
<li style="margin: 0px; padding: 0px; text-align: left;"><span style="font-family: Verdana, sans-serif; font-size: x-small;">Untuk Tulisan berwarna<i> </i><b style="font-style: italic;"><span style="color: lime;">hijau</span> </b>adalah sebuah 'kode' pada robot untuk <b>tidak merayapi</b> halaman <b>Label, search, older post, dll. </b>Halaman itu tidak butuh untuk dirayapi karena akan menghasilkan hasil pencarian blog anda di mesin pencari, dan akan membuat 'bingung' google bot untuk merayapinya.</span></li>
<li style="margin: 0px; padding: 0px; text-align: left;"><span style="font-family: Verdana, sans-serif; font-size: x-small;">Untuk tulisan berwarna<span style="color: yellow; font-style: italic; font-weight: bold;"> Kuning </span>adalah sebuah optional saja. Jika anda tidak ingin Google merayapi <i>Halaman Page (ex: blog.blogspot/p/xxx.html)</i> di Blog anda. Jika anda membutuhkan halaman tersebut untuk di index, maka silahkan hapus saja tulisan yang berwarna kuning itu.</span></li>
<li style="margin: 0px; padding: 0px; text-align: left;"><span style="font-family: Verdana, sans-serif; font-size: x-small;">Silahkan Ganti tulisan <b style="color: red;">Merah </b>dengan alamat blog anda.</span></li>
</ul>
<div style="margin: 0px; padding: 0px; text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;">5. Jika pengaturan robot.txt telah selesai, silahkan klik <b>SIMPAN.</b></span></div>
<div style="margin: 0px; padding: 0px; text-align: left;">
<b><span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></b></div>
<div style="margin: 0px; padding: 0px; text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;">Itu dia tutorial <i>edit robot.txt untuk Blog Blogspot</i>. Nah, bagaimana dengan pengaturan robot untuk <i>Wordpress atau website</i> lainnya? Caranya sama, namun di dalam sebuah website anda harus membuat sebuah file <b>Robot.txt </b>di dalam hosting anda. Silahkan atur saja sedemikian mungkin robot.txt di website anda. Jika masih merasa kebingungan dalam tutorial ini, silahkan ajukan pertanyaan kepada admin dengan mengisi kolom komentar di bawah ini. </span></div>
<div style="margin: 0px; padding: 0px; text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;"><br /></span></div>
<div style="margin: 0px; padding: 0px; text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: x-small;">terima kasih telah membaca <b>Cara Edit Robot.txt Blog yang Benar agar SEO Friendly.</b></span></div>
</div>
<br />

M-S Blog || Cara Edit Robot.txt Blog atau Website yang Benar Agar SEO Friendly, Robot.txt adalah komponen penting dalam sebuah website at...

04:12 +

Breadcrumb SEO Friendly Valid HTML

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQU56CvpLM9b3YawwForSRhamy0RcVUze8GVlmNzU2Mzdo653Kfbs588nYDIlusQYw_02qHS6qjLFOD-jL1Olyz1xbKuBnO4PyXu6putFgzVNDYzJx2ermgU8_3VccQCBsXM3kynezi8I/s1600/2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Breadcrumb SEO Friendly Valid HTML" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQU56CvpLM9b3YawwForSRhamy0RcVUze8GVlmNzU2Mzdo653Kfbs588nYDIlusQYw_02qHS6qjLFOD-jL1Olyz1xbKuBnO4PyXu6putFgzVNDYzJx2ermgU8_3VccQCBsXM3kynezi8I/s1600/2.jpg" title="Breadcrumb SEO Friendly Valid HTML" /></a></div>
<span style="background-color: white; font-family: Arial, Geneva, sans-serif; font-size: x-small; margin: 0px; padding: 0px; text-align: justify;"><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;"><br /></span></span></span>
<span style="background-color: white; font-family: Arial, Geneva, sans-serif; font-size: x-small; margin: 0px; padding: 0px; text-align: justify;"><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;">Kalau dulu kita sudah membahas tentang Cara memasang meta tag seo friendly maka kali ini kita akan membahas tentang </span></span></span><span style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><b style="margin: 0px; padding: 0px;">Cara Memasang/Membuat Breadcrumb Agar Blog Cepat Terindex Google. </b>Apa itu <b style="margin: 0px; padding: 0px;">breadcrumb</b>? <span style="margin: 0px; padding: 0px;">Breadcrum</span> adalah semacam <span style="margin: 0px; padding: 0px;">Navigasi </span>yang<b style="margin: 0px; padding: 0px;"> </b></span><span style="background-color: white; font-family: Arial, Geneva, sans-serif; font-size: x-small; margin: 0px; padding: 0px; text-align: justify;"><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;">berguna untuk memudahkan mesin pencari dan </span></span></span><span style="background-color: white; color: #222222; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 17px; margin: 0px; padding: 0px; text-align: justify;">visitor menjelajahi halaman demi halaman pada blog anda sesuai dengan kategori yang ada. <b style="margin: 0px; padding: 0px;">Cara memasang breadcrumb yang seo friendly</b> inipun sangat mudah karena hanya mengharuskan anda menambah dan merubah beberapa kode di template anda.</span><br />
<div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;">
<br /></div>
<div style="font-family: Arial, Geneva, sans-serif; margin: 0px; padding: 0px;">
<h4 style="font-size: 18px; margin: 0px 0px 0.5em; padding: 0px;">
Cara Memasang Breadcrumbs SEO Friendly di Blog</h4>
<ul style="background-color: white; font-size: small; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;">
<li style="margin: 0.5em 0px; padding: 0px;"><span style="background-color: transparent; margin: 0px; padding: 0px;">Pertama login ke </span><a href="http://newbanie.blogspot.com/" style="-webkit-transition: all 0.5s; background-color: transparent; color: #0099cc; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.5s;" target="_blank">blogger</a></li>
<li style="margin: 0.5em 0px; padding: 0px;"><span style="font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;">Di halaman dashboard pilih menu TEMPLATE Lalu Edit HTML</span></li>
<li style="margin: 0.5em 0px; padding: 0px;"><span style="font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;">Backup terlebih dahulu template anda untuk menghindari hal hal buruk yang mungkin terjadi </span></li>
<li style="margin: 0.5em 0px; padding: 0px;"><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;">Cari dan </span></span><span style="color: red; font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;"> <span style="color: black; margin: 0px; padding: 0px;">Letakan kode dibawah ini diatas kode</span> ]]></b:skin</span></span><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;"> (untuk mempermudah pencarian gunakan Ctrl+F)</span></span></li>
</ul>
<blockquote class="tr_bq" style="background-color: white; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-style: italic; margin: 1em 20px; padding: 1em; quotes: none; text-align: justify;">
<span style="font-family: georgia; margin: 0px; padding: 0px;"><span style="color: #6fa8dc; font-size: x-small;">.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}</span></span></blockquote>
<ul style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;">
<li style="margin: 0.5em 0px; padding: 0px;">Nah setelah selesai cari kode ini:</li>
</ul>
<blockquote class="tr_bq" style="background-color: white; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-style: italic; margin: 1em 20px; padding: 1em; quotes: none; text-align: justify;">
<span style="font-family: georgia; margin: 0px; padding: 0px;"><span style="color: #6fa8dc; font-size: x-small;"><b:includable id='main' var='top'></span></span></blockquote>
<ul style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;">
<li style="margin: 0.5em 0px; padding: 0px;"> Lalu ganti kode tersebut dengan kode dibawah ini:</li>
</ul>
<blockquote class="tr_bq" style="background-color: #f8f8f8; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-size: small; font-style: italic; margin: 1.5em 2em; padding: 1em; quotes: none;">
<span style="color: #6fa8dc;"><b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageType == &quot;static_page&quot;'><br style="margin: 0px; padding: 0px;" /><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div><br style="margin: 0px; padding: 0px;" /><b:else/><br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageType == &quot;item&quot;'><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><b:loop values='data:posts' var='post'><br style="margin: 0px; padding: 0px;" /><b:if cond='data:post.labels'><br style="margin: 0px; padding: 0px;" /><div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'><br style="margin: 0px; padding: 0px;" /><span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span><br style="margin: 0px; padding: 0px;" /><b:loop values='data:post.labels' var='label'><br style="margin: 0px; padding: 0px;" />&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span><br style="margin: 0px; padding: 0px;" /></b:loop><br style="margin: 0px; padding: 0px;" />&#187; <span><data:post.title/></span><br style="margin: 0px; padding: 0px;" /></div><br style="margin: 0px; padding: 0px;" /><b:else/><br style="margin: 0px; padding: 0px;" /><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:loop><br style="margin: 0px; padding: 0px;" /><b:else/><br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageType == &quot;archive&quot;'><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" /><div class='breadcrumbs'><br style="margin: 0px; padding: 0px;" /><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span><br style="margin: 0px; padding: 0px;" /></div><br style="margin: 0px; padding: 0px;" /><b:else/><br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageType == &quot;index&quot;'><br style="margin: 0px; padding: 0px;" /><div class='breadcrumbs'><br style="margin: 0px; padding: 0px;" /><b:if cond='data:blog.pageName == &quot;&quot;'><br style="margin: 0px; padding: 0px;" /><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span><br style="margin: 0px; padding: 0px;" /><b:else/><br style="margin: 0px; padding: 0px;" /><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></div><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:if><br style="margin: 0px; padding: 0px;" /></b:includable><br style="margin: 0px; padding: 0px;" /><b:includable id='main' var='top'><br style="margin: 0px; padding: 0px;" /><b:include data='posts' name='breadcrumb'/></span></blockquote>
<br style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;" /><ul style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; list-style-image: initial; list-style-position: outside; margin: 1.5em 0px 1.5em 3em; padding: 0px; text-align: justify;">
<li style="margin: 0.5em 0px; padding: 0px;">Jika sudah selesai maka langsung Simpan template anda.</li>
</ul>
</div>
<div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;">
<span style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><u><b>Catatan : OPSIONAL</b></u></span></div>
<div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;">
<span style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"><br /></span></div>
<div style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;">
<span style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;">Apabila sobat sudah memiliki atau memasang <b style="margin: 0px; padding: 0px;">breadcrumb</b> di blognya silakan cari kode</span></div>
<blockquote class="tr_bq" style="background-color: #f8f8f8; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-family: Arial, Geneva, sans-serif; font-size: small; font-style: italic; margin: 1.5em 2em; padding: 1em; quotes: none;">
<span style="margin: 0px; padding: 0px;"><span style="color: #6fa8dc;"><span style="font-family: Arial, serif; margin: 0px; padding: 0px;"><span style="font-size: 15px; line-height: 24px; margin: 0px; padding: 0px;"><div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span typeof='v:Breadcrumb'> <a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a> </span> <b:loop values='data:post.labels' var='label'> &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></span></span><span style="background-color: white; font-family: Arial, serif; font-size: 15px; line-height: 24px; margin: 0px; padding: 0px; text-align: justify;"> </span></span></span></blockquote>
<br style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;" /><span style="background-color: white; font-family: Arial, Geneva, sans-serif; font-size: x-small;">Dan ganti dengan</span><br style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;" /><br />
<blockquote class="tr_bq" style="background-color: #f8f8f8; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 4px; font-family: Arial, Geneva, sans-serif; font-size: small; font-style: italic; margin: 1.5em 2em; padding: 1em; quotes: none;">
<span style="margin: 0px; padding: 0px;"><span style="color: #3d85c6;"><div class='breadcrumbs'><br style="margin: 0px; padding: 0px;" /><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><br style="margin: 0px; padding: 0px;" /><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a><br style="margin: 0px; padding: 0px;" /></span><br style="margin: 0px; padding: 0px;" /><b:loop values='data:post.labels' var='label'> &#187;<br style="margin: 0px; padding: 0px;" /><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span> </span></span></blockquote>
<br style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;" /><br style="font-family: Arial, Geneva, sans-serif; font-size: small; margin: 0px; padding: 0px;" /><span style="background-color: white; font-family: Arial, Geneva, sans-serif; font-size: x-small;">Selamat mencoba :))</span><span style="font-family: Arial, Geneva, sans-serif; font-size: x-small; margin: 0px; padding: 0px;"><br style="margin: 0px; padding: 0px;" /><br style="margin: 0px; padding: 0px;" />Sumber Dari: <a href="http://newbanie.blogspot.com/2014/01/memasang-breadcrumb-seo-valid-html-blog-cepat-terindex-google.html#ixzz2pWDoAlh0" style="-webkit-transition: all 0.5s; color: #003399; margin: 0px; outline: none; padding: 0px; text-decoration: none; transition: all 0.5s;">http://newbanie.blogspot.com/2014/01/memasang-breadcrumb-seo-valid-html-blog-cepat-terindex-google.html#ixzz2pWDoAlh0</a></span>

Kalau dulu kita sudah membahas tentang Cara memasang meta tag seo friendly maka kali ini kita akan membahas tentang Cara Memasang/Membua...

02:33 +

Membuat Tampilan Scrollbar Blog dengan JQuery

<span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; font-weight: 600; line-height: 23.390625px;">Merubah Tampilan Scrollbar Blog dengan JQuery</span><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;"> - Merubah tampilan scrollbar pada blog terkadang diperlukan untuk menyesuaikan dengan desain blog itu sendiri. Perlu atau tidak perlunya tentunya tergantung pemilik blog itu sendiri, apakah ingin dibuat custom atau tetap standar.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DJfa4DL2IKdg3TJWeF-ozmbUnCwmJozEnyO1u8qG4T9mpY06AB53Wr_BwX0me62QnIIg2sjTGOLwRHHosByAvQOL8PRAaTtN8BBkV5HGEUgcjyQqezIQZ9PLYQvtlpa1LD-8g0i9cMs/s1600/Scrollbar+Blog+dengan+JQuery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tampilan Scrollbar Blog dengan JQuery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DJfa4DL2IKdg3TJWeF-ozmbUnCwmJozEnyO1u8qG4T9mpY06AB53Wr_BwX0me62QnIIg2sjTGOLwRHHosByAvQOL8PRAaTtN8BBkV5HGEUgcjyQqezIQZ9PLYQvtlpa1LD-8g0i9cMs/s1600/Scrollbar+Blog+dengan+JQuery.jpg" title="" /></a></div>
<br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">Tutorial tentang merubah atau mengganti scrollbar sebetulnya sudah banyak, namun selama melakukan pencarian, kebanyakan menggunakan menggunakan CSS seperti ini</span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><br />
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="css" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;"><span class="pseudo" style="color: #509a55;">::-webkit-scrollbar</span><span class="rules">{<span class="rule"><span class="attribute" style="color: #aa985a;">width</span>:<span class="value" style="color: #7195a3;"><span class="number">6</span>px;</span></span><span class="rule"><span class="attribute" style="color: #aa985a;">background</span>:<span class="value" style="color: #7195a3;"><span class="hexcolor">#444</span>}</span></span></span>
<span class="pseudo" style="color: #509a55;">::-webkit-scrollbar-thumb</span><span class="rules">{<span class="rule"><span class="attribute" style="color: #aa985a;">background-color</span>:<span class="value" style="color: #7195a3;"><span class="hexcolor">#222</span>;</span></span><span class="rule"><span class="attribute" style="color: #aa985a;">border-radius</span>:<span class="value" style="color: #7195a3;"><span class="number">3</span>px}</span></span></span></code></pre>
<br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" />
<div class="catatan" style="background-color: #f8e38d; border-bottom-color: rgba(0, 0, 0, 0.0980392); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: solid; border-bottom-width: 1px; border-top-left-radius: 4px; border-top-right-radius: 4px; color: #555555; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px; padding: 15px 18px 15px 48px; position: relative;">
Dengan menggunakan CSS di atas, hanya support pada browser dengan komponen dasar WebKit seperti Safari, Chrome, browser iOS, Android dan Blackberry. Tetapi tidak support dengan browser lainnya seperti Mozilla, Opera dll.</div>
<br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">Karena penggunaan CSS tidak support dengan semua browser, maka saya tawarkan penggunaan jQuery sebagai alternatifnya. Sebetulnya penggunaan custom scrol ini telah saya buat dalam posting sebelumnya yanitu dengan </span><a href="http://blog.kangismet.net/2013/12/jquery-cross-browser-custom-scrollbar.html" style="background-color: white; color: #21afa4; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px; text-decoration: none;" target="_blank">Tiny Scrollbar</a><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">. Namun penggunaan tiny scrolbar lumayan ribet dan belum bisa digunakan untuk browser itu sendiri, hanya pada elemen tertentu saja.</span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><br />
<h4 style="background-color: white; color: #4a4a4a; font-family: Oswald, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 23.390625px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 20px !important; padding: 0px 0px 12px; text-transform: uppercase;">
PENGGUNAAN NICESCROLL</h4>
<span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">Untuk menggunakan NiceScroll, simpan kode ini di atas </span><code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;"></head></code><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><br />
<pre class="line-number" data-codetype="JQuery" style="background-color: #2f3741; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEH7xz_aRQ68Nbi9P7dslRHHG2OUDjANYQeA9PZwlZGdWBJpviHUXIg4nZ_8W-JlYYLdi2Vgq51EXZCtaBEj8b0ggTYjn_9jFL7dx2W_D1reHxu1tpQRV2jNhQlGje3hyphenhyphenNBd5w8uvvlFc/s1600/new-line-number.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; border-left-color: rgb(153, 194, 98); border-left-style: none; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em 0.8em 54px; position: relative; word-wrap: normal;"><code class="xml" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;"><span class="tag"><<span class="title" style="color: #569dcf;">script</span> <span class="attribute" style="color: #aa985a;">src</span>=<span class="value" style="color: #7195a3;">'https://kang-is.googlecode.com/svn/trunk/javascript/nicescroll.js'</span> <span class="attribute" style="color: #aa985a;">type</span>=<span class="value" style="color: #7195a3;">'text/javascript'</span>/></span><span class="javascript">
<script type=<span class="string" style="color: #7195a3;">'text/javascript'</span>>
<span class="comment" style="color: #586e75; font-style: italic;">//<![CDATA[</span>
$(document).ready(
  <span class="keyword" style="color: #859900;">function</span>() { 
    $(<span class="string" style="color: #7195a3;">"html"</span>).niceScroll({});
  }
);
<span class="comment" style="color: #586e75; font-style: italic;">//]]></span>
</span><span class="tag"></<span class="title" style="color: #569dcf;">script</span>></span></code></pre>
<br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">Dengan kode di atas, maka otomatis scrollbar default akan berubah, namun hanya muncul ketika mouse diarahkan ke samping kanan blog. Untuk memunculkan scrollbar secara permanen, maka perhatikan kode pada baris ke 6, tambahkan kode </span><code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">cursoropacitymin:1</code><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;"> menjadi </span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><br />
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="css" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;">$("<span class="tag" style="color: #859900;">html</span>")<span class="class">.niceScroll</span>(<span class="rules">{<span class="rule"><span class="attribute" style="color: #aa985a;">cursoropacitymin</span>:<span class="value" style="color: #7195a3;"><span class="number">1</span>}</span></span></span>);</code></pre>
<br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">Masih banyak pengaturan yang lainnya, silahkan sobat lihat di web pemilik NiceScroll ini. Disini saya hanya share beberapa pengaturan yang penting saja : </span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">background:"#ddd"</code><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;"> untuk merubah background (edit ddd)</span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">cursorcolor:"#808080"</code><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;"> untuk merubah warna kursor (edit 808080)</span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">cursorborder:"1px solid #565656"</code><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;"> merubah warna garis pinggir kursor (edit 565656)</span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">sehingga kode lengkap untuk baris no 6 adalah :</span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><br />
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="css" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;">$("<span class="tag" style="color: #859900;">html</span>")<span class="class">.niceScroll</span>(<span class="rules">{<span class="rule"><span class="attribute" style="color: #aa985a;">cursoropacitymin</span>:<span class="value" style="color: #7195a3;"><span class="number">1</span>,cursorcolor:<span class="string">"#808080"</span>,cursorborder:<span class="string">"1px solid #565656"</span>,background:<span class="string">"#ddd"</span>}</span></span></span>);</code></pre>
<br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">Untuk menerapkan terhadap elemen tertentu, misal sobat membuat elemen dengan class </span><code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">myscroll</code><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">, pada HTMLnya sobat harus menentukan tinggi atau </span><code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">height</code><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">, menambah kode </span><code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">overflow:hidden</code><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;"> dan tambahkan jarak pinggir kanan </span><code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">padding-right:17px</code><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;"> pada CSS terpisah atau inline (langsung pada HTML) seperti ini :</span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><br />
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="xml" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;"><span class="tag"><<span class="title" style="color: #569dcf;">div</span> <span class="attribute" style="color: #aa985a;">class</span>=<span class="value" style="color: #7195a3;">'myscroll'</span> <span class="attribute" style="color: #aa985a;">style</span>=<span class="value" style="color: #7195a3;">'height:200px;overflow:hidden;padding-right:17px'</span>></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti.
<span class="tag"></<span class="title" style="color: #569dcf;">div</span>></span></code></pre>
<br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">langkah selanjutnya tinggal menambahkan kode sesuai selektor pada jQuery baris ke 6 tadi. menjadi seperti ini :</span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><br />
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="css" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;">$("<span class="tag" style="color: #859900;">html</span>, <span class="class">.myscroll</span>")<span class="class">.niceScroll</span>(<span class="rules">{<span class="rule"><span class="attribute" style="color: #aa985a;">cursoropacitymin</span>:<span class="value" style="color: #7195a3;"><span class="number">1</span>,cursorcolor:<span class="string">"#808080"</span>,cursorborder:<span class="string">"1px solid #565656"</span>,background:<span class="string">"#ddd"</span>}</span></span></span>);</code></pre>
<br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">Untuk menambahkan selektor, tinggal tambah pada jQuery di atas. Lebih mudah bukan?</span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><br />
<h4 style="background-color: white; color: #4a4a4a; font-family: Oswald, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 23.390625px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 20px !important; padding: 0px 0px 12px; text-transform: uppercase;">
OPTIONAL</h4>
<span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">Untuk browser, setelah penggunaan NiceScroll ini akan menampilkan default scrollbar terlebih dahulu, baru kemudian diganti dengan NiceScroll setelah JavaScript tereksekusi. Untuk blog yang lambat akan terlihat perubahannya. Sebagai pilihan, agar scrollbar tidak ditampilkan, maka tambahkan </span><code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">overflow:hidden</code><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;"> pada </span><code style="background-color: white; color: #dd1144; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 23.390625px;">body</code><span style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;">.</span><br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" /><br />
<pre style="background-color: #2f3741; border-left-color: rgb(64, 98, 126); border-left-style: solid; border-left-width: 4px; color: #839496; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; font-size: 13px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code class="undefined" style="background-image: none !important; border: none !important; color: #a3a49a; display: block; font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; padding: 0px !important;">body {
....
....
....
overflow:hidden
}
</code></pre>
<br style="background-color: white; color: #797979; font-family: 'Open Sans', 'Segoe UI', Arial, Tahoma, sans-serif; font-size: 13px; line-height: 23.390625px;" />
<div class="resource" style="background-color: #e0ecff; border: 1px solid rgb(179, 197, 224); color: #666666; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 11px; padding: 5px 10px;">
Sumber : http://blog.kangismet.net/2013/12/merubah-tampilan-scrollbar-dengan-jquery.html</div>

Merubah Tampilan Scrollbar Blog dengan JQuery - Merubah tampilan scrollbar pada blog terkadang diperlukan untuk menyesuaikan dengan desain ...

16:27 +

M-S Blog

M-S Blog

M-S Blog

Cara Membuat Jam, Hari dan Tanggal dengan Javascript di Blog

Cara Membuat Navigasi Menu Full Color di Blog

Modifikasi Popular Post Sederhana Tanpa Thumbnails

Cara Edit Robot.txt Blog atau Website yang Benar Agar SEO

Breadcrumb SEO Friendly Valid HTML

Membuat Tampilan Scrollbar Blog dengan JQuery

Popular Posts

Blog Archive