Kotak Pencarian Keren untuk Blog 2016

RiyantoCips - 12:43:00 AM

<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 class="post-title entry-title" itemprop="name" style="border: 0px; font-family: Oswald; font-size: 21px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: normal; line-height: 1.4em; margin: 5px 0px 10px; padding: 0px; vertical-align: baseline;">
Kotak Pencarian Keren untuk Blog</h1>
<h1 class="post-title entry-title" itemprop="name" style="background-color: white; border: 0px; color: #2b2828; font-family: Oswald; font-size: 21px; font-stretch: inherit; font-weight: normal; line-height: 1.4em; margin: 5px 0px 10px; padding: 0px; vertical-align: baseline;">
<div class="post-header" style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<div class="post-header-line-1" style="border: 0px; font-family: Arial, "Times New Roman", Times, serif; font-size: 14px; font-stretch: inherit; line-height: 14px; margin: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div class="naon" style="border: 0px; color: #888888; font-family: Arial, "Times New Roman", Times, serif; font-size: 12px; font-stretch: inherit; line-height: inherit; margin-bottom: 5px; margin-top: 5px; padding: 11px 0px; vertical-align: baseline;">
<span class="date updated" style="border: 0px; float: left; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></div>
</div>
</h1>
<div class="post-body entry-content" id="post-body-3067324283318415520" itemprop="articleBody" style="background-color: white; border: 0px; color: #2b2828; font-family: Arial, "Times New Roman", Times, serif; font-size: 14px; font-stretch: inherit; line-height: 1.4em; margin: 0px 0px 15px; padding: 0px; vertical-align: baseline;">
<div class="separator" style="border: 0px; clear: both; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; text-align: center; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU8kjNTbGpADX8j3pvO8BpbwNiI8c47vUr8WIvtEqWPI7cEmW5w4zRDFT5gozgTipA4mYF0jq0cQdx2ioaGJbPwyskm9nAFinGodPRQlS9rKj2ucyBM2ML25dAtZq1vM3x5aNWyeyrwJId/s1600/Search-Boxes-for-Blogger.png" imageanchor="1" style="border: 0px; clear: left; color: #0e62aa; float: left; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px 1em 1em 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="Kotak Pencarian Keren untuk Blog" border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU8kjNTbGpADX8j3pvO8BpbwNiI8c47vUr8WIvtEqWPI7cEmW5w4zRDFT5gozgTipA4mYF0jq0cQdx2ioaGJbPwyskm9nAFinGodPRQlS9rKj2ucyBM2ML25dAtZq1vM3x5aNWyeyrwJId/s1600/Search-Boxes-for-Blogger.png" style="border: none; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; height: auto; line-height: inherit; margin: 0px; max-width: 100%; padding: 0px; vertical-align: baseline;" title="Kotak Pencarian Keren untuk Blog" width="320" /></a></div>
<b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Cara Memasang Kotak Pencarian di Sidebar Blog.</b><br /><br />Kotak Pencarian (Search Box) sangat penting dipasang di blog. Widget yang biasa dipasang di Sidebar ini memudahkan pengunjung, juga admin, untuk mencari data, info, atau tips di blog kita.<br /><br />Kotak Pencarian juga berfungsi sebagai navigasi sekaligus internal link karena hasil pencarian memunculkan daftar posting kita (jika ada yang dicarinya)<br /><br /><b style="border: 0px; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Cara Memasang Kotak Pencarian Keren di Sidebar Blog</b><br />1. Layout > Add A Gadget > pilih JavaScript/HTML<br />2. Copy + Paste kode berikut ini di dalamnya. (Untuk pilihan warna, ganti kode berwarna merah dengan kode-kode yang ada dalam ilustrasi gambar).<br /><br /><div style="background-color: #f2f2f2; border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 10px; vertical-align: baseline;">
<pre class="toolbar:1 lang:default decode:true" style="background: url("http://thetechgears.com/wp-content/themes/hueman/img/pre.png") 50% 0% repeat rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); color: inherit; font-family: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 11px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 19px; margin-bottom: 30px; margin-top: 30px; overflow-x: auto; overflow-y: hidden; padding: 18px 20px; position: relative; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;"><style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: <span style="border: 0px; color: red; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">#4d90fe</span>;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div></pre>
</div>
</div>
</div>

12:43:00 AM

Floating Social Bookmark dengan Efek Easing

