Membuat Desain Halaman 404 Error Pada Blog

Membuat Desain Halaman 404 Error Pada Blog – masih erat kaitannya dengan artikel karena ini postingan berkelanjutan dari yang sebelumnya yakni pada pembahasan Memahami Konsep Redirect Halaman Blog karena pada tutorial ini akan saya bahas untuk tata cara membuat pesan pada halaman pencarian yang tidak di temukan saat search engine mengindeks. Karena biasanya jika sebuah artikel hilang dari hasil pencarian maka pada halaman tersebut hanya akan menampilkan pesan Posts filed under Search results atau No posts matching the query. Pesan seperti itu dapat kita custom dengan mudah menggunakan fasilitas blogger yang terdapat pada menu Preferensi penelusuran. Hal ini saya kaitkan dengan artikel sebelumnya karena pada tutorial ini saya membuat agar pada saat search engine gagal mengindeks maka halaman blog akan menampilkan form search untuk mengarahkan kembali lalu lintas blog dan juga mempermudah pengunjung. Berikut langkah-langkah cara Membuat Desain Halaman 404 Error Pada Blog yang nantinya akan menampilkan pesan jika terdapat halaman yang error.
Demo
Pada halaman dashboard blog masuk ke menu Preferensi penelusuran. Disitu akan di tawarkan fasilitas Kesalahan dan Pengalihan, pada fitur blogger tersebut lakukan edit pada “Pesan Khusus untuk Laman Tidak Ditemukan” form yang nantinya muncul akan kita gunakan untuk mengkustom pada halaman yang tidak ditemukan dengan menggunakan CSS, jQuery dan HTML yang dapat kita taruh didalamnya karena seluruh elemen tersebut dapat dimuat dengan baik termasuk juga teks.
Sekarang kita flashback ke tutorial sebelumnya yakni pada artikel yang berjudul Form Search Blogger Dengan Ajax jQuery. Disitu sudah saya jelaskan untuk membuat halaman search engine yang berbasis Google AJAX Search API, sekarang copy saja seluruh kode yang terdapat pada artikel tersebut kemudian lakukan sedikit custom lagi bisa dengan menambahkan suatu teks pesan atau bisa juga menggunakan gambar. Jika ingin menggunakan gambar, desainlah gambar yang akan digunakan menjadi sebagus mungkin.

Jika seluruh kode sudah di copy, sekarang perhatikan pada bagian HTML antara kode <div id="page"> sampai </div> yang paling bawah. Karena disini saya menggunakan gambar, jadi saya akan menyisipkan sebuah gambar yang nanti letaknya di bagian atas form search dengan memasang markup URL gambar tepat dibawah <div id="page">. Maka cara penerapannya seperti kode yang berwarna merah berikut ini, nanti anda dapat menyesuaikannya dengan menggunakan gambar lain atau bisa juga menggunakan teks pesan biasa.

<div id="page">
<a href="http://mas-andes.blogspot.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXysoFX8ga3vi2MsJY9ArCX-tYBvlPdjjVQf7OZQUUEmaxU7K6slL-jcSH_9ildGUAMiSMrFF3LqW2RflsTgN9c05zdQx7spWLOYjN5uzrj14p7o6BYbtH-G_Vbwm9oIAfgUz8V8GwMz4/h316/error-404.jpg" alt="error 404" title="Halaman Tidak Ditemukan"/></a>
<form id="searchForm" method="post">
<fieldset>
<input id="s" type="text" />
<input type="submit" value="Search" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Search</label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Search The Web</label>
</div>
<ul class="icons">
<li class="web" title="Web Search" data-searchType="web">Web</li>
<li class="images" title="Image Search" data-searchType="images">Images</li>
<li class="news" title="News Search" data-searchType="news">News</li>
<li class="videos" title="Video Search" data-searchType="video">Videos</li>
</ul>
</fieldset>
</form>
</div>
<div id="resultsDiv"></div>

Jika sudah, masukan kode seluruhnya mulai dari CSS, jQuery sampai HTML kedalam form “Pesan Khusus untuk Laman Tidak Ditemukan” pada Preferensi penelusuran menu blogger. Setelah tersimpan, maka halaman tersebut akan ditampilkan jika terjadi kesalahan pada suatu halaman yang gagal di indeks.

Form Search Blogger Dengan Ajax jQuery

Form Search Blogger Dengan Ajax jQuery – ini merupakan cara dimana untuk membangun sebuah form halaman search engine pada halaman web/blog yang nantinya dapat kita custom untuk berbagai keperluan dalam memfasilitasi web/blog tersebut. Form search ini layaknya seperti halaman pencarian google dimana nantinya dapat digunakan untuk mencari baik itu artikel, gambar, news berita maupun video, sehingga bisa disesuaikan untuk berbagai niche web/blog. Jika kita lihat dari cuplikan kode dibawah, pada googleSearch () berfungsi untuk mengirimkan permintaan JSON ke Google API dan menghasilkan markup untuk memasukkan ke resultsDiv. Saat pertama mengakses nanti halaman masih kosong dan ketika melakukan pencarian maka hasil akan di tampilkan dengan 8 post serta tombol More yang terdapat di bagian bawah hasil pencarian untuk meload hasil lebih banyak lagi yang di tampilkan. Untuk penerapannya pada tutorial ini saya taruh kedalam halaman statis blog dan berikut cara memasang Form Search Blogger Dengan Ajax jQuery.

Setelah masuk pada halaman dashboard blogger langsung saja menuju ke page statis yang terdapat pada menu Laman Baru dan tambahkan Laman Kosong. Pada halaman entri gunakan mode HTML untuk memasukan kode berikut ini.

