nadiacss: Jquery

Tampilkan postingan dengan label Jquery. Tampilkan semua postingan

Jumat, 07 Februari 2014

Penggunaan Jenis Efek jQuery Modal Dialog

Penggunaan Jenis Efek jQuery Modal Dialog - 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.

Pertama masuk Edit HTML template dan pasang kode berikut ini di atas kode </head>

<link href='http://mas-andes.googlecode.com/svn/trunk/modal-dialog.css' rel='stylesheet' type='text/css'/>
<script src='http://mas-andes.googlecode.com/svn/trunk/modernizr.custom.js' type='text/javascript'/>

Kemudian pasang kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
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()})();
(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);
//]]>
</script>

Kemudian Simpan template.

Struktur HTML modal dialog:

<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Modal Dialog <a class="md-close">&#215;</a></h3>
        <div>
            <p>Disini Isi Konten Kotak Dialog</p>
        </div>
    </div>
</div>

<!-- Tombol untuk menampilkan modal dialog -->
<button class="md-trigger" data-modal="modal-1">Open Dialog</button>
<div class="md-overlay"></div>

class md-effect-1 dan ID modal-1 adalah tipe efek yang di gunakan (Konfigurasi lihat tabel).
<p>Disini Isi Konten Kotak Dialog</p> adalah isi dari kotak dialog.

Untuk menentukan masing-masing efek yang berbeda, lihat pada tabel konfigurasi dibawah ini:

class	id	effect
`md-effect-1`	`modal-1`	Fade in & Scale
`md-effect-2`	`modal-2`	Slide in (right)
`md-effect-3`	`modal-3`	Slide in (bottom)
`md-effect-4`	`modal-4`	Newspaper
`md-effect-5`	`modal-5`	Fall
`md-effect-6`	`modal-6`	Side Fall
`md-effect-7`	`modal-7`	Sticky Up
`md-effect-8`	`modal-8`	3D Flip (horizontal)
`md-effect-9`	`modal-9`	3D Flip (vertical)
`md-effect-10`	`modal-10`	3D Sign
`md-effect-11`	`modal-11`	Super Scaled
`md-effect-12`	`modal-12`	Just Me
`md-effect-13`	`modal-13`	3D Slit
`md-effect-14`	`modal-14`	3D Rotate Bottom
`md-effect-15`	`modal-15`	3D Rotate In Left
`md-effect-16`	`modal-16`	Blur
`md-effect-17`	`modal-17`	Let me in
`md-effect-18`	`modal-18`	Make way!
`md-effect-19`	`modal-19`	Slip from top

Agar lebih jelasnya dari masing-masing efek yang ada bisa dilihat pada halaman demo.

demoDemikian untuk tata cara menerapkan dan Penggunaan Jenis Efek jQuery Modal Dialog, Selebihnya bisa berkreasi sendiri di blog masing-masing.

Penggunaan jQuery Toggle, fadeToggle dan slideToggle

Penggunaan jQuery Efek Toggle, fadeToggle dan slideToggle – 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 jquery-1.10.2. Untuk memasang jQuery didalam template bisa menaruhnya diatas kode </head> atau bisa juga di atas </body>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

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.

Sebelum menentukan efek yang akan dipasang, terlebih dahulu sembunyikan elemen yang sudah anda pilih. Gunakan CSS property display:none, bukan visibility:hidden. Kemudian untuk efeknya nanti baru kita tampilkan menggunakan metode toggle(), fadeToggle() ataupun slideToggle().

Penggunaan jQuery Toggle

jQuery Toggle digunakan untuk membuat efek show() dan hide() yang tidak lain adalah untuk menampilkan dan menyembunyikan elemen dengan menggunakan metode toggle(). Syntax yang di gunakan seperti dibawah ini:

$(selector).toggle(speed,easing,callback)

Contoh:

Apabila di presentasikan contoh penulisannya script untuk menyembunyikan dan menampilkan suatu elemen seperti dibawah ini:

#btn1{
padding:5px 15px;
background:#2ecc71;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#contoh1{
display:none;
text-align:center;
background:#2ecc71;
color:#fff;
padding:50px 0
}

<button id='btn1'>Toggle</button>
<div id='contoh1'>Contoh penggunaan jQuery toggle</div>

Default

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle();
  });
});

Edit & Demo

Dengan menambahkan parameter speed

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle(1000);
  });
});

Edit & Demo

Dengan menambahkan parameter callback

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle(1000,function(){
      alert("Pesan ini muncul setelah toggle selesai berjalan");
    });
  });
});

Edit & Demo

Penggunaan jQuery fadeToggle

Metode fadeToggle() digunakan untuk memunculkan efek fadeIn() dan fadeOut() pada elemen yang sudah ditentukan. Syntax yang digunakan seperti dibawah ini:

$(selector).fadeToggle(speed,easing,callback)

Contoh:

Untuk menambahkan parameter speed maupun callback langkahnya sama seperti pada metode toggle().

#bton1{
padding:5px 15px;
background:#D94839;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#gambar{
display:none;
text-align:center;
padding:10px;
background:#E74C3C;
border:5px solid #fff
}
#gambar img{
width:300px;
height:200px;
border:5px solid #fff
}

