Contoh Blog

Pengertian SEO dan Fungsinya bagi Blog

SEO adalah singkatan dari Search Engine Optimization atau Pengoptimalan Mesin Pencari/Mesin Telusur.

Menurut Danny Sullivan, istilah Search Engine Optimization pertama kali digunakan p26 Juli 1997 oleh sebuah pesan spam yang diposting di Usenet. Pada masa itu, algoritma mesin pencari belum terlalu kompleks sehingga mudah dimanipulasi.

Versi awal algoritma pencarian didasarkan sepenuhnya pada informasi yang disediakan oleh webmaster melalui meta tag pada kode html situs web mereka.

Meta tag menyediakan informasi tentang konten yang terkandung pada suatu halaman web dengan serangkaian kata kunci (keywords).

Melalui SEO, kita dapat meningkatkan ranking situs blog di Mesin Pencari.

Menurut Panduan SEO Google, SEO adalah proses untuk membuat situs atau bog menjadi lebih baik bagi mesin telusur atau mesin pencari.

Mesin pencari adalah situs-situs pencarian informasi di internet yang biasa digunakan pengguna internet (user) dan sudah terpasang di komputernya, seperti Google, Bing, dan Yahoo.

Melalui situs berupa mesin pencari itulah umumnya pembaca datang berkunjung dan membaca blog kita. Google dkk itu melacak keberadaan situs blog dengan kata kunci (keyword) tertentu.

Misalnya, Anda mengetikkan kata kunci CB Blogger di Google, maka hasilnya bisa anda lihat pada gambar di bawah ini.

Dari gambar di atas, yang dicari adalah CB Blogger, namun yang muncul nomor satu dan seterusnya adalah blog www.contohblog.com. Kok? Iya, karena CB Blogger tidak lain adalah ADMIN blog tersebut.

Makanya, blog ini, CB Blogger, dibuat untuk "bersaing" dengan "blog induk" itu.

Kembali ke pengertian SEO. Di atas adalah "definisi SEO". Pengertian praktisnya, SEO adalah usaha atau proses agar blog kita mudah dan cepat diindeks oleh mesin pencari.

Fungsi SEO bagi Blog

Fungsi SEO adalah itu tadi.... agar blog kita mudah dan cepat diindeks oleh mesin pencari. Pembaca mayoritas membuka sebuah situs web atau blog melalui mesin pencari.

Anda mencari "cara membuat blog" 'kan di Google juga toh? Lalu banyak sekali blog yang menyajikan cara ngeblog tersebut 'kan?

Dasar-Dasar SEO Blog

SEO yang paling mendasar ada dua, menurut Google dalam Panduan MemulaiPengoptimalan Mesin Telusur;

Submit URL - Mendaftarkan blog ke mesin pencari.
Submit Sitemap - Mendaftarkan peta situs atu isi blog ke mesin pencari.

Menurut Creating Website Makolis, dasar-dasar SEO adalah sebagai berikut:

1. Pemasangan Keyword di Judul Blog

Sebelum membuat blog, pastikan Anda sudah memikirkan keyword atau kata kunci sehingga Anda lebih leluasa untuk menguasai keyword di Search Engine.

Usahakan untuk memilih keyword yang paling sedikit kompetitor dan selain itu banyak menarik pengunjung, Anda bisa memikirkan sendiri.

Jika sudah ketemu dengan keyword Anda, pasangkan di Judul, semisal blog Anda mempunyai keyword kecantikan, maka Anda bisa memakai judul 'Tips Kecantikan Wanita' atau yang lain.

2. Pemasangan Keyword di Meta Tag

Jika Anda sudah selesai membuat Blog, pastikan Anda memasang Meta Tag seperti Meta Description dan Meta Keyword.

Untuk Meta Keyword, sisipkan kode berikut di bawah kode <head> pada template Anda :

<meta content='keyword1, keyword2, keyword3, dll' name='keywords'/>

Dan untuk Meta Description, sisipkan kode berikut di bawah Meta Keyword tadi :

<meta content='Deskripsi Blog Tentang Keyword disini' name='description'/>

3. Memasang Keyword Pada Posting

Pemasangan beberapa keyword pada posting juga sangat diperlukan. Dengan hal ini, membantu Google untuk mengindeks halaman posting Anda. Dan jangan lupa untuk memasang keyword pada awal posting, di antara 1-250 kata pertama dalam posting harus ada keywordnya

4. Menggunakan Text Highlights: Model Italic, Blod, dan Underline

Gunakan model italic, bold dan underline setiap ada kata yang dianggap penting, biasanya keyword

Gunakan Template SEO Friendly

Biasanya Anda melupakan hal ini, Anda justru memilih template yang banyak mengandung pesan error di dalamnya. Nah, dengan demikian hati-hati dalam memilih template untuk Blog Anda jika ingin terus dimanjakan oleh Google.

5. Gunakan Template Fast Loading: Ringan

Jika ingin ramah di Search Engine dan menghasilkan visitor yang banyak dari Search Engine, usahakan ukuran template blog Anda tidak lebih dari 100 Kb.

Jika blog Anda berat, pasti visitor tidak akan betah di blog Anda dan ingin cepat-cepat keluar dari Blog Anda.

Pilih Template Blog SEO & Fast Loading di Galeri Template.

Demikian ulasan ringkas mengenai Pengertian SEO dan Fungsinya bagi Blog. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Membuat Tabel di Posting Blogger

Cara Membuat Tabel di Posting Blogger.

TABEL kadang diperlukan dalam posting blog. Namun, cara menyisipkan atau membuat tabel dalam postingan blog cukup rumit, terutama bagi pemula.

Intinya, semua template blogger bisa dipasangi tabel. Kode template blogger dipastikan semuanya ada kode tabel seperti table, tr, th, td untuk mengatur tampilan tabel dalam postingan.

Berikut ini contoh tabel dalam postingan beserta cara memasangnya, seperti dishare Blog Know How.

CB ambil contoh tabel yang paling bagus ini. Ini kodenya:

