GENTAYANGAN TRIKS

Cara Membuat Popup Email Subscribe / Berlangganan Artikel Pada Blogger

Posted by Johan wahyudi Posted on 5:55 AM with No comments
Email subscription adalah sebuah sarana untuk mendapatkan pembaca tetap blog dan Salah satu tempat yang paling strategis dalam pemasangan form email subscription ini adalah pada layar awal (popup) karena sangat mudah untuk dilihat pengunjung. Popup seperti ini dirancang khusus untuk tidak muncul kedua kalinya jika blog dikunjungi kembali sehingga tidak akan mengganggu kenyamanan pengunjung.
Cara Membuat Popup Email Subscribe / Berlangganan Artikel Terbaru Pada Blog

CSS, HTML, JavaScript dan Cara Pemasangannya

  • Login ke Blogger
  • Pilih Tata Letak » Add Gadget » HTML/Java Script
  • Copy paste kode di bawah ini dan pastekan tepat di dalam box HTML/Javascript
 
keterangan:
cari kode 'http://feedburner.google.com/fb/a/mailverify?uri=gentayangantriks' dan
ganti gentayangantriks dengan id feedburner anda.


  • Klik simpan dan lihat hasilnya..
Demikianlah tutorial tentang Bagaimana Cara Membuat Popup Email Subscribe / Berlangganan Artikel Terbaru Pada Blog kali ini, semoga ada manfaatnya. Terima kasih dan happy nice blogging...!!!


sumber: http://lostsector.blogspot.com
category ,
Read more »
category ,

Cara Memasang Widget Sosial Media Di Blog

Posted by Johan wahyudi Posted on 3:37 AM with 1 comment
Cara memasang widget Facebook, Twitter, Google Plus, dan RSS Feedburner ini di Sidebar blog.


Widget Share Sosial Media Keren untuk Blogspot



Cara Pasang di Sidebar:
1. Klik "Layout" > Klik "Add a Gadget".
2. Pilih "HTML/JavaScript"
3. Copy + Paste kode berikut ini di bagian "Content"
<style> .touchme a { display:block; height:50px; width:50px; padding:0 4px; float:left; background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } </style> <p style="display:none;">Social Media Sharing by <a href="http://contohblognih.blogspot.com">CB Bloggerz</a></p> <div class='touchme'>
<!--RSS--> <a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus--> <a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='nofollow' target='_blank'></a>
<!--Facebook--> <a class='facebook' href="YOUR FACEBOOK LINK" rel='nofollow' target='_blank'></a>
<!-- Twitter --> <a class='twitter' href="YOUR TWITTER LINK" rel='nofollow' target='_blank' ></a> </div>

Jangan lupa, ganti/ubah tulisan berwarna merah!

Cara Pasang di Bawah Posting Blog:
1. Klik "Template" > "Edit HTML".
2. Cari (Ctrl+F) kode <data:post.body/>
3. Copy + Paste kode berikut ini di bawah <data:post.body/> tadi.
&lt;b:if cond=&#039;data:blog.pageType == &quot;item&quot;&#039;&gt;
&lt;style&gt; .touchme a { display:block; height:50px; width:50px; padding:0 4px; float:left; background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } &lt;/style&gt; &lt;p style=&quot;display:none;&quot;&gt;Social Media Sharing by &lt;a href=&quot;http://contohblognih.blogspot.com&quot;&gt;CB Bloggerz&lt;/a&gt;&lt;/p&gt; &lt;div class=&#039;touchme&#039;&gt;
&lt;!--RSS--&gt; &lt;a class=&#039;rss&#039; href=&quot;YOUR RSS LINK&quot; rel=&#039;external nofollow&#039; target=&#039;_blank&#039;&gt;&lt;/a&gt;
&lt;!--Google Plus--&gt; &lt;a class=&#039;googleplus&#039; href=&quot;YOUR GOOGLE PROFILE LINK&quot; rel=&#039;nofollow&#039; target=&#039;_blank&#039;&gt;&lt;/a&gt;
&lt;!--Facebook--&gt; &lt;a class=&#039;facebook&#039; href=&quot;YOUR FACEBOOK LINK&quot; rel=&#039;nofollow&#039; target=&#039;_blank&#039;&gt;&lt;/a&gt;
&lt;!-- Twitter --&gt; &lt;a class=&#039;twitter&#039; href=&quot;YOUR TWITTER LINK&quot; rel=&#039;nofollow&#039; target=&#039;_blank&#039; &gt;&lt;/a&gt; &lt;/div&gt;
&lt;/b:if&gt;

Jangan lupa, ganti/ubah tulisan berwarna merah!
category ,
Read more »
category ,

Cara Membuat Search Form dengan Ajax Jquery di Blog

Posted by Johan wahyudi Posted on 4:04 AM with No comments
Ok sobat pada kesempatan ini saya akan membagikan widget blog yaitu search form atau kotak pencarian blog. Cara Membuat Search Form dengan Ajax Jquery ini mudah saja asalakan sobat mengikuti tutorialnya dengan baik.

Search Box berfungsi untuk memudahkan pengunjung blog dalam melakukan pencarian terhadap sebuah data, artikel, tulisan, nama, dan apa saja yang terkait dengan isi dari sebuah blog. Misalkan pengunjung anda ingin mencari tentang template di blog ini, maka sahabat tinggal ketik di kotak tersebut dan langsung klik atau enter.

Sebuah pencarian cepat untuk blogspot ini akan mempercepat pencarian tanpa harus loading lagi menuju halaman search result, karena hasil penelusuran akan langsung tampil dibawah widget searchnya. Contoh search form dengan Ajax Jquery adalah seperti di template yang saya gunakan saat ini.

Cara Membuat Search Form dengan Ajax Jquery di Blog


Cara Membuat:

