-->
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Cara Membuat Related Post  / Artikel Terkait SEO untuk memperbagus blog dan supaya pengunjung bisa melihat artikel-artikel yang terkait atau label yang sesuai tema. Menambahkan Artikel terkait atau related post ini sangat penting karena bisa menambahkan nilai seo di Serp engine.

Penting sekali memasang Related Post / Artikel Terkait yang menambahkan nilai SEO untuk mempermudah pengunjung dengan artikel-artikel yang terkait. Memasang Related Post ( Artikel terkait ) akan mempercepat index ke google.

Jika anda yang masih pemula bisa langsung membaca artikel khusus buat pemula yaitu artikel Persiapan SEO untuk pemula, Anda disana bisa melihat dasar-dasar SEO sebelum membuat blog.

Cara membuat Ongoing Series seperti AWSubs
Kali ini Kang Taha akan memberikan sebuah tutorial yang sangat dicari oleh blogger anime tutorial tersebut adalah cara membuat Ongoing series seperti salah satu fansubs yaitu AWSubs (wardhanime).
Kelebihan dari fitur ongoing series ini adalah memiliki tampilan yang keren dan dilengkapi dengan gambar cover series anime sehingga memiliki daya tarik sendiri bagi pengunjung. Disamping itu cara pembuatannya cukup mudah juga. jadi tak perlu risau tentang editingnya. Disini Kang Taha akan memberikan tutorial yang begitu mudah dipahami buat para blogger anime. Langsung saja tanpa basa basi lagi berikut ini tutorial cara membuat ongoing series seperti AWSubs.

Cara Membuat Navigasi Halaman Nomor (Angka ) di Blogger Terbaru
Cara terbaru memasang atau membuat Navigasi Halaman Nomor atau Angka (Numbered Page Bavigation) di blogger.

Diistilahkan dengan Page Navigation with WP-PageNavi style, navigasi halaman untuk blogger dengan gaya navigasi halaman blog CMS WordPress.

Disebut terbaru karena kode scriptnya tidak ngelink ke Google Code dan Google Drive yang sudah dihentikan Google, sehingga semua kode script yang disimpan (di-hosting) di sana tidak work lagi.

Jika kode navigasi halaman nomor blog Anda ngelink ke Google Code, dipastikan tidakan muncul. Satu lagi yang baru: navigasi jalaman angka/nomor ini responsive (mobile friendly).

kotak komentar facebook di blogSebelumnya, kita ulas dikit, Kotak Komentar Facebook di Blog bisa bagus buat SEO, jika banyak --bahkan kebanyakan-- pengunjung Anda komentar di sana dan di-share ke akun Facebooknya.

Tapi, jika hanya sedikit, bahkan tidak ada sama sekali yang komentar di kotak komentar Facebook itu, maka sebaiknya LEPAS saja, karena hanya memperlambat loading blog Anda dan ini artinya justru mengurangi SEO Blog --Google suka banget blog yang Fast Loading!

CB sendiri "terpaksa" memasangnya sekadar untuk contoh, namun hanya di halaman posting ini dimunculkannya. Di posting lain tidak ada karena menggunakan Tag Kondisional.

Artikel Terkait (Related Post) Valid HTML5 2014- Artikel terkait atau juga related post berfungsi sebagai penunjuk kepada para pembaca blog atau visitor untuk membaca artikel lainnya yang saling berkaitan dengan artikel yang sedang dibacanya. Banyak sekali artikel terkait atau related post ini yang sudah dibuat, namun banyak Blogger yang menggunakan artikel terkait atau related post dibawah postingan ini tidak valid html5, dan sekarang pada blog Ficri Pebriyana akan membagikan artikel mengenai cara memasang atau membuat related post atau artikel terkait dibawah postingan blog. 