<style type="text/css">.nobrtable br { display: none } tr {text-align: left;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style>
<div class="nobrtable">
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF; border-collapse:collapse;" width="100%" cellpadding="10" cellspacing="0">
<tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;text-align: left;">
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr class="alt">
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</table>

Ini hasilnya:


Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

Cara Membuat Tabel di Posting Blogger

1. Saat membuat posting, klik mode HTML
2. Copas kode di atas dan ubah isinya (Table Header, Tabel Cell)
3. Publish.

Contoh Tabel Klasemen Liga Inggris

Posisi	Nama Tim	Poin
1	Chelsea	15
2	Liverpool	15
3	Manchester City	13

Contoh Tabel Lainnya

Judul Table 1	Judul Table 2	Judul Table 3
Isi Table 1 Kolom2	Isi Table 2 Kolom2	Isi Table 3 Kolom2
Isi Table 1 Kolom3	Isi Table 2 Kolom3	Isi Table 3 Kolom3

Demikian Cara Membuat Tabel di Posting Blogger. Good Luck! (www.contohblog.com).*

Daftar Situs Web Sahabat Blogger untuk Perbaikan SEO dan Desain

Daftar Situs Web Sahabat Blogger untuk Perbaikan SEO dan Desain.

BAGI sebagian blogger, ngeblog (blogging) bukan sekadar membuat konten, membuat postingaan, atau menulis artikel, tapi juga utak-atik atau edit tampilan blog (desain template).

Selain desain, banyak blogger juga terus berjuang melakukan Pengoptimalan Mesin Telusur atau SEO (Search Engine Optimization).

Kadang, bahkan sering, waktu juga tenaga dan pikiran terkuras ngurusi SEO dan Desain, sehingga update postingan terabaikan.

Di kalangan klien Layanan Premium CB bahkan ada blogger yang perfectionist. Ada titik saja atau ada elemen yang miring dikit aja langsung ingin diperbaiki. Untungnya, sang blogger itu tidak pelit. Biarin deh rewel, tapi berani bayar :)

Daftar Situs Web Sahabat Blogger untuk Perbaikan SEO dan Desain.

Berikut ini daftar situs web yang menjadi sahabat blogger untuk memperbai SEO dan Desain blognya. Kita mulai dari fasilitas yang disediakan Google/Blogger.

1. Google Webmaster Tools

Halaman ini wajib digunakan agar blog mudah dan cepat terindeks Google. Google Search Console ini adalah layanan gratis yang ditawarkan oleh Google untuk membantu Anda memantau dan mempertahankan keberadaan situs di hasil Google Penelusuran.

Anda tidak perlu mendaftar untuk Search Console agar situs Anda disertakan di hasil penelusuran Google. Namun, mendaftar di Search Console dapat membantu Anda memahami cara Google melihat situs dan mengoptimalkan performanya dalam hasil penelusuran.

Baca: Cara Submit Sitemap Blog

2. Mobile-Friendly Test.

Website untuk Pengujian Situs Mobile-Friendly. Halaman milik Google ini untuk melakukan pengecekan blog apakah sudah ramah seluler (mobile-friendly) atau belum.

Kata Google, blog atau website saat ini semakin sering diakses melalui perangkat seluler atau HP. Merancang situs web agar mobile-friendlyakan membuat halaman berfungsi dengan baik di semua perangkat yang digunakan pengguna atau pengunjung blog.

Pastikan blog Anda sudah mobile-friendly. Baca: Cara Pasang Template Blog yang Benar.

Selain laman milik Google di atas, kita juga bisa gunakan laman Troy Labs Daum untuk melihat tampilan blog di berbagai ukuran layar Smartphone, termasuk Tablet.

3. Structured Data Testing Tool

Laman khusus yang disediakan Google untuk mengecek structured data markup dan rich snippet, termasuk microformats dan schema.org marked up di microdata.

Baca: Cara Pasang Schema Org Structured Data di Blog.

4. Page Speed Insight

Laman khusus Google untuk mengecek kecepatan loading blog atau website. Sulit mencapai skor sempurna 100%. Skor speed 60-70 sudah bagus. Usahakan skor jangan sampai di bawah 60.

Selain PageSpeed Insights, para blogger juga biasa menggunakan GT Metrix untuk mengecek kecepatan loading blog dan melihat saran perbaikannya.

5. Image Optimizer

Halaman ini berguna untuk mengedit gambar/foto sehingga menghasilkan ukuran gambar yang ringan namun jelas (tidak blur).

Baca: Cara Upload Gambar yang Benar untuk Posting Blog.

6. Minify CSS Online

Salah satu cara agar loading blog menjadi ringan dan cepat adalah dengan mengkompres kode CSS dalam template. Kita bisa gunakan laman ini untuk mengecilkan ukuran file CSS sekaligus merapikannya.

7. SEO Centro

Laman ini untuk mengecek meta tags blog kita, apakah sudah memenuhi standar atau tidak. Minimal, template blog harus berisi Meta Title & Meta Description.

Nah, itu dia 7 Situs Web Sahabat Blogger untuk Perbaikan SEO dan Desain. Tujuh saja sudah berasa banyak. Apalagi kalau lebih. Jadi blogger sukses, memang butuk perjuangan, ketekunan, dan kesabaran.

Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Memasang Featured Post Image Slider untuk Blogger

Cara Memasang Featured Post Image Slider untuk Blogger

Membuat Featured Post Image Slider untuk Blogger. Posting unggulan ditampilkan di halaman depan dengan desain khusus yang menarik dan keren. Berikut ini SS-nya:

KODE JAVASCRIPT
Simpan di bawah ]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
jQuery.easing['jswing']=jQuery.easing['swing'];jQuery.extend(jQuery.easing,{def:'easeOutQuad',swing:function(x,t,b,c,d){return jQuery.easing[jQuery.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+ b;},easeOutQuad:function(x,t,b,c,d){return-c*(t/=d)*(t-2)+ b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t+ b;return-c/2*((--t)*(t-2)- 1)+ b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+ b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+ 1)+ b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t+ b;return c/2*((t-=2)*t*t+ 2)+ b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+ b;},easeOutQuart:function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t- 1)+ b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t+ b;return-c/2*((t-=2)*t*t*t- 2)+ b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+ b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+ 1)+ b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t*t+ b;return c/2*((t-=2)*t*t*t*t+ 2)+ b;},easeInSine:function(x,t,b,c,d){return-c*Math.cos(t/d*(Math.PI/2))+ c+ b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+ b;},easeInOutSine:function(x,t,b,c,d){return-c/2*(Math.cos(Math.PI*t/d)- 1)+ b;},easeInExpo:function(x,t,b,c,d){return(t==0)?b:c*Math.pow(2,10*(t/d- 1))+ b;},easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+ 1)+ b;},easeInOutExpo:function(x,t,b,c,d){if(t==0)return b;if(t==d)return b+c;if((t/=d/2)<1)return c/2*Math.pow(2,10*(t- 1))+ b;return c/2*(-Math.pow(2,-10*--t)+ 2)+ b;},easeInCirc:function(x,t,b,c,d){return-c*(Math.sqrt(1-(t/=d)*t)- 1)+ b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+ b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1)return-c/2*(Math.sqrt(1- t*t)- 1)+ b;return c/2*(Math.sqrt(1-(t-=2)*t)+ 1)+ b;},easeInElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+ b;},easeOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+ c+ b;},easeInOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+ b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+ c+ b;},easeInBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*(t/=d)*t*((s+1)*t- s)+ b;},easeOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+ s)+ 1)+ b;},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t- s))+ b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+ s)+ 2)+ b;},easeInBounce:function(x,t,b,c,d){return c- jQuery.easing.easeOutBounce(x,d-t,0,c,d)+ b;},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+ b;}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+ b;}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+ b;}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+ b;}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+ b;return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+ c*.5+ b;}});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener )
for ( var i=types.length; i; )
this.addEventListener( types[--i], handler, false );
else
this.onmousewheel = handler;
},
teardown: function() {
if ( this.removeEventListener )
for ( var i=types.length; i; )
this.removeEventListener( types[--i], handler, false );
else
this.onmousewheel = null;
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});

