Rabu, 30 September 2009

Menghilangkan Angka Pada Archive Blog/Daftar Arsip Postingan


Cara Menghilangkan Angka Pada Archive Blog Atau Daftar Postingan.Ketemu dengan masalah angka pada blog lagi,hehe :D.Setelah beberapa waktu lalu saya sempat memposting tentang bagaimana cara menghilangkan angka pada label blog,kali ini kita akan menghilangkan/menghapus angka pada archive blog.

Emang ada angka ya di belakang archive blog?
Jika archive/arsip blog atau daftar postingan anda dirubah dalam bentuk Daftar Flat,maka hasilnya nanti akan seperti gambar di bawah ini,dibelakangnya ada nomernya seperti halnya label khan?



Menghilangkan/Menghapus Angka Di Belakang Arsip Blog.


Nah kali ini kita mo ngilangin angka tersebut sob.
Ok! langsung ajha ya,ntar pada kabur lagi,jadi berkurang dech temenku,aaaalah!koq malah curhat se??

Langkah Menghilangkan Angka Pada Arsip Postingan Blog



Pertama seperti biasa,pergi ke Dashboard blogspot anda,lalu pilih Tata Letak,kemudian pilih Tab Edit HTML.
Jangan lupa contreng tulisan Expand Widget Templates.
Lalu cari kode berikut:

<li class='archivedate'>

Tapi pastikan terlebih dahulu,anda sudah merubah arsip blog anda dalam bentuk daftar flat.

Jika sudah ketemu,cari disampingnya kode (<data:i.post-count/>),gimana sudah ketemu?,tinggal hapus kode (<data:i.post-count/>) tersebut.

Koq ada dua kode (<data:i.post-count/>)?
Hapuslah kode yang paling atas,lihat gambarnya ajha dech biar lebih jelas.


Hapus Kode Angka Di Belakang Arip Atau Archive Postingan Blog.


Setelah itu Simpan dan lihat hasilnya! Semoga bermanfaat ya :D

Baca Juga Yang Ini..

Rabu, 23 September 2009

Membuat Efek List Menjorok di Blog

Apakah anda sudah pernah melihat sebuah list yang menjorok. List ini akan menjorok ke dalam apabila cursor mouse berada diatas posisi list tersebut. Kita bisa membuat list tersebut didalam postingan dengan efek menjorok. Oke mungkin kalian sudah penasaran apa itu list yang menjorok. Blog Trik dan Tips akan memberikan trik ini. Berikut ini adalah langkah untuk membuatnya:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Cari kode ini: </b:skin>
4. Paste kode dibawah ini setelah kode </b:skin>
<script type='text/javascript'>
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + 5).toString() + "px";
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + "px";
}
</script>
Keterangan:
- Sobat dapat mengatur seberapa jauh list tersebut menjorok ke dalam dengan mengubah angka kode berwarna merah

5. Untuk membuat list tersebut maka jangan lupa untuk memasang tag <li> seperti dibawah ini pada tulisan yang ingin dibuat efek tersebut
<li onmouseover='lm_toRight(this)' onmouseout='lm_restore(this)'>
Selamat mencoba semoga berhasil!!!

Menghilangkan Judul Gadjet pada Blog

Ada beberapa template bawaan blogger atau template modifikasi yang mana apabila kita tidak menulis judul gadjet lalu menyimpan gadjat tersebut, maka akan mengeluarkan pesan "harap perbaiki kesalahan pada form ini". Hal ini menunjukan bahwa sobat tidak boleh menyimpan gadjet tersebut dalam keadaan tanpa judul. Padahal jika kita memasang script animasi, dll, judul gadjet tidak perlu ditampilkan karena akan mengganggu penampilan blog anda. Untuk itu sobat perlu melakukan beberapa perubahan pada template. Ingin tau caranya, ikuti langkah dibawah ini:

Cara 1.
1. Masuk ke Rancangan -- Edit HTML
2. Carilah ID gadjet yang ingin dihapus contohnya: HTML1, HTML2, HTML atau Menu1, Menu2, dll. Jika sudah kopi ID gadjet yang ingin dihapus.
3. Tambahkan kode dibawah ini sebelum kode ]]></b:skin>, Untuk kode dibawah ini jangan lupa untuk menyisipkan ID gadjet yang telah dikopi
#HTML1.title, #HTML2.title, #HTML3.title {
display:none
}
4. Simpan template sobat

Cara 2.
1. Masuk ke Rancangan -- Edit HTML
2. Centang Expand Widget Template
3. Carilah kode seperti dibawah ini:
<!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if>
4. Ubah kode diatas sehingga terlihat seperti dibawah ini:
<h2 class='title'><data:title/></h2> </b:if>
5. Simpan template sobat