1. Masuk Editor Template, cari kode  ]]></b:skin> atau </style> copy kode dibawah ini dan letakkan diatasnya.
* { box-sizing:border-box; }
#search-result * { margin:0 0 0 0; padding:0 0 0 0; }
li { display:list-item; }
#form-search { position:absolute; width:200px; left:200px; top:4px; }
#ajax-search-form { position:relative; font:normal normal 13px Arial,Sans-Serif; }
#ajax-search-form input { border:1px solid #e3e3e3; background-color:white; font:normal normal 12px/100% Arial,Sans-Serif; color:black; margin:0 0; height:22px; line-height:22px; padding:0 5px; width:140px; }
#ajax-search-form input[type="submit"] { width:auto; background-color:#49afcd; border:none; color:white; font-weight:bold; cursor:pointer; font-size:12px; }
#search-result { background-color:#49afcd; padding:5px 2px; margin:2px 0; width:300px; overflow:auto; max-height:710px; position:absolute; right:6px; top:28px; z-index:99; color:white; border-radius:0 0 3px 3px; box-shadow:0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3); display:none; }
#search-result .close { display:block; position:absolute; top:2px; font-size:20px; right:10px; line-height:normal; color:white; }
#search-result ul { margin:0; overflow:hidden; max-height:405px; border-bottom:1px solid #45A5C2; border-top:1px solid #45A5C2; list-style:none; }
#search-result li { height:68px; overflow:hidden; padding:0 5px; border-top:1px solid #45A5C2; border-bottom:1px solid #45A5C2; position:relative; }
#ajax-search-form a { color:#741F27; text-decoration:none; }
#search-result h4 { display:block; margin:0 0 10px 5px; color:white; }
#search-result p { font-size:10px; color:white; }
#search-result span { width:50px; height:50px; display:block; float:left; padding:2px; margin-right:5px; margin-top:5px; background-color:whitesmoke; }
#search-result img { width:100%; height:100%; display:block; }
#search-result h5 { color:#1E598E; overflow:hidden; font-size:100%; margin-top:2px; height:16px; }
#search-result h5:hover { color:#333; text-decoration:underline; }
}
#search-result mark { color:white; background:#085C0B; padding:0 3px; }
#search-result ul:hover { overflow:auto; }
2. Cari kode </body> kemudian salin kode dibawah ini dan letakkan diatasnya.
<script type='text/javascript'>
//<![CDATA[
jQuery.easing.jswing = jQuery.easing.swing;
jQuery.extend(jQuery.easing, {
    def: "easeOutQuad",
    swing: function (x, t, b, c, d) {
        return jQuery.easing[jQuery.easing.def](x, t, b, c, d)
    },
    easeInQuad: function (x, t, b, c, d) {
        return c * (t /= d) * t + b
    },
    easeOutQuad: function (x, t, b, c, d) {
        return -c * (t /= d) * (t - 2) + b
    },
    easeInOutQuad: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t + b
        }
        return -c / 2 * ((--t) * (t - 2) - 1) + b
    },
    easeInCubic: function (x, t, b, c, d) {
        return c * (t /= d) * t * t + b
    },
    easeOutCubic: function (x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t + 1) + b
    },
    easeInOutCubic: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t + b
        }
        return c / 2 * ((t -= 2) * t * t + 2) + b
    },
    easeInQuart: function (x, t, b, c, d) {
        return c * (t /= d) * t * t * t + b
    },
    easeOutQuart: function (x, t, b, c, d) {
        return -c * ((t = t / d - 1) * t * t * t - 1) + b
    },
    easeInOutQuart: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t * t + b
        }
        return -c / 2 * ((t -= 2) * t * t * t - 2) + b
    },
    easeInQuint: function (x, t, b, c, d) {
        return c * (t /= d) * t * t * t * t + b
    },
    easeOutQuint: function (x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t * t * t + 1) + b
    },
    easeInOutQuint: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t * t * t + b
        }
        return c / 2 * ((t -= 2) * t * t * t * t + 2) + b
    },
    easeInSine: function (x, t, b, c, d) {
        return -c * Math.cos(t / d * (Math.PI / 2)) + c + b
    },
    easeOutSine: function (x, t, b, c, d) {
        return c * Math.sin(t / d * (Math.PI / 2)) + b
    },
    easeInOutSine: function (x, t, b, c, d) {
        return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b
    },
    easeInExpo: function (x, t, b, c, d) {
        return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b
    },
    easeOutExpo: function (x, t, b, c, d) {
        return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b
    },
    easeInOutExpo: function (x, t, b, c, d) {
        if (t == 0) {
            return b
        }
        if (t == d) {
            return b + c
        }
        if ((t /= d / 2) < 1) {
            return c / 2 * Math.pow(2, 10 * (t - 1)) + b
        }
        return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b
    },
    easeInCirc: function (x, t, b, c, d) {
        return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b
    },
    easeOutCirc: function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
    },
    easeInOutCirc: function (x, t, b, c, d) {
        if ((t /= d / 2) < 1) {
            return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b
        }
        return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b
    },
    easeInElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d) == 1) {
            return b + c
        }
        if (!p) {
            p = d * 0.3
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
    },
    easeOutElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d) == 1) {
            return b + c
        }
        if (!p) {
            p = d * 0.3
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b
    },
    easeInOutElastic: function (x, t, b, c, d) {
        var s = 1.70158;
        var p = 0;
        var a = c;
        if (t == 0) {
            return b
        }
        if ((t /= d / 2) == 2) {
            return b + c
        }
        if (!p) {
            p = d * (0.3 * 1.5)
        }
        if (a < Math.abs(c)) {
            a = c;
            var s = p / 4
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a)
        }
        if (t < 1) {
            return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b
        }
        return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b
    },
    easeInBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        return c * (t /= d) * t * ((s + 1) * t - s) + b
    },
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b
    },
    easeInOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) {
            s = 1.70158
        }
        if ((t /= d / 2) < 1) {
            return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b
        }
        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b
    },
    easeInBounce: function (x, t, b, c, d) {
        return c - jQuery.easing.easeOutBounce(x, d - t, 0, c, d) + b
    },
    easeOutBounce: function (x, t, b, c, d) {
        if ((t /= d) < (1 / 2.75)) {
            return c * (7.5625 * t * t) + b
        } else {
            if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b
            } else {
                if (t < (2.5 / 2.75)) {
                    return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b
                } else {
                    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b
                }
            }
        }
    },
    easeInOutBounce: function (x, t, b, c, d) {
        if (t < d / 2) {
            return jQuery.easing.easeInBounce(x, t * 2, 0, c, d) * 0.5 + b
        }
        return jQuery.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b
    }
});
/* Search*/
var searchFormConfig = {
    summaryPost: true,
    resultThumbnail: true,
    fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6WHafhnVt3GkGurqPwox8bgk0oeiu0C4WjCx1_LkeIWCaIxLzdMCdVK1XIRxOw_wMxlyRFwaNHBoK61KiMW0-jR0n9YQqBtPQdS-xvZ33cObwP5nowjwc0rjT7vDiXw28sxBu1dBqto/s50-c/Noim.png",
    thumbSize: 50,
    summaryLength: 100
};
(function (c) {
    var a = c("#ajax-search-form"),
        d = a.find(":text");
    config = searchFormConfig;
    a.append('<div id="search-result"></div>');
    var b = c("#search-result");
    a.on("submit", function () {
        var e = d.val();
        b.slideDown(500, "easeOutBounce").html("Loading...");
        c.ajax({
            url: "http://namabloganda.blogspot.com/feeds/posts/summary?alt=json-in-script&q=" + e + "&max-results=9999",
            type: "get",
            dataType: "jsonp",
            success: function (q) {
                var p = q.feed.entry,
                    m, l, o, n, g = "";
                if (p !== undefined) {
                    g = "<h4>Search results for keyword &quot;" + e + "&quot;</h4>";
                    g += '<a class="close" href="/">&times;</a><ul>';
                    for (var k = 0; k < p.length; k++) {
                        var f = new RegExp(e, "ig"),
                            o = p[k].title.$t.replace(f, "<mark>" + e + "</mark>");
                        for (var h = 0; h < p[k].link.length; h++) {
                            if (p[k].link[h].rel == "alternate") {
                                n = p[k].link[h].href
                            }
                        }
                        if (config.summaryPost === true) {
                            if ("content" in p[k]) {
                                m = p[k].content.$t
                            } else {
                                if ("summary" in p[k]) {
                                    m = p[k].summary.$t
                                } else {
                                    m = ""
                                }
                            }
                        }
                        if (config.resultThumbnail === true) {
                            if ("media$thumbnail" in p[k]) {
                                l = p[k].media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "/s" + config.thumbSize + "-c")
                            } else {
                                l = config.fallbackThumb
                            }
                        }
                        m = m.replace(/<\S[^>]*>/g, "");
                        if (m.length > config.summaryLength) {
                            m = m.substring(0, config.summaryLength) + "..."
                        }
                        m = m.replace(f, "<mark>" + e + "</mark>");
                        g += '<li><a href="' + n + '" target="_blank"><span><img src="' + l + '" alt="" /></span><h5>' + o + "</h5></a><p>" + m + "</p></li>"
                    }
                    g += "</ul>";
                    b.html(g)
                } else {
                    b.html('<a class="close" href="/">&times;</a><strong>No result!</strong>')
                }
            },
            error: function () {
                b.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>')
            }
        });
        return false
    });
    a.on("click", ".close", function () {
        b.slideUp(500, "easeInExpo");
        return false
    })
})(jQuery);
//]]>
</script>
3. Silahkan salin kode dibawah ini dan letakkan dimana anda ingin meletakkan Kotak Pencariannya, biasanya didalam menu navigasi bagian samping
<div id="form-search">
    <form action="/search" id="ajax-search-form">
        <input name="q" type="text" />
        <input type="submit" value="Search" />
    </form>