function handler(event) {
var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
event = $.event.fix(event || window.event);
event.type = "mousewheel";
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
// Add events and delta to the front of the arguments
args.unshift(event, delta);
return $.event.handle.apply(this, args);
}
})(jQuery);
/**
* @version $Id: $Revision
* @package jquery
* @subpackage lofslidernews
* @copyright Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
* @website http://landofcoder.com
* @license This plugin is dual-licensed under the GNU General Public License and the MIT License
*/
// JavaScript Document
(function($) {
$.fn.lofJSidernews = function( settings ) {
return this.each(function() {
// get instance of the lofSiderNew.
new $.lofSidernews( this, settings );
});
}
$.lofSidernews = function( obj, settings ){
this.settings = {
direction : '',
mainItemSelector : 'li',
navInnerSelector : 'ul',
navSelector : 'li' ,
navigatorEvent : 'click',
wapperSelector: '.slider-main-wapper',
interval : 4000,
auto : true, // whether to automatic play the slideshow
maxItemDisplay : 4,
startItem : 0,
navPosition : 'vertical',
navigatorHeight : 75,
navigatorWidth : 100,
duration : 600,
navItemsSelector : '.slider-navigator li',
navOuterSelector : '.slider-navigator-outer' ,
isPreloaded : true,
easing : 'easeOutBounce'
}
$.extend( this.settings, settings ||{} );
this.nextNo = null;
this.previousNo = null;
this.maxWidth = this.settings.mainWidth || 600;
this.wrapper = $( obj ).find( this.settings.wapperSelector );
this.slides = this.wrapper.find( this.settings.mainItemSelector );
if( !this.wrapper.length || !this.slides.length ) return ;
// set width of wapper
if( this.settings.maxItemDisplay > this.slides.length ){
this.settings.maxItemDisplay = this.slides.length;
}
this.currentNo = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );
this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
if( this.settings.navPosition == 'horizontal' ){
this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
this.navigatorOuter.height( this.settings.navigatorHeight );
} else {
this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );
this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
this.navigatorOuter.width( this.settings.navigatorWidth );
}
this.navigratorStep = this.__getPositionMode( this.settings.navPosition );
this.directionMode = this.__getDirectionMode();

if( this.settings.direction == 'opacity') {
this.wrapper.addClass( 'slider-opacity' );
$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
} else {
this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
}

if( this.settings.isPreloaded ) {
this.preLoadImage( this.onComplete );
} else {
this.onComplete();
}
}
$.lofSidernews.fn = $.lofSidernews.prototype;
$.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend;
$.lofSidernews.fn.extend({
startUp:function( obj, wrapper ) {
seft = this;
this.navigatorItems.each( function(index, item ){
$(item).click( function(){
seft.jumping( index, true );
seft.setNavActive( index, item );
} );
$(item).css( {'height': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth} );
})
this.registerWheelHandler( this.navigatorOuter, this );
this.setNavActive(this.currentNo );
if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
this.registerButtonsControl( 'click', this.settings.buttons, this );
}
if( this.settings.auto )
this.play( this.settings.interval,'next', true );
return this;
},
onComplete:function(){
setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( );
},
preLoadImage:function( callback ){
var self = this;
var images = this.wrapper.find( 'img' );
var count = 0;
images.each( function(index,image){
if( !image.complete ){
image.onload =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
image.onerror =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
}else {
count++;
if( count >= images.length ){
self.onComplete();
}
}
} );
},
navivationAnimate:function( currentIndex ) {
if (currentIndex <= this.settings.startItem
|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
if (this.settings.startItem < 0) this.settings.startItem = 0;
if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
}
}
this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),
{duration:500, easing:'easeInOutQuad'} );
},
setNavActive:function( index, item ){
if( (this.navigatorItems) ){
this.navigatorItems.removeClass( 'active' );
$(this.navigatorItems.get(index)).addClass( 'active' );
this.navivationAnimate( this.currentNo );
}
},
__getPositionMode:function( position ){
if( position == 'horizontal' ){
return ['left', this.settings.navigatorWidth];
}
return ['top', this.settings.navigatorHeight];
},
__getDirectionMode:function(){
switch( this.settings.direction ){
case 'opacity': this.maxSize=0; return ['opacity','opacity'];
default: this.maxSize=this.maxWidth; return ['left','width'];
}
},
registerWheelHandler:function( element, obj ){
element.bind('mousewheel', function(event, delta ) {
var dir = delta > 0 ? 'Up' : 'Down',
vel = Math.abs(delta);
if( delta > 0 ){
obj.previous( true );
} else {
obj.next( true );
}
return false;
});
},
registerButtonsControl:function( eventHandler, objects, self ){
for( var action in objects ){
switch (action.toString() ){
case 'next':
objects[action].click( function() { self.next( true) } );
break;
case 'previous':
objects[action].click( function() { self.previous( true) } );
break;
}
}
return this;
},
onProcessing:function( manual, start, end ){
this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
this.nextNo = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);
return this;
},
finishFx:function( manual ){
if( manual ) this.stop();
if( manual && this.settings.auto ){
this.play( this.settings.interval,'next', true );
}
this.setNavActive( this.currentNo );
},
getObjectDirection:function( start, end ){
return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");
},
fxStart:function( index, obj, currentObj ){
if( this.settings.direction == 'opacity' ) {
$(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
$(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
}else {
this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
}
return this;
},
jumping:function( no, manual ){
this.stop();
if( this.currentNo == no ) return;
var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
this.onProcessing( null, manual, 0, this.maxSize )
.fxStart( no, obj, this )
.finishFx( manual );
this.currentNo = no;
},
next:function( manual , item){
this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);
this.onProcessing( item, manual, 0, this.maxSize )
.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
.finishFx( manual );
},
previous:function( manual, item ){
this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
this.onProcessing( item, manual )
.fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
.finishFx( manual );
},
play:function( delay, direction, wait ){
this.stop();
if(!wait){ this[direction](false); }
var self = this;
this.isRun = setTimeout(function() { self[direction](true); }, delay);
},
stop:function(){
if (this.isRun == null) return;
clearTimeout(this.isRun);
this.isRun = null;
}
})
})(jQuery)
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();
imgr[0]="http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg=true;
aBold=true;
summaryPost=150;
summaryPost1=20;
summaryTitle=15;
numposts=6;
numposts1=6;
numposts2=3;
numposts3=6;
numposts4=5;
numposts5=12;
function removeHtmlTag(strx,chop){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)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts2(json){
j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;
img=new Array();
if(numposts1<=json.feed.entry.length){maxpost=numposts4}else{maxpost=json.feed.entry.length}for(var i=0;
i<maxpost;i++){var entry=json.feed.entry[i];
var posttitle=entry.title.$t;
var pcm;
var posturl;
if(i==json.feed.entry.length)break;
for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;
break}
}
for(var k=0;
k<entry.link.length;
k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];
break}}
if("content"in entry){var postcontent=entry.content.$t}
else
if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";
postdate=entry.published.$t;
if(j>imgr.length-1)j=0;img[i]="";
s=postcontent;
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!="")){if(i==0){img[i]='<img width="295" height="180" class="alignone" src="'+d+'"/>'}else{img[i]='<img class="alignright" height="70" src="'+d+'" width="70"/>'}}var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day=postdate.split("-")[2].substring(0,2);
var m=postdate.split("-")[1];
var y=postdate.split("-")[0];
for(var u2=0;u2<month.length;
u2++){if(parseInt(m)==month[u2]){m=month2[u2];
break}}var daystr=day+' '+m+' '+y;
if(i==0){var trtd='<div class="mastoras_wide left"><div class="thumb"><a href="'+posturl+'">'+img[i]+'</a></div><div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div><span class="featuredPostMeta"><a href="'+posturl+'"></a></span></div></div><div class="mastoras_narrow right">';
document.write(trtd)}if((i>0)&&(i<maxpost)){var trtd='<div class="mastoras_narrow"><div class="thumb"><a href="'+posturl+'">'+img[i]+'</a></div><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div>'+removeHtmlTag(postcontent,summaryPost1)+'...<div class="clear"></div></div>';
document.write(trtd)}j++}document.write('</div>')}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p></h3></li>';
document.write(trtd);

