Latest Movie :
Recent Movies

Modifikasi Slider Lofslidernews Otomatis Maknyus

Tutorial membuat slider otomatis dari Lofslidernews. Slider ini buatan landofcoder.com, demo aslinya bisa dilihat disini. Abu Farhan, seorang master blogger Indonesia juga pernah membuat slider ini yang bekerja berdasarkan popular post, tapi kekurangannya jika gambar yang dipakai ukurannya kecil atau ukuran tingginya lebih besar, gambar pada slider seperti kegenjet dan kurang enak dilihat. Disini saya hanya memodifikasi agar gambar terlihat simetris meskipun ukuran tinggi lebih besar, tapi tetap harus menggunakan gambar dengan ukuran besar jika ingin hasil yang lebih bagus. Slider ini juga saya buat agar bisa menampilkan artikel terbaru juga per kategori atau label. 

Sekilas bentuk dari slider ini seperti slider yang ada pada template Sporty Magazine2 dari Borneo Templates. Banyak perbedaan mendasar dari kedua slider ini, disamping kode-kode pembentuk slider, Lofslidernews mampu menampilkan berapapun post yang ingin Anda tampilkan pada slider, karena gambar pagination kecil bergerak dinamis dari atas  kebawah kemudian kembali lagi keatas menggunakan efek Easing. Gerak dari gambar utama pada slider ini pun dari kanan ke kiri seperti pada Looped Slider yang akan saya bahas lain waktu.Untuk lebih jelasnya silahkan lihat demonya dibawah :

lofslidernews


Sebelum masuk ke tutorial membuat slider ini, saya mau kasih tau dulu kalau slider ini agak ribet dalam pengaturan panjang dan lebar image, baik yang besar maupun yang kecil (pagination). Juga slider ini lebih banyak menggunakan kode script, yang bagi blog prioritas SEO akan sangat merugikan. Tapi semua itu bisa diatasi dengan mengkompres dan meringkas kode-kode script pada slider di Google Code.