<button id='bton1'>fadeToggle</button>
<div id="gambar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2RptzVXVNO3N1Mq3ZBNNhEGmC_ST8w41jnVwSOLDcOeTdZ128VqJHCaW9qdCNS6mFxGPPuap_Bw_R30Dhbpsc5p_sUqYX3ONvoYDbHjbzkKsFYBcFmOFk2hRPV4ejsPOsRmcKHdDVN_Y/h200/Paramore+%287%29.jpg"/></div>

$(document).ready(function(){
  $("#bton1").click(function(){
    $("#gambar").fadeToggle();
  });
});

Edit & Demo

Penggunaan jQuery slideToggle

Fungsinya sama seperti metode toggle() dan fadeToggle(), hanya saja efeknya yang berbeda. Metode slideToggle() digunakan untuk membuat efek slideDown() dan slideUp(). Syntax yang digunakan seperti dibawah ini:

$(selector).slideToggle(speed,easing,callback)

Contoh:

Contoh sederhana untuk deklarasi penulisannya script seperti dibawah ini:

#buton1{
padding:5px 15px;
background:#D94839;
color:#fff;
cursor:pointer;
display:inline-block
}
#contoh2{
display:none;
text-align:center;
background:#E74C3C;
color:#fff;
padding:50px 0
}

<div id="buton1">slideToggle</div>
<div id="contoh2">Contoh penggunaan jQuery slideToggle</div>

Default

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle();
  });
});

Edit & Demo

Dengan Menambahkan parameter speed

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle(1000);
  });
});

Edit & Demo

Dengan Menambahkan parameter callback

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle(1000,function(){
      alert("Pesan ini muncul setelah slideToggle selesai berjalan");
    });
  });
});

Edit & Demo

Konfigurasi:

Parameter	Deskripsi
speed	Opsional. Untuk menentukan kecepatan efek. Value: milidetik (contoh: `1000`, `2000`, dst). `"slow"` `"fast"`
easing	Opsional. Untuk menentukan kecepatan animasi pada titik tertentu. Value default yang digunakan adalah "swing" Value: `"swing"` bergerak lebih lambat di awal/akhir, tapi lebih cepat di tengah. `"linear"` bergerak dalam kecepatan konstan.
callback	Opsional. Fungsi yang akan dieksekusi setelah metode `toggle()`, `fadeToggle()` ataupun `slideToggle()` sudah selesai berjalan.

Minggu, 26 Januari 2014

Membuat Lightbox Widget Contact Form Blogger

Membuat Lightbox Widget Contact Form Blogger – 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 Membuat Lightbox Widget Contact Form Blogger.

Pertama, masuk ke Edit HTML template blogger lalu cari kode ]]></b:skin> kemudian pasang kode berikut ini di atasnya.

#contacts-forms{width:100%;margin-bottom:10px}
#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}
#widget-contact h3.juduls{background:#E74C3C;color:#fff;font:normal 18px Tahoma,Sans-Serif;position:relative;margin:0;padding:15px;text-transform:uppercase}
#widget-contact h3.juduls a{position:absolute;top:10px;right:15px;color:#fff;font-size:22px;text-decoration:none;cursor:pointer}
#ContactForm1 h2{display:none}
#area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none}
#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}
#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}
#ContactForm1_contact-form-submit:hover{background:#d00}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px}
#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}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff}
.contact-form-widget p{margin:0}
.contact-form-widget{padding:5px}
.buka-contact{width:100%;padding:10px;background:#E74C3C;color:#fff;font-size:16px;cursor:pointer}
.buka-contact:hover{background:#d00}

Selanjutnya cari kode </body> kemudian pasang kode berikut ini tepat di atasnya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script type='text/javascript'>
$(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})});
</script>

Selanjutnya cari kode <div id='sidebar-wrapper'> kemudian pasang kode berikut ini tepat dibawahnya.


<div id='contacts-forms'>
<div id='widget-contact'>
<h3 class='juduls'>Contact Form<a href='#' class='close' title='Close'>&#215;</a></h3>
<b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'/>
</div>
<div id='area-overlay'></div>
<button class='buka-contact'>Kirim Pesan</button>
</div>

Langkah terakhir Simpan template.

Sekarang buka Tata Letak, maka disitu sudah muncul satu elemen widget baru. Selanjutnya tinggal klik Tambahkan Widget > Gadget Lainnya > Formulir Kontak seperti pada gambar dibawah ini.

Cukup seperti itu saja untuk Membuat Lightbox Widget Contact Form Blogger. Selanjutnya apabila ingin merubah tampilannya bisa sesuaikan sendiri dengan merubah pada bagian CSS.

Jumat, 17 Januari 2014

Cara Membuat Widget Recent Post By Tag Label

Cara Membuat Widget Recent Post By Tag Label – 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.

1. Pertama, copy kode berikut ini lalu taruh di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
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/AVvXsEj3L8aYZk0Suk0SZyiC0GZ3ZysMcSDoPNxHv8JQ-x23g4jFV0dYdt-b4rwoI-RiGwE_uggCE5Y87QmdE8wHsEHL2-h5zCjj7wDNP9rLDJyrbeNLhZMaGZ28rSG51T9YgQmniflN6d9yyFjr/'}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>')}
//]]>
</script>

2. Kemudian copy lagi kode berikut ini dan taruh di atas kode ]]></b:skin>

img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px}
.taglabel{float:left;width:100%;padding:0;margin:0}
ul.taglabel li{padding:5px 0;min-height:73px}

3. Selanjutnya pasang kode berikut ini pada Widget HTML/Javascript.

