PreviewUPDATE 04 DESEMBER 2013 [Perbaikan Layout, dll]
PreviewUPDATE 04 DESEMBER 2013 [Perbaikan Layout, dll]
DemoBerikut beberapa fitur dari template Darkforyou1. Valid HTML5 dan CSS3
UPDATE 04 DESEMBER 2013 [Perbaikan Layout, dll]Download
Cara Membuat Text Animations Dengan CSS – untuk mendesain sebuah blog memang erat kaitannya dengan style CSS karena paling tidak sebelum menerapkan ke dalam elemen tertentu pada blog terlebih dahulu wajib kita ketahui dasarnya dahulu agar lebih mudah nantinya pada waktu akan mendeklarasikan kedalam sebuah template. Pada tutorial ini akan saya bahas sedikit mengenai tata cara agar dapat membuat sebuah text animasi yang tidak luput menggunakan fungsi CSS untuk memaksimalkan maupun melengkapi dari apa yang sudah pernah di bahas pada artikel artikel sebelumnya dalam penggunaan CSS. Ini nanti bisa di kembangkan untuk melengkapi sedikit keperluan blog dimana tergantung dari keinginan untuk menerapkannya, misal ingin di gunakan untuk title blog pada tag header maupun lainnya. Agar lebih mudah, dibawah terdapat coding beserta demonya silahkan di lihat dan di pahami mungkin nanti dapat menjadi inspirasi untuk apa dan digunakan bagaimana dalam upaya penerapannya langkah memanipulasi template blog. Berikut tutorialnya Cara Membuat Text Animations Dengan CSS.Ini kode CSS untuk Membuat Text Animations
.textglow{ text-align:center; font-size:30px; color:#fff; animation:blur .75s ease-out infinite; text-shadow:0px 0px 5px #fff, 0px 0px 7px #fff; }
@keyframes blur{ from{ text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 50px #7B96B8, 0px 0px 150px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px 10px 100px #7B96B8, 0px -10px 100px #7B96B8, 0px -10px 100px #7B96B8;} }Ini kode HTML untuk Membuat Text Animations
<div class="textglow">
mas-andes.blogspot.com
</div>
Hasilnya seperti dibawah ini
Ini kode CSS untuk Membuat Text Animations
.textmetalic { text-align: center; font-size: 30px; color: transparent; letter-spacing: -3px;}
.textmetalic span { text-shadow: 0 0 2px rgba(204, 208, 212,0.9), 0 15px 25px rgba(0, 0, 0, 0.3), 0 -2px 3px rgba(0, 0, 0, 0.1), 0 -5px 10px rgba(255, 255, 255, 0.5), 0 5px 10px rgba(0, 0, 0, 0.3), 0 3px 4px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.45); animation: loading 1.2s ease-in-out infinite alternate; }
@keyframes loading { to { text-shadow: 0 0 2px rgba(204, 208, 212,0.2), 0 0 3px rgba(0, 0, 0, 0.02), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(255, 255, 255, 0), 0 0 0 rgba(255, 255, 255, 0);} }
.textmetalic span:nth-child(2) { animation-delay:0.2s; }
.textmetalic span:nth-child(3) { animation-delay:0.4s; }
.textmetalic span:nth-child(4) { animation-delay:0.6s; }
.textmetalic span:nth-child(5) { animation-delay:0.8s; }
.textmetalic span:nth-child(6) { animation-delay:1s; }
.textmetalic span:nth-child(7) { animation-delay:1.2s; }Ini kode HTML untuk Membuat Text Animations
<div class="textmetalic">
<span>m</span> <span>a</span> <span>s</span> <span>-</span> <span>a</span> <span>n</span> <span>d</span> <span>e</span> <span>s</span> <span>.</span> <span>b</span> <span>l</span> <span>o</span> <span>g</span> <span>s</span> <span>p</span> <span>o</span> <span>t</span> <span>.</span> <span>c</span> <span>o</span> <span>m</span>
</div>
Hasilnya seperti dibawah ini
Ini kode CSS untuk Membuat Text Animations
@yellow: #ebb221;
@shadow-for-yellow: #F35747;
@blue: #90f0d2;
@shadow-for-blue: #3988a6;
.textsway { color: #fff; font-size: 20px; width: 320px; margin: 10px auto; text-align: center; }
.bigger {
display: block; margin-bottom: .25em; font-size: 30px; color: @yellow; text-shadow: 1px 1px 0 fade(@shadow-for-yellow, 100%), 2px 2px 0 fade(@shadow-for-yellow, 90%), 3px 3px 0 fade(@shadow-for-yellow, 80%), 4px 4px 0 fade(@shadow-for-yellow, 70%), 5px 5px 0 fade(@shadow-for-yellow, 60%), 6px 6px 0 fade(@shadow-for-yellow, 50%), 7px 7px 0 fade(@shadow-for-yellow, 40%), 8px 8px 0 fade(@shadow-for-yellow, 30%), 9px 9px 0 fade(@shadow-for-yellow, 20%), 10px 10px 0 fade(@shadow-for-yellow, 10%); animation: jumptext 1s steps(8, start) infinite; transition: all .2s ease;
&:hover { animation: none; letter-spacing: normal; }
}
.regular { display: block; }
.regular + .regular { animation-delay: .5s; }
.buzz {
display: inline-block; text-shadow: 2px 0 0 fade(#fff, 30%), -2px 0 0 fade(#fff, 30%); animation: buzz .04s linear infinite alternate; transition: all .2s ease;
&:hover { animation: none; text-shadow: none; }
}
@keyframes jumptext {
0% { transform: rotate(-5deg); letter-spacing: normal; }
50% { transform: rotate(5deg); color: @blue; letter-spacing: 0.1em; text-shadow: 1px 1px 0 fade(@shadow-for-blue, 100%), 2px 2px 0 fade(@shadow-for-blue, 80%), 3px 3px 0 fade(@shadow-for-blue, 60%), 4px 4px 0 fade(@shadow-for-blue, 40%), 5px 5px 0 fade(@shadow-for-blue, 20%); }
100% { transform: rotate(-5deg); color: @yellow; letter-spacing: normal; }
}
@keyframes text-flasher {
0% { }
50% { text-shadow: 0 0 2px #000, 0 0 70px fade(#fff, 50%); }
60% { text-shadow: 0 0 2px #000, 0 0 10px fade(#fff, 50%); }
100% { text-shadow: 0 0 2px #000, 0 0 70px fade(#fff, 50%); }
}
@keyframes buzz {
0% { transform: translateX(-1px); }
100% { transform: translateX(1px); }
}
Ini kode HTML untuk Membuat Text Animations
<div class="textsway">
<span class="bigger">mas-andes.blogspot.com</span>
<span class="buzz">Portal Blogger Tutorial</span>
</div>
Hasilnya seperti dibawah ini
Ini kode CSS untuk Membuat Button Animations
@keyframes glow {
0% { box-shadow: 0 0 16px rgba(66, 140, 240, 0.5); border-color: rgba(0,0,255,0.5); }
100% { box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0); border-color: rgba(0,0,255,1.0); }
}
#animasibutton { width:100px; margin:10px auto; }
#animasibutton button { width: 100px; padding: 5px; background: #cde; border: 2px solid #ccc; border-color: rgba(0,0,255,0.5); font-size:18px; color: #000; text-shadow: rgba(20, 20, 20, 0.5) 1px 1px 5px; text-align: center; box-shadow: 0 0 16px rgba(66, 140, 240, 0.5); }
#animasibutton button:hover, #animasibutton button.hover_effect { background-color:#cce; animation-name: glow; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; }Ini kode HTML untuk Membuat Button Animations
<div class="animasibutton">
<button> Button </button>
</div>
Hasilnya seperti dibawah ini
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.</head><b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var thumbnail_mode = "yes" ;
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".3. Kemudian cari kode
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.
<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 == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </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.
<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.
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.
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.<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">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.
<a href="http://mas-andes.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEila5FdufV843OpN40XxIpkkRRCY6O4JkcrG1W3bf19JtoHsS5KvtJLYlL3MAGn41qvF3CCOTQ7A9hrXbdlIGB6K5GWZnLBQF-eHcA1FJdgZMFFzfogVXb4TuBohKTmz6Ii5SJzuDXCYJ4/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>
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.<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/AVvXsEjRw-Zaq1IA82SCLIOSvBbzNwbdoFHp-V-OYhZzg7banRAj437SUowPOjMC85Q1kcW0T3Bkd1JJwCWq4TS3HFGNzqDIYhPmPRfFO8TmXLMC-jgmspEvOmfm9elAcWQTtc-esAZsyorLKpDi/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/AVvXsEhS_ERWxok50v32cmVekQsG8_I-Mxy-oS4z8Y9-eR0eTMS9ltQq7OTeK89hbWYgkLR60NrFMaPcocBNZ_4t-s7VzuW-VCEEqZt26ibHNrWYAiO0Gr3dmTsc-gSMElXqzIToQkWKlVsD9ic/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/AVvXsEjGBvhT1XFOPUlhLCRjqOnEh7DmLWEzjy0xk_Eu7jNKARy4f3Vs8B9AltGBs8TYLh1fZmUtD9Kcu71o2IAQhRvnFS40xIpZTvefdMFOl5AsnPLFnV8gElDDNFHN5Nwl_G0f2w_oyjGuT9o/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/AVvXsEhhaluL7av_J5GIzrDhEuCHmPXFCKsoSEfIzCt49pvYf8I5V2Xcliswk1330XoMCgwwVpKSWDkrUyf5goSmAM15LLl99p18ysoSQze-OngV9YBatFMEbHQeSp8-qMRlKP0rQuSSkUS_g7k/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.
Memahami Konsep Redirect Halaman Blog – seperti yang kita tahu, bahwa sangat di sayangkan apabila kita mempunyai sebuah blog dan memiliki halaman yang sudah populer dan sudah di kenal oleh banyak orang namun halaman tersebut sudah tidak bisa di akses lagi atau halaman tidak ditemukan alias error. Blog berubah seiring waktu, karena tulisan pada halaman dapat kita tambahkan dan dapat juga kita hapus atau bisa juga terhapus baik itu secara di sengaja maupun tidak. Untuk menghindari hal tersebut, terlebih dahulu pada artikel ini saya akan membahas untuk menghindari kemungkinan hal-hal tersebut agar suatu saat apabila terjadi kesalahan pada halaman dapat kita custom sedemikian rupa hingga tidak terjadi error. Redirect adalah mengalihkan suatu URL halaman ke URL halaman yang lain pada sebuah web/blog, atau bisa di artikan mengarahkan pengunjung saat proses indexing dari halaman lama ke halaman yang baru. Jika sebagian masih ada yang kurang paham mengenai fungsi Redirect mari kita bahas sama-sama, mungkin hal ini suatu saat dapat di perlukan untuk mengarahkan pengunjung ke halaman baru.<head> dan </head><meta http-equiv="refresh" content="30"/>
Sedikit uraian dari kode diatas, content="30" fungsi angka tigapuluh disitu adalah menunjukan bahwa proses auto refresh akan dilakukan dalam waktu 30 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena dapat membuat pengunjung merasa kesal.Fungsi refresh selain untuk menyegarkan kembali halaman blog, masih terdapat fungsi lain yakni berfungsi untuk Redirect dari satu URL halaman ke URL halaman yang lain. Ini berfungsi jika ingin mengarahkan pengunjung web/blog ke alamat situs yang anda inginkan. Cara ini dugunakan untuk mengarahkan seluruh isi blog dari URL lama ke URL yang baru. Misalkan saja anda membuat blog baru sedangkan blog yang lama ingin di non-aktifkan, atau mungkin anda telah berganti domain TLD. Alangkah baiknya kita memakai fungsi refresh yang di setting secepat mungkin yakni waktu refresh di set menjadi 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di arahkan langsung ke alamat baru yang di inginkan. Untuk menggunakan fungsi Redirect ini caranya pasang kode berikut ini seperti langkah diatas.
<meta http-equiv="refresh" content="0; url=http://contoh.blogspot.com" />
Atau bisa juga menggunakan metode JavaScript redirect.
<script type="text/javascript">
window.location = "http://contoh.blogspot.com";
</script>
Kolom Dari: di isi sub link halaman lama, misal:Sedangkan pada Pesan Khusus untuk Laman Tidak Ditemukan adalah untuk membuat pesan secara khusus yang nantinya akan ditampilkan saat search engine gagal mengindeks sebuah halaman blog. Hal ini akan saya bahas pada artikel selanjutnya untuk cara mendesain pesan khusus pada halaman yang error menggunakan metode jQuery.
/2013/11/halaman-lama.html
Kolom Kepada: di isi sub link halaman baru, misal:
/2013/11/halaman-baru.html
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.<style type="text/css">Keterangan:
.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/AVvXsEixhhz6BS5LnhLni0V4jT7Wd6sH4ShXUKkHtWmMSewdMeQQR0rtlEeuG8SNumykDiM7aW284rdi-9unJFtpsblET_7oLrfTh1GCWjg-wsEv4NoFWbm0Vcd21fTRnEdc2oY1Q6EyvAScudU/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/AVvXsEghqwWKG_KvXu0hJL4DHBYZdCFT5SqutgerxS9mWzV6R_bQFiKF-LOHAMPDusSxL7qHACqfV4uX3y4lxz7yiicvPGE4yecWGQXYpNwUHwzLRT1jW1Ix_Vsg2dj2zBf-DtGhVujoEVdoI6Q/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/AVvXsEgYo6wGCgNUx-NET37QcD1Qh0TIDB0bk48YQ9kJpeM4IJ1tmzBKIkelBmbKJoI9ufZyLx16_IEDyIUkHlk8DtcLudrzGJXPNu9ZUD4yV2t4IuuPPILZIiLiS64KZ9GAKCwmivLtD99MYBs/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/AVvXsEg3bu6xmtA0gptrVy27RHCwVNoU3hAgAPiumra_OOC4O1rd4y94VRKguNV3JCpIBxIlg-q7cf7HZI3XGK_4jIakm6bNAOybqJWHATdq1KfpG1-Pgx4OHipp63CnktTSAhu7p5Y5GwSgW-E/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/AVvXsEguxqT-SA8b7JKNFzFsIWRyna_Al7e0qxvR9T99HFc0lIvkkq2JAlhuBHzX80FsNQFwKjqTfyWb7T-7lGqm_qIvp82CRRHd3atBaTTpH6M-YpSE3Dyqs2AQ-JeqBRTw3owXItgDiv7r1KE/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/AVvXsEgRQkUZ2J_gT6mA56EP-u269snXW1pvZ4UMBGQVbSFC3gK8XRN0UPJniVcIdhsv7B9HqbzOop7dJ28gytqIgoi5O5Z0vF1u4pwyTeFR49T1xkWqfY5QSTX6Qbdx7gHB1KndttSn_4pK6rQ/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/AVvXsEg00hTZ8DLs66jobzKbT9scD64u_sCxSb3AtvCmcezfngeV6HcROaA4qqWeAKe3BmW3uY9wGitqTyPQ7qn_1X3SE4hyphenhyphenHmdJLDCSDB4ZHGzH5a41KTPpe6rJWPIukAau1Q9O5E6yLmxVAgk/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/AVvXsEgJ0WK8PbRLfnUMJoEVGVLEZZB-iDKU4GR9k_aRKr3vVNZAX5mZ8p3zkWPiVH5b0sXIOYwwx5nD4IESxYFZX8ujVWx3Xq0glZNbnvqguosHP2gOK5hGZA0WhICh7mbKO0zokGEZAVFxOpw/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/AVvXsEh_7D9-p4KdJrAaP-ZJUmHVSqdHqA6U_NySdjvk_FO-sFRMNv3R4RqsoLsRAB1Isdyjb_N9tzMm1h7C8YmM1A4HzDnosWMuQyZ4RX1Uid8m8NWgAc2bluhZ9hucl43RhXTOvVu9bv7yZpY/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/AVvXsEgw8WLO-bFH86g3dVB6HOyBnUn-5eTSDzeqtc1ALiU_ZUtV6UiMo98FqMB3Jwo7fbEukKwen1toj2JAWMoFTWxl51TnrJ8SfQJaf6P4NNzN6w0WScOlomoGPNcghLMRpqzWckn79Uebu7A/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/AVvXsEiqWdd1gei66vdPRJ4vqedYi03lW1xmPNb5NFVcfRqXKZQoKaATYcYPRYpAi6a-yFxeOXsAbkZXsC9_slBUCtfGl5NBWnQD0ZpNqG39l8A8QfnF08rTsdDI0G7Tt1Vv-pxtlBo0VeS6S7w/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li>
</ul>
</div>
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.
Cara Memasang Skitter Slideshow di Blog – setelah beberapa waktu lalu sudah pernah membahas untuk Menambah Fitur jQuery Animasi Slider Pada Blog dengan efek transisi yang menarik, maka pada tutorial kali ini kembali akan membahas untuk menambah fitur slider pada blog dengan efek-efek yang tidak kalah menarik menggunakan plugin jQuery Skitter Slideshow. Sebelum membahas lebih jauh ke tutorial, saya sedikit akan menjelaskan mengenai plugin jQuery Skitter Slideshow. Skitter adalah plugin jQuery yang memungkinkan kita untuk mengkonversi menjadi slideshow dengan efek animasi transisi pada gambar. jQuery Skitter sangat memungkinkan kita untuk membuat slideshow dengan efek gambar yang menarik dan terdiri dari 22 efek transisi. Skitter Slideshow ini dapat menampilkan daftar slide sebagai angka atau thumbnail dan item dapat diakses dengan bantuan tombol prev dan next. Ada beberapa opsi yang ditawarkan untuk kustomisasi maksimum seperti: kecepatan (untuk partikel animasi), interval antara setiap slide atau menampilkan label on/off. Fitur lain yang bagus adalah kemampuan untuk menyebutkan jenis animasi untuk setiap slide sebagai nama class yang memungkinkan kita untuk menggunakan beberapa jenis animasi dalam satu slide. Untuk membuat slider ini terpasang ke dalam blog, berikut tutorial Cara Memasang Skitter Slideshow di Blog.<style type="text/css">Keterangan:
.skitter_slideshow {background:#111;padding:10px 10px 30px 10px;float:left;margin:auto; }
.skitter_slideshow img {width:850px; height:300px;}
.label_skitter {text-transform:uppercase;z-index:150;position:absolute;bottom:0px;left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5T3XyRGtsSQeOoRLnxSjkIZXxNF7JHYNN5HWOq4WLI3EFfMYeMQfUtekOADcTFlmj8trlw2OFRcsjXaR44Dg1uZXPpdwc5xtVFWmMpDN2wbGGp72muuIYVHfuwvAy1zQNU3Oxvy2qIMc/h120/back-box-label-black.png) repeat-x left top;color:#fff;display:none;border-top:1px solid #000;}
.label_skitter p {padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px;}
.info_slide * {font-family:Consolas,arial,tahoma !important;}
.slideshow_skitter {position:relative;width:850px;height:300px;}
.slideshow_skitter ul {display:none;}
.slideshow_skitter .container_skitter {overflow:hidden;position:relative;}
.slideshow_skitter .image {overflow:hidden;}
.slideshow_skitter .image img {display:none;}
.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:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNdqmGXipdAM8B5KDi66tDBALLHNidZqWsLpXCLNVb9V68kEZOwjtv4K1gz5gXj6vJqZsTjV1EtdvXiOImZDBFA071SAzi1vCm147gjfpuYDYPvjDRgkm1s84wOjQc57kBMxPLclWRv_k/h120/prev.png) no-repeat left top;}
.slideshow_skitter .next_button {position:absolute;top:50%;right:0px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhekYCC0MOCYY9ja8I2GrlhCOGewUhk9XE4akb1YsHT1EFa-RyQpNOCV887Q3lhM4MPme9eNOg8rVe2I8mQz4WzSiNEe7YOR7D1EZ_Uds2WxYIDnovMbktHVYTo6vLxScon62gnzWzLE/h120/next.png) no-repeat left top;}
.slideshow_skitter .info_slide {position:absolute;bottom:-27px;left:40px;z-index:100;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;}
.slideshow_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;}
.slideshow_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;}
.slideshow_skitter .container_thumbs {position:relative;overflow:hidden;height:50px;}
.slideshow_skitter .info_slide_thumb {-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}
.slideshow_skitter .info_slide_thumb .image_number {overflow:hidden;width:70px;height:40px;position:relative;}
.slideshow_skitter .info_slide_thumb .image_number img {position:absolute;top:-50px;left:-50px}
.slideshow_skitter .slideshow_scroll_thumbs {padding:0 10px;}
.slideshow_skitter .slideshow_scroll_thumbs .scroll_thumbs {position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}
.slideshow_skitter .info_slide_dots {position:absolute;bottom:-40px;z-index:100;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.slideshow_skitter .info_slide_dots .image_number {background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
.slideshow_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;}
.slideshow_skitter .label_skitter {z-index:150;position:absolute;bottom:0px;left:0px;display:none;}
.loading {position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixhhz6BS5LnhLni0V4jT7Wd6sH4ShXUKkHtWmMSewdMeQQR0rtlEeuG8SNumykDiM7aW284rdi-9unJFtpsblET_7oLrfTh1GCWjg-wsEv4NoFWbm0Vcd21fTRnEdc2oY1Q6EyvAScudU/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}
.slideshow_skitter_large {width:850px;height:300px;}
.slideshow_skitter_small {width:200px;height:200px;}
</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.skitter.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {};
if (document.location.search) {
var array = document.location.search.split('=');
var param = array[0].replace('?', '');
var value = array[1];
if (param == 'animation') {
options.animation = value;
}
else if (param == 'type_navigation') {
options[value] = true;
if (value == 'dots') $('.skitter_slideshow').css({'margin': 'auto'});
}
}
$('.slideshow_skitter_large').skitter(options);
});
</script>
<div class="skitter_slideshow">
<div class="slideshow_skitter slideshow_skitter_large">
<ul>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg00hTZ8DLs66jobzKbT9scD64u_sCxSb3AtvCmcezfngeV6HcROaA4qqWeAKe3BmW3uY9wGitqTyPQ7qn_1X3SE4hyphenhyphenHmdJLDCSDB4ZHGzH5a41KTPpe6rJWPIukAau1Q9O5E6yLmxVAgk/w600-h300-no/" class="cube" 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 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ0WK8PbRLfnUMJoEVGVLEZZB-iDKU4GR9k_aRKr3vVNZAX5mZ8p3zkWPiVH5b0sXIOYwwx5nD4IESxYFZX8ujVWx3Xq0glZNbnvqguosHP2gOK5hGZA0WhICh7mbKO0zokGEZAVFxOpw/w600-h300-no/" class="cubeRandom" 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 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_7D9-p4KdJrAaP-ZJUmHVSqdHqA6U_NySdjvk_FO-sFRMNv3R4RqsoLsRAB1Isdyjb_N9tzMm1h7C8YmM1A4HzDnosWMuQyZ4RX1Uid8m8NWgAc2bluhZ9hucl43RhXTOvVu9bv7yZpY/w790-h286-no/" class="block" 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 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw8WLO-bFH86g3dVB6HOyBnUn-5eTSDzeqtc1ALiU_ZUtV6UiMo98FqMB3Jwo7fbEukKwen1toj2JAWMoFTWxl51TnrJ8SfQJaf6P4NNzN6w0WScOlomoGPNcghLMRpqzWckn79Uebu7A/w463-h240-no/" class="cubeStop" 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 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWdd1gei66vdPRJ4vqedYi03lW1xmPNb5NFVcfRqXKZQoKaATYcYPRYpAi6a-yFxeOXsAbkZXsC9_slBUCtfGl5NBWnQD0ZpNqG39l8A8QfnF08rTsdDI0G7Tt1Vv-pxtlBo0VeS6S7w/w463-h240-no/" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZO84kowefmz8Qf6c39vNiRSA_JZMvC8Tln5eUajtH1JoYvKR0D9vmovoZW8zU3uHYz-PHnc3W3I3Xgkf8WUfecTaucvhIrkxw6O32AmdsX0OpAvlS2V0ta40HLn86dX6jfe2SRsxkrU/w463-h240-no/" class="cubeSize" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube size</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvJcRoIaHwGWHPZYJBVmmBhogexuvDU_BSgxPX6aamQDPPwZuCUjt6T-mvR3z6e0m31A1bv7BBJnEZX_XqhH_HlMYWH1tTpDdJuJESXcLlYBQ0QylssnoHZxVw9BupoPhmuiYalrNFSH0/w500-h300-no/" class="horizontal" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek horisontal</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs2OnrogaBVA_q5gKkkRYatY2qfNznVRPkWEhH8PIhxfw0Pv1d7cce7zHZCFJ30EaWKPQr91vsw1X5GWf5al4cLGE1V3QzT1whD2BF90rwO4OPxyzwMrfwTvSS1ilMN7fMh5YsQWg08Cs/w852-h284-no/" class="showBars" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbars</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Y7B-BVoJF2tFz8lG-zq8nw5QEIq6GgWDEGT4624ayI22HO85Fa7U4IBGB8q3gf5UH7JFvBOS36XLjNwDgs4tDC-i3Pt2crTzE1z2bzbpYnA2jVytLw92LXFUzgKT1NRGnwN8PbM6L5Q/w500-h300-no/" class="showBarsRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbarsrandom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPth2RDx_OzVDQ-7LIap2jjJMu8Ilg6A5vvU200S8tD9iYZlOoUcR9c7mYQDqkcooVA5-z9Bd3E1qSw_qQaZSTXd28sabD814LP5rl6RupCVjmLfIEOTB1duZFWtT2ir4sj0Wrkj4tdY/w758-h438-no/widget-contact-form-blogger.jpg" class="tube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek tube</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV1nY-jmV10-G-h9Oo2lk-cbwwCYqeXMYTekNMAZA75RzmIX_14UKJJlREE7LfDRaXLsJdamHrKTpoTFobjmIci-j-Ofm-hfa9hnysfCcwGcFQcfzrcQ8DvJwW8j6ZMUmyNsp6inSaogs/w500-h300-no/" class="fade" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fade</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2zzMf_fJtVVsZOk8o_0ciOh5DdHlNGqTmY1Wjox07sSZiRDZQ_CxbPBvPL8wY65Vj7Ym40fqZmk6iR_EHr44ZBmZNdyWnkKJKk8mHMkFpmvkEJ6g9-lYcVMuB9cPhni4ioD72-hJ8JYA/w600-h300-no/form-email-subscribe-blogger.png" class="fadeFour" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fadefour</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheystoN9RRsepg4bZui-iWfO00dqkps8lxa1zJynmLml_sLpB_QAHsrYU2OxfCsoaQqrekNhzKzif0QnWnp1qyTg9zc1AdLLVfkt4KVd77diUBCknNfhm1wVL8RFF2Zpw6hvTNgjwGL0E/w985-h533-no/widget-contact-form-official-blogger.jpg" class="paralell" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek paralell</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkgpphS8-_gZbOR7rEezZmdQxH39dfp32NZghmHSD2pskA0dlPnL_-VESVh3-oCoUjfTdeAVZggC4iSZWvZ1qEjc4H-VAu0qjFQ_a3xMIVGCvrny81aXT5Mo-Hp2nuPSLcQMEtWCicQI0/w540-h180-no/Pop-Up-Widget-Google%252B-Follower-for-blogger.png" class="blind" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blind</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-64EhGAzVVSxQZfDVKRBMd1eVYYRve0_add3qUyUgXAdnKYkoHO-w7DSklYiFpEVipU0c7VsuP-b14lY1fjCqO1SwlgWO1l7DnCiixlINgqKvL9Gz188WH07JlEoAAPrDLPkrOar4MBI/w353-h243-no/Pop-Up-Widget-Google%252B-Follower-2.png" class="blindHeight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindheight</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiybQaoE2Olil3fLgU-1rTvWWkcl0Bic0NCU0r4lIA9wthN44MBQId7ZMhOKZZS2aJ5qibHmBHfPNsaKlKuW93ynM9QJ9ARRve0O1ms3DN9A183pbKzDoWumxEXA19p6Qdw9VzH-wii6Qk/w540-h180-no/modifikasi-email-subscribe.jpg" class="blindWidth" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindwidth</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgPjw2rHyKo41nW1rVuw0o4a3sLC67HrgNninlINnVQz_pD6EJspg62RzaSQfrlsyHzw2ABxm9ms5TPXt8D8nxzutEAiDRHotUuPauyvtyqYCXOJdvlfirDbYv7t7kPPVoyTfvc0OwVo/w540-h179-no/modifikasi-facebook-like-box.jpg" class="directionTop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionTop</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqF8oTs8wum9v7fOp7ze7hn0u1yfK-jxzM6o-MwA6B1pbHKPWq3Pt0hSYoDp-k20mX4Ed2gC0jAfFZZb_QvGhV1Vf9WpCesRyB5Uln4EbXniQYI5uoZq4lTKgPqME3AEJHE603nOar95U/w540-h179-no/modifikasi-widget-google%252B.jpg" class="directionBottom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionBottom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYB-2-n1fxgGCWpKnLHBdR-vYhnpjYmFC8lXhQ4nlyFUfYAkaxWc_X9TpM-IATdX2G02pFr4Swl6GD2T511LuPVfdD-nZM2Up2p4X4vPZp54jDXzaj6TATohQeJBz7knS21KbBYmcDXDk/w500-h300-no/" class="directionRight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionRight</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdl9kd8UjVtyqxcp77-mL6DR4_Q06CKKxPXQbPnJhEjmeADhWnqO22ASY7EDiBSGiLAm1X4Zwo39htqIwTfRoEPwooQJFYR0iejWwDas9kAh6Tt78jKZlJDFX3R5z9qldHq6EOFTReB4o/w400-h274-no/flod-image-hover.jpg" class="directionLeft" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionLeft</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEV168VjLCivvhlQBJ5kk5SqZbUiXmdEdYlNkRhgdN9nVAnMUWGr8bGdl6gwrHdKzEqnYoOnXoLYjrMqY2QYR1MMnSPNiP-BeQFbQzuwc_3yZMphC08nP552cw-a2m0NCy7GEhG0yOi0M/w725-h459-no/widget-sidebar-ribbon.jpg" class="cubeStopRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeStopRandom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiORk_h-MhYiqph8-4Nja0OR0OHce-T6EY1uv1Vepre5SVl-4wQfDCsgdhpx63kOnFw0I9TmqTMd2UvfGiwHrNeFmtsnkOd3XRFONJVNbQsgRP7CRr_c_LOAdYkKIX78H6dn2pW-PbtvhI/w587-h344-no/sidebar-ribbon.2.jpg" class="cubeSpread" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeSpread</p></div></li>
</ul>
</div>
</div>