Oke, jika Anda berminat perhatikan baik-baik tutorial cara pemasangan slider ini sebagai berikut :
  1. Setelah masuk ke dashboard blogger, pilih blog yang akan dipasang slider ini.
  2. Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
  3. Di back up dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
  4. Pertama yang harus Anda lakukan adalah membuat satu buah kolom kosong diatas blog post, seperti gambar di bawah ini (jika pada template yang Anda pakai sudah terdapat satu kolom kosong seperti gambar dibawah, langkah ini tidak perlu dilakukan) :
    lofslidernews

    Caranya, letakkan kode berikut di atas kode ]]></b:skin>
    /* Slide Content
    ----------------------------------------------- */
    .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
    word-wrap: break-word; overflow: hidden;}
    .slide {color: #666666;line-height: 1.3em;}
    .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
    .slide li {margin:0;padding-top:0;
    padding-right:0;padding-bottom:.25em;
    padding-left:0px;text-indent:0px;line-height:1.3em;}
    .slide .widget {margin:0px 0px 6px 0px;}

    Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div id='slide-wrapper'>
    <b:section class='slide' id='slide' preferred='yes'/>
    </div>
    </b:if>
  5. Save template dulu, sekarang masuk ke Layout/Tata Letak, Anda cek apa sudah terpasang satu kolom di atas Blog Post? Jika sudah ada, masuk lagi ke Edit HTML. Kemudian masukkan kode berikut di atas kode ]]></b:skin> :
    /* Lofslidernews */
    #slider{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f6f6),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#f6f6f6 0,#e2e2e2 100%);
    border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;padding:10px;margin:4px;position:relative;overflow:hidden;width:600px;height:298px;}
    .slider-main-outer{position:relative;height:100%;width:400px;z-index:3;overflow:hidden}
    ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:385px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-iOyM5RHmApZRvlmiHaa81nMiW6jjLzkx-Cc42sNDBhtgv9HQZQCFP3rONBlL75tfR9rF3MkLckYq7pVVmF_aZ-OrcC-5F9YH3P-qd0PDgdKnXRBFc0MZwUQ3LifW-ZleXkU0xjtIeSXq/s1600/transparant.png);padding:10px}
    ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:block;margin:0}
    ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:0}
    ul.slider-main-wapper li .imgauto{width:405px;height:298px;overflow:hidden;margin:0;padding:0}
    ul.slider-main-wapper{height:298px;width:405px;position:absolute;overflow:hidden;margin:0;padding:0}
    ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:405px;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:405px;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:10px;top:10px;z-index:10;height:300px;width:200px;overflow:hidden;color:#333}
    .slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0}
    .slider-navigator li div{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#fff 0,#e2e2e2 100%)color:#444;text-shadow:1px 1px 1px #fff;height:56px;position:relative;margin:0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}
    .slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;border:1px solid #999}
    .slider-navigator li img{border:#ddd solid 1px;height:44px;width:60px;float:left;margin:5px 5px 5px 0}
    .slider-navigator li.active img{border:#eee solid 1px}
    .slider-navigator li.active h5{color:#0178d3}
    Perhatikan kode warna merah diatas, itu dalah ukuran panjang dan lebar slider, silahkan disesuaikan dengan ukuran pada template Anda. Pada demo yang saya gunakan panjang main-wrapper 630px tapi karena ada padding slider sebesar 10px, ukuran yang saya gunakan untuk slider hanya 600px.

  6. Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/>
    <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         : 5,
                startItem            : 0,
                navPosition            : 'vertical',
                navigatorHeight        : 60,
                navigatorWidth        : 210,
                duration            : 600,
                navItemsSelector    : '.slider-navigator li',
                navOuterSelector    : '.slider-navigator-outer' ,
                isPreloaded            : true,
                easing                : 'easeInOutQuad'
            }   
            $.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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAkP-xhl8cquX7i7kQuY6pwkzw5IRZ6Fmd35LwNUfNsi_CLy5tTL3j0Mu3GP8vOFxPBNCfXUh49jKERpjfyj8qsstOTDFNwWNEyyN1LK8nfdUxqveblOVn9dZ2KSK5kWCrTpEfs7nm4ZQ/s1600/no+image.jpg";
    showRandomImg = true;
    aBold = true;
    summaryPost = 70;
    summaryTitle = 20;

    numposts = 10;

    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 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 width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</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 width="60" height="44" class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5></div></li>';                   
            document.write(trtd);      
                   
                  j++;
        }
       
    }

     //]]>
    </script>
    Perhatikan kode script warna merah paling atas, jika pada template Anda sudah terpasang script itu seri berapapun, kode script itu tidak usah diikutkan. numposts:10; adalah jumlah post yang tampil pada slider
  7. Save templates lagi, pemasangan kode-kode di Edit HTML selesai. Sekarang Anda kembali ke Layout/Tata Letak. Masukkan kode di bawah ini ke dalam kolom kosong diatas Blog Post yang sudah Anda buat pertama kali, klik Add a Gadget >> HTML/Javascript :
    <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/-/misteri?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/-/misteri?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: 405,
            navigatorWidth: 200,
            maxItemDisplay:5,
            easing:'easeInOutQuad',
            auto:true,
            isPreloaded: false
        });
    });   
    </script>
    Keterangan :
    Tulisan warna merah (misteri) adalah label yang saya masukkan pada slider. Silahkan diganti dengan label yang ingin ditampilkan.
  8. Terakhir save, selesai.

Sumber
{[['']]}

3 Template Blogger Sakit Gigi

Johny Jogos


Jogos berasal dari bahasa Portugal yang berarti Games. Template ini saya buat atas permintaan teman blogger dari Brasil, sebenarnya dia sudah lama minta dibuatkan template blogger untuk mini games online, bahkan sebelum saya libur panjang 3 bulan kemarin mintanya. Karena kesibukan di dunia nyata, baru sekarang saya realisasikan, entah masih ingat apa nggak dianya.

template game


Slider