</div>
4. Silahkan ganti kode berwarna merah diatas dengan Alamat Blog anda.
5. Simpan Template.
Kotak pencarian atau Search Box juga berfungsi untuk mempercantik tampilan blog anda. Kita sering memperhatikan dan melihat blog-blog yang kita kunjungi, biasanya pemilik web atau blog tersebut pasti menyediakan fungsi ini. Sehingga disamping fungsinya untuk pencarian atas sebuah data atau kata, dia juga berfungsi untuk keindahan blog kita.
 
sumber : http://seocips.com
category ,
Read more »
category ,

Cara Menghapus Blog Pada Tampilan Baru

Posted by yudhie Posted on 12:03 AM with No comments
Akhirnya setelah sekian lama gak pernah berkunjung ke blogger, ternyata tampilannya udah berubah. Saat ini dasboar blogger memiliki tampilan baru, bagi teman-teman yang mungkin sudah familiar dengan tampilan dasboard blogger yang baru namun kebingungan mencari bagaimana cara menghapus blog mungkin panduan cara menghapus blog berikut ini bisa membantu.

klik pilihan sebelah gambar kertas > pilih "setting" (paling bahwa)
Pada menu "Setting" Klik "Other" > kemudian Klik "Delete Blog" pada samping kanan Atas dan selamat blog anda akan terhapus
category
Read more »
category

Membuat Judul Blog Pada Tab Bergerak

Posted by yudhie Posted on 7:13 AM with 4 comments

Kali ini saya akan berbagi bagaimana membuat judul blog bergerak. Membuat judul blog tentu saja menambah blog kita bukan saja menarik, tapi terlihat lebih unik plus kereeen.... he ..he.. emang apaan? Biasanya judul blog dalam keadaan diam, nah kita coba sedikit merubah jadi bergerak dan lebih kelihatan aktif. Tapi membuat judul blog bergerak, tidak ada hubungannya dengan bergeraknya penghasilan, kecuali blog kita menjual sesuatu dan orang lain membeli produk yang kita jual. Ya....ini kemana arahnya....membuat judul blog bergerak kok dihubungkan dengan penjualan. Udah dech... kita langsung ke TKP...sudah siap?

Yang harus dilakukan adalah :
  1. Login ke Blog anda, lalu klik Layout/Tata Letak.
  2. Setelah itu klik Edit HTML lalu beri tanda centang di Expand Widget Templates.
  3. Jika anda sudah masuk Edit HTML cari kode </head> (jika mau lebih mudah mencarinya klik F3 pada keyboard dan tuliskan kata yang ingin dicari)
  4. Jika kodenya telah di temukan copy kode di bawah ini dan letakan dibawah kode </head>
<script language='JavaScript'>var txt=&quot; TULIS TEKS ANDA DI SINI &quot;; var kecepatan=120;var segarkan=null;function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak(); </script>


Ternyata caranya cukup mudah, siapapun bisa langsung melakukan aksi bagaimana membuat judul blog pada tab bergerak. Mudah bagi yang mau mencoba, dan terasa sulit bagi yang tidak berani mencoba. Semoga berhasil, kalau belum berhasil berarti resepnya berkurang.

Selamat mencoba...!
category
Read more »
category

Membuat Efek Shadow pada Gambar

Posted by yudhie Posted on 7:08 AM with 1 comment
Memberi effect shadow pada tampilan gambar yang kita posting, tentu saja memiliki pengaruh pada tampilan blog kita. Tampilan shadow pada gambar disamping dapat memberikan kesan elegan juga memberikan dampak pada orang yang berkunjung di blog kita. Apalagi gambar yang di tampilkan sangat unik, bisa jadi akan meningkatkan daya tarik mata ketika memandang. Langsung ke TKP