RiyantoCips - 6:30:00 AM

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #222222; font-family: Arial; font-size: 12px; line-height: 18px; text-align: justify;">
ika Anda perhatikan <a href="http://www.caranya-gampang.ml/" rel="nofollow" style="color: #0956a8; text-decoration: none;" target="_blank">dua template responsive yang saya bagikan kemarin</a>, terdapat sosial bookmark yang menempel di sebelah kanan layar monitor, widget itu akan mengikuti gerakan naik turun. Karena untuk meminimalisir penggunaan javascript, saya sengaja membuat widget itu polos tanpa penggunaan efek tertentu dengan konsekuensi penggunaan image untuk membentuk widget itu semakin banyak. Nah, kali ini saya akan berikan tutorial atau cara untuk membuat widget floating social bookmark dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit (hanya satu). </div>
<br style="background-color: white; color: #222222; font-family: Arial; font-size: 12px; line-height: 18px; text-align: justify;" />
<div class="separator" style="background-color: white; clear: both; color: #222222; font-family: Arial; font-size: 12px; line-height: 18px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIFJkjqTi0zigb2GF-2IBfhPZcmo2MYrJXvqmswtNUxzQQ44u1tfksAu6wOyvI3omF92EwPBi3OlRNu8wluIO8nCYoOnGRFvlFfVvg7bsVtRjhiR9PepARTE5ZC3L7Ynfi9rV_X96cfvY/s1600/floating+social+bookmark.jpg" style="color: #0956a8; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="floating social bookmark" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIFJkjqTi0zigb2GF-2IBfhPZcmo2MYrJXvqmswtNUxzQQ44u1tfksAu6wOyvI3omF92EwPBi3OlRNu8wluIO8nCYoOnGRFvlFfVvg7bsVtRjhiR9PepARTE5ZC3L7Ynfi9rV_X96cfvY/s1600/floating+social+bookmark.jpg" style="border-width: 0px; margin: 0px; padding: 0px;" /></a></div>
<br style="background-color: white; color: #222222; font-family: Arial; font-size: 12px; line-height: 18px; text-align: justify;" />
<div style="background-color: white; color: #222222; font-family: Arial; font-size: 12px; line-height: 18px; text-align: center;">
<a href="http://pakdhejohnydemo.blogspot.com/" rel="nofollow" style="color: #0956a8; text-decoration: none;" target="_blank"><span style="font-size: medium;"><b>DEMO</b></span></a></div>
<br style="background-color: white; color: #222222; font-family: Arial; font-size: 12px; line-height: 18px; text-align: justify;" />
<div style="background-color: white; color: #222222; font-family: Arial; font-size: 12px; line-height: 18px; text-align: justify;">
Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada <i>jquery-ui.min</i>. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak. Pada template <a href="http://www.maskolis.com/2013/03/2-simple-template-blogger-responsive.html" rel="nofollow" style="color: #0956a8; text-decoration: none;" target="_blank">Johny Ribet</a> atau <a href="http://www.maskolis.com/2013/03/2-simple-template-blogger-responsive.html" rel="nofollow" style="color: #0956a8; text-decoration: none;" target="_blank">Pakdhe Johny</a> hanya terdapat 4 jenis, untuk widget kali ini saya menambahkan sosial media <b>Pinterest</b> dan <b>Youtube</b> agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :</div>
<ol style="background-color: white; color: #222222; font-family: Arial; font-size: 12px; line-height: 18px; text-align: justify;">
<li>Login ke <b>Blogger</b></li>
<li>Masuk ke <b>Template</b> >> <b>Edit HTML</b> (centang <i>expand widget templates</i>)</li>
<li>Letakkan kode CSS di bawah ini diatas <b style="color: #cc0000;">]]></b:skin></b> :<br /><div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<input style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Buka" /></div>
<div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
</div>
</div>
</li>
<li>Berikutnya penambahan jquery dan javascript, masih di <b>Edit HTML</b> letakkan kode berikut sebelum<b style="color: #cc0000;"></head></b> :<br /><div style="text-align: left;">
<blockquote class="tr_bq" style="background-color: #424242; border: 4px outset rgb(216, 216, 216); color: #cccccc; font-family: "Andale Mono", "Lucida Console", Monaco, fixed, monospace; line-height: 1.4em; margin: 10px; padding: 10px;">
<div style="color: blue;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/></div>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/><br /><script><br />    $(window).load(function(){<br />        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){<br />            $(this).stop();<br />            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); <br />        });<br />        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){<br />            $(this).stop();<br />            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});<br />        });<br />    });<br /></script></blockquote>
</div>
<div>
Untuk jquery library <span style="color: blue;">warna biru</span> diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.</div>
</li>
<li>Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum <b style="color: #cc0000;"></body></b> :<br /><div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<input style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Buka" /></div>
<div style="background-color: #e6e6e6; border: 1px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
</div>
</div>
<div>
Ganti tulisan <b style="color: blue;">warna biru</b> diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.</div>
</li>
<li>Terakhir, <b>Save Templates</b></li>
</ol>
<div style="background-color: white; color: #222222; font-family: Arial; font-size: 12px; line-height: 18px; text-align: justify;">
Nah itu tadi tutorial membuat <b>floating social bookmark dengan efek easing</b> menjawab pertanyaaan<a href="http://www.blogger.com/profile/01778956899520738845" rel="nofollow" style="color: #0956a8; text-decoration: none;" target="_blank">Muhammad Farhan</a>. Jika masih ada yang kurang jelas kebangeten.. eh silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Apapun bentuk komentar Anda akan saya hargai, <i>but please do not spamming.</i></div>
<br style="background-color: white; color: #222222; font-family: Arial; font-size: 12px; line-height: 18px; text-align: justify;" />
<div style="background-color: white; color: #222222; font-family: Arial; font-size: 12px; line-height: 18px; text-align: center;">
Sekian dan semoga ada manfaatnya</div>
</div>

6:30:00 AM

Cara Membuat Author Box dibawah Postingan Keren 2016

RiyantoCips - 5:57:00 AM