Untuk memasang slider, masukkan kode berikut ini pada kolom dibawah header yang panjang :
<div id='slider'>
<div id='loopedSlider'>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default/-/hot games?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<a class='previous' href='#'></a>
<a class='next' href='#'></a>
<ul class='pagination'>
<script>
document.write("<script src=\"/feeds/posts/default/-/hot games?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<script type='text/javascript'>
    $(function(){
        $('#loopedSlider').loopedSlider();
    });
</script>
</div>
</div>

Kode warna biru diatas adalah label yang saya masukkan pada slider, silahkan Anda ganti dengan label Anda, atau jika Anda ingin slider menampilkan postingan terbaru, hapus kode /-/hot games diatas.

Tab Widget Kategori

Untuk merubah judul tab (Adventur, Action, Bike Game dan sebagainya) cari kode berikut ini di Edit HTML :
Title1="Adventure";Title2="Action";Title3="Bike Game";Title4="Dress-Up";Title5="Strategy";Title6="Sport Game"
Setelah ketemu ganti tulisan warna biru diatas dengan judul yang ingin Anda tampilkan pada tab view widget kategori. Dan untuk mengisi widget tab view dengan label yang ingin Anda pasang disitu, cari kode berikut pada Edit HTML (jangan lupa centang expand widget templates) :
<div id='tabber-wrapper'>
<ul class='tab-view'>
<li><a href='#tab1'><script>document.write(Title1);</script></a></li>
<li><a href='#tab2'><script>document.write(Title2);</script></a></li>
<li><a href='#tab3'><script>document.write(Title3);</script></a></li>
<li><a href='#tab4'><script>document.write(Title4);</script></a></li>
<li><a href='#tab5'><script>document.write(Title5);</script></a></li>
<li><a href='#tab6'><script>document.write(Title6);</script></a></li>
</ul><div class='clear'/>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/hot games?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/play station?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/review?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/hot games?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/play station?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab6'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/hot games?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='clear'/>
</div></div>
Ganti tulisan warna merah diatas dengan Label yang ingin anda tampilkan.

Widget Label

Yang dimaksud dengan widget label pada template ini adalah : Game Category dan widget sidebar kanan atas. Caranya sangat mudah, anda tinggal memasukkan atau ketik nama label yang sudah Anda buat pada kotak tersebut. Seperti contoh gambar di bawah :
maskolis

Johny Coba Dulu

Fitur yang ada pada template ini sama dengan Johny Jogos dan cara pemasangan widget pun juga sama jadi saya tidak perlu mengulangnya kembali.

template game


Kedua template untuk mini game online ini menggunakan fungsi reply threaded komentar bawaan blogger jadi Anda tidak perlu merubah Blog ID, karena memang tidak ada pada template diatas.

Johny Si Ganteng

Template ini khusus buat orang-orang ganteng seperti saya.dan Kang Beben Koben yang anu ganteng pisan, katanya. Saya mau cerita sedikit tentang Kang Beben, dia salah satu blogger yang mempunyai perilaku yang layak ditiru oleh blogger lain, selain penguasaan coding yang handal tentunya (sumpah ini bukan isapan jempol, dia memang ahlinya). Banyak sih memang blogger-blogger lokal yang ahli dan menguasai kode-kode CSS, HTML maupun Javascript, tapi sifatnya tipikal seperti lainnya, beda sama Kang Beben Koben. Salah satu yang paling bikin saya terkesan dengan dia adalah, ketika Kang Beben walking in the prettt, dia selalu meninggalkan komentar dimanapun dia singgah, entah itu blog para master dari luar negeri ataupun ketika berkunjung ke blog abal-abal seperti blog ini. Pokoknya maju terus kang Beben, bahasa Inggrisnya keep goin' kang, saya ada di belakangmu, tapi kalau ada apa-apa saya lari duluan.... hahahahahaha.

Template Johny Si Ganteng fiturnya sama persis dengan Johny Sompret Banget, tapi ada beberapa perbedaan yang mendasar sehingga template ini lebih keliatan ramping kodenya, meskipun tampilannya sama. Salah satunya adalah penggunaan Tag H1 untuk setiap judul postingan, silahkan di cek nanti jika Anda berminat. Bagi Anda yang ingin menggunakan template ini silahkan dibuka lagi artikel 2 template kurang kerjaan untuk cara pemasangan widgetnya.

Untuk pemasangan widget recent post pada sidebar kanan, masuk ke Layout >> pilih sidebar >> HTML/Javascript kemudian masukkan kode berikut ke dalamnya :
<ul>
<script type='text/javascript'>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts7\"><\/script>");
</script>
</ul>
 template magazine



Saya berasumsi bahwa teman-teman blogger sudah bisa merubah atau mengganti navigasi menu yang ada pada ketiga template diatas, jadi saya tidak perlu lagi menjelaskan satu persatu langkah-langkahnya, bakalan panjang nanti artikelnya. Oke itu tadi 3 template yang saya bagikan hari ini, Sabtu malam Minggu, 19 Januari 2013. Puisi pendek malam Minggu :
Ini malam Minggu kelabu, dari tadi hujan melulu.
Mau apel nggak jadi, malu aku.
Dikiranya nanti aku cowok yang nggak laku
Padahal banyak sekali cewek yang selalu menungguku

Jika ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar dibawah. Selamat mencoba dan semoga bermanfaat.

Note :
Ketiga template diatas support lisensi dari http://creativecommons.org jadi dimohon untuk tidak menghilangkan kredit link yang ada di sebelah kanan bawah. Yang tiga kiri itu silahkan diganti dengan blog list Anda.