Perhatikan gambar disamping yang berwarna merah dan terdapat efek bayangan pada gambar tersebut, ternyata pada gambar yang akan dimasukan ke dalam posting artikel blog bisa diberi efek bayangan juga, kalian bisa melihat contohnya di blog saya ini yang semua gambar pada posting dihiasi dengan efek bayangan. Untuk membuat sebuah efek bayangan pada gambar posting tidaklah sulit, cukup menambahkan sedikit kode CSS. tapi efek bayangan ini hanya akan berpengaruh di area posting blog atau di artikel blog saja. untuk banner dan lain-lain saya rasa itu tidak bisa, kecuali kalian mengeditnya dengan software edit foto. Jika kalian tertarik langsung saja lakukan langkah-langkah dibawah ini :

- Login ke akun Blogger kalian, lalu pilih Tata Letak dan klik Edit HTML
- Cari kode ]]></b:skin> lalu paste kode CSS dibawah ini tepat di atasnya:

drop-shadow img { background:url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom; padding: 5px 10px 10px 5px; }
- Cari kode <data:post.body/> lalu ganti dengan kode dibawah ini:
<div class='drop-shadow'><data:post.body/></div>

Setelah semua langkah diatas dilakukan dengan benar, sekarang tinggal di SAVE dan lihat hasilnya pada gambar yang kalian masukan ke dalam postingan artikel blog kalian.
Keterangan:
Pada efek shadow yang saya berikan diatas adalah efek shadow yang berwarna abu-abu, kalian juga bisa menggantinya dengan warna pink,merah atau biru sesuai keinginan tapi dengan syarat kalian harus membuat gambar seperti "http://i30.tinypic.com/1qsh1h.jpg" dan merubah shadow pada gambar tersebut menjadi warna yang kalian inginkan. Setelah itu upload gambar hasil editan kalian tadi kemudian ambil URL nya dan ganti alamat http://i30.tinypic.com/1qsh1h.jpg pada kode CSS diatas dengan URL gambar yang telah kalian edit.
selamat mencoba dan semoga bermanfaat. jika ada pertanyaan silahkan pada kolom komentar dan insyallah akan saya jawab. terima kasih.


sumber: http://www.aziz-rhamadhan.co.cc/
category
Read more »
category

Older Newer Post Link Hilang di Firefox

Posted by yudhie Posted on 10:58 AM with 1 comment
Tadi pagi blog saya baik-baik saja, namun menjelang siang ada keanehan yakni hilangnya link older post dan newer post. Semula saya sempat mengira link itu memang hilang dan berniat menambahakannya lagi ke template, namun ternyata di browser lain link tersebut tetap tampil. Nah apa yang terjadi dengan firefox? Ternyata link tersebut seakan ngumpet dan bergeser jauh dari seharusnya. Ini yang tidak saya mengerti, mencari info ke firefox tidak ada pemberitahuan. Hal sama terjadi ketika banyak template yang elemennya kacau di Firefox hari ini. Dan kembali algi yang paling banyak mengalami termasuk saya adalah hilangnya older post dan newer post link.



Untuk mengatasinya Anda cukup mengubah bagian css blog-pager Anda.
- Silahkan login blogger, Tata Letak lalu pilih Edit HTML
- Cari kode css berikut ini
#blog-pager-newer-link{.............................}
#blog-pager-older-link{.............................}
#blog-pager{..............................}

titik-titik adalah kode css yang tentu bisa berbeda setiap template.
Cari kode tersebut dan untuk lebih mudahnya ganti saja dengan css berikut ini:
#blog-pager-newer-link{float:left; line-height:1.8em; font-weight:bold}
#blog-pager-older-link{float:right; line-height:1.8em; font-weight:bold}
#blog-pager{width:565px; float:left; text-align:center; line-height:1.8em; font-weight:bold; color:white}

Sesuaikan yang berwarna merah dengan lebar pada css main-wrapper Anda. Cari kode css main-wrapper dan lihat lebarnya yang ditandai dengan kode width. Gunakan ukuran yang tertera untuk kode berwarna merah tersebut.


Tambahan... Bagi Template Dengan 2 Lebar Main-Wrapper
Ini saya tambahkan karena banyaknya pertanyaan yang masuk. Yang saya maksud dengan template dengan 2 main-wrapper adalah template dengan lebar area postingan yang berbeda ketika di homepage dan ketika Anda masuk salah satu postingan. Karena pada dasarnya pembenahan ini memasukkan dua kunci utama yakni float: left; dan penyesuaian lebar area postingan, maka untuk template dengan dua main-wrapper kodenya pun harus dua. Lakukan langkah-langkah di atas sebelumnya. Kemudian ikuti tambahan tutorial berikut ini...
- Cari kode main-wrapper kedua, misal di template Magazine R.1.5 Kang Rohman lebar main-wrapper pertama adalah 617px (ini lebar secara umum dan dibenahi dengan tutorial pertama tadi), nah untuk magazine R.1.5 main-wrapper kedua memiliki lebar 315px. Maka carilah kode main-wrapper kedua (kode lebar postingan bersyarat, karena lebar hanya aktif saat berada di homepage, selain homepage blog memanggil lebar secara umum). Anda bisa menemukan lebar main-wrapper kedua dengan rambu-rambu berikut:



<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-wrapper { width:365px; float:left; padding:0px; margin-top:0px; margin-right:5px; margin-bottom:0px; margin-left:10px; display:inline; }
</b:if>
</style>

Seperti dapat Anda pehatikan di atas untuk css main-wrapper yang kedua diawali dengan syarat. Nah, sekarang Anda juga harus membuat satu lagi css blog-pager untuk dimasukkan ke area tersebut. Misalkan untuk template tersebut menjadi:

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#blog-pager-newer-link{float:left; line-height:1.8em; font-weight:bold}
#blog-pager-older-link{float:right; line-height:1.8em; font-weight:bold}
#blog-pager{width:365px; float:left; text-align:center; line-height:1.8em; font-weight:bold; color:white}
#main-wrapper { width:365px; float:left; padding:0px; margin-top:0px; margin-right:5px; margin-bottom:0px; margin-left:10px; display:inline; }
</b:if>
</style>

Sekarang dijamin older dan newer post link Anda akan normal di template dengan dua macam lebar area psotingan. Sedikit tambahan dari tutorial tadi malam. Semoga bermanfaat....

