Form Search Blogger Dengan Ajax jQuery

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLhehS6CtcuTlgc8SaoTmGScPxzZYB3XIp9wxSCsh05r8EX6fAssZl8y3tHwojbphmNt7480eb6mavvZKmSuXOu8qhWFWY7jTjBq1n5QDYaZDp9LYOsJSl51huZGYwyxUInmMx-rxAQpY/s1600/Form-Search-Ajax-jQuery.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Form Search Blogger Dengan Ajax jQuery" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLhehS6CtcuTlgc8SaoTmGScPxzZYB3XIp9wxSCsh05r8EX6fAssZl8y3tHwojbphmNt7480eb6mavvZKmSuXOu8qhWFWY7jTjBq1n5QDYaZDp9LYOsJSl51huZGYwyxUInmMx-rxAQpY/s540/Form-Search-Ajax-jQuery.png" title="Form Search Blogger Dengan Ajax jQuery" width="540" /></a><b>Form Search Blogger Dengan Ajax jQuery</b> – 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 <b>googleSearch () </b>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 <b>Form Search Blogger Dengan Ajax jQuery</b>.<br /><br />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.<br /><pre><style type='text/css'><br />#searchForm{background-color:#4C5A65;position:relative;margin:0 0 80px 0;padding:10px;}<br />fieldset{border:none}<br />#searchInputContainer{width:420px;height:34px;background:#fff;float:left;margin-right:12px}<br />#s{border:1px solid #52e052;color:#888;background:#f1f1f1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1wj6zHquPrH-1iccZ2Au0XjR8x_AvEBqfSebLaKVOTsWyz_sW3hmVCnpuBTSJKMYerfCXyaed3FE24ZdS-UDxxkXhZyRymK-LwRBQlna-x_RyoqtH3AbUGMZwqg1ObRLL7UIw4jxtt4cj/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}<br />.icons{list-style:none;height:19px;position:relative;margin:10px 0 0 425px}<br />.icons li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcBeFkdFyhIrC9esXi09cXSlMBcZjPfnmeQTky_BNOhUFRTn0KX4ZOz6RXUOTuBLDExk4qCyfS8kqvUSVIvIIERD6SE4RE0VAuQOO0EXzciX6qF3CxKH9QEarajxt-d7fnaksrUi93UNs/h120/icons.png) no-repeat;float:left;height:19px;text-indent:-9999px;cursor:pointer;margin-right:5px}<br />li.web{width:15px}<br />li.images{width:22px;background-position:-18px 0}<br />li.images.active,li.images:hover{background-position:-18px bottom}<br />li.news{width:14px;background-position:-44px 0}<br />li.news.active,li.news:hover{background-position:-44px bottom}<br />li.videos{width:17px;background-position:right 0}<br />li.videos.active,li.videos:hover{background-position:right bottom}<br />span.arrow{width:11px;height:6px;position:absolute;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIhZPWLkCPQkGuLgjlypAj9COhuJwQgBKwbvw7pjM3E4xHJlSLKDYKYwxoPN41LDVGV-Blc97ACqGzfJ5Q6c_8cP_ROp3vtU0xvsyF-n8DQtl9rkAN37odEcGbQthwZJok3E7k9b9PcDc/h120/arrow.png) no-repeat;left:0;margin:15px 0 0 5px;}<br />#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}<br />#searchInContainer{float:left;margin-top:5px;width:400px;text-align:left !important;}<br />label{color:#DDD;cursor:pointer;font-size:11px;position:relative;right:-2px;top:-2px;margin-right:10px;white-space:nowrap}<br />input[type=radio]{cursor:pointer}<br />.pageContainer{margin-bottom:50px;}<br />p.notFound{text-align:center;padding:0 0 40px}<br />.webResult{text-shadow:1px 1px 0 #586a75;margin-bottom:20px}<br />.webResult h2{background-color:#5D6F7B;font-size:18px;font-weight:400;padding:8px 20px}<br />.webResult h2 b{color:#fff}<br />.webResult h2 a{color:#eee;border:none}<br />.webResult p{line-height:1.5;padding:15px 20px;color:#222;}<br />.webResult p b{color:#000}<br />.webResult > a{margin-left:20px}<br />.imageResult{float:left;height:180px;text-align:center;width:152px;overflow:hidden;margin:0 0 20px 20px}<br />.imageResult img{display:block;border:none}<br />.imageResult a.pic{border:2px solid #333;outline:1px solid #777;display:block;margin:0 auto 15px}<br />#more{width:83px;height:24px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinoyfVqBry1oF78yblfGFtQmP5kv03yxi0sdEqwN2uWtTmj6S4bkgFaQqe40TFgT3Km2DK0B1qnmDuWCd9HwMK5uijMDSNTXQ8rPz9Hbi3lFhgeDzviBeFpuTlJcHpu2q0u_zKNqwFEgY/h120/more.png) no-repeat;cursor:pointer;margin:40px auto}<br />li.web.active,li.web:hover,#submitButton:hover,#more:hover{background-position:left bottom}<br />#page{ margin:0 auto; }<br /></style><br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br /><script type="text/javascript"><br />$(document).ready(function () {<br />    function n(t) {<br />        t = $.extend({}, e, t);<br />        t.term = t.term || $("#s").val();<br />        if (t.searchSite) {<br />            t.term = "site:" + t.siteURL + " " + t.term<br />        }<br />        var i = "http://ajax.googleapis.com/ajax/services/search/" + t.type + "?v=1.0&callback=?";<br />        var s = $("#resultsDiv");<br />        $.getJSON(i, {<br />            q: t.term,<br />            rsz: t.perPage,<br />            start: t.page * t.perPage<br />        }, function (e) {<br />            var i = e.responseData.results;<br />            $("#more").remove();<br />            if (i.length) {<br />                var o = $("<div>", {<br />                    className: "pageContainer"<br />                });<br />                for (var u = 0; u < i.length; u++) {<br />                    o.append(new r(i[u]) + "")<br />                }<br />                if (!t.append) {<br />                    s.empty()<br />                }<br />                o.append('<div class="clear"></div>').hide().appendTo(s).fadeIn("slow");<br />                var a = e.responseData.cursor;<br />                if (+a.estimatedResultCount > (t.page + 1) * t.perPage) {<br />                    $("<div>", {<br />                        id: "more"<br />                    }).appendTo(s).click(function () {<br />                        n({<br />                            append: true,<br />                            page: t.page + 1<br />                        });<br />                        $(this).fadeOut()<br />                    })<br />                }<br />            } else {<br />                s.empty();<br />                $("<p>", {<br />                    className: "notFound",<br />                    html: "No Results Were Found!"<br />                }).hide().appendTo(s).fadeIn()<br />            }<br />        })<br />    }<br />    function r(e) {<br />        var t = [];<br />        switch (e.GsearchResultClass) {<br />        case "GwebSearch":<br />            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>"];<br />            break;<br />        case "GimageSearch":<br />            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>"];<br />            break;<br />        case "GvideoSearch":<br />            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>"];<br />            break;<br />        case "GnewsSearch":<br />            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>"];<br />            break<br />        }<br />        this.toString = function () {<br />            return t.join("")<br />        }<br />    }<br />    var e = {<br />        siteURL: "<span style="color: red;">mas-andes.blogspot.com</span>",<br />        searchSite: true,<br />        type: "web",<br />        append: false,<br />        perPage: 8,<br />        page: 0<br />    };<br />    var t = $("<span>", {<br />        className: "arrow"<br />    }).appendTo("ul.icons");<br />    $("ul.icons li").click(function () {<br />        var n = $(this);<br />        if (n.hasClass("active")) {<br />            return false<br />        }<br />        n.siblings().removeClass("active");<br />        n.addClass("active");<br />        t.stop().animate({<br />            left: n.position().left,<br />            marginLeft: n.width() / 2 - 4<br />        });<br />        e.type = n.attr("data-searchType");<br />        $("#more").fadeOut()<br />    });<br />    $("#siteNameLabel").append(" " + e.siteURL);<br />    $("#searchSite").click();<br />    $("li.web").click();<br />    $("#s").focus();<br />    $("#searchForm").submit(function () {<br />        n();<br />        return false<br />    });<br />    $("#searchSite,#searchWeb").change(function () {<br />        e.searchSite = this.id == "searchSite"<br />    })<br />})<br /></script><br /><div id="page"><br /><form id="searchForm" method="post"><br /><fieldset><br /><input id="s" type="text" /><br /><input type="submit" value="Search" id="submitButton" /><br /><div id="searchInContainer"><br /><input type="radio" name="check" value="site" id="searchSite" checked /><br /><label for="searchSite" id="siteNameLabel">Search</label><br /><input type="radio" name="check" value="web" id="searchWeb" /><br /><label for="searchWeb">Search The Web</label><br /></div><br /><ul class="icons"><br /><li class="web" title="Web Search" data-searchType="web">Web</li><br /><li class="images" title="Image Search" data-searchType="images">Images</li><br /><li class="news" title="News Search" data-searchType="news">News</li><br /><li class="videos" title="Video Search" data-searchType="video">Videos</li><br /></ul><br /></fieldset><br /></form><br /></div><br /><div id="resultsDiv"></div></pre><blockquote class="atas">Ganti <span style="color: red;">mas-andes.blogspot.com</span> dengan URL blog anda.</blockquote>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.

Form Search Blogger Dengan Ajax jQuery – ini merupakan cara dimana untuk membangun sebuah form halam…

Read More