Creative Commons License



Sumber Artikel

{[['']]}

Template Johny SEO dan Cepat

Daripada jadi beban, karena kemarin banyak yang minta dibuatkan template yang sederhana, SEO friendly dan valid HTML. Sambil nunggu adzan Subuh, karena semalam tidur agak sore jadi bisa bangun pagi, langsung menyalakan komputer dan bikin template permintaan. Template ini termasuk template yang paling cepat loading diantara template-template lain yang pernah saya buat. Dan juga paling cepat proses pembuatannya, hanya 1 jam lebih dikit, meskipun hanya 1 jam tapi bikinnya nggak asal-asalan. Semua kondisi SEO dari template blogger paling SEO yang pernah ada di muka bumi, sudah saya pasang semua pada template ini.

Template ini namanya Johny Wusss, karena loadingnya menurut pengamatan saya sudah kriteria cepat, tanpa ada kode CSS atau javascript yang dikompres. Nanti silahkan dicek sendiri kecepatan template ini, menurut saya sih sudah cepat, tapi kalau menurut teman-teman belum cepat yang tidak usah dipakai, cari template yang lebih cepat lagi di Google banyak kok. Template ini juga termasuk SEO friendly dan visitor friendly, karena tag H1 dan H2 juga sudah terpasang, bisa di cek juga nanti. Validasi HTML5 cuma error 1 karena kode CSS yang saya letakkan pada widget komentar yang ada di sidebar. Tapi sayangnya ini template biasa, bukan template responsif karena saya belum bisa membuat template responsif, selama ini saya belum ada waktu buat belajar mendalami responsif layout.

johny wusss


Fitur :
  1. Simple template blogger with elegant look
  2. Auto readmore without javascript
  3. Fast loading
  4. Stylish threaded comment
  5. SEO friendly and visitor friendly
  6. Sidebar toggle hide and show
  7. Navigation menu dropdown
  8. Ads ready and many more
Untuk mengganti Feedburner yang ada di bawah setiap postingan, cari kode ini di Edit HTML (jangan lupa centang Expand Widget Templates) :
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='JohnyTemplate'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/JohnyTemplate'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/JohnyTemplate?bg=0F61CB&amp;fg=222222&amp;anim=1' style='border:0' width='88'/></a>
</form>
Tulisan warna merah diatas adalah ID feedburner dari demo template, silahkan Anda ganti dengan ID feeburner blog Anda.

Itu tadi artikel tentang template sederhana SEO dan visitor friendly yang saya bagikan Subuh ini, jika Anda berminat silahkan dipakai dan jika ada yang kurang jelas silahkan tinggalkan komentar Anda pada kolom komentar di bawah. Selamat beraktivitas dan semoga bermanfaat.

Bukti Template ini SEO

Perhatikan gambar di bawah ini, belum ada 2 jam template ini saya publish, ada salah satu blog yang menggunakan Johny Wusss template langsung nongkrong di halaman pertama dengan kata kunci Johny Wuss, nomer satu pula blog saya ini pun kalah.

template maskolis



Sumber Artikel

{[['']]}

Modifikasi 3 Template Valid HTML5

Pertama saya akan jelaskan dulu apa itu HTML5 dan kenapa kita harus memakai HTML versi terbaru? HTML sendiri adalah singkatan dari Hyper Text Markup Language. HTML bukanlah termasuk bahasa pemrograman, karena struktur yang dimilikinya dianggap terlalu sederhana, kode-kode yang dibaca oleh browser baris per baris, dari atas ke bawah. HTML juga tidak mempunyai struktur pemrograman yang umum ada pada sebuah bahasa pemrograman standar. HTML hanyalah kumpulan dari beberapa instruksi yang dapat dipakai untuk merubah format suatu naskah atau dokumen.

Saat ini HTML telah menjadi standar yang banyak digunakan secara luas untuk menampilkan halaman web atau situs. HTML juga bisa diartikan sebagai kumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Oleh karena itu, untuk dapat membuka dokumen yang ditulis dalam format HTML maka kita perlu sebuah tool yaitu berupa browser seperti Opera, Mozilla, Google Chrome, Internet Explorer dan lain-lain.

Tentang HTML5 dan Fungsinya

