Coretan Jawa

Langkah Mudah Membuat Responsive Color Picker Flat UI

<span style="color: #073763;"><a href="http://coretanjawa.blogspot.com/" style="font-weight: bold;" target="_blank">CORETANJAWA</a><b> -</b> </span>Postingan sebelumnya adalah <b><a href="http://coretanjawa.blogspot.com/2016/12/cara-membuat-tombol-demo-dan-download.html" target="_blank">Tombol FLAT UI</a>, </b>maka untuk postingan kali ini adalah langkah mudah membuat <b>color picker FLAT UI</b>, fungsinya apa ? untuk memudahkan disaat kita meg-edit template dan men desain sebuah digital produk. Selain itu Code <b>FLAT UI </b> ini sudah masuk dalam kategori responsive, HTML dan CSS akan membuat load blog tidak terlalu berat, istimewa kan ?<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe34wmMg6PDH9LiOkF7BhLF03B3efiT7MHN0UOe1MRim3Mqz3SK2oHL-VdKOuoLMQbYWI6qhyphenhyphen_X51-mmNG6RvKEEiolSBu397VhXAMqppntQ7H47MSJGC92iH1Hjpg3LuZhHiCyvxoKnw/s1600/Langkah+Mudah+Membuat+Responsive+Color+Picker+Flat+UI.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Langkah Mudah Membuat Responsive Color Picker Flat UI" border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe34wmMg6PDH9LiOkF7BhLF03B3efiT7MHN0UOe1MRim3Mqz3SK2oHL-VdKOuoLMQbYWI6qhyphenhyphen_X51-mmNG6RvKEEiolSBu397VhXAMqppntQ7H47MSJGC92iH1Hjpg3LuZhHiCyvxoKnw/s640/Langkah+Mudah+Membuat+Responsive+Color+Picker+Flat+UI.png" title="Langkah Mudah Membuat Responsive Color Picker Flat UI" width="640" /></a></div>
<h3>
<br />
Langkah Membuat di blogger</h3>
<div>
Buat new post bisa di laman ataupun editor, lalau tambahkan Code di bawah ini pada menu Tab HTML</div>
<pre class="code code-html"><label>HTML</label><code><div id="flatzhuber">

<ul class="flatzhu">

<li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>

</li>

<li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span>

</li>

<li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span>

</li>

<li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span>

</li>

<li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span>

</li>

<li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span>

</li>

<li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span>

</li>

<li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span>

</li>

<li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span>

</li>

<li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span>

</li>

<li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span>

</li>

<li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span>

</li>

<li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span>

</li>

<li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span>

</li>

<li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span>

</li>

<li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span>

</li>

<li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span>

</li>

<li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span>

</li>

<li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span>

</li>

<li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span>

</li>

<li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span>

</li>

<li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span>

</li>

<li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span>

</li>

<li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span>

</li>

<li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span>

</li>

<li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span>

</li>

<li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span>

</li>

<li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span>

</li>

<li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span>

</li>

<li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span>

</li>

<li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span>

</li>

<li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span>

</li>

<li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span>

</li>

<li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span>

</li>

<li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span>

</li>

<li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span>

</li>

<li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span>

</li>

<li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span>

</li>

<li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span>

</li>

<li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span>

</li>

<li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span>

</li>

<li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span>

</li>

<li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span>

</li>

<li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span>

</li>

<li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span>

</li>

<li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span>

</li>

<li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span>

</li>

<li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span>

</li>

<li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span>

</li>

<li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span>

</li>

<li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span>

</li>

<li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span>

</li>

<li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span>

</li>

<li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span>

</li>

<li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span>

</li>

<li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span>

</li>

<li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span>

</li>

<li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span>

</li>

<li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span>

</li>

<li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span>

</li>

<li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span>

</li>

<li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span>

</li>

<li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span>

</li>

<li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span>

</li>

<li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span>

</li>

<li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span>

</li>

<li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span>

</li>

<li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span>

</li>

<li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span>

</li>

<li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span>

</li>

<li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span>

</li>

<li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span>

</li>

<li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span>

</li>

<li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span>