<style type='text/css'>
#searchForm{background-color:#4C5A65;position:relative;margin:0 0 80px 0;padding:10px;}
fieldset{border:none}
#searchInputContainer{width:420px;height:34px;background:#fff;float:left;margin-right:12px}
#s{border:1px solid #52e052;color:#888;background:#f1f1f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzs9lLqP6P3nvoAy1dlXLvl9-iFOkD6Xnyjt4NWysSNLBthcEsZV3ZNt4OK1IkINcX83LlFuzwNp0Ued3YN5r2j1VD5gb6QbpzHzfE9uRU-QP2mpFnmrKC5F8z0BSSts99mKHj-6-H-rxG/s30/search_icon.png) no-repeat;float:left;font-family:Arial,Helvetica,sans-serif;font-size:15px;height:34px;line-height:34px;margin-right:12px;outline:medium none;text-shadow:1px 1px 0 #FFF;width:385px;padding:0 0 0 25px}
.icons{list-style:none;height:19px;position:relative;margin:10px 0 0 425px}
.icons li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX4Jkdr0neYsRZgiUJRPbBctXknUwcjdlfv6S5ELimz6A9KPk_wIrgfNP49GIW25zoi9s4E2_TOdN6r1dmvxlZ-uc_GZcXvBlIOVqEG9CCk7AVih0TH9Hby_uIOzR_mnYv4fjekO5VGws/h120/icons.png) no-repeat;float:left;height:19px;text-indent:-9999px;cursor:pointer;margin-right:5px}
li.web{width:15px}
li.images{width:22px;background-position:-18px 0}
li.images.active,li.images:hover{background-position:-18px bottom}
li.news{width:14px;background-position:-44px 0}
li.news.active,li.news:hover{background-position:-44px bottom}
li.videos{width:17px;background-position:right 0}
li.videos.active,li.videos:hover{background-position:right bottom}
span.arrow{width:11px;height:6px;position:absolute;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6zzslZvFBqpV10wEu6NNsPJP3p0bYj6yGP3miBjmRtDnezKswpbU_s97hsnmW-k-CDHV4yK4Z6tuGrddLkkZ9D1UcOZ1nH7jR5UsLuXbsQBcjkZ1N01WiOmNIfopjixIUvCRw6oTUwYo/h120/arrow.png) no-repeat;left:0;margin:15px 0 0 5px;}
#submitButton{background:#52e052;color:#000;width:83px;height:36px;overflow:hidden;text-transform:uppercase;font-weight:bold;border:1px solid #32CD32;outline:1px solid #228B22;cursor:pointer}
#searchInContainer{float:left;margin-top:5px;width:400px;text-align:left !important;}
label{color:#DDD;cursor:pointer;font-size:11px;position:relative;right:-2px;top:-2px;margin-right:10px;white-space:nowrap}
input[type=radio]{cursor:pointer}
.pageContainer{margin-bottom:50px;}
p.notFound{text-align:center;padding:0 0 40px}
.webResult{text-shadow:1px 1px 0 #586a75;margin-bottom:20px}
.webResult h2{background-color:#5D6F7B;font-size:18px;font-weight:400;padding:8px 20px}
.webResult h2 b{color:#fff}
.webResult h2 a{color:#eee;border:none}
.webResult p{line-height:1.5;padding:15px 20px;color:#222;}
.webResult p b{color:#000}
.webResult > a{margin-left:20px}
.imageResult{float:left;height:180px;text-align:center;width:152px;overflow:hidden;margin:0 0 20px 20px}
.imageResult img{display:block;border:none}
.imageResult a.pic{border:2px solid #333;outline:1px solid #777;display:block;margin:0 auto 15px}
#more{width:83px;height:24px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0wId251_XQGhA3htdcubrVh16GZgyTpbzz3_UYq5B8TBDcnpCRzLbhj_iepmctoWvk7qHojHsHmzoDms9ZgJBMqVE_Pi36OPQc8eyK4PCxfQLZnQNrdCu9H9zkyK8004hvKUOAqzZg0/h120/more.png) no-repeat;cursor:pointer;margin:40px auto}
li.web.active,li.web:hover,#submitButton:hover,#more:hover{background-position:left bottom}
#page{ margin:0 auto; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    function n(t) {
        t = $.extend({}, e, t);
        t.term = t.term || $("#s").val();
        if (t.searchSite) {
            t.term = "site:" + t.siteURL + " " + t.term
        }
        var i = "http://ajax.googleapis.com/ajax/services/search/" + t.type + "?v=1.0&callback=?";
        var s = $("#resultsDiv");
        $.getJSON(i, {
            q: t.term,
            rsz: t.perPage,
            start: t.page * t.perPage
        }, function (e) {
            var i = e.responseData.results;
            $("#more").remove();
            if (i.length) {
                var o = $("<div>", {
                    className: "pageContainer"
                });
                for (var u = 0; u < i.length; u++) {
                    o.append(new r(i[u]) + "")
                }
                if (!t.append) {
                    s.empty()
                }
                o.append('<div class="clear"></div>').hide().appendTo(s).fadeIn("slow");
                var a = e.responseData.cursor;
                if (+a.estimatedResultCount > (t.page + 1) * t.perPage) {
                    $("<div>", {
                        id: "more"
                    }).appendTo(s).click(function () {
                        n({
                            append: true,
                            page: t.page + 1
                        });
                        $(this).fadeOut()
                    })
                }
            } else {
                s.empty();
                $("<p>", {
                    className: "notFound",
                    html: "No Results Were Found!"
                }).hide().appendTo(s).fadeIn()
            }
        })
    }
    function r(e) {
        var t = [];
        switch (e.GsearchResultClass) {
        case "GwebSearch":
            t = ['<div class="webResult">', '<h2><a href="', e.unescapedUrl, '" target="_blank">', e.title, "</a></h2>", "<p>", e.content, "</p>", '<a href="', e.unescapedUrl, '" target="_blank">', e.visibleUrl, "</a>", "</div>"];
            break;
        case "GimageSearch":
            t = ['<div class="imageResult">', '<a target="_blank" href="', e.unescapedUrl, '" title="', e.titleNoFormatting, '" class="pic" style="width:', e.tbWidth, "px;height:", e.tbHeight, 'px;">', '<img src="', e.tbUrl, '" width="', e.tbWidth, '" height="', e.tbHeight, '" /></a>', '<div class="clear"></div>', '<a href="', e.originalContextUrl, '" target="_blank">', e.visibleUrl, "</a>", "</div>"];
            break;
        case "GvideoSearch":
            t = ['<div class="imageResult">', '<a target="_blank" href="', e.url, '" title="', e.titleNoFormatting, '" class="pic" style="width:150px;height:auto;">', '<img src="', e.tbUrl, '" width="100%" /></a>', '<div class="clear"></div>', '<a href="', e.originalContextUrl, '" target="_blank">', e.publisher, "</a>", "</div>"];
            break;
        case "GnewsSearch":
            t = ['<div class="webResult">', '<h2><a href="', e.unescapedUrl, '" target="_blank">', e.title, "</a></h2>", "<p>", e.content, "</p>", '<a href="', e.unescapedUrl, '" target="_blank">', e.publisher, "</a>", "</div>"];
            break
        }
        this.toString = function () {
            return t.join("")
        }
    }
    var e = {
        siteURL: "mas-andes.blogspot.com",
        searchSite: true,
        type: "web",
        append: false,
        perPage: 8,
        page: 0
    };
    var t = $("<span>", {
        className: "arrow"
    }).appendTo("ul.icons");
    $("ul.icons li").click(function () {
        var n = $(this);
        if (n.hasClass("active")) {
            return false
        }
        n.siblings().removeClass("active");
        n.addClass("active");
        t.stop().animate({
            left: n.position().left,
            marginLeft: n.width() / 2 - 4
        });
        e.type = n.attr("data-searchType");
        $("#more").fadeOut()
    });
    $("#siteNameLabel").append(" " + e.siteURL);
    $("#searchSite").click();
    $("li.web").click();
    $("#s").focus();
    $("#searchForm").submit(function () {
        n();
        return false
    });
    $("#searchSite,#searchWeb").change(function () {
        e.searchSite = this.id == "searchSite"
    })
})
</script>
<div id="page">
<form id="searchForm" method="post">
<fieldset>
<input id="s" type="text" />
<input type="submit" value="Search" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Search</label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Search The Web</label>
</div>
<ul class="icons">
<li class="web" title="Web Search" data-searchType="web">Web</li>
<li class="images" title="Image Search" data-searchType="images">Images</li>
<li class="news" title="News Search" data-searchType="news">News</li>
<li class="videos" title="Video Search" data-searchType="video">Videos</li>
</ul>
</fieldset>
</form>
</div>
<div id="resultsDiv"></div>

Ganti mas-andes.blogspot.com dengan URL blog anda.

Setelah selesai custom bisa langsung di publish. Untuk mengkustom tampilannya bisa di sesuaikan sendiri pada kode CSSnya dengan melakukan beberapa perubahan yang kiranya bisa sebagus mungkin.

Memahami Konsep Redirect Halaman Blog

Memahami Konsep Redirect Halaman Blog – seperti yang kita tahu, bahwa sangat di sayangkan apabila kita mempunyai sebuah blog dan memiliki halaman yang sudah populer dan sudah di kenal oleh banyak orang namun halaman tersebut sudah tidak bisa di akses lagi atau halaman tidak ditemukan alias error. Blog berubah seiring waktu, karena tulisan pada halaman dapat kita tambahkan dan dapat juga kita hapus atau bisa juga terhapus baik itu secara di sengaja maupun tidak. Untuk menghindari hal tersebut, terlebih dahulu pada artikel ini saya akan membahas untuk menghindari kemungkinan hal-hal tersebut agar suatu saat apabila terjadi kesalahan pada halaman dapat kita custom sedemikian rupa hingga tidak terjadi error. Redirect adalah mengalihkan suatu URL halaman ke URL halaman yang lain pada sebuah web/blog, atau bisa di artikan mengarahkan pengunjung saat proses indexing dari halaman lama ke halaman yang baru. Jika sebagian masih ada yang kurang paham mengenai fungsi Redirect mari kita bahas sama-sama, mungkin hal ini suatu saat dapat di perlukan untuk mengarahkan pengunjung ke halaman baru.

Ketika kita mengelola sebuah situs web/blog, kemungkinan besar kita tidak terhindarkan dari banyak hal termasuk juga kesalahan pada perayapan search engine. Untuk menghindari hal ini maka kita perlu mengubah lokasi dari suatu halaman web/blog. Namun jika halaman tersebut sudah populer, bahkan banyak link dari situs lain yang menuju ke halaman tersebut maka tidak hanya pengunjung saja yang tidak bisa mengakses melainkan search engine juga sudah tidak bisa mengindeks halaman tersebut, orang yang mencoba untuk mengakses halaman akan menerima pesan "Halaman Tidak Ditemukan - 404" / “Page Not Found - 404”. Untuk kasus ini, hal yang terbaik adalah untuk mengganti halaman lama ke halaman yang baru supaya pengunjung dan search engine dapat mengindeks kembali halaman yang error. Ini adalah langkah dan sebagai upaya untuk selalu bekerja keras dan mempelajari cara-cara berkualitas di mana untuk mengarahkan lalu lintas ke situs web/blog. Dalam hal ini terdapat beberapa cara untuk masing-masing keperluan yang berbeda dalam melakukan Redirect, berikut ada beberapa cara untuk Redirect.

Pertama kita pahami terlebih dahulu mengenai fungsi HTML meta refresh. Fungsi refresh di gunakan untuk membuat penyegaran kembali pada halaman sebuah blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet, perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol refresh. Untuk membuatnya hanya perlu menambahkan kode dibawah ini kedalam template lalu menaruhnya di antara kode <head> dan </head>

<meta http-equiv="refresh" content="30"/>

Sedikit uraian dari kode diatas, content="30" fungsi angka tigapuluh disitu adalah menunjukan bahwa proses auto refresh akan dilakukan dalam waktu 30 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena dapat membuat pengunjung merasa kesal.

Fungsi refresh selain untuk menyegarkan kembali halaman blog, masih terdapat fungsi lain yakni berfungsi untuk Redirect dari satu URL halaman ke URL halaman yang lain. Ini berfungsi jika ingin mengarahkan pengunjung web/blog ke alamat situs yang anda inginkan. Cara ini dugunakan untuk mengarahkan seluruh isi blog dari URL lama ke URL yang baru. Misalkan saja anda membuat blog baru sedangkan blog yang lama ingin di non-aktifkan, atau mungkin anda telah berganti domain TLD. Alangkah baiknya kita memakai fungsi refresh yang di setting secepat mungkin yakni waktu refresh di set menjadi 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di arahkan langsung ke alamat baru yang di inginkan. Untuk menggunakan fungsi Redirect ini caranya pasang kode berikut ini seperti langkah diatas.

<meta http-equiv="refresh" content="0; url=http://contoh.blogspot.com" />

Atau bisa juga menggunakan metode JavaScript redirect.

<script type="text/javascript">
window.location = "http://contoh.blogspot.com";
</script>

Selain cara-cara diatas bisa juga dengan mengunakan Custom fitur Redirect pada blogger yang akan memungkinkan kita untuk mengambil URL lama dan mengarahkan ke URL yang baru. Cara ini digunakan untuk mengalihkan sebagian kecil halaman posting yang hilang. Langkahnya juga cukup mudah, setelah masuk ke dashboard blogger klik pada Setelan lalu pilih Preferensi Penelusuran. Disitu kita dapat mengkustom Kesalahan dan pengalihan menggunakan Pengalihan Khusus.

Kolom Dari: di isi sub link halaman lama, misal:
/2013/11/halaman-lama.html
Kolom Kepada: di isi sub link halaman baru, misal:
/2013/11/halaman-baru.html

Sedangkan pada Pesan Khusus untuk Laman Tidak Ditemukan adalah untuk membuat pesan secara khusus yang nantinya akan ditampilkan saat search engine gagal mengindeks sebuah halaman blog. Hal ini akan saya bahas pada artikel selanjutnya untuk cara mendesain pesan khusus pada halaman yang error menggunakan metode jQuery.

Cara Modifikasi Skitter Slideshow Pada Blog

Cara Modifikasi Skitter Slideshow Pada Blog – setelah pada artikel sebelumnya membahas tema yang sama yakni mengenai jQuery Skitter Slideshow, maka pada tutorial ini untuk melanjutkan dan melengkapi artikel tersebut juga akan kembali membahas untuk customisasi slider blog dengan menggunakan jQuery Skitter Slideshow. Dengan menggunakan jQuery Skitter Slideshow sangat memungkinkan kita dalam mendesain untuk mempercantik blog terutama pada fitur slider dengan menambahkan efek animasi yang fantastis. Jika pada artikel sebelumnya yakni artikel yang berjudul Cara Memasang Skitter Slideshow di Blog hanya terdiri dari +22 efek animasi slider, maka kini ada penambahan yakni menjadi 36 type efek animasi dan terdapat 4 theme yang berbeda serta penambahan progress bar dan preview image number. Dari banyaknya type efek animasi dan theme ini dapat memungkinkan kita untuk lebih leluasa memilih diantaranya agar sesuai dengan selera yang kita inginkan. Untuk penjelasan lebih detailnya, berikut tutorial Cara Modifikasi Skitter Slideshow Pada Blog.

1. Login akun blogger.
2. Masuk ke Tata Letak kemudian Tambahkan Widget HTML/Javascript.
3. Copy kode berikut ini, lalu paste kedalam Widget HTML/Javascript kemudian Simpan.

<style type="text/css">
.slideshow_skitter{position:relative;width:900px;height:300px;background:#000; margin:0 auto;}
.slideshow_skitter img {width:900px; height:300px;}
.slideshow_skitter img{max-width:none}
.slideshow_skitter .container_skitter{overflow:hidden;position:relative}
.slideshow_skitter .image{overflow:hidden}
.slideshow_skitter .slideshow_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.slideshow_skitter .slideshow_clone img{position:absolute;top:0;left:0;z-index:20}
.slideshow_skitter .prev_button{position:absolute;top:50%;left:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px -42px;width:42px;height:42px}
.slideshow_skitter .next_button{position:absolute;top:50%;right:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 -42px;width:42px;height:42px}
.slideshow_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;padding:5px 0 5px 5px}
.slideshow_skitter .info_slide .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0;padding:2px 10px}
.slideshow_skitter .info_slide .image_number_select,.slideshow_skitter .info_slide .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0;padding:2px 10px}
.slideshow_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}
.slideshow_skitter .info_slide_thumb{height:50px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;top:0;left:0;opacity:1.0;padding:0!important}
.slideshow_skitter .info_slide_thumb .image_number{overflow:hidden;width:100px;height:50px;position:relative;-moz-border-radius:0!important;-webkit-border-radius:0!important;border-radius:0!important;margin:0!important;padding:0!important}
.slideshow_skitter .info_slide_thumb .image_number img{position:absolute;top:-30px;left:-30px;height:100px}
.slideshow_skitter .slideshow_scroll_thumbs{padding:0}
.slideshow_skitter .slideshow_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:0 to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;cursor:pointer;border:0 solid #333}
.slideshow_skitter .info_slide_dots{position:absolute;bottom:10px;background:rgba(255,255,255,0.8);box-shadow:rgba(0,0,0,0.3) 1px 1px 0;z-index:151;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;padding:5px 0 5px 5px}
.slideshow_skitter .info_slide_dots .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0}
.slideshow_skitter .info_slide_dots .image_number_select,.slideshow_skitter .info_slide_dots .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0}
.loading{position:absolute;top:50%;right:50%;z-index:10000;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9r5VO8JCcxFvvoDaleItQxxXKFC2jGcPaiuVtOQAN1GkuLaZ6k82UMzvO37CB3s0qsZOeuGxrgSgkGam55h5T_1_Wljh-PKEguNsxfuhQkZXvZx8A4MzplDluYxfd9waw1QGHh4tnzo/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;margin:-16px}
.slideshow_skitter .label_skitter{text-transform:uppercase;z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.8;background:#000}
.slideshow_skitter .label_skitter p{font:normal 22px arial,tahoma;letter-spacing:-1px;margin:0;padding:10px}
.slideshow_skitter .progressbar{background:#000;position:absolute;top:5px;left:15px;height:5px;width:200px;z-index:99;border-radius:20px}
.slideshow_skitter .preview_slide{display:none;position:absolute;z-index:152;bottom:30px;left:-40px;width:100px;height:100px;background:#fff;border:1px solid #222;-moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;-webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;overflow:hidden}
.slideshow_skitter .preview_slide ul{height:100px!important;overflow:hidden!important;list-style:none!important;display:block!important;position:absolute!important;top:0;left:0;margin:0!important}
.slideshow_skitter .preview_slide ul li{width:100px!important;height:100px!important;overflow:hidden!important;float:left!important;position:relative!important;display:block!important;margin:0!important;padding:0!important}
.slideshow_skitter .preview_slide ul li img{position:absolute!important;top:0!important;left:0!important;height:150px!important;width:auto!important}
#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}
.slideshow_skitter .focus_button{position:absolute;top:50%;z-index:100;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px 0;width:42px;height:42px}
.slideshow_skitter .play_pause_button{position:absolute;top:50%;z-index:151;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 0;width:42px;height:42px}
.slideshow_skitter_large{width:900px;height:300px}
.slideshow_skitter_small{width:200px;height:100px}
.slideshow_skitter .focus_button,.slideshow_skitter .next_button,.slideshow_skitter .prev_button,.slideshow_skitter .play_pause_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl3PlriLebpaPKUghO9TQC_yEXxrOP48rn88iYsHHsWL7DLuyK0pJ5VD65tODGlxbkn0iZha5p8sMbsk9f0TYpSEGyXSqoJZGrdOTZ2Ah68W7rMRD57romsatbJdQVMu-idMO6E9xoazs/w84-h126-no/sprite-default.png) no-repeat}
.slideshow_skitter .play_pause_button.play_button{background-position:0 -84px;width:42px;height:42px}
.skitter-minimalist .prev_button,.skitter-minimalist .next_button,.skitter-minimalist .play_pause_button,.skitter-minimalist .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie4OlPuKl2LMTLERAEOOfogXtplV2oQV_S25D1eX_pLYxulYlziMwSzZ8lEPeflkM7OpNOpOgwuKn8ZVDZzC9qToWsgfaQhZBmgA6b3gzpnvP1kE3a5kF3PFX2jaChYgQqnxHG7-P3JE8/w24-h110-no/sprite-minimalist.png) no-repeat!important}
.skitter-minimalist .prev_button{background-position:0 0!important;width:24px!important;height:28px!important;}
.skitter-minimalist .next_button{background-position:0 -28px!important;width:24px!important;height:28px!important;}
.skitter-minimalist .play_pause_button{background-position:0 -74px!important;width:18px!important;height:18px!important}
.skitter-minimalist .play_pause_button.play_button{background-position:0 -56px!important;width:18px!important;height:18px!important}
.skitter-minimalist .focus_button{background-position:0 -92px!important;width:18px!important;height:18px!important}
.skitter-minimalist .info_slide .image_number{background:#000;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400}
.skitter-minimalist .info_slide .image_number_select,.skitter-minimalist .info_slide .image_number_select:hover{background:#c33}
.skitter-minimalist .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0}
.skitter-round .prev_button,.skitter-round .next_button,.skitter-round .play_pause_button,.skitter-round .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUIkygQKUF429c2MnL6upCoatu6ak23pevGmiLKm92irIQrWRL4Zt8SMnFA-kzaSHpIsx6s3NXlHYQ4IavjFEFeds53reVFWdJDkE-2T7OhVo18_mcfPrmSh5IBvtjaW-n_rf_9N9Z7k/w47-h116-no/sprite-round.png) no-repeat}
.skitter-round .prev_button{background-position:0 0;width:23px;height:47px;left:-23px}
.skitter-round .next_button{background-position:-23px 0;width:23px;height:47px;right:-23px}
.skitter-round .next_button:hover,.skitter-round .prev_button:hover{opacity:1}
.skitter-round .play_pause_button{background-position:0 -70px;width:47px;height:23px;top:24px;left:24px!important}
.skitter-round .play_pause_button.play_button{background-position:0 -47px;width:47px;height:23px;top:24px}
.skitter-round .focus_button{background-position:0 -93px;width:47px;height:23px;top:24px;left:82px!important}
.skitter-round .info_slide .image_number{background:#999;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400}
.skitter-round .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}
.skitter-round .progressbar{top:5px;left:0;background:#333;box-shadow:rgba(255,255,255,0.3) 1px 1px 0}
.skitter-clean .prev_button,.skitter-clean .next_button,.skitter-clean .play_pause_button,.skitter-clean .focus_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8xNHq_rZ5-wMwlGl30xYfPXL9bPkRql53nTMcSFEZhK2ABpe84JDnVS_RcwfsEHASJNKCa2P-aN-e3r3lO8ESZEntfmUWsbBrOETmJdprJa07GXgqImbwSzYJKDfLv5jnAYITJz2LSD4/w47-h215-no/sprite-clean.png) no-repeat}
.skitter-clean .prev_button{background-position:0 0;width:47px;height:46px}
.skitter-clean .next_button{background-position:0 -46px;width:47px;height:46px}
.skitter-clean .play_pause_button{background-position:0 -133px;width:41px;height:41px}
.skitter-clean .play_pause_button.play_button{background-position:0 -92px;width:41px;height:41px}
.skitter-clean .focus_button{background-position:0 -174px;width:41px;height:41px}
.skitter-clean .info_slide_dots .image_number{width:14px;height:14px;background:#999}
.skitter-clean .progressbar{top:5px;left:5px;background:#fff;box-shadow:rgba(0,0,0,0.5) 1px 1px 0}
.skitter-square .play_pause_button,.skitter-square .next_button,.skitter-square .focus_button,.skitter-square .prev_button{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2gWtF3vU4WDP-Wzom_PYgonzCNvcJHcL51JwDI38HgzqvYSJI1bjF0JSfoe_Hfx5Ykj0_wnnW61dDnGvCLNqCsKbltW1Ft9-lxyE6xYeb4_r66YgGmqqs2_sPq2VcVo8mjqKaGXSophw/w110-h165-no/sprite-square.png) no-repeat}
.skitter-square .play_pause_button{background-position:-55px 0;width:55px;height:55px;top:10px!important;left:10px!important;bottom:auto!important;right:auto!important;margin-top:0}
.skitter-square .play_pause_button.play_button{background-position:0 0;width:55px;height:55px}
.skitter-square .focus_button{background-position:-55px -55px;width:55px;height:55px;top:10px!important;left:65px!important;bottom:auto!important;right:auto!important;margin-top:0}
.skitter-square .next_button{background-position:0 -55px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:10px}
.skitter-square .prev_button{background-position:0 -110px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:65px}
.skitter-square .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}
.skitter-square .info_slide_dots .image_number:hover{background:#999}
.skitter-square .info_slide_dots .image_number_select,.skitter-square .info_slide_dots .image_number_select:hover{background:#555}
.skitter-square .progressbar{top:0!important;left:0!important;width:100%;background:#fff;border-radius:0;height:2px}
.slideshow_skitter ul,.slideshow_skitter .image img{display:none}
.slideshow_skitter .prev_button:hover,.slideshow_skitter .next_button:hover,.slideshow_skitter .play_pause_button:hover,.slideshow_skitter .focus_button:hover{opacity:0.5!important}
.slideshow_skitter .info_slide .image_number:hover,.slideshow_skitter .info_slide_dots .image_number:hover{background:#000}
.skitter-minimalist .info_slide,.skitter-round .info_slide,.skitter-clean .info_slide,.skitter-square .info_slide{background:transparent}
.skitter-minimalist .info_slide .image_number:hover,.skitter-round .info_slide .image_number_select,.skitter-round .info_slide .image_number_select:hover,.skitter-round .info_slide_dots .image_number_select,.skitter-round .info_slide_dots .image_number_select:hover,.skitter-clean .info_slide_dots .image_number_select,.skitter-clean .info_slide_dots .image_number_select:hover{background:#111}
.skitter-round .info_slide .image_number:hover,.skitter-round .info_slide_dots .image_number:hover,.skitter-clean .info_slide_dots .image_number:hover{background:#333}
.skitter-clean .info_slide .image_number,.skitter-square .info_slide .image_number{background:#fff;box-shadow:rgba(0,0,0,0.2) 1px 1px 0;font-size:12px;font-weight:400;color:#333}
.skitter-clean .info_slide .image_number:hover,.skitter-square .info_slide .image_number:hover{background:#ccc}
.skitter-clean .info_slide .image_number_select,.skitter-clean .info_slide .image_number_select:hover,.skitter-square .info_slide .image_number_select,.skitter-square .info_slide .image_number_select:hover{background:#111;color:#fff}
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/slideshow.skitter.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow_skitter_large').skitter({
theme: 'square',
numbers_align: 'center',
progressbar: true, 
dots: true, 
preview: true
});
});
</script>

<div class="slideshow_skitter slideshow_skitter_large">
<ul>
<li><a href="http://mas-andes.blogspot.com"><img class="cube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYo1MPF27527qaRqqawfNlK_0nZfaGxTu6sCGEFvi4GhmiDNZo0wNBFvFfN-PO3SvIuBSVm5vE0Bl3zCWHLC8WYT9ndRZuxHK-708N2T2kLlwogp3_CW2J6OjfZm1eTJ5za3GpfsGxNUM/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="cubeRandom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFFA1rLqWmCeEZu3ZTfjBjV-QjgDHrB-8zamlhv8WJOUd3APCRbztiBW_kL25SVOvxlJ-GxZyfwjBL5DTsC8TnBhUZJF2QFAxTk1P8i4L-RhR-YHXtvRgexgHo851iaQp9I3f5YGo6rfk/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="block" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rGmrHWFygGl2kybjar3GRdGzUct-dYChCrTwoHufmsbEoQE9PQmIyWN6suMCaG3i4q9tK4gjtKKONsU9WL-DedvdzmTSOB04dkzyPph4q8rKZIdZQmPXYrKs3m2Z9zEPGgER8a8EbKA/w790-h286-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="cubeStop" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZEEgokS_-c01mq1NEwnqTIytvUv4HYQ7nbp_HC2Dl_o0LwW9np81CTch5hqazF6yA1HOB91aEthxrcz9BuZItItgP9nTWhl8aJBWhEv7uS-5AZ1O2UD2pq5KdIuWdTjwvBI7-A80DO4/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="cubeHide" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xI37S0iRFN1iH2QDDnVfv_W8w8zTnhuHFw7FxMK8DXS0JZ2Tp20z0o9r42ZDiDZxz_PxQmEPDZsTuO8kh0xNpYdzblQQd2bF5uqnw0Ed6-jivKxYaKzaoNtMNLxtJlgzHPdD64-Hq-4/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li>
</ul>
</div>

Keterangan:
- Ganti http://mas-andes.blogspot.com dan URL gambar.
- Untuk lebar slider silahkan ubah sesuai selera masing-masing.

Customisasi
Dari kode yang terdapat di atas, perhatikan teks yang berwarna biru. Kita dapat memilih salah satu di antara 4 theme, disitu saya menggunakan square sebagai default theme. Namun apabila ingin menggantinya, anda dapat merubah dengan pilihan theme lain di antaranya terdapat square, clean, round, minimalist.

Sedangkan pada type efek animasi slider perhatikan teks yang berwarna merah pada kode diatas, saya hanya memasukan 5 gambar dengan masing-masing efek yang berbeda. Anda dapat menambahkan gambar sebanyak mungkin dengan berbagi efek animasi yang berbeda didalam satu slider. Anda dapat merubah dan memilih berbagai type efek animasi tersebut, berikut type animasi yang dapat anda gunakan: cube, cubeRandom, block, cubeStop, cubeStopRandom, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeSpread, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, hideProgressBar.

Untuk yang lain-lain misalkan ingin merubah warna,font, maupun letak elemen silahkan custom sendiri agar sesuai dengan template blog yang di gunakan.

Cara Memasang Skitter Slideshow di Blog

Cara Memasang Skitter Slideshow di Blog – setelah beberapa waktu lalu sudah pernah membahas untuk Menambah Fitur jQuery Animasi Slider Pada Blog dengan efek transisi yang menarik, maka pada tutorial kali ini kembali akan membahas untuk menambah fitur slider pada blog dengan efek-efek yang tidak kalah menarik menggunakan plugin jQuery Skitter Slideshow. Sebelum membahas lebih jauh ke tutorial, saya sedikit akan menjelaskan mengenai plugin jQuery Skitter Slideshow. Skitter adalah plugin jQuery yang memungkinkan kita untuk mengkonversi menjadi slideshow dengan efek animasi transisi pada gambar. jQuery Skitter sangat memungkinkan kita untuk membuat slideshow dengan efek gambar yang menarik dan terdiri dari 22 efek transisi. Skitter Slideshow ini dapat menampilkan daftar slide sebagai angka atau thumbnail dan item dapat diakses dengan bantuan tombol prev dan next. Ada beberapa opsi yang ditawarkan untuk kustomisasi maksimum seperti: kecepatan (untuk partikel animasi), interval antara setiap slide atau menampilkan label on/off. Fitur lain yang bagus adalah kemampuan untuk menyebutkan jenis animasi untuk setiap slide sebagai nama class yang memungkinkan kita untuk menggunakan beberapa jenis animasi dalam satu slide. Untuk membuat slider ini terpasang ke dalam blog, berikut tutorial Cara Memasang Skitter Slideshow di Blog.

1. Login ke blogger.
2. Masuk ke Tata Letak kemudian Tambahkan Widget HTML/Javascript.
3. Copy kode berikut ini.

<style type="text/css">
.skitter_slideshow {background:#111;padding:10px 10px 30px 10px;float:left;margin:auto; }
.skitter_slideshow img {width:850px; height:300px;}
.label_skitter {text-transform:uppercase;z-index:150;position:absolute;bottom:0px;left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJs2ok-M6dVWr2wHsTcM_NlCmcBgFrqDhZ6wCWAnXNQkgxmwf4M6kIGpzdIcPU6OlSHSLGUuEWSBUaDfT3sHz9lI2ZdAhWyOm7wjrach4UXm1rfJVNO4D8f87-SGZ6cQvf9vwmmfzfchI/h120/back-box-label-black.png) repeat-x left top;color:#fff;display:none;border-top:1px solid #000;}
.label_skitter p {padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px;}
.info_slide * {font-family:Consolas,arial,tahoma !important;}
.slideshow_skitter {position:relative;width:850px;height:300px;}
.slideshow_skitter ul {display:none;}
.slideshow_skitter .container_skitter {overflow:hidden;position:relative;}
.slideshow_skitter .image {overflow:hidden;}
.slideshow_skitter .image img {display:none;}
.slideshow_skitter .slideshow_clone {position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20;}
.slideshow_skitter .slideshow_clone img {position:absolute;top:0;left:0;z-index:20;}
.slideshow_skitter .prev_button {position:absolute;top:50%;left:0px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjul3EQDA4enedl0t88VBJiWUSogDZABh06uqL_1UelqpH7KqOwT3rNskLxkF4aWFNRmXA5RUB5z334l-PkqqDDLA9xJCOgzA6YE3dWrKSyACMaDYrMrvji6ls21mihRj6f9Nj_vIRRfZU/h120/prev.png) no-repeat left top;}
.slideshow_skitter .next_button {position:absolute;top:50%;right:0px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb4zmuSzZwgRmd5Ww0S2ykw6widVXPHC3cFVpPowYrjNGzxOHLUgWROIvoUArKCMwoqE6SycqWjT5nRUk2zImHLCpuT6zNmZFp1XSSk6s3HJacmkNpCyUZXtB8zrYsGAv0OFNPisVYWkU/h120/next.png) no-repeat left top;}
.slideshow_skitter .info_slide {position:absolute;bottom:-27px;left:40px;z-index:100;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;}
.slideshow_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;}
.slideshow_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;}
.slideshow_skitter .container_thumbs {position:relative;overflow:hidden;height:50px;}
.slideshow_skitter .info_slide_thumb {-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}
.slideshow_skitter .info_slide_thumb .image_number {overflow:hidden;width:70px;height:40px;position:relative;}
.slideshow_skitter .info_slide_thumb .image_number img {position:absolute;top:-50px;left:-50px}
.slideshow_skitter .slideshow_scroll_thumbs {padding:0 10px;}
.slideshow_skitter .slideshow_scroll_thumbs .scroll_thumbs {position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}
.slideshow_skitter .info_slide_dots {position:absolute;bottom:-40px;z-index:100;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.slideshow_skitter .info_slide_dots .image_number {background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
.slideshow_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;}
.slideshow_skitter .label_skitter {z-index:150;position:absolute;bottom:0px;left:0px;display:none;}
.loading {position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9r5VO8JCcxFvvoDaleItQxxXKFC2jGcPaiuVtOQAN1GkuLaZ6k82UMzvO37CB3s0qsZOeuGxrgSgkGam55h5T_1_Wljh-PKEguNsxfuhQkZXvZx8A4MzplDluYxfd9waw1QGHh4tnzo/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}
.slideshow_skitter_large {width:850px;height:300px;}
.slideshow_skitter_small {width:200px;height:200px;}
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.skitter.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {};
if (document.location.search) {
var array = document.location.search.split('=');
var param = array[0].replace('?', '');
var value = array[1];
if (param == 'animation') {
options.animation = value;
}
else if (param == 'type_navigation') {
options[value] = true;
if (value == 'dots') $('.skitter_slideshow').css({'margin': 'auto'});
}
}
$('.slideshow_skitter_large').skitter(options);
});
</script>
<div class="skitter_slideshow">
<div class="slideshow_skitter slideshow_skitter_large">
<ul>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYo1MPF27527qaRqqawfNlK_0nZfaGxTu6sCGEFvi4GhmiDNZo0wNBFvFfN-PO3SvIuBSVm5vE0Bl3zCWHLC8WYT9ndRZuxHK-708N2T2kLlwogp3_CW2J6OjfZm1eTJ5za3GpfsGxNUM/w600-h300-no/" class="cube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFFA1rLqWmCeEZu3ZTfjBjV-QjgDHrB-8zamlhv8WJOUd3APCRbztiBW_kL25SVOvxlJ-GxZyfwjBL5DTsC8TnBhUZJF2QFAxTk1P8i4L-RhR-YHXtvRgexgHo851iaQp9I3f5YGo6rfk/w600-h300-no/" class="cubeRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rGmrHWFygGl2kybjar3GRdGzUct-dYChCrTwoHufmsbEoQE9PQmIyWN6suMCaG3i4q9tK4gjtKKONsU9WL-DedvdzmTSOB04dkzyPph4q8rKZIdZQmPXYrKs3m2Z9zEPGgER8a8EbKA/w790-h286-no/" class="block" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZEEgokS_-c01mq1NEwnqTIytvUv4HYQ7nbp_HC2Dl_o0LwW9np81CTch5hqazF6yA1HOB91aEthxrcz9BuZItItgP9nTWhl8aJBWhEv7uS-5AZ1O2UD2pq5KdIuWdTjwvBI7-A80DO4/w463-h240-no/" class="cubeStop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xI37S0iRFN1iH2QDDnVfv_W8w8zTnhuHFw7FxMK8DXS0JZ2Tp20z0o9r42ZDiDZxz_PxQmEPDZsTuO8kh0xNpYdzblQQd2bF5uqnw0Ed6-jivKxYaKzaoNtMNLxtJlgzHPdD64-Hq-4/w463-h240-no/" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhElk1rQuVPitz0SDWfc9_ghuojtD1Uwz8Jyv69GmmrN-AOZi-hvmPxpF86Nt6iH8Jf-1K8pcO3wL3hZWlzV2_uE9ehASGEWPZtmPmI33dlpIjAZtnrwGu3PIosv98OJNQnTLJsA5JQYeQ/w463-h240-no/" class="cubeSize" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube size</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrpqijqtzuL58YCuPEJ9S4M9ucxGMKcZyUzkyj86W2iW4o2971SFBX2I0UKejx7c0FnNN6m48gDRaNpKZS2hdcptxr1GOvmDy3fbDX3bo9pZ7baCrFCfzlDG67IXofhmC61r8-T8gR1zI/w500-h300-no/" class="horizontal" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek horisontal</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcaFzP_ZRgWUXdovFgmG3LaWHeL6ZXDr-3BNUq1K7AVRpyjEYyCE4J0ygdzw0KJMBSiq6TpPyjirKMPxrloB5M_toCxNyKB6dtqA6qplBB8u9Ujbe4sc27xXh7BjfLDM7eWdXErlmjRZA/w852-h284-no/" class="showBars" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbars</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm8sMzV4XIFf6ZUPplIhB60kXPsqQaZA9c_Ixdlz4b8wpteBtkk2Ls4l883SG0YW_I433fZejk_zDIX8SRnuMyK9FNnZy9dAcEi3EGfONaGEDW9GhS7tmd65NmU7i2ayrk0YeOtkCAX-s/w500-h300-no/" class="showBarsRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbarsrandom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigPJMZ7ucF5LswC3wwDOPLI4poS8l_RNzGIUNKxmQlAjpzBNJrdfEfl1NYPNomPzhoTOkCKahDuUBOyvHDVsWc-UmbDGh4b3KuEtWNskvYJEneBWcrFwvOPczZ1uoArS05cxEAI6KI7ZQ/w758-h438-no/widget-contact-form-blogger.jpg" class="tube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek tube</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiExfb2oJvj3D_rGD4TC_8GVR4sYhdnwwbxiOjbPC-x9QLA2l-g4Edn6NjnSYpAXLv0AcxK5Uchtw07jGhZ1RJqVx3fGV5iNsCr7n31rDsRLEk3oY-fTUFhD4-ZMeocd36CaMpy6E1oEyg/w500-h300-no/" class="fade" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fade</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCnResONBACnPt4ypTEjd1yN8qtJ5RReIy3gYYTir1V4iCRVK1jfC0m6WH8b_t9ZLn-j0UTsforK9EnEzp_mblAyhbCxWw4oerxSXf02mpMhJyJnw-qO-tbnOAHQS6-nxhsWhLJX-8kE/w600-h300-no/form-email-subscribe-blogger.png" class="fadeFour" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fadefour</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW_FIEgEa2zexGcQm_6mBb6Noa6PHe1JCN0sHwd_EdvXluUNa6SrQITlPaEUvHK0jvV2HLMwGh__uh3MFuj-eQsSLLLtCVfNe4jGzO8_QxlpeAxUGrmMwOahyymCR3avWCv_5IbNp8kxY/w985-h533-no/widget-contact-form-official-blogger.jpg" class="paralell" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek paralell</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5PHTJduzpHjKNvLJkHDwbuI-O6E_CB3UhdYVgMLEZ2faMnwrZQc65vsliCl1eNeGi8mi7GWNKUxBgK2a50sx7u4W1IuzoYh9tVv2M68pw1-NRDmRxGFiN75E-Kq24GSQ5C5-5lXUdARE/w540-h180-no/Pop-Up-Widget-Google%252B-Follower-for-blogger.png" class="blind" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blind</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh05QlelzXavoPIyp3jErBLQJ81W9jvRHWkKEBTMrMGKjgTVXcmgOqKUoijT1DPHHHssakV9_oJV4XghI9ATnJgrh5SGlAPeOqYQL-XPqLAFHKLlqyRtvqMNlCMN1BqkuIAlCE8WHjVIqM/w353-h243-no/Pop-Up-Widget-Google%252B-Follower-2.png" class="blindHeight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindheight</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXBGTU4PjbuLOTid5_GCXpCpMh20-NHBY6FKrPE-iXoaBpVPv0sXiH6PwxlAfyZsSKkl3HXAofhYkqe1kUqV3KLhKOZc_gGvj9MF7hxbJ5bJCr-N2cXJnSbWdJtWTlKHRIChOS1ENNUuA/w540-h180-no/modifikasi-email-subscribe.jpg" class="blindWidth" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindwidth</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_YEFXytKi0djVY0wT04Xcxs-Rz16T3p5r83Y_WxACN3bKptXpXO4z02uadAntNOrb4oJj-E_fQ1xTges2wp5PnD6kfFHY4_zoMBYEEMgGcqQfgodlBVf7xxt26u1v3-wED8H_L0BKhFo/w540-h179-no/modifikasi-facebook-like-box.jpg" class="directionTop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionTop</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj79qUqPijLAwFCGVPehnvHkMvD4NV-vACnPtpXJzxMESdNOuxIsQhWNPgxBg1RvHwFflHLWnYbaepCN3hLk3ecj0xDtiPC5dfFE5bO9SqgDc0J-8UH4S8YnrlHfkSZwfa3QTHxLgQOyhA/w540-h179-no/modifikasi-widget-google%252B.jpg" class="directionBottom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionBottom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3EXPdui4zUKtdVfi28LOd2m1JWiNz9W_wd6SKN6mZODYreYebONTOSF6r4cpS_5lFsBd5eCsWWjsKGZzhL9rQS3VDhN3qCvKK9Qc__O5qvGw4TjP8z3RETij-iyGfNbcs8NEcuF8wAAw/w500-h300-no/" class="directionRight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionRight</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNxYWFKzomD_NiPU7qkfl1XfVF_CUPFilm-hS6FVs9eh5Lb-0Mwf22ZNbagE7Meqf9-ezfew-u_13pkfbRab1ZXKRqRq992fb_eTguRdiLZ7dcEYfHk-BPaXv68ZnrVPwIjE2hB4sB6-c/w400-h274-no/flod-image-hover.jpg" class="directionLeft" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionLeft</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3SKhEbgs0eec-GocgXyT2HQ9NYXJvQCBLeAy6QxKbwnm6hKAJiKBx-KlT7n1DMTFw5B260JKkvX4y67uzxkY0LP_Zej-sYcEEbTbrQgG5NnKN-IfNlTFD75WYbGGWyymU4wfopZTTvfc/w725-h459-no/widget-sidebar-ribbon.jpg" class="cubeStopRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeStopRandom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR1txfJpr5WOu_mCY957g7gJGLR470vnfqckj9lGqo4ZiwLeWx7cYKPLOxHgDEsFxt_Dr7sSaFoyng70KWcsvM-q_a2lqug3xlYbKC4_POuFk06w8ERTK-kiJqhPkC1HkplOAmy7OnR80/w587-h344-no/sidebar-ribbon.2.jpg" class="cubeSpread" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeSpread</p></div></li>                
</ul>
</div>
</div>

Keterangan:
Ganti http://mas-andes.blogspot.com dan URL gambar.

4. Paste kode tersebut kedalam Widget HTML/Javascript.
5. Langkah terakhir Simpan.

Di atas hanya kode dasarnya saja, silahkan sesuaikan atau custom sendiri dengan tampilan yang lebih menarik sesuai dengan selera masing-masing.

Membuat Tooltip Otomatis di Semua Judul Posting

Membuat Tooltip Otomatis di Semua Judul Posting – sebelum membahas lebih jauh terlebih dahulu saya akan menjelaskan mengenai tooltip. Tooltip atau infotip adalah elemen tambahan yang digunakan pada sebuah web/blog dalam hubungannya dengan kursor atau pointer. Pengguna akan melihat sebuah kotak kecil melayang yang didalamnya berisi mengenai sedikit informasi atau attribut title maupun gambar saat pointer mengarah ke link/item tooltip tanpa terlebih dahulu melakukan klik pada mouse, karena efek tooltip tersebut mucul pada saat hover. Pada tutorial yang akan saya bahas kali ini adalah bagaimana cara untuk membuat tooltip secara otomatis (auto tooltip) muncul di setiap attribut title pada judul posting dan juga cara untuk membuat tooltip secara manual di beberapa link maupun gambar yang terdapat di blog dengan metode jQuery dan sedikit style CSS untuk mempercantik tampilan tooltip. Demonya bisa terlebih dahulu di lihat pada judul artikel di atas. Jika anda sudah pernah membuat link otomatis pada judul posting pasti tidak akan kesulitan untuk penerapan kode dalam memasang efek tooltip ini. Untuk penjelasan lebih lanjut dan agar lebih mudah dipahami, berikut secara detailnya cara untuk Membuat Tooltip Otomatis di Semua Judul Posting.

1. Login ke akun blogger.
2. Masuk ke menu Template lalu pilih Edit HTML.
3. Copy kode CSS berikut ini lalu taruh di atas kode ]]></b:skin>

