jQuery Efek fadeIn dan fadeOut Page Load Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdGFPW6O89UjLG-Z1OMxwWzgSJZq0EQDWcR-IXwKjF4oI-m3ZYCFTDI5MJEvljE33oYQvcTDII3xu-kyvlhKcTNsfAkEDz3t1p1TcstughA1CBo83EILRyHZHBhyPPgp8BNVG_iJu0HM/s1600/fadein-fadeout-page-load.gif" class="center" ><img alt="jQuery Efek fadeIn dan fadeOut Page Load Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKdGFPW6O89UjLG-Z1OMxwWzgSJZq0EQDWcR-IXwKjF4oI-m3ZYCFTDI5MJEvljE33oYQvcTDII3xu-kyvlhKcTNsfAkEDz3t1p1TcstughA1CBo83EILRyHZHBhyPPgp8BNVG_iJu0HM/s1600/fadein-fadeout-page-load.gif" title="jQuery Efek fadeIn dan fadeOut Page Load Blog"/></a><b>jQuery Efek fadeIn dan fadeOut Page Load Blog</b> – tulisan ini saya latar belakangi karena semula page load blog ini yang lumayan lambat karena banyaknya javascript yang saya gunakan sehingga pada saat loading membuka halaman tampilannya sedikit terganggu dan terlihat kurang rapi. Untuk mengatasi hal ini maka timbul inspirasi untuk menutupi kekurangan tersebut agar pada saat halaman blog terbuka sudah dalam tampilan seutuhnya sesuai tata letak masing-masing elemen. Namun perlu diketahui, ini bukan berarti mempercepat loading blog akan tetapi hanya memanipulasi halaman pada saat proses loading sehingga saat browser memuat (membaca javascript yang tergolong lama) dan terkadang menyebabkan tampilan halaman sedikit acak-acakan maka supaya tidak terlihat saya menggunakan cara ini untuk menutupi kemungkinan tersebut. Mungkin apabila di antara kalian ada yang mengalami masalah seperti halnya dengan blog ini, bisa menggunakan cara ini sebagai alternatife untuk memanipulasi halaman dengan membuat efek fadeIn dan fadeOut agar setiap kali pengunjung masuk dan menjelajahi blog dengan link yang ada maka setiap kali browser memuat halaman akan menampilkan efek halaman yang memudar terlebih dahulu dan saat halaman terbuka sudah dalam tampilan yang rapi pastinya. <h2>Efek fadeIn Page Load Blog</h2>Efek ini yang saya gunakan pada blog ini, demonya bisa di lihat saat membuka salah satu halaman di blog ini. Walaupun sederhana namun lumayan untuk memanipulasi loading halaman blog. Script yang di gunakan seperti dibawah ini, cara memasangnya masuk ke Edit HTML lalu taruh di atas kode <code></body></code><pre><br /><script type='text/javascript'><br />$(document).ready(function () {<br /> $('body').hide().fadeIn(5000).delay(500)<br />});<br /></script><br /></pre>Script diatas sudah bisa berjalan. Namun biasanya setelah layout blog sudah nampak terlihat akan tetapi efek baru akan mulai berjalan. Untuk menghilangkan terlebih dahulu, bisa menggunakan CSS <code>body{display:none}</code> untuk menyembunyikan body sebelum script berjalan. <h2>Efek fadeIn dan fadeOut Page Load Blog</h2>Untuk yang ini dengan sedikit tambahan efek pada saat keluar dari halaman (meninggalkan halaman). Pada saat berpindah halaman maka akan timbul efek fadeOut atau halaman akan memudar terlebih dahulu sebelum ke link halaman berikutnya. Cara kerja dari script di bawah adalah menyeleksi seluruh link yang ada pada halaman blog tersebut, sehingga mungkin apabila pada blog tersebut terdapat salah satu link untuk menampilkan lightbox atau modal dialog mungkin akan bentrok dan salah satu dari efek tersebut tidak berjalan. Untuk menerapkannya kedalam blog caranya sama seperti langkah di atas, dengan menaruhnya di atas kode <code></body></code><pre><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function () {<br /> $("body").css("z-index", "-10");<br /> $("body").fadeIn(5000);<br /> $("a").click(function (event) {<br /> event.preventDefault();<br /> linkLocation = this.href;<br /> $("body").fadeOut(1000, redirectPage);<br /> });<br /><br /> function redirectPage() {<br /> window.location = linkLocation;<br /> }<br />});<br />//]]><br /></script><br /></pre><div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/page-load.html" target="_blank" rel="nofollow" title="illustrasi efek fadeOut"><span><i class="fa fa-eye"></i></span>DEMO</a></div>Namun sebelum menerapkan cara di atas juga perlu dipastikan bahwa di template blog juga sudah terpasang jQuery, bisa menggunakan versi terbaru atau bisa juga versi dibawahnya. <pre><br /><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><br /></pre>Apabila sebelumnya sudah terdapat kode tersebut maka abaikan saja kode diatas karena tidak perlu memasangnya lagi.

jQuery Efek fadeIn dan fadeOut Page Load Blog – tulisan ini saya latar belakangi karena semula page load blog ini yang lumayan lambat karen...

Read More

Penggunaan jQuery Toggle, fadeToggle dan slideToggle

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0lmfYugaS1fnn52ZecOGh68uFrJUTomg_BP0i2xPDSEzVfrIHjirC3CzVDBNDhXJmrs6FJFVKaQOovhLhSnOojgTHHPSrfT6r-2LcWFEn4p_O6SK2eBhVsisg0q5D-ByOaoWOL_6_alY/s1600/jquery-toggle.gif" class="center" ><img alt="Penggunaan jQuery Toggle, fadeToggle dan slideToggle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0lmfYugaS1fnn52ZecOGh68uFrJUTomg_BP0i2xPDSEzVfrIHjirC3CzVDBNDhXJmrs6FJFVKaQOovhLhSnOojgTHHPSrfT6r-2LcWFEn4p_O6SK2eBhVsisg0q5D-ByOaoWOL_6_alY/s400/jquery-toggle.gif" title="Penggunaan jQuery Toggle, fadeToggle dan slideToggle"/></a><b>Penggunaan jQuery Efek Toggle, fadeToggle dan slideToggle</b> – kata "toggle" didalam bahasa jQuery identik dengan efek show/hide yang tidak lain adalah sebuah tombol yang berfungsi untuk menampilkan atapun menyembunyikan elemen. Namun sebelum lebih lanjut ke tuorial ada baiknya kita pahami terlebih dahulu tentang apa itu jQuery serta cara menggunakannya. Agar lebih leluasa melakukan kontrol pada halaman web/blog pastikan terlebih dahulu sudah terpasang jQuery didalam template blog dan hanya menerapkan satu jQuery saja terserah mau menggunakan yang versi berapa, namun usahakan untuk menggunakan versi yang lebih baru. Karena versi yang terbaru adalah perbaikan dari bug yang terdapat pada versi sebelumnya. Versi terbaru jQuery saat ini adalah <code>jquery-1.10.2</code>. Untuk memasang jQuery didalam template bisa menaruhnya diatas kode <code></head></code> atau bisa juga di atas <code></body></code>. <pre><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/></pre>Apabila sudah ada satu jQuery yang sudah terpasang didalam template, maka abaikan saja kode diatas. Sekarang kembali ke pokok bahasan untuk menerapkan jQuery Toggle, fadeToggle dan slideToggle. Metode ini sudah tidak asing lagi dan sering digunakan untuk membuat sedikit efek pada elemen tertentu didalam sebuah template. Agar mudah dipahami ada baiknya jika kita bahas satu per satu dari masing-masing efek tersebut. <blockquote class="info">Sebelum menentukan efek yang akan dipasang, terlebih dahulu sembunyikan elemen yang sudah anda pilih. Gunakan CSS property <code>display:none</code>, bukan <code>visibility:hidden</code>. Kemudian untuk efeknya nanti baru kita tampilkan menggunakan metode <code>toggle()</code>, <code>fadeToggle()</code> ataupun <code>slideToggle()</code>.</blockquote><h2>Penggunaan jQuery Toggle</h2>jQuery Toggle digunakan untuk membuat efek <code>show()</code> dan <code>hide()</code> yang tidak lain adalah untuk menampilkan dan menyembunyikan elemen dengan menggunakan metode <code>toggle()</code>. Syntax yang di gunakan seperti dibawah ini: <pre>$(selector).toggle(speed,easing,callback)</pre><h3>Contoh:</h3>Apabila di presentasikan contoh penulisannya script untuk menyembunyikan dan menampilkan suatu elemen seperti dibawah ini: <pre data-codetype="CSS"><br />#btn1{<br />padding:5px 15px;<br />background:#2ecc71;<br />color:#fff;<br />border:none;<br />cursor:pointer;<br />display:inline-block<br />}<br />#contoh1{<br />display:none;<br />text-align:center;<br />background:#2ecc71;<br />color:#fff;<br />padding:50px 0<br />}<br /></pre><pre data-codetype="HTML"><br /><button id='btn1'>Toggle</button><br /><div id='contoh1'>Contoh penggunaan jQuery toggle</div><br /></pre>Default <pre data-codetype="jQuery"><br />$(document).ready(function(){<br /> $("#btn1").click(function(){<br /> $("#contoh1").toggle();<br /> });<br />});<br /></pre><div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/toggle.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan menambahkan parameter speed <pre data-codetype="jQuery"><br />$(document).ready(function(){<br /> $("#btn1").click(function(){<br /> $("#contoh1").toggle(1000);<br /> });<br />});<br /></pre><div class="bt-grup"><a class="bt blue" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/toggle-speed.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan menambahkan parameter callback <pre data-codetype="jQuery"><br />$(document).ready(function(){<br /> $("#btn1").click(function(){<br /> $("#contoh1").toggle(1000,function(){<br /> alert("Pesan ini muncul setelah toggle selesai berjalan");<br /> });<br /> });<br />});<br /></pre><div class="bt-grup"><a class="bt red" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/toggle-callback.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div><h2>Penggunaan jQuery fadeToggle</h2>Metode <code>fadeToggle()</code> digunakan untuk memunculkan efek <code>fadeIn()</code> dan <code>fadeOut()</code> pada elemen yang sudah ditentukan. Syntax yang digunakan seperti dibawah ini: <pre>$(selector).fadeToggle(speed,easing,callback)</pre><h3>Contoh:</h3>Untuk menambahkan parameter speed maupun callback langkahnya sama seperti pada metode <code>toggle()</code>. <pre data-codetype="CSS"><br />#bton1{<br />padding:5px 15px;<br />background:#D94839;<br />color:#fff;<br />border:none;<br />cursor:pointer;<br />display:inline-block<br />}<br />#gambar{<br />display:none;<br />text-align:center;<br />padding:10px;<br />background:#E74C3C;<br />border:5px solid #fff<br />}<br />#gambar img{<br />width:300px;<br />height:200px;<br />border:5px solid #fff<br />}<br /></pre><pre data-codetype="HTML"><br /><button id='bton1'>fadeToggle</button><br /><div id="gambar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDlRtgrPxSOuOPaTxbPyrZE0n-FRovNoXAVXzbJBWQ-8F6kAtTxd2ufcn7W8_-t0BOISZ0vLjQI9F1h90ZCSLeEVXmbhDgu3AITtVNDO8NqxUTJF2OPyqeOZsEF_U5pBFpW0HNi-3uzLw/h200/Paramore+%287%29.jpg"/></div><br /></pre><pre data-codetype="jQuery"><br />$(document).ready(function(){<br /> $("#bton1").click(function(){<br /> $("#gambar").fadeToggle();<br /> });<br />});<br /></pre><div class="bt-grup"><a class="bt purple" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/fadetoggle.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div><h2>Penggunaan jQuery slideToggle</h2>Fungsinya sama seperti metode <code>toggle()</code> dan <code>fadeToggle()</code>, hanya saja efeknya yang berbeda. Metode <code>slideToggle()</code> digunakan untuk membuat efek <code>slideDown()</code> dan <code>slideUp()</code>. Syntax yang digunakan seperti dibawah ini: <pre>$(selector).slideToggle(speed,easing,callback)</pre><h3>Contoh:</h3>Contoh sederhana untuk deklarasi penulisannya script seperti dibawah ini: <pre data-codetype="CSS"><br />#buton1{<br />padding:5px 15px;<br />background:#D94839;<br />color:#fff;<br />cursor:pointer;<br />display:inline-block<br />}<br />#contoh2{<br />display:none;<br />text-align:center;<br />background:#E74C3C;<br />color:#fff;<br />padding:50px 0<br />}<br /></pre><pre data-codetype="HTML"><br /><div id="buton1">slideToggle</div><br /><div id="contoh2">Contoh penggunaan jQuery slideToggle</div><br /></pre>Default <pre data-codetype="jQuery"><br />$(document).ready(function(){<br /> $("#buton1").click(function(){<br /> $("#contoh2").slideToggle();<br /> });<br />});<br /></pre><div class="bt-grup"><a class="bt orange" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/slidetoggle.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan Menambahkan parameter speed <pre data-codetype="jQuery"><br />$(document).ready(function(){<br /> $("#buton1").click(function(){<br /> $("#contoh2").slideToggle(1000);<br /> });<br />});<br /></pre><div class="bt-grup"><a class="bt red" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/slidetoggle-speed.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div>Dengan Menambahkan parameter callback <pre data-codetype="jQuery"><br />$(document).ready(function(){<br /> $("#buton1").click(function(){<br /> $("#contoh2").slideToggle(1000,function(){<br /> alert("Pesan ini muncul setelah slideToggle selesai berjalan");<br /> });<br /> });<br />});<br /></pre> <div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/code-editor/slidetoggle-callback.html" target="_blank" rel="nofollow"><span><i class="fa fa-files-o"></i></span>Edit & Demo</a></div><h3><i class="fa fa-cogs"></i> Konfigurasi:</h3><table> <tr><th>Parameter</th><th>Deskripsi</th></tr> <tr><td><em>speed</em></td><td>Opsional. Untuk menentukan kecepatan efek.<p>Value:</p><ul> <li>milidetik (contoh: <code>1000</code>, <code>2000</code>, dst).</li> <li><code>"slow"</code></li> <li><code>"fast"</code></li></ul></td></tr><tr><td><em>easing</em></td><td>Opsional. Untuk menentukan kecepatan animasi pada titik tertentu. Value default yang digunakan adalah "swing"<p>Value:</p><ul> <li><code>"swing"</code> bergerak lebih lambat di awal/akhir, tapi lebih cepat di tengah.</li> <li><code>"linear"</code> bergerak dalam kecepatan konstan.</li></ul></td></tr><tr><td><em>callback</em></td><td>Opsional. Fungsi yang akan dieksekusi setelah metode <code>toggle()</code>, <code>fadeToggle()</code> ataupun <code>slideToggle()</code> sudah selesai berjalan. </td></tr></table>

