TOP | Tutorial Blogger | OOM RIO

Membuat Widget Translate Keren

2013-04-01T22:03:00.000-07:00

Dipostingan Saya kali ini Saya akan share, bagaimana Cara Membuat Widget Translate atau Terjemah Yang Keren di Blog. Sebenarnya Google juga telah menyediakan widget translate yang bisa dipakai untuk blog, tapi widget ini, Saya tidak mengambil dari google tapi dari situs lain, seperti yang Kamu lihat di blog Saya.

Untuk caranya ikuti tutorial dibawah ini :

Log in ke Blogger Kamu
Pilih tata letak, lalu klik tambah gadget
Pilih dan klik html/javascript
Lalu masukan kode dibawah ini :


<div id="translate-this"><a style="width:180px;height:18px;display:block;" class="translate-this-button" href="http://www.translatecompany.com/">translate</a></div>

<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>
Atau jika Kamu masih bingung, lihat aja langsung dari situsnya disini
Simpan dan lihat hasilnya
Mudahkan, Selamat Mencoba,,,

Membuat BreadCrumb Navigasi Bagian Kedua

2013-03-31T07:58:00.003-07:00

Cara membuat breadcrumb navigation atau navigasi breadcrumb di blogspot ini adalah bagian ke-2 (II).

Update cara membuat breadcrumb navigation ini Saya buat karena ada request dari Blogger Cerita Dewasa melalui komentar dihalaman Cara Membuat Navigasi Halaman Bernomor yang commentnya seperti ini: "He oiya boleh ngrequest ndak? Cara buat navigasi breadcrumbs yang bertanda '>' itu gimana ya, punyaku khan navigasi breadcrumbsnya kek gini '>>'." dan ini kutipan jawaban saya ke comment Cerita Dewasa: breadcrumbs yg saya punya sebenarnya sama dgn tutorial yg pernah saya buat tpi saya modif lagi agar lbh seo friendly, ok deh insya allah saya buatkan update modifikasinya, ditunggu ya dan terima kasih atas kunjungannya..

Alhamdulillah sobat, hari ini saya sempat membuatkan tutorialnya. Silakan lihat cara membuat navigasi breadcrumb - breadcrumb navigation update berikut ini:

* Login ke blogger.com > klik Design/rancangan > Edit HTML > centang Expand Template Widget, jangan lupa download full template dulu sebagai backup

* Copy kode Optimized CSS berikut:

.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3;

Dan letakan sebelum kode ]]></b:skin>

* Selanjutnya cari kode

<b:include data='top' name='status-message'/>

Hapus dan ganti dengan kode berikut

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

* Cari lagi kode

<b:includable id='main' var='top'>

Hapus dan ganti dengan kode Optimized HTML berikut

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'>  <b:else/> <b:if cond='data:blog.pageType == "item"'> <p class='breadcrumbs'> <span class='post-labels'>Results found at > <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'>> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast == "true"'>> </b:if> </b:loop> <b:else/> > </b:if> <span><data:post.title/></span> </b:loop> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "archive"'>  --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Home</a> > Archives for <data:blog.pageName/> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "index"'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == ""'> <a expr:href='data:blog.homepageUrl'>Home</a> > All posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> Posts filed under ><data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'>

* Save template dan lihat hasilnya.

* Tambahan: Jika ingin judul posting diakhir breadcrumb Anda memuat link seperti di blog ini, silakan ganti kode

<span><data:post.title/></span>

Dengan kode

<b:if cond='data:post.url'> <a expr:href='data:post.url'><span><data:post.title/></span></a></b:if>

* Save Template, selesai.

Pasang TV Online Di Blog

2013-03-31T07:55:00.001-07:00

Haloo para sobat Blogger semua gimana keadaan saat ini? mudah-mudahan dalam keadaan sehat dan tetap semangat!!.

OK. Tutorial kali ini saya akan membahas tentang "Pasang TV Dengan Float di Blog".

Sebenarnya Script ini adalah gabungan dari berbagai macam Script yang banyak digunakan oleh kebanyakan orang antara lain yaitu, Script Buku Tamu Tersembunyi di kiri, Script untuk membuat Scrollbar, dan yang terakhir adalah script Spoiler/Tombol Tutup Buka.

OK, takut para sobat yang sudah menunggu gak sabar, kita langsung aja menuju cara pembuatannya.

Seperti biasa Sobat LogIn ke Blogger masing-masing
Setelah sampai halaman Dasbor klin Rancangan
Pada Halaman Elemen Lamaan Klik Tambah Gadget

Untuk memasuak Kode Script kita mempunyai Empat Tahapan diantaranya adalah sebagai berikut :

Script Buku Tamu yang bisa dismpan di samping kiri / kanan (hidden chatbox ),
Secara keseluruhan script buku tamu sembunyi di samping kiri adalah seperti ini :


<style>
#hcl {
position:fixed;
top:50px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i649.photobucket.com/albums/uu217/teaade/TVOnline1.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

Masukkan Kodenya Disini/ Script Point No 2 Disini

<div class="hc-credit">
<span style="float:left">


</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>


Nah pada kode yang berwarna merah Kita ganti dengan Script point No 2 dibawah.
Script untuk membuat Scrollbar,
Secara keseluruhan scriptnya adalah seperti ini :

<div style="border: 2px solid rgb(255, 0, 102);
overflow: auto;
width: 400;
height: 200;
text-align: left; ">

Isi content/ Script Point No 3 disini

</div>

Sesuaikan ukuran width dan height dengan ukuran tombol show dan hide pada script no 3
kalau menurut Saya sich ukuran yang pas adalah width = 120 dan height = antara 20-25
Langkah selanjutnya adalah memasukkan script no 3, pada tulisan yang berwarna merah.
Script untuk membuat tombol Hide and Show/Buka Tutup
dan script aslinya adalah sperti ini :

<input onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value
= 'sembunyikan'; } else{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.innerText = ''; this.value = 'tampilkan'; }" style="font-size:
10px; margin: 0px; padding: 0px; width: 116px;" type="button" value="tampilkan" /></div>

<div class="alt2">

<div style="display: none;">

<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(0, 0, 0)
none repeat scroll 0% 0%; color: white; padding: 10px; text-align: left;">

Isikan dengan yang mau anda simpan/Script TV Disini

<div><div></div></div></div></div></div>
</div>

Ganti tulisan sembunyikan dengan 'STOP' dan tulisan Tampilkan Dengan Nama Stasun TV, tombol ini akan berfungsi sebagai tombol play dan Stop nantinya
Nah baru kita masukkan Script TV nya pada tulisan yang berwarna merah atau sebelum kode
<div><div></div></div></div></div></div>
</div>

Untuk Script TV bya dibawah ini :

Script TV ONE :

<embed allowscriptaccess="always" src="http://www.tvone.co.id/embed/player.swf" allowfullscreen="false" flashvars="&file=tvone&type=video&streamer=rtmp://202.129.216.34/live/&stretching=exactfit&logo= &autostart=true" bgcolor="transparent" height="170" width="220"></embed>

Script TV ANTV

<embed allowscriptaccess="always" src="http://www.tvone.co.id/embed/player.swf" allowfullscreen="true" flashvars="&file=antv&type=video&streamer=rtmp://202.129.216.34/live/&stretching=exactfit&logo= &autostart=true" bgcolor="transparent" height="170" width="220"></embed>

Oke Selesai Sudah Semoga Bermanfaat ^_^

Floating Menu Keren Dengan Efek JQuery

2013-03-31T07:46:00.002-07:00

Pada tutorial kali ini saya akan mengetengahkan cara membuat "Floating Menu JQuery dengan Link Efek Disko", kenapa saya kasih judul ini mungkin karena apa yang saya bahas mirip dengan lampu disko hehehe, mungkin para sobat juga kurang puaskan apa dan seperti apa yang dibahas kali ini??..

Untuk kepastian dan meyakinkan kepada para sobat semua silahkan para sobat klik disni atau disini untuk melihat langsung demo yang kita bahas.

Gimana tertarik? OK kalau sobat semua tertarik dan ingin mencobanya silahkan lakukan langkah langkah sebagai berikut :

Langkah Pertama :
Seperti biasa para sobat harus dalam keadaan LogIn. Dasbor --> Rancangan --> Edit HTML. kemudian cari ]]></b:skin> Setelah ketemu simpan kode tersebut di atas kode tadi.

#floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:200px;
}
#floatMenu ul {
margin-bottom:20px;
}
#floatMenu ul li a {
display:block;
border:1px solid #999;
background-color:#222;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
}
#floatMenu ul.menu1 li a:hover {
border-color:#09f;
}
#floatMenu ul.menu2 li a:hover {
border-color:#9f0;
}
#floatMenu ul.menu3 li a:hover {
border-color:#f09;
}

Langkah ke Dua cari kode seperti ini <head> setelah ketemu simpan kode di bawah ini sebelum kode <head>

<script language="javascript" src="http://longfield22.googlecode.com/files/jquery_mini.js"></script>
<script language="javascript" src="http://longfield22.googlecode.com/files/jquery.dimensions.js"></script>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>

<link href="http://longfield22.googlecode.com/files/reset.css" rel="stylesheet" type="text/css" />
<link href="http://longfield22.googlecode.com/files/page.css" rel="stylesheet" type="text/css" />

Langkah ke Tiga yaitu sobat cari kode seperti ini <body> setelah ketemu letakkan kode di bawah ini dibawah kode <body>

<div id="page-wrap">
<div id="header">
<h2> Longfield Floating menu</h2>
<h1>jQuery&CSS</h1>
</div>
<div id="content">

</div>
</div>

<div id="floatMenu">
<ul class="menu1">

<li><a href="#" onclick="return false;"> Home </a></li>
</ul>
<ul class="menu2">
<li><a href="#" onclick="return false;"> category </a></li>
<li><a href="#" onclick="return false;"> forum </a></li>
<li><a href="#" onclick="return false;"> facebook gw </a></li>

</ul>
<ul class="menu3">
<li><a href="#" onclick="return false;"> Technical support </a></li>
</ul>
</div>

Setelah langkah-langkah di atas beres klik Simpan Template, beres deeh

PERHATIAN
JIka ada </div> yang kurang silahkan ditutup OK

Selamat mencoba semoga berhasil dan bermanfaat :D

Efek Animasi Loading Blog Dengan Event

2013-03-31T07:42:00.001-07:00

Penting :

Postingan Ini Saya Ambil Dari Blognya DTE dan saya mencoba untuk memposting ulang artikel ini.

Sebelumnya Saya pernah menuliskan cara membuat efek animasi loading pada saat halaman berpindah dengan cara menyeleksi semua tautan internal untuk memicu tampilnya overlay/tabir animasi saat tautan tersebut diklik. Tapi metode ini memiliki dua kelemahan:
Pertama, menyeleksi semua tautan internal dengan selektor atribut sebenarnya tidak begitu baik karena selektor atribut itu performanya buruk.
Ke dua, jika kita mengeklik tautan internal yang memiliki atribut target='_blank' di dalamnya, tautan tersebut akan terbuka di tab baru. Tapi efek animasi memuat halaman justru terpicu pada halaman sebelumnya, padahal kita tidak menghendaki itu ⇒ #c8644667892985451185. Saya sudah berhasil mengakalinya dengan cara memfilter tautan internal tersebut dengan cara mengecualikan tautan yang memiliki atribut target='_blank' menggunakan JQuery .filter():

$internalLinks.filter(':not([target="_blank"])').click(function() {});

Tapi mulai sekarang lebih baik kita lupakan cara lama tersebut. Kita bisa menciptakan efek animasi perpindahan halaman dengan aman menggunakan event beforeunload.
beforeunload adalah event yang akan terpicu saat sebuah halaman mulai berpindah karena seorang pengguna mengeklik tautan tertentu (atau sekedar memuat ulang halaman dengan cara mengeklik tombol Reload pada peramban) yang memicu mereka untuk keluar dari halaman tersebut:

123$(window).on("beforeunload", function() {
    // Menampilkan tabir animasi dengan efek `.fadeIn()`...
});

Kali ini tabir animasi ditampilkan bukan karena terpicu oleh aksi klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang tabir animasi perpindahan halaman dengan cara ini:
Anggaplah JQuery sudah terpasang di blog kita. Pertama, masuklah ke halaman editor HTML template, kemudian letakkan kode CSS ini di atas ]]></b:skin> atau </style>:

#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background-color:black;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Kemudian sisipkan kode ini di atas </body>:

<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader">Loading...</div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
    // ... tampilkan tabir animasi dengan efek `.fadeIn()`
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Klik Simpan Template.

Edit Widget Popular Post Dengan Efek Melayang

2013-03-31T05:53:00.001-07:00

Modifikasi widget popular posts dengan efek tooltip pada ringkasan atau summary postnya. Trick ini saya dapat dari blognya MDF , dan saya mencoba untuk menshare ulang Artikel ini . Kali ini saya akan membahas cara modifikasi widget popular posts bawaan blogspot dengan efek tooltip pada summary atau ringkasan post-nya, seperti yang kita ketahui ada banyak tutorial untuk memodifikasi widget popular post original blogspot, seperti memberi efek warna warni dll.
Pada pembahasan ini, kita akan menampilkan popular post bergambar dengan efek pada ringkasan postingnya, dan ringkasan tersebut akan muncul ketka link pada popular posts tersebut di sorot, contoh seperti gambar diatas. Tutorial ini saya dapatkan setelah berjalan-jalan di blog asal vietnam http://www.trollvl.com/ dan saya menemukan tutorial yang menarik ini, saya coba terapkan dan berhasil, tapi ini hanya berjalan pada popular posts dengan thumbnail atau menampilkan gambar.
Berikut Langkah-langkah Modifikasi Widget Popular Posts Dengan Efek Tooltip.
» TAHAP 1
1. Login akun blogger anda
2. Pada Dashboard pilih Tata Letak » Tambah Gadget » Pilih Entri Populer
3. Lalu pilih jumlah post yang akan ditampilkan, Setting seperti gambar berikut ini !

4. Klik Simpan
5. Klik Simpan Setelan

» TAHAP 2
1. Masuk ke Template » Edit HTML » Centang Expand Template Widget
2. Letakka kode berikut ini diatas kode ]]></b:skin>

.tooltip-pp { position:relative; display:block }
.tooltip-pp span { visibility:hidden; position:absolute; bottom:30px; left:50%; z-index:999; width:230px; margin-left:-127px; padding:10px; border:2px solid #0F83A0; opacity:.9; background-color:#A6CED8; background-image:-webkit-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-moz-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-ms-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:-o-linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0)); -moz-border-radius:4px; border-radius:4px; -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset; box-shadow:0 1px 2px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.5) inset; text-shadow:0 1px 0 rgba(255,255,255,.4) }
.tooltip-pp:hover { border:0 }
.tooltip-pp:hover span { visibility:visible }
.tooltip-pp span:before,.tooltip span:after { content:""; position:absolute; z-index:1000; bottom:-7px; left:50%; margin-left:-8px; border-top:8px solid #A6CED8; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:0 }
.tooltip-pp span:before { border-top-color:#0F83A0; bottom:-10px }

3. Cari kode dibawah ini


            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>

Untuk mudah menemukannya cari saja kode 

Lalu ganti semua kode tersebut dengan kode berikut ini

<div class='item-content'>
    <div class='item-title'>
        <b:if cond='data:post.thumbnail'>
            <img border='0' class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        </b:if>
<a class='tooltip-pp' expr:href='data:post.href'><data:post.title/><span><data:post.snippet/></span></a></div>
</div>

4. Simpan Template dan Lihat hasilnya..
Silahkan anda sesuiakan sendiri, tampilan style setting pada kode cssnya.

Demikian posting tentang Modifikasi Widget Popular Posts Dengan Efek Tooltip, semoga bermanfaat.

Teknik Mendapatkan Visitor Ribuan Dalam Waktu Singkat

2013-03-30T09:20:00.003-07:00

BlackHat adalah sebuah cara yang tidak lazim atau bisa dibilang jalan pintas untuk mendapatkan sesuatu yang kita inginkan. ada banyak blackhat yang kita bisa temui di internet. Blackhat kali ini mengenai bagaimana mendatangkan traffic kedalam situs anda dengan cara yang sedikit memaksa. cara ini efektif mendatangkan ratusan visitor hanya dalam satu minggu dari atau setelah Anda membuat blog pertama Anda.

Perlu diingat.. Secara umum pengunjung datang ke situs atau blog anda karena Anda memberikan apa yang mereka inginkan.ini merupakan skema yang wajar dalam mendatangkan traffic selain blogwalking.
Kemudian SEO pun berpengaruh untuk membuat blog anda dapat dengan mudah ditemukan orang. page rank dan alexa rank pun ikut mempengaruhi.

Kalau cara mendatangkan traffic hanya seperti penjelasan diatas maka sayalah orang pertama yang akan frustasi.hehehe
jujur saya sama sekali tidak memiliki latar belakang IT yang bagus.
terus bagaimana dengan blog saya yang baru berumur 3 hari, atau 2 minggu. secara logika maka blog saya akan mendapat pengunjung yang sangat sedikit.

Kemudian saya mulai berpikir, bagaimana cara mendatangkan traffic walaupun umur blog baru beberapa minggu..
Segala macam bentuk mendatangkan traffic pun saya cari mulai dari searching di gogole dan forum-forum diinternet. kebanyakan hasil yang saya terima adalah menyuru saya untuk mulai dari blogwalking yang melelahkan, dan optimasi seacrh engine (SEO) yang menurut saya tidak banyak membantu.

Alhasil.... ide-ide nakal saya pun mulai muncul .. "bagaimana mendatangkan pengunjung walaupun mereka tidak ingin mengunjungi situs saya".
pencarian pun terus berlanjut, iseng iseng berkunjung ke forum luar negeri yang secara umum membahas tentang Blackhat.pertanyaan demi pertanyaanpun saya luncurkan diforum tersebut. Akhirnya saya menemukan sebuah script yang cukup unik menurut saya.( titik terang pun sudah mulai terlihat..hehe )

Script ini digunakan untuk Blackhat CPA, namun saya ubah fungsinya untuk mendatangkan traffic. Untuk itu sebelum saya lanjutkan silakan ikuti langkah dibawah.

Pertama :
Buatlah sebuah blog baru, yang nantinya blog ini akan digunaka sebagai blog dummy yang menuju ke situs utama Anda.

Kedua :
klik Rancangan pada dasbord Anda, pilih edit HTML.

Copy paste script dibawah, kemudian letakan dibawah ]]></b:skin>

Code :

<style>
    body
    {
        background-image:url('');
        background-repeat:repeat;
        height:100%;
        margin:0;
    }

    #mainContent
    {
        background-color:white;
        margin-left:auto;
        margin-right:auto;
        margin-top:30px;
        width:700px;
        border:3px solid #CDCDCD;
        text-align:center;
    }

    #gatewaydiv
    {
        background-image:url("");
        background-repeat:no-repeat;
        width:500px;
        height:300px;
        padding:20px;
        position:absolute;
        display:none;
        background-color:#FFFFFF;
        border:solid 4px gray;
        text-align:center;
        font-family:arial;
    }

    #gatewaydiv h1
    {
        font-size:35px;
        color:#cc0000;
    }

    #gatewayMessage
    {
        font-size:18px;
    }

    .offerlink
    {
        color:red;
        font-weight:bold;
    }

    #OfferList
    {
        margin:0;
        padding:0;
    }

    #OfferList
    {
        list-style:none;
    }

    #gatewayDimmer
    {
        background-color:#000000;
        opacity:0.8;
        display:none;
        position:absolute;
        top:0;
    }


</style>

Kemudian copy paste juga scripth dibawah, kemudian letakan diatas </head>

Code :

<script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js' type='text/javascript'/>
<script type='text/javascript'>

    var Delay = 5;//Seconds after them clicking the link, the gateway vanishes.

    function setupgateway()
    {
        var Left = $(window).width() /2;
        Left = Left - $('#gatewaydiv').width()/2;

        var Top = $(window).height() /2;
        Top = Top - $('#gatewaydiv').height()/2;

        $('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');
        $('#gatewayDimmer').width($('html').width());
        $('#gatewayDimmer').height($('html').height());
        $('#gatewayDimmer').css('display','block');
    }

    function removegateway()
    {
        $('#gatewaydiv').css('display', 'none');
        $('#gatewayDimmer').css('display','none');
    }

    $(document).ready(function()
    {
        $('.offerlink').click(function()
        {
            setTimeout('removegateway()', Delay*1000);
        });

        setupgateway();
    });
</script>

Selanjutnya copy paste script dibawah dan letakan di bawah <body>, jika Anda menginginkan Box ini mucul setiap halaman pada blog Anda.
Apabila Anda ingin menampilkan hanya pada Artikel tertentu maka, copy paste Script dibawah pada halaman artikel yang ingin Anda gunakan untuk cara Blackhat ini.

<div id="gatewayDimmer">
</div>

<div id="gatewaydiv">
<ul id="OfferList"> <h1>
Blackhat Traffic</h1>
<span id="gatewayMessage">Apa yang Anda cari. ? silakan pilih salah satu artikel dibawah ini</span> <br />
<br/>
<li><a class="offerlink" href="Alamat Situs yang Anda ingin dikujung" target="blank">Title Blog Anda</a></li>
<li><a class="offerlink" href="Alamat Situs yang Anda ingin dikujungi" target="blank">Title Blog Anda</a></li>
<li><a class="offerlink" href="Alamat Situs yang Anda ingin dikujungi" target="blank">Title Blog Anda</a></li>
</ul>
<br/><br/>
<b>Halaman ini akan tertutup secara otomatis setelah meng-klik salahsatu link diatas <br/>
Terimakasih!</b><br/>
<img border="0" src="http://pdfcast-data.appspot.com/img/loading.gif" />
</div>

Simpan template Anda.

*
Ubah Teks berwarna Ungu dengan judul konten Anda ( disini saya menggunakan "blackhat Traffic" )
Ubah teks berwana orange dengan kalimat Anda. ( anda bisa menggunakan kata-kata diatas )
Ubah Teks berwarna Merah dengan URL blog/situs yang ingin anda datangkan traffic. ( diatas saya hanya meletakan tiga link, Anda bisa menambahkannya . Usahakan jangan terlalu banyak karena inti nya sama saja )
Ubah teks berwarna Biru dengan Title blog Anda disini judul yang digunakan hanya samaran, apapun yang Anda tulis maka mereka tetap mengunjungi blog yang ingin Anda tuju. atau mungkin Anda menggunakan kata-kata close atau tutup untuk mengelabuhi pengunjung.
Apapun bisa Anda kreasikan sendiri, silakan lakukan eksperimen kata-kata mana yang lebih mendatangkan traffic

catatan :

- Link sebaiknya hanya menjurus kedalam satu blog tapi pada konten yang berbeda. contoh:
- Pada link pertama tulislah link yang menuju kehalaman home blog Anda.
- Link kedua tuliskan link yang menuju kesalah satu konten atau artikel di blog anda.
- Link ketiga juga tuliskan link yang menuju kesalah satu artikel pada blog anda

Bagaimana cara menggunakannya.?
- Sebaiknya gunakan script tersebut pada blog baru, karena blog tersebut hanyalah blog dummy yang nantinya akan memaksa pengunjung untuk mengunjungi blog utama anda juga.
- Blog dummy Anda tersebut adalah kumpulan Hot niche yang banyak dicari pengunjung. Buatlah judul yang tidak lazim untuk menarik pengunjung.( seperti yang saya lakukan ini )
- Untuk mencari apa yang sedang trend atau apa yang paling dicari saat ini Anda bisa menggunakan Google adword, google trends, dll ( cara tersebut tidak saya bahas disini, silakan cari di google saja) . kemudian buatlah sebuah artikel yang membahas tentang apa yang paling dicari pengunjung dari hasil pencarian keyword Anda. Intinya buatlah sebuah artikel yang ekstrim atau tidak lazim yang menarik pengujung, tapi ingat jangan memberikan suatu kebohongan. contoh : anda membuat judul artikel " Memposting artikel tanpa harus menulis artikel" maka isi artikel anda wajib membahas bagaimana caranya. jika isi artikel anda sama sekali tidak membahas judul artikel Anda maka kepercayaan pengunjungpun akan berkurang.
Bagaimana cara mencari ide artikel yang ekstrim akan saya bahas pada artikel yang lainnya. ditunggu aja.. :)
- yang terakhir promosikan artikel anda Forum-forum terkenal seperti : kaskus.us, weres-bb.org, forumw.org, projectw.org. Katakan sesuatu yang menarik pengunjung forum untuk membaca artikel anda.

Kalau dilihat bentuknya seperti widget melayang yang tidak ada tombol atau pilihan close. Dan untuk menutupnya pengunjung harus mengklik salah satu link yang disediakan.
Dari hasil script maka setiap pengunjung yang ingin membuka blog atau artikel Anda maka akan muncul sebuah box yang meminta mengklik salah satu link disana barulah pengunjung dapat melihat dan membaca artikel Anda. yang artinya, untuk mendapatkan apa yang pengunjung tersebut inginkan mereka harus melakukan apa yang kita inginkan.

"Mungkin Anda akan bertanya kenapa harus membuat blog dummy, ataupun artikel pancingan,? jika saya punya artikel menarik tinggal saya postingkan saja didalam blog saya kemudian mempromosikannya, hasilnya juga sama sajakan"

Anda benar, jika situs atau blog anda membahas semua info atau keyword yang ada didunia baik dalam masalah SEO, blog, tutorial, kesehatan, olahraga, travelling, music, download, konten dewasa, pornografi.dll. maka saya sarankan tidak membuat blog dummy atau malah tidak usah mengikuti cara ini karena cara ini tidak akan ada fungsinya sama sekali.
bayangkan jika situs atau blog yang Anda miliki membahas masalah Pornografi atau masalah tutorial Photoshop rasanya tidak wajar jika anda memposting artikel yang membahas masalah diluar seputar Pornografi atau tutorial photoshop. Dan perlu diketahui juga, google membenci situs yang tidak relevan dengan judul blog atau artikel Anda. Blog dummy tersebut digunakan untuk memposting artikel yang sedak hot di pencarian google, baik maalah SEO,blog, komputer, ebook, bisnis online, dll. intinya blog dummy anda akan terisi oleh konten atau artikel yang bercampur. Dengan begitu tidak peduli google akan membenci blog dummy anda atau tidak, menurunkan pagerank atau menghilangkan anda dari SERP karena ini hanya pancingan menuju situs yang anda inginkan.

Semoga artikel mengenai Teknik Medatangkan Ribuan Dengan Waktu Singkat dapat membantu kalian semua termasuk dalam masalah Traffic . Selamat Mencoba ^_^

Template Hack4rt V.4 Super SEO

2013-03-29T22:47:00.004-07:00

Ppada kali ini saya akan memberikan sebuah template SEO yang di buat oleh teman saya "Noval Bintangs" yang dia modifikasi sedemikian rupa hingga berwarna biru cerah, elegan dan fast loading. Template ini merupakan template modifikasi dari template Elesis yang dibuat oleh empunya blog Yousake (yang punya blogspot). Oh iya, sedikit review untuk template ini...

Review
1. SEO dimata Yousake, dimata Hack4rt juga
2. Elegan
3. Light Skin Template
4. Tidak mendukung mobile vers
5. Dll

Modifikasi
1. Bagian header dipindahkan dari atas ke bawah diantara navigasi atas dan bawah
2. Warna menjadi biru cerah dengan kode warna #00a3ff
3. Title Berada di tengah post pada homepage
4. Popular post sudah dimodifikasi menjadi kotak-kotak
5. Ketiga footer widget telah dimodifikasi menjadi seperti kotak sidebar
6. Kotak sidebar diubah menjadi kotak widget berjudul background biru
7. Terdapat kotak pencarian di kanan header
8. Jumlah komentar di homepage diganti dengan jumlah komentar, share post dan informasi blog dengan design dari template mas sugeng responsive
9. Post align sudah otomatis justify, tidak perlu disetting lagi ke justify
10. Terdapat permalink otomatis dengan design seperti Om-Dayz
11. Terdapat 2 kolumn di bawah dengan kiri subscribe dan kanan related post
12. Blog-pager didesign seperti template mas-sugeng

Kelemahan Hasil Modifikasi
1. Sebelum template ini dimodifikasi, template ini tetap tidak mendukung page (halaman)
2. Kesalahan pada tata letak sidebar yang melebihi widht yang wajar
3. Sidebar kedua yang hanya muncul pada post dihapus karena kesalahan yang sama

Kenapa Ada Kelemahan Modifikasi?
Kelemahannya sebenarnya bisa diperbaiki dengan CSS atau pun perbaikan pada HTML, namun karena admin Hack4rt yang malas mikir dan memperbaikinya lagi. Begitulah sifat admin Hack4rt yang sangat bertanggung jawab. Atas kesalahannya mohon dimaafkan :)

Tambahan
Tambahkan search button dengan menambah gadget HTML di sebelah Header

<form action="/search" class="form-wrapper" method="get">
<input id="a" name="q" placeholder="Search..." type="text" />
<button type="submit">GO</button>
</form>

Download template Hack4rt V.4

Belajar SEO Untuk Pemula

2013-03-29T21:43:00.001-07:00

Bagi para pelaku bisnis online tentunya sudah sangat familiar dengan teknik SEO. Teknik SEO adalah sebuah teknik dalam menaikkan popularitas dan pengunjung website kita. Jika sebuah toko online memiliki traffic pengunjung yang tinggi, maka bisnis online anda akan mendapatkan peluang yang lebih besar untuk menambah pelanggan. Selain itu, pengunjung yang banyak akan menaikkan rating website anda di mesin pencari otomatis seperti Google. Teknik ini bisa dipelajari dengan mudah dari artikel-artikel di website. Namun tak jarang setelah belajar SEO dari sebuah artikel, website anda tidak mengalami perkembangan yang signifikan.

Seperti pada artikel saya sebelumnya yaitu "apa itu SEO?", Pada dasarnya, tujuan SEO adalah untuk membuat website anda berada di daftar pencarian utama mesin pencari ketika seseorang mengetikkan kata tertentu. Misalnya ketika seseorang membutuhkan mobil bekas dan mengetikkan kata kunci “jual mobil bekas” di mesin pencari, maka website yang bergerak di bidang jual beli mobil bekas dan menerapkan teknik SEO paling efektiflah yang akan berada di daftar pencarian utama Google. Dari penjelasan tersebut bisa ditarik kesimpulan bahwa dengan mengoptimalkan SEO sebuah blog atau website, bisnis online anda akan mendapatkan peluang yang lebih besar untuk menarik perhatian calon pelanggan. Untuk itu, belajar SEO sangatlah penting jika anda adalah seseorang yang sedang menggeluti bisnis online ini. Berikut ini adalah dua hal dasar yang harus anda fahami yang dimulai dengan mengoptimalkan konten atau artikel pada blog anda:

Skill penulisan konten
Konten dalam sebuah website sangat penting untuk menunjang SEO. Teknik SEO ini biasanya akan berpusat pada artikel atau postingan tertulis di website anda. walaupun bisa dengan menggunakan foto, namun pengaruh yang paling besar biasanya terdapat dari konten artikel. Untuk sebuah artikel pendek anda bisa memasang 3 kata kunci saja sedangkan untuk artikel yang agak panjang, disarankan untuk memasang kata kunci yang tidak lebih dari lima.
Buatlah Artikel Original
Search Engine sangat tidak suka dengan namanya duplikat konten atau artikel hasil contekan atau copy paste dari blog atau website lain. Buatlah artikel dengan yang bermanfaat hasil buatan Anda sendiri. Apabila memaksa untuk mengambil materinya dari blog lain, Anda bisa mempelajari dulu artikel tersebut kemudian tuangkan dalam artikel lain dengan gaya bahasa Anda sendiri. Saya pernah membaca artikel dari beberapa teman blogger lainnya yang mambahas SEO untuk pemula, mereka menyebutkan bagi pemula yang benar-benar tidak tahu tentang SEO tetapi ingin menerapkan pada blognya, maka cukup membuat sebuah artikel yang original dan bermanfaat untuk pengunjung, itu saja sudah membantu blog anda bisa bersaing dengan blog lainnya.
Tulislah Artikel minimal 250kata.
Terkadang pemilik blog tidak memahami betapa pentingnya jumlah kata dalam sebuah artikel, khusunya blog toko online, kadang pemilik blog hanya mencantumkan gambar produk dan sedikit spesifikasi, di perparah dengan uraian spesifikasi produk tersebut adalah hasil copy paste dari blog lain, sehingga konten blog anda bisa di anggap mesin pencari sebagai low quality content dan ini akan berdampak buruk terhadap toko online Anda. Jadi buatlah setiap uraian dari produk Anda diibaratkan sebagai sebuah artikel.
Jalin interaksi dengan pengunjung website
Biasanya sebuah website yang banyak komentar atau menjalin interaksi yang intens dengan pembaca ratingnya akan lebih tinggi jika dibandingkan dengan website yang jarang menjalin interaksi dengan pengunjungnya. Maka usahakan untuk membalas semua komen serta membuat postingan di website yang dapat dengan mudah dikomentari tanpa menyertakan alamat email atau persyaratan lainnya.
Tahap selanjutnya adalah pelajari lebih mendalam tentang seo on page dan seo off page.

Untuk Detailnya anda bisa lihat artikel-artikel saya lainnya seputar belajar teknik seo pada kategori artikel SEO blogspot yang bisa anda lihat di related post atau artikel terkait dalam kotak dibawah. Salam SEO.

Trik Blog SEO Friendly untuk Google Panda

2013-03-29T09:25:00.002-07:00

Terkait soal banyaknya kontes SEO saat ini, seperti: Mercedes-Benz Mobil Mewah Terbaik Indonesia, Amikom.us Tempat Belanja Hosting Murah, atau Mari Berkomunitas di Faceblog membuat sebagian blogger merasa kewalahan menghadapi alogaritma baru google, yaitu Google Panda.

Kemarin saya sempet ngepost tentang Google Panda ini dalam artikel yang berjudul: Jangan Takut Menghadapi Google Panda ! Dalam postingan tersebut, saya telah menulis hal-hal apa sajakah yang harus kita lakukan dalam menghadapi Google Panda ini. Silakan baca dulu artikel tersebut buat yang belum baca, baru meloncat ke artikel ini.

OK. Tanpa berbasa-basi, langsung saja kita mulai bagaimana membuat blog SEO friendly untuk Google Panda.

1. Mulailah dengan membuat blog dengan minimal 5 – 10 halaman dengan title yang unik dan informatif

Mengapa harus minimal 5 artikel? Jawabannya simpel. Agar akses google tidak terbatas pada halaman tertentu saja. Google secara berfrekuensi akan meng-crawl situs kita. Jika kita hanya memiliki sedikit halaman dan tidak ada perubahan pada halaman tersebut, maka google akan berhenti meng-crawl page tersebut.

2. Setelah ada yang diindex, mulailah update blog dengan unique article secara berfrekuensi. Disarankan 5 artikel per hari.

Mengapa harus menunggu setelah diindex? Agar pekerjaan google tidak terlalu berat. Jika sudah diindex, maka google ketika ada posting baru, frekuensi crawl pada page yang lama akan sedikit berkurang dan mulai memprioritaskan pada page baru karena akses menuju URL tersebut lebih mudah. Mengapa? Karena link menuju posting tersebut berada pada halaman awal blog kita.

3. Gunakan meta description yang tepat untuk semua halaman/post yang anda buat

Jika ada yang mengatakan bahwa meta description tidak lagi menjadi faktor, itu salah besar menurut saya. Mengapa? Karena google masih menggunakan meta description untuk indentitas awal suatu page. Yang tidak berlaku lagi di mata google adalah meta keyword.

4. Buat sitemap.xml

Sitemap berfungsi sebagai petunjuk bagi spider untuk lebih jauh menjelajah situs kita. Jadi, ini sangat diperlukan agar google lebih mudah mengetahui halaman-halaman yang terdapat pada situs kita.

5. Daftarkan blog pada google webmaster tools, submit sitemap

6. Ciptakan blog yang fast loading namun tetap dengan keindahannya

Minimalkan penggunaan gambar yang berlebihan
minimalkan penggunaan javascript, java, flash, dsb
Letakkan javascript pada footer

7. Gunakan heading tag sebagai indentitas penting:

H1 untuk judul blog
H2 untuk judul artikel, sidebar
H3 untuk judul sidebar, optional
h4 optional
h5 optional
h7 optional

Diurutkan berdasarkan yang paling penting!

8. Mulailah membuat internal linking

9. Jangan lupakan pentingnya image ALT

10. Jangan lupakan pentingnya keyword density

Keyword density adalah perbandingan jumlah keyword pharse dengan seluruh kata yang ada dalam page tersebut. Keyword destiny yang paling baik adalah kurang dari 5% lebih dari 2%.

11. Jangan lupakan pentingnya breadcumb

Sama seperti internal link, breadcumb berfungsi untuk memberi akses kepada spider untuk menjelajahi situs kita.

12. Jangan sampai ada brokenlink pada web/blog anda

13. Buat list link penting sebagai akses/gerbang/jalan bagi crawler untuk meng-crawl page tersebut

14. Buat navigasi kategori di header

15. Gunakan permalink yang tepat (banyak di google tutornya)

17. Jangan pernah membuat invisible text dan hidden html

Ingat! Google tidak menyukai invisible text dan hidden html.

18. Setup 301 redirect

Maksudnya adalah mengubah temporary redirect menjadi permanent redirect untuk domain anda. Misalnya www.doodeyerick.com di redirect ke doodeyerick.com atau sebaliknya.

***

Setelah semua standarisasi di atas terpenuhi dan sudah berjalan kira-kira 3 bulan, barulah anda melakukan beberapa hal di bawah ini :

1. Mulailah untuk mencari high quality backlink dan jangan sekali-kali mencari low quality backlink

Ini berguna supaya dalam situs kita tidak terlalu banyak backlink yang tidak berguna yang malah akan menyebabkan situs kita dianggap spam.

2. Mulailah mencari backlink dari article directory, social bookmark, dan rss directory

Anda tetap harus mengingat frekuensi. Jangan sampai berlebihan.

3. Mulailah membuat review untuk blog anda dan tautkan blog anda dalam halaman review

4. Hindari menggunakan blogroll backlink, wide backlink, footer backlink.

5. Lakukan ping secara berkala dan teratur

6. Gunakan no crawler page untuk marketing/promosi blog anda seperti Facebook.

7. Mulai mencari backlink secara berfrekuensi secara natural

8. Tinggalkan spamming

Cukup segitu saja tips membuat blog SEO friendly untuk Google Panda. Dengan menggunakan teknik SEO tersebut di atas, bisa dipastikan blog kita akan mendapatkan perhatian dari Google Panda,

Pasang Meta Tag Seo Valid HTML5 Untuk Blogger 2013

2013-03-29T07:59:00.002-07:00

Jumpa lagi sobat...!!! Pada kesempatan kali ini saya akan membahas sedikit mengenai Meta Tag SEO (Search Engine Optimization) Friendly dan jujur saya sendiri belum terlalu paham tentang meta tag ini, tapi tidak ada salahnya jika kita bersama-sama membahas tentang Meta tag yang SEO Friendly ini.

Meta tag yang SEO Friendly pada blog mempunyai dampak yang sangat besar bagi sebuah blog. Contoh kecilnya yakni pada postingan-postingan yang sudah sobat publikasikan, apakah sudah terindex oleh search engine atau belum? Nah, Meta tag yang SEO Friendly inilah yang nantinya akan membantu sehingga postingan-postingan yang sudah di publikasikan akan terindex oleh search engine.

Well, untuk pemasangan Meta tag yang SEO Friendly pada Template ini, yuk simak aja penjelasannya berikut ini :

Login ke blogger
Pilih Rancangan » Edit HTML
Cari <b:include data='blog' name='all-head-content'/> (Gunakan Ctrl+F). Jika sudah ketemu, hapus semua kode di bawahnya sampai <b:skin><![CDATA[ dan masukkan meta tag di bawah ini :

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | Your Blog Description</title>
</b:if>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Your Blog Description here!' name='description'/>
<meta content='Your Keywords here!' name='keywords'/>
<meta content='Author Name here!' name='Author'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='1 days' name='revisit-after'/>
<meta content='Indonesia' name='geo.placename'/>
</b:if>

Keterangan :

'Your Blog Description here!' = Ganti dengan deskripsi singkat mengenai blog/web anda
'Your Keywords here!' = Ganti dengan keywords anda
'Author Name here!' = Silahkan ganti dengan nama anda

Simpan template dan rasakan perbedaannya.

Oh ya, buat para Master SEO, mohon dikoreksi jika Meta Tag SEO Friendly di atas jika masih terdapat kekeliruan. Sebelum dan sesudahnya, saya ucapkan terima kasih...!!!

Cara Mendapatkan Backlink Unlimited Terbaru 2013

2013-03-29T07:48:00.001-07:00

Backlink atau Linkback merupakan salah satu teknik sehingga blog bisa bersaing di SERP dan teknik ini juga merupakan salah satu langkah dalam Pengoptimalan SEO Friendly. Backlink yang saya maksudkan disini adalah Backlink Yang Berkualitas, mempunyai pagerank yang tinggi serta blog dofollow.

Mencari blog ataupun website yang dofollow tidaklah rumit dan pada kesempatan kali ini saya akan menjelaskan bagaimana cara menemukan blog dofollow dan bagaimana cara mendapatkan backlink gratis. Nah berikut ini merupakan penjelasan singkat mengenai 2 hal tersebut :

1. Cara Menemukan Blog / Web Dofollow dan Mendapatkan Baclink.

Website social bookmarking yang sudah terkenal seperti facebook, twitter, google plus, pinterest dan website lainnya adalah situs yang bisa dijadikan sarana untuk mendapakan baclink secara gratis. Namun diluar daripada itu, tentu anda juga bisa mendapatkan backlink secara gratis dan unlimited (tanpa batas) dari blog/web lain. Nah, untuk menemukan web/blog yang dofollow tersebut, anda hanya perlu melakukan hal di bawah ini.

Pertama, buka search engine seperti google.com, bing.com, yahoo.com dan mesin pencari lainnya, kemudian masukkan keyword seperti dibawah ini :

inurl: Keyword sobat disini“This site uses KeywordLuv”
atau
inurl: Keyword sobat disini“Enable CommentLuv”

Keterangan :

Ganti text yang berwarna biru dengan keyword yang anda inginkan, atau anda juga bisa menggunakan keyword di bawah ini untuk menemukan blog yang dofollow.

Contoh »

inurl: Tutorial Blogger“This site uses KeywordLuv”
atau
inurl: Tutorial Blogger“Enable CommentLuv”

Demo By Image »

Pada halaman pertama mesin pencari, biasanya blog-blog tersebut adalah blog yang dofollow. Buka salah satu (bisa juga semuanya) kemudian berkomentarlah sewajarnya, tapi ingat jangan lupa memasukkan Link Hidup kedalam kolom komentar karena link hidup tersebut yang nantinya akan menjadi Backlink yang menuju langsung ke blog anda. Namun jika anda belum atau tidak tahu bagaimana cara meninggalkan Link Hidup pada kolom komentar, berikut penjelasannya.

2. Cara Memasukkan Link Hidup (Aktif) Kedalam Kolom Komentar

Sebelum saya lanjutkan, terlebih dahulu saya ingin menjelaskan apa itu link hidup. Link Hidup Web menurut saya pribadi adalah sebuah link yang bisa diklik langsung yang mengarah ke halaman web lain dan tanpa harus melakukan pencopyan dan mempastenya pada address bar.

Contoh Link Hidup (Link Aktif)

http://www.rio-vizer4rt.blogspot.com

Contoh Link Tidak Hidup (Tidak Aktif)

http://www.rio-vizer4rt.blogspot.com

Sekarang, untuk penjelasan bagaimana cara memasukkan link aktif kedalam kolom komentar, saya akan bagi menjadi 3 cara dan berikut caranya :

1. Memasukkan link dengan menggunak attribut <a href="...">
Pada saat anda membuat komentar dan ingin memasukkan link hidup, anda hanya perlu memasukkan attribut <a href="..."> kedalamnya. Perhatikan contoh komentar di bawah ini :

"Nice post, jangan lupa berkunjung balik ke Lost-Sector"

Nah, kata Lost-Sector akan saya berikan link aktif, dan untuk menerapkannya, cukup dengan menjepit kata yang akan diberi link aktif dengan cara menambahkan attribut <a href="..."> dan diakhiri dengan attribut penutup </a>.

"Nice post, jangan lupa berkunjung balik ke <a href="www.rio-vizer4rt.blogspot.com">BLOGSPOT-GUIDES</a>"

2. Berkomentar Dengan Menggunakan Akun OpenID

Jika anda tidak ingin repot menambahkan/memasukkan link aktif dengan menambahkan attribut <a href="..."> kedalam kolom komentar, maka berkomentarlah dengan menggunakan akun OpenID kemudian pada form "URL OpenID" masukkan URL blog anda kemudian klik lanjutkan. Lihat gambar untuk lebih jelasnya.

3. Berkomentar Dengan Menggunakan Akun Name/URL
Dua cara diatas bahkan yang ketiga ini semuanya mempunyai tujuan yang sama yakni sama-sama ingin mendapatkan backlink, namun untuk hal kenyamanan pengunjung terlebih bagi admin, maka saya sarankan lebih baik anda berkomentar dengan menggunakan akun name/url karena hal ini untuk menghindari penghapusan komentar oleh admin karena tidak semua admin menyukai pengunjungnya lebih cenderung hanya ingin mendapatkan baclink semata. Namun jika blog tersebut tidak menyediakan akun name/url, maka gunakanlah salah satu dari dua cara diatas. Berikut screenshoot berkomentar dengan Akun Name/URL.

Nah, itulah penjelasan singkat mengenai Cara Mendapatkan Backlinks Blogger Secara Gratis dan Tanpa Batas (Unlimited). Jika ada yang ingin menambahkan, bertanya, memberikan masukan, maka anda bisa meninggalkannya pada kolom komentar. Semoga bermanfaat, terima kasih dan Salam Blogger...!!!

Perbanyak Like FansPage Super Cepat

2013-03-29T01:46:00.002-07:00

Cara memperbanyak like pada fan page facebook - Bagaimana memperbanyak like pada fanpage facebook?? Pertanyaan ini yang mungkin sering muncul ketika kita membuat fan page di facebook. Apa enaknya ngeliat fanpage yang para likersnya adalah kita sendiri?? bagaikan rumah tanpa penghuni.. apalagi di pasang di blog?? waduh.. malu - maluin...

Oleh karena itu, kali ini idebagus akan kasih tahu cara untuk memperbanyak like fanpage sobat. Setahu saya ada 2 cara yang menurut saya ampuh untuk menambah like fan page facebook. Yang pertama yang menurut saya paling ampuh dan paling mujarab yaitu melalui jalur promosi. Seperti halnya sebuah produk, halaman facebook kita seharusnya di promosikan, baik pada para pengguna facebook maupun melalui blog kita.

Untuk cara yang ke 2 nya yaitu melalui Youlikehits..
Apa itu youlikehits??
Adalah website yang menawarkan membernya untuk memperoleh 'like' secara gratis ataupun berbayar.

Nggak cuma itu sob! untuk follower di twitter juga bisa... untuk lebih jauhnya, mendingan sobat cepat daftar de.. mumpung gratis.. hehehe

Berikut cara mendaftar di Youlikehits

1. Masuk ke situs Youlikehits

2. Masukkan data yang di minta pada SignUp kemudian Klik sign Up seperti gambar berikut.

3. Seperti gambar di atas, sobat yang berhasil mendaftar bisa langsung log in ke akun youlikehits sobat. Setelah login, sobat akan di minta untuk mengisih kode verifikasi seperti gambar berikut.

4. Buka email masuk pada alamat email yang sobat daftarkan tadi. ( buka pada tab baru )
5. Ambil kode verfikasi pada email yang telah di kirimkan. Lihat gambar

6. Masukkan kode verifikasi dan klik Activate.

Nah sekarang akun sobat sudah jadi, saatnya kita masuk pada intinya..

7. Setelah mengklik activate, sobat akan langsung masuk ke dashboard sobat.

8. Karna trik kali ini yaitu untuk menambah like pada fan page facebook, sobat klik facebook kemudian klik pada add an account

9. Masukan profil facebook sobat dan juga halaman fanpage sobat kemudian klik refresh seperti gambar berikut.

10. Pilih payout 9 seperti gambar berikut.

11. Kemudian klik Ok.

12. Like satu per satu fanpage seperti tampilan berikut.

13. Klik pada tulisan I've Liked This page untuk memberitahukan bahwa sobat telah ngelike fanpage tersebut.

Tambahan:
Sobat akan mendapatkan 50 point per hari dengan mengklik tulisan Claim 50 Free Point Daily.

Sekian dan Semoga Membantu dan tolong like fan page ane ya!!! entar ane balas ngelike!!!

Trik Membangung Link Alami 2013 Untuk SEO

2013-03-28T21:53:00.000-07:00

Di 2012 kita udah ngeliat gimana dahsyatnya penguinnya om Google beraksi dalam membasmi link-link yang gak berkualitas gan. Bukan cuma situs ato blog yang ecek-ecek tapi juga yang TOP pun di babat habis. Ambil sisi positifnya aja, dengan adanya Google penguin maka persaingan para webmaster buat ada di posisi puncak pencarian Google semakin transparan. Siapa yang kreatif dia yang menang ya kan gan.

Di 2013 ini banyak para pakar SEO, bloger dan webmaster cari cara terbaik membangun link alami buat ningkatin rangking tentunya. Mungkin loe juga pasti punya cara sendiri buat membangun link gan. Sekarang gak ada lagi yang namanya cari backlink dari komen-komen spam di blog lain ato forum. Tukeran link sama blog yang gak relevan apalagi blog yang gak berkualitas.

Pada postingan kali ini, gw pengen share dari apa yang gw tau dan pelajari tentang cara membangun link alami gan. Silahkan lanjut baca kalo loe tertarik.

Cara Membangun Link Alami Di 2013 Untuk SEO

1. Sosial Media

Gunakan sosial media untuk mencari teman yang kira-kira bakal jadi pengunjung blog kalian gan. Pertama dari temen-temen deket kalian dulu, lalu orang-orang yang tertarik sama isi blogkalian, dan orang-orang yang jadi follower blog atau situs pesaing kalian.

Kalau sudah berteman tinggal sering-sering aja berkomunikasi dan share postingan-postingan kalian yang menarik ke mereka. Membangun persahabatan dulu dan saya yakin hasilnya kalian akan bisa membangun link yang alami dari sosial media.

2. Penulis Tamu

Mungkin cara yang satu ini gak begitu populer buat pemula untuk membangun link. Ngapain nulis di blog orang lain kan kita udah punya blog sendiri pasti mikir gitu. Atau mungkin juga ngapaen ngurusin blog orang lain kan enak dia kita yang nulisin sedangkan ngurusin blog sendiri aja repot bener gak gan?.

Bener banget gan, jadi seorang penulis tamu itu gak gampang apalagi kalo kita aktif nulis di blog sendiri. Tapi manfaat yang kita dapet banyak di antaranya kalian bakal punya banyak temen, kalian jadi terkenal karena tampang sama nama kalian ada di blog orang lain, lalu kita juga bisa dapet backlink gratis dan juga bakal bisa menambah pengunjung blog kita gan.

Untuk jadi penulis tamu gw bakal kasi tipsnya ( buat pemula ) gan :

Cari blog yang relevan sama blog kalian tapi jangan sama persis. Kalian cari tau isi blognya, amati apa yang ada di blog tersebut kurang lebih setengah jamlah gan.

Buat pemula cari blog yang biasa aja tapi berkulitas dan bukan spam gan. Jangan langsung blog yang ngetop dan PRnya tinggi karena kalian butuh proses belajar buat jadi seorang penulis tamu. Menulislah di blog lain 1 bulan sekali dulu, semakin lama kalian bisa tingkatin intensitasnya gan.

Sering-sering komen di blog tersebut "tanpa ninggalin link", disini biar akrab sama yang punya blog. Jadi pas kalian mau nawarin diri jadi penulis tamu lebih gampang gan.

Jangan pernah copas postingan asli dari blog lkalian sendiri, karena bakal bikin duplikat konten dan bisa ngerusak rangking blog. Selain itu kalian juga bakal di anggep gak punya kapasitas.

Buat postingan yang berisi link ke postingan lain di blog tersebut gan.

Selalu pake image di postingan kalian, dan jangan lupa juga di optimasi. Dari alt tagnya sampe ukurannya. Kalo loe ngambil gambar dari situs laen inget di isi sumbernya.

Buat postingan yang berkualitas dan inget juga SEOnya jangan asal2an, kalo postingan loe ngetop kan ngefek juga ke blog loe.

Ikuti aturan main yang mereka pake buat penulis tamu.

Kalau postingan kalian sudah di publikasikan, pertamakalian share ke sosial media jadi teman-teman atau pengunjung blog kalian bisa tau.

Selalu di cek postingan kalian, kalau ada komen disana usahakan kalian ikutan balas komennya. Biar pengunjung blog tersebut kenal sama kalian dan bukan gak mungkin mereka bakal follow blog kalian di sosial media.

Yang terakhir isi link ke homepage blog kalian di biodata penulis. Kalau punya lebih dari 1 blog isi aja lebih gan kalo dikasi sama yang punya blog. Sama isi link sosial media lkalian juga gan. Misal temukan saya di FB,Twitter,Google plus atau apalah terserah kalian.

3. Broken Links

Mungkin aneh ya buat kalian yang pemula gan, masak membangun link dengan broken link. Biasanya kita menghindari broken link ya kan gan. Lanjut aja baca nanti kalian pasti ngerti maksudnya gan. Dapet backlink dari broken link ini udah banyak banget dipake sama webmaster handal karena cara ini cepat, efektif dan alami gan.

Kayak gak punya kerjaan aja nyariin broken link ya gan. Saya jelasin sedikit gan apa yang dimaksud sama membangun link dengan broken link. Intinya kalian cari broken link di blog orang lain dan nyuruh yang punya blog ganti link tersebut sama link blog kalian gan.

Sebelum itu kalian butuh alat dan saya kasi cara yang gampang. Install add on link checker di browser firefox kalo pake chrome install check my links gan. Terus gimana cara nyari broken linknya? Gini gan saya kasi tau stepnya :

Pertama kalian cari blog yang relevan sama kalian, usahain cari blog yang ada PRnya, boleh juga yang PR 0 tapi rangking Alexanya lumayan. Pastiin bukan blog spam dan tidak punya outband link yang terlalu banyak, misal lebih dari 100 link. Desain blognya juga diperhatiin sama apa blog tersebut masih aktif gan.

Cek blog tersebut ada blog rollnya ato link sahabatnya kagak, atau biar gampang kalian langsung cari dari pencarian Google aja dengan cara ketik kayak gini intitle:kata kunci inurl:tukeran link. Tinggal diganti aja kata kuncinya gan, ntar bakal keluar hasil pencariannya blog yang punya page buat tukeran link gan dan sesuai sama kata kunci yang kalian ketik. Inget kata kunci harus sesuai sama isi blog kalian.

Kalau udah ketemu tinggal dicek aja PRnya sama broken linknya. Kalau tidak mau ribet pake add on yang tadi udah kalian install gan.

Kalau broken linknya lebih dari 10 mendingkalian tinggalin blog itu dan cari blog yang lain ampe kalian menemukan blog yang broken linknya dibawah 10. Terus kalian catat alamat broken linknya dan dites juga apa emang bener broken gan.

Langkah selanjutnya,kalian cari tau siapa yang punya blog itu. Kan biasanya ada profilnya atau tidak halaman kontaknya. Terus kalian kirim email ke webmasternya atau yang punya blog. Saya kasi contoh, tips dan triknya gan.

Hi ( Nama Pemilik Blognya )

Perkenalkan saya ( Nama Kalian )

Saya sangat senang membaca blog anda karena artikel-artikelnya sangat menarik.

Saya cuma mau menginformasikan kalau saya menemukan link yang rusak di blog anda. Ini tentu tidak baik buat blog dan pengunjung anda.

Kalau anda mau memperbaiki link tersebut saya cuma memberi saran buat menambahkan link dibawah ini juga karena sangat sesuai dengan isi blog anda.

1. ALAMAT WEBSITE YANG RELEVAN DAN PUNYA PR TINGGI. ( di isi deskripsinya )

2. INI ISI ALAMAT BLOG KALIAN GAN ( di isi deskripsinya )

Semoga email ini bisa membantu blog anda.

Saya tunggu balasan emailnya.

Terima Kasih


( Nama Kalian )

Tipsnya usahain kirim email sekali aja, terus buat alamat urlnya jangan pake alamat yang full atau hyperlink ntar email kalian bisa-bisa masuk ke spam pake teks biasa aja. Triknya kalian harus pake nama cewek karena kebanyakan webmaster atau blogger itu cowok bener kagak gan? Jadi dengan kalian pake nama cewek pasti bakal lebih tinggi tingkat keberhasilannya.

Sekarang kalian tinggal nunggu aja balesan emailnya gan dan berharap yang punya blog masang link blog kalian. Kalau gak berhasil jangan putus asa coba lagi gan di blog yang lainnya.

Tambahan aja gan, kalau blog atau situs kalian menawarkan produk atau jasa. Loe bisa membangun link dengan cara ngadain kontes yang berhadiah. Misal kontes buat artikel review produk lkalian dan isi syaratnya harus ada link ke blog kalian gan.

Sekian dulu yang bisa saya share semoga bermanfaat gan, kalo punya tips tentang SEO silahkan di share jangan malu-malu. Saya cuma mau ngingetin aja jangan lupa berkomentar gan.

Cara Menulis Artikel Agar SEO Friendly

2013-03-28T07:39:00.002-07:00

Cara Menulis Artikel Agar SEO Friendly -
Hal ini sering terjadi masalah bagi para blogger dan menulis artikel.Terkadang kita belum tau bagaimana cara Menulis Artikel Yang Baik dan Benar terutama dalam hal SEO , apalagi kalau blogger yang masih pemula tentunya masih sangat minim dengan hal ini.Ada banyak hal yang perlu diperhatikan dalam menulis artikel dan tentunya agar artikel yang kita tulis menjadi Seo Friendly . Tentunya sebelum menulis artikel pastikan sudah meriset kata kunci (keyword) yang akan kita gunakan untuk menulis sebuah artikel.
Setelah itu dalam menulis artikel , pastikan anda menerapkan Trik Trik berikut agar artikel yang kita tulis menjadi Seo Friendly.

Oke langsung saja :)

MEMILIH JUDUL ARTIKEL YANG TEPAT

Untuk trik yang pertama pastikan anda bisa memilih judul artikel yang tepat dan bisa menarik pengunjung untuk membaca artikel anda. Pastinya judul ini mengandung kata kunci yang terpenting dalam artikel.
Panjang judul artikel sebaiknya 5-6 kata saja . Kalau anda mau buat suatu judul yang heboh sebaiknya jangan mengorbankan kata kunci di dalamnya.

MEMILIH URL ARTIKEL

Jika judul artikel yang dibuat terlalu panjang , maka jadi tidak dimuat semua dalam URL artikel.
Tetapi melalu fitur permalink blogger anda bisa merubah URL dengan cara mengetikkannya bagian terakhir URL saja . Misalkan jika URL yang saya inginkan adalah http://rio-vizer4rt.blogspot.com/2013/29/trik-menulis-artikel-agar-seo-friendly.html maka anda cukup menuliskannya menjadi seperti ini http://rio-vizer4rt.blogspot.com/2013/29/trik-menulis-artikel-seo.html.

PASTIKAN ANDA MENGGUNAKAN LABEL DI SETIAP HALAMAN

Menggunakan label pada artikel memang sangat perlu . Label yang dipilih hendaknya mendeskrisikan artikel yang anda buat. Misalnya saja artikel yang kita buat berjudul "Membuat Widget Keren Untuk Blog" maka kita bisa memilih label "Widget" . Untuk memasang label pada artikel anda tinggal klik menu label dibagian kanan kolom untuk mengetik artikel.

PASTIKAN ANDA MEMASANG META DESKRIPSI

Meta Deskripsi sangat berpengaruh pada hasil pencarian Google karena meta deskripsi ini berfungsi menampilkan deskripsi blog anda pada snippet pada hasil pencarian Google. Meta Deskripsi tidak usah terlalu panjang , 150 karakter itu sudah cukup.

MEMBUAT ARTIKEL YANG TEROPTIMASI

Sebaiknya anda mengikuti peraturan di bawah ini :

Panjang artikel mininam 500 kata , Agar memudahkan gunakan Tool Penghitung Jumlah Kata
Setiap kata kunci setidaknya diulangi sebanyak 3X dalam artikel
Kata kunci yang muncul pertama kali harus di Bold atau Italic
Gunakan bahasa yang baku agar kualitas artikel tidak berkurang

MEMASANG ANCHOR TEXT DALAM ARTIKEL

Memasang Anchor Text didalam artikel memang sangat perlu dan ini adalah Trik Seo ONpage . Jika anda ingin memasang link anchor text perhatikan mengikuti aturan sebaga berikut :

Pastikan link terbuka di tab baru
Bedakan link yang keluar dan link untuk anda sendiri , Untuk yang keluar gunakkan rel= 'nofollow". Sedangkan untuk link yang menuju ke halaman artikel anda sendiri tidak perlu nofollow.

PASTIKAN ARTIKEL YANG ANDA BUAT BISA MENYELESAIKAN PERMASALAHAN ORANG LAIN

Tujuan tidak lain hanyalah untuk kepuasaan pembaca. Dan tidak menutup kemungkinan dia akan kembali lagi ke BLog anda nantinya . Ini sangat perlu sekali bagi reputasi Blog.

Itulah tutorial sederhana yang saya buat tentang Cara Menulis Artikel Agar Seo Friendly

SEMOGA BERMANFAAT ^_^

Cara Mudah Cek Tampilan Resposive Website Dengan Mozilla Firefox

2013-03-27T03:05:00.000-07:00

Cara cek tampilan website responsive dengan mozilla firefox, itulah yang akan saya bahas sekarang. Mungkin sebagian ada yang sudah tahu tentang ini, tapi bagi yang belum mengetahuinya boleh dicoba, saya sendiri belum tahu, dan baru mengetahui secara kebetulan ternyata mozilla firefox memiliki fitur merge windows, saya juga tidak tahu apa fungsinya mungkin anda bisa baca disini http://lifehacker.com/235553/quick-firefox-tip-ctrl+shift+m-to-merge-windows, saya menemukan cara ini secara tidak sengaja, ketika saya ingin menekan tombol Ctrl+Alt+M yang fungsinya untuk membuka banyak akun social secara bersamaan pada satau webrwser yaitu New Identity Profil, tapi saya malah salah tekan, saya menekan Ctrl+Shift+M, dan ternyata tampilan biasa saja hanya ada menu Resolusi dan Rotate, berhubung desain blog saya sudah responsive maka langsung tampilan blog saya berubah menjadi responsive setelah menakan tombol Ctrl+Shift+M tadi.. Screenshot seperti dibawah ini..

Dsini memiliki berbagai macam resolusi dari yang kecil sampe yang besar dan kita juga bisa menentukan sendiri resolusinya, tinggal kita tarik saja pinggiranya ataw pojok kanan bawah itu. Rotate fungsinya untuk membalik resolusi, misalnya 320x480 ketika di klik Rotate maka akan berubak menjadi 480x320, yakni lebar 480 pixel dan tinggi 320 pixel.
Cara mengecek tampilan website responsive sangat mudah,,

Harus menggunakan mozilla firefox versi 15 atau yang lebih tinggi
Masukkan alamat blog/website anda pada addresss bar di mozilla firefox
Jika sudah, tekan tombol Ctrl+Shift+M secara bersamaan
Silahkan anda pilih resolusinya terserah anda, dan lihat hasilnya.

Dan sekarang kita tidak perlu repot-repot mengunjungi situs/web yang menyediakan layanan untuk mengecek ke-responsifan sebuah tampilan website, karena dengan mozilla firefox versi 15 keatas kita bisa dengan mudah mengecek tampilan responsive website kita.
Itulah pembahasan mengenai Cara Cek Resposive Website Dengan Mozilla Firefox, Semoga bermanfaat

Cara Mengetahui Harga Website atau Blog

2013-03-24T23:24:00.000-07:00

Pada kesempatan kali ini saya tidak membahas tutorial tentang modifikasi atau widget blog, tapi dilain kesempatan saja itu. Disini saya akan share cara mengetahui berapa harga website atau blog yang kita miliki, caranya mudah hanya mengunjungi sebuah situs dan tinggal memasukan alamat blog atau website yang ingin di cek harganya dan memasukan kode captcha.. Berikut caranya:
1. Klik link berikut http://www.checkwebsiteprice.com
2. Masukkan URL Website atau blog anda ataupun website yang ingin anda cek harganya, kemudian masukkan kode Captcha lalu klik CHECK

3. Maka akan muncul tampilan kurang lebih seperti ini..

Ex: Estimated Worth = $ 7285, Berarti harga situsnya 7285 US dollar.. tinggal dibikin rupiah ajah.
Disini kita juga bisa mengetahui berapa page rank website atau blog yang kita cek tadi, dan juga bisa mengetahui alexa rank website dan masih banyak lagi seperti google indexed pages, yahoo indexed pages, google backlink dll.

Itulah sedikit pembahasan tentang Cara Cek Harga Website atau Blog, semoga bermanfaat..

Thread Comment Stylish Light Clean With CSS

2013-03-22T19:39:00.000-07:00

Thread Comment Stylish Light Clean With CSS, itulah saya beri nama. Thread Comment hasil modifikasi dengan css, seperti yang kita ketahui unutk memperganteng blog banyak di lakukan para blogger, seperti modifikasi tampilan blog, menambah widget yang keren-keren dan yang tidak kalah penting yaitu modifikasi tampilan thread comment sehingga tampilannya lebih balance atau serasi dengan templatenya.. Untuk pemasangan thread comment ini caranya mudah, hanya menambahkan CSS thread comment ini lalu menghapus css thread comment yang lama.
Berikut cara memasang Thread Comment Stylish Light Clean:
1. Login akun Blogger anda
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode berikut ini diatas kode ]]></b:skin>

#comments h4{margin:0;font-size:150%;margin-bottom:10px}
#comments-block .avatar-image-container.avatar-stock img { border-width:0; padding:1px }
#comments-block .avatar-image-container { height:40px; left:-45px; position:absolute; width:40px }
#comments-block.avatar-comment-indent { margin-left:45px; position:relative }
#comments-block.avatar-comment-indent dd { margin-left:0 }
iframe.avatar-hovercard-iframe { border:0 none; padding:0; width:25em; height:9.4em; margin:.5em }
.comments .comments-content { margin-bottom:16px }
.comments .comment .comment-actions a { background-color:#666; color:#fff; font-family:Segoe UI; font-size:12px; font-weight:bold; letter-spacing:normal; padding:3px 7px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; margin:0 10px 0 -7px }
.comments .continue a:hover,.comments .comment .comment-actions a:hover { background-color:#c2c2c2; text-decoration:none }
.comments .comments-content .comment-thread ol { margin:20px 0 0 -10px; overflow:hidden }
.comments .comments-content .inline-thread { padding:0 }
.comments .comments-content .comment-thread { margin:0 0 0 -15px }
.comments .comments-content .comment-thread:empty { display:none }
.comments .comments-content .comment-replies { margin-left:0; margin-top:0 }
.comments .comments-content .comment,.comments .avatar-image-container { padding:4px }
.comments .comments-content .comment:first-child { padding-top:4px }
.comments .comments-content .comment:last-child { border-bottom:0; padding-bottom:0 }
.comments .comments-content .comment-body { position:relative }
.comments .comments-content .user { font-style:normal; font-weight:bold; font-size:15px; text-transform:capitalize; margin-bottom:-3px }
.comments .comments-content .icon.blog-author { display:inline-block; height:18px; margin:0 0 -4px 6px; width:18px }
.comments .comments-content .datetime { font-size:10px; margin-left:0; line-height:12px; display:block; margin-top:-5px; margin-right:10px }
.comments .comments-content .datetime a { color:#888 }
.comments .comments-content .datetime a:hover { text-decoration:none }
.comments .comments-content .comment-header { position:relative; min-height:37px; line-height:37px; padding-left:45px }
.comments .comments-content .comment-content { border:1px solid #ccc; padding:5px 10px; margin:17px 0 7px -9px; position:relative; background-color:#f7f7f7; color:black; font:normal 16px Calibri,Arial,Sans-Serif; height:auto; -moz-box-shadow:0 0 3px #e0e0e0; -webkit-box-shadow:0 0 3px #e0e0e0; box-shadow:0 0 3px #e0e0e0; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px }
.comments .comments-content .comment-content:before { content:""; width:0; height:0; position:absolute; bottom:100%; left:20px; border-width:10px; border-style:solid; border-color:transparent transparent #f7f7f7 transparent; display:block }
.comments .comments-content .owner-actions { position:absolute; right:0; top:0 }
.comments .comments-replybox { border:none; width:100% }
.comments .comment-replybox-single { margin-left:4px; margin-top:5px }
.comments .comment-replybox-thread { margin:5px 25px }
.comments .comments-content .loadmore a { display:block; padding:10px 16px; text-align:center }
.comments .thread-toggle { cursor:pointer; display:none }
.comments .continue { cursor:pointer; display:inline-block; margin:0 0 0 50px }
.comments .continue a { display:block; font-weight:bold }
.comments .comments-content .loadmore { cursor:pointer; margin-top:3em; max-height:3em }
.comments .comments-content .loadmore.loaded { max-height:0; opacity:0; overflow:hidden }
.comments .thread-chrome.thread-collapsed { display:none }
.comments .thread-toggle .thread-arrow {width:7px;height:7px;padding-right:4px;}
.comments .avatar-image-container { padding-left:0; margin:5px 10px 5px 0; max-height:48px; width:48px }
.comments .avatar-image-container img { border:3px solid #fff; max-width:44px; width:44px; border-radius:30px; display:block; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; box-shadow:0 1px 1px #aaa; -moz-box-shadow:0 1px 1px #aaa; -webkit-box-shadow:0 1px 1px #aaa }
.comments .comment-block { margin-left:0; position:relative }
.comments .comments-content .comment { list-style:none outside none; margin:0 13px 15px 50px }
#comment-editor { background:transparent url('http://4.bp.blogspot.com/-ebNWkRvyAoE/T7qgWXj8XDI/AAAAAAAABSg/dKlSEjXp2hU/s1600/loader.gif') no-repeat 50% 120px; width:100% !important }
.comment-form { width:100%; max-width:100% }

5. Simpan Template
Silahkan anda modifikasi lagi agar sesuai dengan template anda.

Catatan:

Apabila thread comments anda sebelumnya sudah di modifikasi, lebih baik hapus CSS thread comment sebelumnya kemudian ganti dengan yang ini agar tidak terjadi error/acak-acakan pada thread comment.

Itulah pembahasan saya tentang Thread Comment Stylish Light Clean With CSS, semoga bermanfaat untuk anda. Selamat mencoba dan Semoga berhasil..

Mau Lihat Website Anda Berjoget Harlem Shake? Masuk Sini!

2013-03-17T20:01:00.000-07:00

"Hanya untuk sekedar Hiburan". Seperti yang kita ketahui belakangan ini joget harlem shake menjadi tenar kembali setelah sekian lama tidak muncul lagi setelah tahun 1981 yang tidak kalah dengan Gangnam Style. Joget harlem shake ini berawal dari satu orang dari puluhan orang yang berada di suatu tempat tertentu dengan joget ala-ala stress gitu, kemudian lama kelamaan semua orang yang berada diruangan atau tempat tersebut ikut berjoget harlem shake dengan gerakan dan penampilan yang berbeda-beda dan unik. Begitupun pada website atau blog anda, beawal dari satu tulisan atau widget yang bergerak-gerak, kemudian lama-kelamaan widget dan text-text yang lainyapun ikut bergerak alias berjoget yaaaa... walaupun tidak semua widget dan tulisan yang ada pada website itu bergerak, tapi cukup untuk meramaikan dan menghibur kita. Saya mendapatkan ide ini dari salah satu blogger http://javakahuripan.blogspot.com yang artikelnya tentang Efek joget harlem shake di blog, karena menurut saya menarik dan menghibur, maka saya share ulang....
Nah bagi yang anda yang ingin melihat website anda ataupun website orang lain berjoget ala harlem shake, berikut langkahnya..

Buka halaman berikut ini » http://hsmaker.com/
Masukkan alamat blog/website anda ataupun website orang lain, (bisa halaman posting juga)
Kemudian klik tombol "Shake It"
Lihat dan rasakan joget harlem shake dari website tersebut..

Itulah Cara membuat webiste anda bisa berjoget harlem shake, hanya sekedar hiburan saja..
Semoga bermanfaat..

Membuat Sidebar Multi Tab dengan Efek jQuery

2013-03-17T03:47:00.000-07:00

Pada kesempatan kali ini saya akan membahas cara membuat Sidebar Multi tab dengan sedikit efek jQuery, seperti yang kita ketahui kebanyakan blog atau website memiliki banyak widdget pada sidebarnya, bisa mencapai 5 sampai 10 widget pada tiap website, misalnya popular post, label, recent post dll.
Sidebar multi tab ini ada dua macam yaitu dengan cara Edit HTML dan tanpa Edit HTML.
Perbedaanya:

Dengan Edit HTML, widget bawaan blogger seperti popular post, label, archive, follower dll yang asli punya blogger bisa dimasukan kedalam sidebar multi tab ini, karena memanfaatkan fungsi asli penambahan widget yaitu pada layout » tambah gadget.
Dengan Tanpa Edit HTML, widget bawaan dari blogger seperti yang saya sebutkan diatas tidak bisa dimasukan kedalam sidebar multi tab ini, karena hanya bisa menambahkan widget dari luar blogger seperti Fb-like box, twitter-box dll, sehingga membuat loading agak lama.

Dan yang akan kita bahas disini yaitu sidebar multi tab dengan melalui Edit HTML. Fungsi dari sidebar multi tab ini adalah untuk meminimalisir penggunaan ruang pada sidebar sehingga widget terlihat tidak terlalu banyak. Ada cara lain untuk meminimalisir widget pada blog atau website kita, bisa dengan cara membuat sidebar accordion atau sidebar buka tutup. Kode script dan css sidebar multi tab ini saya dapatkan dari template MyExtraNews buatan Mkr-Site yang sudah saya modifikasi sedikit.
Berikut cara pemasangannya:
1. Login akun blogger adan masing-masing
2. Letakkan kode berikut ini dibawah kode ]]></b:skin>

<style>
#sidebar-tab h2{display:none;}
#select-tab{margin:0 auto 10px}
#select-tab,#select-tab li{padding:0;margin:0;list-style:none;overflow:hidden}
#select-tab li{float:left;width:33.3%;text-align:center}
#select-tab a{line-height:32px;display:block;background-color:#666;color:white;font-weight:bold;text-decoration:none}
#select-tab .selected a,#select-tab a:hover{background-color:#860000}
#sidebar-main .widget1{background-color:#f7f7f7;width:100%;float:left;padding:5px}
#sidebar-main{overflow:hidden}
</style>

3. Kemudian letakkan kode berikut ini dibawah kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>

<div id='sidebar-tab'>
<div id='tab'>
<div class='tab-widget-menu clear'>
<ul id='select-tab'>
<li class='tab1'><a href='#tab1'>Popular Post</a></li>
<li class='tab2'><a href='#tab2'>Comments</a></li>
<li class='tab3'><a href='#tab3'>Archive</a></li>
</ul>
</div>
<div id='sidebar-main'>
<div class='widget1' id='tab1'>
<b:section class='sidebar' id='tab1-popular-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab2'>
<b:section class='sidebar' id='tab2-comments-posts' showaddelement='yes'>
</b:section>
</div>
<div class='widget1' id='tab3'>
<b:section class='sidebar' id='tab4-srchive' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$("#select-tab li:first").addClass("selected");$("#sidebar-main > div").hide();$("#sidebar-main > div:first").show();$("#select-tab a").click(function(){$("#select-tab li").removeClass("selected");$(this).parent().addClass("selected");var a=$(this).attr("href");$("#sidebar-main > div:visible").hide();$(a).fadeToggle(1000);return false})});
//]]>
</script>
</div>

4. Silahkan anda sesuaikan sendiri, anda bisa mengganti tulisan Popular Post, Comment dan Archive sesuai dengan widget yang ingin anda tambahkan nanti.
5. Simpan Template

Untuk menambahkan widget kedalamnya caranya seperti biasa, anda tinggal masuk pada menu Tata Letak » Tambah Gadget.

Penting!!

Bagi anda yang sudah memakai sidebar dengan efek accordion dengan cara edit HTML, lebih baik nonaktifkan accordionya jika ingin memakai sidebar multi tab ini, atau bisa juga membuat elemen khusus dengan ID berbeda untuk sidebar multi tab atau accordion, sehingga kedunya bisa berjalan normal.

Itulah cara Membuat Sidebar Multi Tab dengan Efek jQuery, semoga bermanfaat

Html5 Template : Burn Studio

2013-03-14T03:51:00.000-07:00

Author :	1stwebdesigner
Doctype Used :	Html5 and Css3
Categories :	Studio, Design
Layout :	2 Columns
Main Color :
Rating :
Pages :	HomePage
Demo :	[Demo], [Demo Responsive]
Download :	[Download]

Html5 Template : zParalexy

2013-03-13T23:52:00.000-07:00

Author :	Zerotheme
Doctype Used :	Html5 and Css3
Categories :	Business, Corporate, Services
Layout :	2 Columns, 3 Columns, Content-Sidebar
Main Color :
Rating :
Pages :	HomePage, Blog Page, Services Page, About Page, Contact Page
Download :	[Demo Responsive - Download]

Cara Mengganti Avatar OpenID pada Komentar

2013-03-13T03:59:00.000-07:00

Beberapa bulan lalu saya pernah membagikan tips cara mengganti avatar anonim pada komentar blogspot. Di kesempatan ini saya akan membagikan cara untuk mengganti avatar openID pada komentar blog, caranya sama dengan mengganti avatar anonim pada komentar blogspot, yaitu dengan memanfaatkan jQuery untuk merubah avatar openID tersebut. Mungkin anda berminat unutk menggantinya karena bosan atau tidak suka dengan avatar openID bawaan dari blogspot.
Berikut langkah-langkah untuk penerapanya..
1. Login akun blogger anda masing-masing
2. Pada Dashboard pilih Template » Edit HTML
3. Pastikan sudah ada jQuery pada template anda.. biasanya berada dibawah kode </head>

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

Itu merupakan kode jQuery, jika di template anda sudah terdapat kode jQuery tersebut maka tidak usah di pasang lagi atau anda juga bisa mengganti kode yang lama dengan kode yang versi terbarunya.
(tidak boleh terdapat kode jQuery.min lebih dari satu walaupun versinya berbeda-beda)
4. Kemudian letakkan kode berikut ini diatas kode </body>

<script>
// ganti gambar anonim
$("img[src='http://img1.blogblog.com/img/openid36-rounded.png']")
.attr('src', 'http://3.bp.blogspot.com/-mRVyUTLI65s/UQxP4itqdPI/AAAAAAAABeM/07Y7ir5E9DM/s1600/openid_logo.png')
.ssyby('blank')
</script>

Keterangan:
Ganti tulisan yang berwarna HIJAU dengan URL gambar anda atau anda juga bisa mencarinya di google.com.
4. Simpan Template dan liat pada komentar.
Semoga bermanfaat

Cara Cepat Meningkatkan Traffic Website Dengan Alexa Boostup

2013-03-12T10:01:00.000-07:00

Pada postingan kali ini saya akan membahas bagaimana cara meningkatkan traffic website atau blog dengan cepat. Caranya yaitu dengan menggunakan alexaboostup, cara ini tidak hanya meningkatkan traffic saja tetapi juga dapat meningkatkan rank alexa website anda dengan mudah walaupun tidak 100% meningkatkan rank alexa website anda. Selain dengan menggunakan alexaboostup ini, tentu anda juga harus sering-sering membuat atau memposting artikel, blogwalking dan juga memromosikan website dan artikel anda di social seperti google+, twitter, facebook, lintasme dan sebagainya.
Anda bisa mendapatkan traffic dari alexaboostup dengan mudah, anda tinggal mendaftar di alexaboostup atau disini http://www.alexaboostup.com/?refid=10588, kemudian pilih menu Sign UP lalu masukan alamat email anda, masukan password dan confirmasi password lalu klik Sign Up. Setelah selesai mendaftar anda akan masuk dibagian dasboard alexaboostup anda.

Masukan alamat website anda
Centang tulisan Enable Website
Klik Save

Sekarang proses untuk menjalankan alexaboostup auto surf berikut caranya..
Masih dibagian dashboard, Untuk menjalankan alexaboostup, pastikan Anda telah mengaktifkan popup untuk alexaboostup.com, klik tombol "Allow Popup" kemudian allow atau izinkan popup untuk alexaboostup.com pada browser Anda, biasanya ada dipojok kanan atas tampilan website, setelah semua dilakukan klik tombol "Launch Autosurf Booster" disamping tombol dashboard.
Cara Kerja dari alexaboostup:
Pertama anda akan diberi 150 poin. Untuk setiap website yang Anda kunjungi Anda mendapatkan 1 poin. 1 poin = 1 hit ke website Anda. Karena kita telah melakukan semua langkah diatas jadi kita tidak perlu mengklik satu persatu halaman website yang akan kita kunjungi, karena kita telah menggunakan auto surfing dari alexaboostup ini. Ingat poin anda yang tadinya 150 lama-kelamaan bisa berkurang, jadi untuk mendapatkan poin kembali dapat masuk pada menu "Earn Point" lalu sebarluaskan link alexaboostup anda kepada teman-teman anda sehingga mereka mendaftar dan menggunakan alexaboostup ini dan anda pun akan mendapatkan poin.
Demikian artikel ini saya buat semoga dapat bermanfaat untuk anda.

Standard Blue Responsive Template by MDF

2013-03-10T21:11:00.000-07:00

Pada kesempatan kali ini saya akan share template buatan saya yaitu "Standard Blue Responsive Template", meskipun hasilnya kurang bagus karen saya baru belajar membuat template blogspot sendiri. Bagi yang ingin mencoba template buatan saya silahkan di download langsung. Mudah-mudahan bisa diterima.

Responsive blogger Template.
JSON Search Result pada bagian menu.
Modifikasi Homepage dengan daftar isi 2 kolom (script dari DTE yang sudah saya modifikasi)
Sidebar Kanan
Related Post/Artikel terkait thumbnail (script dari moretechtips modifikasi by MKR yang saya modifikasi ulang).
Emoticon pada bagian komentar (script dari MKR).
2 jenis Menu yaitu Normal Menu dan Mobile Menu
Optimasi SEO.
Support modern browser IE9, Mozilla, Chrome
Warna Biru.

Pengaturan

// HomePage

Cari kode berikut ini

<script type='text/javascript'>
//<![CDATA[
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel = "Halaman",
    commentsLabel = "Komentar",
    rmoreText      = "Selengkapnya ►",
    prevText       = "Prev",
    nextText       = "Next",
    siteUrl        = "http://demo-standard-blue.blogspot.com",
    postsperpage   = 8,
    numchars       = 150,
    imgBlank       = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
//]]>
</script>

Silahkan anda sesuaikan sendiri ganti http://demo-standard-blue.blogspot.com dengan alamat blog anda.