Dengan semakin berkembangnya teknologi saat ini, format HTML pun dituntut mampu memberikan informasi yang akurat untuk setiap dokumen yang dibaca. W3C atau Word Wide Web Consortium sebagai pengembang XHTML 2.0 dan WHATWG sepakat untuk bekerja sama membuat HTML versi terbaru, yaitu HTML5. Pengembangan format HTML menjadi HTML5 bertujuan untuk memperbaiki teknologi HTML agar dapat mendukung teknologi multimedia terbaru. Selain itu HTML5 dapat mengurangi penggunaan plugin-plugin third party pada HTML sehingga dapat mempercepat kinerja sebuah web atau situs. Plugin-plugin tersebut misalnya Microsoft Silverlight, Adobe Flash, Java dan sebagainya.

Bagi pengembangan website atau blog, format HTML5 juga memberikan beberapa kemudahan, misalnya pada bagian awal file HTML sebelumnya kita harus menulis coding DOCTYPE yang panjang, seperti ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 Pada HTML5, DOCTYPE dapat ditulis lebih ringkas
<!DOCTYPE html> 
Kemudian pada baris berikutnya HTML lama biasanya seperti ini
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> 
Versi HTML5 bisa lebih simple menjadi
<html expr:dir='data:blog.languageDirection'> 

Validitas HTML sebuah Blog

Sekarang kita menuju ke validasi HTML, validitas sebuah situs atau web bukanlah merupakan suatu keharusan. Awalnya saya bingung, kenapa sih blog mesti valid struktur HTML nya? Kenyataan memang dari beberapa situs besar, bahkan Google sendiri mempunyai sekian puluh error dalam halamannya. Tetapi mempunyai Page Rank tinggi, lalu kenapa kita harus memikirkan Validasi HTML? Apakah Validasi HTML yang biasa ditest melalui validator W3C itu berpengaruh pada Search Engine Google?

Silahkan cari sendiri alasannya di internet ya, soalnya sampai saat ini masih terjadi pro kontra, apakah validitas sebuah blog perlu atau tidak. Kalau saya sih perlu, coba sekarang silahkan cek di Google Analytics, ada bermacam-macam jenis browser yang telah mengakses blog anda. Disitu Anda akan kehilangan beberapa persen pembaca yang kesulitan melihat blog anda dari browser mereka. Maka validasi HTML akan menjamin tampilan blog akan sama di semua browser. Melalui validasi html, semua browser, bahkan yang paling tua sekalipun akan bisa membaca dokumen blog yang Anda kelola dengan mudah

Wah artikel ini bakalan panjang, saya cut sampai disini penjelasan tentang HTML5 dan validasi HTML. Bagi yang masih percaya kalau validitas HTML sebuah blog sangat berpengaruh pada artikel kita di mata SERPs atau SEO, yah silahkan dibuat se-minimal mungkin error margin pada kode HTML Anda. Bagi yang tidak begitu peduli dengan validitas ya silahkan saja, tidak apa-apa. Sebagai kesimpulan, adalah sebuah gagasan yang bagus untuk memiliki validasi HTML pada situs Anda untuk memeriksa kesalahan dan membersihkan coding yang tidak perlu. Dan bagi Anda yang ingin mencoba keberuntungan apakah blog yang Anda kelola Valid HTML atau tidak, silahkan menuju link dibawah ini :


Modifikasi Template Tipe Magazine Valid HTML5

Setelah nulis muter-muter tidak ada ujung pangkalnya, sekarang saya akan bagikan kepada Anda disini, 3 buah template lama dari Creating Website yang tadinya masih memakai format HTML lama, saya ganti menjadi HTML5 dan yang pasti validitasnya bisa dicek nanti. Bentuk dan model template ini sama persis dengan yang sudah saya bagikan tidak ada yang berubah, tapi codingnya yang berbeda, silahkan langsung saja :

Johny Sompret Banget

banget




Johny Kena Banned

johny kena banned




Johny Sompret

johny sompret




Ketiga template diatas, sudah saya modifikasi sehingga valid secara HTML5. Bukan jaminan 100% jika Anda memakai ketiga template diatas, blog Anda juga akan mempunyai validasi HTML, semuanya tergantung pengguna. Paling tidak saya sudah membuang kode-kode error yang ada pada template-template diatas, Anda tinggal menyesuaikan jika ada penambahan kode di Edit HTML maupun pada widget. Silahkan dicoba bagi yang tertarik dan semoga bermanfaat.
 
{[['']]}

Download Template Toko Online Dengan Invoice Email