Penggunaan jQuery Efek Toggle, fadeToggle dan slideToggle – kata "toggle" didalam bahasa jQuery identik dengan efek show/hide yan...

Read More

Penggunaan Jenis Efek jQuery Modal Dialog

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0HaAXJpdFKGMyhhveONiTKYqCls7uEEV0mqD4OBGEwM9rMoZezkgZJWZMv8CcE6bFuInWGJEn_R-dOZpvKRk68XomAFBn_kpXo3kb0-UnR0wmSHjIOjQhdKxkV7rYu1awDAPf0UGkhT4/s1600/modal-dialog.gif"><img alt="Penggunaan Jenis Efek jQuery Modal Dialog" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0HaAXJpdFKGMyhhveONiTKYqCls7uEEV0mqD4OBGEwM9rMoZezkgZJWZMv8CcE6bFuInWGJEn_R-dOZpvKRk68XomAFBn_kpXo3kb0-UnR0wmSHjIOjQhdKxkV7rYu1awDAPf0UGkhT4/s1600/modal-dialog.gif" title="Penggunaan Jenis Efek jQuery Modal Dialog" width="580" /></a><b>Penggunaan Jenis Efek jQuery Modal Dialog</b> - Ada banyak cara untuk menampilkan lightbox overlay dengan bermacam efek. Seperti yang sedang ngetrend saat ini adalah pengggunaan style lightbox untuk menampilkan efek pada widget dengan beberapa cara modern yang salah satunya mereka gunakan adalah menggunakan CSS transisi dan animasi untuk membuat efek pada kotak dialog saat muncul. Dalam desain user interface, modal dialog dikenal sebagai jendela tampilan baru kotak dialog yang mengharuskan pengguna untuk berinteraksi sebelum mereka dapat kembali ke operasi tampilan induk, sehingga mencegah alur kerja pada tampilan utama. Di Web/blog, Modal Dialog sering digunakan untuk menampilkan gambar secara rinci ataupun widget lainnya, dalam pola yang dikenal sebagai Lightbox. Efek lightbox sering juga disebut Modal Window atau Modal Dialog karena tampilan jendela sering digunakan untuk menampilkan kotak dialog. Apabila ingin mengkombinasikan untuk membuat kotak dialog dengan beberapa macam efek pada blog anda, berikut adalah cara untuk menggunakan jQuery Modal Dialog dengan CSS transisi dan animasi.<br /><br />Pertama masuk Edit HTML template dan pasang kode berikut ini di atas kode <code></head></code><br /><pre><link href='http://mas-andes.googlecode.com/svn/trunk/modal-dialog.css' rel='stylesheet' type='text/css'/><br /><script src='http://mas-andes.googlecode.com/svn/trunk/modernizr.custom.js' type='text/javascript'/></pre>Kemudian pasang kode berikut ini di atas kode <code></body></code><br /><pre><script type='text/javascript'><br />//<![CDATA[<br />var ModalEffects=(function(){function init(){var overlay=document.querySelector('.md-overlay');[].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el,i){var modal=document.querySelector('#'+el.getAttribute('data-modal')),close=modal.querySelector('.md-close');function removeModal(hasPerspective){classie.remove(modal,'md-show');if(hasPerspective){classie.remove(document.documentElement,'md-perspective')}}function removeModalHandler(){removeModal(classie.has(el,'md-setperspective'))}el.addEventListener('click',function(ev){classie.add(modal,'md-show');overlay.removeEventListener('click',removeModalHandler);overlay.addEventListener('click',removeModalHandler);if(classie.has(el,'md-setperspective')){setTimeout(function(){classie.add(document.documentElement,'md-perspective')},25)}});close.addEventListener('click',function(ev){ev.stopPropagation();removeModalHandler()})})}init()})();<br />(function(window){'use strict';function classReg(className){return new RegExp("(^|\\s+)"+className+"(\\s+|$)")}var hasClass,addClass,removeClass;if('classList'in document.documentElement){hasClass=function(elem,c){return elem.classList.contains(c)};addClass=function(elem,c){elem.classList.add(c)};removeClass=function(elem,c){elem.classList.remove(c)}}else{hasClass=function(elem,c){return classReg(c).test(elem.className)};addClass=function(elem,c){if(!hasClass(elem,c)){elem.className=elem.className+' '+c}};removeClass=function(elem,c){elem.className=elem.className.replace(classReg(c),' ')}}function toggleClass(elem,c){var fn=hasClass(elem,c)?removeClass:addClass;fn(elem,c)}var classie={hasClass:hasClass,addClass:addClass,removeClass:removeClass,toggleClass:toggleClass,has:hasClass,add:addClass,remove:removeClass,toggle:toggleClass};if(typeof define==='function'&&define.amd){define(classie)}else{window.classie=classie}})(window);<br />//]]><br /></script></pre>Kemudian Simpan template.<br /><br />Struktur HTML modal dialog:<br /><pre><div class="md-modal md-effect-1" id="modal-1"><br />    <div class="md-content"><br />        <h3>Modal Dialog <a class="md-close">&#215;</a></h3><br />        <div><br />            <p>Disini Isi Konten Kotak Dialog</p><br />        </div><br />    </div><br /></div><br /><br /><!-- Tombol untuk menampilkan modal dialog --><br /><button class="md-trigger" data-modal="modal-1">Open Dialog</button><br /><div class="md-overlay"></div></pre><blockquote class="atas">class <code>md-effect-1</code> dan ID <code>modal-1</code> adalah tipe efek yang di gunakan (Konfigurasi lihat tabel).<br /><code><p>Disini Isi Konten Kotak Dialog</p></code> adalah isi dari kotak dialog.</blockquote>Untuk menentukan masing-masing efek yang berbeda, lihat pada tabel konfigurasi dibawah ini: <br /><table> <tbody><tr> <th>class</th> <th>id</th> <th>effect</th> </tr><tr> <td><code>md-effect-1</code></td> <td><code>modal-1</code></td> <td>Fade in & Scale</td> </tr><tr> <td><code>md-effect-2</code></td> <td><code>modal-2</code></td> <td>Slide in (right)</td> </tr><tr> <td><code>md-effect-3</code></td> <td><code>modal-3</code></td> <td>Slide in (bottom)</td> </tr><tr> <td><code>md-effect-4</code></td> <td><code>modal-4</code></td> <td>Newspaper</td> </tr><tr> <td><code>md-effect-5</code></td> <td><code>modal-5</code></td> <td>Fall</td> </tr><tr> <td><code>md-effect-6</code></td> <td><code>modal-6</code></td> <td>Side Fall</td> </tr><tr> <td><code>md-effect-7</code></td> <td><code>modal-7</code></td> <td>Sticky Up</td> </tr><tr> <td><code>md-effect-8</code></td> <td><code>modal-8</code></td> <td>3D Flip (horizontal)</td> </tr><tr> <td><code>md-effect-9</code></td> <td><code>modal-9</code></td> <td>3D Flip (vertical)</td> </tr><tr> <td><code>md-effect-10</code></td> <td><code>modal-10</code></td> <td>3D Sign</td> </tr><tr> <td><code>md-effect-11</code></td> <td><code>modal-11</code></td> <td>Super Scaled</td> </tr><tr> <td><code>md-effect-12</code></td> <td><code>modal-12</code></td> <td>Just Me</td> </tr><tr> <td><code>md-effect-13</code></td> <td><code>modal-13</code></td> <td>3D Slit</td> </tr><tr> <td><code>md-effect-14</code></td> <td><code>modal-14</code></td> <td>3D Rotate Bottom</td> </tr><tr> <td><code>md-effect-15</code></td> <td><code>modal-15</code></td> <td>3D Rotate In Left</td> </tr><tr> <td><code>md-effect-16</code></td> <td><code>modal-16</code></td> <td>Blur</td> </tr><tr> <td><code>md-effect-17</code></td> <td><code>modal-17</code></td> <td>Let me in</td> </tr><tr> <td><code>md-effect-18</code></td> <td><code>modal-18</code></td> <td>Make way!</td> </tr><tr> <td><code>md-effect-19</code></td> <td><code>modal-19</code></td> <td>Slip from top</td> </tr></tbody></table>Agar lebih jelasnya dari masing-masing efek yang ada bisa dilihat pada halaman demo. <br /><div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/modal-dialog.html" target="_blank"><span><i class="fa fa-reply-all fa-flip-horizontal"></span></i>demo</a></div>Demikian untuk tata cara menerapkan dan <b>Penggunaan Jenis Efek jQuery Modal Dialog</b>, Selebihnya bisa berkreasi sendiri di blog masing-masing.

Penggunaan Jenis Efek jQuery Modal Dialog - Ada banyak cara untuk menampilkan lightbox overlay dengan bermacam efek. Seperti yang sedang ng...

Read More

Membuat Lightbox Widget Contact Form Blogger

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbGT9yE9qbr9rz9uK4fo6CKmBmcd196ACC9qBeRwslnjINFWW8KuQGjLdrtE2H4IVEpZ4DPOl6U_5OeuCBRw36A12CQfBZ1sadWN8ANv6HiVCYHT7XdWMmlWhfc6_KxakL-WewfGcv08/s1600/lightbox-contact-form.gif"><img alt="Membuat Lightbox Widget Contact Form Blogger" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbGT9yE9qbr9rz9uK4fo6CKmBmcd196ACC9qBeRwslnjINFWW8KuQGjLdrtE2H4IVEpZ4DPOl6U_5OeuCBRw36A12CQfBZ1sadWN8ANv6HiVCYHT7XdWMmlWhfc6_KxakL-WewfGcv08/s1600/lightbox-contact-form.gif" title="Membuat Lightbox Widget Contact Form Blogger" width="400" /></a><b>Membuat Lightbox Widget Contact Form Blogger</b> – dari beberapa tutorial yang pernah saya share di artikel sebelumnya ada beberapa style widget contact form dengan tampilan yang bervariasi. Pada tutorial ini saya akan kembali membahas mengenai widget contact form dengan efek lightbox agar tidak memerlukan halaman statis untuk memasang widget contact form dimana nantinya widget contact form akan muncul seperti kotak dialog karena ini juga cara yang sama seperti saat membuat modal dialog lainnya. Bagi yang ingin menggunakan, berikut tutorialnya untuk cara <b>Membuat Lightbox Widget Contact Form Blogger</b>.<br /><br />Pertama, masuk ke Edit HTML template blogger lalu cari kode <code>]]></b:skin></code> kemudian pasang kode berikut ini di atasnya.<br /><pre data-codetype="CSS">#contacts-forms{width:100%;margin-bottom:10px}<br />#widget-contact{border:2px solid #E74C3C;position:fixed;top:15%;left:50%;width:400px;height:auto;background-color:#fff;z-index:1000;display:none;margin:0 0 0 -200px}<br />#widget-contact h3.juduls{background:#E74C3C;color:#fff;font:normal 18px Tahoma,Sans-Serif;position:relative;margin:0;padding:15px;text-transform:uppercase}<br />#widget-contact h3.juduls a{position:absolute;top:10px;right:15px;color:#fff;font-size:22px;text-decoration:none;cursor:pointer}<br />#ContactForm1 h2{display:none}<br />#area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none}<br />#ContactForm1_contact-form-email-message{width:355px;background:#222;outline:none;border:1px solid #E74C3C;overflow:hidden;height:150px;color:#fff;margin:0 10px 10px;padding:7px}<br />#ContactForm1_contact-form-submit{font-weight:700;background:#E74C3C;position:relative;cursor:pointer;float:right;width:100px;outline:none;border:none;margin:0 10px 10px;padding:7px}<br />#ContactForm1_contact-form-submit:hover{background:#d00}<br />#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px}<br />#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:350px;background:#222;color:#fff;outline:none;border:1px solid #E74C3C;margin:0 10px 10px;padding:10px}<br />#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff}<br />.contact-form-widget p{margin:0}<br />.contact-form-widget{padding:5px}<br />.buka-contact{width:100%;padding:10px;background:#E74C3C;color:#fff;font-size:16px;cursor:pointer}<br />.buka-contact:hover{background:#d00}</pre>Selanjutnya cari kode <code></body></code> kemudian pasang kode berikut ini tepat di atasnya.<br /><pre data-codetype="jQuery"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><br /><script type='text/javascript'><br />$(function(){$('.buka-contact').click(function(){$('#widget-contact').show();$('#area-overlay').fadeTo("normal",0.8);return false});$('#widget-contact .close').click(function(){$('#area-overlay, #widget-contact').hide();return false})});<br /></script></pre>Selanjutnya cari kode <code><div id='sidebar-wrapper'></code> kemudian pasang kode berikut ini tepat dibawahnya.<pre data-codetype="HTML"><br /><div id='contacts-forms'><br /><div id='widget-contact'><br /><h3 class='juduls'>Contact Form<a href='#' class='close' title='Close'>&#215;</a></h3><br /><b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'/><br /></div><br /><div id='area-overlay'></div><br /><button class='buka-contact'>Kirim Pesan</button><br /></div></pre>Langkah terakhir Simpan template.<br /><br />Sekarang buka <b>Tata Letak</b>, maka disitu sudah muncul satu elemen widget baru. Selanjutnya tinggal klik <b>Tambahkan Widget > Gadget Lainnya > Formulir Kontak</b> seperti pada gambar dibawah ini.<br /><a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc2tUP2SUM9bRseAB0R2zpQ4mvogKybvXLGvsv6NHYiuzZt8ymzBrZes7LvzaCG-T52nyPMmEzN6Ys-agN-zlv7QvAPLYvSzTQBw3swTSclK2SPxI1zxLzwQxCv3YL9bY07QOsazxWekU/s1600/tambah-widget.gif"><img alt="Membuat Lightbox Widget Contact Form Blogger" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc2tUP2SUM9bRseAB0R2zpQ4mvogKybvXLGvsv6NHYiuzZt8ymzBrZes7LvzaCG-T52nyPMmEzN6Ys-agN-zlv7QvAPLYvSzTQBw3swTSclK2SPxI1zxLzwQxCv3YL9bY07QOsazxWekU/s1600/tambah-widget.gif" title="Membuat Lightbox Widget Contact Form Blogger" width="400" /></a>Cukup seperti itu saja untuk <b>Membuat Lightbox Widget Contact Form Blogger</b>. Selanjutnya apabila ingin merubah tampilannya bisa sesuaikan sendiri dengan merubah pada bagian CSS.