Menjadikan Halaman Postingan Valid HTML5itu sangat berguna dan bermanfaat sekali, ditambah dengan HomePage Valid HTML5 ini akan membantu Artikel Cepat Teridex Google. Pada tahun 2014 ini banyak sekali Blogger yang mengiginkan blognya Valid HTML5 namun ketika mereka menggunakan Template Blog yang sudah dipasangnya sejak lama, mereka kesusahan dalam menjadikan blognya Valid HTML5. Jadi untuk memudahkan blog valid html5 silahkan download saja template yang seo friendly tahun 2014.

Cara Membuat Kotak Pencarian di Blog Dengan CSS - Tak lengkap rasanya ketika sebuah blog belum memiliki sebuah kotak pencarian, kotak pencarian ini sangat bermanfaat dan berguna bagi pengunjung blog yang sedang mencari artikel di blog kita yang mungkin bermanfaat dan sangat dibutukan bagi mereka, dengan begitu kita perlu menambahkan sebuah widget pencarian di blog kita untuk mempermudah pengunjung mencari arikel lainnya. Kotak pencarian pada blog banyak sekali bentuk dan macamnya, namun pada kali ini blog akan membagikannya dengan menggunakan CSS3, jadi ini merupakan kotak pencarian keren dan paling baru dengan menggunakan css3.

Mengatasi Komentar Blog Yang Tidak Muncul - Tidak disangka komentar blog menghilang atau tidak muncul pada sebagian postingan atau ada juga kotak komentar blog yang menghilang begitu saja, menghilangnya kotak komentar atau form komentar pada blog disebabkan beberapa faktor ada yang disebabkan oleh kode css, ada juga yang disebabkan karena Anda salah menekan tombol atau mengatur pengaturan pada postingan blog Anda, atau bahkan Anda menghapus beberapa kode htmldengan tidak sengaja. Semua hal itu bisa saja terjadi pada blog Anda, saya mengalami hal ini ketika saya akan membuat sebuah template blog responsive karena kebetulan saat ini sedang maraknya algoritma baru mobilegeddon yang mengutamakan penelusuran melalui seluler atau handphone, oleh sebab itu saya membuat sebuah template baru yang cocok untuk pengguna seluler atau mobile.

Membuat Garis Pelangi Dengan CSS di Blog - Cara membuat garis di blog warna-warni seperti pelangi di blog memang sangat bagus terlihat lebih berwarna, sebelumnya saya juga pernah membuat artikel mengenai cara membuat efek teks pelangi sekarang saya memberikan tutorial membuat garis pelangi dengan css di blog. Garis ini sangat cocok digunakan untuk di bagian header blog atau bagian footer blog agar desainnya terlihat lebih berwarna dan sangat menarik untuk di lihat oleh pengunjung blog. 

Berhubung ada beberapa permintaan dari para pengguna template yang saya desain yang ingin menambahkan footer kolom (footer column), kali ini saya akan share cara membuat atau menambahkan 4 kolom pada template blogger tersebut.
Membuat Footer Kolom Pada Template Blogger

Cara Membuat atau menambah Footer kolom pada Template

  • Lahkah pertama login ke blog anda > Design > Edit HTML dan jangan lupa back up terlebih dahulu template yang anda gunakan
  • Setelah itu cari kode ]]></b:skin> dan paste kode Css berikut tepat di atas kode ]]></b:skin>