Sumber:  www.MasDoyok.co.cc
category
Read more »
category

Pasang Auto Read More V2

Posted by yudhie Posted on 6:54 AM with 4 comments
Sebelumnya saya sudah pernah membahas Tutorial ini di disini. tapi karena ada salah satu sahabat yang masih bingung cara pemasangannya jadi saya coba memberikan tambahan sedikit teman-teman sekalian bisa mudah memahaminya.. langsung aja ya ke tutorialnya..
Penting! Bagi yang sudah pernah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:



<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat mencoba..
Read more »
category ,

Membuat Widget Tombol Auto Instal Untuk Blogger

Posted by yudhie Posted on 9:07 AM with 2 comments
Membuat Widget untuk tombol Auto Instal sangat di perlukan bagi para blogger untuk mempermudah dan mempersingkat waktu instalasi widget dari suatu blog. Dengan cara ini maka blogger tersebut tidak perlu melakukan nya secara manual lagi.

Cara Nya Sebagai Berikut Ini ;

1. Contoh Nya Seperti Ini ,

2. Masuk Ke Blogger,

3. Klik Entri Baru Truz

4. Copy Paste Kode Di Bawah Ini Ke Postinggan Baru

Berikut code script yang bisa anda gunakan ;

<form action="http://beta.blogger.com/add-widget" target="_blank" method="post"><input value="judul untuk widget anda" name="widget.title" type="hidden"><textarea rows="3" cols="5" style="display: none;" name="widget.content">ISI DISINI DENGAN KODE WIDGET ATAU APAPUN YANG INGIN DIINSTALL OLEH PENGUNJUNG, DAN LANGSUNG TERPASANG DIBLOG MEREKA</textarea><input value="Pasang Translator Widget" class="button" name="go" type="submit"></form>
5. Klik Simpan ,Liat Hasil Nya ^_^

Selamat Mencoba .
category ,
Read more »
category ,

Modifikasi Kotak Pencarian di Blog

Posted by yudhie Posted on 9:02 AM with 1 comment
Sebuah blog sudah pasti sangat membutuhkan kotak pencarian atau search box. Kotak pencarian adalah sebuah kotak dimana anda dapat mengetikkan teks yang akan dicari di dalamnya. Informasi yang anda ketik akan dikirimkan ke server untuk memproses teks yang anda cari untuk menemukan hasilnya. Dengan kotak pencarian ini juga akan memudahkan pengunjung untuk menemukan artikel pada blog seperti artikel yang sudah lama diposting. Seperti layaknya kotak cari pada google, yahoo dan search engine lainnya, maka anda pun bisa membuatnya sendiri. Blogger sendiri sebenarnya sudah menyediakan fitur kotak cari atau kotak penelusuran ini. .
Pada tutorial blog kali ini saya akan membahas bagaimana membuat kotak penelusuran yang lebih menarik dan bisa anda atur sendiri sesuai template blog anda. Pada umumnya tombol default kotak cari ini berwarna abu-abu seperti yang sering anda temui. Anda bisa merubahnya dengan warna lain serta modifikasi kotak pencarian lainnya. Memodifikasi kotak pencarian tidaklah begitu sulit, hanya membutuhkan sedikit kesabaran untuk mengutak-atik widget ini. Kreatifitas pada kode CSS tentu diperlukan. Selain merubah warna anda pun bisa menghilangkan tombol pencarian dan menggantinya dengan gambar atau icon tertentu. Pilihan kustomisasi lainnya adalah dengan menambahkan beberapa informasi teks di dalam kotak pencarian. Dalam posting ini, anda akan melihat beberapa pilihan dan cara kustomisasi kotak pencarian, sehingga anda dapat memilih metode yang paling cocok dengan selera anda serta menyesuaikannya dengan template blog anda.

Untuk kode widget kotak pencarian sederhana untuk blogger yang biasa anda temui adalah seperti ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Bagian yang berwarna merah dengan tulisan "search-box" adalah tempat dimana nantinya akan diketikkan teks yang mau dicari. Sementara pada tulisan "search-btn" adalah tombol yang akan ditekan untuk menyampaikan perintah pencarian ke server. Secara default, kode widget kotak pencarian di atas akan menjadi seperti ini :



Namun dengan beberapa sentuhan teknik sederhana, kita dapat membuat tampilan kotak pencarian menjadi lebih cantik.

Menggunakan kode CSS untuk kustomisasi kotak pencarian
Sebagai contoh, katakanlah kita menginginkan kotak pencarian dengan menambahkan warna latar belakang. Oke, saya pilih latar belakang warna hijau muda dan warna hijau gelap sebagai garis batas. Untuk membuatnya, maka gunakan kode CSS di bawah ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #585858; border: 1px solid #E0ECF8"/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Kode di atas akan menghasilkan kotak pencarian seperti di bawah ini :



Nah, kotak pencarian di atas akan kita modifikasi lagi dengan menambahkan warna latar belakang, garis tepi tombol dan warna teks pada tombol. Oke, saya pilih latar belakang warna hijau tua, garis tepi warna merah dan teks ditebalkan berwarna putih :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #A9D0F5; border: 1px solid #2E2EFE"/>
<input id="search-btn" value="Search" type="submit" style="background: #2E2EFE; border: 1px outset #01DF01; color: #ffffff; font-weight: bold;"/>
</form>
Saya sengaja membuat garis tepi dengan perintah "solid" agar kotak pencarian terlihat timbul dan bukannya datar atau flat button. Tujuannya agar orang tahu bahwa itu adalah sebuah tombol yang dpat di klik. Nilai ketebalan 1px masih dapat anda ubah lagi. Namun ada banayk blog yang memilih untuk membuat kotak pencarian tombol flat, terserah saja mau pilih yang bagaimana. Hasil kode kotak pencarian di atas seperti ini :



Sesuaikan kode-kode di atas dengan selera dan template anda. Misalnya anda ingin mengganti warna dan tebal garis tepi agar terlihat unik dan menarik. Untuk merubah warna, silahkan lihat kode warna saya.

Kustomisasi teks pada widget kotak pencarian
Anda bisa menambahkan beberapa teks dalam kotak pencarian sebagai panduan bagi pembaca . Misalnya anda ingin memasukkan tulisan "cari di blog ini!" atau "ketik untuk mencari". Untuk membuatnya, kita perlu menambahkan kode CSS pada menjadi seperti kode di bawah ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="cari di blog ini..."/>
<input id="search-btn" value="Search" type="submit"/>
</form>
Maka hasilnya akan seperti di bawah ini :