Membuat Lightbox Widget Contact Form Blogger – dari beberapa tutorial yang pernah saya share di artikel sebelumnya ada beberapa style widge...

Read More

Cara Membuat Widget Recent Post By Tag Label

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWA0F7dVFoUKhu9T-41h_SpaEbRfLfxkutbfWBMvpENtTeU9k5ZTosLgWxGIbf1048rAlu_PW0pTph9Bj11lfomyNbaAPg5D697gZmEqFnFwETxEbsap36Fo3JzJIf6LwcA3zBI1KkgQ/s1600/Recent-Post-By-Tag-Label.gif"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWA0F7dVFoUKhu9T-41h_SpaEbRfLfxkutbfWBMvpENtTeU9k5ZTosLgWxGIbf1048rAlu_PW0pTph9Bj11lfomyNbaAPg5D697gZmEqFnFwETxEbsap36Fo3JzJIf6LwcA3zBI1KkgQ/s550/Recent-Post-By-Tag-Label.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="550" /></a><b>Cara Membuat Widget Recent Post By Tag Label</b> – maksud dari widget ini adalah untuk menampilkan daftar posting terbaru berdasarkan masing-masing label. Widget ini biasanya digunakan pada template magazine untuk menampilkan artikel-artikel terbaru pada post homepage berdasarkan label yang digunakan, atau bisa juga untuk diterapkan pada sidebar untuk menampilkan recent post berdasarkan label tertentu. Bahkan bisa juga digunakan untuk menampilkan daftar posting terakhir yang di publish layaknya seperti recent post biasa atau yang umum digunakan, semua tergantung dari pengaturan untuk kebutuhan seperlunya dari blog tersebut. Untuk yang masih bingung penerapannya, berikut uraian tutorialnya untuk memasang widget recent post by tag label baik itu pada sidebar maupun di bagian bawah list post homepage.<br /><br />1. Pertama, copy kode berikut ini lalu taruh di atas kode <code></head></code><br /><pre><script type='text/javascript'><br />//<![CDATA[<br />function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function labelthumbs(json){document.write('<ul class="taglabel">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var thumburl;try{thumburl=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKhedygQ_B4FZpYAvzzDh_zRsAmEtVk1Tn4wKQA9cWkASWphjldYOYyYhq9PdzFUKYO3POWghcSyHJ0KzRlRcwZ2PvS-khC1jMfpWAfi_2OvheoTWmV-kFGlAQE34azrum1l7O6h1t1P5/'}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="'+posttitle+'" title="'+posttitle+'" class="label_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a><br>');if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('')}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('')}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+cdyear;flag=1}if(showcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" title="'+posttitle+'">More »</a>';flag=1}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')}<br />//]]><br /></script></pre>2. Kemudian copy lagi kode berikut ini dan taruh di atas kode <code>]]></b:skin></code><br /><pre>img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px}<br />.taglabel{float:left;width:100%;padding:0;margin:0}<br />ul.taglabel li{padding:5px 0;min-height:73px}</pre>3. Selanjutnya pasang kode berikut ini pada Widget HTML/Javascript.<br /><pre><script type='text/javascript'><br />    var numposts = 5; // Jumlah Post yang di tampilkan<br />    var showpostthumbnails = true; // Ganti "false" untuk tidak menampilkan [Thumbnail]<br />    var displaymore = false; // Ganti "true" untuk menampilkan link [More]<br />    var displayseparator = false;<br />    var showcommentnum = false; // Ganti "true" untuk menampilkan [Komentar]<br />    var showpostdate = false; // Ganti "true" untuk menampilkan [Tanggal]<br />    var showpostsummary = true; // Ganti "false" untuk tidak menampilkan [Deskripsi Post]<br />    var numchars = 60; // Character Deskripsi yang di tampilkan<br /></script><br /><script type="text/javascript" src="/feeds/posts/default/-/<i><b>NAMA_LABEL</b></i>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre><blockquote class="atas">Perhatikan pada baris ini:<pre><br /><script type="text/javascript" src="/feeds/posts/default/-/<i><b>NAMA_LABEL</b></i>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre>Apabila ingin merubah recent post menjadi default(tidak berdasarkan sebuah label), ganti baris kode tersebut dengan kode berikut ini:<pre><br /><script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre></blockquote>Jika ingin memasang di bagian bawah post homepage namun belum terdapat elemen kolom widget, maka buat terlebih dahulu kolom widget untuk tempat penyimpanan kode, langkah-langkah membuatnya seperti berikut ini. Agar lebih simple maka saya bagi menjadi 2 kolom widget yang sejajar atau berdampingan dan 1 kolom widget dibawahnya. Untuk CSSnya sama seperti tadi, taruh diatas <code>]]></b:skin></code><br /><pre>#label-left .widget ul,#label-right .widget ul,#label-bottom .widget ul{margin-top:-10px!important}<br />#label-left .widget,#label-right .widget,#label-bottom .widget{position:relative;display:block;border:1px solid #aaa;float:left;padding:1%}<br />#label-left .widget,#label-right .widget{width:47%}<br />#label-bottom .widget{width:97.3%}<br />#label-left .widget li,#label-right .widget li,#label-bottom .widget li{font-family:Electrolize,sans-serif!important}<br />#label-left h2,#label-right h2,#label-bottom h2{border-bottom:2px solid #63C4F1;background:#111;font:bold 18px Electrolize,sans-serif;color:#63C4F1;position:relative;display:block;top:-17px;right:-7px;padding:5px}<br />#label-left .widget{margin-right:5px}<br />#label-bottom .widget{margin-top:20px}<br />#label-left h2:before,#label-right h2:before,#label-bottom h2:before{content:&#39;&#39;;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent transparent #111;border-style:solid;border-width:0 0 10px 12px}<br />#label-left .widget ul,#label-right .widget ul,#label-bottom .widget ul{list-style:none;margin:0;padding:0}<br />#label-left .widget ul li,#label-right .widget ul li,#label-bottom .widget ul li{font-size:13px;font-family:Oswald,sans-serif;border-bottom:1px solid #aaa;margin:0 auto;padding:5px}<br />#label-left .widget li:last-child,#label-right .widget li:last-child,#label-bottom .widget li:last-child{border-bottom:none}</pre><blockquote class="atas">Perhatikan pada baris ini jika ingin menyesuikan lebar widget <pre>#label-left .widget,#label-right .widget{width:47%}<br />#label-bottom .widget{width:97.3%}</pre></blockquote>Selanjutnya cari kode berikut ini:<br /><pre><b:section class='main' id='main' showaddelement='no'><br />....................bla bla bla...................<br /></b:section></pre>Jika di lihat secara keseluruhan tampilan lengkapnya struktur kode tersebut seperti dibawah ini: <a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s1600/main-section.gif"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s640/main-section.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="550"/></a>Perhatikan kode <code></b:section></code>, jika sudah ketemu copy kode berikut ini lalu paste tepat dibawahnya kode tersebut.<br /><pre><b:if cond='data:blog.url == data:blog.homepageUrl'><br /><b:section class='label-left' id='label-left' preferred='yes'/><br /><b:section class='label-right' id='label-right' preferred='yes'/><br /><b:section class='label-bottom' id='label-bottom' preferred='yes'/><br /></b:if></pre>Sekarang lihat pada halaman tata letak blog, disitu sudah terdapat 3 elemen widget.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdyQTXoGAgeoQIcOlH-mg5PewqGaNdCqqCyJybnk4E3j30HWGB9UNDuKWFD3uClQ_IyFhuFnahFjIAhAKYQDT_i9h-3BX8hPwU13FzmyiA9-WgSzUe0-hhUKgSlFQtRsVgQnrMYvyzynE/s1600/widget-bawah-post.gif" class="center"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdyQTXoGAgeoQIcOlH-mg5PewqGaNdCqqCyJybnk4E3j30HWGB9UNDuKWFD3uClQ_IyFhuFnahFjIAhAKYQDT_i9h-3BX8hPwU13FzmyiA9-WgSzUe0-hhUKgSlFQtRsVgQnrMYvyzynE/s320/widget-bawah-post.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="320" /></a>Selanjutnya tinggal pasang kode yang terdapat pada point 3 kedalam widget HTML/Javascript.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjod3rFWbkAOMS8kj60Ug4w7AcrelyACA7Gyn0l6ZlUQJXK4-CTQTxSIEedVVQNkY5YRHhJHWhIp_tVx0R9WicU0zpglOEnJOtcAhT-dIBtCFXu8Jnq9cJLDSxRcEjYgUQWJuLGUIpxM_8/s1600/tambah-widget-html.gif" class="center"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjod3rFWbkAOMS8kj60Ug4w7AcrelyACA7Gyn0l6ZlUQJXK4-CTQTxSIEedVVQNkY5YRHhJHWhIp_tVx0R9WicU0zpglOEnJOtcAhT-dIBtCFXu8Jnq9cJLDSxRcEjYgUQWJuLGUIpxM_8/s320/tambah-widget-html.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="320" /></a>Langkah terakhir Simpan dan selesai.

Cara Membuat Widget Recent Post By Tag Label – maksud dari widget ini adalah untuk menampilkan daftar posting terbaru berdasarkan masing-ma...

Read More

Cara Memasang Auto Post Slider Carousel di Blog

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenpXfZsisCS4ccb4BKkfk5pqmgFH8C2yPBMaXI6PcnysZlXZMs-pP5VSnM-ErqAJvlW9G_PZPNR2uhwgxIUKhdudoca6qa4_DmPKnj7CsUC8ZMKO55LeWGVTakZC6IYkTrpeL8yAkAhM/s1600/auto-post-slider-carousel.jpg"><img alt="Cara Memasang Auto Post Slider Carousel di Blog" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenpXfZsisCS4ccb4BKkfk5pqmgFH8C2yPBMaXI6PcnysZlXZMs-pP5VSnM-ErqAJvlW9G_PZPNR2uhwgxIUKhdudoca6qa4_DmPKnj7CsUC8ZMKO55LeWGVTakZC6IYkTrpeL8yAkAhM/s520/auto-post-slider-carousel.jpg" title="Cara Memasang Auto Post Slider Carousel di Blog" width="520" /></a><b>Cara Memasang Auto Post Slider Carousel di Blog</b> – terdapat berbagai macam jenis slider yang dapat kita terapkan ke dalam blog dan salah satunya adalah Slider Carousel. Slider Carousel merupakan slider yang sudah tiga kali saya terapkan ke dalam template blog yang beberapa waktu lalu saya bagikan. Pada tutorial ini akan saya bahas penerapan Slider Carousel ke dalam template agar sewaktu siapa saja bagi yang ingin menggunakan slider untuk memodifikasi template blognya supaya lebih mudah. Slider Carousel merupakan slider bergaya horisontal yang menampilkan thumbnail dari setiap posting secara otomatis yang dapat kita set agar menampilkan posting terbaru atau bisa juga post by tag label. Agar lebih jelasnya, berikut tutorial <b>Cara Memasang Auto Post Slider Carousel di Blog</b>.<br /><br />1. Pada Dashboard blog masuk ke Edit HTML template.<br />2. Kemudian taruh kode berikut ini diatas kode <code></head></code><br /><pre><script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js'/></pre>3. Selanjutnya copy kode CSS berikut ini lalu taruh di atas kode <code>]]></b:skin></code><br /><pre>#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto}<br />#featured{border:2px solid #444;outline:1px solid #000;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto}<br />#featured ul{width:9999px}<br />#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}<br />#featured li{width:150px;display:inline-block;float:left;height:150px;background:#222;border-left:1px solid #111;border-right:1px solid #333;}<br />.thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000}<br />.thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;}<br />.title-featured{text-align:center;position:relative;margin-top:-20px}<br />.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}<br />.arrow{position:absolute;display:block;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1i-5uOpnLzQMjhRe1xLY3B-2UyJWQWuy6Riug7VGGiwqhMzlJqhyphenhypheniHv7J5LJ5iNU79N5Wzfi2AevCEDJmRdMP1tf2LXoAfmzMJqB-PMIA-q4peWPZOjvVKT8nB66ADXELjFAuXuP4f4/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset}<br />.arrow.back{background-position:0 50%;left:10px}<br />.arrow.forward{background-position:100% 50%;right:10px}<br />span.slideloading{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUe0SwgMIrq9NPtTeFN6Tz3ONCSVo1KvgbSZ4Pt6S4sbfdMR1-9Cnga4-69FbY97ysx8SSM8kD2HAlJrz9Cx1fbCX44dA0xKMQxEaHgxWCfIq8ddt73utRYorxEV9XfLqmh-GjMEIJrVc/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}</pre>4. Jika ingin membuat Slider Carousel tampil di bawah header seperti pada <a href="http://mas-andes.blogspot.com/2013/12/bluesforyou-blogger-template.html" target="_blank" title="Bluesforyou Blogger Template">template Bluesforyou</a> maka cari kode <code><div id='main-wrapper'></code> lalu taruh kode berikut ini tepat di atasnya.<br /><pre><b:if cond='data:blog.url == data:blog.homepageUrl'><br /><div id='featured-wrap'><br /><div id='featured'><br /><span class='slideloading'>Loading...</span><br /></div><br /></div><br /></b:if></pre>Jika ingin membuat Slider Carousel tampil di atas footer seperti pada <a href="http://mas-andes.blogspot.com/2013/12/bluesmulus-blogger-template.html" target="_blank" title="Bluesmulus Blogger Template">template Bluesmulus</a> maka cari kode <code><div id='footer-wrapper'></code> lalu taruh kode yang ada pada point 4 tepat di atasnya.<br /><br />5. Langkah terakhir Simpan template.<br /><br />Demikian akhir dari tutorial <b>Cara Memasang Auto Post Slider Carousel di Blog</b>, apabila ingin merubah tampilan slider maka ubah saja dan sesuaikan pada kode CSS.