#tooltip{ position:absolute; border:2px solid #333; background:#222; padding:2px 5px; color:#fff; display:none; text-transform:uppercase; font-weight:bold; box-shadow:0 0 5px #00ff00; }

4. Selanjutnya copy kode berikut ini lalu taruh di atas kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
this.tooltip = function(){
        xOffset = 10;
        yOffset = 20;
    $("a.tooltip").hover(function(e){                                              
        this.t = this.title;
        this.title = "";                                      
        $("body").append("<a id='tooltip'>"+ this.t +"</a>");
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");        
    },
    function(){
        this.title = this.t;        
        $("#tooltip").remove();
    });    
    $("a.tooltip").mousemove(function(e){
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });            
};
$(document).ready(function(){
    tooltip();
});
</script>

Keterangan:
Perhatikan kode yang berwarna oranye, apabila pada template blog anda sudah terdapat kode tersebut maka tidak perlu menambahkannya lagi.

5. Kemudian cari kode

<data:post.title/>

Atau

<a expr:href='data:post.link'><data:post.title/></a>

Atau

<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

Untuk lebih jelasnya struktur keseluruhan kode tersebut seperti di bawah ini (pada template default blogger).

<h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3> 

Sesuaikan dengan template masing-masing (setiap template berbeda) cari yang semirip mungkin dengan kode di atas. Perhatikan kode yang berwarna biru, jika sudah pernah melakukan optimasi kemungkinan kode h3 sudah di rubah menjadi h1 atau h2. Apabila menggunakan template dari situs penyedia template blogger, biasanya kode tersebut sudah di perpendek. Sebagai pedoman untuk mencari, biasanya kode tersebut sudah berubah menjadi seperti berikut ini.