Teks pada tombol pencarian juga dapat diganti dengan teks pilihan anda. Pada contoh di atas teks nya adalah "Search". Nah, anda tinggal mengganti teks tersebut pada bagian kode ini :
<input id="search-btn" value="Search" type="submit"/>
Misalnya anda ingin menggantinya dengan teks "Go!" maka kodenya akan menjadi seperti ini :
<input id="search-btn" value="Go!" type="submit"/>

Menggunakan gambar sebagai tombol kotak pencarian
Seperti pengantar di atas, tombol widget dapat anda hilangkan dan menggantinya dengan gambar atau icon tertentu. Ga sulit-sulit amat koq, biasa saja. Untuk membuatnya, kita hanya perlu mengubah jenis input dari "Submit" diarahkan ke "Image" dan menentukan URL untuk gambar atau icon tersebut. Artinya anda harus menyiapkan gambar yang sudah dihosting pada tempat hosting gambar eksternal anda. Sebaiknya gunakan gambar atau ikon kecil dengan ukuran 16x16 pixel atau sedikit lebih besar dari ukuran tersebut agar pas untuk ukuran kotak pencarian. Ada banyak ikon pencarian gratis yang tersedia di internet. Misalnya saya menggunakan icon dari Iconlet tempat mencari icon gratis dengan banyak pilihan menarik. Contohnya seperti gambar icon di bawah ini :


Untuk menggunakan icon tersebut sebagai pengganti tombol kotak pencarian, maka kode yang digunakan adalah seperti di bawah ini :
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Cari artikel disini..."/>
<input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge4IgX4z4BkZhSWkAfZn8CpfmOZGicZsv3nwUtoZShObzHgmkMsXdknTl41fXAhfM6AmNbx8QO1zsY7jjsQ11M1aFqQHr_iYheJqdC4eyiNtjCfzw2nwJfa4uq0sUzYHKcPTjj4Sq2zD_C/s1600/1zehw2f_th.jpg.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/>
</form>
Pada kode di atas, saya telah mengubah jenis input "submit" ke "image" serta menambahkan URL dari icon yang sudah saya hosting pada baris setelah "image". Agar icon tepat di samping kotak pencarian, maka saya menmbahkan margin-left dan nilai jarak 5 pixel. Hasilnya adalah seperti di bawah ini:



Temen-temen dapat mengganti icon diatas dengan icon milik anda. Yang jelas, pastikan URL icon untuk kotak pencarian anda sudah benar. Anda juga masih dapat menyesuaikan ukuran gambar serta margin yang ada pada kode di atas agar sesuai dengan template blog anda.

Sekarang anda sudah bisa membuat kotak pencarian dengan beberapa pilihan di atas. Untuk menempatkannya di blog blogger saya rasa semuanya sudah bisa kan. Sekian dari saya, selamat berkreasi dengan kotak pencarian. Bagi blogger yang sudah mahir dan punya modifikasi kotak penelusuran yang lain, jika tidak keberatan, dapat berbagi ilmu di sini. Terimakasih, semoga bermanfaat.
category ,
Read more »
category ,

Cara pasang meta tag di setiap postingan otomatis

Posted by yudhie Posted on 7:01 AM with 4 comments
Pada postingan blog juragan kali ini akan membahas tentang cara memasang dinamik meta tag di blogspot secara otomatis. Teknik ini sangat-sangat berguna untuk optimasi onpage karena setiap postingan kita akan memiliki meta deskripsi yang berbeda antara satu postingan dengan postingan lainnya tanpa perlu repot-repot nambahin satu-satu pada setiap postingan secara manual. Dengan kata lain, meta deskripsi dan keyword pada setiap posting akan ter-generate secara otomatis. Hal ini tentu menjadi solusi bagi sobat yang mengalami duplikasi meta deskripsi.
Cara memasang meta tag deskripsi dan keyword setiap postingan secara otomatis ini juragan bagi kedalam 2 bagian, sobat-sobat ikutin aja salah satu dari kedua cara dibawah ini :
Bagi yang BELUM PERNAH memasang meta tag deskripsi sebelumnya, ikutin cara ini :
  1. Pertama-tama login dulu dong ke blogger.com terus ke tata letak > edit html.
  2. Tunggu sampe terload secara maksimal dan cari kode berikut (gunakan ctrl + f di firefox untuk mencari) :
    <title><data:blog.pageTitle/></title>
  3. Setelah dapat kode diatas hapus lalu ganti dengan kode berikut :
    <b:if cond='data:blog.url == &quot;http://ALAMATBLOGSOBAT.blogspot.com/&quot;'>
    <title><data:blog.pageTitle/></title>
    <meta name='DESCRIPTION' content='ISI DENGAN DESKRIPSI UNTUK HOMEPAGE BLOG SOBAT'/>
    <meta name='KEYWORDS' content='ISI DENGAN KATA KUNCI UNTUK HOMEPAGE'/> </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
    <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
    </b:if>
  4. Selesai dan save template sobat.

Bagi yang SUDAH PERNAH memasang meta tag deskripsi sbelumnya, ikutin cara berikut ini :

  1. Udah login ke blogger kan ? langsung menuju tata letak > edit html.
  2. Di halaman edit html, cari kode ini :
    <b:if cond='data:blog.pageType == "item"'>
    <title><data:blog.pageName/> | <data:blog.title/></title>

    Intinya tuh sobat cari kode deskripsi yang lama ( yang udah pernah sobat pasang sebelumnya), kemudian dihapus aja semua kode deskripsi yang lama ntuh.
  3. Setelah kode meta tag deskripsi dan keyword yang lama dihapus diganti dengan kode berikut yang tentunya lebih canggih lagi,hhe :
    <b:if cond='data:blog.url == &quot;http://ALAMATBLOGSOBAT.blogspot.com/&quot;'>
    <title><data:blog.pageTitle/></title>
    <meta name='DESCRIPTION' content='ISI DENGAN DESKRIPSI UNTUK HOMEPAGE BLOG SOBAT'/>
    <meta name='KEYWORDS' content='ISI DENGAN KATA KUNCI UNTUK HOMEPAGE'/> </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
    <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
    </b:if>
  4. Udah digantikan ? kalo udah selesai langsung aja di save template.
