Cep Husni Seven - Find me on Bloggers.com
Showing posts with label tutorial blog. Show all posts
Showing posts with label tutorial blog. Show all posts

Wednesday, 20 March 2013

Floating Social Bookmark dengan Efek Easing

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Jika Anda perhatikan dua template responsive yang saya bagikan kemarin, terdapat sosial bookmark yang menempel di sebelah kanan layar monitor, widget itu akan mengikuti gerakan naik turun. Karena untuk meminimalisir penggunaan javascript, saya sengaja membuat widget itu polos tanpa penggunaan efek tertentu dengan konsekuensi penggunaan image untuk membentuk widget itu semakin banyak. Nah, kali ini saya akan berikan tutorial atau cara untuk membuat widget floating social bookmark dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit (hanya satu). 

floating social bookmark


Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak. Pada template Johny Ribet atau Pakdhe Johny hanya terdapat 4 jenis, untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :
  1. Login ke Blogger
  2. Masuk ke Template >> Edit HTML (centang expand widget templates)
  3. Letakkan kode CSS di bawah ini diatas ]]></b:skin> :
    .social-buttons {
        position: fixed;
        top: 130px;
        width: 45px;
        z-index: 9999;
    }
    .button-left {
        left: 0;
    }
    .button-right {
        right: 0;
    }
    .social-buttons #twitter-btn .social-icon,
    .social-buttons #facebook-btn .social-icon,
    .social-buttons #google-btn .social-icon,
    .social-buttons #rss-btn .social-icon,
    .social-buttons #pinterest-btn .social-icon,
    .social-buttons #youtube-btn .social-icon {
        background-color: #33353B;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJWMKE95Q1gUDdVAQFp-QntG5ij0YL2dwhxM__OxqXGi7Hi-zP5jayUyDpjO8YsRKeTq2aBwmzP6Go4s8S-CJtccySZ5kpkpt46ihsM9PgI50juuZdGinx_Yu5jNLu_1qR4mi8c-O5CU/s1600/mas-icons.png);
    }
    .button-left #facebook-btn span {
        background-position: right 10px;
    }
    .button-left #twitter-btn span {
        background-position: right -35px;
    }
    .button-left #google-btn span {
        background-position: right -127px;
    }
    .button-left #rss-btn span {
        background-position: right -80px;
    }
    .button-left #pinterest-btn span {
        background-position: 11px -177px;
    }
    .button-left #youtube-btn span {
        background-position: 11px -223px;
    }
    .button-right #facebook-btn span {
        background-position: 12px 10px;
    }
    .button-right #twitter-btn span {
        background-position: 11px -35px;
    }
    .button-right #google-btn span {
        background-position: 10px -127px;
    }
    .button-right #rss-btn span {
        background-position: 11px -80px;
    }
    .button-right #pinterest-btn span {
        background-position: 11px -177px;
    }
    .button-right #youtube-btn span {
        background-position: 11px -223px;
    }
    .social-buttons #facebook-btn:hover .social-icon {
        background-color: #3B5998;
    }
    .social-buttons #twitter-btn:hover .social-icon {
        background-color: #62BDB2;
    }
    .social-buttons #google-btn:hover .social-icon {
        background-color: #DB4A39;
    }
    .social-buttons #rss-btn:hover .social-icon {
        background-color: #FF8B0F;
    }
    .social-buttons #pinterest-btn:hover .social-icon {
        background-color: #D43638;
    }
    .social-buttons #youtube-btn:hover .social-icon {
        background-color: #C4302B;
    }
    .social-buttons a:hover .social-text {
        display: block;
    }
    .button-left .social-icon {
        -moz-transition: background-color 0.4s ease-in 0s;
        -webkit-transition: background-color 0.4s ease-in 0s;
        background-repeat: no-repeat;
        display: block;
        float: left;
        height: 43px;
        margin-bottom: 2px;
        width: 43px;
    }
    .button-left .social-text {
        display: none;
        float: right;
        font-size: 1em;
        font-weight: bold;
        margin: 11px 40px 11px 0px;
        white-space: nowrap;
    }
    .button-right .social-icon {
        -moz-transition: background-color 0.4s ease-in 0s;
        -webkit-transition: background-color 0.4s ease-in 0s;
        background-repeat: no-repeat;
        display: block;
        float: right;
        height: 43px;
        margin-bottom: 2px;
        width: 43px;
    }
    .button-right .social-text {
        display: none;
        float: left;
        font-size: 80%;
        font-weight: bold;
        margin: 11px 0 11px 40px;
        white-space: nowrap;
    }
    .social-buttons .social-text {
        color: #FFFFFF;
    }
  4. Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
    <script>
        $(window).load(function(){
            $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
                $(this).stop();
                $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
            });
            $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
                $(this).stop();
                $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
            });
        });
    </script>
    Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
  5. Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :
    <div class='social-buttons button-right hidden-phone hidden-tablet'>
    <a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
    <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
    <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
    <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
    <span class='social-text'>Follow via Pinterest</span></span></a>
    <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
    <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
    </div>
    Ganti tulisan warna biru diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.
  6. Terakhir, Save Templates