Memahami Konsep Redirect Halaman Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdQ0PD643WwjCJ4zAUlFtbaZBVM0-S49AIEvA7p-a4_9W4FBUILsWk43vURkunDfQCNa5DxrXp8BXt1qd_RTwhJvhEbQEKKG6KdwX-otY3rYCzzSscUAac-j8sNvV8JevkfXebqOIsIA/s1600/page-redirect.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Memahami Konsep Redirect Halaman Blog" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdQ0PD643WwjCJ4zAUlFtbaZBVM0-S49AIEvA7p-a4_9W4FBUILsWk43vURkunDfQCNa5DxrXp8BXt1qd_RTwhJvhEbQEKKG6KdwX-otY3rYCzzSscUAac-j8sNvV8JevkfXebqOIsIA/s540/page-redirect.jpg" title="Memahami Konsep Redirect Halaman Blog" width="540" /></a><b>Memahami Konsep Redirect Halaman Blog</b> – 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.<br /><br />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.<br /><br />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 <code><head></code> dan <code></head></code><br /><pre><meta http-equiv="refresh" content="30"/></pre><blockquote class="atas">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.</blockquote>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. <br /><pre><meta http-equiv="refresh" content="0; url=http://contoh.blogspot.com" /></pre><blockquote class="bawah">Atau bisa juga menggunakan metode JavaScript redirect.</blockquote><pre><script type="text/javascript"><br />window.location = "http://contoh.blogspot.com";<br /></script></pre><br />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.<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6PEYxWlZaS3MSrV047InYaqyAxJpUX78OVeyxDkTeGKtCFz5zKEMURZHOj7_EAiwtwQQzTCDqMcq9t4jW22vJVn9QjKJ_co9IUdh7_8OvMzLy-6RwJCS093LqvPG_PwD-qaJhkc0_HM/s1600/redirect-custom.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Memahami Konsep Redirect Halaman Blog" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6PEYxWlZaS3MSrV047InYaqyAxJpUX78OVeyxDkTeGKtCFz5zKEMURZHOj7_EAiwtwQQzTCDqMcq9t4jW22vJVn9QjKJ_co9IUdh7_8OvMzLy-6RwJCS093LqvPG_PwD-qaJhkc0_HM/s540/redirect-custom.png" title="Memahami Konsep Redirect Halaman Blog" width="540" /></a><br /><blockquote class="atas">Kolom <span style="color: red;"><b>Dari</b></span>: di isi sub link halaman lama, misal: <br /><span style="color: red;"><b>/2013/11/halaman-lama.html</b></span><br />Kolom <span style="color: red;"><b>Kepada</b></span>: di isi sub link halaman baru, misal: <br /><span style="color: red;"><b>/2013/11/halaman-baru.html</b></span></blockquote>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.

Memahami Konsep Redirect Halaman Blog – seperti yang kita tahu, bahwa sangat di sayangkan apabila ki…

Read More