Nah, demikianlah cara bikin meta tag di setiap postingan secara otomatis. Semoga setelah ikutin cara diatas sobat-sobat juragan semuanya gak direpotkan lagi dengan harus memasang meta tag deskripsi di setiap postingan secara manual lagi. Salam.
category ,
Read more »
category ,

Cara Menghilangkan Broken Link pada Blog

Posted by yudhie Posted on 6:57 AM with No comments
Salah satu cara menghilangkan broken link pada blog yaitu dengan menghapus SERP postingan yang masih terindeks oleh google. Walaupun sudah kita hapus melalui dashboard akun blog kita, biasanya masih terindeks pada hasil pencarian (dengan kata kunci tertentu, terutama pada bagian judulnya).

Kondisi ini pada satu sisi menguntungkan, yakni potensi terjadinya kunjungan dari mesin pencari (walaupun kunjungan nyasar). Di sisi lain, tentunya ini kurang baik. Pengunjung tidak menemukan apa yang mereka cari. Selain itu, postingan tersebut akhirnya identik dengan broken link. Setahu saya, keberadaan broken link pada sebuah blog akan menyulitkan kenaikan pagerank blog tersebut. Selain kurang baik juga dari sisi usability (kebergunaan web/blog).
Oleh sebab itu, tidak ada salahnya kita meminimalisir broken link dengan cara menghapus postingan-postingan tersebut (dari kemungkinan untuk diindeks oleh google atau terjadi error not found).

Bagaimana cara mengetahui adanya link yang broken pada blog kita?

  1. Login dulu ke akun google anda melalui link google webmaster tools, yaitu http://www.google.com/webmasters/tools Setelah berhasil login, anda akan menuju halaman dashboard seperti berikut ini.
    Sebagai contoh, dalam hal ini saya akan coba menghapus link postingan yang broken dari blog ini. Maka saya akan mengklik kafegue.com (lihat screenshot di bawah ini).
    dashboard
  2. Hasilnya, setelah nama blog saya klik, maka akan muncul halaman selanjutnya seperti berikut ini. Lalu coba amati bagian paling kanan, tepatnya pada sub menu Crawl errors. Coba klik “Not found”. crawl-access
  3. Maka jika ada halaman yang error/broken dari blog anda, akan tampil keterangan seperti berikut ini (contoh dari blog saya). not-found-detail
    Nah, dari daftar tersebut, anda bisa mengopy link-link postingan yang broken itu untuk langkah selanjutnya.

Bagaimana menghapus SERP postingan blog yang broken atau error tersebut?

  • Kembali pada langkah 1 di atas (klik nama blog anda pada halaman dashboard webmaster tools). Lalu coba buka/klik menu “Site configuration”. site-configuration
  • Maka akan muncul menu-menu navigasi lain seperti di bawah ini. Coba klik “Crawler access”. crawler-access
  • Selanjutnya coba klik “Remove URL” seperti berikut ini. remove-url
  • Setelah itu, klik “New removal request”. new-removal-url
  • Pada kotak yang muncul, coba anda isikan dengan URL postingan atau URL halaman kategori yang akan dihapus SERP-nya (berdasarkan data pada langkah di awal yang telah saya jelaskan di atas). add-new-removal-request
    Dalam hal ini, sebagai contoh, saya akan menghapus SERP postingan lama saya yang berjudul Nyoba Theme Baru Lagi (yang sebelumnya sudah saya hapus secara manual dari dashboard WP).
    isi-url
  • Klik “Continue”. Selesai. Lalu tunggulah beberapa hari. Maka postingan tersebut akan menghilang dari SERP google. Saya sudah membuktikannya sendiri.
Selamat mencoba.
category ,
Read more »
category ,

Cara Membuat Kotak Banner Iklan Di Blog

Posted by yudhie Posted on 9:56 AM with 7 comments
Banyak sekali cara membuat blog anda menjadi ladang uang,apabila blog anda sudah memenuhi syarat itu tentunya. Biasanya sih traffic tinggi dan Pagerank juga. Jika kedua hal tersebut sudah terpenuhi jangan ragu untuk membuat blog anda menjadi ladang uang. Salah satu cara menguangkan blog anda adalah dnegan cara  memberikan slot/tempat bagi pengiklan yang akan memasang bannernya di blog anda. Hal ini bisa anda manfaatkan tentunya. Namun bagaiman pemasang iklan tahu bahwa anda sedang menyewakan sebagian sidebar anda ternyata bisa dipasangi iklan oleh nya jika anda tidak memberi sebuah tanda seperti banner. Biasanya banner tersebut bertuliskan “pasang iklan anda di sini”.
Nah,untuk membuat slot banner iklan tersebut di perlukan beberapa cara untuk membuatnya dengan sedikit sentuhan coding.baiklah berikut ini kita akan bahas cara membuat kotak banner/cara membuat slot iklan/cara membuat kotak iklan:
•    Seperti biasa log in dahulu ke blog kamu
•    Lalu menuju layout
•    Edit HTML
Tambahkan kode CSS berikut di atas kode ]]></b:skin>

/* Kotak Banner
===================== */
#Box-Banner-ads {
margin: 0px;
padding: 5px;
text-align: center; }

#Box-Banner-ads img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px outset #c0c0c0; }

#Box-Banner-ads img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px inset #333; }
•    Save hasil kerja ini
•    Eitsss,ini belum selesai
•    Kembali ke menu layout
•    Ke menu page element
•    Lalu add a gadget
•    Pilih HTML/JAVASCRIPT
•    Copy semua kode di bawah ini dan letakkan di HTML/Javascript
<div id="Box-Banner-ads">

<a target="_blank" href="http://www.gentayangantriks.co.cc/"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

<a target="_blank" href="http://www.gentayangantriks.co.cc/"><img alt="banner ads" src="http://i647.photobucket.com/albums/uu191/ariamsi/image%20blog/Iklan.gif" border="0"/></a>

</div>
•    Note: Ganti yang berwarna hijau dengan alamat blog yang ingin di tuju bila gambar tersebut nantinya akan di klik
Maka Hasil Dari Coding di atas adalah seperti ini:

banner ads

Ganti yang berwarna merah dengan alamat dimana kamu menghosting/menyimpan banner tersebut. Atau jika malas,gunakan alamat yang sudah tersedia juga tidak apa.
•    Lihat di sidebar anda,apakah sudah ada kotak banner tersebut? Jika ya, berarti anda telah melakukan cara membuat kota banner,cara membuat kotak iklan,cara membuat banner iklan
category
Read more »
category