j++;
}
}

function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li><div><img class="alignnone" src="'+img[i]+'"/></div></li>';
document.write(trtd);

j++;
}
}
function showrecentposts4(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = m+ ' ' + day + ' ' + y ;
var trtd = '<a href="'+posturl+'"><span>» </span>'+posttitle+'</a>';
document.write(trtd);

j++;
}
}
function showrecentposts7(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts3; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; 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!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li><a title=" '+posttitle+' " href="'+posturl+'"><img width="90" height="70" title=" '+posttitle+' " class=" " src="'+img[i]+'"/></a></li>';
document.write(trtd);

j++;
}
}
//]]>
</script>

KODE HTML
Simpan di bawah kode <div id='main-wrapper'> atau <div class='main-outer'>

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.url == data:blog.homepageUrl'><div class='lof-main-wapper' id='slider'><div class='slider-main-outer'><ul class='slider-main-wapper'><script>document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script></ul></div><div class='slider-navigator-outer'><ul class='slider-navigator'><script>document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");</script></ul></div></div><script type='text/javascript'>jQuery(document).ready(function($){
$('#slider').lofJSidernews({ interval:6000, duration:800, mainWidth:600, navigatorWidth:100, maxItemDisplay:4, easing:'easeOutBounce', auto:true, isPreloaded: true });});
</script></b:if></b:if>

KODE CSS
Simpan di atas kode ]></b:skin>

#slider{border: 15px solid #1F1C1B;background: #808080;float:left;padding:0;margin:0 0 15px 0;position:relative;overflow:hidden;width:600px;height:300px;}.slider-main-outer{position:relative;height:100%;width:600px;z-index:3;overflow:hidden}ul.slider-main-wapper li h3{z-index:10;position:absolute;top:-20px;left:0;height:100%;width:180px;background:#1F1C1B;opacity:0.7;filter:alpha(opacity = 70);padding:10px;}ul.slider-main-wapper li h3 p{color:#fff;font:12px Arial;line-height:16px;padding-top:10px;display:block;margin:0}ul.slider-main-wapper li h3 a{color:#fff;font:17px Arial;font-weight:700;line-height:20px;margin:0}ul.slider-main-wapper li .imgauto{width:600px;height:300px;overflow:hidden;margin:0;padding:0}ul.slider-main-wapper{height:300px;width:600px;position:absolute;overflow:hidden;margin:0;padding:0}ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:600px;float:left;margin:0;padding:0}.slider-opacity li{position:absolute;top:0;left:0;float:inherit}ul.slider-main-wapper li img{list-style:none;width:600px;height:auto;padding:0}ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}.slider-navigator-outer{position:absolute;right:0;top:0;z-index:10;height:auto;width:100px;overflow:hidden;color:#333}.slider-navigator li div{background:#423836;height:100%;position:relative;margin:0;padding-right:5px;}.slider-navigator li:hover div{background:#336CA6;opacity:0.7;filter:alpha(opacity = 70);}.slider-navigator li img{border:#666 solid 1px;border-top:1px solid #000;border-left:1px solid #000;height:63px;width:88px;float:left;margin:5px 5px 0;padding:0}.slider-navigator li.active img{border:#000 solid 1px}

Sumber

Featuted Post ala CB Blogger
Featured Post Image Slider untuk Blogger yang digunakan CB Blogger.