Template-template toko online blogger dengan fasilitas shopping cart ini awalnya saya buat dengan metode pembayaran via Paypal. Karena pembayaran lewat Paypal sampai saat ini hanya support untuk mata uang tertentu, terutama top currency (Dollar, Euro dan Pounds) sehingga bagi pengguna template yang memasang harga produknya dengan mata uang lokal sebagai alat transaksi, fitur cart menjadi tidak berfungsi dan kesannya hanya sebagai pemanis blog saja.

Nah, agar fitur shopping cart disini masih bisa berfungsi bukan hanya sebagai pemanis blog, saya sudah modifikasi template-template tersebut dengan merubah menjadi sistem pemberitahuan lewat email atau bahasa kerennya invoice email. Untuk lebih jelasnya, silahkan baca artikel saya sebelumnya 2 Template Toko Online Modifikasi dengan Invoice Email. Dan silahkan klik blog demo dibawah, klik add to cart salah satu produk yang ada di blog demo, lalu klik Order Email yang ada pada keranjang belanja (shopping cart).


Jika Anda tertarik, dibawah ini template-template toko online yang sudah saya modifikasi dengan fasilitas invoice email (tapi demonya masih menggunakan Paypal), keempat template ini khusus untuk mata uang Rupiah (Rp)  :












Jika Anda pemakai salah satu template diatas, dan sudah memodifikasi template tersebut, sehingga jika download ulang akan merubah warna dan semua susunan widget dan yang lain. Anda tinggal download template yang dipakai diatas, kemudian cari kode yang saya tambahkan pada template tersebut, copy-kan ke template Anda. Demikian artikel singkat kali ini, selamat mencoba dan semoga bermanfaat.

Penting untuk diperhatikan bagi pengguna template-template diatas :
  1. Buatlah sebuah page atau halaman statis dengan judul : Terima Kasih. 
  2. Isi terserah Anda, contoh bisa dilihat disini http://johnysip-deh.blogspot.com/p/terima-kasih.html
  3. Halaman ini digunakan untuk redirect URL setelah selesai pengisian formulir pemesanan.
  4. 2 Template Toko Online Modifikasi dengan Invoice Email Terbaru


Sumber
{[['']]}

2 Template Toko Online Modifikasi dengan Invoice Email

Dari beberapa template Toko Online dengan shopping cart yang saya bagikan sebelumnya, banyak kendala yang dihadapi, khususnya bagi mereka yang menggunakan mata uang non top currency (dollar, Euro dan Pounds). Khusus untuk kali ini, saya akan membagikan 2 buah template Toko Online Cart dengan menggunakan fasilitas Invoice Email. Singkatnya begini, jika ada pesanan lewat fitur shopping cart Anda akan menerima langsung lewat email tanpa harus membuat form order, dan pesanan pembeli sesuai dengan produk yang di order lewat fitur shopping cart. Kelebihan lain adalah seorang pemesan pun juga akan menerima email dari barang yang dibelinya.

Untuk kali ini, saya memodifikasi 2 buah template yang pernah saya bagikan sebelumnya, yaitu Johny Blackstore dan Johny Magstore khusus untuk mata uang Rupiah (Rp). Oke langsung saja ya

Johny Sip Deh

Template ini persis sama dengan Johny Blackstore, hanya beda warnanya saja dan tambahan fitur related post di bawah postingan. Untuk tutorial cara membuat postingan dan pemasangan widget yang ada pada template ini, silahkan dibuka artikel Johny Blackstore, Template Toko Online Asal Jadi

toko online blogger


Simpan semua file javascript pada template ini pada Google Code sendiri, download filenya :


Saya akan menjelaskan cara kerja shopping cart dengan menggunakan fitur email invoice secara sistematis disini. Sebagai contoh kasus, saya memesan barang lewat cart pada demo template diatas seperti gambar berikut ini :

toko online blogger

Setelah klik "Order Email",  si pemesan diharuskan untuk mengisi formulir yang muncul seperti pop up berikut ini :

toko online blogger

Kemudian klik OK button, setelah itu si pemesan akan diarahkan untuk mengisi email, nama, alamat, nomer telepon yang bisa dihubungi. Setelah semuanya diisi, pemesan akan mendapatkan notifikasi email seperti gambar berikut ini :

toko online blogger

Perhatikan produk-produk yang dipesan, sama dengan barang yang dipesan lewat shopping cart. Dan si pemilik toko online, dalam hal ini sebagai penjual pasti juga akan menerima notifikasi email dari pembeli atau pemesan produk seperti gambar berikut ini :

toko online blogger