<script type='text/javascript'>
    var numposts = 5; // Jumlah Post yang di tampilkan
    var showpostthumbnails = true; // Ganti "false" untuk tidak menampilkan [Thumbnail]
    var displaymore = false; // Ganti "true" untuk menampilkan link [More]
    var displayseparator = false;
    var showcommentnum = false; // Ganti "true" untuk menampilkan [Komentar]
    var showpostdate = false; // Ganti "true" untuk menampilkan [Tanggal]
    var showpostsummary = true; // Ganti "false" untuk tidak menampilkan [Deskripsi Post]
    var numchars = 60; // Character Deskripsi yang di tampilkan
</script>
<script type="text/javascript" src="/feeds/posts/default/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Perhatikan pada baris ini:
<script type="text/javascript" src="/feeds/posts/default/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>
Apabila ingin merubah recent post menjadi default(tidak berdasarkan sebuah label), ganti baris kode tersebut dengan kode berikut ini:
<script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

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 ]]></b:skin>

#label-left .widget ul,#label-right .widget ul,#label-bottom .widget ul{margin-top:-10px!important}
#label-left .widget,#label-right .widget,#label-bottom .widget{position:relative;display:block;border:1px solid #aaa;float:left;padding:1%}
#label-left .widget,#label-right .widget{width:47%}
#label-bottom .widget{width:97.3%}
#label-left .widget li,#label-right .widget li,#label-bottom .widget li{font-family:Electrolize,sans-serif!important}
#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}
#label-left .widget{margin-right:5px}
#label-bottom .widget{margin-top:20px}
#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}
#label-left .widget ul,#label-right .widget ul,#label-bottom .widget ul{list-style:none;margin:0;padding:0}
#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}
#label-left .widget li:last-child,#label-right .widget li:last-child,#label-bottom .widget li:last-child{border-bottom:none}

Perhatikan pada baris ini jika ingin menyesuikan lebar widget
#label-left .widget,#label-right .widget{width:47%}
#label-bottom .widget{width:97.3%}

Selanjutnya cari kode berikut ini:

<b:section class='main' id='main' showaddelement='no'>
....................bla bla bla...................
</b:section>

Jika di lihat secara keseluruhan tampilan lengkapnya struktur kode tersebut seperti dibawah ini:

Perhatikan kode </b:section>, jika sudah ketemu copy kode berikut ini lalu paste tepat dibawahnya kode tersebut.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='label-left' id='label-left' preferred='yes'/>
<b:section class='label-right' id='label-right' preferred='yes'/>
<b:section class='label-bottom' id='label-bottom' preferred='yes'/>
</b:if>

Sekarang lihat pada halaman tata letak blog, disitu sudah terdapat 3 elemen widget.

Selanjutnya tinggal pasang kode yang terdapat pada point 3 kedalam widget HTML/Javascript.

Langkah terakhir Simpan dan selesai.

Selasa, 14 Januari 2014

Cara Memasang Auto Post Slider Carousel di Blog

Cara Memasang Auto Post Slider Carousel di Blog – 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 Cara Memasang Auto Post Slider Carousel di Blog.

1. Pada Dashboard blog masuk ke Edit HTML template.
2. Kemudian taruh kode berikut ini diatas kode </head>

<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js'/>

3. Selanjutnya copy kode CSS berikut ini lalu taruh di atas kode ]]></b:skin>

#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto}
#featured{border:2px solid #444;outline:1px solid #000;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto}
#featured ul{width:9999px}
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}
#featured li{width:150px;display:inline-block;float:left;height:150px;background:#222;border-left:1px solid #111;border-right:1px solid #333;}
.thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000}
.thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;}
.title-featured{text-align:center;position:relative;margin-top:-20px}
.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}
.arrow{position:absolute;display:block;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHO9k_NaLN7ldyPRFks6lK1HNyzlBwRMw-w0Z1uKysez7iFr19d56PiPKcMfkKhaOjxAO0aZZsRHiYH50iqv6QWJOpDmpH7WH0a7Dat-rjmshYH7tndfe_IDq_2OAlS2vD1Rc8Ps9F7Y/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}
.arrow.back{background-position:0 50%;left:10px}
.arrow.forward{background-position:100% 50%;right:10px}
span.slideloading{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJSvFm9kEPMKmGhfkUL5UWiy03Q3KfuoVu7AebRlgv60UUwiLusYRopqdcSuGr6ulfu3IWB_uQayuAjXFPdi2isLswAax7laALfzPOSFomQpyK0Rany8YRNeFIcnFbO6UCA9_iKDJdcko/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}

4. Jika ingin membuat Slider Carousel tampil di bawah header seperti pada template Bluesforyou maka cari kode <div id='main-wrapper'> lalu taruh kode berikut ini tepat di atasnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>Loading...</span>
</div>
</div>
</b:if>

Jika ingin membuat Slider Carousel tampil di atas footer seperti pada template Bluesmulus maka cari kode <div id='footer-wrapper'> lalu taruh kode yang ada pada point 4 tepat di atasnya.

5. Langkah terakhir Simpan template.

Demikian akhir dari tutorial Cara Memasang Auto Post Slider Carousel di Blog, apabila ingin merubah tampilan slider maka ubah saja dan sesuaikan pada kode CSS.

Rabu, 11 Desember 2013

Page Number Navigation Blogger Valid HTML5