Cara Modifikasi Skitter Slideshow Pada Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtN07H0RyuTh5SPu3WKO0Uz4L1GYEvAgM64A0iIfMM09UzH1giCud1fI4t9CvqSRgLt-TVxViwD9ESN9XvV0BLmvACBWrBv0hhHAEwF192ZkZXZWRlkUM7NsZColbmd_QbNnypQK4_yRg/s1600/jquery-skitter-slideshow.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Skitter Slideshow" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtN07H0RyuTh5SPu3WKO0Uz4L1GYEvAgM64A0iIfMM09UzH1giCud1fI4t9CvqSRgLt-TVxViwD9ESN9XvV0BLmvACBWrBv0hhHAEwF192ZkZXZWRlkUM7NsZColbmd_QbNnypQK4_yRg/s540/jquery-skitter-slideshow.jpg" title="Cara Modifikasi Skitter Slideshow Pada Blog" width="540" /></a><b>Cara Modifikasi Skitter Slideshow Pada Blog</b> – 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 <a href="http://mas-andes.blogspot.com/2013/11/cara-membuat-slider-jquery-skitter-slideshow.html" target="_blank" title="Cara Memasang Skitter Slideshow di Blog">Cara Memasang Skitter Slideshow di Blog</a> 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 <b>Cara Modifikasi Skitter Slideshow Pada Blog</b>.<br /><br />1. Login akun blogger.<br />2. Masuk ke Tata Letak kemudian Tambahkan Widget HTML/Javascript.<br />3. Copy kode berikut ini, lalu paste kedalam Widget HTML/Javascript kemudian Simpan.<br /><pre><style type="text/css"><br />.slideshow_skitter{position:relative;width:900px;height:300px;background:#000; margin:0 auto;}<br />.slideshow_skitter img {width:900px; height:300px;}<br />.slideshow_skitter img{max-width:none}<br />.slideshow_skitter .container_skitter{overflow:hidden;position:relative}<br />.slideshow_skitter .image{overflow:hidden}<br />.slideshow_skitter .slideshow_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}<br />.slideshow_skitter .slideshow_clone img{position:absolute;top:0;left:0;z-index:20}<br />.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}<br />.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}<br />.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}<br />.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}<br />.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}<br />.slideshow_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}<br />.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}<br />.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}<br />.slideshow_skitter .info_slide_thumb .image_number img{position:absolute;top:-30px;left:-30px;height:100px}<br />.slideshow_skitter .slideshow_scroll_thumbs{padding:0}<br />.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}<br />.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}<br />.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}<br />.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}<br />.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/AVvXsEiFkbDvrELgL5tN8bamTn-xBmk3b4eTgO5SMfvcjL35E0nDHjdVRi-WD3HBdd3A_2OIyV1R7pi41ocTFTyqWzPSYW3WSw0oFfeN09l_QVlWTiDnNqXVdHSJcqdyvV0wwmaC3332qBMuWeo/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;margin:-16px}<br />.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}<br />.slideshow_skitter .label_skitter p{font:normal 22px arial,tahoma;letter-spacing:-1px;margin:0;padding:10px}<br />.slideshow_skitter .progressbar{background:#000;position:absolute;top:5px;left:15px;height:5px;width:200px;z-index:99;border-radius:20px}<br />.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}<br />.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}<br />.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}<br />.slideshow_skitter .preview_slide ul li img{position:absolute!important;top:0!important;left:0!important;height:150px!important;width:auto!important}<br />#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}<br />.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}<br />.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}<br />.slideshow_skitter_large{width:900px;height:300px}<br />.slideshow_skitter_small{width:200px;height:100px}<br />.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/AVvXsEiy1LghwvdXxLoA-PK0ovBnK9cnlJpVd27mhEQwfBfwSJCacewVK7fSgiH4bb5PMUv-NX3v54g5bEf336hv7udm-ETRZtvXMIMDi_bxZze2PSFOl1qwrO9BLNAu4uFM3kRxLvfUEU4ceq4/w84-h126-no/sprite-default.png) no-repeat}<br />.slideshow_skitter .play_pause_button.play_button{background-position:0 -84px;width:42px;height:42px}<br />.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/AVvXsEgxlcX7mMRy-3NZTkA_K1EFMmpR_t26oNoO6y5kJxKGOnJVgx9hhy1Hf1OWp2S94U6Bnd_pwmhj1Tpc3vprL0hwIC0QGjdOCOTiEHJZyw-PeKdEEuKC6XwZuJj-OdQ6Axfj-wBxnHGjoyo/w24-h110-no/sprite-minimalist.png) no-repeat!important}<br />.skitter-minimalist .prev_button{background-position:0 0!important;width:24px!important;height:28px!important;}<br />.skitter-minimalist .next_button{background-position:0 -28px!important;width:24px!important;height:28px!important;}<br />.skitter-minimalist .play_pause_button{background-position:0 -74px!important;width:18px!important;height:18px!important}<br />.skitter-minimalist .play_pause_button.play_button{background-position:0 -56px!important;width:18px!important;height:18px!important}<br />.skitter-minimalist .focus_button{background-position:0 -92px!important;width:18px!important;height:18px!important}<br />.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}<br />.skitter-minimalist .info_slide .image_number_select,.skitter-minimalist .info_slide .image_number_select:hover{background:#c33}<br />.skitter-minimalist .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0}<br />.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/AVvXsEi1IvoG9f6Vo4YG3OTZh1Z6DwpB3LjOTwHhoWC4NoCsjfgQrMfut78n4ApdiVhiSV0GqBddah0mMDBYF7T71qGR9nb7QZCP1qGHHz5EaIvtNNEgX2zGMQXU6U-Zes87xXkRP_Ru7J6GAHc/w47-h116-no/sprite-round.png) no-repeat}<br />.skitter-round .prev_button{background-position:0 0;width:23px;height:47px;left:-23px}<br />.skitter-round .next_button{background-position:-23px 0;width:23px;height:47px;right:-23px}<br />.skitter-round .next_button:hover,.skitter-round .prev_button:hover{opacity:1}<br />.skitter-round .play_pause_button{background-position:0 -70px;width:47px;height:23px;top:24px;left:24px!important}<br />.skitter-round .play_pause_button.play_button{background-position:0 -47px;width:47px;height:23px;top:24px}<br />.skitter-round .focus_button{background-position:0 -93px;width:47px;height:23px;top:24px;left:82px!important}<br />.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}<br />.skitter-round .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}<br />.skitter-round .progressbar{top:5px;left:0;background:#333;box-shadow:rgba(255,255,255,0.3) 1px 1px 0}<br />.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/AVvXsEhhrjK-ICTlE2rPAZmtIxgc5e2m5u4Oy2fUPfYDs40tVMTE_AuInG4satmL6lz83ICbemaTg_mobWkiwtjviOcPVbIPHQUnSoEUOOjGDtGd1Hyv1M40KfV81h6WzU585xSnIQ4a91VPfkM/w47-h215-no/sprite-clean.png) no-repeat}<br />.skitter-clean .prev_button{background-position:0 0;width:47px;height:46px}<br />.skitter-clean .next_button{background-position:0 -46px;width:47px;height:46px}<br />.skitter-clean .play_pause_button{background-position:0 -133px;width:41px;height:41px}<br />.skitter-clean .play_pause_button.play_button{background-position:0 -92px;width:41px;height:41px}<br />.skitter-clean .focus_button{background-position:0 -174px;width:41px;height:41px}<br />.skitter-clean .info_slide_dots .image_number{width:14px;height:14px;background:#999}<br />.skitter-clean .progressbar{top:5px;left:5px;background:#fff;box-shadow:rgba(0,0,0,0.5) 1px 1px 0}<br />.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/AVvXsEjTqcKlC4Fh8asDdMtu8O_yl0w9DTGyo9y79UBA4HajAYzsSGrXqiTZ01hhtplna1oCGm69pQjYtgCgkxPFYRUn044MrGJn5hyphenhyphen-Ti-ggfiYCw8mX46Hyn7MqV_TfLpgtTyUGYcYC26-cKA/w110-h165-no/sprite-square.png) no-repeat}<br />.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}<br />.skitter-square .play_pause_button.play_button{background-position:0 0;width:55px;height:55px}<br />.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}<br />.skitter-square .next_button{background-position:0 -55px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:10px}<br />.skitter-square .prev_button{background-position:0 -110px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:65px}<br />.skitter-square .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}<br />.skitter-square .info_slide_dots .image_number:hover{background:#999}<br />.skitter-square .info_slide_dots .image_number_select,.skitter-square .info_slide_dots .image_number_select:hover{background:#555}<br />.skitter-square .progressbar{top:0!important;left:0!important;width:100%;background:#fff;border-radius:0;height:2px}<br />.slideshow_skitter ul,.slideshow_skitter .image img{display:none}<br />.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}<br />.slideshow_skitter .info_slide .image_number:hover,.slideshow_skitter .info_slide_dots .image_number:hover{background:#000}<br />.skitter-minimalist .info_slide,.skitter-round .info_slide,.skitter-clean .info_slide,.skitter-square .info_slide{background:transparent}<br />.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}<br />.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}<br />.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}<br />.skitter-clean .info_slide .image_number:hover,.skitter-square .info_slide .image_number:hover{background:#ccc}<br />.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}<br /></style><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/slideshow.skitter.min.js" type="text/javascript"></script><br /><script type="text/javascript"><br />$(document).ready(function() {<br />$('.slideshow_skitter_large').skitter({<br />theme: '<b><span style="color: blue;">square</span></b>',<br />numbers_align: 'center',<br />progressbar: true, <br />dots: true, <br />preview: true<br />});<br />});<br /></script><br /><br /><div class="slideshow_skitter slideshow_skitter_large"><br /><ul><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cube</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6AOMTXxlkRUULYG66iXKExNLpeU7DKIrUTyGQni6Ec3CTRFpUbJY8B0JW2Bx8VD6Vg-ss5GnYC-XAWAfbw8cACvaZ9L0KdJfur-1WYbHUwEo6lX_SC0FFkW9KX5fayDvY0E636VTkdmE/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cubeRandom</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjXfG253rAWzHlhk6ec4wlwWoxcfq2DA8i2kLTmhhAhte2XSlim7B7KITK6pUxev688nyqnyl1968yQ1MlMghNIk8yT5AIagZ9jxTbY6KtTcIMODns0mKmKxXHwlJQk2rP3ikNJnUnao/w600-h300-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">block</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZXxYBgR1PhEKlodonG7Je9Eypv0n8TxGSAaSDIQrwMeFI_sPCCJysJQoXFYz6OaiENkq-NMokgJudsp857Kk4EbHD41LkPtN9k9b5XzlWGg9tm43_O3pKZOVpMa1DVzpEn8mYTXCP0g/w790-h286-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cubeStop</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcBlOPbdrS8Dc3CcMgXacKBkfkcuzjpMhg9GKSwmKDD0By-KB5dXCdhryFoPH5FD8T7VatiJXSg8qetx5A-dzNd5CxsialItAmR4lvJvoesY6jLezcLBsMi3crCKnbbZ3VwZoHj7VJBHs/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img class="<span style="color: red;">cubeHide</span>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJRi5T3MqUcadffight6ZnmI2LuKnsuYXBdxhykqtJsbKN4YVI7YztsM5Noz4sYMQJk6KDIeOBl31c4UrqrcBCzlM67IEuvU0Oop7_9nZWeCSFldxUeFSfpLRDK7cYJyJw3IIw9_VF48/w463-h240-no/" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li><br /></ul><br /></div></pre>Keterangan:<br />- Ganti <b>http://mas-andes.blogspot.com</b> dan URL gambar.<br />- Untuk lebar slider silahkan ubah sesuai selera masing-masing.<br /><br /><span style="font-size: large;"><b>Customisasi</b></span><br />Dari kode yang terdapat di atas, perhatikan teks yang berwarna <span style="color: blue;">biru</span>. 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 <span style="color: blue;"><b>square</b></span>, <span style="color: blue;"><b>clean</b></span>, <span style="color: blue;"><b>round</b></span>, <span style="color: blue;"><b>minimalist</b></span>.<br /><br />Sedangkan pada type efek animasi slider perhatikan teks yang berwarna <span style="color: red;">merah </span>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: <code>cube</code>, <code>cubeRandom</code>, <code>block</code>, <code>cubeStop</code>, <code>cubeStopRandom</code>, <code>cubeHide</code>, <code>cubeSize</code>, <code>horizontal</code>, <code>showBars</code>, <code>showBarsRandom</code>, <code>tube</code>, <code>fade</code>, <code>fadeFour</code>, <code>paralell</code>, <code>blind</code>, <code>blindHeight</code>, <code>blindWidth</code>, <code>directionTop</code>, <code>directionBottom</code>, <code>directionRight</code>, <code>directionLeft</code>, <code>cubeSpread</code>, <code>glassCube</code>, <code>glassBlock</code>, <code>circles</code>, <code>circlesInside</code>, <code>circlesRotate</code>, <code>cubeShow</code>, <code>upBars</code>, <code>downBars</code>, <code>hideBars</code>, <code>swapBars</code>, <code>swapBarsBack</code>, <code>swapBlocks</code>, <code>cut</code>, <code>hideProgressBar</code>.<br /><br />Untuk yang lain-lain misalkan ingin merubah warna,font, maupun letak elemen silahkan custom sendiri agar sesuai dengan template blog yang di gunakan.

Cara Modifikasi Skitter Slideshow Pada Blog – setelah pada artikel sebelumnya membahas tema yang sam…

Read More

Cara Memasang Skitter Slideshow di Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdeRhuwHLzEBkjSPSLfPioAUWVixi27C0uSatv0qm7pvsD0d9AUFg7xH6NTJf_Uzmu9LoitTq2QmrZXWo0DmK1g-R2er1dK9SEl4ZOcLmxEubGgyRMcgnJsg0iSDkMycAsZufJU0eYhOQ/s1600/skitter-slideshow.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Slider Skitter Slideshow" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdeRhuwHLzEBkjSPSLfPioAUWVixi27C0uSatv0qm7pvsD0d9AUFg7xH6NTJf_Uzmu9LoitTq2QmrZXWo0DmK1g-R2er1dK9SEl4ZOcLmxEubGgyRMcgnJsg0iSDkMycAsZufJU0eYhOQ/s540/skitter-slideshow.jpg" title="Cara Memasang Skitter Slideshow di Blog" width="540" /></a><b>Cara Memasang Skitter Slideshow di Blog</b> – setelah beberapa waktu lalu sudah pernah membahas untuk <a href="http://mas-andes.blogspot.com/2013/07/menambah-fitur-jquery-animasi-slider.html" target="_blank" title="Menambah Fitur jQuery Animasi Slider Pada Blog">Menambah Fitur jQuery Animasi Slider Pada Blog</a> 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 <b>Cara Memasang Skitter Slideshow di Blog</b>.<br /><br />1. Login ke blogger.<br />2. Masuk ke Tata Letak kemudian Tambahkan Widget HTML/Javascript.<br />3. Copy kode berikut ini.<pre><style type="text/css"><br />.skitter_slideshow {background:#111;padding:10px 10px 30px 10px;float:left;margin:auto; }<br />.skitter_slideshow img {width:850px; height:300px;}<br />.label_skitter {text-transform:uppercase;z-index:150;position:absolute;bottom:0px;left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnT6nQujAAJvsZ0pj6iov30FvNFhGYTvWZ_XOMQnUX7HDO0ILSE3j3W_wKeYMqpdJJqPfVQUPkVHTgJ7GhRzRNrAjpfRZd5R94zYYUdXzepXDbTjflPxDOF2_eMHzIDDtCkyRXs6fDKKs/h120/back-box-label-black.png) repeat-x left top;color:#fff;display:none;border-top:1px solid #000;}<br />.label_skitter p {padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px;}<br />.info_slide * {font-family:Consolas,arial,tahoma !important;}<br />.slideshow_skitter {position:relative;width:850px;height:300px;}<br />.slideshow_skitter ul {display:none;}<br />.slideshow_skitter .container_skitter {overflow:hidden;position:relative;}<br />.slideshow_skitter .image {overflow:hidden;}<br />.slideshow_skitter .image img {display:none;}<br />.slideshow_skitter .slideshow_clone {position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20;}<br />.slideshow_skitter .slideshow_clone img {position:absolute;top:0;left:0;z-index:20;}<br />.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/AVvXsEjvxQrW7GJTyNalieYI1ByYLKqawSNj5ZM60AhmrYO9_MIUeE7U-Ac51CyTOXAxB0i3ndcRex_u8tk7pNvU6GEj55xkPFrnX8vva_AaPqB2ux4L8wdROpQ0MmYPXVv4cdv1Y3kTx3NsJS0/h120/prev.png) no-repeat left top;}<br />.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/AVvXsEhwOCT_iXY7k2XhEtpbm5ZukZZE5_6Y19uK1s_AVFqEm-VojSoSnFSbT3r5y6lhPLq-b82BZKtPAimTTm5gpKKKbzMs-ybZw2j9NLqyWFA2zrADDsx7ezj9Xzd6T6BP4BQLsZrBjit3KMg/h120/next.png) no-repeat left top;}<br />.slideshow_skitter .info_slide {position:absolute;bottom:-27px;left:40px;z-index:100;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;}<br />.slideshow_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;}<br />.slideshow_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;}<br />.slideshow_skitter .container_thumbs {position:relative;overflow:hidden;height:50px;}<br />.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;}<br />.slideshow_skitter .info_slide_thumb .image_number {overflow:hidden;width:70px;height:40px;position:relative;}<br />.slideshow_skitter .info_slide_thumb .image_number img {position:absolute;top:-50px;left:-50px}<br />.slideshow_skitter .slideshow_scroll_thumbs {padding:0 10px;}<br />.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;}<br />.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;}<br />.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;}<br />.slideshow_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;}<br />.slideshow_skitter .label_skitter {z-index:150;position:absolute;bottom:0px;left:0px;display:none;}<br />.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/AVvXsEiFkbDvrELgL5tN8bamTn-xBmk3b4eTgO5SMfvcjL35E0nDHjdVRi-WD3HBdd3A_2OIyV1R7pi41ocTFTyqWzPSYW3WSw0oFfeN09l_QVlWTiDnNqXVdHSJcqdyvV0wwmaC3332qBMuWeo/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}<br />.slideshow_skitter_large {width:850px;height:300px;}<br />.slideshow_skitter_small {width:200px;height:200px;}<br /></style><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.skitter.min.js" type="text/javascript"></script><br /><script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script><br /><script type="text/javascript"><br />$(document).ready(function() {<br />var options = {};<br />if (document.location.search) {<br />var array = document.location.search.split('=');<br />var param = array[0].replace('?', '');<br />var value = array[1];<br />if (param == 'animation') {<br />options.animation = value;<br />}<br />else if (param == 'type_navigation') {<br />options[value] = true;<br />if (value == 'dots') $('.skitter_slideshow').css({'margin': 'auto'});<br />}<br />}<br />$('.slideshow_skitter_large').skitter(options);<br />});<br /></script><br /><div class="skitter_slideshow"><br /><div class="slideshow_skitter slideshow_skitter_large"><br /><ul><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6AOMTXxlkRUULYG66iXKExNLpeU7DKIrUTyGQni6Ec3CTRFpUbJY8B0JW2Bx8VD6Vg-ss5GnYC-XAWAfbw8cACvaZ9L0KdJfur-1WYbHUwEo6lX_SC0FFkW9KX5fayDvY0E636VTkdmE/w600-h300-no/" class="cube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjXfG253rAWzHlhk6ec4wlwWoxcfq2DA8i2kLTmhhAhte2XSlim7B7KITK6pUxev688nyqnyl1968yQ1MlMghNIk8yT5AIagZ9jxTbY6KtTcIMODns0mKmKxXHwlJQk2rP3ikNJnUnao/w600-h300-no/" class="cubeRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZXxYBgR1PhEKlodonG7Je9Eypv0n8TxGSAaSDIQrwMeFI_sPCCJysJQoXFYz6OaiENkq-NMokgJudsp857Kk4EbHD41LkPtN9k9b5XzlWGg9tm43_O3pKZOVpMa1DVzpEn8mYTXCP0g/w790-h286-no/" class="block" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcBlOPbdrS8Dc3CcMgXacKBkfkcuzjpMhg9GKSwmKDD0By-KB5dXCdhryFoPH5FD8T7VatiJXSg8qetx5A-dzNd5CxsialItAmR4lvJvoesY6jLezcLBsMi3crCKnbbZ3VwZoHj7VJBHs/w463-h240-no/" class="cubeStop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJRi5T3MqUcadffight6ZnmI2LuKnsuYXBdxhykqtJsbKN4YVI7YztsM5Noz4sYMQJk6KDIeOBl31c4UrqrcBCzlM67IEuvU0Oop7_9nZWeCSFldxUeFSfpLRDK7cYJyJw3IIw9_VF48/w463-h240-no/" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg269fy24RJhnTRhMQf886FhhcL56MtFmvgyRDhNiY_9zZfXRJyPKybxCmfNTPIqvQGFYGV-iETDD6yIuATH4Vh9R1eQDWtocwF5-a-hS8GwUrHa_mhX6KqT_3ZJu_VuKCwI81tmRH-CjI/w463-h240-no/" class="cubeSize" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube size</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVRUsaXVLEDlqmNOkqoZJKXFGUhuamlUBh_iy503MYs6-sCiMvcchHuBp-LdGlI3jgcSZbl6NmApBAZZ1kjzr-vOzQiacKtWvTOq5LRYavzCsLN4UIMB4_-X3ZmEAs1Izjoop2DfJ-H34/w500-h300-no/" class="horizontal" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek horisontal</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhc_ER3myadj0I4JgxJGfDMy8y__C12WzQBmEyYViz5cU47IaiwnrzITcimag7Cl1RUHJH1OKQD-DQpmlgmCd9zFvsS2Wp6nJN1PQtN9BCQfAzgB2-GIx2mFmfYBb7GjkUv0XUlWK1AA/w852-h284-no/" class="showBars" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbars</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjiKxdQM8qW4NwkS3EIv4AOnwcnaSmkp8TxNScewmZ1vxHhyphenhyphenOVUw7bwSPr8fj7-UtrCyDQozW2rZpT54EYrh7TaPDh_q8Q77F64XvReYVUP95v-e7i9MXD19hBdTLObMwWW2Z45qNANM8/w500-h300-no/" class="showBarsRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbarsrandom</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDFpgwioPTgNb0Mk2RoVaEoCncMLgq0MzO2qWdxzZuwYPq4XwgYH00Htj-xd-3kHU46IiLbK6fl3TnpiilM9it_1gmQgJg8lpe1R9EaxwqZJ2ToT_0dDznwSOk9N0kKqok96dK5PINUFs/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><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNSwGdST4RtP935i0mNw0AJwass6j6vtbOcV15Pr8-4sY1oyYaG5ngxNyeUEVI1DWa7BNgklprP_o1A8xzOsW_dOcgxJHOxa5htALd3snuln2jfQ-gwJJzx2GViFQex392hNPrCzPaME/w500-h300-no/" class="fade" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fade</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6A9Pma89OzPnzFTWLgnSpiTlDPJ9e_wgChfpCqK13cdPm13GsdZzDyQ-lEDzRuixoknvf9IHYg_Zv2BiQS_WTcM5h6L1E5E5w3q1l2j7NcZptcLr7hA5pXaeHSYqU0piIwxCph5YmL3s/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><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaylsM7Jkxm8xBNuyIyM0vUwGyxCU2ReFmFdH7j9I-1a7_Aau18W4zeE2Js6ed2C9oO7VddZyJb_FnqvgyZpKlOikHKjBvDjEzT7ixcPA8-9J9K0PBjAo8_lE-Qe20EhGGV6dYzSvXVX8/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><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFttFNTcwqneBdCqK5oQyO_VPQ0Gsq0jSOoJ1NYxAjAYPMG42RsQ4sTE7EDpnGDcGv3M9GAamO5InZ1_lJ8Glq1BuwGn2r13nIDOOwP6syundA83IS7C4U8s3zSfGcBdNVKqvwCGdKIWk/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><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8lG6Mlg1FAmZgY9-l1q6YUXzZAuDZr6wSoyMhaaJOqMSICh0S1f4aVgJ8MPAMwkU-aGgM2SiEp3UL7m7qcBBjR3BXlnZeP7sFY_yT7DfWGZn-1_DvK5kaqaP3yVHwmhy359TNxoSPI8k/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><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRv-sEOPbUXO0SSNdNEoVS98-ISL-iP1RKg5ZGmolFYQhOMmZCQOwPoWdDor8C17dPmDI91rOxNxuV68pnfKuOqVMxudWLx5ABwlnXYT84-1VaxuxvTDiBuHsAtAgFeYaxfcHdHQ5fX0Q/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><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYo6d3Pgh-DtWiXFul7dXLrfUsA8DD6549qGq7y22pqFW_NXZftWG4955yV4QkWY_s-HKTE4b6pf8XsqZyXqqu8RlXg5IO_om5ZJryA7AeGUxyGw6skqHnj_ITQZGdjneMiY6qzm_OAA/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><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsCigMdHpAhQf5aU2uxqJNgOgB0IohCmowK9j4ejyzgi1_MbGAZ_P5nClQDJhdXzEmbGIpwB7YKXu_SyYIwoVumBAWa73JHJZwjAk9wxlpkGr8bFrt0y2PYRH0bo2S93UpcDIxMRowQmI/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><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic7i4gHSjKFPtSsr-K14LCdyKIThdSj6puBuhPFYc179Lr7YsjpmsS8bKAG6mrDHECv_a6F-AzQ-l2OVhtYCaEJ720gsb0XAhMSep8V16AT_sC6lolLvpcnBM8NiN7s7-72ptbKK4HMwI/w500-h300-no/" class="directionRight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionRight</p></div></li><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9laLBVs2Yag-Ps_NnxwcIw5CXCdDmlTyA1X62h60-DBZxFdDVxhfvf4IPK3pvmKsaYSjEEqj9eR0n7koVGuQqa2_An5dlFjEAOvrVvVMcYADEDraIcaAkptaDH8C0rHMDc9rfDr-h1Wg/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><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl8jhJhXjAZNRyU4D3gwkMtQGJky0ujYtF2OjWFVRrqLtGXM7ZDvdQThBD8CU5lGLzF06k10NYscOV5_HeRxXjFZWpUQh5ijn_5v5zuAyz0SGsaJqXnPDds2xjTDVCnQyvPZOCNvQqEmc/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><br /><li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxqHN9hnAbOCPX8DyGzXXniC2jA-ifZeJMBg6Pz5DZyjx2vdPL5R_5JPLNhdYX_AQviAYoGeJXhZz8E0Td67CVDd6ADT8PXHT2009qraKEW4_XVcR9rfYRCPAp_AeUIB75NAxg8QELM8/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>                <br /></ul><br /></div><br /></div></pre>Keterangan:<br />Ganti<b> http://mas-andes.blogspot.com</b> dan URL gambar.<br /><br />4. Paste kode tersebut kedalam Widget HTML/Javascript.<br />5. Langkah terakhir Simpan.<br /><br />Di atas hanya kode dasarnya saja, silahkan sesuaikan atau custom sendiri dengan tampilan yang lebih menarik sesuai dengan selera masing-masing.

Cara Memasang Skitter Slideshow di Blog – setelah beberapa waktu lalu sudah pernah membahas untuk Me…

Read More

Membuat Tooltip Otomatis di Semua Judul Posting

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYW68Xk3NBusTHT-LAPzYbpX6eGpcTwRsT24Btov7jvmga39Fb8rRfMqE4DcIgQtupJQjRyxmRk_8fDnfr1VXfXNMkIHt1xDAs6SRJEunF56IQkf6IsTlvrt-iZqHYLSvZ0LeLjiH4WD8/s1600/auto-tooltip-title-post.png" style="margin-left: 1em; margin-right: 1em;"><img alt="auto tooltip link title post blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYW68Xk3NBusTHT-LAPzYbpX6eGpcTwRsT24Btov7jvmga39Fb8rRfMqE4DcIgQtupJQjRyxmRk_8fDnfr1VXfXNMkIHt1xDAs6SRJEunF56IQkf6IsTlvrt-iZqHYLSvZ0LeLjiH4WD8/s540/auto-tooltip-title-post.png" title="Membuat Tooltip Otomatis di Semua Judul Posting" width="540" /></a><b>Membuat Tooltip Otomatis di Semua Judul Posting</b> – 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 <a class="tooltip" href="http://mas-andes.blogspot.com/2012/12/cara-memasangmenambah-link-pada-judul.html" target="_blank" title="membuat link otomatis pada judul posting">membuat link otomatis pada judul posting</a> 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 <b>Membuat Tooltip Otomatis di Semua Judul Posting</b>.<br /><br />1. Login ke akun blogger.<br />2. Masuk ke menu Template lalu pilih Edit HTML.<br />3. Copy kode CSS berikut ini lalu taruh di atas kode <code>]]></b:skin></code><br /><pre>#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; }</pre>4. Selanjutnya copy kode berikut ini lalu taruh di atas kode <code></body></code><br /><pre><span style="color: orange;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script></span><br /><script type='text/javascript'><br />this.tooltip = function(){<br />        xOffset = 10;<br />        yOffset = 20;<br />    $("a.tooltip").hover(function(e){                                              <br />        this.t = this.title;<br />        this.title = "";                                      <br />        $("body").append("<a id='tooltip'>"+ this.t +"</a>");<br />        $("#tooltip")<br />            .css("top",(e.pageY - xOffset) + "px")<br />            .css("left",(e.pageX + yOffset) + "px")<br />            .fadeIn("fast");        <br />    },<br />    function(){<br />        this.title = this.t;        <br />        $("#tooltip").remove();<br />    });    <br />    $("a.tooltip").mousemove(function(e){<br />        $("#tooltip")<br />            .css("top",(e.pageY - xOffset) + "px")<br />            .css("left",(e.pageX + yOffset) + "px");<br />    });            <br />};<br />$(document).ready(function(){<br />    tooltip();<br />});<br /></script></pre>Keterangan:<br />Perhatikan kode yang berwarna <span style="color: orange;">oranye</span>, apabila pada template blog anda sudah terdapat kode tersebut maka tidak perlu menambahkannya lagi.<br /><br />5. Kemudian cari kode <br /><pre><span style="color: red;"><data:post.title/></span></pre>Atau<br /><pre><span style="color: red;"><a expr:href='data:post.link'><data:post.title/></a></span></pre>Atau<br /><pre><span style="color: red;"><a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a></span></pre>Untuk lebih jelasnya struktur keseluruhan kode tersebut seperti di bawah ini (pada template default blogger).<br /><pre><<span style="color: blue;"><b>h3</b></span> class='post-title entry-title' itemprop='name'><br />      <b:if cond='data:post.link'><br />        <a expr:href='data:post.link'><data:post.title/></a><br />      <b:else/><br />        <b:if cond='data:post.url'><br />          <b:if cond='data:blog.url != data:post.url'><br />            <a expr:href='data:post.url'><data:post.title/></a><br />          <b:else/><br />            <span style="color: red;"><data:post.title/></span><br />          </b:if><br />        <b:else/><br />          <data:post.title/><br />        </b:if><br />      </b:if><br />      </<b><span style="color: blue;">h3</span></b>> </pre>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 <span style="color: blue;"><b>h3</b></span> sudah di rubah menjadi <span style="color: blue;"><b>h1</b></span> atau <span style="color: blue;"><b>h2</b></span>. 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.<br /><pre><<b><span style="color: blue;">h1</span></b> class='post-title entry-title'><br /><b:if cond='data:post.link'><br /><a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a><br /><b:else/><br /><span style="color: red;"><a expr:href='data:post.link'><data:post.title/></a></span><br /></b:if><br /></<span style="color: blue;"><b>h1</b></span>></pre>Apabila kode tersebut sudah di temukan, ubah kode yang berwarna merah dengan menambahkan kode <code>class='tooltip'</code> secara lengkapnya kode tersebut menjadi seperti dibawah ini.<br /><pre><a <span style="color: red;">class='tooltip'</span> expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a></pre>Langkah terakhir tinggal lakukan klik Simpan template, maka kini secara otomatis setiap judul posting yang terdapat pada halaman blog anda sudah terdapat efek tooltip.<br /><br />Efek tooltip tersebut bisa juga kita terapkan ke dalam setiap link teks maupun link gambar secara manual dengan menambahkan <code>class="tooltip"</code> di setiap link yang di kehendaki.<br /><br />Sebagai contoh, misal akan menambahkan efek tooltip pada link yang terdapat di postingan maka penulisan link tersebut menjadi seperti di bawah ini.<br /><pre><a <span style="color: red;">class="tooltip"</span> href="http://mas-andes.blogspot.com" title="Faceblog Evolutions">Faceblog Evolutions</a></pre>Atau jika ingin menerapkan kedalam gambar maka penulisannya menjadi seperti di bawah ini.<br /><pre><a <span style="color: red;">class="tooltip"</span> href="http://mas-andes.blogspot.com" title="Faceblog Evolutions"><img src="URL-GAMBAR.jpg" width="560" height="100" alt="Faceblog Evolutions"/></a></pre>Maka dari kedua kode tersebut jika di tampilkan maka hasilnya akan seperti dibawah ini:<br/><br/><a class="tooltip" href="http://mas-andes.blogspot.com" target="_blank" title="Faceblog Evolutions">Faceblog Evolutions</a><br/><br/>dan<br/><br/><a class="tooltip" href="http://mas-andes.blogspot.com" title="Faceblog Evolutions"><img alt="Faceblog Evolutions" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimXXqCfHLGHUdkXGilBvIBmKFg0n897o-HmUsHXl14tzbooLpjwkdmbGHzIv62wQVYKW4UsQtRAkQG1rMkfWRxqXADy0n1umT1ahL3Cc3R4SCrVuvUNURopX2MK57H13em6Dx-cQOyH5Q/h100/header.jpg" width="560"/></a><br /><br />Demikian akhir dari tutorial cara <b>Membuat Tooltip Otomatis di Semua Judul Posting</b>, baik itu untuk menambahkan efek tooltip secara manual pada setiap link teks maupun gambar.

Membuat Tooltip Otomatis di Semua Judul Posting – sebelum membahas lebih jauh terlebih dahulu saya a…

Read More

Cara Membuat Headline Breaking News di Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUhNG6YXOw5XtakvH7mdl9pUM1IVnQCdiNm5jL80d0uTXc79LFAtaWxux-eRHYxOfeJJC8AypXuyNdhUY-nFOGXCovexjNwJcf1YBICu7vEU1dubnymhSznAzeiZwkP2RudOrVT3S5b0/s1600/breaking-news-blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Headline Breaking News Blogger" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCUhNG6YXOw5XtakvH7mdl9pUM1IVnQCdiNm5jL80d0uTXc79LFAtaWxux-eRHYxOfeJJC8AypXuyNdhUY-nFOGXCovexjNwJcf1YBICu7vEU1dubnymhSznAzeiZwkP2RudOrVT3S5b0/s640/breaking-news-blogger.jpg" title="Cara Membuat Headline Breaking News di Blog" width="540" /></a><b>Cara Membuat Headline Breaking News di Blog</b> – 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 <b>Cara Membuat Headline Breaking News di Blog</b>.<br /><br /><a class="button" href="http://demofaceblog.blogspot.com/" rel="nofollow" target="_blank">Demo</a><br /><br />1. Login pada akun blogger.<br />2. Masuk ke Tata Letak blog dan tambahkan widget.<br />3. Copy kode berikut ini lalu masukan kedalam widget HTML/Javascript. <pre><style type='text/css' scoped="scoped"><br />#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: <span style="color: blue;"><b>835px</b></span>; }<br />.titlenews { background:#333; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }<br />#ltsposts { float: left; margin-left: 120px; }<br />#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}<br />#ltsposts li a { background: none !important; color:#333 !important; font: bold 12px/22px Tahoma; text-decoration: none; }<br />ul.shsocial { background:#333; float: right; margin: -8px 0; }<br />ul.shsocial li {float:left;list-style: none outside none;border:none;}<br />ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIp0RQqSLXxxI4KInKINw4bLkhPGWuF_5leOmMZfL2NirGmoURP99eYB-t5LStx0XmRlyeyeAetqNeXufIIwlbfuYGX9IMqD1UuqKz61I30kCZ6pFVbu5IWsDISM8_H5BKPWJwAnsuWact/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}<br />ul.shsocial li.fb a{ background-position:0 0}<br />ul.shsocial li.gp a{ background-position:-96px 0}<br />ul.shsocial li.rs a{ background-position:-192px 0}<br />ul.shsocial li.tw a{ background-position:-256px 0}<br />ul.shsocial li.fb a:hover{ background-position:0 -32px}<br />ul.shsocial li.gp a:hover{ background-position:-96px -32px}<br />ul.shsocial li.rs a:hover{ background-position:-192px -32px}<br />ul.shsocial li.tw a:hover{ background-position:-256px -32px}<br /></style><br /><br /><div id='news'><span class='titlenews'>Latest Post</span><br /><div id='ltsposts'>Loading...</div><br /><ul class='shsocial'><br /><li class='fb'><br /><a href='http://www.facebook.com/<span style="color: red;">andestyle</span>' rel='nofollow' target='_blank' title='facebook'><br /></a></li><br /><li class='gp'><br /><a href='https://plus.google.com/<span style="color: red;">104093787575230359634</span>' rel='nofollow' target='_blank' title='googleplus'><br /></a></li><br /><li class='tw'><br /><a href='http://twitter.com/<span style="color: red;">rizkyandes</span>' rel='nofollow' target='_blank' title='twitter'><br /></a></li><br /><li class='rs'><br /><a href='http://feeds.feedburner.com/<span style="color: red;">masandes</span>' rel='nofollow' target='_blank' title='rss'><br /></a></li><br /></ul><br /></div><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function () {<br />var url_blog = '<b>http://mas-andes.blogspot.com</b>', // Replace With your Blog Url<br />numpostx     = 20; // Maximum Post<br />$.ajax({<br />    url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',<br />    type: 'get',<br />    dataType: "jsonp",<br />    success: function(data) {<br />        var posturl, posttitle, skeleton = '',<br />            entry = data.feed.entry;<br />        if (entry !== undefined) {<br />            skeleton = "<ul>";<br />        for (var i = 0; i < entry.length; i++) {<br />                for (var j=0; j < entry[i].link.length; j++)<br />                {<br />                     if (entry[i].link[j].rel == "alternate")<br />                        {<br />                            posturl = entry[i].link[j].href;<br />                            break;<br />                         }<br />                }                <br />            posttitle = entry[i].title.$t;<br />            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';<br />        }<br />            skeleton += '</ul>';<br />            $('#ltsposts').html(skeleton);<br />            function tick(){<br />            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });<br />            }<br />        setInterval(function(){ tick () }, 5000);<br />        } else {<br />            $('#ltsposts').html('<span>No result!</span>');<br />        }<br />    },<br />    error: function() {<br />            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');<br />       }<br />});<br />});<br />//]]><br /></script></pre>Keterangan:<br />Tulisan warna <span style="color: blue;">biru </span>ganti dengan lebar blog anda.<br />Ganti <b>http://mas-andes.blogspot.com </b>dengan URL alamat blog anda.<br />Tulisan yang berwarna <span style="color: red;">merah </span>ganti dengan ID masing-masing.<br /><br />4. Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.<br /><br />Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog anda dengan menggeser elemen tata letak.

Cara Membuat Headline Breaking News di Blog – sebenarnya ini sama seperti widget recent post atau la…

Read More

Membuat Tombol Share di Bawah Posting Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHTP6uGGQe5f46qYbfy69IgzUz4CKNavoC9y1YT4x3bvNrSlq82AcJVpDvIkzQA5r4kaaCSF8fiCow-UJrDEzftpxnVFrqY-SIZkKB7OgxHFl7JrbHQr7n-T57_ZbiSd21a4tvtM4DTnU/s1600/tombol-share-blogger-valid-HTML5.gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Tombol Share Blogger Valid HTML5" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHTP6uGGQe5f46qYbfy69IgzUz4CKNavoC9y1YT4x3bvNrSlq82AcJVpDvIkzQA5r4kaaCSF8fiCow-UJrDEzftpxnVFrqY-SIZkKB7OgxHFl7JrbHQr7n-T57_ZbiSd21a4tvtM4DTnU/s540/tombol-share-blogger-valid-HTML5.gif" title="Membuat Tombol Share di Bawah Posting Blog" width="540" /></a><b>Membuat Tombol Share di Bawah Posting Blog</b> – tentu sudah tidak asing lagi dengan tombol share yang biasa terlihat di bawah posting blog, fungsi dari tombol share tersebut agar lebih memudahkan visitor untuk membagikan artikel yang sudah kita posting ke dalam beberapa media sosial seperti facebok, twitter, google+, lintasme dan jejaring sosial lainnya. Tanpa memasang tombol share ini sebenarnya blogger juga sudah menyediakan widget tombol share, namun apa daya karena tombol share default blogger tersebut tidak valid HTML5 jadi ada baiknya apabila kita modifikasi agar tombol share yang terletak di bawah posting blog agar bisa lolos dari validator W3C dan bisa valid HTML5. Untuk membuat tombol share ini hanya menggunakan CSS saja tanpa menggunakan gambar, sehingga tampilan dari tombol share ini lebih sederhana dan minimalis dengan di sertai warna-warna yang menarik. Untuk memasang tombol share di bawah posting blog juga cukup mudah, hanya dengan menambahkan sedikit kode saja yang terdapat dibawah ke dalam Edit HTML template blog maka hasilnya seperti yang tertera pada gambar di atas. Untuk itu berikut tutorial untuk <b>Membuat Tombol Share di Bawah Posting Blog</b> agar valid HTML5 dan full color.<br /><br />1. Login ke akun blogger.<br />2. Masuk ke Template lalu pilih Edit HTML.<br />3. Copy kode berikut ini lalu taruh di atas kode <code>]]></b:skin></code><pre>.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;}<br />.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}<br />.widgetshare a:hover {box-shadow: 0 0 5px #00ff00; border: 1px solid #e9fbe9;}<br />.fcbok { background: #3B5999; }<br />.twitt { background: #01BBF6; }<br />.gplus { background: #D54135; }<br />.digg { background: #5b88af; }<br />.lkdin { background: #005a87; }<br />.tchno { background: #008000; }<br />.ltsme { background: #fb8938; }</pre>4. Selanjutnya copy kode berikut ini, lalu taruh di bawah kode <code><data:post.body/></code> atau bisa juga <code><div class='post-footer'></code><pre><div class='widgetshare'><br />Share artikel ke: <br /><a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> <br /><a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> <br /><a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a><br /><a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a><br /><a class='tchno' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a><br /><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a><br /><script><br />//<![CDATA[<br />var uri = window.location.href;<br />var ttle = document.title;<br />document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>");<br />//]]><br /></script><br /></div></pre>5. Langkah terakhir tinggal Simpan template lalu lihat hasilnya.<br /><br />Demikian tutorial untuk <b>Membuat Tombol Share di Bawah Posting Blog</b>. Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat beberapa kode <code><data:post.body/></code> dan <code><div class='post-footer'></code> maka dari itu silahkan sesuaikan dengan template blog yang anda gunakan.

Membuat Tombol Share di Bawah Posting Blog – tentu sudah tidak asing lagi dengan tombol share yang b…

Read More

Membuat Ribbon Gallery Image di Blog With CSS

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKo2fmx28SAlb9hfv7m7Rq1fndse1ZHa0wSTZQVOm4h36tN3OpRguIQAg9jjReQlTcOaJlO-7-fK6ojmw86UEdKxGWyaaPum-zsr1MgFsKuq1QNR9ZTe2-Hpt1uPaOBvKZu-zeNSKMheM/s1600/ribbon-css-gallery-image.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Ribbon Gallery Image di Blog With CSS" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKo2fmx28SAlb9hfv7m7Rq1fndse1ZHa0wSTZQVOm4h36tN3OpRguIQAg9jjReQlTcOaJlO-7-fK6ojmw86UEdKxGWyaaPum-zsr1MgFsKuq1QNR9ZTe2-Hpt1uPaOBvKZu-zeNSKMheM/s540/ribbon-css-gallery-image.png" title="Membuat Ribbon Gallery Image di Blog With CSS" width="540" /></a><b>Membuat Ribbon Gallery Image di Blog With CSS</b> – setelah beberapa waktu lalu sudah mengulas mengenai CSS ribbon pada blog diantaranya pada tutorial yang berjudul:<br /><br />- <a href="http://mas-andes.blogspot.com/2013/07/style-ribbon-email-subscribe-blogger.html" target="_blank" title="Style Ribbon Email Subscribe Blogger">Style Ribbon Email Subscribe Blogger</a><br />- <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" target="_blank" title="Membuat Sidebar Blog Dengan Efek Ribbon">Membuat Sidebar Blog Dengan Efek Ribbon</a><br />- <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-ribbon-pada-blog.html" target="_blank" title="Membuat Sidebar Ribbon Pada Blog">Membuat Sidebar Ribbon Pada Blog</a><br />- <a href="http://mas-andes.blogspot.com/2013/06/membuat-efek-ribbon-pada-sidebar-blog.html" target="_blank" title="Membuat Efek Ribbon Pada Sidebar Blog">Membuat Efek Ribbon Pada Sidebar Blog</a><br />- <a href="http://mas-andes.blogspot.com/2013/04/membuat-menu-horisontal-ribbon-style.html" target="_blank" title"Membuat Menu Horisontal Ribbon Style CSS3 di Blog">Membuat Menu Horisontal Ribbon Style CSS3 di Blog</a><br /><br />Setelah beberapa waktu lalu membaca <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-ribbon-pada-blog.html?showComment=1380976418198#c2673337480315267048" target="_blank">komentar dari Mas Anton Setiawan</a>, kini saya akan kembali membahas bagaimana cara untuk membuat ribbon CSS pada gallery image untuk di terapkan ke dalam postingan blog? Untuk menambahkan ribbon pada image yang terletak pada gallery blog caranya cukup mudah. Tentu sudah tidak asing lagi dengan istilah Pseudo Element, sebelum melanjutkan penjelasan lebih jauh terlebih dahulu saya akan sedikit membahas mengenai penggunaan Pseudo Element. Pseudo Element dalam CSS bisa diartikan tidak real atau bohongan (bukan sebenarnya), karena dengan menambahkan Pseudo Element seolah olah kita menambahkan elemen atau suatu tag baru di dalam tag yang kita beri style. Terdapat 4 Pseudo Element yang dikelompokkan menjadi dua bagian, yang pertama adalah Pseudo Element <code>:before</code> dan <code>:after</code> sedangkan yang kedua adalah Pseudo Element <code>:first-letter</code> dan <code>:first-line</code>. Dengan adanya Pseudo Element tersebut maka semakin memudahkan kita dalam mendeklarasikan style CSS. Tutorial untuk membuat ribbon pada gallery image ini saya memanfaatkan bagian Pseudo Element yang pertama, yaitu <code>:before</code> dan <code>:after</code>. Mungkin untuk yang mempunyai web/blog toko online maupun niche blog sejenisnya akan membutuhkan tutorial ini untuk membuat ribbon pada gallery image. Untuk lebih jelasnya, berikut tutorialnya untuk cara <b>Membuat Ribbon Gallery Image di Blog With CSS</b>.<br /><br />1. Login terlebih dahulu ke akun blogger.<br />2. Kemudian pada template pilih Edit HTML.<br />3. Lalu copy kode CSS berikut ini lalu taruh di atas kode <code>]]></b:skin></code> kemudian Simpan template.<pre>.ribbon-gallery { position: relative; color: #fff; display: inline-block; padding: 7px; overflow: hidden; font: bold 16px Arial; text-shadow:0 0 3px #f2f2f2 inset; width:260px; }<br />.ribbon-gallery img { width:250px; height:300px; border:5px solid #ffff00; }<br/>.ribbon-gallery img:hover { border:5px solid #52e052; }<br />.ribbon-gallery p { display: inline; }<br />.ribbon-gallery p span { position: absolute; display: inline-block; right: -40px; top: 20px; text-align: center; text-transform: uppercase; background: #CC0000; border: 2px solid #ffff00; outline: 5px solid #CC0000; width: 150px; padding: 5px 10px; transform: rotate(45deg); }<br />.ribbon-gallery p:before { content: ""; width: 0; height: 0; position: absolute; top: -7px; right: 108px; z-index: 1; border: 7px solid; border-color: transparent transparent #CC0000 transparent; }<br />.ribbon-gallery p:after { content: ""; width: 0; height: 0; position: absolute; top: 108px; z-index: 1; right: -7px; border: 7px solid; border-color: transparent transparent transparent #CC0000; }</pre>4. Selanjutnya copy kode HTML berikut ini lalu taruh ke dalam entri posting mode HTML (bukan Compose).<pre><div class="ribbon-gallery"><br /><a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRho-Y3oXQFvmg3PHzceG4DlhNbUnwx6yCUoYayGtwSktQnpVuqi6ruymIIglVG1rXw-PUedAmo0MHwECr2xfDzdm-eyPhFq7_IkhMKIEmqc7oE8HtwwLF7PhGfpjcVzKYH4BchD843BE/h400/Milan.jpg" alt="" /></a><br /><p><span>jersey 1</span></p><br /></div><br /><br /><div class="ribbon-gallery"><br /><a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0O1qUybNCrGxOr_ticR9zkdVCo350o4VCchMAaMvDCKYitBiu6brfLWOUNh8GShjHxyF7h3qlO5mSfFsG6fgdcZVm8szEonmoR8cohDf78lYn1eo10WITx3OftCYUx55xcztMX4FSBc/h400/Chelsea.jpg" alt="" /></a><br /><p><span>jersey 2</span></p><br /></div><br /><br /><div class="ribbon-gallery"><br /><a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZ3R2uT9Rx18ypwMNlsH4xDFY1V_XYNCaKqn64HUPhQNxZl_lmnBjQ3azdZHdsbHvgkGG0x8yvTl1ZCOPra81NtdcWUB0qh7MDyVAjnFcYYOEsyBAnIb6U3CuZ8mDJBA-ZO8IiJcxHeI/h300/Barcelona.jpg" alt="" /></a><br /><p><span>jersey 3</span></p><br /></div><br /><br /><span style="color: red;"><div class="ribbon-gallery"><br /><a href='http://mas-andes.blogspot.com'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJHlpwRhHga1ydxMsuCJGG9zI9wsjzxrcVJafyO8hOEZ7xrhUSNUS_JgmqC46tfjDqVgnQ8CnCCC68Y5k2Z1mrIN0hjtE_p8R3M_53_ngCP4jyY5qeTxpfsK4rUeJuArnv8AsCxX_jFA/h400/Mas-Andes.JPG" alt="" /></a><br /><p><span>Ganteng</span></p><br /></div></span></pre>Diatas hanya terdapat empat gambar saja, jika ingin menambahkan gambar lebih banyak lagi maka copy kode yang berwarna <span style="color: red;">merah </span>lalu paste dibawahnya sebanyak yang anda inginkan.<br /><br />Setelah anda <b>Membuat Ribbon Gallery Image di Blog With CSS</b> maka hasilnya akan seperti dibawah ini.<br /><br /> <style type="text/css" scoped>.ribbon-gallery { position: relative; color: #fff; display: inline-block; padding: 7px; overflow: hidden; font: bold 16px Arial; text-shadow:0 0 3px #f2f2f2 inset; width:260px; } .ribbon-gallery img { width:250px; height:300px; border:5px solid #ffff00; } .ribbon-gallery img:hover { border:5px solid #52e052; } .ribbon-gallery p { display: inline; } .ribbon-gallery p span { position: absolute; display: inline-block; right: -40px; top: 20px; text-align: center; text-transform: uppercase; background: #CC0000; border: 2px solid #ffff00; outline: 5px solid #CC0000; width: 150px; padding: 5px 10px; transform: rotate(45deg); } .ribbon-gallery p:before { content: ""; width: 0; height: 0; position: absolute; top: -7px; right: 108px; z-index: 1; border: 7px solid; border-color: transparent transparent #CC0000 transparent; } .ribbon-gallery p:after { content: ""; width: 0; height: 0; position: absolute; top: 108px; z-index: 1; right: -7px; border: 7px solid; border-color: transparent transparent transparent #CC0000; } </style> <div class="ribbon-gallery"><a href='http://mas-andes.blogspot.com'><img alt="CSS ribbon gallery image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRho-Y3oXQFvmg3PHzceG4DlhNbUnwx6yCUoYayGtwSktQnpVuqi6ruymIIglVG1rXw-PUedAmo0MHwECr2xfDzdm-eyPhFq7_IkhMKIEmqc7oE8HtwwLF7PhGfpjcVzKYH4BchD843BE/h400/Milan.jpg" title="jersey ac milan"/></a><p><span>jersey 1</span></p></div> <div class="ribbon-gallery"><a href='http://mas-andes.blogspot.com'><img alt="CSS ribbon gallery image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0O1qUybNCrGxOr_ticR9zkdVCo350o4VCchMAaMvDCKYitBiu6brfLWOUNh8GShjHxyF7h3qlO5mSfFsG6fgdcZVm8szEonmoR8cohDf78lYn1eo10WITx3OftCYUx55xcztMX4FSBc/h400/Chelsea.jpg" title="jersey chelsea"/></a><p><span>jersey 2</span></p></div> <div class="ribbon-gallery"><a href='http://mas-andes.blogspot.com'><img alt="CSS ribbon gallery image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZ3R2uT9Rx18ypwMNlsH4xDFY1V_XYNCaKqn64HUPhQNxZl_lmnBjQ3azdZHdsbHvgkGG0x8yvTl1ZCOPra81NtdcWUB0qh7MDyVAjnFcYYOEsyBAnIb6U3CuZ8mDJBA-ZO8IiJcxHeI/h300/Barcelona.jpg" title="jersey barcelona"/></a><p><span>jersey 3</span></p></div> <div class="ribbon-gallery"><a href='http://mas-andes.blogspot.com'><img alt="CSS ribbon gallery image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJHlpwRhHga1ydxMsuCJGG9zI9wsjzxrcVJafyO8hOEZ7xrhUSNUS_JgmqC46tfjDqVgnQ8CnCCC68Y5k2Z1mrIN0hjtE_p8R3M_53_ngCP4jyY5qeTxpfsK4rUeJuArnv8AsCxX_jFA/h400/Mas-Andes.JPG" title="mas andes"/></a><p><span>Ganteng</span></p></div> <br />Dari tutorial di atas jika anda tidak ingin memasukan kode CSS ke dalam template blog maka gabungkan saja seluruh kode CSS dan HTML. Caranya seperti biasa, jangan lupa tambahkan <code><style type="text/css" scoped></code> pada awal kode CSS dan tambahkan <code></style></code> pada akhir CSS. Selanjutnya taruh kode HTML dibawahnya, lalu masukan kode tersebut kedalam postingan mode HTML.

Membuat Ribbon Gallery Image di Blog With CSS – setelah beberapa waktu lalu sudah mengulas mengenai …

Read More

Cara Membuat Navigasi Menu Full Color di Blog

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqApFKlTyPbMI6r7bWlZLaTK9YbF0GXKqLiVwKcKTzzIgNEvwhvxiFkHYQS3loyWNam99jdzHg_D7tR9nBrhrEtH6RgdVhgVmg-jOnwuk1GVf0FW2UWtP38bGWQ3Y2r2N6rA1qTjXe5E/s1600/navigasi-menu-metro-ui.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Navigasi Menu Metro UI Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipqApFKlTyPbMI6r7bWlZLaTK9YbF0GXKqLiVwKcKTzzIgNEvwhvxiFkHYQS3loyWNam99jdzHg_D7tR9nBrhrEtH6RgdVhgVmg-jOnwuk1GVf0FW2UWtP38bGWQ3Y2r2N6rA1qTjXe5E/s540/navigasi-menu-metro-ui.jpg" title="Cara Membuat Navigasi Menu Full Color di Blog" width="540" /></a><b>Cara Membuat Navigasi Menu Full Color di Blog</b> – setelah beberapa waktu lalu membaca <a href="http://mas-andes.blogspot.com/2013/10/cara-membuat-animasi-menu-drop-down-di.html?showComment=1380732827068#c8943544039383663099" target="_blank">komentar dari Bang Ancis</a> maka timbul dalam pikiran untuk membagikan menu navigasi ini kepada siapapun yang ingin mencobanya dan mohon maaf Bang Ancis baru sekarang saya baru bisa share tutorial ini. Sebetulnya pada hari itu juga sudah langsung jadi namun apa daya seperti yang sudah saya katakan pada komentar sebelumnya. Untuk membagikan tutorial ini saya nunggu postingan yang sudah saya jadwalkan sebelumnya, harap di maklumi. Oke sekarang kembali ke inti tutorial, bagaimana cara untuk membuat navigasi menu full color di blog? Untuk <a href="http://mas-andes.blogspot.com/2013/09/cara-membuat-menu-navigasi-horisontal.html" target="_blank" title="cara membuat menu navigasi horisontal">membuat navigasi menu</a> supaya menjadi full color atau warna-warni sebenarnya tidak susah. Membuat navigasi menu dengan warna yang berbeda-beda di setiap link menu sama saja khalayak membuat navigasi menu pada umumnya, hanya saja untuk membuat navigasi menu menjadi full color kita perlu menambahkan class yang berisi background untuk setiap warnanya pada link menu satu per satu. Namun biarpun begitu saya rasa hasilnya juga tidak cukup mengecewakan karena navigasi menu ini juga lumayan serasi di terapkan ke template blog, apalagi jika menggunakan template Metro UI. Untuk lebih jelasnya, berikut tutorial untuk <b>Cara Membuat Navigasi Menu Full Color di Blog</b>.<br /><br />1. Login ke akun blogger.<br />2. Langsung menuju Template klik Edit HTML.<br />3. Copy kode CSS berikut ini, lalu taruh di atas kode <code>]]></b:skin></code> kemudian Simpan template. <pre>.navmenu { background: #111; border-bottom: 5px solid #0091d6; position: relative; height:35px; margin: 0 auto; text-transform: uppercase; z-index: 1; }<br />ul.navfullcolor { list-style: none; padding: 0; font: 14px Arial; font-weight: bold; width:auto; line-height: 15px; margin: auto; }<br />ul.navfullcolor li { float: left; position: relative; margin: 0px 1px 0px 0px; }<br />ul.navfullcolor li a, ul.navfullcolor li a:link { color: #fff; text-decoration: none; display: block; padding: 10px 26px; transition: all 0.2s ease; }<br />ul.navfullcolor li a:hover { color: #fff; transition: all 1s ease; }<br />ul.navfullcolor li ul { display: none; top: 35px; border-top: 5px solid #FF8000; }<br />ul.navfullcolor li:hover ul { position: absolute; display: block; padding: 0; list-style: none; }<br />ul.navfullcolor li ul li { float: none; background: #282321; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230; width:210px; }<br />ul.navfullcolor li ul li a, ul.navfullcolor li ul li a:link { color: #aaa; display: block; }<br />ul.navfullcolor li ul li a:hover { background: #FF8000; }<br />.green{background-color:#01A451 !important;} .green:hover{background-color:#52e052 !important;}<br />.yellow{background-color:#FBC700 !important;} .yellow:hover{background-color:#FFE500 !important;}<br />.red{background-color:#D52100 !important;} .red:hover{background-color:#ff0000 !important;}<br />.purple{background-color:#660099 !important;} .purple:hover{background-color:#D580FE !important;}<br />.blue{background-color:#0091d6 !important;} .blue:hover{background-color:#80C8FE !important;}</pre>4. Selanjutnya taruh HTML ke dalam template, letaknya bisa menyesuaikan template lama atau agar lebih mudah masuk Tata Letak > Tambah Widget > HTML/Javascript.<br />5. Copy kode berikut ini, lalu paste ke dalam widget HTML/Javascript kemudian klik Simpan.<pre><div class='navmenu'><br /><ul class='navfullcolor'><br />    <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li><br />    <li><a href='http://mas-andes.blogspot.com' class='red'>Menu 1</a><br />        <ul><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li><br />        </ul><br />    </li><br />    <li><a href='http://mas-andes.blogspot.com' class='yellow'>Menu 2</a><br />        <ul><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li><br />        </ul><br />    </li><br />    <li><a href='http://mas-andes.blogspot.com' class='green'>Menu 3</a><br />        <ul><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li><br />        </ul><br />    </li><br />    <li><a href='http://mas-andes.blogspot.com' class='purple'>Menu 4</a><br />        <ul><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li><br />        <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li><br />        </ul><br />    </li><br />    <li><a href='http://mas-andes.blogspot.com' class='red'>Menu 5</a></li><br />    <li><a href='http://mas-andes.blogspot.com' class='yellow'>Menu 6</a></li><br />    <li><a href='http://mas-andes.blogspot.com' class='green'>Menu 7</a></li><br /></ul><br /></div></pre>Keterangan:<br />Ganti <b>http://mas-andes.blogspot.com</b> dengan label link blog anda.<br /><br />6. Setelah tersimpan silahkan lihat hasilnya.<br /><br /> <style>.metromenu { background: #111; border-bottom: 5px solid #0091d6; position: relative; height:35px; margin: 0 auto; text-transform: uppercase; z-index: 1; } ul.navfullcolor { list-style: none; padding: 0; font: 14px Arial; font-weight: bold; width:auto; line-height: 15px; margin: auto; } ul.navfullcolor li { float: left; position: relative; margin: 0px 1px 0px 0px; } ul.navfullcolor li a, ul.navfullcolor li a:link { color: #fff; text-decoration: none; display: block; padding: 10px 26px; transition: all 0.2s ease; } ul.navfullcolor li a:hover { color: #fff; transition: all 1s ease; } ul.navfullcolor li ul { display: none; top: 35px; border-top: 5px solid #FF8000; } ul.navfullcolor li:hover ul { position: absolute; display: block; padding: 0; list-style: none; } ul.navfullcolor li ul li { float: none; background: #282321; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230; width:210px; } ul.navfullcolor li ul li a, ul.navfullcolor li ul li a:link { color: #aaa; display: block; } ul.navfullcolor li ul li a:hover { background: #FF8000; } .green{background-color:#01A451 !important;} .green:hover{background-color:#52e052 !important;} .yellow{background-color:#FBC700 !important;} .yellow:hover{background-color:#FFE500 !important;} .red{background-color:#D52100 !important;} .red:hover{background-color:#ff0000 !important;} .purple{background-color:#660099 !important;} .purple:hover{background-color:#D580FE !important;} .blue{background-color:#0091d6 !important;} .blue:hover{background-color:#80C8FE !important;} </style> <div class='metromenu'><ul class='navfullcolor'> <li><a href='http://mas-andes.blogspot.com' class='blue' title=''>Home</a></li> <li><a href='#' title='' class='red'>Menu 1</a> <ul> <li><a href='#' title=''>Sub Menu 1</a></li> <li><a href='#' title=''>Sub Menu 2</a></li> <li><a href='#' title=''>Sub Menu 3</a></li> <li><a href='#' title=''>Sub Menu 4</a></li> <li><a href='#' title=''>Sub Menu 5</a></li> </ul> </li> <li><a href='#' title='' class='yellow'>Menu 2</a> <ul> <li><a href='#' title=''>Sub Menu 1</a></li> <li><a href='#' title=''>Sub Menu 2</a></li> <li><a href='#' title=''>Sub Menu 3</a></li> <li><a href='#' title=''>Sub Menu 4</a></li> </ul> </li> <li><a href='#' title='' class='green'>Menu 3</a> <ul> <li><a href='#' title=''>Sub Menu 1</a></li> <li><a href='#' title=''>Sub Menu 2</a></li> <li><a href='#' title=''>Sub Menu 3</a></li> </ul> </li> <li><a href='#' title='' class='purple'>Menu 4</a> <ul> <li><a href='#' title=''>Sub Menu 1</a></li> <li><a href='#' title=''>Sub Menu 2</a></li> </ul> </li></ul></div> <br />Apabila bagi yang masih kesulitan dalam melakukan Edit HTML template, bisa langsung memasukan seluruh kode diatas ke dalam widget HTML/Javascript agar lebih mudah. Caranya seperti di bawah ini: <pre><style type="text/css" scoped><br /><br /><b><span style="color:red;">Taruh CSS yang terdapat pada point 3 disini</span></b><br /><br /></style><br /><br /><b><span style="color:red;">Taruh HTML yang terdapat pada point 5 disini</span></b></pre>Kemudian Simpan.<br /><br />Demikian tutorial untuk <b>Cara Membuat Navigasi Menu Full Color di Blog</b>, lakukan yang mana yang lebih mudah. Akhir kata hanya bisa saya sampaikan untuk sedikit motivasi “Not an error when you try and then fail. The only mistake is when you do not dare try for fear of failure”. Sekian dan keep blogging!

Cara Membuat Navigasi Menu Full Color di Blog – setelah beberapa waktu lalu membaca komentar dari Ba…

Read More