Judul Posting Anda Disini

Nama anda atau Author disini

Tulis sebagian postingan anda disini

Judul Posting Anda Disini

Nama anda atau Author disini

Tulis sebagian postingan anda disini

Judul Posting Anda Disini

Nama anda atau Author disini

Tulis sebagian postingan anda disini

Sabtu, 13 Juli 2013

memasang twitter update

Cara memasang twitter update gaya slide di blog
Cara memasang twitter update gaya slide di blog - Berjumpa lagi sob dengan Master Copast dengan posting saya yang terbaru kali ini dengan judul Cara memasang twitter update gaya slide di blog. Judulnya aja udah unik sob maklum dapet otak atik sendiri jadi dapet deh yang kaya gini. Mau tau bentuknya lihat di screenshoot di bawah ini sob :

Berminat untuk memasangnya di blog sobat silahkan ikuti langkah-langkahnya di bawah ini sob :
  • Pertama login ke blog sobat.
  • Selanjutnya masuk kemenu rancangan
  • Pada menu pilih Rancangan ➨ Tataletak
  • lalu klik tambah gadget
  • Apa bila sudah sobat pilih HTML/JavaScript lalu masukan kode di bawah kedalamnya
 

Catatan :
Ganti tulisan 'CopastM' denagn akun twitter sobat
Ganti tulisan 'COPAST MASTER' dengan kata-kata sobat sendiri itu bagian judul paling atas
Ganti disain warna dengan kode warna yang sobat inginkan kodenya DISINI 
  • Lalu simpan dan lihatlah hasilnya sob 
Simple bukan sobat langkah-langkahya semoga dapat membantu sobat . Sekian dulu hasil Master Copast kali ini artikel Tutorial Blog,   yang berjudul Cara memasang twitter update gaya slide di blog. Semoga bermanfaat Master Copast
Read More : memasang twitter update
Cara memasang twitter update gaya slide di blog
Cara memasang twitter update gaya slide di blog - Berjumpa lagi sob dengan Master Copast dengan posting saya yang terbaru kali ini dengan judul Cara memasang twitter update gaya slide di blog. Judulnya aja udah unik sob maklum dapet otak atik sendiri jadi dapet deh yang kaya gini. Mau tau bentuknya lihat di screenshoot di bawah ini sob :

Berminat untuk memasangnya di blog sobat silahkan ikuti langkah-langkahnya di bawah ini sob :
  • Pertama login ke blog sobat.
  • Selanjutnya masuk kemenu rancangan
  • Pada menu pilih Rancangan ➨ Tataletak
  • lalu klik tambah gadget
  • Apa bila sudah sobat pilih HTML/JavaScript lalu masukan kode di bawah kedalamnya
 

Catatan :
Ganti tulisan 'CopastM' denagn akun twitter sobat
Ganti tulisan 'COPAST MASTER' dengan kata-kata sobat sendiri itu bagian judul paling atas
Ganti disain warna dengan kode warna yang sobat inginkan kodenya DISINI 
  • Lalu simpan dan lihatlah hasilnya sob 
Simple bukan sobat langkah-langkahya semoga dapat membantu sobat . Sekian dulu hasil Master Copast kali ini artikel Tutorial Blog,   yang berjudul Cara memasang twitter update gaya slide di blog. Semoga bermanfaat Master Copast
Read More :

Membuat Text Berjalan di Blog

Membuat Text Berjalan di Blog


Sebenarnya ini bukan hal yang baru di dunia blog. Kuposting juga hal ini agar Anda para peminat blog yang masih pemula sepertiku, bisa mempraktekkan di blog masing-masing. Kadangkala untuk menarik perhatian pengunjung blog kita, text berjalan seperti ini sangat membantu

Yu kita langsung mulai saja ya.

1.  Tampilan secara default text berjalan arahnya adalah dari kanan ke kiri. Kodenya sebagai berikut :
<marquee>Membuat Text Berjalan di Blog</marquee>
tampilannya adalah sebagai berikut:
Membuat Text Berjalan di Blog