Cara Memasang Auto Post Slider Carousel di Blog – terdapat berbagai macam jenis slider yang dapat kita terapkan ke dalam blog dan salah sat...

Read More

Page Number Navigation Blogger Valid HTML5

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAxgNn1soH_8W_tcUfH6Lo504Lg16hE5uWsqwJr4D6U_j8HxhiI5mx7wWyOIbJKtBZb9u3Erm4hjIoqRVwuXZcUDqMPgbdrlXqAbAE0NJf_HwvFcSswx9v7hIgWW_ElAGFnjSbZRJ8gpI/s1600/page-number-valid-HTML5.gif" class="center"><img alt="Page Number Navigation Blogger Valid HTML5" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAxgNn1soH_8W_tcUfH6Lo504Lg16hE5uWsqwJr4D6U_j8HxhiI5mx7wWyOIbJKtBZb9u3Erm4hjIoqRVwuXZcUDqMPgbdrlXqAbAE0NJf_HwvFcSswx9v7hIgWW_ElAGFnjSbZRJ8gpI/s320/page-number-valid-HTML5.gif" title="Page Number Navigation Blogger Valid HTML5" width="320" /></a><b>Page Number Navigation Blogger Valid HTML5</b> – untuk yang mengalami masalah validasi HTML5 pada widget number navigation yang terdapat pada bagian bawah list post homepage, berikut tutorial yang akan saya bahas pada tutorial ini agar nanti pada saat validasi HTML5 tidak terdeteksi masalah error pada widget number navigation. Pada saat validasi biasanya dibagian page number terdeteksi error pada kode <code>&</code> yang terdapat pada JS, sedangkan untuk mengatasi masalah tersebut sangatlah sepele dan bisa langsung kita atasi dengan mudah. Berikut cara sederhana untuk mengatasi page number navigation yang belum valid HTML5. Cari bagian kode <code>&</code> yang terdeteksi error lalu jika sudah ditemukan ganti dengan kode <code>&amp;</code>, kode tersebut biasanya tidak hanya satu namun ada beberapa kode. Selanjutnya ubah pada keseluruhan kode yang di perlukan agar tidak terjadi lagi error saat validasi HTML5. Atau jika ada yang belum memasang dan ingin menggunakan widget number navigation pada blog berikut cara membuat <b>Page Number Navigation Blogger Valid HTML5</b>.<br /><br />1. Login ke akun blogger lalu masuk ke Edit HTML template.<br />2. Copy kode CSS berikut ini lalu taruh diatas kode <code>]]></b:skin></code><pre>.showpageArea{position:relative;display:block;padding:0;margin:0 7px 40px 0}<br />.showpageArea a{position:relative;background:#111;color:#fff;padding:10px;top:0;float:left}<br />.showpageOf,.showpagePoint{position:relative;color:#63C4F1;background:#111;padding:10px;float:left}<br />.showpageOf{display:none;float:right}</pre>3. Selanjutnya cari kode berikut ini.<pre><b:section class='main' id='main' showaddelement='no'><br />...............................................<br /></b:section></pre>Tampilan lengkapnya kode tersebut seperti pada screenshot dibawah ini <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s1600/main-section.gif" class="center"><img alt="Page Number Navigation Blogger Valid HTML5" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s640/main-section.gif" title="Page Number Navigation Blogger Valid HTML5" width="640" /></a>4. Lalu copy kode berikut ini kemudian paste di bawah kode <code></b:section></code><pre><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><b:if cond='data:blog.pageType != &quot;error_page&quot;'><br />&lt;script type='text/javascript'&gt;<br />var home_page_url = location.href;<br />var pageCount=15;<br />var displayPageNum=10;<br />var upPageWord =&#39;Previous&#39;;<br />var downPageWord =&#39;Next&#39;;<br />function showpageCount(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= &#39;&#39;; var upPageHtml =&#39;&#39;; var downPageHtml =&#39;&#39;; for(var i=0, post; post = json.feed.entry[i]; i++) {var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1);var title = post.title.$t;if(title!=&#39;&#39;){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; }if(title!=&#39;&#39;) postNum++; htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;&amp;amp;max-results=&#39;+pageCount; } }itemCount++;}for(var p =0;p&lt; htmlMap.length;p++){ if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){ if(fFlag ==0 &amp;&amp; p == thisNum-2){ if(thisNum==2){ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }else{ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; } fFlag++; } if(p==(thisNum-1)){ html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;; }else{ if(p==0){ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;}else{ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }}if(eFlag ==0 &amp;&amp; p == thisNum){ downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; eFlag++; }}} if(thisNum&gt;1){ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span class=&quot;showpageOf&quot;&gt;Pages [&#39;+(postNum-1)+&#39;]&lt;/span&gt;&#39;+html; if(thisNum&lt;(postNum-1)){ html += downPageHtml; }if(postNum==1) postNum++; html += &#39;&lt;/div&gt;&#39;; var pageArea = document.getElementsByName(&quot;pageArea&quot;); var blogPager = document.getElementById(&quot;blog-pager&quot;); if(postNum &lt;= 2){ html =&#39;&#39;; }for(var p =0;p&lt; pageArea.length;p++){ pageArea[p].innerHTML = html; }if(pageArea&amp;&amp;pageArea.length&gt;0){ html =&#39;&#39;; }if(blogPager){ blogPager.innerHTML = html; }} function showpageCount2(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;; thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= &#39;&#39;; var upPageHtml =&#39;&#39;; var downPageHtml =&#39;&#39;; var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;; var thisUrl = home_page_url; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(title!=&#39;&#39;){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!=&#39;&#39;) postNum++; htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;&amp;amp;max-results=&#39;+pageCount; }}itemCount++;} for(var p =0;p&lt; htmlMap.length;p++){ if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){ if(fFlag ==0 &amp;&amp; p == thisNum-2){ if(thisNum==2){ upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }else{ upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }fFlag++;} if(p==(thisNum-1)){ html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;; }else{ if(p==0){ html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;; }else{ html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; }} if(eFlag ==0 &amp;&amp; p == thisNum){ downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;; eFlag++; }}} if(thisNum&gt;1){ if(!isLablePage){ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }else{ html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;; }} html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span class=&quot;showpageOf&quot;&gt; page(&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html; if(thisNum&lt;(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += &#39;&lt;/div&gt;&#39;; var pageArea = document.getElementsByName(&quot;pageArea&quot;); var blogPager = document.getElementById(&quot;blog-pager&quot;); if(postNum &lt;= 2){ html =&#39;&#39;; } for(var p =0;p&lt; pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&amp;&amp;pageArea.length&gt;0){ html =&#39;&#39;; } if(blogPager){ blogPager.innerHTML = html; }} &lt;/script&gt; &lt;script&gt; var thisUrl = home_page_url; if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){ if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;)); }else{ var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;amp;max&quot;)); }} var home_page = &quot;/&quot;; if (thisUrl.indexOf(&quot;?q=&quot;)==-1){ if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){ document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/summary?alt=json-in-script&amp;amp;callback=showpageCount&amp;amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;) }else{document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/full/-/&#39;+lblname1+&#39;?alt=json-in-script&amp;amp;callback=showpageCount2&amp;amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;) }}<br />&lt;/script&gt; <br /></b:if><br /></b:if><br /></b:if></pre>5. Terakhir Simpan template.<br /><br />Selesai sudah untuk membuat <b>Page Number Navigation Blogger Valid HTML5</b>, dan apabila ingin merubah warna pada widget silahkan kreasikan sendiri pada bagian CSS.

Page Number Navigation Blogger Valid HTML5 – untuk yang mengalami masalah validasi HTML5 pada widget number navigation yang terdapat pada b...

Read More

Bluesmulus Blogger Template

<b>Bluesmulus Blogger Template</b> – seiring berjalannya waktu kesibukan semakin bertambah, hingga akhirnya waktu untuk bloggingpun semakin sempit. Sudah lama rasanya ingin update artikel blog ini dan akhirnya sekarang tercapai juga. Lama tidak menulis artikel rasanya masih kaku sama seperti saat pertama kali publish artikel di blog. Pada kesempatan kali ini kembali saya persembahkan sebuah template platform blogger dengan desain yang sederhana, simple dan minimalis yang pastinya valid HTML5 dan CSS3. Jika sekilas di perhatikan pada template ini memang lumayan mirip dengan <a href="http://mas-andes.blogspot.com/2013/12/bluesforyou-blogger-template.html" target="_blank" title="Bluesforyou Blogger Template">template Bluesforyou</a> yang sudah saya publish pada tempo hari sebelumnya.<br /><a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrx7MWCG9P1HK3AiqcHZc0rGQgbeVqwEl2doLYxHKnfkkwHoZ2BxgNKoL2we7nhjLEeuF13VEA1A648RXpuXLyU1-2iPDBjr1MGfN_oIhjObXCZ9NLFAGARNtUwHtakgrVUegdT8tjx0/s1600/Bluesmulus-blogger-template.jpg"><img alt="Bluesmulus Blogger Template" height="412" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrx7MWCG9P1HK3AiqcHZc0rGQgbeVqwEl2doLYxHKnfkkwHoZ2BxgNKoL2we7nhjLEeuF13VEA1A648RXpuXLyU1-2iPDBjr1MGfN_oIhjObXCZ9NLFAGARNtUwHtakgrVUegdT8tjx0/s640/Bluesmulus-blogger-template.jpg" title="Bluesmulus Blogger Template" width="640" /></a>Berikut beberapa fitur dari Bluesmulus Blogger Template:<br />1. Valid HTML5 dan CSS3<br />2. Score SEO 100% in Chkme.com<br />3. Auto post Slideshow<br />4. Auto post featured Carousel<br />5. Custom error 404 page<br />6. Post by tag label, dll.<br /><a class="button" href="http://bluesmulus.blogspot.com/" rel="nofollow" target="_blank">Preview</a><br /><a class="button" href="http://faceblog-evolutions.googlecode.com/files/Bluesmulus-theme.txt" rel="nofollow" target="_blank">Download</a><br /><br /><b>Cara menambahkan widget Post by tag label pada homepage</b><br /><a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovvhuVLS_t93qe2otJsoHxR_85nTewnZdtMXAcwtti0XjJuJh2vJpTRUJD6A3rgzD3R4ZFZevZK5AlVQXDrdAP3iIgB19hSFJgTl2xX2VMjrI8Yze6gQeilukD5MNgvyYBQC_akM9Oeo/s1600/post-by-label.gif"><img alt="Bluesmulus Blogger Template" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovvhuVLS_t93qe2otJsoHxR_85nTewnZdtMXAcwtti0XjJuJh2vJpTRUJD6A3rgzD3R4ZFZevZK5AlVQXDrdAP3iIgB19hSFJgTl2xX2VMjrI8Yze6gQeilukD5MNgvyYBQC_akM9Oeo/s640/post-by-label.gif" title="Bluesmulus Blogger Template" width="640" /></a>Taruh kode berikut ini kedalam widget HTML/Javascript: <pre><script type='text/javascript'><br />    var numposts = 5; // Jumlah Post yang di tampilkan<br />    var showpostthumbnails = true; // Ganti "false" untuk tidak menampilkan [Thumbnail]<br />    var displaymore = false; // Ganti "true" untuk menampilkan link [More]<br />    var displayseparator = false;<br />    var showcommentnum = false; // Ganti "true" untuk menampilkan [Komentar]<br />    var showpostdate = false; // Ganti "true" untuk menampilkan [Tanggal]<br />    var showpostsummary = true; // Ganti "false" untuk tidak menampilkan [Deskripsi Post]<br />    var numchars = 60; // Character Deskripsi yang di tampilkan<br /></script><br /><script type="text/javascript" src="/feeds/posts/default/-/<span style="color: red;">CSS</span>?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre><blockquote class="atas">Teks berwarna <span style="color: red;">merah </span>adalah nama label, ganti dengan label blog anda.</blockquote><br />[ <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Ae9fip_SOgtKAUQwwCqEmlITJQiTej_LhwoMbeSIeWFRpU5Ngx6E_0EL2JsIS_nyN8uLYFNwswo1DdXTT-0jcKHn2ngEdtIpMyPdQKOklOo6jj8GEMRtDb1Y1xqreQz9TZZrVbHsh7sz/s1600/installasi-template.gif" rel="nofollow" target="_blank"><b>Petunjuk Install Template</b></a> ]

Bluesmulus Blogger Template – seiring berjalannya waktu kesibukan semakin bertambah, hingga akhirnya waktu untuk bloggingpun semakin sempit...

Read More

Bluesforyou Blogger Template

<b>Bluesforyou Blogger Template</b> – elemen template Bluesforyou tidak jauh berbeda dengan template <a href="http://mas-andes.blogspot.com/2013/11/darkforyou-blogger-template.html" target="_blank">Darkforyou</a>, untuk custom segala keperluannya sama persis dengan template sebelumnya bisa di lihat pada halaman demo. Bluesforyou Blogger Template terdapat dua versi yakni light version (versi terang) dan dark version (versi gelap). Pada template versi gelap saya lebih suka bermain CSS untuk mengatur desain layout dan membuat tampilan lebih peka dan memperhalus warna, sedangkan pada template yang versi terang saya kolaborasikan dengan image untuk mambuat varian pada layout template. Bluesforyou blogger merupakan release kedua dari template sebelumnya, untuk membuat template ini saya menggunakan kerangka template sebelumnya agar lebih mudah dan merubah seperlunya saja pada bagian-bagian tertentu. Terutama pada bagian homepage yang menggunakan mode grid. Bluesforyou Blogger Template antara dua versi tersebut terdapat perbedaan yang sangat mencolok, karena pada light version Bluesforyou Blogger Template saya menggunakan konsep gambar. Untuk fitur kedua template tersebut masih sama dengan template yang sebelumnya, berikut untuk lebih rinci dan detailnya serta screenshot dari <b>Bluesforyou Blogger Template</b>.<br /><br /><span style="font-size: large;"><b>Light Version</b></span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78eRibUg_vLe3vaYPijDOL-FIlELdUNxjcg3NJhrLkx0NFXSF_ItBqvqDljxHBR6ovrw_0wQWzo_KxGkn4m9cLeFV-VuQNJJbN4itdJBW7r7BFhkCmUXBJOcD15U4PN9I4iUqS1sNsZM/s1600/Light-Bluesforyou.jpg" class="center"><img alt="Bluesforyou Blogger Template" height="412" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78eRibUg_vLe3vaYPijDOL-FIlELdUNxjcg3NJhrLkx0NFXSF_ItBqvqDljxHBR6ovrw_0wQWzo_KxGkn4m9cLeFV-VuQNJJbN4itdJBW7r7BFhkCmUXBJOcD15U4PN9I4iUqS1sNsZM/s640/Light-Bluesforyou.jpg" title="Bluesforyou Blogger Template" width="640" /></a><a class="button" href="http://light-bluesforyou.blogspot.com/" rel="nofollow" target="_blank">Preview</a><br /><a class="button" href="http://faceblog-evolutions.googlecode.com/files/Bluesforyou%20%5BLight%5D.txt" rel="nofollow" target="_blank">Download</a><br /><blockquote class="atas"><span style="color:red">UPDATE 04 DESEMBER 2013</span> [Perbaikan Layout, dll]</blockquote><br /><br /><span style="font-size: large;"><b>Dark Version</b></span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MINimqvg_fXea7UYsdSgHYfk7HeAxLHnOzUQ2xJd2QAXl6skgh2uA6XYmz1nsu8BnVNaaVlNbAsdnZmZbKI-Rlw3VGIxVCYa-wetXC56UKOVb5mcAQONRFAQM7RWyx9h9T9EnslWUV0/s1600/Dark-Bluesforyou.jpg" class="center"><img alt="Bluesforyou Blogger Template" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MINimqvg_fXea7UYsdSgHYfk7HeAxLHnOzUQ2xJd2QAXl6skgh2uA6XYmz1nsu8BnVNaaVlNbAsdnZmZbKI-Rlw3VGIxVCYa-wetXC56UKOVb5mcAQONRFAQM7RWyx9h9T9EnslWUV0/s640/Dark-Bluesforyou.jpg" title="Bluesforyou Blogger Template" width="640" /></a><a class="button" href="http://dark-bluesforyou.blogspot.com/" rel="nofollow" target="_blank">Preview</a><br /><a class="button" href="http://faceblog-evolutions.googlecode.com/files/Bluesforyou%20%5BDark%5D.txt" rel="nofollow" target="_blank">Download</a><br /><blockquote class="atas"><span style="color:red">UPDATE 04 DESEMBER 2013</span> [Perbaikan Layout, dll]</blockquote><br />Berikut beberapa fitur dari Bluesforyou Blogger Template<br />1. Valid HTML5 dan CSS3<br />2. Score SEO 100% in Chkme.com<br />3. Auto post featured<br />4. Custom error 404 page<br />5. Fast Loading, dll (lainnya lihat sendiri di halaman demo).<br /><br />[ <a class="tooltip" href="http://dark-bluesforyou.blogspot.com/2013/11/intruksi-install-template-darkforyou.html" rel="nofollow" target="_blank" title="Instruksi Installasi Template"><b>Instruksi Installasi Template</b></a> ]

Bluesforyou Blogger Template – elemen template Bluesforyou tidak jauh berbeda dengan template Darkforyou , untuk custom segala keperluannya...

Read More

Darkforyou Blogger Template

Setelah sekian lama hanya membagikan tutorial akhirnya kini tercapai juga untuk membagikan template blog. Template dengan desain simple minimalis serta kecepatan loading yang maksimal. Walaupun masih terdapat beberapa kekurangan yang salah satunya tidak Responsive namun setidaknya sudah valid HTML5 dan CSS3 serta score SEO 100% jika cek di Chkme.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR8lvfwqhFHFA9zfTk7poDokYPdHvNWRu2FX_B5Ap3jV51g2zAsDS_sau-h96J14OkH8xP54TiWGoqBvxPk0P2KNyqAc0yRCEzWlmtEhscprJeI5hCnJlrXCA3XaXsO-ntWBYl9tbjS60/s1600/screenshot.jpg"><img alt="Darkforyou Blogger Template" height="556" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR8lvfwqhFHFA9zfTk7poDokYPdHvNWRu2FX_B5Ap3jV51g2zAsDS_sau-h96J14OkH8xP54TiWGoqBvxPk0P2KNyqAc0yRCEzWlmtEhscprJeI5hCnJlrXCA3XaXsO-ntWBYl9tbjS60/s640/screenshot.jpg" title="Darkforyou Blogger Template" width="640" /></a><a class="button" href="http://darkforyou-v1.blogspot.com/" rel="nofollow" target="_blank">Demo</a><br /><a class="button" href="http://faceblog-evolutions.googlecode.com/files/Darkforyou-V1.txt" rel="nofollow" target="_blank">Download</a><br /><blockquote class="bawah">Berikut beberapa fitur dari template Darkforyou</blockquote>1. Valid <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fdarkforyou-v1.blogspot.com%2F" rel="nofollow" target="_blank">HTML5</a> dan <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdarkforyou-v1.blogspot.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=" rel="nofollow" target="_blank">CSS3</a><br />2. <a href="http://chkme.com/seo-darkforyou-v1.blogspot.com" rel="nofollow" target="_blank">Score SEO 100%</a> in Chkme.com<br />3. Auto post slider Carousel<br />4. Custom error 404 page<br />5. Fast Loading, dll. <br />Adapun beberapa lainnya seperti custom pada widget yang tampil di homepage maupun halaman post. Selain itu adapula beberapa kekurangan yang nampak terlihat adalah pada post preview atau apabila akan publish artikel dan melihat preview posting posting terlebih dahulu maka akan terlihat sedikit tidak rapi karena memang tag konditional pada template hanya saya prioritaskan untuk load ke beberapa halaman yang penting saja seperti homepage, page item, dan page statis agar tidak terlalu membebani saat load karena harus mengambil banyak kode. Untuk setting custom widget bisa di lihat pada halaman demo template. Juga saya ucapakan banyak terimakasih untuk beberapa senior blogger yang sudah membagikan kode dan bisa saya terapkan pada <b>Darkforyou Blogger Template</b>.<br /><br />Credit:<br />Thanks to <b>Threaded Comment V3</b> from: <a href="http://blog.kangismet.net/2013/09/blogger-threaded-comments-hack-v3.html" rel="nofollow" target="_blank">http://blog.kangismet.net</a><br />Thanks to <b>Tag Pre</b> from: <a href="http://www.alexjoen.web.id/2013/10/membuat-tag-pre-keren.html" rel="nofollow" target="_blank">http://www.alexjoen.web.id</a><br />Thanks to <a href="http://jquery.com/" rel="nofollow" target="_blank">http://jquery.com</a><br /><br /><blockquote class="bawah"><span style="color:red">UPDATE 04 DESEMBER 2013</span> [Perbaikan Layout, dll]</blockquote><a class="button" href="http://faceblog-evolutions.googlecode.com/files/Darkforyou%20V1.txt" rel="nofollow" target="_blank">Download</a><br /><br />

Setelah sekian lama hanya membagikan tutorial akhirnya kini tercapai juga untuk membagikan template blog. Template dengan desain simple mini...

Read More

Membuat Mode Grid Pada Post Homepage Blogger

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4nE-DxcZh3r0U3KQILnm5BPuHjDDEAeFmmjTsqyWVrAXL6fYquZtkdaX7kY3bmdW3ko8MZBzjnAu7zehg6CqQMfmQenxRpSAoVe_WP2w0usGcsqO6I2cmldccu4KxzQlDp_RFYsKi0eA/s1600/Post-Grid-Style.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Grid Post Homepage Blogger" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4nE-DxcZh3r0U3KQILnm5BPuHjDDEAeFmmjTsqyWVrAXL6fYquZtkdaX7kY3bmdW3ko8MZBzjnAu7zehg6CqQMfmQenxRpSAoVe_WP2w0usGcsqO6I2cmldccu4KxzQlDp_RFYsKi0eA/s540/Post-Grid-Style.jpg" title="Membuat Mode Grid Pada Post Homepage Blogger" width="540" /></a><b>Membuat Mode Grid Pada Post Homepage Blogger</b> - Secara umum semua template blogger yang masih standar (default) pada post homepage menggunakan struktur list post. Walaupun sekarang sudah banyak penyedia template blogger yang gratis dengan fitur-fitur yang menarik, namun beberapa blogger terutama yang masih belajar dalam desain blog mungkin tidak menghalangi niat untuk mencari cara sendiri agar gaya template blognya memiliki tampilan grid atau bergaya galeri. Saya telah menerima beberapa email dari blogger yang berbeda bertanya, apakah ada cara untuk membuat template default blogspot bisa menampilkan post grid. Tentu saja bisa, cara ini tidak luput dengan adanya fungsi jQuery. Sekarang akan saya bahas disini bagaimana agar homepage blog dapat menampilkan pola grid dan bisa berfungsi dengan baik sekaligus kita lengkapi dengan tombol auto read more. jQuery ini yang nanti akan memposisikan posting thumbnail di bagian atas dan menyelaraskan ringkasan post di bagian bawahnya dengan disertai jump break atau read more secara otomatis yang akan muncul di akhir setiap ringkasan setelah jumlah karakter tertentu. Fungsi jQuery Hack hanya akan bekerja pada homepage, arsip, label dan mencari halaman (tidak dengan pencarian Google custom). Untuk lebih detailnya, berikut penjelasan cara <b>Membuat Mode Grid Pada Post Homepage Blogger</b>.<br /><a class="button" href="http://demofaceblog.blogspot.com/" rel="nofollow" target="_blank">Demo</a><br />1. Pada bagian dashbord blog pilih menu Template kemudian Edit HTML.<br />2. Selanjutnya copy kode berikut ini, lalu pasang di atas kode <code></head></code><pre><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br /><script type='text/javascript'><br />var thumbnail_mode = &quot;<span style="color: red;">yes</span>&quot; ;<br />summary_noimg = <span style="color: red;">400</span>;<br />summary_img = <span style="color: red;">180</span>;<br />img_thumb_height = <span style="color: red;">130</span>;<br />img_thumb_width = <span style="color: red;">220</span>;<br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}<br />//]]><br /></script><br /><style type='text/css'><br />.post {width:44%;height:370px;float:left;margin:10px;position:relative;display: block;}<br />.post h3{height:32px;margin-top:60px; margin-bottom:-15px;padding:5px;font-family: Helvetica, Arial;line-height:1em;font-weight: bold;  font-size:16px;letter-spacing:-0.5px;}<br />.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}<br />.post-footer {margin-top:30px;height:20px;}<br />.post-labels {display:none;}<br />.mobile .post {width:auto;height:auto;}<br />.mobile .post-body {height:auto;}<br />.more {float:right;background:#52e052;color:#000!important;padding:5px 10px;text-decoration:none!important;transition: all 1s ease;}<br />.more:hover {background:#ff0000;color:#fff!important;text-decoration:none!important;}<br /></style><br /></b:if><br /></b:if></pre><blockquote class="atas">Jika tidak ingin menampilkan thumbnail post, ubah "<span style="color: red;">yes</span>" menjadi "no".<br />Angka "<span style="color: red;">400</span>" merupakan jumlah karakter yang akan ditampilkan jika ada sebuah post tidak memiliki gambar.<br />Angka "<span style="color: red;">180</span>" merupakan jumlah karakter yang akan ditampilkan jika sebuah post memiliki gambar, tapi hanya gambar pertama dalam struktur post yang akan digunakan sebagai thumbnail.<br />Ketinggian thumbnail adalah "<span style="color: red;">130</span>" dan Lebar thumbnail adalah "<span style="color: red;">220</span>". Kedua ketinggian thumbnail dan nilai lebar dapat disesuaikan dengan nilai pilihan anda sendiri.</blockquote>3. Kemudian cari kode <code><data:post.body/></code> kemungkinan terdapat 2-3 kode, lalu replace salah satu kode tersebut dengan kode berikut ini untuk memasang auto read more. Pada template yang saya gunakan, replace pada kode <code><data:post.body/></code> yang kedua.<pre><b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script> <a class='more' expr:href='data:post.url'><span style="color: red;">Read More</span></a> </b:if> </b:if></pre><blockquote class="atas">Anda dapat mengubah kata "<span style="color: red;">Read More</span>" agar menjadi lebih menarik seperti "Lanjutkan membaca" atau lainnya, bisa juga mengganti read more dengan tombol gambar.</blockquote>4. Jika sudah, Simpan template.<br /><br />Apabila mengalami masalah seperti tombol Home, Newer post, maupun Older post yang hilang. Caranya di perbaiki dengan masuk ke Edit HTML lagi lalu cari kode <code><b:includable id='nextprev'></code> kemudian paste kode berikut ini di bawahnya.<pre><div style='clear:both;'/></pre>Sekian dasar dari cara <b>Membuat Mode Grid Pada Post Homepage Blogger</b>, nanti anda bisa mengembangkannya dengan memberi background dan border atau lainnya agar lebih serasi dengan template blog yang di gunakan.