Setelah proses diatas,  pemesan dan penjual tinggal melakukan finalisasi proses transaksi melalui data-data yang sudah tercantum dalam email yang dikirim.

Setting Template

Untuk merubah setelan transaksi online pada template ini, cari kode berikut ini pada Edit HTML :
simpleCart.email = &#39;ncmajid@gmail.com&#39;;
simpleCart.checkoutTo = Email;
simpleCart.currency = IDR;
simpleCart.urlWebsite = &#39;http://johnysip-deh.blogspot.com&#39;;
simpleCart.taxRate  = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.alamatPemilik = &#39;Alamat Anda &#39;;
simpleCart.noHP = &#39;081 xxxx xxxx&#39;;
simpleCart.urlFacebook = &#39;http://www.facebook.com/pages/your facebook&#39;;
simpleCart.urlTwitter = &#39;https://twitter.com/your twitter&#39;;
simpleCart.akunbank1 = &#39;Bank A&#39;;
simpleCart.norek1 = &#39;No Rekening&#39;;
simpleCart.namarek1 = &#39;Nama Pemilik Rekening Bank A&#39;;
simpleCart.akunbank2 = &#39;Bank B&#39;;
simpleCart.norek2 = &#39;No Rekening&#39;;
simpleCart.namarek2 = &#39;Nama Pemilik Rekening Bank B&#39;;
simpleCart.akunbank3 = &#39;Bank C&#39;;
simpleCart.norek3 = &#39;No Rekening&#39;;
simpleCart.namarek3 = &#39;Nama Pemilik Rekening Bank C&#39;;
simpleCart.akunbank4 = &#39;Bank D&#39;;
simpleCart.norek4 = &#39;No Rekening&#39;;
simpleCart.namarek4 = &#39;Nama Pemilik Rekening Bank D&#39;;
simpleCart.akunbank5 = &#39;Bank E&#39;;
simpleCart.norek5 = &#39;No Rekening&#39;;
simpleCart.namarek5 = &#39;Nama Pemilik Rekening Bank D&#39;;
simpleCart.akunbank6 = &#39;Bank F&#39;;
simpleCart.norek6 = &#39;No Rekening&#39;;
simpleCart.namarek6 = &#39;Nama Pemilik Rekening Bank D&#39;;
simpleCart.urlReferrer = &#39;http://www.maskolis.com&#39;;
simpleCart.businessName = &#39;Nama Toko Online Anda&#39;;
simpleCart.formatsmsKonfirmasi= &#39;(Nama, Email, Jumlah transfer, Bank Tujuan Transfer, Tanggal transfer)&#39;;
simpleCart.contohformatsmsKonfirmasi= &#39;Maskolis, email.maskolis@gmail.com, Rp 1.500.000, BCA, 12 Desember 2012 &#39;;
simpleCart.catatanTambahanInvoice= &#39;(Have a nice day for you and I hope you enjoy it)&#39;;
simpleCart.cartHeaders = [&quot;Name&quot;, &quot;thumb_image&quot; , &quot;Quantity_input&quot; ,   &quot;Total&quot;, &quot;remove&quot; ];

Kode warna biru diatas yang harus Anda ganti, sesuaikan dengan kebutuhan data Anda sehingga konsumen lebih percaya untuk membeli produk dari toko online yang Anda kelola.

Dan jika Anda ingin setting pembayaran dengan Paypal tinggal merubah kode berikut :
simpleCart.checkoutTo = Email;
simpleCart.currency = IDR;
Ganti email dengan Paypal dan rubah IDR dengan mata uang top currency yang Anda inginkan. Hapus data pada kode diatas yang tidak diperlukan.

Untuk mengaktifkan fungsi reply komantar pada template ini, ganti Blog ID pada template ini pada Edit HTML (jangan lupa centang expand widget template) : 4486072018930286729 setelah ketemu ganti dengan blog ID anda

Johny Muantab

Template ini modifikasi dari Johny Magstore, bedanya template ini menggunakan satu sidebar di sebelah kiri. Cara membuat postingan dan memasang widget sama persis dengan Johny Magstore template, untuk itu silahkan jika Anda ingin menggunakan template ini dibuka kembali artikel Johny Magstore, Template Magazine untuk Toko Online.

toko online blogger


Simpan semua file javascript pada template ini pada Google Code sendiri, download filenya :


Template ini sama dengan template Johny Sip Deh, menggunakan invoice email payment method (sistem pembayaran lewat email). 

Setting Template