Page Number Navigation Blogger Valid HTML5 – 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 & 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 & yang terdeteksi error lalu jika sudah ditemukan ganti dengan kode &, 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 Page Number Navigation Blogger Valid HTML5.

1. Login ke akun blogger lalu masuk ke Edit HTML template.
2. Copy kode CSS berikut ini lalu taruh diatas kode ]]></b:skin>

.showpageArea{position:relative;display:block;padding:0;margin:0 7px 40px 0}
.showpageArea a{position:relative;background:#111;color:#fff;padding:10px;top:0;float:left}
.showpageOf,.showpagePoint{position:relative;color:#63C4F1;background:#111;padding:10px;float:left}
.showpageOf{display:none;float:right}

3. Selanjutnya cari kode berikut ini.

<b:section class='main' id='main' showaddelement='no'>
...............................................
</b:section>

Tampilan lengkapnya kode tersebut seperti pada screenshot dibawah ini

4. Lalu copy kode berikut ini kemudian paste di bawah kode </b:section>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
&lt;script type='text/javascript'&gt;
var home_page_url = location.href;
var pageCount=15;
var displayPageNum=10;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
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;) }}
&lt;/script&gt; 
</b:if>
</b:if>
</b:if>

5. Terakhir Simpan template.

Selesai sudah untuk membuat Page Number Navigation Blogger Valid HTML5, dan apabila ingin merubah warna pada widget silahkan kreasikan sendiri pada bagian CSS.

Minggu, 08 Desember 2013

Bluesmulus Blogger Template

Bluesmulus Blogger Template – 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 template Bluesforyou yang sudah saya publish pada tempo hari sebelumnya.

Berikut beberapa fitur dari Bluesmulus Blogger Template:
1. Valid HTML5 dan CSS3
2. Score SEO 100% in Chkme.com
3. Auto post Slideshow
4. Auto post featured Carousel
5. Custom error 404 page
6. Post by tag label, dll.
Preview
Download

Cara menambahkan widget Post by tag label pada homepage

Taruh kode berikut ini kedalam widget HTML/Javascript:

<script type='text/javascript'>
    var numposts = 5; // Jumlah Post yang di tampilkan
    var showpostthumbnails = true; // Ganti "false" untuk tidak menampilkan [Thumbnail]
    var displaymore = false; // Ganti "true" untuk menampilkan link [More]
    var displayseparator = false;
    var showcommentnum = false; // Ganti "true" untuk menampilkan [Komentar]
    var showpostdate = false; // Ganti "true" untuk menampilkan [Tanggal]
    var showpostsummary = true; // Ganti "false" untuk tidak menampilkan [Deskripsi Post]
    var numchars = 60; // Character Deskripsi yang di tampilkan
</script>
<script type="text/javascript" src="/feeds/posts/default/-/CSS?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Teks berwarna merah adalah nama label, ganti dengan label blog anda.

[ Petunjuk Install Template ]

Sabtu, 30 November 2013

Bluesforyou Blogger Template

Bluesforyou Blogger Template – elemen template Bluesforyou tidak jauh berbeda dengan template Darkforyou, 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 Bluesforyou Blogger Template.

Light Version

Preview
Download

UPDATE 04 DESEMBER 2013 [Perbaikan Layout, dll]

Dark Version

Preview
Download

UPDATE 04 DESEMBER 2013 [Perbaikan Layout, dll]

Berikut beberapa fitur dari Bluesforyou Blogger Template
1. Valid HTML5 dan CSS3
2. Score SEO 100% in Chkme.com
3. Auto post featured
4. Custom error 404 page
5. Fast Loading, dll (lainnya lihat sendiri di halaman demo).

[ ]

Rabu, 27 November 2013

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.

Demo
Download

Berikut beberapa fitur dari template Darkforyou

1. Valid HTML5 dan CSS3
2. Score SEO 100% in Chkme.com
3. Auto post slider Carousel
4. Custom error 404 page
5. Fast Loading, dll.
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 Darkforyou Blogger Template.

Credit:
Thanks to Threaded Comment V3 from: http://blog.kangismet.net
Thanks to Tag Pre from: http://www.alexjoen.web.id
Thanks to http://jquery.com

UPDATE 04 DESEMBER 2013 [Perbaikan Layout, dll]

Download

Rabu, 13 November 2013

Membuat Mode Grid Pada Post Homepage Blogger

Membuat Mode Grid Pada Post Homepage Blogger - 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 Membuat Mode Grid Pada Post Homepage Blogger.
Demo
1. Pada bagian dashbord blog pilih menu Template kemudian Edit HTML.
2. Selanjutnya copy kode berikut ini, lalu pasang di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot; ;
summary_noimg = 400;
summary_img = 180;
img_thumb_height = 130;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
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}
//]]>
</script>
<style type='text/css'>
.post {width:44%;height:370px;float:left;margin:10px;position:relative;display: block;}
.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;}
.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}
.post-footer {margin-top:30px;height:20px;}
.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
.more {float:right;background:#52e052;color:#000!important;padding:5px 10px;text-decoration:none!important;transition: all 1s ease;}
.more:hover {background:#ff0000;color:#fff!important;text-decoration:none!important;}
</style>
</b:if>
</b:if>

Jika tidak ingin menampilkan thumbnail post, ubah "yes" menjadi "no".
Angka "400" merupakan jumlah karakter yang akan ditampilkan jika ada sebuah post tidak memiliki gambar.
Angka "180" merupakan jumlah karakter yang akan ditampilkan jika sebuah post memiliki gambar, tapi hanya gambar pertama dalam struktur post yang akan digunakan sebagai thumbnail.
Ketinggian thumbnail adalah "130" dan Lebar thumbnail adalah "220". Kedua ketinggian thumbnail dan nilai lebar dapat disesuaikan dengan nilai pilihan anda sendiri.

3. Kemudian cari kode <data:post.body/> 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 <data:post.body/> yang kedua.

<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'>Read More</a> </b:if> </b:if>

Anda dapat mengubah kata "Read More" agar menjadi lebih menarik seperti "Lanjutkan membaca" atau lainnya, bisa juga mengganti read more dengan tombol gambar.

4. Jika sudah, Simpan template.

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 <b:includable id='nextprev'> kemudian paste kode berikut ini di bawahnya.

<div style='clear:both;'/>

Sekian dasar dari cara Membuat Mode Grid Pada Post Homepage Blogger, nanti anda bisa mengembangkannya dengan memberi background dan border atau lainnya agar lebih serasi dengan template blog yang di gunakan.

Senin, 11 November 2013

Membuat Desain Halaman 404 Error Pada Blog

Membuat Desain Halaman 404 Error Pada Blog – masih erat kaitannya dengan artikel karena ini postingan berkelanjutan dari yang sebelumnya yakni pada pembahasan Memahami Konsep Redirect Halaman Blog 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 Posts filed under Search results atau No posts matching the query. 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 Membuat Desain Halaman 404 Error Pada Blog yang nantinya akan menampilkan pesan jika terdapat halaman yang error.
Demo
Pada halaman dashboard blog masuk ke menu Preferensi penelusuran. Disitu akan di tawarkan fasilitas Kesalahan dan Pengalihan, pada fitur blogger tersebut lakukan edit pada “Pesan Khusus untuk Laman Tidak Ditemukan” 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.

Sekarang kita flashback ke tutorial sebelumnya yakni pada artikel yang berjudul Form Search Blogger Dengan Ajax jQuery. 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.

Jika seluruh kode sudah di copy, sekarang perhatikan pada bagian HTML antara kode <div id="page"> sampai </div> 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 <div id="page">. 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.

<div id="page">
<a href="http://mas-andes.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXysoFX8ga3vi2MsJY9ArCX-tYBvlPdjjVQf7OZQUUEmaxU7K6slL-jcSH_9ildGUAMiSMrFF3LqW2RflsTgN9c05zdQx7spWLOYjN5uzrj14p7o6BYbtH-G_Vbwm9oIAfgUz8V8GwMz4/h316/error-404.jpg" alt="error 404" title="Halaman Tidak Ditemukan"/></a>
<form id="searchForm" method="post">
<fieldset>
<input id="s" type="text" />
<input type="submit" value="Search" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Search</label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Search The Web</label>
</div>
<ul class="icons">
<li class="web" title="Web Search" data-searchType="web">Web</li>
<li class="images" title="Image Search" data-searchType="images">Images</li>
<li class="news" title="News Search" data-searchType="news">News</li>
<li class="videos" title="Video Search" data-searchType="video">Videos</li>
</ul>
</fieldset>
</form>
</div>
<div id="resultsDiv"></div>

Jika sudah, masukan kode seluruhnya mulai dari CSS, jQuery sampai HTML kedalam form “Pesan Khusus untuk Laman Tidak Ditemukan” pada Preferensi penelusuran menu blogger. Setelah tersimpan, maka halaman tersebut akan ditampilkan jika terjadi kesalahan pada suatu halaman yang gagal di indeks.

Sabtu, 09 November 2013

Form Search Blogger Dengan Ajax jQuery

Form Search Blogger Dengan Ajax jQuery – 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 googleSearch () 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 Form Search Blogger Dengan Ajax jQuery.

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.

<style type='text/css'>
#searchForm{background-color:#4C5A65;position:relative;margin:0 0 80px 0;padding:10px;}
fieldset{border:none}
#searchInputContainer{width:420px;height:34px;background:#fff;float:left;margin-right:12px}
#s{border:1px solid #52e052;color:#888;background:#f1f1f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzs9lLqP6P3nvoAy1dlXLvl9-iFOkD6Xnyjt4NWysSNLBthcEsZV3ZNt4OK1IkINcX83LlFuzwNp0Ued3YN5r2j1VD5gb6QbpzHzfE9uRU-QP2mpFnmrKC5F8z0BSSts99mKHj-6-H-rxG/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}
.icons{list-style:none;height:19px;position:relative;margin:10px 0 0 425px}
.icons li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX4Jkdr0neYsRZgiUJRPbBctXknUwcjdlfv6S5ELimz6A9KPk_wIrgfNP49GIW25zoi9s4E2_TOdN6r1dmvxlZ-uc_GZcXvBlIOVqEG9CCk7AVih0TH9Hby_uIOzR_mnYv4fjekO5VGws/h120/icons.png) no-repeat;float:left;height:19px;text-indent:-9999px;cursor:pointer;margin-right:5px}
li.web{width:15px}
li.images{width:22px;background-position:-18px 0}
li.images.active,li.images:hover{background-position:-18px bottom}
li.news{width:14px;background-position:-44px 0}
li.news.active,li.news:hover{background-position:-44px bottom}
li.videos{width:17px;background-position:right 0}
li.videos.active,li.videos:hover{background-position:right bottom}
span.arrow{width:11px;height:6px;position:absolute;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6zzslZvFBqpV10wEu6NNsPJP3p0bYj6yGP3miBjmRtDnezKswpbU_s97hsnmW-k-CDHV4yK4Z6tuGrddLkkZ9D1UcOZ1nH7jR5UsLuXbsQBcjkZ1N01WiOmNIfopjixIUvCRw6oTUwYo/h120/arrow.png) no-repeat;left:0;margin:15px 0 0 5px;}
#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}
#searchInContainer{float:left;margin-top:5px;width:400px;text-align:left !important;}
label{color:#DDD;cursor:pointer;font-size:11px;position:relative;right:-2px;top:-2px;margin-right:10px;white-space:nowrap}
input[type=radio]{cursor:pointer}
.pageContainer{margin-bottom:50px;}
p.notFound{text-align:center;padding:0 0 40px}
.webResult{text-shadow:1px 1px 0 #586a75;margin-bottom:20px}
.webResult h2{background-color:#5D6F7B;font-size:18px;font-weight:400;padding:8px 20px}
.webResult h2 b{color:#fff}
.webResult h2 a{color:#eee;border:none}
.webResult p{line-height:1.5;padding:15px 20px;color:#222;}
.webResult p b{color:#000}
.webResult > a{margin-left:20px}
.imageResult{float:left;height:180px;text-align:center;width:152px;overflow:hidden;margin:0 0 20px 20px}
.imageResult img{display:block;border:none}
.imageResult a.pic{border:2px solid #333;outline:1px solid #777;display:block;margin:0 auto 15px}
#more{width:83px;height:24px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0wId251_XQGhA3htdcubrVh16GZgyTpbzz3_UYq5B8TBDcnpCRzLbhj_iepmctoWvk7qHojHsHmzoDms9ZgJBMqVE_Pi36OPQc8eyK4PCxfQLZnQNrdCu9H9zkyK8004hvKUOAqzZg0/h120/more.png) no-repeat;cursor:pointer;margin:40px auto}
li.web.active,li.web:hover,#submitButton:hover,#more:hover{background-position:left bottom}
#page{ margin:0 auto; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    function n(t) {
        t = $.extend({}, e, t);
        t.term = t.term || $("#s").val();
        if (t.searchSite) {
            t.term = "site:" + t.siteURL + " " + t.term
        }
        var i = "http://ajax.googleapis.com/ajax/services/search/" + t.type + "?v=1.0&callback=?";
        var s = $("#resultsDiv");
        $.getJSON(i, {
            q: t.term,
            rsz: t.perPage,
            start: t.page * t.perPage
        }, function (e) {
            var i = e.responseData.results;
            $("#more").remove();
            if (i.length) {
                var o = $("<div>", {
                    className: "pageContainer"
                });
                for (var u = 0; u < i.length; u++) {
                    o.append(new r(i[u]) + "")
                }
                if (!t.append) {
                    s.empty()
                }
                o.append('<div class="clear"></div>').hide().appendTo(s).fadeIn("slow");
                var a = e.responseData.cursor;
                if (+a.estimatedResultCount > (t.page + 1) * t.perPage) {
                    $("<div>", {
                        id: "more"
                    }).appendTo(s).click(function () {
                        n({
                            append: true,
                            page: t.page + 1
                        });
                        $(this).fadeOut()
                    })
                }
            } else {
                s.empty();
                $("<p>", {
                    className: "notFound",
                    html: "No Results Were Found!"
                }).hide().appendTo(s).fadeIn()
            }
        })
    }
    function r(e) {
        var t = [];
        switch (e.GsearchResultClass) {
        case "GwebSearch":
            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>"];
            break;
        case "GimageSearch":
            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>"];
            break;
        case "GvideoSearch":
            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>"];
            break;
        case "GnewsSearch":
            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>"];
            break
        }
        this.toString = function () {
            return t.join("")
        }
    }
    var e = {
        siteURL: "mas-andes.blogspot.com",
        searchSite: true,
        type: "web",
        append: false,
        perPage: 8,
        page: 0
    };
    var t = $("<span>", {
        className: "arrow"
    }).appendTo("ul.icons");
    $("ul.icons li").click(function () {
        var n = $(this);
        if (n.hasClass("active")) {
            return false
        }
        n.siblings().removeClass("active");
        n.addClass("active");
        t.stop().animate({
            left: n.position().left,
            marginLeft: n.width() / 2 - 4
        });
        e.type = n.attr("data-searchType");
        $("#more").fadeOut()
    });
    $("#siteNameLabel").append(" " + e.siteURL);
    $("#searchSite").click();
    $("li.web").click();
    $("#s").focus();
    $("#searchForm").submit(function () {
        n();
        return false
    });
    $("#searchSite,#searchWeb").change(function () {
        e.searchSite = this.id == "searchSite"
    })
})
</script>
<div id="page">
<form id="searchForm" method="post">
<fieldset>
<input id="s" type="text" />
<input type="submit" value="Search" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Search</label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Search The Web</label>
</div>
<ul class="icons">
<li class="web" title="Web Search" data-searchType="web">Web</li>
<li class="images" title="Image Search" data-searchType="images">Images</li>
<li class="news" title="News Search" data-searchType="news">News</li>
<li class="videos" title="Video Search" data-searchType="video">Videos</li>
</ul>
</fieldset>
</form>
</div>
<div id="resultsDiv"></div>

Ganti mas-andes.blogspot.com dengan URL blog anda.

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.

Selasa, 05 November 2013

Cara Modifikasi Skitter Slideshow Pada Blog

Cara Modifikasi Skitter Slideshow Pada Blog – 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 Cara Memasang Skitter Slideshow di Blog 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 Cara Modifikasi Skitter Slideshow Pada Blog.

1. Login akun blogger.
2. Masuk ke Tata Letak kemudian Tambahkan Widget HTML/Javascript.
3. Copy kode berikut ini, lalu paste kedalam Widget HTML/Javascript kemudian Simpan.

<style type="text/css">
.slideshow_skitter{position:relative;width:900px;height:300px;background:#000; margin:0 auto;}
.slideshow_skitter img {width:900px; height:300px;}
.slideshow_skitter img{max-width:none}
.slideshow_skitter .container_skitter{overflow:hidden;position:relative}
.slideshow_skitter .image{overflow:hidden}
.slideshow_skitter .slideshow_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.slideshow_skitter .slideshow_clone img{position:absolute;top:0;left:0;z-index:20}
.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}
.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}
.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}
.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}
.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}
.slideshow_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}
.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}
.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}
.slideshow_skitter .info_slide_thumb .image_number img{position:absolute;top:-30px;left:-30px;height:100px}
.slideshow_skitter .slideshow_scroll_thumbs{padding:0}
.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}
.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}
.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}
.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}
.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/AVvXsEjr9r5VO8JCcxFvvoDaleItQxxXKFC2jGcPaiuVtOQAN1GkuLaZ6k82UMzvO37CB3s0qsZOeuGxrgSgkGam55h5T_1_Wljh-PKEguNsxfuhQkZXvZx8A4MzplDluYxfd9waw1QGHh4tnzo/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;margin:-16px}
.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}
.slideshow_skitter .label_skitter p{font:normal 22px arial,tahoma;letter-spacing:-1px;margin:0;padding:10px}
.slideshow_skitter .progressbar{background:#000;position:absolute;top:5px;left:15px;height:5px;width:200px;z-index:99;border-radius:20px}
.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}
.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}
.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}
.slideshow_skitter .preview_slide ul li img{position:absolute!important;top:0!important;left:0!important;height:150px!important;width:auto!important}
#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}
.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}
.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}
.slideshow_skitter_large{width:900px;height:300px}
.slideshow_skitter_small{width:200px;height:100px}
.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/AVvXsEjl3PlriLebpaPKUghO9TQC_yEXxrOP48rn88iYsHHsWL7DLuyK0pJ5VD65tODGlxbkn0iZha5p8sMbsk9f0TYpSEGyXSqoJZGrdOTZ2Ah68W7rMRD57romsatbJdQVMu-idMO6E9xoazs/w84-h126-no/sprite-default.png) no-repeat}
.slideshow_skitter .play_pause_button.play_button{background-position:0 -84px;width:42px;height:42px}
.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/AVvXsEie4OlPuKl2LMTLERAEOOfogXtplV2oQV_S25D1eX_pLYxulYlziMwSzZ8lEPeflkM7OpNOpOgwuKn8ZVDZzC9qToWsgfaQhZBmgA6b3gzpnvP1kE3a5kF3PFX2jaChYgQqnxHG7-P3JE8/w24-h110-no/sprite-minimalist.png) no-repeat!important}
.skitter-minimalist .prev_button{background-position:0 0!important;width:24px!important;height:28px!important;}
.skitter-minimalist .next_button{background-position:0 -28px!important;width:24px!important;height:28px!important;}
.skitter-minimalist .play_pause_button{background-position:0 -74px!important;width:18px!important;height:18px!important}
.skitter-minimalist .play_pause_button.play_button{background-position:0 -56px!important;width:18px!important;height:18px!important}
.skitter-minimalist .focus_button{background-position:0 -92px!important;width:18px!important;height:18px!important}
.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}
.skitter-minimalist .info_slide .image_number_select,.skitter-minimalist .info_slide .image_number_select:hover{background:#c33}
.skitter-minimalist .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0}
.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/AVvXsEhpUIkygQKUF429c2MnL6upCoatu6ak23pevGmiLKm92irIQrWRL4Zt8SMnFA-kzaSHpIsx6s3NXlHYQ4IavjFEFeds53reVFWdJDkE-2T7OhVo18_mcfPrmSh5IBvtjaW-n_rf_9N9Z7k/w47-h116-no/sprite-round.png) no-repeat}
.skitter-round .prev_button{background-position:0 0;width:23px;height:47px;left:-23px}
.skitter-round .next_button{background-position:-23px 0;width:23px;height:47px;right:-23px}
.skitter-round .next_button:hover,.skitter-round .prev_button:hover{opacity:1}
.skitter-round .play_pause_button{background-position:0 -70px;width:47px;height:23px;top:24px;left:24px!important}
.skitter-round .play_pause_button.play_button{background-position:0 -47px;width:47px;height:23px;top:24px}
.skitter-round .focus_button{background-position:0 -93px;width:47px;height:23px;top:24px;left:82px!important}
.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}
.skitter-round .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}
.skitter-round .progressbar{top:5px;left:0;background:#333;box-shadow:rgba(255,255,255,0.3) 1px 1px 0}
.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/AVvXsEg8xNHq_rZ5-wMwlGl30xYfPXL9bPkRql53nTMcSFEZhK2ABpe84JDnVS_RcwfsEHASJNKCa2P-aN-e3r3lO8ESZEntfmUWsbBrOETmJdprJa07GXgqImbwSzYJKDfLv5jnAYITJz2LSD4/w47-h215-no/sprite-clean.png) no-repeat}
.skitter-clean .prev_button{background-position:0 0;width:47px;height:46px}
.skitter-clean .next_button{background-position:0 -46px;width:47px;height:46px}
.skitter-clean .play_pause_button{background-position:0 -133px;width:41px;height:41px}
.skitter-clean .play_pause_button.play_button{background-position:0 -92px;width:41px;height:41px}
.skitter-clean .focus_button{background-position:0 -174px;width:41px;height:41px}
.skitter-clean .info_slide_dots .image_number{width:14px;height:14px;background:#999}
.skitter-clean .progressbar{top:5px;left:5px;background:#fff;box-shadow:rgba(0,0,0,0.5) 1px 1px 0}
.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/AVvXsEj2gWtF3vU4WDP-Wzom_PYgonzCNvcJHcL51JwDI38HgzqvYSJI1bjF0JSfoe_Hfx5Ykj0_wnnW61dDnGvCLNqCsKbltW1Ft9-lxyE6xYeb4_r66YgGmqqs2_sPq2VcVo8mjqKaGXSophw/w110-h165-no/sprite-square.png) no-repeat}
.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}
.skitter-square .play_pause_button.play_button{background-position:0 0;width:55px;height:55px}
.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}
.skitter-square .next_button{background-position:0 -55px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:10px}
.skitter-square .prev_button{background-position:0 -110px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:65px}
.skitter-square .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}
.skitter-square .info_slide_dots .image_number:hover{background:#999}
.skitter-square .info_slide_dots .image_number_select,.skitter-square .info_slide_dots .image_number_select:hover{background:#555}
.skitter-square .progressbar{top:0!important;left:0!important;width:100%;background:#fff;border-radius:0;height:2px}
.slideshow_skitter ul,.slideshow_skitter .image img{display:none}
.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}
.slideshow_skitter .info_slide .image_number:hover,.slideshow_skitter .info_slide_dots .image_number:hover{background:#000}
.skitter-minimalist .info_slide,.skitter-round .info_slide,.skitter-clean .info_slide,.skitter-square .info_slide{background:transparent}
.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}
.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}
.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}
.skitter-clean .info_slide .image_number:hover,.skitter-square .info_slide .image_number:hover{background:#ccc}
.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}
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/slideshow.skitter.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow_skitter_large').skitter({
theme: 'square',
numbers_align: 'center',
progressbar: true, 
dots: true, 
preview: true
});
});
</script>