Membuat Mode Grid Pada Post Homepage Blogger - Secara umum semua template blogger yang masih standar (default) pada post homepage menggunak...

Read More

Membuat Desain Halaman 404 Error Pada Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKaFjS-IDe1bv25MaBa7GuBuspWxBcQsfa3zEGyMMPEOaeJ_mzhWROHMi3y-jwRs5PQp5_15KW0jnNJPhJzNP3GGWh_cffnH1C_JxTrYvLEPLbTMdOcVrn21kky9hI1znwAYi1vsNOi2I/s1600/error-404.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="page not found 404 error" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKaFjS-IDe1bv25MaBa7GuBuspWxBcQsfa3zEGyMMPEOaeJ_mzhWROHMi3y-jwRs5PQp5_15KW0jnNJPhJzNP3GGWh_cffnH1C_JxTrYvLEPLbTMdOcVrn21kky9hI1znwAYi1vsNOi2I/s540/error-404.jpg" title="Membuat Desain Halaman 404 Error Pada Blog" width="540" /></a><b>Membuat Desain Halaman 404 Error Pada Blog</b> – masih erat kaitannya dengan artikel karena ini postingan berkelanjutan dari yang sebelumnya yakni pada pembahasan <a href="http://mas-andes.blogspot.com/2013/11/cara-redirect-halaman-error-blogger.html" target="_blank" title="Memahami Konsep Redirect Halaman Blog">Memahami Konsep Redirect Halaman Blog</a> karena pada tutorial ini akan saya bahas untuk tata cara membuat pesan pada halaman pencarian yang tidak di temukan saat search engine mengindeks. Karena biasanya jika sebuah artikel hilang dari hasil pencarian maka pada halaman tersebut hanya akan menampilkan pesan <b>Posts filed under Search results</b> atau <b>No posts matching the query</b>. Pesan seperti itu dapat kita custom dengan mudah menggunakan fasilitas blogger yang terdapat pada menu Preferensi penelusuran. Hal ini saya kaitkan dengan artikel sebelumnya karena pada tutorial ini saya membuat agar pada saat search engine gagal mengindeks maka halaman blog akan menampilkan form search untuk mengarahkan kembali lalu lintas blog dan juga mempermudah pengunjung. Berikut langkah-langkah cara <b>Membuat Desain Halaman 404 Error Pada Blog</b> yang nantinya akan menampilkan pesan jika terdapat halaman yang error.<br /><a href="http://mas-andes.blogspot.com/SG" target="_blank" class="button">Demo</a><br />Pada halaman dashboard blog masuk ke menu Preferensi penelusuran. Disitu akan di tawarkan fasilitas Kesalahan dan Pengalihan, pada fitur blogger tersebut lakukan edit pada “<b>Pesan Khusus untuk Laman Tidak Ditemukan</b>” form yang nantinya muncul akan kita gunakan untuk mengkustom pada halaman yang tidak ditemukan dengan menggunakan CSS, jQuery dan HTML yang dapat kita taruh didalamnya karena seluruh elemen tersebut dapat dimuat dengan baik termasuk juga teks.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPSggbkyFzQ7bIKhiqvjyvlT3IYVFs-bu7604vuZb0k_0ecpjm54hgs4HeBJgRBNtcQATjSa2JrZkWTxTzuEi3p0Hj500Vt5XFuP4Y4xIJuYuAEUv68loARD0lKCTUrT0buI8dAGwcPI4/s1600/desain-error-page.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Desain Halaman 404 Error Pada Blog" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPSggbkyFzQ7bIKhiqvjyvlT3IYVFs-bu7604vuZb0k_0ecpjm54hgs4HeBJgRBNtcQATjSa2JrZkWTxTzuEi3p0Hj500Vt5XFuP4Y4xIJuYuAEUv68loARD0lKCTUrT0buI8dAGwcPI4/s540/desain-error-page.png" title="Membuat Desain Halaman 404 Error Pada Blog" width="540" /></a>Sekarang kita flashback ke tutorial sebelumnya yakni pada artikel yang berjudul <a href="http://mas-andes.blogspot.com/2013/11/membuat-form-search-blogger-dengan-ajax-jquery.html" target="_blank" title="Form Search Blogger Dengan Ajax jQuery"><b>Form Search Blogger Dengan Ajax jQuery</b></a>. Disitu sudah saya jelaskan untuk membuat halaman search engine yang berbasis Google AJAX Search API, sekarang copy saja seluruh kode yang terdapat pada artikel tersebut kemudian lakukan sedikit custom lagi bisa dengan menambahkan suatu teks pesan atau bisa juga menggunakan gambar. Jika ingin menggunakan gambar, desainlah gambar yang akan digunakan menjadi sebagus mungkin.<br /><br />Jika seluruh kode sudah di copy, sekarang perhatikan pada bagian HTML antara kode <code><div id="page"></code> sampai <code></div></code> yang paling bawah. Karena disini saya menggunakan gambar, jadi saya akan menyisipkan sebuah gambar yang nanti letaknya di bagian atas form search dengan memasang markup URL gambar tepat dibawah <code><div id="page"></code>. Maka cara penerapannya seperti kode yang berwarna merah berikut ini, nanti anda dapat menyesuaikannya dengan menggunakan gambar lain atau bisa juga menggunakan teks pesan biasa.<pre><div id="page"><br /><span style="color: red;"><a href="http://mas-andes.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0pHguIEgthqo-7uzMbAGSt3yu6zij1-D56rvFHTR2igaS3oJNncnmZRrYZwi3xu-fNq0MFBtYaO5sgt2Hr8KBC1zpnRnPrH4MzkNb2TyWF9h6A5VGQcoEJq8x8APWMIeIhw42VOYWe_0/h316/error-404.jpg" alt="error 404" title="Halaman Tidak Ditemukan"/></a></span><br /><form id="searchForm" method="post"><br /><fieldset><br /><input id="s" type="text" /><br /><input type="submit" value="Search" id="submitButton" /><br /><div id="searchInContainer"><br /><input type="radio" name="check" value="site" id="searchSite" checked /><br /><label for="searchSite" id="siteNameLabel">Search</label><br /><input type="radio" name="check" value="web" id="searchWeb" /><br /><label for="searchWeb">Search The Web</label><br /></div><br /><ul class="icons"><br /><li class="web" title="Web Search" data-searchType="web">Web</li><br /><li class="images" title="Image Search" data-searchType="images">Images</li><br /><li class="news" title="News Search" data-searchType="news">News</li><br /><li class="videos" title="Video Search" data-searchType="video">Videos</li><br /></ul><br /></fieldset><br /></form><br /></div><br /><div id="resultsDiv"></div></pre>Jika sudah, masukan kode seluruhnya mulai dari CSS, jQuery sampai HTML kedalam form “<b>Pesan Khusus untuk Laman Tidak Ditemukan</b>” pada Preferensi penelusuran menu blogger. Setelah tersimpan, maka halaman tersebut akan ditampilkan jika terjadi kesalahan pada suatu halaman yang gagal di indeks.

Membuat Desain Halaman 404 Error Pada Blog – masih erat kaitannya dengan artikel karena ini postingan berkelanjutan dari yang sebelumnya ya...

Read More

Form Search Blogger Dengan Ajax jQuery

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLhehS6CtcuTlgc8SaoTmGScPxzZYB3XIp9wxSCsh05r8EX6fAssZl8y3tHwojbphmNt7480eb6mavvZKmSuXOu8qhWFWY7jTjBq1n5QDYaZDp9LYOsJSl51huZGYwyxUInmMx-rxAQpY/s1600/Form-Search-Ajax-jQuery.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Form Search Blogger Dengan Ajax jQuery" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLhehS6CtcuTlgc8SaoTmGScPxzZYB3XIp9wxSCsh05r8EX6fAssZl8y3tHwojbphmNt7480eb6mavvZKmSuXOu8qhWFWY7jTjBq1n5QDYaZDp9LYOsJSl51huZGYwyxUInmMx-rxAQpY/s540/Form-Search-Ajax-jQuery.png" title="Form Search Blogger Dengan Ajax jQuery" width="540" /></a><b>Form Search Blogger Dengan Ajax jQuery</b> – ini merupakan cara dimana untuk membangun sebuah form halaman search engine pada halaman web/blog yang nantinya dapat kita custom untuk berbagai keperluan dalam memfasilitasi web/blog tersebut. Form search ini layaknya seperti halaman pencarian google dimana nantinya dapat digunakan untuk mencari baik itu artikel, gambar, news berita maupun video, sehingga bisa disesuaikan untuk berbagai niche web/blog. Jika kita lihat dari cuplikan kode dibawah, pada <b>googleSearch () </b>berfungsi untuk mengirimkan permintaan JSON ke Google API dan menghasilkan markup untuk memasukkan ke resultsDiv. Saat pertama mengakses nanti halaman masih kosong dan ketika melakukan pencarian maka hasil akan di tampilkan dengan 8 post serta tombol More yang terdapat di bagian bawah hasil pencarian untuk meload hasil lebih banyak lagi yang di tampilkan. Untuk penerapannya pada tutorial ini saya taruh kedalam halaman statis blog dan berikut cara memasang <b>Form Search Blogger Dengan Ajax jQuery</b>.<br /><br />Setelah masuk pada halaman dashboard blogger langsung saja menuju ke page statis yang terdapat pada menu Laman Baru dan tambahkan Laman Kosong. Pada halaman entri gunakan mode HTML untuk memasukan kode berikut ini.<br /><pre><style type='text/css'><br />#searchForm{background-color:#4C5A65;position:relative;margin:0 0 80px 0;padding:10px;}<br />fieldset{border:none}<br />#searchInputContainer{width:420px;height:34px;background:#fff;float:left;margin-right:12px}<br />#s{border:1px solid #52e052;color:#888;background:#f1f1f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1wj6zHquPrH-1iccZ2Au0XjR8x_AvEBqfSebLaKVOTsWyz_sW3hmVCnpuBTSJKMYerfCXyaed3FE24ZdS-UDxxkXhZyRymK-LwRBQlna-x_RyoqtH3AbUGMZwqg1ObRLL7UIw4jxtt4cj/s30/search_icon.png) no-repeat;float:left;font-family:Arial,Helvetica,sans-serif;font-size:15px;height:34px;line-height:34px;margin-right:12px;outline:medium none;text-shadow:1px 1px 0 #FFF;width:385px;padding:0 0 0 25px}<br />.icons{list-style:none;height:19px;position:relative;margin:10px 0 0 425px}<br />.icons li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcBeFkdFyhIrC9esXi09cXSlMBcZjPfnmeQTky_BNOhUFRTn0KX4ZOz6RXUOTuBLDExk4qCyfS8kqvUSVIvIIERD6SE4RE0VAuQOO0EXzciX6qF3CxKH9QEarajxt-d7fnaksrUi93UNs/h120/icons.png) no-repeat;float:left;height:19px;text-indent:-9999px;cursor:pointer;margin-right:5px}<br />li.web{width:15px}<br />li.images{width:22px;background-position:-18px 0}<br />li.images.active,li.images:hover{background-position:-18px bottom}<br />li.news{width:14px;background-position:-44px 0}<br />li.news.active,li.news:hover{background-position:-44px bottom}<br />li.videos{width:17px;background-position:right 0}<br />li.videos.active,li.videos:hover{background-position:right bottom}<br />span.arrow{width:11px;height:6px;position:absolute;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhZPWLkCPQkGuLgjlypAj9COhuJwQgBKwbvw7pjM3E4xHJlSLKDYKYwxoPN41LDVGV-Blc97ACqGzfJ5Q6c_8cP_ROp3vtU0xvsyF-n8DQtl9rkAN37odEcGbQthwZJok3E7k9b9PcDc/h120/arrow.png) no-repeat;left:0;margin:15px 0 0 5px;}<br />#submitButton{background:#52e052;color:#000;width:83px;height:36px;overflow:hidden;text-transform:uppercase;font-weight:bold;border:1px solid #32CD32;outline:1px solid #228B22;cursor:pointer}<br />#searchInContainer{float:left;margin-top:5px;width:400px;text-align:left !important;}<br />label{color:#DDD;cursor:pointer;font-size:11px;position:relative;right:-2px;top:-2px;margin-right:10px;white-space:nowrap}<br />input[type=radio]{cursor:pointer}<br />.pageContainer{margin-bottom:50px;}<br />p.notFound{text-align:center;padding:0 0 40px}<br />.webResult{text-shadow:1px 1px 0 #586a75;margin-bottom:20px}<br />.webResult h2{background-color:#5D6F7B;font-size:18px;font-weight:400;padding:8px 20px}<br />.webResult h2 b{color:#fff}<br />.webResult h2 a{color:#eee;border:none}<br />.webResult p{line-height:1.5;padding:15px 20px;color:#222;}<br />.webResult p b{color:#000}<br />.webResult > a{margin-left:20px}<br />.imageResult{float:left;height:180px;text-align:center;width:152px;overflow:hidden;margin:0 0 20px 20px}<br />.imageResult img{display:block;border:none}<br />.imageResult a.pic{border:2px solid #333;outline:1px solid #777;display:block;margin:0 auto 15px}<br />#more{width:83px;height:24px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinoyfVqBry1oF78yblfGFtQmP5kv03yxi0sdEqwN2uWtTmj6S4bkgFaQqe40TFgT3Km2DK0B1qnmDuWCd9HwMK5uijMDSNTXQ8rPz9Hbi3lFhgeDzviBeFpuTlJcHpu2q0u_zKNqwFEgY/h120/more.png) no-repeat;cursor:pointer;margin:40px auto}<br />li.web.active,li.web:hover,#submitButton:hover,#more:hover{background-position:left bottom}<br />#page{ margin:0 auto; }<br /></style><br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br /><script type="text/javascript"><br />$(document).ready(function () {<br />    function n(t) {<br />        t = $.extend({}, e, t);<br />        t.term = t.term || $("#s").val();<br />        if (t.searchSite) {<br />            t.term = "site:" + t.siteURL + " " + t.term<br />        }<br />        var i = "http://ajax.googleapis.com/ajax/services/search/" + t.type + "?v=1.0&callback=?";<br />        var s = $("#resultsDiv");<br />        $.getJSON(i, {<br />            q: t.term,<br />            rsz: t.perPage,<br />            start: t.page * t.perPage<br />        }, function (e) {<br />            var i = e.responseData.results;<br />            $("#more").remove();<br />            if (i.length) {<br />                var o = $("<div>", {<br />                    className: "pageContainer"<br />                });<br />                for (var u = 0; u < i.length; u++) {<br />                    o.append(new r(i[u]) + "")<br />                }<br />                if (!t.append) {<br />                    s.empty()<br />                }<br />                o.append('<div class="clear"></div>').hide().appendTo(s).fadeIn("slow");<br />                var a = e.responseData.cursor;<br />                if (+a.estimatedResultCount > (t.page + 1) * t.perPage) {<br />                    $("<div>", {<br />                        id: "more"<br />                    }).appendTo(s).click(function () {<br />                        n({<br />                            append: true,<br />                            page: t.page + 1<br />                        });<br />                        $(this).fadeOut()<br />                    })<br />                }<br />            } else {<br />                s.empty();<br />                $("<p>", {<br />                    className: "notFound",<br />                    html: "No Results Were Found!"<br />                }).hide().appendTo(s).fadeIn()<br />            }<br />        })<br />    }<br />    function r(e) {<br />        var t = [];<br />        switch (e.GsearchResultClass) {<br />        case "GwebSearch":<br />            t = ['<div class="webResult">', '<h2><a href="', e.unescapedUrl, '" target="_blank">', e.title, "</a></h2>", "<p>", e.content, "</p>", '<a href="', e.unescapedUrl, '" target="_blank">', e.visibleUrl, "</a>", "</div>"];<br />            break;<br />        case "GimageSearch":<br />            t = ['<div class="imageResult">', '<a target="_blank" href="', e.unescapedUrl, '" title="', e.titleNoFormatting, '" class="pic" style="width:', e.tbWidth, "px;height:", e.tbHeight, 'px;">', '<img src="', e.tbUrl, '" width="', e.tbWidth, '" height="', e.tbHeight, '" /></a>', '<div class="clear"></div>', '<a href="', e.originalContextUrl, '" target="_blank">', e.visibleUrl, "</a>", "</div>"];<br />            break;<br />        case "GvideoSearch":<br />            t = ['<div class="imageResult">', '<a target="_blank" href="', e.url, '" title="', e.titleNoFormatting, '" class="pic" style="width:150px;height:auto;">', '<img src="', e.tbUrl, '" width="100%" /></a>', '<div class="clear"></div>', '<a href="', e.originalContextUrl, '" target="_blank">', e.publisher, "</a>", "</div>"];<br />            break;<br />        case "GnewsSearch":<br />            t = ['<div class="webResult">', '<h2><a href="', e.unescapedUrl, '" target="_blank">', e.title, "</a></h2>", "<p>", e.content, "</p>", '<a href="', e.unescapedUrl, '" target="_blank">', e.publisher, "</a>", "</div>"];<br />            break<br />        }<br />        this.toString = function () {<br />            return t.join("")<br />        }<br />    }<br />    var e = {<br />        siteURL: "<span style="color: red;">mas-andes.blogspot.com</span>",<br />        searchSite: true,<br />        type: "web",<br />        append: false,<br />        perPage: 8,<br />        page: 0<br />    };<br />    var t = $("<span>", {<br />        className: "arrow"<br />    }).appendTo("ul.icons");<br />    $("ul.icons li").click(function () {<br />        var n = $(this);<br />        if (n.hasClass("active")) {<br />            return false<br />        }<br />        n.siblings().removeClass("active");<br />        n.addClass("active");<br />        t.stop().animate({<br />            left: n.position().left,<br />            marginLeft: n.width() / 2 - 4<br />        });<br />        e.type = n.attr("data-searchType");<br />        $("#more").fadeOut()<br />    });<br />    $("#siteNameLabel").append(" " + e.siteURL);<br />    $("#searchSite").click();<br />    $("li.web").click();<br />    $("#s").focus();<br />    $("#searchForm").submit(function () {<br />        n();<br />        return false<br />    });<br />    $("#searchSite,#searchWeb").change(function () {<br />        e.searchSite = this.id == "searchSite"<br />    })<br />})<br /></script><br /><div id="page"><br /><form id="searchForm" method="post"><br /><fieldset><br /><input id="s" type="text" /><br /><input type="submit" value="Search" id="submitButton" /><br /><div id="searchInContainer"><br /><input type="radio" name="check" value="site" id="searchSite" checked /><br /><label for="searchSite" id="siteNameLabel">Search</label><br /><input type="radio" name="check" value="web" id="searchWeb" /><br /><label for="searchWeb">Search The Web</label><br /></div><br /><ul class="icons"><br /><li class="web" title="Web Search" data-searchType="web">Web</li><br /><li class="images" title="Image Search" data-searchType="images">Images</li><br /><li class="news" title="News Search" data-searchType="news">News</li><br /><li class="videos" title="Video Search" data-searchType="video">Videos</li><br /></ul><br /></fieldset><br /></form><br /></div><br /><div id="resultsDiv"></div></pre><blockquote class="atas">Ganti <span style="color: red;">mas-andes.blogspot.com</span> dengan URL blog anda.</blockquote>Setelah selesai custom bisa langsung di publish. Untuk mengkustom tampilannya bisa di sesuaikan sendiri pada kode CSSnya dengan melakukan beberapa perubahan yang kiranya bisa sebagus mungkin.

Form Search Blogger Dengan Ajax jQuery – ini merupakan cara dimana untuk membangun sebuah form halaman search engine pada halaman web/blog ...

Read More

Cara Modifikasi Skitter Slideshow Pada Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtN07H0RyuTh5SPu3WKO0Uz4L1GYEvAgM64A0iIfMM09UzH1giCud1fI4t9CvqSRgLt-TVxViwD9ESN9XvV0BLmvACBWrBv0hhHAEwF192ZkZXZWRlkUM7NsZColbmd_QbNnypQK4_yRg/s1600/jquery-skitter-slideshow.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Skitter Slideshow" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtN07H0RyuTh5SPu3WKO0Uz4L1GYEvAgM64A0iIfMM09UzH1giCud1fI4t9CvqSRgLt-TVxViwD9ESN9XvV0BLmvACBWrBv0hhHAEwF192ZkZXZWRlkUM7NsZColbmd_QbNnypQK4_yRg/s540/jquery-skitter-slideshow.jpg" title="Cara Modifikasi Skitter Slideshow Pada Blog" width="540" /></a><b>Cara Modifikasi Skitter Slideshow Pada Blog</b> – setelah pada artikel sebelumnya membahas tema yang sama yakni mengenai jQuery Skitter Slideshow, maka pada tutorial ini untuk melanjutkan dan melengkapi artikel tersebut juga akan kembali membahas untuk customisasi slider blog dengan menggunakan jQuery Skitter Slideshow. Dengan menggunakan jQuery Skitter Slideshow sangat memungkinkan kita dalam mendesain untuk mempercantik blog terutama pada fitur slider dengan menambahkan efek animasi yang fantastis. Jika pada artikel sebelumnya yakni artikel yang berjudul <a href="http://mas-andes.blogspot.com/2013/11/cara-membuat-slider-jquery-skitter-slideshow.html" target="_blank" title="Cara Memasang Skitter Slideshow di Blog">Cara Memasang Skitter Slideshow di Blog</a> hanya terdiri dari +22 efek animasi slider, maka kini ada penambahan yakni menjadi 36 type efek animasi dan terdapat 4 theme yang berbeda serta penambahan progress bar dan preview image number. Dari banyaknya type efek animasi dan theme ini dapat memungkinkan kita untuk lebih leluasa memilih diantaranya agar sesuai dengan selera yang kita inginkan. Untuk penjelasan lebih detailnya, berikut tutorial <b>Cara Modifikasi Skitter Slideshow Pada Blog</b>.<br /><br />1. Login akun blogger.<br />2. Masuk ke Tata Letak kemudian Tambahkan Widget HTML/Javascript.<br />3. Copy kode berikut ini, lalu paste kedalam Widget HTML/Javascript kemudian Simpan.<br /><pre><style type="text/css"><br />.slideshow_skitter{position:relative;width:900px;height:300px;background:#000; margin:0 auto;}<br />.slideshow_skitter img {width:900px; height:300px;}<br />.slideshow_skitter img{max-width:none}<br />.slideshow_skitter .container_skitter{overflow:hidden;position:relative}<br />.slideshow_skitter .image{overflow:hidden}<br />.slideshow_skitter .slideshow_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}<br />.slideshow_skitter .slideshow_clone img{position:absolute;top:0;left:0;z-index:20}<br />.slideshow_skitter .prev_button{position:absolute;top:50%;left:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px -42px;width:42px;height:42px}<br />.slideshow_skitter .next_button{position:absolute;top:50%;right:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 -42px;width:42px;height:42px}<br />.slideshow_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;padding:5px 0 5px 5px}<br />.slideshow_skitter .info_slide .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0;padding:2px 10px}<br />.slideshow_skitter .info_slide .image_number_select,.slideshow_skitter .info_slide .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0;padding:2px 10px}<br />.slideshow_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}<br />.slideshow_skitter .info_slide_thumb{height:50px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;top:0;left:0;opacity:1.0;padding:0!important}<br />.slideshow_skitter .info_slide_thumb .image_number{overflow:hidden;width:100px;height:50px;position:relative;-moz-border-radius:0!important;-webkit-border-radius:0!important;border-radius:0!important;margin:0!important;padding:0!important}<br />.slideshow_skitter .info_slide_thumb .image_number img{position:absolute;top:-30px;left:-30px;height:100px}<br />.slideshow_skitter .slideshow_scroll_thumbs{padding:0}<br />.slideshow_skitter .slideshow_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:0 to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;cursor:pointer;border:0 solid #333}<br />.slideshow_skitter .info_slide_dots{position:absolute;bottom:10px;background:rgba(255,255,255,0.8);box-shadow:rgba(0,0,0,0.3) 1px 1px 0;z-index:151;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;padding:5px 0 5px 5px}<br />.slideshow_skitter .info_slide_dots .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0}<br />.slideshow_skitter .info_slide_dots .image_number_select,.slideshow_skitter .info_slide_dots .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0}<br />.loading{position:absolute;top:50%;right:50%;z-index:10000;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkbDvrELgL5tN8bamTn-xBmk3b4eTgO5SMfvcjL35E0nDHjdVRi-WD3HBdd3A_2OIyV1R7pi41ocTFTyqWzPSYW3WSw0oFfeN09l_QVlWTiDnNqXVdHSJcqdyvV0wwmaC3332qBMuWeo/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;margin:-16px}<br />.slideshow_skitter .label_skitter{text-transform:uppercase;z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.8;background:#000}<br />.slideshow_skitter .label_skitter p{font:normal 22px arial,tahoma;letter-spacing:-1px;margin:0;padding:10px}<br />.slideshow_skitter .progressbar{background:#000;position:absolute;top:5px;left:15px;height:5px;width:200px;z-index:99;border-radius:20px}<br />.slideshow_skitter .preview_slide{display:none;position:absolute;z-index:152;bottom:30px;left:-40px;width:100px;height:100px;background:#fff;border:1px solid #222;-moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;-webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;overflow:hidden}<br />.slideshow_skitter .preview_slide ul{height:100px!important;overflow:hidden!important;list-style:none!important;display:block!important;position:absolute!important;top:0;left:0;margin:0!important}<br />.slideshow_skitter .preview_slide ul li{width:100px!important;height:100px!important;overflow:hidden!important;float:left!important;position:relative!important;display:block!important;margin:0!important;padding:0!important}<br />.slideshow_skitter .preview_slide ul li img{position:absolute!important;top:0!important;left:0!important;height:150px!important;width:auto!important}<br />#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}<br />.slideshow_skitter .focus_button{position:absolute;top:50%;z-index:100;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px 0;width:42px;height:42px}<br />.slideshow_skitter .play_pause_button{position:absolute;top:50%;z-index:151;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 0;width:42px;height:42px}<br />.slideshow_skitter_large{width:900px;height:300px}<br />.slideshow_skitter_small{width:200px;height:100px}<br />.slideshow_skitter .focus_button,.slideshow_skitter .next_button,.slideshow_skitter .prev_button,.slideshow_skitter .play_pause_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy1LghwvdXxLoA-PK0ovBnK9cnlJpVd27mhEQwfBfwSJCacewVK7fSgiH4bb5PMUv-NX3v54g5bEf336hv7udm-ETRZtvXMIMDi_bxZze2PSFOl1qwrO9BLNAu4uFM3kRxLvfUEU4ceq4/w84-h126-no/sprite-default.png) no-repeat}<br />.slideshow_skitter .play_pause_button.play_button{background-position:0 -84px;width:42px;height:42px}<br />.skitter-minimalist .prev_button,.skitter-minimalist .next_button,.skitter-minimalist .play_pause_button,.skitter-minimalist .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxlcX7mMRy-3NZTkA_K1EFMmpR_t26oNoO6y5kJxKGOnJVgx9hhy1Hf1OWp2S94U6Bnd_pwmhj1Tpc3vprL0hwIC0QGjdOCOTiEHJZyw-PeKdEEuKC6XwZuJj-OdQ6Axfj-wBxnHGjoyo/w24-h110-no/sprite-minimalist.png) no-repeat!important}<br />.skitter-minimalist .prev_button{background-position:0 0!important;width:24px!important;height:28px!important;}<br />.skitter-minimalist .next_button{background-position:0 -28px!important;width:24px!important;height:28px!important;}<br />.skitter-minimalist .play_pause_button{background-position:0 -74px!important;width:18px!important;height:18px!important}<br />.skitter-minimalist .play_pause_button.play_button{background-position:0 -56px!important;width:18px!important;height:18px!important}<br />.skitter-minimalist .focus_button{background-position:0 -92px!important;width:18px!important;height:18px!important}<br />.skitter-minimalist .info_slide .image_number{background:#000;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400}<br />.skitter-minimalist .info_slide .image_number_select,.skitter-minimalist .info_slide .image_number_select:hover{background:#c33}<br />.skitter-minimalist .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0}<br />.skitter-round .prev_button,.skitter-round .next_button,.skitter-round .play_pause_button,.skitter-round .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1IvoG9f6Vo4YG3OTZh1Z6DwpB3LjOTwHhoWC4NoCsjfgQrMfut78n4ApdiVhiSV0GqBddah0mMDBYF7T71qGR9nb7QZCP1qGHHz5EaIvtNNEgX2zGMQXU6U-Zes87xXkRP_Ru7J6GAHc/w47-h116-no/sprite-round.png) no-repeat}<br />.skitter-round .prev_button{background-position:0 0;width:23px;height:47px;left:-23px}<br />.skitter-round .next_button{background-position:-23px 0;width:23px;height:47px;right:-23px}<br />.skitter-round .next_button:hover,.skitter-round .prev_button:hover{opacity:1}<br />.skitter-round .play_pause_button{background-position:0 -70px;width:47px;height:23px;top:24px;left:24px!important}<br />.skitter-round .play_pause_button.play_button{background-position:0 -47px;width:47px;height:23px;top:24px}<br />.skitter-round .focus_button{background-position:0 -93px;width:47px;height:23px;top:24px;left:82px!important}<br />.skitter-round .info_slide .image_number{background:#999;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400}<br />.skitter-round .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}<br />.skitter-round .progressbar{top:5px;left:0;background:#333;box-shadow:rgba(255,255,255,0.3) 1px 1px 0}<br />.skitter-clean .prev_button,.skitter-clean .next_button,.skitter-clean .play_pause_button,.skitter-clean .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhrjK-ICTlE2rPAZmtIxgc5e2m5u4Oy2fUPfYDs40tVMTE_AuInG4satmL6lz83ICbemaTg_mobWkiwtjviOcPVbIPHQUnSoEUOOjGDtGd1Hyv1M40KfV81h6WzU585xSnIQ4a91VPfkM/w47-h215-no/sprite-clean.png) no-repeat}<br />.skitter-clean .prev_button{background-position:0 0;width:47px;height:46px}<br />.skitter-clean .next_button{background-position:0 -46px;width:47px;height:46px}<br />.skitter-clean .play_pause_button{background-position:0 -133px;width:41px;height:41px}<br />.skitter-clean .play_pause_button.play_button{background-position:0 -92px;width:41px;height:41px}<br />.skitter-clean .focus_button{background-position:0 -174px;width:41px;height:41px}<br />.skitter-clean .info_slide_dots .image_number{width:14px;height:14px;background:#999}<br />.skitter-clean .progressbar{top:5px;left:5px;background:#fff;box-shadow:rgba(0,0,0,0.5) 1px 1px 0}<br />.skitter-square .play_pause_button,.skitter-square .next_button,.skitter-square .focus_button,.skitter-square .prev_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTqcKlC4Fh8asDdMtu8O_yl0w9DTGyo9y79UBA4HajAYzsSGrXqiTZ01hhtplna1oCGm69pQjYtgCgkxPFYRUn044MrGJn5hyphenhyphen-Ti-ggfiYCw8mX46Hyn7MqV_TfLpgtTyUGYcYC26-cKA/w110-h165-no/sprite-square.png) no-repeat}<br />.skitter-square .play_pause_button{background-position:-55px 0;width:55px;height:55px;top:10px!important;left:10px!important;bottom:auto!important;right:auto!important;margin-top:0}<br />.skitter-square .play_pause_button.play_button{background-position:0 0;width:55px;height:55px}<br />.skitter-square .focus_button{background-position:-55px -55px;width:55px;height:55px;top:10px!important;left:65px!important;bottom:auto!important;right:auto!important;margin-top:0}<br />.skitter-square .next_button{background-position:0 -55px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:10px}<br />.skitter-square .prev_button{background-position:0 -110px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:65px}<br />.skitter-square .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}<br />.skitter-square .info_slide_dots .image_number:hover{background:#999}<br />.skitter-square .info_slide_dots .image_number_select,.skitter-square .info_slide_dots .image_number_select:hover{background:#555}<br />.skitter-square .progressbar{top:0!important;left:0!important;width:100%;background:#fff;border-radius:0;height:2px}<br />.slideshow_skitter ul,.slideshow_skitter .image img{display:none}<br />.slideshow_skitter .prev_button:hover,.slideshow_skitter .next_button:hover,.slideshow_skitter .play_pause_button:hover,.slideshow_skitter .focus_button:hover{opacity:0.5!important}<br />.slideshow_skitter .info_slide .image_number:hover,.slideshow_skitter .info_slide_dots .image_number:hover{background:#000}<br />.skitter-minimalist .info_slide,.skitter-round .info_slide,.skitter-clean .info_slide,.skitter-square .info_slide{background:transparent}<br />.skitter-minimalist .info_slide .image_number:hover,.skitter-round .info_slide .image_number_select,.skitter-round .info_slide .image_number_select:hover,.skitter-round .info_slide_dots .image_number_select,.skitter-round .info_slide_dots .image_number_select:hover,.skitter-clean .info_slide_dots .image_number_select,.skitter-clean .info_slide_dots .image_number_select:hover{background:#111}<br />.skitter-round .info_slide .image_number:hover,.skitter-round .info_slide_dots .image_number:hover,.skitter-clean .info_slide_dots .image_number:hover{background:#333}<br />.skitter-clean .info_slide .image_number,.skitter-square .info_slide .image_number{background:#fff;box-shadow:rgba(0,0,0,0.2) 1px 1px 0;font-size:12px;font-weight:400;color:#333}<br />.skitter-clean .info_slide .image_number:hover,.skitter-square .info_slide .image_number:hover{background:#ccc}<br />.skitter-clean .info_slide .image_number_select,.skitter-clean .info_slide .image_number_select:hover,.skitter-square .info_slide .image_number_select,.skitter-square .info_slide .image_number_select:hover{background:#111;color:#fff}<br /></style><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/slideshow.skitter.min.js" type="text/javascript"></script><br /><script type="text/javascript"><br />$(document).ready(function() {<br />$('.slideshow_skitter_large').skitter({<br />theme: '<b><span style="color: blue;">square</span></b>',<br />numbers_align: 'center',<br />progressbar: true, <br />dots: true, <br />preview: true<br />});<br />});<br /></script><br /><br /><div class="slideshow_skitter slideshow_skitter_large"><br /><ul><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cube</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6AOMTXxlkRUULYG66iXKExNLpeU7DKIrUTyGQni6Ec3CTRFpUbJY8B0JW2Bx8VD6Vg-ss5GnYC-XAWAfbw8cACvaZ9L0KdJfur-1WYbHUwEo6lX_SC0FFkW9KX5fayDvY0E636VTkdmE/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cubeRandom</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjXfG253rAWzHlhk6ec4wlwWoxcfq2DA8i2kLTmhhAhte2XSlim7B7KITK6pUxev688nyqnyl1968yQ1MlMghNIk8yT5AIagZ9jxTbY6KtTcIMODns0mKmKxXHwlJQk2rP3ikNJnUnao/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">block</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZXxYBgR1PhEKlodonG7Je9Eypv0n8TxGSAaSDIQrwMeFI_sPCCJysJQoXFYz6OaiENkq-NMokgJudsp857Kk4EbHD41LkPtN9k9b5XzlWGg9tm43_O3pKZOVpMa1DVzpEn8mYTXCP0g/w790-h286-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cubeStop</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcBlOPbdrS8Dc3CcMgXacKBkfkcuzjpMhg9GKSwmKDD0By-KB5dXCdhryFoPH5FD8T7VatiJXSg8qetx5A-dzNd5CxsialItAmR4lvJvoesY6jLezcLBsMi3crCKnbbZ3VwZoHj7VJBHs/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cubeHide</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJRi5T3MqUcadffight6ZnmI2LuKnsuYXBdxhykqtJsbKN4YVI7YztsM5Noz4sYMQJk6KDIeOBl31c4UrqrcBCzlM67IEuvU0Oop7_9nZWeCSFldxUeFSfpLRDK7cYJyJw3IIw9_VF48/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li><br /></ul><br /></div></pre>Keterangan:<br />- Ganti <b>http://mas-andes.blogspot.com</b> dan URL gambar.<br />- Untuk lebar slider silahkan ubah sesuai selera masing-masing.<br /><br /><span style="font-size: large;"><b>Customisasi</b></span><br />Dari kode yang terdapat di atas, perhatikan teks yang berwarna <span style="color: blue;">biru</span>. Kita dapat memilih salah satu di antara 4 theme, disitu saya menggunakan square sebagai default theme. Namun apabila ingin menggantinya, anda dapat merubah dengan pilihan theme lain di antaranya terdapat <span style="color: blue;"><b>square</b></span>, <span style="color: blue;"><b>clean</b></span>, <span style="color: blue;"><b>round</b></span>, <span style="color: blue;"><b>minimalist</b></span>.<br /><br />Sedangkan pada type efek animasi slider perhatikan teks yang berwarna <span style="color: red;">merah </span>pada kode diatas, saya hanya memasukan 5 gambar dengan masing-masing efek yang berbeda. Anda dapat menambahkan gambar sebanyak mungkin dengan berbagi efek animasi yang berbeda didalam satu slider. Anda dapat merubah dan memilih berbagai type efek animasi tersebut, berikut type animasi yang dapat anda gunakan: <code>cube</code>, <code>cubeRandom</code>, <code>block</code>, <code>cubeStop</code>, <code>cubeStopRandom</code>, <code>cubeHide</code>, <code>cubeSize</code>, <code>horizontal</code>, <code>showBars</code>, <code>showBarsRandom</code>, <code>tube</code>, <code>fade</code>, <code>fadeFour</code>, <code>paralell</code>, <code>blind</code>, <code>blindHeight</code>, <code>blindWidth</code>, <code>directionTop</code>, <code>directionBottom</code>, <code>directionRight</code>, <code>directionLeft</code>, <code>cubeSpread</code>, <code>glassCube</code>, <code>glassBlock</code>, <code>circles</code>, <code>circlesInside</code>, <code>circlesRotate</code>, <code>cubeShow</code>, <code>upBars</code>, <code>downBars</code>, <code>hideBars</code>, <code>swapBars</code>, <code>swapBarsBack</code>, <code>swapBlocks</code>, <code>cut</code>, <code>hideProgressBar</code>.<br /><br />Untuk yang lain-lain misalkan ingin merubah warna,font, maupun letak elemen silahkan custom sendiri agar sesuai dengan template blog yang di gunakan.

Cara Modifikasi Skitter Slideshow Pada Blog – setelah pada artikel sebelumnya membahas tema yang sama yakni mengenai jQuery Skitter Slidesh...

Read More