</li>

<li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span>

</li>

<li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span>

</li>

<li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span>

</li>

<li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span>

</li>

<li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span>

</li>

<li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span>

</li>

</ul>

</div>

/* Flat UI Color */

#flatzhuber ul.flatzhu{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}

#flatzhuber ul.flatzhu li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}

#flatzhuber ul.flatzhu li:hover{z-index:4}

#flatzhuber ul.flatzhu li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}

#flatzhuber ul.flatzhu li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}

#flatzhuber ul.flatzhu li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}

#flatzhuber ul.flatzhu li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}

#flatzhuber ul.flatzhu li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}

#flatzhuber ul.flatzhu li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}

@media screen and (max-width:800px){#flatzhuber ul.flatzhu li{width:33.3%;line-height:normal}}

@media screen and (max-width:640px){#flatzhuber ul.flatzhu li{width:50%}}

@media screen and (max-width:480px){#flatzhuber ul.flatzhu li{width:100%}}

</style></code></pre>
Nice selesai save lalu cek hasilnya.<br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://codepen.io/ilhamrpl/full/QGQJLM/" target="_blank">Demo</a></li>
</ul>
</div>
<div class="clear">
</div>
<br />
Demikian <i><a href="http://coretanjawa.blogspot.com/2016/12/langkah-mudah-membuat-responsive-color.html" target="_blank">Langkah Mudah Membuat Responsive Color Picker Flat UI</a></i>, Mugi - mugi bermanfaat nggeh.

Blogging CSS HTML Langkah Mudah Membuat Responsive Color Picker Flat UI

CORETANJAWA - Postingan sebelumnya adalah Tombol FLAT UI , maka untuk postingan kali ini adalah langkah mudah membuat color picker FLAT U...

Cara Membuat Tombol Demo Dan Download Flat UI dengan Mudah

6:08 AM Unknown 0

<span style="font-family: inherit;"><b><a href="http://coretanjawa.blogspot.com/" target="_blank"><span style="color: blue;">CORETANJAWA</span></a> - </b>Halo gengs ! Pada kesempatan hari ini saya akan membahas tentang <b>cara membuat tombol demo dan download flat ui</b>. Apa itu flat ui ? Tombol flat ui adalah desain yang biasa di gunakan untuk web statis ataupun dinamis, pada umumnya di gunakan untuk produk digital dan iklan di media online.</span><br />
<span style="font-family: inherit;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaL7kSRnA4zi3YHAVfQC0WkPAMOuLta7oj00VYbrRxM6r-rL1d83Ryv8KStQKXAJVGr6ncgIaZrfY6irDs1SlSqePPD_yQZBHBMq3cTVK2M3I7DllAkMPzbZCusKH6twDjVqjEtdIdVbI/s1600/Cara+Membuat+Tombol+Demo+Dan+Download+Flat+UI+dengan+Mudah.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img alt="Cara Membuat Tombol Demo Dan Download Flat UI dengan Mudah" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaL7kSRnA4zi3YHAVfQC0WkPAMOuLta7oj00VYbrRxM6r-rL1d83Ryv8KStQKXAJVGr6ncgIaZrfY6irDs1SlSqePPD_yQZBHBMq3cTVK2M3I7DllAkMPzbZCusKH6twDjVqjEtdIdVbI/s400/Cara+Membuat+Tombol+Demo+Dan+Download+Flat+UI+dengan+Mudah.png" title="Cara Membuat Tombol Demo Dan Download Flat UI dengan Mudah" width="400" /></span></a></div>
<span style="font-family: inherit;"><br />
</span> <span style="font-family: inherit;">Dalam tutorial kali ini saya akan lebihkan karena tombol nya ada icon awesome seperti gambar di atas, menarik kan ? Baiklah tanpa lama - lama kita action untuk membuatnya.</span><br />
<span style="font-family: inherit;"><br />
</span> Langkah pertama, karena menggunakan <b>Font Awesome </b>silahkan tambahkan style <b>CSS </b>di bawah ini ke dalam template sobat. Taruhnya tepat di atas kode <span style="color: #0b5394;"></head></span><br />
<br />
<pre class="code code-html"><label>HTML</label><code><link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/></code></pre>
<br />
Sebelum maju ke tahap selanjutnya silahkan sobat lihat <b>DEMO </b>2 style tombol <b>FLAT UI </b>di bawah ini<br />
<br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://codepen.io/ilhamrpl/full/dOdgqL/" target="_blank">Style 1</a></li>
<li><a class="demo" href="http://codepen.io/ilhamrpl/full/BQYqGz/" target="_blank">Style 2</a></li>
</ul>
</div>
<div class="clear">
</div>
<br />
Langkah kedua, Tambahkan Code CSS di bawah ini tepat di atas Code </style><br />
<br />
<h3>
Style 1</h3>
<pre class="code code-css"><label>CSS</label><code>/* CSS Button Style 1 */
.button{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button ul{margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none}
.button li a.demo,.button li a.download{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button li a.download{background:#3498db}
.button li a.demo:hover,.button li a.download:hover{background:#666}
.button li a.demo:active,.button li a.download:active{cursor:pointer}
.button li a.demo:after,.button li a.download:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.button li a.download:after{content:'\f019'}</code></pre>
<h3>
Style 2</h3>
<pre class="code code-css"><label>CSS</label><code>/* CSS Button Style 2 */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}</code></pre>
<br />
Langkah ketiga untuk memanggil Code lewat postingan, silahkan simpan Code di bawah di komputer sobat, lalu gunakan jika sobat mau posting dan memakai Code <b>tombol FLAT UI.</b><br />
<h3>
Style 1 </h3>
<pre class="code code-html"><label>HTML</label><code><div style="text-align: center;">

<ul class="button">

<li><a class="demo" href="<mark>http://coretanjawa.blogspot.com</mark>" target="_blank">Demo</a></li>

<li><a class="download" href="<mark>http://coretanjawa.blogspot.com</mark>" target="_blank">Download</a></li>

</ul>

</div>

<div class="clear"></div></code></pre>
<h3>
Style 2 </h3>
<pre class="code code-html"><label>HTML</label><code><div style="text-align: center;">

<ul class="button2">

<li><a class="demo" href="<mark>http://coretanjawa.blogspot.com</mark>" target="_blank">Demo Link</a></li>

<li><a class="download" href="<mark>http://coretanjawa.blogspot.com</mark>" target="_blank">Download Link</a></li>

</ul>

</div>

<div class="clear"></div></code></pre>
<blockquote class="tr_bq">
Replace Code yang saya tandai diatas dengan URL blog sobat.</blockquote>
Demikian <i><a href="http://coretanjawa.blogspot.com/2016/12/cara-membuat-tombol-demo-dan-download.html" target="_blank">Cara Membuat Tombol Demo Dan Download Flat UI dengan Muda</a>h</i>, Semoga Bermanfaat.

Blogging CSS HTML Cara Membuat Tombol Demo Dan Download Flat UI dengan Mudah

CORETANJAWA - Halo gengs ! Pada kesempatan hari ini saya akan membahas tentang cara membuat tombol demo dan download flat ui . Apa itu flat...

Langkah Memasang Recent Post di Sidebar dengan Slider

1:51 AM Unknown 0

<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><a href="http://coretanjawa.blogspot.com/" target="_blank"><span style="color: #38761d;">CORETANJAWA</span></a> - </b>Jumpa lagi dengan saya ya gengs 😁 karena saat ini sore, pada sore ini saya akan membuka rahasia <b>langkah membuat recent post di sidebar dengan slider. </b>Blog dengan effect slider akan tampak lebih indah karena terlihat elegant, mau tau caranya simak ke bawah ya</span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFY311nmCtRm7tLgQL2jm9KN7qVIqoxD52nIVwCNLn95bpGV8DAiQ87h-uV264smAoCL1GPiQWHYBiV7itdrFPk_gH6TXGkJfBQCeTK1iCr_aFlVqtE-V0p_kef9w_EnxLMVQFUeuR4HY/s1600/Langkah+Memasang+Recent+Post+di+Sidebar+dengan+Slider.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Langkah Memasang Recent Post di Sidebar dengan Slider" border="0" height="448" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFY311nmCtRm7tLgQL2jm9KN7qVIqoxD52nIVwCNLn95bpGV8DAiQ87h-uV264smAoCL1GPiQWHYBiV7itdrFPk_gH6TXGkJfBQCeTK1iCr_aFlVqtE-V0p_kef9w_EnxLMVQFUeuR4HY/s640/Langkah+Memasang+Recent+Post+di+Sidebar+dengan+Slider.png" title="Langkah Memasang Recent Post di Sidebar dengan Slider" width="640" /></a></div><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Istimewanya widget ini bisa depertemukan menurut label, keren kan ? buat blog yang ada sidebarnya cocok banget di pasang widget ini. Langsung aja ya caranya :</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <br />
<h3><span style="font-family: "arial" , "helvetica" , sans-serif;">PART I</span></h3><div><span style="font-family: "arial" , "helvetica" , sans-serif;">Masuk ke akun blog sobat > Tata Letak > Buat sebuah widget anyar (baru) HTML/JVScript lalu tambahkan kode di ngisor (bawah) ini dan simpan.</span></div><div><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><div><span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span></div><pre class="code code-html"><label>HTML</label><code><style scoped="" type="text/css">

ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhueBMFIhUCxCWxaJ0PTSMkv7YLuB2g4CWjbOaCaG9cbhyMclu66k43G8472WRPYbO5SmDR4_Ifq4hkAsX09GN2IJvVP5oU0Y-oIAjI9RdVIk_nh4M6h9tU2ldLv4ua42-bB14SzGehhMA/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px }

</style>

<div id="featuredpostside"></div>

function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};

//<![CDATA[

FeaturedPostSide({

blogURL: "<mark>http://coretanjawa.blogspot.com</mark>",

MaxPost: <mark>8</mark>,

idcontaint: "#featuredpostside",

ImageSize: <mark>300</mark>,

interval: <mark>5000</mark>,

autoplay: <mark>true</mark>,

tagName: <mark>false</mark>

});

//]]>

</script></code></pre><div style="text-align: center;"><ul class="button"><li><a class="demo" href="http://codepen.io/ilhamrpl/full/vydapX/" target="_blank">Demo</a></li>
</ul></div><div class="clear"></div><br />
<br />
<h3><span style="font-family: Arial, Helvetica, sans-serif;">Setting Widget</span></h3><div><span style="font-family: Arial, Helvetica, sans-serif;">URL : http://coretanjawa.blogspot.com ganti dengan URL sobat</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;">MaxPost:8 ganti dengan berapa jumlah artikel yang akan di tampilkan</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;">ImageSize: ganti dengan kreatifitas pixel gambar sobat</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;">Interval : ganti dengan keinginan lama tidak nya slider pindah</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;">AutoPlay : on atau off memulai slider (true : hidup false : mati)</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;">TagName : ganti dengan label sobat jika ingin menampilkan berdasarkan label, contoh tagname: "cyber"</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;">Demikian cara <b><a href="http://coretanjawa.blogspot.com/2016/12/langkah-memasang-recent-post-di-sidebar.html" target="_blank">Langkah Memasang Recent Post di Sidebar dengan Slider</a></b>, semoga berguna untuk sobat.</span></div>

Blogging HTML Langkah Memasang Recent Post di Sidebar dengan Slider

CORETANJAWA - Jumpa lagi dengan saya ya gengs 😁 karena saat ini sore, pada sore ini saya akan membuka rahasia langkah membuat recent post ...

Bagi Artikel Menjadi Beberapa halaman dengan Effect Slide di Blogger

11:27 PM Unknown 0

<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="color: #0000ee;"><b><u><a href="http://coretanjawa.blogspot.com/2016/12/bagi-konten-artikel-menjadi-beberapa.html" target="_blank">Bagi Artikel Menjadi Beberapa halaman dengan Effect Slide di Blogger</a></u></b></span><b> - </b>Cukup mudah karena sobat tinggal menambahkan kode HTML saja sebagi pemanggil di editor pos <b>blog </b>yang nantinya akan muncul sendiri di tampilan <b><a href="http://coretanjawa.blogspot.com/" target="_blank">blog</a>.</b></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><br />
</b></span> <br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJ8aPrgbjiUlp9mEf8rzj-R_JAkhlVD9swnUByEOVQqwc6ZiirC6qxUVlI629z6Vem7lLBZ0ciBh3yYfrv15IrV_rZNJVG0wQAXT9qwsWkKT35OyMaMrVl4IYa39bGrffnhEVz2yxWlE/s1600/Bagi+Konten+Artikel+Menjadi+Beberapa+Halaman+dengan+Effect+Slide.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bagi Konten Artikel Menjadi Beberapa Halaman dengan Effect Slide" border="0" height="414" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJ8aPrgbjiUlp9mEf8rzj-R_JAkhlVD9swnUByEOVQqwc6ZiirC6qxUVlI629z6Vem7lLBZ0ciBh3yYfrv15IrV_rZNJVG0wQAXT9qwsWkKT35OyMaMrVl4IYa39bGrffnhEVz2yxWlE/s640/Bagi+Konten+Artikel+Menjadi+Beberapa+Halaman+dengan+Effect+Slide.png" title="Bagi Konten Artikel Menjadi Beberapa Halaman dengan Effect Slide" width="640" /></a></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><br />
</b></span> <span style="font-family: "arial" , "helvetica" , sans-serif;">Tips ini sangat bagus untuk sobat yang suka menulis artiekl long (panjang) karena akan memperluas ruang posting sobat. Caranya simak di bawah ini :</span><br />
<h3>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Bagi Artikel Menjadi Beberapa halaman dengan Effect Slide di Blogger</span></h3>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Masuk ke blogger > Template > Edit HTML > Salin code di bawah niki sebelum </span><span style="background-color: white; border: 0px; box-sizing: border-box; font-family: "roboto" , sans-serif; font-size: 15px; font-stretch: inherit; line-height: 25.5px; margin: 0px; padding: 0px; vertical-align: baseline;"><kbd style="-webkit-user-select: text; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; box-sizing: border-box; color: #28a1f0; 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; position: relative; vertical-align: baseline;">]]></b:skin></kbd><kbd style="-webkit-user-select: text; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; box-sizing: border-box; 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; position: relative; vertical-align: baseline;"> </kbd><kbd style="-webkit-user-select: text; border-image-outset: initial; border-image-repeat: initial; border-image-slice: initial; border-image-source: initial; border-image-width: initial; border: 0px; box-sizing: border-box; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; position: relative; vertical-align: baseline;">utawi<span style="color: #3d85c6;"></style> </span></kbd></span></div>
<div>
<pre class="code code-css"><label>CSS</label><code>/* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}</code></pre>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Lanjut kopas kode di bawah ini sebelum <span style="color: #0b5394;"></body></span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="color: #0b5394;"><br />
</span></span></div>
<pre class="code code-jquery"><label>Jquery</label><code><script type='text/javascript'>

//<![CDATA[

function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,<mark>maxIndex=4</mark>;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();

//]]>

</script></code></pre>
<blockquote class="tr_bq">
Ganti kode yang saya tandai "4" dengan angka yang sobat inginkan untuk menambahkan halaman.</blockquote>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Save template, Langkah selanjutnya buat postingan artikel baru lalu kopas kode di bawah ini taruh di menu tab HTML.</span><br />
<pre class="code code-html"><label>HTML</label><code><div class="next-wrap">

<div id="photocons" class="instruction">

<div class="slidecontentWrap">

<div class="slidecontent">

<-- ISI KONTEN DI SINI -->

</div>

<div class="slidecontent">

<-- ISI KONTEN DI SINI -->

</div>

<div class="slidecontent">

<-- ISI KONTEN DI SINI -->

</div>

<div class="slidecontent">

<-- ISI KONTEN DI SINI -->

</div>

<div class="slidecontent">

<-- ISI KONTEN DI SINI -->

</div>

<a class="movepg prever">prev</a>

<a class="movepg nexter">next</a>

</div></code></pre>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://codepen.io/ilhamrpl/full/XNZYzZ/" target="_blank">Demo</a></li>
</ul>
</div>
<div class="clear">
</div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Publikasikan artikel dan cek hasilnya.</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br /></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Demikian cara <span style="color: #0000ee;"><b><u><a href="http://coretanjawa.blogspot.com/2016/12/bagi-konten-artikel-menjadi-beberapa.html" target="_blank">Bagi Artikel Menjadi Beberapa halaman dengan Effect Slide di Blogger</a></u></b></span>, Semoga bermanfaat.</span>

Blogging CSS HTML Bagi Artikel Menjadi Beberapa halaman dengan Effect Slide di Blogger

Bagi Artikel Menjadi Beberapa halaman dengan Effect Slide di Blogger - Cukup mudah karena sobat tinggal menambahkan kode HTML saja sebagi p...

Langkah Memasang Unlimited Page Navigation di Blog

10:46 PM Unknown 0

<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><a href="http://coretanjawa.blogspot.com/2016/12/langkah-memasang-unlimited-page.html" target="_blank">Langkah Memasang Unlimited Page Navigation di Blog</a> - </b>Hallo gengs  jumpa lagi dengan <b><a href="http://coretanjawa.blogspot.com/" target="_blank"><span style="color: #0b5394;">CORETANJAWA</span> </a></b>untuk kesempatan kali ini kami akan berbagi tutorial <b>cara memasang unlimited page navigation di blogger. Page navigation </b>berfungsi sebagai tombol cepat untuk membuka artikel ke halaman selanjutnya dengan nomor sesuai jumlah artikel yang ada  pada <b>blog.</b></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><br />
</b></span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbWekLpL6vGKYuvyl989u2v8bTxRfgvWQsSmlw9zetyfFf7LIIlURdRljEvAfSGqtTfOr3YZWvzHMDcB2j9f0LYvtY3utjRVLJ9f32Fl2pOnXwahhtIWfM7SbZ4JoNaj4IVUCmSMUYt6E/s1600/Langkah+Memasang+Unlimited+Page+Navigation+di+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Langkah Memasang Unlimited Page Navigation di Blog" border="0" height="414" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbWekLpL6vGKYuvyl989u2v8bTxRfgvWQsSmlw9zetyfFf7LIIlURdRljEvAfSGqtTfOr3YZWvzHMDcB2j9f0LYvtY3utjRVLJ9f32Fl2pOnXwahhtIWfM7SbZ4JoNaj4IVUCmSMUYt6E/s640/Langkah+Memasang+Unlimited+Page+Navigation+di+Blog.png" title="Langkah Memasang Unlimited Page Navigation di Blog" width="640" /></a></div>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><br />
</b></span> <span style="font-family: "arial" , "helvetica" , sans-serif;">Keistimewaan <b>page navigation </b>ini dapat memuat 10000 lebih artikel yang pada umunya <b>page navigation </b>biasa hanya memuat 500 artikel kurang lebih dan alhasil artikel yang lama tidak dapat di tampilkan di <b>blog</b>. Berikut langkah - langkah nya :</span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><br />
</span> <br />
<h3>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Langkah Memasang Unlimited Page Navigation di Blog</span></h3>
<div>
<span style="font-family: "arial" , "helvetica" , sans-serif;">Login ke <b>blogger </b>⇒ Template ⇒ Edit HTML ⇉ Salin kode di bawah ini sebelum <span style="color: #6aa84f;"></head></span> </span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="color: #6aa84f;"><br />
</span></span> <br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="color: #6aa84f;"><b>Warna Padang</b></span></span><br />
<br /></div>
<pre class="code code-css"><label>CSS</label><code><b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

/* Page Navigation */

#blog-pager{background:#fff;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0}

.showpage a,.showpageNum a,.showpagePoint,.showpageOf{position:relative;background:#fff;display:inline-block;font-size:13px;color:rgba(0,0,0,.8);padding:5px 8px;margin:0 4px 0 0;box-shadow:0 1px 4px 1px rgba(0,0,0,0.1);border-radius:2px;transition:all .3s}

.showpageNum a:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02);transition:box-shadow 0.5s}

.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.03);color:#333;position:relative;}