Cari kode di bawah ini pada Edit HTML, untuk mengoptimalkan data mengenai toko online yang Anda kelola :
simpleCart.email = 'ncmajid@gmail.com';
simpleCart.checkoutTo = Email;
simpleCart.currency = IDR;
simpleCart.urlWebsite = 'http://johny-mantuab.blogspot.com';
simpleCart.alamatPemilik = 'Alamat Anda ';
simpleCart.noHP = '081 xxxx xxxx';
simpleCart.urlFacebook = 'http://www.facebook.com/pages/your facebook';
simpleCart.urlTwitter = 'https://twitter.com/your twitter';
simpleCart.akunbank1 = 'Bank A';
simpleCart.norek1 = 'No Rekening Bank A';
simpleCart.namarek1 = 'Nama Pemilik Rekening Bank A';
simpleCart.akunbank2 = 'Bank B';
simpleCart.norek2 = 'No Rekening Bank B';
simpleCart.namarek2 = 'Nama Pemilik Rekening Bank B';
simpleCart.akunbank3 = 'Bank C';
simpleCart.norek3 = 'No Rekening Bank C';
simpleCart.namarek3 = 'Nama Pemilik Rekening Bank C';
simpleCart.akunbank4 = 'Bank D';
simpleCart.norek4 = 'No Rekening Bank  D';
simpleCart.namarek4 = 'Nama Pemilik Rekening Bank D';
simpleCart.akunbank5 = 'Bank E';
simpleCart.norek5 = 'No Rekening Bank E';
simpleCart.namarek5 = 'Nama Pemilik Rekening Bank D';
simpleCart.akunbank6 = 'Bank F';
simpleCart.norek6 = 'No Rekening Bank F';
simpleCart.namarek6 = 'Nama Pemilik Rekening Bank D';
simpleCart.urlReferrer = 'http://www.maskolis.com';
simpleCart.businessName = 'Nama Toko Online Anda';
simpleCart.formatsmsKonfirmasi= '(Nama, Email, Jumlah transfer, Bank Tujuan Transfer, Tanggal transfer)';
simpleCart.contohformatsmsKonfirmasi= 'Maskolis, email.maskolis@gmail.com, Rp 1.500.000, BCA, 12 Desember 2012 ';
simpleCart.catatanTambahanInvoice= '(Have a nice day for you and I hope you enjoy it)';
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment',  'decrement','Total'];
Ganti kode warna biru diatas dengan data Anda.

Kekurangan dari sistem pembayaran dengan invoice email ini, Anda harus mempunyai hosting sendiri untuk menyimpan script email invoice yang berupa file PHP. Karena blogger belum support PHP dan tidak ada hosting gratis khusus untuk menyimpan file PHP. Untuk kedua template ini saya menggunakan hosting dari blog dimana saya berperan sebagai admin disitu. Jika Anda ingin mengganti atau merubah kalimat dan bahasa yang ada di email invoice, syarat utama anda harus mempunyai file PHP invoice email dan hosting untuk menyimpannya.

Awalnya saya ragu untuk membagikan kedua template ini, karena jika hosting yang saya pakai untuk menyimpan file PHP ini tidak diperpanjang bisa-bisa fitur invoice email yang saya pasang pada template itu tidak lagi berfungsi. Mengingat masih banyak pembuat toko online blogger berbayar yang menekuni bidang ini sebagai sumber mata pencaharian, tidak etis rasanya jika saya membuka semua rahasia pembuatan toko online blogger dengan invoice email payment method ini. Jadi silahkan Anda membuat sendiri file PHP dengan menggunakan dreamweaver, atau masuk ke situs http://stackoverflow.com disana banyak sekali dasar-dasar untuk membuat sebuah file PHP untuk email invoice.

Demikian tadi dua template toko online dengan model pembayaran lewat invoice email, jika ada yang ingin ditanyakan silahkan tulis pesan Anda di kotak komentar. Selamat mencoba dan selamat menikmati Tahun Baru 2013 bagi yang merayakan.... semoga bermanfaat.

Penting untuk diperhatikan bagi pengguna kedua template diatas :
  1. Buatlah sebuah page atau halaman statis dengan judul : Terima Kasih. 
  2. Isi terserah Anda, contoh bisa dilihat disini http://johnysip-deh.blogspot.com/p/terima-kasih.html
  3. Halaman ini digunakan untuk redirect URL setelah selesai pengisian formulir pemesanan.
  4. Download Template Toko Online Dengan Invoice Email 
{[['']]}

Popular Post

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. irhat3 - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger