Cara Mengakali Google Image Frame

Sudah pernahkan nyari image atau foto lewat Google ? Emang ada yang aneh ya? Gak juga kok, cuman aja waktu kita nampilin foto, secara otomatis foto yang ditampilkan berada pada frame. Tahu kan maksudnya, kalu masih belum paham lihat dulu nih foto ini.

Nah seperti itulah yang namanya Google Image Frame, bagi beberapa orang memang masalah frame tersebut tidak terlalu dipermasalahkan tetapi bagi orang yang menggeluti dunia adsense dan SEO hal ini tentu saja merupakan masalah yang cukup serius, mengapa?
Karena tentu saja mereka yang mencari foto atau gambar hanya akan melihat foto dengan frame, sehingga tidak terdirect ke halaman situs atau web yang punya foto tersebut. Sehingga akan membuat traffic blog menurun(pendapatku saja entah kata yang lain). Untuk itu perlu sedikit script untuk menghilangkan frame tersebut sehingga para pencari foto tidak hanya terhalang oleh frame tetapi langsung disuguhkan dengan situs penyedianya. Ini nih tutorialnya.
Cara Pasang
1. Login ke Blogger ==> Tab Rancangan ==> Edit HTML
2. Cari kode </head> lalu tambahkan kode berikut sebelu kode tersebut.

<script language="JavaScript" type="text/javascript">
if (top.location != self.location) top.location = self.location;
</script>

 3. Simpan
Sekarang coba cari foto lewat Google yang bersumber dari blog sobat, sudah langsung terdirectkan.

Ujian Sekolah Telah Tiba

Post kali ini memang berbeda daripada post-post sebelumnya dari blog ini. Karena post kali ini hanya sekedar berisi informasi, bahwasannya sehubungan dengan diadakannya Ujian Nasional Teori Produktif dan Ujian Sekolah yang akan diadakan mulai besok hari Senin tanggal 19 Maret 2012, saya selaku admin blog ini akan berhenti sementara untuk mengurusi blog ini dikarenakan akan fokus terlebih dahulu ke masalah ujian. Jadi jika banyak komentar yang belum terpublish ( Blog ini menggunakan sistem moderasi komentar) dan belum bisa berkunjung ke semua blog sobat saya pribadi meminta maaf.

Tak lupa saya meminta do'a dari sobat semua agar ujian yang akan saya laksanakan besok dapat berjalan dengan lancar.
Terima kasih sudah menyempatkan diri membaca post ini.
Salam Blogger dan walaikum salam.

Static Facebook Popup Like Box

Memang setiap blog pasti kurang rasanya jika tidak memiliki Fans Page, apalagi kalau blog tersebut sudah terkenal pasti bejibun yang nge-likes Fans Pagenya. Oleh karena itu saya akan share Static Facebook Popup Like Box, dengan tambahan widget ini tentu saja akan mempermudah Fans Page sobat untuk mendapatkan tambahan like dari pengunjung blog sobat. Widget ini merupakan alternatif lain dari widget sebelumnya yaitu Stylish Facebook Pop Up Like Box, oleh karena itu terserah sobat mau pilih yang mana, kalau masih kurang entar saya post lagi widget serupa tapi beda lagi desainnya. Untuk menggunakan widget ini syarat mutlaknya adalah sobat sudah mempunyai Fans Page sendiri, kalau belum punya cari tutorial di Google untuk membuatnya karena sudah banyak blog yang membahasnya, jika sudah punya maka ikuti tutorial di bawah ini.

Cara menambah Static Facebook Popup Like Box

1. Login ke Blogger.
2. Masuk Tab Rancangan ==> Edit HTML ==> centang Expand Template Lengkap
3. Tambahkan script Jquery berikut di template sobat sebelumtag </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"/>

Jika sobat sudah memasang Jquery pada blog sobat maka abaikan langkah ini.
4. Masuk ke Tab Rancangan ==> Tambah Widget ==> HTML/Javascript lalu pastekan kode berikut

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".bdslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.bdslikebox{background: url("http://img803.imageshack.us/img803/2919/bdfacebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.bdslikebox div{border:none;position:relative;display:block;}
.bdslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.bdslikebox span a{color: gray;text-decoration:none;}
.bdslikebox span a:hover{text-decoration:underline;}
</style>
<div class="bdslikebox" style="">
    <div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FBDeviant&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><a href="http://www.blackdeviant.web.id/2012/03/static-facebook-popup-like-box.html">Get this widget</a></span>
    </div>
</div>

 Ganti kode yang berwarna biru dengan ID Fans Page sobat ID tersebut diperoleh dari URL Fans Page sobat misalnya URL Fans Page blog ini adalah http://www.facebook.com/BDeviant. Yang saya cetak tebal adalah Id Fans Page.
5. Simpan widget sobat.

Sekian tutorial kali ini, jangan lupa dukung blog ini dalam kontes SEO Betwin188.com Agen Bola Terbaik Dukung Anti Rasisme EURO 2012. Salam Blogger dan wassalam.

Stylish Static Follow by Email Blogger

Sebenarnya ini adalah widget asli bawaan Blogger, tetapi sudah dimodifikasi sedemikian rupa sehingga menyerupai plugin Wordpress. Widget ini merupakan hasil perpaduan dari CSS dan Jquery, oleh karena itu akan menghasilkan efek Smooth. Dengan tampilan seperti ini sangat mungkin pengunjung blog sobat akan menjadi subsciber email sobat. Untuk mendapatkan widget Stylish Static Follow by Email ini silahkan ikuti langkah-langkah berikut.
1. Karena widget ini menggunakan Jquery maka tambahkan script berikut pada template sobat sebelum tag </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Tapi jika sobat sudah menambahkanJquery pada template sobat, maka abaikan langkah ini.
2. Masuk Tab Rancangan ==> Tambah Gadget ==> HTML/Javascript lalu paste kode di bawah ini

<style type="text/css">
/*<![CDATA[*/
    #bdfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
    .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
    .bdfollowButton {background: #464646;color: #CCC;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
    .bdfollowButton span {background: url("http://img3.imageshack.us/img3/8021/followbd.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
    .bdfollowButton:hover,.followActive {color: #fff !important;}
    .bdfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
    .followactive {background-color: #333;}
    .bdfollowForm {padding: 15px;}
    .bdfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
    .bdfollowForm p {margin: 0 0 10px;}
    .bdfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
    .bdfollowForm form {text-align: center;}
    .bdfollowForm .emailInput:focus {color: #000;border-color: #000;}
    .bdfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
    .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
    .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
    .bdFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
    .bdFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
    .bdFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(bd){bd(document).ready(function(){bd.extend(bd.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=bd("#bdfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);bd(".bdfollowButton").click(function(e){if(followBox.hasClass("followOpened")){bd(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{bd(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="bdfollowSubscribe" style="display:none;">
    <div class="bdfollowForm">
        <a class="bdfollowButton" href="#" title="Follow"><span>Follow</span></a>
        <h3>Follow 'Black Deviant'</h3>
        <p>Mau tutorial blog dan SEO terbaru dari blog ini langsung ke emailmu, silahkan masukkan email sobat dan tekan tombol Subscribe.</p>
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlackDeviant', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
            <input type="hidden" value="BlackDeviant" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input type="submit" value="Subscribe" class="emailSubmit"/>
        </form>
        <p class="bdFollowFooter">
            <a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
        </p>
    </div>
</div>

Catatan:

• Kode yang berwarna merah gantilah dengan nama blog sobat atau kata yang lain.
• Kode yang berwarna biru merupakan pesan, jadi gantilah sesuka sobat.
• Kode yang berwarna hijau adalah ID Feedburner sobat.

3. Simpan template sobat.
Sekian tutorial kali ini, jangan lupa dukung blog ini dalam kontes SEO Betwin188.com Agen Bola Terbaik Dukung Anti Rasisme EURO 2012. Salam Blogger dan wassalam.

Multi Tab Widget Blogger

Pada kesempatan kali ini saya ingin  berbagi tutorial membuat widget multi tab di Blogger. Sudah tau kan apa itu multi tab widget, yap multi tab widget yaitu sebuah widget dimana widget tersebut dapat menampung lebih dari satu konten, misalnya seperti pada gambar diatas widget multi tab dapat menampung tiga konten. Multi tab widget ini memang sangat efektif untuk mengatasi pemakaian tempat dalam penempatan widget. Berikut langkah-langkah membuat Multi Tab Widget Blogger.
1. Masuk Tab Rancangan ==> Edit HTML ==> centang Expand Template Widget
2. Backup template sobat dengan klik Download Template Lengkap (Optional)
3. Tambahkan kode di bawah ini sebelum kode ]]></b:skin>

.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#666666;background:#DDDDDD;padding:4px 16px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#666666;color:#FFF;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

4. Tambahkan kode di bawah ini setelah kode <div id='sidebar-wrapper'>

<div class='tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-tab&quot;).hide();
                $(&quot;ul.tabs-widget-tab li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-tab:first&quot;).show();
  
                $(&quot;ul.tabs-widget-tab li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-tab li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
                    $(this).addClass(&quot;tabs-widget-current&quot;);
                    $(&quot;.tabs-widget-content-tab&quot;).hide();
                    var activeTab = $(this).attr(&quot;href&quot;);
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='tabs-widget tabs-widget-tab'>
<li><a href='#tab1'>About</a></li>
<li><a href='#tab2'>Tags</a></li>
<li><a href='#tab3'>Archives</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-tab' id='tab1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>                                  
</div>                       
                           
<div class='tabs-widget-content tabs-widget-content-tab' id='tab2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>                                    
</div>                       
                           
<div class='tabs-widget-content tabs-widget-content-tab' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                   
</div>
</div>
<div style='height:5px;clear:both;'/>

5.  Tambahkan kode berikut sebelum kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Jika sobat sudah memasang script Jquery di atas pada template sobat, maka abaikan langkah ini.
6. Ganti tulisan yang berwarna biru dengan nama tab sobat, kemudian simpan template sobat.
Sekian tutorial kali ini, salam blogger dan wassalam.