<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.link'><data:post.title/></a>
</b:if>
</h1>

Apabila kode tersebut sudah di temukan, ubah kode yang berwarna merah dengan menambahkan kode class='tooltip' secara lengkapnya kode tersebut menjadi seperti dibawah ini.

<a class='tooltip' expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

Langkah terakhir tinggal lakukan klik Simpan template, maka kini secara otomatis setiap judul posting yang terdapat pada halaman blog anda sudah terdapat efek tooltip.

Efek tooltip tersebut bisa juga kita terapkan ke dalam setiap link teks maupun link gambar secara manual dengan menambahkan class="tooltip" di setiap link yang di kehendaki.

Sebagai contoh, misal akan menambahkan efek tooltip pada link yang terdapat di postingan maka penulisan link tersebut menjadi seperti di bawah ini.

<a class="tooltip" href="http://mas-andes.blogspot.com" title="Faceblog Evolutions">Faceblog Evolutions</a>

Atau jika ingin menerapkan kedalam gambar maka penulisannya menjadi seperti di bawah ini.

<a class="tooltip" href="http://mas-andes.blogspot.com" title="Faceblog Evolutions"><img src="URL-GAMBAR.jpg" width="560" height="100" alt="Faceblog Evolutions"/></a>

Maka dari kedua kode tersebut jika di tampilkan maka hasilnya akan seperti dibawah ini:

Faceblog Evolutions

dan



Demikian akhir dari tutorial cara Membuat Tooltip Otomatis di Semua Judul Posting, baik itu untuk menambahkan efek tooltip secara manual pada setiap link teks maupun gambar.

Cara Membuat Headline Breaking News di Blog

Cara Membuat Headline Breaking News di Blog – sebenarnya ini sama seperti widget recent post atau latest post namun hanya saja pada widget headline breaking news ini berbentuk horisontal seperti navigasi yang biasanya di pasang diatas header atau di bawah navigasi menu atau bisa juga di atas footer blog. Pada widget headline breaking news ini nantinya akan memunculkan setiap artikel terbaru pada sebelah kiri dan disebelah kanannya terdapat widget jejaring social media. Untuk memasang widget headline breaking news ke dalam blog caranya cukup mudah, anda hanya perlu menambah widget dan bisa mengaturnya untuk bisa ditaruh dimana tempat yang anda sukai dengan menggeser bagian elemen tata letak layout blog. Untuk melihat seperti apa memasangnya ke dalam blog, berikut langkah-langkahnya untuk Cara Membuat Headline Breaking News di Blog.

Demo

1. Login pada akun blogger.
2. Masuk ke Tata Letak blog dan tambahkan widget.
3. Copy kode berikut ini lalu masukan kedalam widget HTML/Javascript.