CSS & JAVASCRIPT
Simpan di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.layout-content{position:relative;overflow:hidden;padding:0;margin:0 auto}
.bungkus-related{padding:0;margin:0;position:relative}
ul.bungkus-related li.content:after{content:no-close-quote;position:absolute;left:0;bottom:0;width:100%;height:150px;background:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACXCAYAAADUKjHXAAAABHNCSVQICAgIfAhkiAAAAC1JREFUKJFjYIACRibyCSbyuGgsYiXwixErSzuCeXAopiJBejiTHquUJCTSCAApNwIpR17mugAAAABJRU5ErkJggg==) repeat-x;opacity:.5;background-size:100% 100%;overflow:hidden}
ul.bungkus-related .random-grup{float:right;width:48%;height:100%;background:#222;padding:12px;box-sizing:border-box;position:relative;overflow-y:hidden;max-height:381px}
.random-thub {width: 320px;height: 200px;}
ul.bungkus-related .content .tulisan{position:relative;left:0;bottom:0;width:100%;padding:15px;z-index:2;box-sizing:border-box;font-size:17px;color:#fff;line-height:1.3em}
ul.bungkus-related .content .tulisan a{color:white;font-weight:700;opacity:0.9}
ul.bungkus-related .content .tulisan a:hover {color:#ff6}
ul.bungkus-related .content .tulisan .random-desk{font-size:12px;display:none;}
ul.bungkus-related .content .post-tag{position:absolute;top:15px;left:15px;background-color:#299680;color:#fff;font-weight:400;z-index:2;height:22px;line-height:22px;padding:0 8px;font-size:12px}
ul.bungkus-related .content .post-tag a{color:white}
ul.bungkus-related .content .post-tag a:nth-child(n+2),ul.bungkus-related .random-grup .content .post-tag{display:none}
ul.bungkus-related .random-grup .content{display:block;width:100%;float:right;margin:0 0 5px;padding:0 0 5px;border-bottom:1px solid #333;height:auto;position:relative}
ul.bungkus-related .random-grup li.content:after{content:none}
ul.bungkus-related .random-grup .content .gambar img{width:100%;height:100%;display:table-cell;vertical-align:middle;overflow:hidden}
ul.bungkus-related .content .gambar img{width:100%;height:auto;max-height:200px}
ul.bungkus-related .content{float:left;width:50%;box-sizing:border-box;overflow:hidden;position:relative;height:100%;margin:0;}
#random-post-container{width:100%;position:relative;background:#222;padding:0;max-height:280px;height:100%;border-radius:3px;overflow:hidden;margin:0 auto;margin:10px 0;}
ul.bungkus-related .random-grup{float:right;width:48%;height:auto;background:#222;padding:5px 0;box-sizing:border-box;position:relative;overflow-y:hidden;}
ul.bungkus-related .random-grup .content .gambar{width:25%;height:50px;position:absolute;overflow:hidden;left:5px;top:5px;bottom:5px;margin:auto;}
ul.bungkus-related .random-grup .content .tulisan{display:table-cell;padding-right:5px;position:relative;float:right;margin:0;padding-top:5px;font-size:13px;width:75%;}
ul.bungkus-related .random-grup .content .random-desk{font-size:10px;display:none;}
@media screen and (max-width:500px){#random-post-container{overflow:auto}ul.bungkus-related .content{width:100%;float:none}
ul.bungkus-related .content .gambar img{height:100%}ul.bungkus-related .random-grup{width:100%;float:none;overflow:hidden!important}}
</style>
<script type='text/javascript'>
//<![CDATA[
// Feed configuration
var homePage = 'https://www.contohblog.com/', //ganti dengan alamat blog Anda
maxResults = 5, //Ganti angka 5 lima untuk mengatur jumlah artikel yang akan ditampilkan
summaryLength = 45, //
noImageUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAIAAADajyQQAAAAA3NCSVQICAjb4U/gAAAAbUlEQVRoge3PAQ0AIRDAsOeNn3VUEDLSKtjWzHwv+m8HnGKsxliNsRpjNcZqjNUYqzFWY6zGWI2xGmM1xmqM1RirMVZjrMZYjbEaYzXGaozVGKsxVmOsxliNsRpjNcZqjNUYqzFWY6zGWI2xmg0/igINB8FclAAAAABJRU5ErkJggg==',
containerId = 'random-post-container';
function getRandomInt(t, e) {
return Math.floor(Math.random() * (e - t + 1)) + t
}
function shuffleArray(t) {
var e, a, s = t.length;
if (0 === s) return ! 1;
for (; --s;) e = Math.floor(Math.random() * (s + 1)),
a = t[s],
t[s] = t[e],
t[e] = a;
return t
}
function createRandomPostsStartIndex(t) {
var e = getRandomInt(1, t.feed.openSearch$totalResults.$t - maxResults);
window.console && window.console.log && console.log("Get the post feed start from " + e + " until " + (e + maxResults)),
add_script(homePage + "/feeds/posts/summary/-/Featured?alt=json-in-script&orderby=updated&start-index=" + e + "&max-results=" + maxResults + "&callback=randomPosts")
}
function randomPosts(t) {
for (var e, a, s, n = document.getElementById(containerId), r = shuffleArray(t.feed.entry), l = "<ul class='bungkus-related'>", o = 0, i = r.length; i > o; o++) {
a = "summary" in r[o] ? r[o].summary.$t.replace(/<.*?>/g, "").substring(0, summaryLength) + "…": "",
s = "media$thumbnail" in r[o] ? r[o].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s600") : noImageUrl;
for (var d = 0, m = r[o].link.length; m > d; d++) e = "alternate" == r[o].link[d].rel ? r[o].link[d].href: "#";
l += "<li class='content'>",
l += '<div class="gambar" ><img class="random-thub" src="' + s + '" title="' + r[o].title.$t + '" alt="' + r[o].title.$t + '" width="72" height="72"></div>',
l += '<div class="tulisan"><a title="' + r[o].title.$t + '" class="random-title" href="' + e + '">' + r[o].title.$t + "</a><br>",
l += '<span class="random-desk">' + a + "</span></div>",
window.onload = function () {
for (var t = $("#random-post-container ul li"), e = 1; e < t.length; e += 4) h = e + 1,
t.slice(e, e + 4).wrapAll("<div id='grup" + h + "' class='random-grup'></div>")
},
l += "<small class='post-tag'>";
for (var c = r[o].category, u = [], h = 0, g = c.length; g > h; ++h) u.push('<a title="' + c[h].term + '" href="' + homePage + "/search/label/" + encodeURIComponent(c[h].term) + '?max-results=5" rel="tag">' + c[h].term + "</a>");
l += u.join(" "),
l += "</small>",
l += '<span class="clear"></span></li>'
}
n.innerHTML = l + "</ul>"
}
function add_script(t) {
var e = document.createElement("script");
e.src = t,
document.getElementsByTagName("head")[0].appendChild(e)
}
add_script(homePage + "/feeds/posts/summary/-/Featured?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex");
//]]>
</script>
</b:if>

HTML:
Simpan di bawah kode <div id='main-wrapper'> atau <div class='main-outer'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='layout-content'>
<div id='random-post-container'>Memuat</div>
</div>
</b:if>

Save! Simpan Template.

Demikian Featured Post Image Slider untuk Blogger. Good Luck and Happy Blogging! (www.contohblog.com).*

Cara Mengatasi Teks & Gambar Postingan Blog yang Melebar

Cara Mengatasi Teks & Gambar Postingan Blog yang Melebar

Teks & Gambar Postingan Blog mestinya pas dengan lebar area postingan di halaman dalam (blog post). Jika melebar, harus diatasi dengan kode tertentu agar teks dan gambar pas dengan ukuran lebar yang tersedia.

Cara Mengatasi Teks & Gambar Postingan Blog yang Melebar

Cara mengatasi teks & gambar yang melebar di postingan sangat mudah, sebagai berikut:

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

.post,.post-body {overflow: hidden;word-wrap: break-word;}
.post-body img {overflow:hidden;width;auto;max-width;100%;height:auto}

3. Save!

Demikian Cara Mengatasi Teks & Gambar Postingan Blog yang Melebar. Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber

Cara Pasang Kode Sharethis - Tombol Berbagi Sosial di Bawah Posting Blog

Cara memasang kode Sharethis -- Tombol Berbagi Sosial di Bawah Posting Blog -- cukup mudah. Tombol berbagi ke media sosial ini lengkap, mulai share ke Facebook, Twitter, hingga WhatsApp (WA).

Penampakannya seperti ini:

Cara Pasang Kode Sharethis - Tombol Berbagi Sosial di Bawah Posting Blog

1. Tema > Edit HTML
2. Copas kode CSS berikut ini di atas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style>
.sharex {font-size: 18px; color: #333; font-weight: 700; line-height: 2.4; padding: 10px 0; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;margin:0 20px;}
.sharethis-inline-share-buttons, .st-inline-share-buttons, .st-center st-animated {display: inline-block!important;margin-left:10px;}
</style>
</b:if>

3. Copas kode HTML berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

<b:if cond='data:blog.pageType == "item"'>
<div class='sharex'>
SHARE <div class='sharethis-inline-share-buttons'/>
</div>
</b:if>

4. Copas kode JavasScript Sharethis berikut ini di atas kode </body>

<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#property=59ecdd94899d1d001141cf32&product=inline-share-buttons"></script>
</b:if>

5. Save! Simpan Template.

Selesai. Demikian Cara Pasang Kode Sharethis - Tombol Berbagi Sosial di Bawah Posting Blog. Good Luck & Happy Blogging! (www.contohblog.com).*

Template Blog SEO Friendly Responsive untuk Galeri Foto, Video, dan Toko Online

Template Blog Responsive untuk Galeri Foto, Video, dan Toko Online

Template Blog SEO Friendly Responsive untuk Galeri Foto, Video, dan Toko Online

Berikut ini koleksi Template Blog SEO Friendly, Fast Loading, dan Responsive (Mobile-Friendly) khusus untuk blog Galeri Foto, Video, dan Toko Online.

Blog Foto --dikenal dengan sebutan Phlog atau Photograph Logging adalah blog berisi foto atau gambar. Foto apa saja yang menarik dan berguna bagi pengunjung.

Blog Video (Vlog, Video Logging) adalah blog khusus berisi video.

Vlog lagi ngetrend seiring makin populernya konten video di internet. Youtube yang berisi video bahkan menjadi mesin pencari kedua setelah Google, sang pemiliknya.

Blog Toko Online (Online Store, eCommerce) juga lagi populer, seiring populernya Usaha Rintisan Digital (Startup). Anda juga bisa membuat startup dengan blogger, menggunakan salah satu template toko online di bawha ini.

CB Blog Foto - Photo Gallery Responsive Blogger Template

Template Blog Responsive untuk Galeri Foto, Video, dan Toko Online

Link Live Demo & Download Gratis:

DEMO | DOWNLOAD

Template Blogger VIDEO SEO Friendly

Vlog atau Video Blogger lagi TREND. Gunakan template blog ini agar blog video Anda mudah dan cepat terindeks Google dan banyak pengunjung.

DEMO | ORDER

Template Blog Toko Online SEO Friendly

CB Simple Store

DEMO | ORDER

CB Online Store

DEMO | ORDER

CB Grid - Tema Blogger untuk Blog Foto & Toko Online

DEMO | ORDER

Template ini cocok buat blog galeri foto atau gambar, juga Toko Online dan Galeri Video. Silakan cek demonya, download, dan coba.

Template Blog Responsive untuk Galeri Foto, Video, dan Toko Online versi Premium, silakan cek demonya, dan order.

Good Luck & Happy Blogging! (http://www.contohblog.com).*

Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar

Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar

Kotak Pencarian Expanding Search Bar adalah kotak pencarian yang biasa dipasang di bagian kanan navigasi menu blog sejajar dengan menu-manu lainnya. Disebut expanding karena hanya tampil berupa icon search dan area pencarian baru muncul ketika icon itu diklik.

DEMO

Kotak Pencarian merupakan elemen wajib ada di blog atau website Anda, agar blog menjadi ramah pengguna (user friendly). Gaya atau desain kotak pencarian lainnya ada di Desain Kotak Pencarian.

Cara Memasang Kotak Pencarian Expanding Search Bar

1. Tema > Edit HTML
2. Cops kode CSS berikut ini di atas kode ]]></b:skin>

#search_box{width:300px;position:relative;height:40px;float:right;}
#search_box #search{float:right;top:0;right:50px;position:absolute;border:1px solid #d9e0e2;border-right:0;display:none}
#search_box #search #search_text{color:#888;width:250px;padding:10px;font-size:16px;border:0 none;height:49px;margin-right:0;outline:none;background:#fff;float:left;box-sizing:border-box;transition:all .15s}
#search_box #search #search_text:focus{background:#efefef}
#search_box .search_button{float:right;color:#222;height:50px;width:50px;text-align:center;line-height:45px;display:inline-block;cursor:pointer;font-size: 20px;}
#search_box .search_button.active,#search_box .search_button:hover{background:#00aa9f;color:#fff}

Anda bisa mengatur lebar dan tingginya di kode width & height untuk menyesuaikan dengan lebar dan tinggi navigasi menu blog Anda.

3. Copas kode HTML expanding search bar berikut ini di dalam kode HTML navigasi menu Anda, sebelum kode </ul> </nav>

<div id='search_box'><form action='/search' id='search' method='get'>
<input class='search_text' id='search_text' name='q' onblur='if (this.value == '') {this.value = 'Press Enter to Submit';}' onfocus='if (this.value == 'Search...') {this.value = '';}' type='text' value='Search...'/></form><div class='search_button'><i class='fa fa-search'/></div></div>

4. Pasang kode JavaScript expanding search bar berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
!function(){$(".search_button").on("click",function(t){t.preventDefault(),$("#search").animate({width:"toggle"}).focus(),$(".search_button").toggleClass("active")})}()
//]]>
</script>

5. Pastikan di template blog Anda sudah terpasang link ke kode jQuery seperti ini:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Jia belum ada, copas kode tersebut di atas kode </head>

6. Save!

Selesai.

CARA & KODE LAIN

Cara memasaing kotak pencarian expanding lainnya sebagai berikut:

1. Tema > Edit HTML
2. Simpan kode berikut ini di atas kode ]]></b:skin>

.sb-icon-search{background-color:#138be6;transition:all .4s ease-in-out;z-index:90}
.sb-icon-search,.sb-search-submit{cursor:pointer;display:block;margin:0;padding:0;position:absolute;text-align:center;top:0}
.sb-icon-search:before{color:#fff;content:"\f002";font-family:FontAwesome;font-size:18px;font-style:normal;font-weight:400;text-align:center}
.sb-icon-search:hover{background-color:#2c4584;transition:all .4s ease-in-out}
.sb-search{overflow:hidden;position:absolute;top:0;transition:width .3s;width:0}
.sb-search.sb-search-open{width:100%}
.sb-search-input{background-color:#2c4584;border:none;color:fff!important;font-family:arial;font-size:18px;height:60px;margin:0;outline:none;position:absolute;top:0;width:100%;z-index:90}
.sb-search-input::-webkit-input-placeholder{color:#fff}
::-moz-placeholder{color:#fff}
:-moz-placeholder{color:#fff}
:-ms-input-placeholder{color:#fff}
input[type=search].sb-search-input{color:#fff}
input[type='text'].sb-search-input{color:#f1f1f1}
.sb-icon-search{border-right:0 solid #111}
.sb-icon-search,.sb-search-submit{right:0}
.sb-search{right:0;top:0}
.sb-search-input{padding-left:10px;right:0}
.sb-search{min-width:55px;height:60px;}
.sb-icon-search:before{line-height:55px;}
.sb-icon-search,.sb-search-submit{width:55px;height:60px;line-height:55px}

3. Copas kode berokut ini di atas kode </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
(function(e){"use strict";function t(){var t=false;(function(e){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(e)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(e.substr(0,4)))t=true})(navigator.userAgent||navigator.vendor||e.opera);return t}function n(e,t){this.el=e;this.inputEl=e.querySelector("form > input.sb-search-input");this._initEvents()}!e.addEventListener&&e.Element&&function(){function e(e,t){Window.prototype[e]=HTMLDocument.prototype[e]=Element.prototype[e]=t}var t=[];e("addEventListener",function(e,n){var r=this;t.unshift({__listener:function(e){e.currentTarget=r;e.pageX=e.clientX+document.documentElement.scrollLeft;e.pageY=e.clientY+document.documentElement.scrollTop;e.preventDefault=function(){e.returnValue=false};e.relatedTarget=e.fromElement||null;e.stopPropagation=function(){e.cancelBubble=true};e.relatedTarget=e.fromElement||null;e.target=e.srcElement||r;e.timeStamp=+(new Date);n.call(r,e)},listener:n,target:r,type:e});this.attachEvent("on"+e,t[0].__listener)});e("removeEventListener",function(e,n){for(var r=0,i=t.length;r<i;++r){if(t[r].target==this&&t[r].type==e&&t[r].listener==n){return this.detachEvent("on"+e,t.splice(r,1)[0].__listener)}}});e("dispatchEvent",function(e){try{return this.fireEvent("on"+e.type,e)}catch(n){for(var r=0,i=t.length;r<i;++r){if(t[r].target==this&&t[r].type==e.type){t[r].call(this,e)}}}})}();!String.prototype.trim&&(String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g,"")});n.prototype={_initEvents:function(){var e=this,t=function(t){t.stopPropagation();e.inputEl.value=e.inputEl.value.trim();if(!classie.has(e.el,"sb-search-open")){t.preventDefault();e.open()}else if(classie.has(e.el,"sb-search-open")&&/^\s*$/.test(e.inputEl.value)){t.preventDefault();e.close()}};this.el.addEventListener("click",t);this.el.addEventListener("touchstart",t);this.inputEl.addEventListener("click",function(e){e.stopPropagation()});this.inputEl.addEventListener("touchstart",function(e){e.stopPropagation()})},open:function(){var e=this;classie.add(this.el,"sb-search-open");if(!t()){this.inputEl.focus()}var n=function(t){e.close();this.removeEventListener("click",n);this.removeEventListener("touchstart",n)};document.addEventListener("click",n);document.addEventListener("touchstart",n)},close:function(){this.inputEl.blur();classie.remove(this.el,"sb-search-open")}};e.UISearch=n})(window);(function(e){"use strict";function t(e){return new RegExp("(^|\\s+)"+e+"(\\s+|$)")}function s(e,t){var s=n(e,t)?i:r;s(e,t)}var n,r,i;if("classList"in document.documentElement){n=function(e,t){return e.classList.contains(t)};r=function(e,t){e.classList.add(t)};i=function(e,t){e.classList.remove(t)}}else{n=function(e,n){return t(n).test(e.className)};r=function(e,t){if(!n(e,t)){e.className=e.className+" "+t}};i=function(e,n){e.className=e.className.replace(t(n)," ")}}var o={hasClass:n,addClass:r,removeClass:i,toggleClass:s,has:n,add:r,remove:i,toggle:s};if(typeof define==="function"&&define.amd){define(o)}else{e.classie=o}})(window)
//]]>
</script>

4. Pemasang Search Boxnya kode HTML navigasi menu Anda, sebelum kode </ul> </nav>

<div class='sb-search' id='sb-search'>
<form action='/search'>
<input class='sb-search-input' id='search' name='q' placeholder='Enter your search term...' type='text' value=''/>
<input class='sb-search-submit' type='submit' value=''/>
<span class='sb-icon-search'/>
</form>
</div>
<script>
new UISearch( document.getElementById( 'sb-search' ) );
</script>

5. Save! Simpan tempate. Selesai.

Untuk Fullscreen Search Box bisa terapkan tips dari W3School.

Demikian Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar. Good Luck & Happy Blogging! (www.contohblog.com).*

Sumber

CB Grid - Template Blog Responsive SEO Friendly untuk Semua Niche

CB Grid ini bisa dibilang multipurpose Multipurpose Blogger Theme. Responsive - Mobile Friendly dan SEO Friendly, template blog terbaru ini bisa digunakan untuk blog pribadi, blog foto (Phlog), blog video (Vlog), blog toko online (Online Store), bahkan bisa juga buat blog berita.

Desainnya kekinian, mengikuti trending desain website, selain sederhana (simple), bersih (clean), dan fast loading (ringan). Ini penampakan. Demo dan link order ada di bawahnya.

CB Grid - Template Blog Responsve SEO Friendly untuk Semua Niche

Hanya Rp150.000,-

DEMO | ORDER

Cek Juga :

CB BLOG FOTO

Pengalaman Beli Keyboard Laptop via Go-Shop Gojek

Keyboard Laptop rusak. Coba perbaiki, malah makin parah. Terpaksa deh beli keyboard baru. CB buka online shop elektronik. Googling dengan kata kunci keyboard laptop acer 4749Z. Banyak di Lazada, Bukalapak, Tokopedia, dan online store lainnya.

CB coba cari "Laptop Bandung". Susah nemu online store laptop Bandung yang berupa website sendiri. Banyakan di bukalapak, olx, lazada, dan sejenisnya.

Biar cepat, CB harus beli langsung. Tapi males keluar rumah.

CB pun coba gunakan aplikasi Go-Jek. Pilih Go-Shop. Di panduan, CB baca dulu "Saya ingin membeli barang atau makanan yang tidak terdaftar".

Jika ingin membeli barang atau makanan yang tidak terdaftar di Go-Mart, Go-Food, atau Go-Shop, kita dapat menggunakan layanan Go-Shop dengan jarak pengantaran maksimal 30 km.

Berikut ini cara melakukan pemesanan Go-Shop

Pada beranda aplikasi GO-JEK, pilih GO-SHOP

Tentukan lokasi pembelian produk/barang

Pengalaman Beli Keyboard Laptop via Go-Shop Gojek

Tentukan lokasi tujuan pengantaran

Pilih 'Lanjut' untuk melanjutkan pemesanan

Pengalaman Beli Keyboard Laptop via Go-Shop Gojek

Tuliskan deskripsi barang yang akan dibeli.
Tuliskan estimasi harga barang.

Anda tidak dapat mengubah perkiraan harga yang telah Anda isi setelah melakukan pemesanan. Silakan Anda langsung menghubungi Driver untuk melakukan konfirmasi harga.

Pilih 'Pesan' untuk melanjutkan pemesanan

Pengalaman Beli Keyboard Laptop via Go-Shop Gojek

Periksa kembali harga yang harus dibayar dan lokasi tujuan pengantaran, lalu tentukan jenis pembayaran.

Pilih 'Pesan' jika semua informasi sudah tepat

Pengalaman Beli Keyboard Laptop via Go-Shop Gojek

Apabila Anda sudah mendapatkan Driver, Anda dapat melihat lokasi Driver dan juga dapat menghubunginya melalui chat di aplikasi ataupun telepon.

Begitu panduan di laman resmi Go-Jek.

CB pun melakukan order keyboard laptop. Lokasi pembelian produk di Istana BEC. Lokasi pengantaran ke rumah. Estimasi harga saya isi Rp120.000 karena di Lazada saya lihat harganya di kisaran Rp115.000, bahkan ada harga 45-75 ribuan di OL Shop lain.

Begitu selesai order di Go-Shop, tak menunggu lama, ada Driver Go-Jek yang menerima order CB. Sang driver pun telpon saya untuk konformasi. Ok, sang driver pun membelikan keyboard laptop pesanan saya.

Ternyata..... harganya Rp280.000, mentok di 250.000. Kok beda jauh dengan harga di OL Shop? Beda ternyata. Yo wis. Deal, 250.000, plus biaya Go-Shop 38.000.

Mengapa Barang Dijual Online Lebih Murah? Menurut sumber, harga barang yang dijual online dapat ditekan karena banyak biaya distribusi dan penjualan yang bisa ditekan.

Barang-barang yang masuk ke department store itu mahal karena mereka konsinyasi dengan department store. Belum lagi bayar biaya ekspedisinya (pengiriman), gaji SPG (sales promotion girl), kantor dan sebagainya, sehingga dari modal barang perkaliannya bisa 4-5 kali lipat.

Berbeda dengan jual online yang tidak membutuhkan biaya-biaya semacam itu. Maka, perkaliannya pun lebih kecil daripada harga jual di toko.

Demikian Pengalaman Beli Keyboard Laptop via Go-Shop Gojek. Untuk cara bongkar pasang keyboard laptop, banyak sekali tutorialnya di Youtube. Buka aja Youtube dan cari "cara bongkar pasang keboard laptop". Happy Blogging! (www.contohblog.com).*

Contoh Blog

IndexBlogging

IndexTips SEO

Pengertian SEO dan Fungsinya bagi Blog

Fungsi SEO bagi Blog

Dasar-Dasar SEO Blog

Cara Membuat Tabel di Posting Blogger

Cara Membuat Tabel di Posting Blogger

Daftar Situs Web Sahabat Blogger untuk Perbaikan SEO dan Desain

Daftar Situs Web Sahabat Blogger untuk Perbaikan SEO dan Desain.

Cara Memasang Featured Post Image Slider untuk Blogger

Cara Mengatasi Teks & Gambar Postingan Blog yang Melebar

Cara Mengatasi Teks & Gambar Postingan Blog yang Melebar

Cara Pasang Kode Sharethis - Tombol Berbagi Sosial di Bawah Posting Blog

Template Blog SEO Friendly Responsive untuk Galeri Foto, Video, dan Toko Online

CB Blog Foto - Photo Gallery Responsive Blogger Template

Template Blogger VIDEO SEO Friendly

Template Blog Toko Online SEO Friendly

Cara Memasang Kotak Pencarian Keren di Menu Blog - Expanding Search Bar

Cara Memasang Kotak Pencarian Expanding Search Bar

CB Grid - Template Blog Responsive SEO Friendly untuk Semua Niche

CB Grid - Template Blog Responsve SEO Friendly untuk Semua Niche

Pengalaman Beli Keyboard Laptop via Go-Shop Gojek

Contact Form