.showpagePoint{background:#2980b9;color:#fff;}

@media screen and (max-width:640px) {

#blog-pager {padding:12px;}

.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0;box-shadow:0 1px 2px 1px rgba(0,0,0,0.1);}}

@media screen and (max-width:320px) {

.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}

</style>

</b:if>

</b:if></code></pre>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b>Warna Gelap</b></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><b><br />
</b></span> <br />
<pre class="code code-css"><label>CSS</label><code><b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

/* Page Navigation */

#blog-pager{background:#2d3141;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0}

.showpage a,.showpageNum a,.showpagePoint,.showpageOf{background:rgba(255,255,255,.1);display:inline-block;font-size:13px;color:rgba(255,255,255,.8);padding:5px 10px;margin:0 2px 0 0;border-radius:2px;transition:all .3s}

.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.2);color:#fff;position:relative;}

.showpagePoint{background:#70c3eb;color:#fff;z-index:200;position:relative;}

@media screen and (max-width:640px) {

#blog-pager {padding:12px;}

.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0}}

@media screen and (max-width:320px) {

.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}

</style>

</b:if>

</b:if></code></pre>
<br />
<blockquote class="tr_bq">
Biar lebih bagus edit <b>CSS</b> di atas sesuai kreatifitas sobat.</blockquote>
<span style="font-family: "arial" , "helvetica" , sans-serif;"> Langkah selanjutnya salin kode di bawah ini sebelum <span style="color: #6aa84f;"></body></span></span><br />
<br />
<pre class="code code-javascript"><label>JS</label><code><b:if cond='data:blog.pageType == &quot;index&quot;'>