Membuat Label di Blogger Menjadi 2 Kolom

Posted by yudhie Posted on 9:13 AM with 1 comment
Kali ini saya akan coba posting bagaimana membuat label di blogger menjadi 2 kolom. Mudah – mudahan postingan kali ini bisa dipahami dengan jelas ya. Untuk contoh dari tampilan label 2 kolom itu sendiri, anda bisa melihatnya di sidebar blog saya ini, atau gambar di bawah ini :
label-2-kolom

Membuat Label di Blogger

Karena object yang akan kita rubah disini adalah bagian label dari blogger, maka sudah tentu harus ada label terlebih dahulu. Jika blog anda belum memiliki label silahkan pasang dulu. Dan bagi yang sudah terpasang widget label di blognya, jangan lupa untuk menampilkan-nya secara flat / daftar jangan versi cloud. Untuk lebih jelasnya, berikut cara membuat label dengan tampilan flat / daftar.
  1. Login di Blogger
  2. Klik “Rancangan”
  3. Pada menu “Elemen Halaman”, klik tambah gadget di sidebar blog.
  4. Pilih Widget “Label”
  5. Pastikan tampilannya daftar. Kemudian klik simpan.

    widget-label
Sampai disini, blog anda sudah memiliki label. Namun tampilannya masih default yaitu list / daftar dalam 1 kolom. Sekarang bagaimana caranya membuat label tersebut menjadi 2 kolom?. Kita lanjutkan tutorialnya.
Untuk membuat tampilan label menjadi 2 kolom, disini kita hanya menggunakan teknik css saja. Tidak ada script atau apapun. Nah sekarang kita lanjutkan ke pembagian label menjadi 2 kolom dengan menggunakan teknik css. Caranya :

1. Login di Blogger
2. Klik “Rancangan”
3. Klik “Edit HTML”
4. Sebagai backup jika terjadi kesalahan dalam pengeditan, silahkan copy paste seluruh kode template ke dalam notepad.
5. Copy paste kode di bawah dan simpan di atas kode ]]></b:skin>
 
#Label1 li {
      float:left; 
      width:45%;
}
 
6. Klik “Pratinjau” dan lihat apakah terjadi perubahan pada widget label blog anda (menjadi 2 kolom). Jika belum, coba perkecil nilai width pada kode diatas sampai anda menemukan nilai yang pas, sehingga widget label dalam blog anda menjadi 2 kolom.
7. Jika sudah selesai dan tidak terjadi kesalahan, klik “Simpan”.
Tutorial diatas, mungkin sedikit rumit jika anda tidak mengetahui lebar dari widget label di blog anda. Untuk mengatasinya, silahkan ikuti petunjuk yang sudah saya tulis pada point 6, untuk bisa menampilakan label di blogger menjadi 2 kolom.
Jika anda menemukan masalah dalam menampilkan label / kategori di blogger menjadi 2 kolom, jangan suka untuk bertanya di kolom komentar yaa…
Selamat mencoba….biggrin
Read more »
category , ,

Cara menambah kolom antara post dan sidebar

Posted by yudhie Posted on 6:50 AM with No comments
Sebelum nya saya pernah membahas tutor menambah kolom di blog. ternyata masih ada yang kurang yaitu kolom antara post dan sidebar. ide ini keluar dari pertanyaan sobat blogger yang mencari tutor menambah satu kolom antara post dan sidebar. tadi nya saya agak bingung membari judul artikel ini. membuat halaman tiga kolom di blog, atau cara menambah kolom antara post dan sidebar. akhirnya pilihan saya jatuh pada yang kedua. mudahan saja anda memilih yang kedua juga hehehe.

Biar tidak berkepanjangan kita langsung saja pada pokok pembahasan. untuk membuat satu kolom antara kolom post dan sidebar. yang pertama perlu anda perhatikan adalah ukuran lebar dari outer-wraper blog yang anda miliki. misalnya anda memiliki lebar auter-wraper 660px. nah untuk menambah kolom baru anda harus menambah lebar blog anda.

Untuk menambah kolom baru yang perlu anda perhatikan adalah kode-kode pada outer-wrapper berikut:
#outer-wrapper {
width: 680px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 230px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Nah untuk menambah kolom baru secara logika tentunya lebar dari Outer-wraper akan mengalami perubahan. pertama sekali yang harus di perhitungkan adalah, berapa lebar kolom yang ingin kita tambahkan. misalnya nilai dari kolom baru 230px; berarti jumlah keseluruhan lebar outer wrapper menjadi kira-kira 420px + 230px + 230px + 20 px = 880 pixel kemudian bisa kita tambahkan lagi 10 px untuk sela oute wraper sehingga lebar keseluruhan 890 pixel. jadi kode untuk penambahan kolom baru dari nilai di atas adalah:

#kolombaru-wrapper {
width: 230px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Nah setelah di tambah kan maka keseluruhan kodenya akan menjadi seperti ini:

#outer-wrapper {
width: 890px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 230px;
float: right;
padding-left:10px; /* yang ini adalah tambahan untuk jarak sela */
word-wrap: break-word;
overflow: hidden;
}
#kolombaru-wrapper {
width: 230px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Kode di atas merupakan langkah pertama yang harus kita tambahkan. berikut nya adalah menambah kode id untuk kolombaru tersebut. untuk kode id sidebar sebelum penambahan kolombaru adalah sebagai berikut:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
karna kita sudah menambah elemen baru pada sidebar, maka kita juga harus menambahkan id untuk elemen baru tersebut. id elemen baru tersebut adalah sebagai berikut
<div id='kolombaru-wrapper'>
<b:section class='sidebar' id='kolombaru' preferred='yes'>
</b:section>
</div>

Nah setelah menambahkan id kolom baru tersebut dengan id sidebar blog yang sebelumnya. sehingga menjadi seperti ini: 

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
<div id='kolombaru-wrapper'>
<b:section class='sidebar' id='kolombaru' preferred='yes'>
</b:section>
</div>
Selesai... simpan dan sekarang silahkan di cek pada tata letak blog anda. di sana akan terlihat kolom yang baru yang kita tambah kan tadi. untuk nilai header dan footer sebaiknya anda tambahkan menjadi 890 px. sehingga menjadi sama dengan nilai outer wraper. biar kelihatan lebih klop. Selamat mencoba.....
Read more »
category ,

Social Media Sharing by CB Bloggerz