<div class="slideshow_skitter slideshow_skitter_large">
<ul>
<li><a href="http://mas-andes.blogspot.com"><img class="cube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYo1MPF27527qaRqqawfNlK_0nZfaGxTu6sCGEFvi4GhmiDNZo0wNBFvFfN-PO3SvIuBSVm5vE0Bl3zCWHLC8WYT9ndRZuxHK-708N2T2kLlwogp3_CW2J6OjfZm1eTJ5za3GpfsGxNUM/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="cubeRandom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFFA1rLqWmCeEZu3ZTfjBjV-QjgDHrB-8zamlhv8WJOUd3APCRbztiBW_kL25SVOvxlJ-GxZyfwjBL5DTsC8TnBhUZJF2QFAxTk1P8i4L-RhR-YHXtvRgexgHo851iaQp9I3f5YGo6rfk/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="block" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rGmrHWFygGl2kybjar3GRdGzUct-dYChCrTwoHufmsbEoQE9PQmIyWN6suMCaG3i4q9tK4gjtKKONsU9WL-DedvdzmTSOB04dkzyPph4q8rKZIdZQmPXYrKs3m2Z9zEPGgER8a8EbKA/w790-h286-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="cubeStop" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZEEgokS_-c01mq1NEwnqTIytvUv4HYQ7nbp_HC2Dl_o0LwW9np81CTch5hqazF6yA1HOB91aEthxrcz9BuZItItgP9nTWhl8aJBWhEv7uS-5AZ1O2UD2pq5KdIuWdTjwvBI7-A80DO4/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="cubeHide" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xI37S0iRFN1iH2QDDnVfv_W8w8zTnhuHFw7FxMK8DXS0JZ2Tp20z0o9r42ZDiDZxz_PxQmEPDZsTuO8kh0xNpYdzblQQd2bF5uqnw0Ed6-jivKxYaKzaoNtMNLxtJlgzHPdD64-Hq-4/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li>
</ul>
</div>

Keterangan:
- Ganti http://mas-andes.blogspot.com dan URL gambar.
- Untuk lebar slider silahkan ubah sesuai selera masing-masing.

Customisasi
Dari kode yang terdapat di atas, perhatikan teks yang berwarna biru. 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 square, clean, round, minimalist.

Sedangkan pada type efek animasi slider perhatikan teks yang berwarna merah 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: cube, cubeRandom, block, cubeStop, cubeStopRandom, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeSpread, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, hideProgressBar.

Untuk yang lain-lain misalkan ingin merubah warna,font, maupun letak elemen silahkan custom sendiri agar sesuai dengan template blog yang di gunakan.