<style type='text/css' scoped="scoped">
#news { background:#52e052; border-bottom: 5px solid #333; border-top: 5px solid #333; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 835px; }
.titlenews { background:#333; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }
#ltsposts { float: left; margin-left: 120px; }
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#333 !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#333; float: right; margin: -8px 0; }
ul.shsocial li {float:left;list-style: none outside none;border:none;}
ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbcOC6pPOFoC8b7NtsW46Bcxv2w14NlTp11hvBwadDx3CdRYgyWpe6R_ImO71Z-cy8-w7cp79LmqaY3Vo7wUOj823t40zkejdEWBs9x5P4BGzzIWciFJLkL4L_6UQaWhEQ5poAq31vmslJ/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a{ background-position:0 0}
ul.shsocial li.gp a{ background-position:-96px 0}
ul.shsocial li.rs a{ background-position:-192px 0}
ul.shsocial li.tw a{ background-position:-256px 0}
ul.shsocial li.fb a:hover{ background-position:0 -32px}
ul.shsocial li.gp a:hover{ background-position:-96px -32px}
ul.shsocial li.rs a:hover{ background-position:-192px -32px}
ul.shsocial li.tw a:hover{ background-position:-256px -32px}
</style>

<div id='news'><span class='titlenews'>Latest Post</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/andestyle' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/104093787575230359634' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/rizkyandes' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/masandes' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://mas-andes.blogspot.com', // Replace With your Blog Url
numpostx     = 20; // Maximum Post
$.ajax({
    url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl, posttitle, skeleton = '',
            entry = data.feed.entry;
        if (entry !== undefined) {
            skeleton = "<ul>";
        for (var i = 0; i < entry.length; i++) {
                for (var j=0; j < entry[i].link.length; j++)
                {
                     if (entry[i].link[j].rel == "alternate")
                        {
                            posturl = entry[i].link[j].href;
                            break;
                         }
                }                
            posttitle = entry[i].title.$t;
            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
            skeleton += '</ul>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

Keterangan:
Tulisan warna biru ganti dengan lebar blog anda.
Ganti http://mas-andes.blogspot.com dengan URL alamat blog anda.
Tulisan yang berwarna merah ganti dengan ID masing-masing.

4. Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.

Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog anda dengan menggeser elemen tata letak.