Cara 3.
1. Masuk ke Rancangan -- Elemen Laman
2. Tambahkan gadjet lalu pilih HTML/Javascript
3. Masukkan judul gadjet dengan kode berikut: <h2></h2>
4. Cobalah tulis isi gadjet dibawahnya
5. Terakhir simpan gadjet sobat

Sobat dapat menerapkan salah satu dari 3 cara diatas untuk menghilangkan tulisan error "harap perbaiki kesalahan pada form ini". Sekian dari trik saya semoga bermanfaat.

Selasa, 22 September 2009

Cara Memasang HTML Encoder di Langsung di Blogspot

Jika sobat menulis artikel mengenai tutorial bloging, maka sobat akan sering menggunakan fasilitas HTML encoder. Selama ini Blog Trik dan Tips menggunakan HTML Encoder yang dibuat sendiri, kalau sobat ingin tau caranya bisa dilihat DISINI.

Tapi kini ada cara lain untuk memudahkan kita menggunakan fasilitas HTML encoder langsung dari situs Blogger-Blogspot. Tentunya hal ini akan memudahkan sobat lebih cepat dan mudah untuk membuat posting jika berurusan dengan kode-kode HTML. Cara memasangnya pada blogspot cukup mudah saja, silahkan dicoba jika tertarik untuk memasangnya. Berikut langkah memasangnya:

1. Download Greasemonkey 0.8.20090123.1 pada situs https://addons.mozilla.org/en-US/firefox/addon/748
2. Instal dan restart browser anda kembali
3. Kemudian install JavaScript http://userscripts.org/scripts/source/42696.user.js

4. Coba lihat di menu posting, pasti akan muncul tombol "HTML Encode Selection".
5. Untuk memparse kode HTML, sobat login ke blogger kemudian buatlah posting baru.
6. Pilihlah tab Edit HTML di samping tab Tulis
7. Untuk memparse kode HTML, maka anda hanya menghighlight kode HTML yang ingin diparse dan klik tombol HTML ENCODE SELECTION


Kode-kode tersebut kemudian akan diparse tanpa sobat menunggu proses loading. Selamat mencoba dan good luck!!!

Senin, 21 September 2009

Cara Membuat Headline News Keren pada Blog

Blog Trik dan Tips akan membahas salah satu trik yaitu bagaimana cara membuat headline news. Pasti yang udah sering dengarin berita di televisi udah tau apa itu headline news. Tapi headline news di tv beda dong ama yang dibuat di blog. Sesuai dengan namanya headline news ini memuat judul-judul posting yang sobat terbitkan. Sobat dapat memasang headline news diatas atau dibawah blog. Headline news akan berhenti bergerak apabila cursor mouse anda berada diatas link judul posting. Oke langsung aja kita membuatnya:

1. Login ke blogger
2. Klik Rancangan -- Elemen Laman
3. Tambahkan gadjet anda dan pilih HTML/Javascript
4. Kopi kode berikut ini dan paste pada gadjet sobat
<script type="text/javascript">
var hn_url_blog="http://jurus2ngeblog.blogspot.com";
var hn_jumlah_post= 15;
var hn_warna_latar="#CCFEBF";
var hn_warna_garis="#FEF9BF";
var hn_posisi="top";
var hn_tampilkan_judul=true;
var hn_backlink= true;
</script>
<script src="http://jurus2ngeblog-blogspot.googlecode.com/files/headline_news_marquee.js"></script>
Keterangan:
var hn_url_blog = URL blog
var hn_jumlah_post = jumlah judul artikel posting yang ditampilkan
var hn_warna_latar = warna latar belakang headline news
var hn_warna_garis = garis border headline news
var hn_posisi = posisi headline news
var hn_backlink = bila ingin backlink ditampilkan

5. Ganti url (kode berwarna biru) dengan url blog sobat
6. Simpan gadjet sobat!!

Cara Membuat Breadcrumb Navigasi di Blog