Nah itu tadi tutorial membuat floating social bookmark dengan efek easing menjawab pertanyaaan Muhammad Farhan. Jika masih ada yang kurang jelas kebangeten.. eh silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Apapun bentuk komentar Anda akan saya hargai, but please do not spamming.

Sekian dan semoga ada manfaatnya

Tuesday, 5 February 2013

Membuat Simple Slider Otomatis Gambar Vertikal

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Kali ini saya akan memberikan satu lagi tutorial membuat slider otomatis untuk image atau gambar vertikal. Sebelumnya saya minta maaf belum bisa menjawab semua pertanyaan yang masuk karena banyak sekali kegiatan di luar yang harus saya kerjakan. Dan tentu saja saya juga belum bisa memenuhi permintaan teman-teman yang menginginkan sebuah template khusus atau modifikasi template yang sudah ada menjadi sebuah template yang SEO friendly dan valid HTML.

slider otomatis


Slider ini sangat sederhana, seperti juga slider-slider sebelumnya, slider inipun bekerja secara otomatis berdasarkan artikel terbaru dan kategori tertentu. Untuk lebih jelas silahkan klik demo diatas, slider ini saya letakkan di sidebar sebelah kanan dengan ukuran lebar 300px. Slider ini sekilas terlihat seperti slider yang ada pada template-template dari designer India seperti Lasantha Bandara, Lansindu, Sameera dan lainnya, yang masih memasukkan gambar dan URL secara manual.  Jika Anda pengguna template buatan mereka, dan ingin mengganti agar slider bekerja secara otomatis, silahkan simak berikut langkah-langkah pembuatannya :
  1. Setelah login ke Blogger, pilih blog yang ingin ditambahkan slider ini.
  2. Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
  3. Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
  4. Klik "Buka" dan masukkan kode berikut di atas kode ]]></b:skin> :
    /* Slider */
    .sompret-wrapper {float:right; position: relative;}
    .sompret { overflow: hidden; position: relative; width:300px; height:400px;}
    .image_reel { position: absolute; top: 0; left: 0; }
    .image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
    .paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
    .paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNWKLQymy4dcAX1KBPVv12CVkk3h8LDC0et3ndLHas8HhYZRIC0fLshidx7a_g89k1uIuuIXueQeuIt16W0GMpqq2ElBputOiLosEVY7jKRSmZIdjF9ecOEFDc9fPmv14d5cX7qq969k/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
    .paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGoFXQW-Wil3bvm8OZLOksIa1jkq5A9fcLS61XPeJ-Z52oauC73afUqTn362-QvS4G9EiJdWsTdqvKNiKYzm1Z_ivHF7GOZnOsENq7ZCB519U-RnWy-KsTsX23KmjNmmmQZcA2W3dgzXs/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
    .paging a:hover {font-weight: bold; border:none; outline:none;}
    .crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_5Jh3R5ksrsepK55AdY7MOKtpk5N9tBiURKrsIOGOtz38CXrVZWzAhRlWziKdss_iE22bX4KKL6bmR807r3G72IednbVah3RqwSrmyx0PReNE3heBuyUet279CniojGWRByISvTe5Y7VS/s1600/uj-opacity-40.png);padding:5px 10px;  }
    .crott a{color: #fff;font: 16px Oswald }
    .crott p{color: #fff;font: 12px Arial;}
    Kode warna merah diatas adalah ukuran slider, untuk lebar 300px dan tinggi 400px. Perhatikan semua dan Anda harus sesuaikan dengan ukuran sidebar pada template yang Anda gunakan.
  5. Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :
    <script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    jQuery(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");

    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".sompret").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;

    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});

    //Paging + Slider Function
    rotate = function(){
       var triggerID = $active.attr("rel") - 1; //Get number of times to slide
       var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

       $(".paging a").removeClass('active'); //Remove all active class
       $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
     
    $(".crott").stop(true,true).slideUp('slow');

    $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

       //Slider Animation
       $(".image_reel").animate({
           left: -image_reelPosition
       }, 500 );


    };

    //Rotation + Timing Event
    rotateSwitch = function(){
    $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
       play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
           $active = $('.paging a.active').next();
           if ( $active.length === 0) { //If paging reaches the end...
               $active = $('.paging a:first'); //go back to first
           }
           rotate(); //Trigger the paging and slider function
       }, 10000); //Timer speed in milliseconds (3 seconds)

    };

    rotateSwitch(); //Run function on launch

     //On Click
        $(".paging a").click(function() {  
            $active = $(this); //Activate the clicked paging
            //Reset Timer
            clearInterval(play); //Stop the rotation
            rotate(); //Trigger rotation immediately
            rotateSwitch(); // Resume rotation
            return false; //Prevent browser jump to link anchor
        });  

    });

    //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGQhGf89M5Oxdz7aLxQOg_nJgWRmhNvE9Edstxsw344DEij_pd1qDs69hVeP_THoZsvsvjwVks7pEIkkdXY09fAa1cfh3gLGQrQ-SrwWe79qRLe1HUtdpvd7Ytx5AFOJhyf6o6eYHZHc/s1600/no+image.jpg";
    showRandomImg = true;
    aBold = true;
    summaryPost1 = 80;
    summaryTitle = 20;
    numposts1 = 6;

    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 showrecentposts1(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
       
      for (var i = 0; i < numposts1; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
    var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'alternate') {
            posturl = entry.link[k].href;
            break;
          }
        }

    for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            pcm = entry.link[k].title.split(" ")[0];
            break;
          }
        }

        if ("content" in entry) {
          var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
          var postcontent = entry.summary.$t;}
        else var postcontent = "";
       
        postdate = entry.published.$t;

    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];

    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }

    var daystr = m+ ' ' + day + ' ' + y ;

    var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';
    document.write(trtd);    

     j++;
    }

    }

    function showrecentposts2(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
     
      for (var i = 0; i < numposts1 ; 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 = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
    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, hanya satu jquery yang ada pada sebuah template jika ada dua atau lebih akan bentrok dan salah satu fungsinya tidak jalan.. numposts:6; adalah jumlah post yang tampil pada slider
  6. Sekarang Anda tinggal mau meletakkan slider itu dimana, jika ingin diletakkan di sidebar sebelah kanan paling atas seperti terlihat pada demo. Cari kode <div id='sidebar-wrapper'> atau kode pembungkus sidebar yang ada pada template Anda, kemudian letakkan kode berikut ini sebelum atau diatas <div id='sidebar-wrapper'> :
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='sompret-wrapper'>
    <div class='sompret'>
    <div class='image_reel'>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='description'>
    <script>    
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    </div>
    </div>
    <div class='paging'>
    <a href='#' rel='1'/>
    <a href='#' rel='2'/>
    <a href='#' rel='3'/>
    <a href='#' rel='4'/>
    <a href='#' rel='5'/>
    <a href='#' rel='6'/>
    </div>
    </div></b:if>
    Keterangan :

    Tampilan slider dengan menggunakan kode diatas hanya terlihat pada postingan, jika Anda ingin slider terlihat di homepage hapus kode pertama dan terakhir yang berwarna biru muda. Slider diatas menampilkan postingan terbaru Anda, jika ingin merubah menjadi tampil per label anda tinggal menambahkan kode /-/your label antara kode default dan ?, jadinya seperti ini default/-/your label?max-results karena kode tersebut diatas ada dua, Anda harus ganti dua-duanya.
  7. Terakhir save, selesai.
Slider diatas bisa Anda modifikasi sendiri, Anda juga bisa gunakan slider ini untuk gambar horisontal (tidak harus vertikal) berusahalah untuk lebih kreatif dengan merubah ukuran panjang dan lebar yang ada pada tutorial ini atau menambahkan hiasan ribbon misalnya seperti terlihat pada demo ini, sehingga tampilannya menjadi lebih menarik. Itu tadi tutorial membuat slider sederhana kali ini, jika ada yang kurang jelas silahkan tinggalkan peasan pada kolom komentar di bawah.

Dan untuk teman-teman yang sudah berpartisipasi dan meramaikan forum diskusi pada blog ini saya mengucapkan banyak terima kasih, silahkan berdiskusi dengan bebas dan sehat. Untuk sementara saya belum bisa ikutan nimbrung karena masih banyak pekerjaan yang mesti saya selesaikan. Semua pertanyaan di luar topik artikel ini silahkan masukkan pada forum diskusi, klik menu forum diskusi yang ada pada menu navigasi atas blog ini.

NB :
Jika Anda melihat gambar pada slider kadang terlihat kadang tidak, itu karena penambahan script lazy load image yang ada pada template demo.

Thursday, 24 January 2013

Modifikasi Slider Lofslidernews Otomatis Maknyus

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Kali ini saya akan berikan satu lagi 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/AVvXsEh9ggazkkA9XsaWvhkCxR9R2s1mTO2UXnZswg_bwhxgPtka2ST0EGYO5Ipnk1F3y-5SzO_zFTiiNMjdFtEJ2fEANMae-rrVdHm_i55gwjyC8TtW8WYGlnAUiZ9Es8iQZSZVh8e6NnoAT4E-/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/AVvXsEjgGQhGf89M5Oxdz7aLxQOg_nJgWRmhNvE9Edstxsw344DEij_pd1qDs69hVeP_THoZsvsvjwVks7pEIkkdXY09fAa1cfh3gLGQrQ-SrwWe79qRLe1HUtdpvd7Ytx5AFOJhyf6o6eYHZHc/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 kali ini, silahkan dicoba dan semoga bermanfaat.

NB :
To Assal Ali, I will make tutorial slider in Johny Jogos template for you, next after this post

Sunday, 6 January 2013

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.

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | coupon codes
Kembali