2. Untuk gerakan text berlawanan arah yaitu kiri ke kanan, anda tambahkan direction="right" sehingga menjadi:
<marquee direction="right">Membuat Text Berjalan di Blog</marquee>
tampilannya adalah sebagai berikut:
Membuat Text Berjalan di Blog


3. Untuk tampilan slide anda tambahkan behavior="slide"  sehingga menjadi:
<marquee behavior="slide">Membuat Text Berjalan di Blog</marquee>
tampilannya adalah sebagai berikut:
Membuat Text Berjalan di Blog

4. Untuk gerakan text memantul tambahkan behavior="alternate"  sehingga menjadi:
<marquee behavior="alternate">Membuat Text Berjalan di Blog</marquee>
tampilannya adalah sebagai berikut:
Membuat Text Berjalan di Blog

5. Untuk membatasi tampilan gerakan text berjalan misalnya pada contoh 2 kali tampil saja (setelah itu text berjalan ga terlihat lagi), maka tambahkan loop="2" (atau sesuaikan dengan selera anda) sehingga menjadi:
<marquee loop="2">Membuat Text Berjalan di Blog</marquee>
tampilannya adalah sebagai berikut:
Membuat Text Berjalan di Blog

6. Untuk membatasi daerah tampilan text berjalan tambahkan height (lebar) dan width (panjang), tambahkan height="20 " width="150" (atau seseuai selera anda sehingga menjadi:
<marquee height="20" width="150">Membuat Text Berjalan di Blog</marquee>
tampilannya adalah sebagai berikut:
Membuat Text Berjalan di Blog

7. Untuk menambah kecepatan tampilan text berjalan tambahkan scrolldelay="45" (defaul 90) sehingga menjadi:
<marquee scrolldelay="45">Membuat Text Berjalan di Blog</marquee>
tampilannya adalah sebagai berikut:
Membuat Text Berjalan di Blog

8. Untuk mengurangi kecepatan tampilan text berjalan (memperlambat), tambahkan scrolldelay="120" (defaul 90) sehingga menjadi
<marquee>Membuat Text Berjalan di Blog</marquee>
tampilannya adalah sebagai berikut:
Membuat Text Berjalan di Blog


Untuk yang menggunakan Microsoft Office Frontpage sepertiku sebagai editor web, langkah-langkah memasukkan text berjalan ini adalah:
Add a marquee
1. In Page view, at the bottom of the document window, click Design .
2. Click where you want to add the marquee, and then type and select that text.
3. On the Insert menu, click Web Component.
4. Under Component type, click Dynamic Effects.
5. Under Choose an effect, double-click Marquee.
6. Set the properties that you want for the marquee, and then click OK.
(terjemahkan sendiri ya.. hehe)

Untuk sementara sekian dulu yah. Selamat mencoba. Goodluck!!!

Istilah terkait marquee : lg marquee, marquee las vegas, marquee myspace, myspace codes, myspace marquee codes, marquee vegas, marquee tool, marquee codes, marquee nightclub, marquee cinemas, the marquee, marquee html, marquee hire, marquee theater, marquee club, marquee code
Read More : Membuat Text Berjalan di Blog

Template Silver-Black

Template Silver-Black Valid XHTML Super Seo Friendly

Written By Hisyam Yahya 

Selamat malam teman-teman kali ini aku akan memberikan download Template Silver-Black Valid XHTML Super Seo...
Template ini juga sangat ringan loadingnya,karena template ini banyak hanya menggunakan css daripada gambar yang membuat blog menjadi berat.
oke langsung saja template ini sudah sangat seo. dan valid XHTML pula wah asik donk. dan kalian bisa memiliki template ni secara gratis.
 Screen Shot :
 
   LIVE DEMO                       |                 DOWNLOAD     
Fetured :
Meta SEO
Menu Navigasi.
Popular Post Versi 3D
Follow Us.
Breadcrumbs.
Share On.
Blog Dofollow.
Dll,
banyak bukan ......
ouw iya aku hampir lupa jangan lupa metanya diganti ya....


<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/> |Trik Komputer | Download Software </title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

<meta content='Blog Tips dan Blog Tutorial | Template | Blogger SEO | Facebook | 3D | Wordpress | Gadget | Download Software |OS | Hacking |Trik Hacking | Hacker | ' name='description'/>
<meta content='Blogsot, how to blog, buat blog, widget blogspot, blogger, blog spot, free blog, blogger gadget,trik, blogger template blogspot, tips trik facebook, facebook, trick, trick facebook, emotion facebook, face book, id id facebook, template blogger, template 3D, Tutorial blogspot lengkap, tutorial blogging, tips blog, tutorial de blog, Tutorial membuat blog, tutorila hacking, trik hacker, trik hacking, tutorial hacker,hacking, hacker, download software, software full version, Download OS , OS Xp, 7,8, 2000, vista, Mac OS,Linux, Trik Linux, Trik Xp, Trik windows 7 Trik Windows 8,Download windows , windows Xp,windows 7,windows 8,windows 2000,windows vista,windwos NT ' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
<meta content='b413a87abcd3f70d63733df47d8c1536=' name='verify-v1'/>
<meta content='Syn7dYZtKtIPS8ddqPeb1gWY0UQ' name='alexaVerifyID'/>
<meta content='facebook,blogger, blogger tutrial, SEO, Widget, tips dan trik,Syn7dYZtKtIPS8ddqPeb1gWY0UQ' name='keywords'/>
<meta content='all-language' http-equiv='Content-Language'/>
<meta content='Global' name='Distribution'/>
<meta content='indonesia' name='geo.country'/>
<meta content='jawa barat' name='geo.placename'/>
<meta content='blogger tutorial' name='author'/>
<meta content='all' name='robots'/>
<meta content='all' name='googlebot'/>
<meta content='all' name='msnbot'/>
<meta content='all' name='Googlebot-Image'/>
<meta content='all' name='Slurp'/>
<meta content='all' name='ZyBorg'/>
<meta content='all' name='Scooter'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='1 days' name='revisit'/>
<meta content='1 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='en' name='language'/>
<meta content='US' name='country'/>
<meta content='all' name='audience'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='https://plus.google.com/105979908273883379858' rel='author'/>
Untuk Tulisan Yang Berwarna merah bisa kalian ganti dengan judul description yang kalian inginkan
dan untuk tulisan yang berwarna biru kalian ganti dengan account +google  kalian Sendiri tapi.
 nah bagi kamu semua yang ingin mencoba
Read More : Template Silver-Black

Modifikasi Slider Lofslidernews

Modifikasi Slider Lofslidernews Otomatis Heboh
Modifikasi Slider Lofslidernews Otomatis Heboh, Cara Membuat Slider diatas Postingan, Slider Cantik di Posisi Atas Posting Blogger. 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 :

Modifikasi Slider Lofslidernews Otomatis Heboh


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) :
    Modifikasi Slider Lofslidernews Otomatis Heboh

    Caranya, letakkan kode berikut di atas kode ]]></b:skin>

    1. /* Slide Content 
    2. ----------------------------------------------- */  
    3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;floatleft;  
    4. word-wrap: break-word; overflowhidden;}   
    5. .slide {color#666666;line-height1.3em;}  
    6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  
    7. .slide li {margin:0;padding-top:0;  
    8. padding-right:0;padding-bottom:.25em;  
    9. padding-left:0px;text-indent:0px;line-height:1.3em;}  
    10. .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 :

    1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
    2.       <div id='slide-wrapper'>  
    3. <b:section class='slide' id='slide' preferred='yes'/>  
    4.       </div>  
    5. </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/AVvXsEghg8rsFfShwyYWRAwmbVUVG90GDA0x1jwqu68VLjMlxPZcp8im8330dL_5cA8sFFVkuZcRFjfjAnALVjTH6J7smAJV-DFktr0FiOH81uyhA6CeMrNc3rtzDhpnHbVegyzXzo-WIh4Vz04G/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/AVvXsEjYmIxfaOG5lqRU9vzBajPMquRA9_1zCttPljZhLXp88tL6Io_7UZ0e2BypIr3pAs6eqYfEZbo81ezLrDSCCm2z634YI5mLOFBeczAeTi_0j8pVVZlz3uun1p-KJGJGgeA2I8JNMjhYlVY/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.
Agak rumit ya? pelan-pelan nanti juga bisa. Baca tutorialnya dengan teliti jangan ada yang kelewatan karena menurut saya ini agak sedikit rumit dalam pengaturan panjang dan lebar. Jangan lupa kopinya diminum dulu, nanti keburu dingin. Jika masih ada yang kurang jelas, bisa ditanyakan pada kolom komentar dibawah. Itu tadi tutorial membuat slider Lofslidernews.
nb: untuk simpan di google code di langkah no 6 ya... dan dimulai dari //<![CDATA[ sampai //]]>
Read More : Modifikasi Slider Lofslidernews

Cara Modifikasi Widget Popular Post With Grid Layout

Cara Modifikasi Widget Popular Post With Grid Layout


Cara Modifikasi Widget Popular Post With Grid Layout - Cara Membuat atau Memodifikasi Widget Populart Post menjadi lebih Keren bergaya dengan grid layout, seperti yang Agan Tahu unutuk Tampilan Widget bawaan Blogger ini Cukup Menarik, tapi Kita bisa Modifikasi Lagi dengan Gaya yang Berbeda dan lebih Keren lagi.
Pastinya diluar Sana sudah Banyak yang Sharing tentang Topik ini. Penasaran Sperti apa ?? Widgetnya Ok,Langsung Saja, Ane akan Ulas di simak Bae" Gan !! :

1. Log in Blogger.com
2.Pergi Ke Tata Letak
3.Tambahkan Gadget / Add gadget

4.Pilih Widget "Populart Post"
5.Settinglah persis seperti gambar dibawah ini, untuk jumlah post, bisa Agan atur sendiri.
Setting Configure
6.Lalu Save
7.Lanjut Ke Edit HTML, Beri Centang pada Expand Widget Templates. Jangan Lupa Backup Template Agan (Buat jaga" aja agan mana tahu ada yang error)
8.Cari Kode ]]><b:skin> (Untuk mempermudah silahkan Tekan CTRL + F )
9.Copy Kode dibawah ini dan Pastekan diatas kode ]]><b:skin>
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}
10.Lanjut Cari Kode PopulartPost1 (CTRL+F) biar lebih cepat
      ini Kode Script Selengkapnya :
<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
11.Ganti Kode Script diatas dengan Kode di bawah ini :
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
12.Terakhir Simpan dan Lihat Hasilnya
Read More : Cara Modifikasi Widget Popular Post With Grid Layout

Cara Membuat Popular Post Warna-Warni

Cara Membuat Popular Post Warna-Warni


Popular Post adalah sebuah widget yang bertujuan untuk menampilkan posting yang sering dilihat oleh pembaca blog sobat. Dan sekarang kita bisa modifikasi widget popular post dengan sembilan macam warna yang berbeda-beda dari setiap posting.

1. Login ke blog kamu.
2. Pilih Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas  ]]></b:skin>

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

4. Simpan, dan kembali ke menu Tata Letak > Pilih Add Gadget > Pilih Entri Populer/Popular posts.

Note : Cuplikan gambar dan keterangan hilangkan tanda centangnya dan tampilkan minimal 9 post.

5. Simpan dan lihat hasilnya.
Read More : Cara Membuat Popular Post Warna-Warni

280 Px

280 Px

a

280 Px

TEKNIK DASAR

400 Px

  © Free Blogger templates The Robotic by Kang Oemar templates 2009

Kembali Ke : ATAS