Breadcrumbs adalah sebuah petunjuk atau navigasi yang menginformasikan keberadaan posisi postingan yang aktif. Breadcrumb biasanya membentuk posisi horizontal yang terletak dibawah judul posting. Breadcrumb dapat berupa susunan link yang menghubungkan sebuah posting sesuai dengan beberapa kategori dalam posting tersebut. Breadcrumbs juga membantu pengunjung untuk menelusuri jalur yang telah dilaluinya sampai berada di posisi saat ini sehingga penggunjung dengan mudah dapat kembali ke halaman sebelumnya. Pada kesempatan ini saya akan memberikan trik kepada sobat blogger cara membuat breadcrumb pada blog. Berikut adalah caranya:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand Widget Template
4. Letakan kode dibawah ini sebelum kode <b:includable id='main' var='top'>
<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumb by www.jurus2ngeblog.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrumb -->
</b:includable>
5. Cari kode ini atau sejenisnya: <b:if cond=’data:post.dateHeader’>
6. Letakan kode dibawah ini sebelum kode pada langkah 5.
<b:include data='post' name='breadcrumbs'/>
7. Tambahkan kode dibawah ini diatas kode ]]></b:skin>
.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}
9. Simpan template sobat dan lihat hasilnya

Cara Membuat Sexy Bookmark di Blog

Bookmark kini sekarang menjadi suatu trend untuk mempromosikan blog dan meningkatkan SEO. Tidak dipungkiri lagi jika banyak blog yang menempatkan sosial bookmark seperti facebook, twitter, digg dan lain sebagainya. Bookmark ternyata bisa ditampilkan lebih sexy....tapi seperti apa ya? Seperti gambar dibawah ini bookmark yang akan kita buat. Dari pada banyak omong mending langsung kita praktekin saja.

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand widget template (jangan lupa untuk backup template blog anda)
4. Carilah kode ini: ]]></b:skin>
5. Kopi kode dibawah ini dan letakan kodenya diatas kode ]]></b:skin>

div.sexy-bookmarks { height:54px; background:url(http://img709.imageshack.us/img709/57/sharing.png) no-repeat left bottom;position:relative; width:540px }

div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://img709.imageshack.us/img709/57/sharing.png) no-repeat right bottom; position:absolute; right:-17px }

div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }

div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important }

div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(http://img406.imageshack.us/img406/9198/sexyy.png) no-repeat !important }

.sexy-furl { background-position:-300px top !important }
.sexy-furl:hover { background-position:-300px bottom !important }
.sexy-digg { background-position:-500px top !important }
.sexy-digg:hover { background-position:-500px bottom !important }
.sexy-reddit { background-position:-100px top !important }
.sexy-reddit:hover { background-position:-100px bottom !important }
.sexy-stumble { background-position:-50px top !important }
.sexy-stumble:hover { background-position:-50px bottom !important }
.sexy-delicious { background-position:left top !important }
.sexy-delicious:hover { background-position:left bottom !important }
.sexy-yahoo { background-position:-650px top !important }
.sexy-yahoo:hover { background-position:-650px bottom !important }
.sexy-blinklist { background-position:-600px top !important }
.sexy-blinklist:hover { background-position:-600px bottom !important }
.sexy-technorati { background-position:-700px top !important }
.sexy-technorati:hover { background-position:-700px bottom !important }
.sexy-myspace { background-position:-200px top !important }
.sexy-myspace:hover { background-position:-200px bottom !important }
.sexy-twitter { background-position:-350px top !important }
.sexy-twitter:hover { background-position:-350px bottom !important }
.sexy-facebook { background-position:-450px top !important }
.sexy-facebook:hover { background-position:-450px bottom !important }
.sexy-mixx { background-position:-250px top !important }
.sexy-mixx:hover { background-position:-250px bottom !important }
.sexy-script-style { background-position:-400px top !important }
.sexy-script-style:hover { background-position:-400px bottom !important }
.sexy-designfloat { background-position:-550px top !important }
.sexy-designfloat:hover { background-position:-550px bottom !important }
.sexy-syndicate { background-position:-150px top !important }
.sexy-syndicate:hover { background-position:-150px bottom !important }
.sexy-email { background-position:-753px top !important }
.sexy-email:hover { background-position:-753px bottom !important }

6. Paste kode ini dibawah kode
<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sexy-bookmarks'>

<ul class='socials'>

<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds.feedburner.com/jurus2ngeblog' title='Subscribe to RSS'/></li>

</ul>

<span class='sexy-rightside'/></div>
</b:if>

Keterangan:
- Ganti id feedburner (kode berwarna biru) dengan id feedburner milik sobat

7. Simpan template anda dan lihat hasilnya.

Membuat Slide Iklan atau Slide Foto pada Blog

Pengen punya slide iklan atau slide foto gallery? Anda dapat menampilkan beberapa jenis iklan dalam bentuk slide yang akan bergerak. Iklan akan ditampilkan bergantian dan akan berhenti ketika cursor mouse berada tepat diatas iklan tersebut. Trik ini sedikit rumit buat blogger yang masih newbie. Berikut ini saya akan berikan langkah-langkah cara membuat slide iklan tersebut:

1. Login ke blogger
2. Masuk ke Rancangn -- Edit HTML
3. Jangan lupa untuk memback up template sobat
4. Centang Expand Widget Template
5. Cari kode ini ]]></b:skin>
6. Letakan kode dibawah ini diatas kode ]]></b:skin>
.carousel{
float:left;
margin: 0;
padding:0px;
}

.carousel .widget {
width: 720px;
background:#c4d5ec;
margin: 0;
padding:0;
}

.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 765px;
height: 160px;
}

.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 5px 20px 5px 0px;
width: 140px;
}

.stepcarousel .panel img{
float: left;
background:#940f04;
margin: 5px;
padding:5px;
border:1px solid #ccc;
}

.stepcarousel .panel img:hover{
background:#ffffff;
}
.quickedit{display:none}

#under_header{
opacity: 100;

}

Keterangan:
- Kode berwarna biru diatas adalah ukuran slide iklan atau carousel. Soabt dapat sesuaikan dengan lebar sidebar apabila ditempatkan pada area tersebut.

7. Letakan kode dibawah ini dibawah kode ]]></b:skin>
<script src='http://jurus2ngeblog-blogspot.googlecode.com/files/slide_gallery1.js' type='text/javascript'/>
<script src='http://jurus2ngeblog-blogspot.googlecode.com/files/slide_gallery2.js' type='text/javascript'/>
8. Simpan template sobat

Selanjutnya kita akan menambahkan widget slide gallery tersebut pada elemen halaman atau pada pada sidebar blog sobat

1. Masuk ke Rancangan -- Elemen Laman
2. Tambah gadjetkan lalu pilih HTML/Javascript
3. Masukan kode dibawah ini pada gadjet tersebut
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiimfkiNmZos-g-cSZdLMlhL4wPzabp_I2fF6ivthfj1zhhnZKiNKE3Wv0X21tiqOCZ3AvmFquj77KUh5W6ssXb70y6i_CwEhadHMaQzZz3SIplOgU4bQZ5q5LnhXUkyCBzlm81zNJKCRva/', 30, 60 ], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJAJqBo0MyWKdLF2b3pDQP7vNkmBuW1hq5oCxhZ44ZplegUuRHaHgGeVBzDGzDO1X7nJzwcUkv-h-8XYKZD1CA0mRTYqRn71vPqbpyBbqgRG4BBWLTh3BdRhTCAxmBDcCoKG16ZxQkWU-/', -55, 60 ]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

<div class="panel">
<a href="URL LINK ANDA">
<img src="URL GAMBAR ANDA" width="100px" height="135px" title="KLIK DI SINI" /></a>
</div>

Keterangan:
- Kode berwarna merah adalah url gambar iklan pada slide
- Kode berwarna hijau adalah url link iklan pada slide

4. Simpan gadjet sobat dan lihat hasilnya!

Minggu, 20 September 2009

Cara Memasang Iklan Setelah Read More

Mungkin anda pernah bertanya begini: "Kok iklan saya belum juga diklik oleh pengunjung ya?" Nah pertanyaan itu seringkali dijawab dengan berbagai macam jawaban yang berbeda-beda, misalnya trafik anda yang sedikit, blog anda belum populer, penempatan iklan kurang strategis, dll sebagainya. Oke kali ini Blog Trik dan Tips akan memberikan solusi untuk anda meningkatkan penghasilan dari iklan ppc. Tentunya hal ini berkaitan dengan penempatan iklan anda pada blog.

Apabila anda menempatkan iklan di tempat yang strategies pengujung akan sesering mungkin mengklik iklan anda. Blog trik dan tips pada kesempatan ini akan membahas mengenai penempatan iklan dalam postingan setelah read more (baca selanjutnya) diklik. Penempatan iklan dalam posting biasanya sering diklik dibandingkan dengan menempatkan iklan di sidebar, footer dan header. Oke langsung aja kita praktekin:

1. Login ke blogger.
2. Pilih Rancangan, lalu klik Edit HTML
3. Jangan lupa membackup template anda.
4. Beri tanda centang pada Expand widget template
5. Cari kode readmore seperti dibawah ini:
<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style> <p><data:post.body/></p>
<a expr:href='data:post.url'>.:. Read More..</a>
</b:if>
6. Sisipkan kode yang berwarna dibawah ini, pada kode diatas sehingga terlihat seperti ini:
<b:if cond='data:blog.pageType == "item"'>

<div style='float:up;'>
--Kode Iklannya simpan disini--
</div>

<style>.fullpost{display:inline;}</style> <p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style> <p><data:post.body/></p>
<a expr:href='data:post.url'>.:. Read More..</a>
</b:if>
Keterangan:
- Kode warna biru adalah posisi iklan dalam posting blog. Anda dapat menubahknya sesuai selera, misalnya ganti down (iklan dibawah) right (iklan disamping kanan), left (iklan disamping kiri).

7. Masukkan kode iklan anda pada kode berwarna hijau diatas
8. Terakhir jangan lupa untuk menyimpan template anda.

Cara Membuat Tooltips Otomatis di Blog

Tooltips adalah kotak yang menampilkan informasi dari link anda ketika cursor mouse berada tepat diatasnya. Kali ini kita akan membuat sebuah tooltip seperti pada gambar disamping ini. Tooltip yang saya buat ini akan menampilkan informasi mengenai judul link dalam sebuah kotak. Jika sudah gak sabaran langsung saja dipraktekin...

1. Login ke blogger
2. Masuklah ke Rancangan -- Edit HTML
3. Carilah kode <body>
4. Paste kode dibawah ini dibawah kode <body>
<script src='http://jurus2ngeblog-blogspot.googlecode.com/files/wb.js'/>
<a href='http://www.warungbebas.com' id='wb_ttauth'>Created by Warung Bebas </a> <a href='http://www.jurus2ngeblog.blogspot.com'>Modify by Blog Trik dan Tips</a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px dashed #778899;background:#4db2b3}#ttcont{background:#e6fffa;color:#000000}"
};
//]]></script><script src='http://jurus2ngeblog-blogspot.googlecode.com/files/wb_tooltips.js'/>
<script src='http://jurus2ngeblog-blogspot.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>
5. Paste kode dibawah ini diatas kode </body>
</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script>
6. Terakhir simpan templatenya

Coba lihat hasilnya pada halaman blog anda, pasti akan muncul tooltip yang sangat keren. Selamat mencoba!!!

Sabtu, 19 September 2009

Cara Hapus Garis Tepi Kotak Iklan Kumpul Blogger

Jika anda pernah memasang iklan kumpulblogger pada blog, maka anda pasti binggung bagaimana cara menghilangkan garis tepi kotak iklan tersebut. Kadang garis tepi yang dipasang membuat halaman blog menjadi kurang menarik. Selain itu garis tepi kadang membuat iklan yang diklik lebih sedikit. Sayangnya anda tidak dapat hilangin garis tersebut pada situs kumpulblogger.com seperti pada situs ppc lainnya. Untuk menghilangkan garis tepi tersebut, saya akan memberikan trik yang mudah dan cepat untuk anda. Berikut adalah langkahnya:

1. Login ke Blogger
2. Masuk ke Rancangan -- Edit HTML
3. Kopi kode dibawah ini:
.garping,.garpinghor {
border: none !important;
}
.garping table,.garpinghor table {
border:#FFFFFF solid 1px !important;
background-color:#FFFFFF !important;
}
.garping td,.garpinghor td{
color:#000000 !important;
background-color:#FFFFFF !important;
font-family:arial !important;
font-weight: !important;
font-style: !important;
}
.garping a,.garpinghor a{
color:#000080 !important;
font-family:arial !important;
font-weight: !important;
font-style: !important;
}
.garping a:hover,.garpinghor a:hover{
color:#FF0000 !important;
}
5. Cari kode ini
<b:skin><![CDATA[/*
6. Paste kode yang telah dikopi (warna biru) dikode nomor 5, seperti ini
<b:skin><![CDATA[LETAKAN KODENYA DISINI/*
7. Simpan template anda dan lihat hasilnya....

Semoga tutorial ini bermanfaat dan selamat mencobanya! Good Luck!

Cara Membuat Buku Tamu Tersembunyi di Blog

Jika blog anda sudah tidak ada ruang untuk menampilkan buku tamu atau anda sudah bosan dengan penampilan buku tamu yang ala kadarnya, maka anda harus coba tutorial berikut ini yaitu membuat buku tamu tersembunyi. Buku tamu tersembunyi yang saya maksud adalah buku tamu yang disembunyikan dibagian samping halaman blog anda, dan akan muncul ketika anda mengklik tombol buku tamu atau sebaliknya akan tutup jika anda mengklik tombolnya kembali. Untuk cara membuatnya sangat mudah ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan Gadjet lalu pilih HTML/JavaScript
4. Masukan kode berikut ini:
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://1.bp.blogspot.com/-Q5TgNw6u0_M/T7s_czTIedI/AAAAAAAADTM/xTgzEQV5Dfs/s400/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di sini:
<a href="http://jurus2ngeblog.blogspot.com/2009/09/membuat-buku-tamu-tersembunyi.html">
(Blog Trik dan Tips)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

6. Ganti kode berwarna merah diatas dengan kode buku tamu anda.
7. Simpan gadjet tersebut

Demikian langkah-langkah untuk membuat buku tamu tersembunyi. Selamat mencoba!!!!

Membuat Efek Halaman yang Melengkung (Page Peel)

Efek peel page adalah efek dimana ujung halaman melengkung ketika cursor mouse berada tepat diatasnya. Efek ini seringkali digunakan untuk menarik perhatian pengunjung mengklik gambar iklan dibalik lekungan halaman. Efek ini juga dapat digunakan untuk berbagai macam tujuan misalnya untuk mengarahkan pengunjung ke sebuah blog atau website.

Efek ini seringkali digunakan untuk mempercantik dan memperindah blog. Ini adalah salah satu efek yang saya sukai dan saya merekomendasikan sobat blogger untuk mencobanya. Jika sobat ingin tau cara membuatnya ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang pada Expand Template Widget
4. Kopi script dibawah ini dan letakan diatas kode
<b:skin><![CDATA[
<script src='http://jurus2ngeblog-blogspot.googlecode.com/files/page_peel.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
5. Cari kode ini
]]></b:skin>
6. Letakan kode dibawah ini tepat diatas kode ]]></b:skin>
#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://3.bp.blogspot.com/-gdg7o8HCtqA/T547peqhuTI/AAAAAAAADPg/REelXg1UcHM/s220/DSC01465.JPG) no-repeat right top;
text-indent: -9999px;
}
Keterangan:
- Kode berwarna merah adalah gambar latar belakang page peel. Sobat dapat menggantinya dengan gambar yang lain.

7. Letakan kode dibawah ini tepat dibawah kode
<body>
<div id='pageflip'>
<a href='http://jurus2ngeblog.blogspot.com/' target='_blank'>
<img alt='' src='http://2.bp.blogspot.com/-Wb14xiN0KPc/T7sJg5sldPI/AAAAAAAADS8/vtmXQM0CMuo/s400/page_peel_image.png'/>
<span class='msg_block'/>
</a>
</div>
Keterangan:
- Kode berwarna biru adalah link yang akan mengarahkan pengunjung ke sebuah halaman (sobat dapat menggantinya)

8. Simpan template sobat dan lihat hasilnya

Selamat mencoba dan semoga berhasil....!

Jumat, 18 September 2009

Cara Mendatangkan 1000 Pengunjung per Hari Dengan Hitstats


★ Sekilas Tentang Hitstat



Seperti yang sudah kita semua tahu,situs jasa ini sangat membantu dalam memonitor status web/blog.
Mulai dari merekam jumlah pengunjung perhari,jumlah pengunjung online,jumlah view halaman,maupun berapa kali jumlah situs telah dikunjungi.

Jika anda belum memasang widget ini,anda bisa daftar gratis di www.hitstats.com.
Untuk langkah-langkahnya mudah koq,tinggal ikuti instruktur ajha :D.

Masalahnya,kali ini bukan untuk membahas langkah-langkah memasang widget hitstat ini,melainkan memanfaatkan stats counter ini untuk mendatangkan pengunjung lebih banyak.

Dan istimewanya lagi,trik ini berlaku untuk memotivasi blogger yang sedang mendalami belajar seo menggunakan blogspot/blogger maupun wordpress ataupun yang lain.


★ Membongkar Rahasia Hitstats/Hitstats Hack




Waduh! apaan nich!? hack? urasannya nanti ama polisi dunks!
Wait,wait..tunggu dulu,saya hanya pemula internet mas,jadi masalah hacker mungkin bukan bakat saya hehe..,jika saya memakai subtitle ‘hitstats hacking’ biar lebih dahsyat ajha,:D

Eit's! jangan beranjak dulu,serius!karena anda tidak akan menyangka,widget sederhana ini akan kita bongkar rahasianya dan nantinya mampu mendatangkan 100 bahkan 1000 pengunjung per hari,bahkan bisa lebih dari itu,tergantung seberapa kuat jari anda beradu keyboard.

Jari? beradu? keyboard? apaan si? penasaran? so,let's check this tips out sob!

  • Apakah anda masih berpatokan hitsats/counter stats sebagai pemonitor situs anda?
  • Sedih,ketika melihat hitstats situs blog anda hanya ada 1 pengunjung/hari dan itupun anda?
  • Pernahkah anda menjumpai hitstat blog/situs para master seo dengan kunjungan 1000-4000/hari dan 40-60 user online?

Pada hari ini,jika anda membaca artikel ini dengan seksama,keluhan-keluhan diatas bukan lagi menjadi masalah.
Sudahkah anda siap untuk mengetahui Rahasia Hitstats?

Pembaca:ngemeng aja n..kapan mbongkar rahasianya!!
Pelajaran Blog:hehehehe..sabar ya :D
Pembaca:kabur akh! bohong ni..
Pelajaran Blog:yayayayaya...inilah rahasia hitstats!

★ Seo,Hitstats Hack Cara Mendapat 1000 Pengunjung/hari



Sebelumnya,seperti yang kita tahu seo(search engine optimization),sangat banyak dibutuhkan para blogger.
Mereka berlomba-lomba untuk mendatangkan sebanyak-banyaknya pengunjung dengan berbagai cara dan langkah.

Pelajaran Blog,demi teman-teman netter akan membocorkan rahasia dibalik hitstats ini,dan bukan mustahil lagi jika suatu saat ini,langkah yang akan kita bahas kali ini merupakan kiat membongkar rahasia seo hanya dengan hitstats.

Hitstat maupun counter stats serupa,pada intinya hanya merekam cookies pada komputer anda.
  • Pastikan anda sudah memasang hitstat pada blog anda.
  • Cara yang akan kita pakai,menggunakan modus delete cookies every page (menghapus cookies setiap tampil halaman ).
  • Browser yang kita pakai adalah Mozilla Firefox,jadi jika anda masih menggunakan Internet Explorer,download mozilla firefox di sini.
Jika anda sudah mempersiapkan hal tersebut diatas,let's play! (aaaaalah! sok bule,hihihihi..)

★ Langkah-langkah Mengakali Hitstat Untuk Mendapat Pengunjung


  • Bukalah blog anda,lihat status statsnya,untuk sementara kita lihat mulai berapa orang(user)yang sedang online,dan berapa kali blog dikunjungi pada hari ini.
    ‘Biasanya untuk keterangan berapa user yang online,bertuliskan online,sedangkan untuk berapa kali hari ini dikunjungi bertuliskan Visit Today

    Rahasia Hitstat Telah Terbongkar.

  • Selanjutnya,pilih di Tools browser mozilla firefox anda,lalu pilih Option.

    1000 pengunjung per hari memanfaatkan Hitstat Counter.

  • Pilih Kolom Privasi,dan klik tombol Setting.

    Mengakali hitstat untuk mendapat banyak pengunjung.


  • Contreng semua checkbox,lihat ilustrasi gambar di bawah ini,setelah itu klik tombol OK.

    Hitstat Hacking Membongkar Rahasia Hitstat Counter.


  • hacking hitstats pelajaran blog.

  • Selanjutnya tutup dengan menekan tombol OK sekali lagi,kemudian test dengan menekan Ctrl+Shift+Del,jika keluar jendela window seperti gambar di bawah ini,berarti anda siap action.

    Mendatangkan Banyak Pengunjung Dengan Hitstat.


  • Mulailah,tekan Ctrl+Shift+Del kemudian Enter setelah itu Refresh halaman atau hanya dengan menekan F5 pada keyboard,dan tunggu sampai halaman benar-benar tampil sempurna.Ingat!!! halaman harus benar-benar tampil sempurna(tak ada loading lagi).
  • Setelah anda yakin halaman sudah tampil semua,lakukan kembali seperti langkah diatas,begitu seterusnya,dan lihat status hitstat anda.Unbelieveble right!!!?
‘Jika anda melakukan 3x seperti langkah diatas,hari itu juga anda mendapat 3 pengunjung dan 3 user online.Apa jadinya jika anda melakukan 1000x?’

Tentu sekarang anda tahu khan apa maksud jari beradu keyboard diatas?xixixixixi..

Nb:Tapi semua kembali ke diri kita masing-masing,terus terang pelajaran blog tidak menggunakan cara ini,dan memang trafik yang terjadi murni dari sahabat-sahabat pada blog ini.

Semoga berhasil dan mudah-mudahan bermanfaat ya... :D

Baca Juga Yang Ini..

Minggu, 06 September 2009

Daftar List Pemenang Stop Dreaming Start Action




Dukungan Stop Dreaming Start Action



Daftar List Pemenang Dukungan Stop Dreaming Start Action.Mendukung detik-detik terakhir menjelang berakhirnya kontes seo ter-besar yang diadakan oleh salah satu pelaku bisnis online internet terkemuka Bp.Joko Susilo.

Pelajaran Blog,hanya bisa memberi dukungan moral dengan membuat artikel prediksi dari daftar blog-blog yang menjadi .

Banyak slogan berbeda yang mereka pakai dari masing-masing para kontestan seo contest ini,namun kendati demikian toh intinya sama yaitu menembakkan kata kunci untuk menempati posisi pertama serp Google.co.id bukan di Google.com.

Saya,memberi dukungan penuh berupa backlink,karena disamping itu mereka juga berkompetisi untuk ini.


Meskipun kontes ini akan berakhir beberapa hari lagi,mengingat kontes jokosusilo ini di mulai tanggal 20 Juni dan berakhir sampai 15 September 2009 tepatnya pukul 09.00 wib.

Perkiraan 5 Besar Daftar Pemenang Stop Dreaming Start Action



  1. Bp.Kusuma di www.kerjakeras.com
  2. Si Cantik Annosmile (secret name ha? :D..) di www.annosmile.jogloabang.com
  3. Mas Beny di www.bisnis-online-internet.blogspot.com (master of blogspot..)
  4. Ateonsoft (siapa ya?) si master onpage seo di www.ateonsoft.com
  5. Kopi Tozie di www.kopitozie.blogcantik.com


Sedangkan untuk blog master seo yang sudah kita tahu Mas Cosa Aranda di www.dongengmotivasi.com,selalu menjadi misteri.Misteri? ya secara,blog dongeng motivasi si master seo ini sempat hilang dari serp dengan kata kunci .

Disamping itu mas cosa sempat pula menempati posisi kedua,tapi seiring berubah-ubahnya algoritma paman Google,nggak mustahil khan saat tiba finish nanti blog mas cosa di posisi pertama?,he..

Apakah ini salah satu kontes seo untuk pemula?bukan lagi! para master seo dalam negeri telah turun semua pada kontes ini.ya.. :D

Setelah 3 bulan 'peras keringat banting tulang' semoga mereka para ini,mendapatkan imbalan yang sesuai.

Sekali lagi,jurus2ngeblog.blogspot.com hanya mampu memberikan dukungan dan memperkirakan serta memprediksi daftar list pemenang kontes besar ini saja.

Untuk hasil sebenarnya,kita lihat pukul 09.00 wib 15 september nanti.

Meskipun pemula dalam belajar ngeblog maupun seo,yuk! kita pantengin mbah google.co.id,blog siapa yang menempati posisi pertama dan blog mana saja yang sudah memenuhi syarat dan kententuan menjadi pemenang kontes stop dreaming start action ini.




Selasa, 01 September 2009

Cara Memasang Alexa Widget/Site Info



Sekilas Tentang www.Alexa.com



Site Info Alexa Widget.Alexa yang sekarang kita ingin bahas ini,bukan sebuah group band,melainkan situs jasa web tracker.
Adalah ,merupakan fenomena tool untuk memonitor suatu blog/web,mulai dari analisa traffik,keyword maupun rank suatu blog.

Peran Alexa Rank Pada Blog



Seperti yang sudah kita tahu,semakin kecil angka rank pada alexa widget,maka blog kita akan semakin baik dimata search engine/mesin pencari,dan ini sangat berpengaruh terhadap ketahanan dari setiap artikel/postingan yang kita buat.
Maka dari itu kiat atau ,sangat dicari-cari.

Memasang Alexa Site Info Widget Pada Blog



Memang bukan masalah sulit,namun karena banyaknya dari sahabat pelajarn blog yang merisaukan untuk panduan bagaimana memperoleh kode dan ini,mumpung lagi ada lemburan,kita bahas bareng-bareng yuk!!! yuuuuk! jah! koq malah kaya b*cong gw ya? tapi..uwis! udah!udah! kapan ni nulisnya,hehehe..

Langkah-langkah memasang alexa widget:


  1. www.alexa.com


    Memasang Alexa Widget.

  2. Klik tab tulisan ‘for site owner’ seperti ilustrasi gambar diatas.
  3. Pilih Kategori ke-2 bisa lihat gambar di bawah ini:

    Ranking Alexa Widget Site Info.

  4. Selanjutnya pilih widget sesuai keinginan,ada 3 pilihan besar,kecil dan sedang.
  5. Setelah anda menentukan pilihan,isikan alamat blog anda,jangan lupa cantumkan http:// sebelum menuliskan url alamat blog anda,lihat gambar dibawah ini:

    Cara Memperoleh Widget Alexa Site Info.

  6. Setelah itu,klik tombol ‘build widgets’,dan anda akan mendapatkan kode html nya.

    Kode HTML Widget Alexa Site Info.

  7. Letakkan kode tersebut pada blog anda,bisa di sidebar,footer ato mana sajalah yang penting bukan di rumah orang,hee..
  8. Selesai.

Semoga artikel ini bisa ditemukan oleh blogger yang kesulitan bagaimana cara meletakkan widget site info dari alexa ini. :D

Baca Juga Yang Ini..

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More