<div dir="ltr" style="text-align: left;" trbidi="on">
<b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Cara Membuat Author Box dibawah Postingan</b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> - Author box atau kotak penulis merupakan suatu pesan yang disampaikan author atau penulis blogg kepada pembaca blog, entar apa pesan yang akan disampaikan tergantung kita sendiri sebagai pemilik blog tersebut. Dengan menggunakan </span><u style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><b>Author Box</b></u><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> seperti ini biasanya foto </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" rel="author" style="color: #509dd5; text-decoration: none;" target="_blank" title="Google+">Google+</a></b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> kita bisa tampil di hasil pencarian google. Author box dibawah postingan ini sudah ada fitur share artikel yang akan mempermudah pembaca blog membagikan artikel Anda ke berbagai social media sperti </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Facebook</b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">, </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Twitter</b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">, </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Google+</b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> dan </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Lintasme</b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">.</span><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><u style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><b>Cara membuat author box dibawah postingan blog</b></u><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> seperti ini memang cukup mudah Anda hanya perlu memasang kode </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="CSS">CSS</a></b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> dan juga </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="HTML">HTML</a></b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> setelah itu mengganti beberapa kode yang diperlukan lalu selesai. </span><u style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><b>Author Box</b></u><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> ini juga sudah </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><u>valid html5</u></b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> jadi Anda tidak usah takut kalau blog Anda tidak akan valid html5 dengan kode ini. Langsung saja bagi Anda yang ingin </span><u style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><b>memasang author box dibawah postingan blog</b></u><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> silahkan baca tutorialnya dibawah ini :</span><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">1. Masuk ke </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Blogger.com</b><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">2. Klik </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Template</b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> => </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Edit HTML</b><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">3. Cari kode </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><i><span style="color: red;">]]></b:skin></span></i></b><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">4. </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Copy </b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">kode dibawah ini, lalu </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Paste</b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> diatas kode </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><i><span style="color: red;">]]></b:skin></span></i></b><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: 11px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code style="background: 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; font-size: 13px; padding: 0px !important;">/*BOX AUTHOR*/
.boxauthor{position:relative;border:1px solid #000;background:<b><span style="color: orange;">#eee</span></b>;box-shadow:0 0 5px #444 inset;margin:25px 0 15px;padding:10px}
.boxtitle h3{color:#000;font:bold 14px Electrolize;background:<b><span style="color: orange;">#eee</span></b>;width:103.3%;display:block;position:relative;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;margin:0 0 0 -22px;padding:7px 0 7px 25px}
.boxtitle h3:before{content:&#39;&#39;;position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
.boxtitle h3:after{content:&#39;&#39;;position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxauthor_photo{float:right;background:<b><span style="color: orange;">#eee</span></b>;position:relative;z-index:999;box-shadow:0 0 5px #000;margin:-21px 0 5px;padding:30px 5px 5px}
.boxauthor_photo:before{content:&#39;&#39;;position:absolute;top:0;right:135px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxauthor_photo:after{content:&#39;&#39;;position:absolute;top:0;right:-10px;width:0;height:0;border-color:transparent transparent #333;border-style:solid;border-width:0 10px 10px 0}
.boxauthor_photo img{width:120px;height:120px;border:2px solid #444}
.boxcontent{font:12px/18px Electrolize,sans-serif;text-align:justify;color:#000;float:left;top:5px;left:0;display:block;position:relative;width:420px}
.boxsocial{background:<b><span style="color: orange;">#eee</span></b>;margin-left:-22px;width:100%;overflow:hidden;border:1px solid #000;box-shadow:0 0 5px #444 inset,0px 0 5px #000;padding:5px 5px 5px 40px}
.boxsocial :before{content:&#39;&#39;;position:absolute;bottom:0;left:-12px;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
.boxsocial :after{content:&#39;&#39;;position:absolute;bottom:0;right:-12px;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxsocial a{text-align:center;background:#111;display:block;color:#fff!important;font:bold 12px Electrolize,sans-serif;text-decoration:none;border:1px solid #000;transition:all 1s ease;box-shadow:2px 2px 0 0 rgba(51,51,51,1)inset;padding:7px 0}
.boxsocial a:hover{box-shadow:0 0 5px #000;border:1px solid #fff}
.boxsocial div{float:left;margin-right:6px;width:88px}
.boxsocial .boxsocialtitle{font:bold 12px Electrolize,sans-serif;text-align:center;text-transform:uppercase;display:block;width:107px;border:1px solid #000;box-shadow:0 0 5px #444 inset;padding:7px 22px}</code></pre>
<span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">5.  Lalu cari kode </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><i><span style="color: red;"><data:post.body/></span></i></b><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">6. </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Copy</b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> kode dibawah ini, lalu </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Paste</b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> dibawah kode </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><i><span style="color: red;"><data:post.body/></span></i></b><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: 11px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code style="background: 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; font-size: 13px; padding: 0px !important;"><i><div class='boxauthor'></i>
<i><div class='boxauthor_photo'></i>
<i><img alt='<b><span style="color: lime;">Riyanto</span></b>' src='https://lh6.googleusercontent.com/-5KuwPTR39qI/AAAAAAAAAAI/AAAAAAAAA3k/jdTIAylw8IA/photo.jpg' title='<b><span style="color: lime;">Ficri Pebriyana</span></b>'/></i>
<i></div></i>
<i><div class='boxtitle'></i>
<i><h3>Author : <a expr:href='data:post.authorProfileUrl' rel='author' target='_blank' title='<b><span style="color: lime;">Ficri Pebriyana</span></b>'><data:post.author/></a></h3></div></i>
<i><div class='boxcontent'></i>
<i>Terimakasih, telah membaca artikel mengenai <b><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b>. Semoga artikel tersebut bermanfaat untuk Anda. Mohon untuk memberikan 1+ pada <a href='https://plus.google.com/<b><span style="color: red;">+FicriPebriyana</span></b>?rel=author' rel='author' target='_blank' title='Google+'>Google+</a>, 1 Like pada <a href='https://www.facebook.com/<b><span style="color: red;">FicriPebriyana</span></b>' rel='me' target='_blank' title='Facebook'>Facebook</a>, dan 1 Follow pada <a href='https://twitter.com/<b><span style="color: red;">FicriPebriyana</span></b>' rel='me' target='_blank' title='Twitter'>Twitter</a>. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan.</i>
<i></div></i>
<i><div class='boxsocial'></i>
<i><div class='boxsocialtitle'></i>
<i>Share Artikel</i>
<i></div></i>
<i><div class='boxfb'></i>
<i><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a></i>
<i></div></i>
<i><div class='boxtwit'></i>
<i><a expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a></i>
<i></div></i>
<i><div class='boxgplus'></i>
<i><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a></i>
<i></div></i>
<i><div class='boxltsme'></i>
<i><script></i>
<i>//<![CDATA[</i>
<i>var uri = window.location.href;</i>
<i>var ttle = document.title;</i>
<i>document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' target='_blank' title='Share ke Lintasme'>Lintasme</a>");</i>
<i>//]]></i>
<i></script></i>
<i></div></i>
<i></div></i>
<i></div></i></code></pre>
<span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">7. Klik </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Simpan Template</b><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Catatan :</b><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">- Ganti kode </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><span style="color: lime;">Riyanto</span></b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> dengan </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Nama Anda</b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">.</span><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">- Ganti kode </span><span style="background-color: white; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><span style="color: red;"><b>Riyanto</b></span></span><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">dengan </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">ID Anda</b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> (Facebook, Google, dan Twitter).</span><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">- Untuk mengganti warna kotak penulis atau author box silahkan pilih warnanya disini </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="Kode Warna">Kode Warna</a></b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">.</span><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">- </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><span style="color: orange;">#eee</span></b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"> adalah warna dasar (background).</span><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Sekian artikel mengenai </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="Cara Membuat Author Box dibawah Postingan">Cara Membuat Author Box dibawah Postingan</a></b><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">. Kurang lebihnya mohon maaf.</span><br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" /><span style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Semoga Bermanfaat...</span></div>

5:57:00 AM

Social Share Button Dengan Efek Toggle 2016

RiyantoCips - 5:49:00 AM

<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/AVvXsEhbXJ7WgADGgCkXYmteIjVmHt1yVXJEGhFFBnjmelLSNG5nnIwIu_OOPC2ju-lsa2jo_KojgxrUBU5KVDJoj06s5OdUzeBYL3i-vP51BcikiBE2_bselL__YSV7aIZeJlMFDo1O7tAwpH8/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXJ7WgADGgCkXYmteIjVmHt1yVXJEGhFFBnjmelLSNG5nnIwIu_OOPC2ju-lsa2jo_KojgxrUBU5KVDJoj06s5OdUzeBYL3i-vP51BcikiBE2_bselL__YSV7aIZeJlMFDo1O7tAwpH8/s320/1.PNG" width="320" /></a></div>
<b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><br /></b>
<b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Social Share Button Dengan Efek Toggle</b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> - Membuat atau menambahkan social share button di blog memang sangat di perlukan agar artikel blog mudah untuk di bagikan ke berbagai situs social media seperti, </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="https://www.facebook.com/CaraNya.Gampang/" style="color: #509dd5; text-decoration: none;" target="_blank" title="Facebook">Facebook</a></b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">, </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="Twitter">Twitter</a></b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">, </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="Google">Google</a></b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">, dan masih banyak lagi. Dengan </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><u>menambahkan tombol social share button di blog</u></b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> maka blog bisa populer jika suatu artikel di bagikan ke berbagai macam situs. Mengenai tombol social share button ini saya pernah membuat artikel tersebut dengan judul </span><a href="http://www.caranya-gampang.ml/" style="background-color: white; color: #509dd5; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; font-weight: bold; line-height: 23.4px; text-decoration: none;" target="_blank" title="Membuat Tombol Google +1, Twitter, dan Facebook Valid HTML5">Membuat Tombol Google +1, Twitter, dan Facebook Valid HTML5</a><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">. Namun pada postingan kali ini </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="Ficri Pebriyana">Riyanto</a> </b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">memberikan sedikit yang lebih berbeda dari sebelumnya yaitu dengan menambahkan efek toggle pada tombol social share tersebut, selain itu ditambahkan juga tombol more yang isinya puluhan situs lengkap untuk membagikan artikel Anda.</span><br />
<div style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">
Pada <b><u>social share button dengan efek toggle</u></b> ini tentunya sudah valid <b><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="HTML5">HTML5</a></b> dan <b><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="CSS3">CSS3</a></b>, dengan menambahkan <b><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="jQuery">jQuery</a></b> terciptalah sebuah efek toggle yang bisa membuka atau menutup saat tombol share di klik. Tombol social share button ini sekilas mirip dengan efek flat ui, tapi beda jauh sih ya di mirip-ripin saja dengan flat ui. Oke langsung saja yang ingin memasang atau menambahkan tombol social share button dengan efek toggle di blog silahkan lihat demo dan tutorialnya dibawah ini :</div>
<div style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">
<div style="text-align: center;">
<b><a class="demo" href="http://reviewdemo.blogspot.com/2014/03/ficri-pebriyana-belajar-seo.html" style="background: rgb(0, 0, 255); border-radius: 2px; border: none; color: #509dd5; letter-spacing: 1px; padding: 5px 20px !important; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 1px; transition: background-color 1s ease-out 0s;" target="_blank" title="DEMO">DEMO</a></b></div>
</div>
<div style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">
<br /></div>
<div style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">
1. Masuk ke <b>Blogger.com</b></div>
<div style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">
2. Klik <b>Template</b> => <b>Edit HTML</b></div>
<div style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">
3. Cari kode <code style="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;">]]</b:skin></code> atau <code style="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;"></stlye></code></div>
<div style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">
4. <b>Copy</b> kode <b>CSS</b> dibawah ini, lalu <b>Paste</b> di atas kode <code style="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;">]]</b:skin></code> atau <code style="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;"></stlye></code></div>
<div style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">
<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: 11px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code style="background: 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; font-size: 13px; padding: 0px !important;">#buton-share{float:left;padding:14px 15px;background:#35353C;color:#fff;cursor:pointer;display:inline-block}
#share-to{display:none;text-align:left;background:#35353C;color:#fff;padding:4px 4px}
.boxsocial{overflow:hidden;padding:5px;background:#6B6B6B}
.boxsocial a:hover{background:#34343C}
.boxsocial:before{content:'';position:absolute;bottom:0;left:-12px;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
.boxsocial:after{content:'';position:absolute;bottom:0;right:-12px;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxsocial a{text-align:center;display:block;color:#fff!important;font:bold 12px Electrolize,sans-serif;text-decoration:none;transition:all 1s ease;padding:7px 0}
.boxsocial a:hover{box-shadow:0 0 5px #000;border:1px solid #fff}
.boxsocial .boxsocialtitle{font:bold 12px Electrolize,sans-serif;text-align:center;text-transform:uppercase;display:block;width:107px;border:1px solid #000;box-shadow:0 0 5px #444 inset;padding:7px 22px}
.boxfb{float:left;margin-right:3px;width:70px;background:#4154E8}
.boxtwit{float:left;margin-right:3px;width:70px;background:#2C95DD}
.boxgplus{float:left;margin-right:3px;width:70px;background:#DC2C1B}
.boxltsme{float:left;margin-right:3px;width:70px;background:#F0AD17}
.boxmore{float:left;margin-right:1px;width:70px;background:#413F43}</code></pre>
<div>
<br /></div>
<div>
5. Cari kode <code style="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;"><div class='post-footer'></code> atau <code style="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;"><data:post.body/></code> biasanya akan ada banyak<br />
6. <b>Copy</b> kode <b>HTML</b> dibawah ini, lalu <b>Paste</b> diatas kode <code style="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;"><div class='post-footer'></code> atau <code style="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;"><data:post.body/></code> yang ke 2<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: 11px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code style="background: 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; font-size: 13px; padding: 0px !important;"><div id='buton-share'>
SHARE TO &#187;</div>
<div id='share-to'>
<div class='boxsocial'>
<div class='boxfb'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a>
</div>
<div class='boxtwit'>
<a expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
</div>
<div class='boxgplus'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a>
</div>
<div class='boxltsme'>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' target='_blank' title='Share ke Lintasme'>Lintasme</a>");
//]]>
</script>
</div>
<div class='boxmore'>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' rel='nofollow' title='More Share'>&#10010; More</a>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</div>
</div>
</div></code></pre>
<br />
7. Cari kode <code style="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;"></body></code><br />
8. <b>Copy</b> kode <b>jQeury</b> dibawah ini, lalu <b>Paste</b> diatas kode <span style="font-family: monospace;"></body></span><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: 11px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code style="background: 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; font-size: 13px; padding: 0px !important;"><script type='text/javascript'>
$(document).ready(function(){
  $("#buton-share").click(function(){
    $("#share-to").slideToggle(1000,function(){
    });
  });
});
</script></code></pre>
<br />
<b>Catatan :</b><br />
Jika tombol toggle tidak berfungsi simpan kode <b><a href="http://www.ficripebriyana.com/search/label/JavaScript" style="color: #509dd5; text-decoration: none;" target="_blank" title="JavaScript">JavaScript</a></b> dibawah ini, diatas kode <span style="font-family: monospace;"></body></span><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: 11px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code style="background: 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; font-size: 13px; padding: 0px !important;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/></code></pre>
<br />
Sekian artikel mengenai <b><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="Social Share Button Dengan Efek Toggle">Social Share Button Dengan Efek Toggle</a></b>. Kurang lebihnya mohon maaf.<br />
Semoga Bermanfaat...</div>
</div>
</div>

5:49:00 AM

Cara Membuat Widget Popular Post Dengan Efek Gradient 2016

RiyantoCips - 5:31:00 AM

<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/AVvXsEj-LCEpSUdlxPtMyrSYibw326ku3XiS6d7Uh_5cnu8iOCHWQI0I0LgcSMCFOsf6cR3tT1c00u7XTsh2nxZd8QWVdF1xopy0ElJMtOdVPaKWasHdsQdZPfXdrRUuK06R1Vsfk0sk3yyWe1o/s1600/Cara+Membuat+Widget+Popular+Post+Dengan+Efek+Gradient+-+Ficri+Pebriyana.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-LCEpSUdlxPtMyrSYibw326ku3XiS6d7Uh_5cnu8iOCHWQI0I0LgcSMCFOsf6cR3tT1c00u7XTsh2nxZd8QWVdF1xopy0ElJMtOdVPaKWasHdsQdZPfXdrRUuK06R1Vsfk0sk3yyWe1o/s320/Cara+Membuat+Widget+Popular+Post+Dengan+Efek+Gradient+-+Ficri+Pebriyana.jpg" width="186" /></a></div>
<b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><br /></b>
<b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Cara Membuat Widget Popular Post Dengan Efek Gradient</b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> - Banyak sekali modifikasi widget popular post yang dibuat oleh para</span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="Blogger">Blogger</a></b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> tentunya untuk mempercantik tampilan blog agar lebih keren lagi, hampir seluruh blog menggunakan sebuah </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><u>widget popular post</u></b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> namun entah apa tujuan dari dipasangnya widget popular post didalam blog tersebut, tapi yang pasti fungsinya untuk memberitahukan kepada visitor bahwa artikel tersebut yang sedang populer dalam blog itu.</span><br />
<br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">Pada kesempatan kali ini blog </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="Ficri Pebriyana">Riyanto</a> </b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">akan membagikan sebuah tutorial </span><u style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; font-weight: bold; line-height: 23.4px;">cara membuat widget popular post dengan efek gradient</u><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">. Sebenarnya widget popular post ini bukanlah suatu efek gradient, namun bisa saja kita menggunakan berbagai macam warna-warni untuk menghiasi widget popular post tersebut, disebut dengan efek gradient ya karena warnanya menyerupai gradient dari hitam ke putih atau bisa juga dari biru tua sampai ke biru muda dengan kombinasi warna yang menyerupai efek gradient.</span><br />
<br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" />
<u style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><b>Membuat widget popular post dengan efek gradient</b></u><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> ini menggunakan sebuah kode css yang dimana kode css ini sudah valid</span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="CSS3">CSS3</a></b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">, jadi Anda semua tidak perlu khawatir akan terjadi error saat validasi css3 pada blog Anda. Langsung saja bagi Anda yang ingin </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><u>memodifikasi tampilan widget popular post</u></b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> silahkan baca tutorialnya dibawah ini :</span><br />
<br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">1. Masuk ke Blogger.com</span><br />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">2. Klik </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Tata Letak</b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> => </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Tambahkan Gadget</b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> => </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Entri Populer</b><br />
<b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Thumbnail Gambar</b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> dan </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Cuplikan</b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> saya sarankan untuk tidak di centang</span><br />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">3. Klik </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Simpan</b><br />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">4. Lalu klik </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Template</b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> => </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Edit HTML</b><br />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">5. Cari kode </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><i><span style="color: red;">]]></b:skin></span></i></b><br />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">6. </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Copy</b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> kode CSS dibawah ini, lalu </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Paste</b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;"> diatas kode </span><i style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><b><span style="color: red;">]]></b:skin></span></b></i><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: 11px; line-height: 1.4em; overflow: auto; padding: 0.8em 1em; position: relative; word-wrap: normal;"><code style="background: 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; font-size: 13px; padding: 0px !important;">/* Popular Post */
.PopularPosts .widget-content ul{margin-top:-5px;margin-bottom:-1px;padding-right:20px!important;list-style-type:none}
.PopularPosts .widget-content ul li{position:relative;padding:10px!important}
.PopularPosts .widget-content ul li:first-child{background:#555;width:100%}
.PopularPosts .widget-content ul li:first-child:after{content:&quot;01&quot;;background:#f88c00}
.PopularPosts .widget-content ul li:first-child+li{background:#666;width:100%}
.PopularPosts .widget-content ul li:first-child+li:after{content:&#39;02&#39;}
.PopularPosts .widget-content ul li:first-child+li+li{background:#777;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li:after{content:&#39;03&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li{background:#888;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li:after{content:&#39;04&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li{background:#999;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li:after{content:&#39;05&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li{background:#aaa;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after{content:&#39;06&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li{background:#bbb;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after{content:&#39;07&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li{background:#c1c1c1;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after{content:&#39;08&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li{background:#ccc;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after{content:&#39;09&#39;}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li{background:#ddd;width:100%}
.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{content:&#39;10&#39;}
.PopularPosts .widget-content ul li:first-child:after,.PopularPosts .widget-content ul li:first-child+li:after,.PopularPosts .widget-content ul li:first-child+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li:after,.PopularPosts .widget-content ul li:first-child+li+li+li+li+li+li+li+li+li:after{position:absolute;bottom:1px;right:1px;background:#444;padding:6px 5px;width:20px;line-height:1em;text-align:center;color:#eee;font-size:13px!important}
.PopularPosts .widget-content{padding-right:10px}
</code></pre>
<br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">7. Klik </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Simpan Template</b><br />
<br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" />
<b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;">Catatan :</b><br />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">- Anda bisa mengganti angka 01 sampai 10.</span><br />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">- Anda bisa mengganti warna disini </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="Kode Warna HTML">Kode Warna HTML</a></b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">.</span><br />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">- Usahakan sesuaikan tampilan popular post dengan blog Anda.</span><br />
<br style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;" />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">Sekian artikel mengenai </span><b style="background-color: white; color: #555555; font-family: Roboto, Arial, Oswald, Helvetica, sans-serif; font-size: 13px; line-height: 23.4px;"><a href="http://www.caranya-gampang.ml/" style="color: #509dd5; text-decoration: none;" target="_blank" title="Cara Membuat Widget Popular Post Dengan Efek Gradient">Cara Membuat Widget Popular Post Dengan Efek Gradient</a></b><span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">. Kurang lebihnya mohon maaf.</span><br />
<span style="background-color: white; color: #555555; font-family: "roboto" , "arial" , "oswald" , "helvetica" , sans-serif; font-size: 13px; line-height: 23.4px;">Semoga Bermanfaat...</span></div>

5:31:00 AM

Download Android Studio 2016

RiyantoCips - 10:14:00 AM

<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 class="dac-hero-title" style="background-color: #eceff1; color: rgba(0, 0, 0, 0.870588); font-family: Roboto, sans-serif; font-size: 44px; font-weight: 300; line-height: 56px; margin: 0px 0px 14px; padding: 0px 0px 12px;">
Android Studio</h1>
<h1 class="dac-hero-title" style="background-color: #eceff1; color: rgba(0, 0, 0, 0.870588); font-family: Roboto, sans-serif; font-size: 44px; font-weight: 300; line-height: 56px; margin: 0px 0px 14px; padding: 0px 0px 12px;">
<span style="font-size: 28.6px;">The Official IDE for Android</span></h1>
<div class="separator" style="clear: both; text-align: right;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWL8bpyHZPehBW9bLQVFAbHBW57hvNLgDEOvtOWbl6-tmkR250aWWjYtfTA6O3Vz76j0ehpOmskyd9IcyPg6iNNcfPJ2WHb-BljdcPjfdp4pxec4CxJCZSMqQdYD3QESkXSQ1wcbF-pE/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWL8bpyHZPehBW9bLQVFAbHBW57hvNLgDEOvtOWbl6-tmkR250aWWjYtfTA6O3Vz76j0ehpOmskyd9IcyPg6iNNcfPJ2WHb-BljdcPjfdp4pxec4CxJCZSMqQdYD3QESkXSQ1wcbF-pE/s320/Capture.PNG" width="320" /></a></div>
<div style="text-align: right;">
<span style="font-size: 28.6px;"><br /></span></div>
<div class="dac-hero-description" style="background-color: #eceff1; color: rgba(0, 0, 0, 0.541176); font-family: Roboto, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
Android Studio provides the fastest tools for building apps on every type of Android device.</div>
<div class="dac-hero-description" style="background-color: #eceff1; color: rgba(0, 0, 0, 0.541176); font-family: Roboto, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 16px;">
World-class code editing, debugging, performance tooling, a flexible build system, and an instant build/deploy system all allow you to focus on building unique and high quality apps.</div>
<div style="background-color: #eceff1; color: rgba(0, 0, 0, 0.682353); font-family: Roboto, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 12px; margin-top: 24px;">
<a class="landing-button green download-bundle-button dac-hidden-mobile" data-modal-toggle="studio_tos" href="https://developer.android.com/studio/index.html#win-bundle" style="-webkit-user-select: none; background: rgb(121, 176, 59); border-radius: 3px; border: 0px; box-shadow: rgba(0, 0, 0, 0.258824) 0px 2px 5px; box-sizing: border-box; color: white; cursor: pointer; display: inline-block; font-family: inherit; font-size: 14px; font-style: inherit; font-variant: inherit; letter-spacing: 0.5px; line-height: 18px; margin: 6px 16px 6px 0px; min-width: 88px; outline: 0px; padding: 12px 24px; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); white-space: nowrap;">DOWNLOAD ANDROID STUDIO 2.1<br /><span class="small" style="font-size: 12px; opacity: 0.7;">FOR WINDOWS <em>(1187 MB)</em></span></a></div>
<div style="background-color: #eceff1; color: rgba(0, 0, 0, 0.682353); font-family: Roboto, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 12px; margin-top: 24px;">
<a class="dac-hero-cta" href="https://developer.android.com/studio/intro/index.html" style="color: rgba(0, 0, 0, 0.870588); display: inline-block; line-height: 40px; margin-right: 20px; text-decoration: none; transition: opacity 0.3s;"><span class="dac-sprite dac-auto-chevron" style="background-image: url("../images/sprite.png"); background-position: 0px -669px; display: inline-block; height: 24px; margin-left: -8px; opacity: 0.87; vertical-align: -6px; width: 24px;"></span></a></div>
</div>

10:14:00 AM

Penyebab Komputer Restart Sendiri dan Cara Mengatasinya 2016

RiyantoCips - 10:19:00 PM

<div id="post14981437853763018461" style="background-color: white; color: #666666; font-family: sans-serif; font-size: 13px; line-height: 26px; text-align: justify;">
<a href="http://www.caranya-gampang.ml/" style="color: #65bddf; text-decoration: none;" target="_blank"><b>Penyebab komputer restart sendiri dan cara mengatasi</b></a> - Belajar komputer kali ini akan membahas tentang penyebab komputer restart sendiri dan cara mengatasinya. Komputer restart sendiri itu sangat menjengkelkan, apalagi ketika kita sedang mengerjakan tugas dengan Microsoft word. Saya dulu pernah mengalami hal demikian, sehingga saya mencari-cari sendiri apa <i>penyebab komputer sering restart sendiri</i> tanpa saya harus kirim CPU saya ke ahli service komputer. Dan ternyata memory RAM saya kotor karena terkena debu, kemudian saya pun membersihkannya sendiri dengan alat seadanya. Mungkin banyak juga penyebab atau faktor<u> komputer restart sendiri</u> selain permasalahan di memory. Berikut ini akan saya share apa yang saya ketahui mengenai <b>Penyebab komputer restart sendiri dan cara mengatasi</b> :<br /><h3>
Komputer Restart Sendiri Karena Processor Kepanasan</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggICc6n4oP_GXebtrRCDxr2-hHDkbsLf_YmfSU4n8LUjprxaqojqkdwPTZCbCLQG3FbMc2Aa_aEvM-2nca3195cjwor1h2DiIQevRN7c6BvKEpjR8iKlBoNXbE8_bBvobYabiIoImckl0/s1600/komputerrestartsendiriprosesorpanas.jpg" imageanchor="1" style="color: #65bddf; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Komputer Restart Sendiri Karena Processor Kepanasan" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggICc6n4oP_GXebtrRCDxr2-hHDkbsLf_YmfSU4n8LUjprxaqojqkdwPTZCbCLQG3FbMc2Aa_aEvM-2nca3195cjwor1h2DiIQevRN7c6BvKEpjR8iKlBoNXbE8_bBvobYabiIoImckl0/s1600/komputerrestartsendiriprosesorpanas.jpg" style="border-width: 0px; height: auto; max-width: 100%;" title="Komputer Restart Sendiri Karena Processor Kepanasan" width="320" /></a></div>
<a href="http://www.caranya-gampang.ml/" style="color: #65bddf; text-decoration: none;" target="_blank">Prosesor</a> merupakan otak dari komputer, sama seperti manusia kalau otak kita disuruh berfikir terus, maka kita akan jenuh, pusing dsb. Jika si processor ini menerima pekerjaan yang berat dengan membuka banyak program-program dsb, maka processor pun akan kepanasan atau biasanya disebut overheat. Cara mengetahui komputer kita overheat anda bisa melakukan hal berikut ini :<br /><ol>
<li>Coba cek temperature komputer melalui menu Hardware Monitor yang ada pada BIOS</li>
<li>Silahkan pakai program monitoring temperatur, misalnya CPUID Hardware Monitor untuk mengeceknya.</li>
<li>Atau coba cek langsung dengan membuka casing CPU dan meraba sendiri bagian Pendingin (Cooler) Processor. </li>
</ol>
Cara mengatasi komputer restart sendiri karena Procesor kepanasan (overheat) dapat anda coba tips berikut ini:<br /><ol>
<li>Bersihkan secara rutin atau berkala casing CPU dan cooler processor komputer anda dengan mengunakan kuas cat yang bersih. Lakukan hal ini di ruangan terbuka agar kotoran dan debu-debu tidak mengganggu anda. </li>
<li>Ganti thermal paste yang sudah kering dengan yang baru, karena thermal paste ini bisa digunakan sebagai perekat bagian prosessor dan cooler/pendingin. </li>
<li>Tempatkan komputer diruangan yang tidak terlalu panas, jika tidak ada tempat yang sesuai dan anda harus terpaksa menaruh komputer ditempat yang panas, maka anda wajib memasang kipas angin pada CPU.</li>
</ol>
<h3>
Komputer Restart Sendiri Karena Power Supply Kekurangan Daya</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dLdjsb8cf6drTJvQYFuwkJ62YE3JkoOeUlImiTybkn0jmk7p0X676cFjBMGe7TnexjNiVB6RZnuqe3RnkMUOvBjxR_gjq2CbG7oMoxHHMw9yyCrHOekVJWh3N7-yR7Znoq9qBO9HitQ/s1600/komputerrestartsendiripowersupplykekurangandaya.jpg" imageanchor="1" style="color: #65bddf; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Komputer Restart Sendiri Karena Power Supply Kekurangan Daya" border="0" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dLdjsb8cf6drTJvQYFuwkJ62YE3JkoOeUlImiTybkn0jmk7p0X676cFjBMGe7TnexjNiVB6RZnuqe3RnkMUOvBjxR_gjq2CbG7oMoxHHMw9yyCrHOekVJWh3N7-yR7Znoq9qBO9HitQ/s1600/komputerrestartsendiripowersupplykekurangandaya.jpg" style="border-width: 0px; height: auto; max-width: 100%;" title="Komputer Restart Sendiri Karena Power Supply Kekurangan Daya" width="320" /></a></div>
Komputer yang kekurangan daya dari power supply atau <a href="http://www.caranya-gampang.ml/" style="color: #65bddf; text-decoration: none;" target="_blank">pencatu daya</a> mengakibatkan performa kurang maksimal atau sering restart sendiri. Hal ini disebabkan karena mati atau macetnya kipas yang berada pada power supply sehingga mengakibatkan overheat pada power supply itu sendiri. Hal ini bisa diketahui dengan mudah ketika anda akan menyalakan power komputer biasanya terdengan suara kipas yang menyala. Cek secara manual dengan menyentuh bagian power supplynya langsung, jika terasa panas maka hal ini patut dicurigai. Anda bisa mengganti power supply (baca : <a href="http://www.caranya-gampang.ml/" style="color: #65bddf; text-decoration: none;" target="_blank">cara memilih power supply</a>) dengan yang baru atau bekas dengan daya minimal 530 watt. Dengan daya tersebut cocok untuk kebutuhan komputer sekarang ini.</div>
<div id="post24981437853763018461" style="background-color: white; color: #666666; font-family: sans-serif; font-size: 13px; line-height: 26px; text-align: justify;">
<h3>
Komputer Restart Sendiri Karena Hardisk Bad Sector </h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHAIQDUVxKejvlxIk-6ofqKaeeExdLWXBxyGZDewJp9ZULbwkeTegyar4cwE9tzb478INmBgN4jO4zDv4ZCdzGRuBF5yMeghFOV-fgOKvB6UBx3v3-uz8-b8TvHgs0tuIAPp21nmMHCsg/s1600/komputerrestartsendirihardiskbadsector.jpg" imageanchor="1" style="color: #65bddf; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Komputer Restart Sendiri Karena Hardisk Bad Sector" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHAIQDUVxKejvlxIk-6ofqKaeeExdLWXBxyGZDewJp9ZULbwkeTegyar4cwE9tzb478INmBgN4jO4zDv4ZCdzGRuBF5yMeghFOV-fgOKvB6UBx3v3-uz8-b8TvHgs0tuIAPp21nmMHCsg/s1600/komputerrestartsendirihardiskbadsector.jpg" style="border-width: 0px; height: auto; max-width: 100%;" title="Komputer Restart Sendiri Karena Hardisk Bad Sector" width="320" /></a></div>
Penyebab komputer sering restart sendiri berikutnya karena hardisk atau <a href="http://id.wikipedia.org/wiki/Cakram_keras" style="color: #65bddf; text-decoration: none;" target="_blank">cakram keras</a> yang rusak/bad sector (baca : <a href="http://www.caranya-gampang.ml/" style="color: #65bddf; text-decoration: none;" target="_blank">cara memperbaiki hardisk bad sektor</a>). Efek dari hardisk bad sector sendiri terlihat dari seringnya muncul layar bluescreen of death yang berwarna biru pada layar dan komputer merestart terus menerus. Cara mengatasi dan memperbaiki hardisk seperti itu dengan mengaktifkan program scandisk/checkdisk, lakukan secara berkala proses defrag hardisk, dan wajib mematikan komputer melalui tombol shutdown. Dengan perawatan komputer yang baik, pekerjaan anda tidak akan terganggu oleh komputer yang me-restart sendiri.<br /><h3>
Komputer Restart Sendiri Karena VGA Rusak </h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjktaYRL9Q8_7c_ZJyssEshYF7HljOyCD0O_vIT-cSQPygly8CzUV62_9_PKn9d55PfGTqggyvfSGeQj6UAG6SwJGmB3eoGEeHjUR6Dwl9rgukw-lcS4RyeT6NiEYL9Mf-94cGhI4PNEak/s1600/komputerrestartsendirivgarusak.jpg" imageanchor="1" style="color: #65bddf; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Komputer Restart Sendiri Karena VGA Rusak " border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjktaYRL9Q8_7c_ZJyssEshYF7HljOyCD0O_vIT-cSQPygly8CzUV62_9_PKn9d55PfGTqggyvfSGeQj6UAG6SwJGmB3eoGEeHjUR6Dwl9rgukw-lcS4RyeT6NiEYL9Mf-94cGhI4PNEak/s1600/komputerrestartsendirivgarusak.jpg" style="border-width: 0px; height: auto; max-width: 100%;" title="Komputer Restart Sendiri Karena VGA Rusak " width="320" /></a></div>
<br />Komputer restart sendiri bisa disebabkan karena <a href="http://id.wikipedia.org/wiki/VGA" style="color: #65bddf; text-decoration: none;" target="_blank">VGA</a> card yang rusak. Kerusakan VGA card ini bisa disebabkan oleh overheat yang dikarenakan kipas (fan) dari VGA card ini melambat atau kotor karena debu. Jika VGA card ini rusak mengakibatkan tampilan gambar ada layar monitor pun menjadi rusak dan ini memicu komputer me-restart dengan sendirinya. Untuk itu anda bisa mengecek secara berkala bagi anda yang menggunakan VGA card pada komputernya. Terutama lakukan pembersihan pada kipas VGA tersebut.<br /><h3>
Komputer restart sendiri karena RAM Rusak </h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX9ontJn8dHY19A0vKMFOhVqEw6ZzAqWYjgY-UpItgB0cVQF8kUUOTGHbll_TwGAXbD_3TRdyROVGLu06DkpGViRobvW_XGlIM0ZpaWRvbjMSyI9hvMBmvnkeL1WRPIsQl-W7KuFCrMqk/s1600/komputerrestartsendiriramrusak.jpg" imageanchor="1" style="color: #65bddf; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="Komputer restart sendiri karena RAM Rusak" border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX9ontJn8dHY19A0vKMFOhVqEw6ZzAqWYjgY-UpItgB0cVQF8kUUOTGHbll_TwGAXbD_3TRdyROVGLu06DkpGViRobvW_XGlIM0ZpaWRvbjMSyI9hvMBmvnkeL1WRPIsQl-W7KuFCrMqk/s1600/komputerrestartsendiriramrusak.jpg" style="border-width: 0px; height: auto; max-width: 100%;" title="Komputer restart sendiri karena RAM Rusak" width="320" /></a></div>
<br /><a href="http://www.caranya-gampang.ml/" style="color: #65bddf; text-decoration: none;" target="_blank">Penyebab komputer restart sendiri</a> karena RAM memang paling sering terjadi. Seperti yang saya alami pada beberapa waktu lalu, tapi hal ini memang wajar bagi saya yang jarang merawat komputer/membersihkannya. Hehehe,,, Kondisi RAM yang kotor membuat <a href="http://www.caranya-gampang.ml/" style="color: #65bddf; text-decoration: none;" target="_blank">RAM</a> (baca : Random access memory) tersebut bisa-bisa rusak dan membuat komputer sering restart dengan sendirinya. Perawatan komputer itu memang seharusnya dilakukan secara berkala, mungkin bisa 1 minggu 1 kali. Hal ini pun dulu pernah saya lakukan, tapi lama kelamaan jadi malas. Saya dulu membersihkan RAM yang kotor menggunakan tisu dan minyak kayu putih dan Alhamdulillah komputer kembali normal.</div>

10:19:00 PM

Cara Instal Baru/Instal Ulang (Windows 7) 2016

RiyantoCips - 10:13:00 PM

<div id="post14720592166556914867" style="background-color: white; color: #666666; font-family: sans-serif; font-size: 13px; line-height: 26px; text-align: justify;">
Windows merupakan operating system yang dikeluarkan oleh micrsoft. Ada banyak operaing system lainnya selain windows, contohnya saja linux, mac, dan lain-lain. Nah kali ini saya akan memberikan tutorial atau panduan install windows 7 pada komputer atau laptop Anda. Oke, berikut adalah langkah-langkahnya,</div>
<div id="post14720592166556914867" style="background-color: white; color: #666666; font-family: sans-serif; font-size: 13px; line-height: 26px; text-align: justify;">
<br /><ol>
<li>Siapkan CD instalasi yang telah Anda beli dari Microsoft</li>
<li>Setelah itu masuk ke bios laptop atau komputer Anda, kemudian ubah first boot ke CD/DVD</li>
<li>Untuk cara merubah first boot, silahkan baca artikel tentang <a href="http://www.caranya-gampang.ml/" style="color: #65bddf; text-decoration: none;" target="_blank">Boot Order</a></li>
<li>Keluar dari bios, lalu tekan sembarang tombol untuk boot dari CD. Jika tidak keluar tulisan seperti itu, maka setting boot order Anda bermasalah.</li>
<li>Setelah itu tunggu hingga file windows loading dengan sempurna</li>
<li>Pilih bahasa, format mata uang dan keyboar input<br /><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAe2Jrs2gT7Ke2i13iBfJ_ouD0Rrf2hJEd2Po52_SwMmOskJ3JU8URdyuQdlh-W-Soccl_QMufcpx-4ZVdtpH0ycxF3d5fSxcYMuHI9soaTp-TV-LcBlJ2ycG635A6ylQMA-dqveoAzfc/s1600/bahasa+dan+keyboard+input.jpg" style="height: auto; max-width: 100%;" width="320" /></li>
<li>Klik Install Now</li>
<li>Muncul Accept license Terms. Centang pada 'I Accept' lalu klik next</li>
<li>Which type of installation do you want?, pada bagian ini pilih yang kedua, yaitu Custom<br /><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsyMgbaiDecTxCDq7MCdfPerSYL52G0_fsTUaOFMdF2sp5nhZNJtexJFkGvHxX6GgfU19ehjJZStUxdh54Zxm3tzvwCi4_cKUrcJEiwKZX-m1RR3B1Y2UFA_IzJ-T6oKdodqaJMQIwy5s/s1600/custom.jpg" style="height: auto; max-width: 100%;" width="320" /></li>
<li>Pilih pada partisi mana Anda ingin menginstall windows, local disk c biasanya ada paling atas (jika paling atas hanya berukuran 100MB berarti local disk c berada di bawahnya).</li>
</ol>
</div>
<div id="post24720592166556914867" style="background-color: white; color: #666666; font-family: sans-serif; font-size: 13px; line-height: 26px; text-align: justify;">
<img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggmMmdDU1xiPwkBA5MtHFVsyS8LO4QlNdSsbqY5aNlmvstOlkzsxwv7ItSrKylKIn89CvF5yc1IzMVai6gGTfHOP98iMJLX9Sm7GAszcbAzX2Xv-fIShelCdwvXF_x3cet7Cgixt6-Lo4/s1600/drive+option.jpg" style="height: auto; max-width: 100%;" width="320" />
<li>Masuk ke drive option lalu format terlebih dahulu local disk c agar file yang lama hilang.</li>
<li>Penting, jika anda tidak memformat disk yang lain, misal disk D, E dst, maka file-file Anda tidak akan hilang, jadi Anda bisa melakukan install windows tanpa menghilangkan data pada D, E dst</li>
<li>Jika anda telah memilih disk, klik next</li>
<li>Selanjutnya tunggu hinga instalasi selesai<br /><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEievBqjPR791ofkUBexv1Y9ooWz1WarWWyjfCfMe60MXIdnR_AqyBKKwIripzUhNX_koJLtGbVMpIT9JkKb4rr6ARek6usvo6zS9jFpMYX8KGdSv8fS8huHrm39qKUFyPL7sHCU3FjLg4I/s1600/tunggul+install+windows.jpg" style="height: auto; max-width: 100%;" width="320" /></li>
<li>Setelah itu komputer Anda akan restart beberapa kali, tunggu saja</li>
<li>Pilih username dan computer name, klik next<br /><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6PHm_ZOxlmfbMFeUbJEuIH6J8xjA-gNX6Rne0j58jXyRKG7Rpw_loURvPyuXXAqLATDsRtdF4mQx8hxm0x_Cbp2bJuSo-7ZO2VH5haWcJZLy6q3frRqUkLjyKAQy7Oyv0d3dmvrb03Ug/s1600/username.jpg" style="height: auto; max-width: 100%;" width="320" /></li>
<li>Pilih password, klik next untuk melewati</li>
<li>Masukkan serial number, klik next untuk melewati</li>
<li>Pilih update option, pilih ask me later jika anda ingin update secara manual<br /><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8WT1I-CvK4pSIDSHAfbtLOvwrjZ618WU4nZCfSHDxbFHNBUSLT6qoswxlChpBP30GHzeLZsTZGD65_FlzURGmK_kJv0a5p7ERg4kmUDGDKkEl5OSc-2vmMWCe3YjZ2VK9tsBrNPicXfE/s1600/ask+me+later+update.jpg" style="height: auto; max-width: 100%;" width="320" /></li>
<li>Atur tanggal dan waktu komputer Anda<br /><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuswL3qfDsem0y3lelN12xPro8WT9GIzWWOjlmTfarey1yofw0Kd8ZdWizuzFiqy6cm_maYlg2ni4QWBV7qPWYARY5ExH7mP1T-mrn5xfq5ytjrHNfQ-ewW5J5fV8i8YPsGR3TgBdVjJw/s1600/tanggal+dan+waktu.jpg" style="height: auto; max-width: 100%;" width="320" /></li>
<li>Selamat, Windows sudah terinstall</li>
<li>Tahap terakhir adalah silahkan install driver komputer Anda, mulai dari vga, chipset dll. Semua driver terdapat dalam cd ketika anda membeli laptop/motherboard komputer</li>
Demikian tutorial dari saya tentang cara melakukan install windows 7 pada komputer. Jika ada pertanyaan seputar cara installasi, silahkan ajukan pertanyaan tersebut melalui kolom komentar di bawah ini. Terima kasih.</div>

10:13:00 PM

RiyantoCips

Kotak Pencarian Keren untuk Blog 2016

Floating Social Bookmark dengan Efek Easing

Cara Membuat Author Box dibawah Postingan Keren 2016

Social Share Button Dengan Efek Toggle 2016

Cara Membuat Widget Popular Post Dengan Efek Gradient 2016

Download Android Studio 2016

Penyebab Komputer Restart Sendiri dan Cara Mengatasinya 2016

Cara Instal Baru/Instal Ulang (Windows 7) 2016

Popular Posts

Blog Labels

Blog Archive

Template

Join This Site

Histats

Daftar Filem 2016

Total Pageviews