/*----- Colom Footer Bamz-----*/
#footer { margin:auto; padding: 10px 0px 0px 0px; width: 100%; border-top:1px dotted;}
#footer-wrapper { margin:auto;width: 860px; border:0; }
#footer-wrapper { float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#333; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
.footer {margin: 0; padding: 0;}
.footer .widget {margin: 0; padding: 10px 0px 0px 0px;}
.footer h2 { margin: 0px 0px 10px 0px;color:#333; text-transform:uppercase; font: bold 12px Arial, Tahoma, Verdana;
}
.footer ul { color:#333; margin: 0 auto; padding: 0; list-style-type: none; }
.footer li { display:block; color:#333; line-height: 1.6em; margin-left: 0 !important; padding: 4px;list-style-type: none; }
.footer li a { text-decoration:none; color: #333; }
.footer li a:hover { text-decoration:none; color:#000;}
.footer li:hover { display:block;}
/*----- End Colom Footer Bamz-----*/
  • Masih pada halaman Edit HTML, cari kode <div id='credits'>. Kalau sudah ketemu silahkan anda paste kode berikut tepat di atas kode <div id='credits'>
<!-- Kolom Footer -->

<div id='footer'>
<div id='footer-wrapper'>
<div id='footer-wrapper'>
<b:section class='footer' id='footer1' preferred='yes'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer2' preferred='yes'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer3' preferred='yes'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<!-- end Kolom footer Bawah -->
Nah sekarang simpan dan lihat hasilnya, atau anda preview dulu sebelum di simpan :D.

Bisakah cara membuat kolom ini digunakan untuk template lain?

Cara membuat footer kolom ini sebenarnya bisa di gunakan untuk semua template, cuma mungkin cara penempatannya yang berbeda karena setiap template memiliki elemen yang berbeda. Kalau anda ingin mencobanya, silahkan saja. Dan cara paling gampangnya adalah paste kode HTML (kode ke-2) di atas kode </body>.

Hasil yang anda buat ini nantinya akan sama seperti kolom footer pada blog ini. Kalau anda ingin menjadikannya 3 atau mungkin 2 kolom tentu saja bisa. Bagaimana cara membuat footer tersebut menjadi 3 kolom?

Cara merubah footer menjadi 3 kolom

Untuk menjadikannya 3 kolom anda hanya tinggal mengubah lebar kolomnya menjadi 32%. Lihat kodenya di bawah ini
# footer-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#ddd; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
Selanjutnya hapus kode

<div id='footer-wrapper'>
<b:section class='footer' id='footer4' preferred='yes'>
</b:section>
</div>
Simpan template dan jadilah 3 kolom Footer.

Cara Memasang Realated Post Keren dengan Gambar

Kali ini saya akan posting artikel tentang cara membuat related post dengan thumbnail gambar di blog. Ingin tahu caranya bukan? Dengan memberikan gambar pada artikel terkait pada blog kita maka blog akan terlihat lebih menarik,,, naah dengan itu mazinu akan memberikan tutorial blogger ini kepada kalian yang sebelumnya tutorial ini sudah saya pakai dan hasilnya lumayan bagus,, tapi mazinu lebih suka yang simpel2 saja seperti yang mazinu gunakan saat ini! yaitu dengan memasang Artikel Terkait dengan icon sendiri. Tapi semua itu selera sendiri-sendiri. benar kan?

yang hasil Realated Past-nya nanti seperti ini : (gambar disertai judul artikel)

Memasang Script Untuk Mencegah Orang Lain Mencopas dan Meresource Blog Anda - Sebelumya saya akan sedikit menjelaskan fungsi dan manfaat Mematikan/mendisable CTRL+U dan CTRL+S ,, yaitu agar blog kita aman dari orang-orang yang mungkin akan meng-copas artikel yang kita buat. Emm memang terkadang sebagian besar orang tidak suka jika artikelnya di copas / copi-paste mentah-mentah tanpa perubahan bahasa penulisannya, tapi ada juga yang mempersilahkan mengcopas blognya. Tapi saya sarankan kepada kalian jika ingin membuat artikel buatlah dengan tata bahasa kalian sendiri agar terkesan lebih menarik dan membanggakan dengan apa yang telah kita buat, Sehingga yang membaca artikel kita terasa bersahabat kepada kita. Naah untuk kalian yang ingin mempraktekan totorial ini silahkan disimak sedikit uraian buat kalian tentang bagaimana cara mematikan/mendisable CTRL+U dan CTRL+S agar Blog menjadi Aman. Silahkan disimak tutorialnya dibawah ini :


Cara Membuat Widget Featured Post Sidebar Berdasarkan Label Keren  - Widget Memang Sekarang ada banyak ragamnya. Akan tetapi banyak pula yang hanyamemiliki Simple design ataupun tidak responsive. Tapi kali ini saya akan memberikan tutorial yang menyangkup keduanyaYaitu Keren Dan Responsive.
 
Oke Guys. Setelah Saya Memberikan Tutorial Cara Membuat Subscribe Form Responsive Dan Keren Kali Saya akan Memberikan Tutorial Cara Membuat Widget Featured Post Berdasarkan Label Keren Dan Responsive .Cara Memasang nya sangat gampang, bisa dilakukan dengan cara :

Kopy Script Dibawah Ini > Pilih Tata Letak ( LayOut ) > Add a gadget > HTML/Javascript
  Langsung aja Nih Script nya :v
Note : Tulisan warna merah diganti dengan blog kalian dan label kalian :) 
<style> 
.tabs-md {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
    z-index: 2;
}
.tabs-md .tab {
clear:inherit !important;
}
.collection .collection-item.avatar {
    height: inherit !important;
    min-height: 64px;
    max-height: 83px; 
}
.collection-md {
   border:0;
   border-bottom: 1px solid #E0E0E0;
}
</style>
<script>
function showrecentpostswiththumbs(json) {
    document.write('<ul class="collection collection-md">');
    for (var i = 0; i < numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                var commenttext = entry.link[k].title;
                var commenturl = entry.link[k].href;
            }
            if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
            }
        }
        var thumburl;
        try {
            thumburl = entry.media$thumbnail.url;
        } catch (error)


        {
            s = entry.content.$t;
            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 != "")) {
                thumburl = d;
            } else thumburl = 'http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';

        }


        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
        var monthnames = new Array();
        monthnames[1] = "Jan";
        monthnames[2] = "Feb";
        monthnames[3] = "Mar";
        monthnames[4] = "Apr";
        monthnames[5] = "May";
        monthnames[6] = "Jun";
        monthnames[7] = "Jul";
        monthnames[8] = "Aug";
        monthnames[9] = "Sep";
        monthnames[10] = "Oct";
        monthnames[11] = "Nov";
        monthnames[12] = "Dec";
        document.write('<li class="collection-item avatar">');


        if (showpostthumbnails == true)
            document.write('<img class="circle" src="' + thumburl + '"/>');
        document.write('<b><a href="' + posturl + '" target ="_top">' + posttitle + '</a></b><br/>'); 

        if ("content" in entry) {
            var postcontent = entry.content.$t;
        } else
        if ("summary" in entry) {
            var postcontent = entry.summary.$t;
        } else var postcontent = "";
        var re = /<\S[^>]*>/g;
        postcontent = postcontent.replace(re, "");


        if (showpostsummary == true) {

            if (postcontent.length < numchars) {
                document.write('<i>');
                document.write(postcontent);
                document.write('</i>');
            } else {
                document.write('<i>');
                postcontent = postcontent.substring(0, numchars);
                var quoteEnd = postcontent.lastIndexOf(" ");
                postcontent = postcontent.substring(0, quoteEnd);
                document.write(postcontent + '...');
                document.write('</i>');
            }
        }

        var towrite = '';
        var flag = 0;
        document.write('<div>');

        if (showpostdate == true) {
            towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear;
            flag = 1;
        }

        if (showcommentnum == true) {
            if (flag == 1) {
                towrite = towrite + ' | ';
            }
            if (commenttext == '1 Comments') commenttext = '1 Comment';
            if (commenttext == '0 Comments') commenttext = 'No Comments';
            commenttext = '<a href="' + commenturl + '" target ="_top">' + commenttext + '</a>';
            towrite = towrite + commenttext;
            flag = 1;;
        }

        if (displaymore == true) {
            if (flag == 1) towrite = towrite + ' | ';
            towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top"><small>READ MORE</small></a>';
            flag = 1;;
        }




        document.write(towrite);

        document.write('</div></li>');
        if (displayseparator == true)
            if (i != (numposts - 1));
    }
    document.write('</ul>');

}
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 150;
</script> 
<div class="row">
    <div class="col s12">

      <ul class="tabs tabs-md">
        <li class="tab col s3"><a class="active" href="#test1">LABEL 1</a></li>
        <li class="tab col s3"><a href="#test2">LABEL 2</a></li> 
        <li class="tab col s3"><a href="#test3">LABEL 3</a></li> 
      </ul> 
    </div>
    <div id="test1" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 1?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div>
    <div id="test2" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 2?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div>
    <div id="test3" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 3?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div> 
</div>

Jumpa lagi dengan saya, hari ini langit agak mendung, mungkin sebentar lagi hujan. Kali ini saya akan berikan tutorial cara pasang slideshow di bawah header. Saya mengambil kode yang paling sederhana dengan menu slideshow yang juga sangat sederhana. Slideshow sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan template 3pictsel bikinan mas Riki dan meletakkannya di dalam main post, silahkan cek disini.


Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih 660px. Buat anda yang memiliki lebar kolom post lebih atau kurang dari 660px silahkan disesuaikan saja.
  1. Login dulu di blogger.
  2. Masuk ke Rancangan >> Edit HTML.
  3. Jangan lupa klik Expand Template Widget karena akan membuat anda jadi pusing dengan kode yang panjang.
  4. Copy paste kode berikut diatas kode ]]></b:skin>
  5. /* SLIDESHOW */ 
    #slider-holder{width:660px;height:200px;overflow:hidden;margin-left:-20px; margin-right:10px; padding:0} #s3slider{width:660px;height:660px;position:relative;overflow:hidden} 
    #s3sliderContent{width:660px;position:absolute;top:0;margin-left:0}
    .s3sliderImage{float:left;position:relative;display:none} 
    .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:45px;width:660px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px} 
    .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px} 
    .s3sliderImage span a.featured-title:hover{color:#999} 
    .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888} 
    .s3sliderImage span a:hover{color:#555}
  6. Kemudian copas kode berikut diatas kode </head>
  7. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
    <script type='text/javascript'>
    <!--//--><![CDATA[//><!--
    (function($){ 
        $.fn.s3Slider = function(vars) {      
            var element     = this;
            var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
            var current     = null;
            var timeOutFn   = null;
            var faderStat   = true;
            var mOver       = false;
            var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
            var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
            items.each(function(i) {
                $(items[i]).mouseover(function() {
                   mOver = true;
                });
                $(items[i]).mouseout(function() {
                    mOver   = false;
                    fadeElement(true);
                });
            });
            var fadeElement = function(isMouseOut) {
                var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
                thisTimeOut = (faderStat) ? 10 : thisTimeOut;
                if(items.length > 0) {
                    timeOutFn = setTimeout(makeSlider, thisTimeOut);
                } else {
                    console.log("Poof..");
                }
            }
            var makeSlider = function() {
                current = (current != null) ? current : items[(items.length-1)];
                var currNo      = jQuery.inArray(current, items) + 1
                currNo = (currNo == items.length) ? 0 : (currNo - 1);
                var newMargin   = $(element).width() * currNo;
                if(faderStat == true) {
                    if(!mOver) {
                        $(items[currNo]).fadeIn((timeOut/6), function() {
                            if($(itemsSpan[currNo]).css('bottom') == 0) {
                                $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                    faderStat = false;
                                    current = items[currNo];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            } else {
                                $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                    faderStat = false;
                                    current = items[currNo];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            }
                        });
                    }
                } else {
                    if(!mOver) {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                $(items[currNo]).fadeOut((timeOut/6), function() {
                                    faderStat = true;
                                    current = items[(currNo+1)];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            });
                        } else {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                    faderStat = true;
                                    current = items[(currNo+1)];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            });
                        }
                    }
                }
            }
            makeSlider();
        }; 
    })(jQuery); 
    //--><!]]></script>
    <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;#s3slider&#39;).s3Slider({
    timeOut: 4000
    });
    });
    </script>
  8. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan anda copas kode berikut setelah kode <div id='main-wrapper'>
  9. <div id='slider-holder'>
    <div id='s3slider'>
    <ul id='s3sliderContent'>
    <li class='s3sliderImage' style='display: list-item;'>
    <a href='LETAK LINK DISINI 1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOjUq5BFaV3ik8EqeI-m2bpFgNYHfBzP7g7m0Bz9MoyGuq0r1lBP3xZY-RQwGI5go_s1CkLB7tKlcAId73mWyDIj4VItmCh8wECVpNrDwLVREdW9fH3BrTkEonsbjfXpVOmrM5Dy7XHFQ/s1600/NorahJones.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: block;'>
    <a class='featured-title block' href='LETAK LINK DISINI 1'>INI GAMBAR NORAH JONES</a><br/>
    Norah Jones adalah seorang musisi jazz yang sudah banyak mendapatkan Grammy Award
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 2'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivqPUh9IR_0xQr7P-YmhuUzzpvitBhWf3sE3LnC0VJLvmGYGExeYzzb9cgOYpLlvNGYHbjE_K2pbw-ADapIQM6c1j__ZSpze6a5dStHr15K5Hkoi_MXNIZTdSXyAbBcfhEEYxZA6QlvN0/s1600/174456_1_f.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 2'>FOURPLAY</a><br/>
    Nggak usah dijelaskan udah ada tulisanya diatas
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 3'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv5eJ5xyIIhm391KodwWicQO_Sprhd4Rn6J1U8yHXsiklGSyNU_AkjUPWDn02qCrdgJvz8iik9n6ZRfK6S8Jea6sfFvqDOq7xB3rCjz8wOJfucJ02y65fiFmhhj2I1YZU438fKinpDgpY/s1600/andien.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 3'>MBAK ANDIEN</a><br/>
    Ini orangnya yang..............
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 4'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzikTePjls06LXtxkUtw1xBK9tQQ2HUoqdulNNJ8u8T2DW7B4dfbJbpOaYrSyla0CBvJT5BS8T9FBme7dZdveJ4eubLKN8RaMnM_c-m_R2PxX9Sf0U1WBI-Ecpoqt5TfEwowf9U22Qg8/s1600/Alanis-Morissette-2.JPG' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 4'>ALANIS MORISSETTE</a><br/>
    Tampangnya sih biasa, tapi lagunya teman-teman semua harus mendengarkan
    </span>
    </li>
    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 5'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNVbrP_SNd8aldFtfTbYWsRwqw-mkEYpSV2olTGq5yG09NnuB8ifg2OsD-Mb8rE1qGW0jdxZJbqdFgFzyjp2zllF26oxCfLvmEsbactSlcdR3Ei-txpFYCd8Nu1VQ6KvmZ3RD_owKgLHw/s1600/Anne-Hathaway-02.jpg' style='width: 660px; height: 200px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 5'>WANITA CANTIK</a><br/>
    Siapa coba gambar cewek diatas? Kasih jawabannya di kotak komentar ya....
    </span>
    </li>
    <li class='clear s3sliderImage'/>
    </ul>
    </div>
    </div>
  10. Simpan Template
Keterangan :
  • Perhatikan lebar 660px, silahkan sesuaikan saja dengan lebar post template anda.
  • Perhatikan juga angka -20px pada kode css-nya, saya gunakan margin-left:-20px karena menyesuaikan dengan demo template yang saya gunakan. 
  • Tulisan yang berwarna merah ganti dengan deskripsi tentang gambar anda.
  • Kode yang berwarna biru adalah kode url untuk gambar yang sudah anda upload sebelumnya.
Gimana teman-teman, cukup panjang kan? Jangan khawatir, saya yakin teman-teman semua bisa melakukannya, semoga berhasil ya !