/*<![CDATA[*/

var <mark>postperpage=7</mark>;var <mark>numshowpage=3</mark>;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";

/*]]>*/

</script>

</b:if></code></pre>
<br />
<blockquote class="tr_bq">
Ganti kode yang saya tandai di atas "postperpage=7" dengan artikel yang akan di tampilkan dan numshowpage=3 dengan jumlah nomor page navigation yang akan di tampilkan.</blockquote>
<span style="font-family: "arial" , "helvetica" , sans-serif;"> Selanjutnya cari kode di bawah ini :</span><br />
<br />
<pre class="code code-html"><label>HTML</label><code><b:includable id='main' var='top'></code></pre>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Geser tikus ke bawah dan temukan kode yang mirip di bawah ini :</span><br />
<pre class="code code-html"><label>HTML</label><code>

<b:include name='nextprev'/></code></pre>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Lanjut ganti kode di atas dengan kode di bawah ini :</span><br />
<br />
<pre class="code code-html"><label>HTML</label><code>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<b:include name='nextprev'/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<b:include name='nextprev'/>

<b:else/>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:include name='nextprev'/>

</b:if>

</b:if></code></pre>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Nice simpan template dan cek hasilnya.</span><br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://idtgadget.blogspot.com/" target="_blank">Demo</a></li>
</ul>
</div>
<div class="clear">
</div>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;">Demikian tutorial <b><a href="http://coretanjawa.blogspot.com/2016/12/langkah-memasang-unlimited-page.html" target="_blank">Langkah Memasang Unlimited Page Navigation di Blog</a></b>, Jika bermanfaat hendak share terimakasih.</span>

Blogging CSS HTML JavaScript Langkah Memasang Unlimited Page Navigation di Blog

Langkah Memasang Unlimited Page Navigation di Blog - Hallo gengs jumpa lagi dengan CORETANJAWA untuk kesempatan kali ini kami akan berbag...

Coretan Jawa

Langkah Mudah Membuat Responsive Color Picker Flat UI

Cara Membuat Tombol Demo Dan Download Flat UI dengan Mudah

Langkah Memasang Recent Post di Sidebar dengan Slider

Bagi Artikel Menjadi Beberapa halaman dengan Effect Slide di Blogger

Langkah Memasang Unlimited Page Navigation di Blog

Entri Populer

Label