Membuat Related Post Dengan Gambar Thumbnails di Bawah Postingan

Membuat Related Post Dengan Gambar Thumbnails di Bawah Postingan

Berikut ini admin akan berbagi tentang bagaimana cara membuat related post dengan gambar thumbnails di Blog Blogger atau yang lebih kita kenal dengan artikel terkait. Membuat ini sangat bermanfaat untuk blog karena akan memudahkan pengunjung untuk membaca artikel-artikel yang masih mempunyai topik yang sama.

Artikel terkait atau related post menampilkan pintasan dari beberapa posting yang masih memiliki konten berhubungan dengan artikel yang dikunjungi oleh pembaca, dengan memasang widget ini kamu dapat menuntun pengunjung blog menuju postingan yang lain yang tentunya berkaitan dengan postingan yang sedang dilihat. Diharapkan dengan memasang artikel terkait ini dapat meningkatkan pageview halaman karena letaknya berada di bawah postingan.

Related Post Gambar Thumbnails


Setelah mengetahui beberapa hal diatas saya setuju dengan para master seo diluar sana bahwa memasang related post atau artikel terkait adalah salah satu tehnik seo yang bisa digunakan karena google pun menggunakan hal yang sama.

Cara membuat related Post di Blog ( V1 )

Cara membuat artikel terkait untuk blogger V1
1. Masuk ke Blogger >> Template
2. Pilih EDIT HTML
3. Temukan kode ]]></b:skin> dan letakan kode dibawah tepat di atasnya.
.related-post .post-thumbnail {z-index: 1;position: relative;width: 98px;height: 98px;margin: 0;display: block; border-right: 1px solid #fff;border-bottom: 1px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 2px 2px 5px #444; -moz-box-shadow: inset 2px 2px 5px #444; box-shadow: inset 2px 2px 5px #555; }
.related-post { float: left; position: relative; width: 98px; height: 98px; margin: 0 10px 10px 0; background: #F6F6F6; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.related-post .related-post-title { display: none; float: left; background: #000; color: #fff; text-shadow: none; font-weight: bold; padding: 10px; position: absolute; top: -20px; left: 40px; z-index: 2; width: 200px; -webkit box-shadow: 0 0 2px #444; -moz-box-shadow: 0 0 2px #444; box-shadow: 0 0 2px #444; }
.related-post:hover .related-post-title {display: block;}
4. Selanjutnya cari atau temukan kode yang mirip dengan salah satu kode dibawah ini ( cari kode yang pertama dan jika tidak ada cari kode-kode selanjutnya ).
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
5. Jika anda sudah menemukan salah satu kode yang mirip dengan kode diatas, copy kode dibawah ini dan letakan dibawah kode di atas ( di bawah salah satu kode pada langkah ke 4 ), kemudian simpan / save Template anda.
<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class='clear'/>
Keterangan:
  • Warna Orange Bisa anda sesuaikan dengan ukuran template anda
  • warna Merah adalah jumlah artikel yang akan di tampilkan.

Cara Membuat Related Post ( V2 )

Related post with thumbnails V2

Related post ini juga sudah ditambahkan alt, title dan deskripsi otomatis sesuai postingannya, sehingga tidak perlu takut gambar-gambar di related post ini akan mengurangi nilai SEO template blog sobat. Selain tampilannya menarik related post ini seo friendly. Bagaimana tampilan related post ini? mungki sobat dapat melihat gambar diatas. Cara membuatnya baca DISINI.

Sekarang template kamu sudah memiliki artikel terkait atau related post untuk memudahkan pengunjung menjelajahi blog, sekian dan semoga bermanfaat.
Cara Menambahkan Satu Dua Elemen Add Gadget di Bawah Postingan

Cara Menambahkan Satu Dua Elemen Add Gadget di Bawah Postingan

Mungkin saja sobat merasa belum cukup tempat widget di Blog sobat dan ingin menambahkan widget baru tapi tidak ada lagi tempat add gadget di blog sobat. Nah, mungkin saja sobat ingin membuat element add gadget baru dan letaknya ada di bawah postingan.

Berikut ini admin akan berbagi tentang cara menambah satu dua elemen add gadget di bawah postingan. Untuk membuatnya akan ada penambahkan kode CSS Html juga kedalam template blog. Tutorial dibawah ini terdapat dua bagian yaitu Menambah dua elemen di bawah postingan dan cara menambah satu elemen dibawah postingan.

Elemen add Gadget

Cara Membuat Dua Elemen Tambahkan Gadget di bawah postingan


Di Blogger → Template → Edit HTML ( Sebelumnya backup template kamu agar bisa dikembalikan seperti semulah jika terjadi kesalahan, misalnya simpan template ke dalam notepad)

1. Carilah kode ]]></b:skin> atau </style> dan letakkan kode berikut sebelum kode ]]></b:skin> atau </style> ( tekan Ctrl + F untuk mempermudah pencaharian kode )
#magazine-left { width:48%; float:left; }
#magazine-right { width:48%; float:right; }
Knda masih bisa menambahkan kode CSS diatas, misalnya menambahkan border dll, bisa juga mengatur lebarnya jika merasa kurang pas ( width:48%; ).

2. Kemudian cari kode berikut atau yang serupa:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
</b:widget>
</b:section></div>
3. Jika sudah dapat letakkan kode berikut dibawah kode </b:section> sebelum kode </div>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section id='magazine-left' class='magazine-left' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section>
<b:section id='magazine-right' class='magazine-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>
Sampai pada point ini, kamu dapat melihat preview template atau pratinjau. Jika sudah sesuai dengan keinginan, selamat kamu berhasil.

Di atas adalah jika kamu ingin menambahkan dua elemen add gadget di bawah postingan, tapi jika hanya ingin menambahkan satu gadget saja kamu dapat mengedit kode di atas seperti tutorial di bawah ini!

Cara Membuat Satu Elemen Tambahkan Gadget di Bawah Postingan


Di Blogger → Template → Edit HTML ( Sebelumnya backup template kamu agar bisa dikembalikan seperti semulah jika terjadi kesalahan, misalnya simpan template ke dalam notepad)

1. Carilah kode ]]></b:skin> atau </style> dan letakkan kode berikut sebelum kode ]]></b:skin> atau </style> ( tekan Ctrl + F untuk mempermudah pencaharian kode )
#magazine { width:100%; float:center; }
Kamu masih bisa menambahkan kode lain pada CSS diatas, misalnya menambahkan border atau mengatur kembali lebarnya ( width:100%; )  dll.

2. Kemudian cari kode berikut atau yang serupa:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
</b:widget>
</b:section></div>
3. Jika sudah dapat letakkan kode berikut dibawah kode </b:section> sebelum kode </div>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section id='magazine' class='magazine' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section>
</b:if>
Selanjutnya klik "Save Template" dan setelah tersimpan klik "Tata Letak" kemudian lihat hasilnya. Sampai pada point ini, kamu dapat melihat preview template atau pratinjau. Apakah sudah sesuai dengan keinginan atau belum.

Sekian semoga bermanfaat.
Mau Membuat Link Aktif di Text Javascript? Begini Caranya Sob!

Mau Membuat Link Aktif di Text Javascript? Begini Caranya Sob!

Tutorial blog spezernet kali ini adalah tentang cara menambahkan link aktif / link hidup di kode teks Javascript. Kegunan dari penambahan link hidup ini adalah untuk menambah backlink ke website / blog tersebut.

Dengan menggunakan cara ini sangat bermanfaat bagi yang memiliki blog atau website bertemakan tutorial website/Blog, ketika kode text java script yang telah ditambahkan link aktif ini dipakai oleh website lain ketika kode ini dijalankan maka akan bermanfaat untuk menambah backlink.

Cara Membuat Link Aktif di Text Javascript di Blogger

Cara Menambahkan Aktif Link di Teks JavaScript


1. Siapkan teks javascript yang ingin disisipkan kode link hidupnya.
2. Buka kode yang berekstensi .js tersebut dengan menggunakan program notepad.
3. Scroll kursor sampai ke bagian paling bawah teks javascriptnya.
4. Lalu tambahkan kode link hidupnya seperti di bawah ini:
document.write('</br><a href="https://blog.spezer.net" style="font-size: 8px; text-decoration:none; color: #616469;">Tutorial Blogger</a>')
  • Ganti kode yang berwarna biru dengan alamat blog/web anda.
  • Ganti kode yang berwarna hijau dengan teks yang diinginkan (bagian ini akan terlihat ketika kode .Js-nya dijalankan.
  • Ubah beberapa kode yang sesuai keinginan, contoh: warna, ukuran, dll.


Cara Menambahkan Link Hidup di text javascript


Penjelasan kode diatas :
  • [document.write]: merupakan bahasa pemprograman javascript yang berarti akan memunculkan suatu tulisan pada saat kode javascript tersebut dijalankan.
  • [('</br>]: kode ganti baris.
  • [<a href="https://blog.spezer.net"]: kode untuk memanggil url yang diminta.
  • [style="font-size: 8px; text-decoration:none; color: #616469;">]: Kode-kode pendukung yang berfungsi menunjang teks yang akan ditampilkan.
  • [Tutorial Blog]: kode untuk menampilkan teks pada saat javascript tersebut dijalankan.
  • [</a>')]: kode penutup.

Nah itulah yang dapat dibagikan dikesempatan ini tentang Cara Menambahkan Link Hidup di text javascript atau Cara Membuat Kode Link Aktif Di Teks Javascript semoga bermanfaat.
Cara Membuat Smartlink di Blogger, Wow Keren ga tuh?

Cara Membuat Smartlink di Blogger, Wow Keren ga tuh?

Script ini akan membaca setiap kata pada setiap posting. Contohnya, jika sobat memasukkan kata "SEO" pada script tersebut maka otomatis pada semua postingan/halaman yang terdapat kata "SEO" akan berubah menjadi link kealamat url yang telah ditentukan.

Smart Link ini memberikan keterkatian pada kata yang telah ditentukan di dalam setiap postingan. Misalnya saja, saya akan memberikan link ke tautan tertentu pada setiap kata "SEO" di postingan saya, jika telah memasang Smart Link ini setiap kata "SEO" akan berubah menjadi link aktif. Link ini bisa diatur mengarah ke blog kita atau mengarah ke blog lain.

Penggunaan Smart link ini tidak melanggar aturan selama di gunakan dengan tepat sehingga tidak perlu takut akan terkena sanksi atau bahkan dibanned, namun dengan pertimbangan jumlah link yang terpasang dalam batas wajar dan tidak berlebihan, disarankan untuk menggunakan satu saja yaitu kata kunci utama.

Memasang Seo Smartlink di Blog


Cara Memasang Smart Link di Blogger


1. Di Blogger, Masuk ke Template Blogger kemudian klik EDIT HTML.
2. Cari kode </body> untuk lebih mudah mencarinya tekan CTRL + F
3. Copy kode di bawah ini tepat diatas kode </body>
<b:if cond='data:blog.url != data:blog.homepageUrl'><script type='text/javascript'>function autoLink(){ this.keywdHref = new Object(); this.add = function(keyword, href){ if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;} this.keywdHref[keyword] = href; } this.createAnchor = function(){ var objs = document.getElementsByTagName(&quot;div&quot;); for(var i=0; i&lt;objs.length; i++){ var obj = objs[i]; if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){ var content = obj.innerHTML; for(var keyword in this.keywdHref){ var href = this.keywdHref[keyword]; var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;); obj.innerHTML = newstr; content = newstr; } } } } this.startScript = function(){ var onLoad = window.onload; window.onload = function(){ if(onLoad){onLoad();} setTimeout(&quot;f.createAnchor()&quot;, 100); } }}</script><script type='text/javascript'>var f = new autoLink();f.add(&quot;SEO&quot;, &quot;http://blog.spezer.net/&quot;);
(&quot;SEO2&quot;, &quot;http://blog.spezer.net/&quot;);f.startScript();</script></b:if>
Keterangan
Kode Biru : Ganti link / url blog kalian .
Kode Merah : Ganti dengan kata - kata terserah kalian.
Untuk kode SEO 2 Jika ingin menambahkan lebih dari 1, bisa dihapus jika tidak diperlukan.

Sekian, selamat mencoba
Cara Mengganti Header Blog Dengan Gambar Jika H1 Zero

Cara Mengganti Header Blog Dengan Gambar Jika H1 Zero

Jadi disini yang dimaksud H1 Zero adalah jika mengganti header blog dengan gambar melalui tata letak di Blogger, kemudian template yang dipasangi gambar itu tidak support dengan gambar header blog. Untuk mengujinya yaitu pada saat memasang gambar di template blog melalui "tata letak" silahkan cek di chkme, jika H1 terdeteksi Zero berarti template tidak support untuk dipasangi gambar Header.

Header Blog adalah bagian paling atas pada sebuah situs yang berisi nama situs, menu, tempat pencarian, lokasi situs, media iklan dan sebagainya. Apabila pada elemen header ini tidak menarik, langkah yang pas adalah dengan mengkombinasikan warna serta memberi background dengan tema dan layout yang sesuai. Jadi, tidak hanya body background yang kita modifikasi namun juga pada bagian header lah yang paling utama.

Agar background tersebut menarik, berilah gambar yang bagus atau bisa juga padanan gradiasi warna yang sesuai dan bisa juga animasi, atau bahkan hanya text saja. Hal ini akan menjadi pertimbangan untuk anda menentukan sesuatu yang cocok untuk dimasukkan kedalam latar belakang header tersebut.


Mengganti Header Blog Dengan Gambar

Cara Mengganti Header Blog Dengan Gambar


1. Buatlah gambar yang sesuai dengan kehendak kamu dan ingat gambar tersebut harus sesuai dengan luas header-wrapper agar nantinya sesuai dengan template. Kemudian tambahkan gambar dan kode "overflow:hidden" tersebut pada CSS header-wrapper sebagai backround pada edit HTML:
#header-wrapper{background:url(http://3.bp.blogspot.com/-fSb0Ff5MGw0/UUcdKx6ApUI/AAAAAAAAXsA/qjZ63XQ3hF4/s1600/header+kompidotcom.png)no-repeat;width:980px;margin:0 auto;overflow:hidden}
Warna hijau ganti dengan gambar yang anda edit. Yang warna biru sesuaikan dengan lebar template, lihat juga jika ada kode heigh maka sesuikan dengan tingginya juga.

2. Kemudian tambahkan kode "visibility:hidden" tanpa tanda kutip pada kode CSS header. Contohnya adalah seperti kode dibawah ini:
#header{float:left;width:500px;text-align:left;color:#333;margin:0;visibility:hidden}
3. Save template dan lihat hasilnya.

Ok sobat sekian tutorial Cara Mengganti Header Blog Dengan Gambar Jika H1 terdeteksi Zero di chekme, atau cara mengganti header blog dengan gambar untuk template yang tidak support gambar header, selamat mencoba.
Cara Membuat Readmore Otomatis Ringan di Blog

Cara Membuat Readmore Otomatis Ringan di Blog

Read more dalam bahasa indonesia yaitu "Baca Selengkapnya" dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang.

Ada banyak cara pemasangan readmore otomatis pada blog, ada yang hanya menggunakan kata-kata, ada juga yang menggunakan icon/gambar, dll. Tetapi kali ini spezernet share tentang cara membuat readmore otomatis yang hanya menggunakan kata-kata agar tidak mengurangi loading blog. Selain itu kamu juga bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan.

Cara Membuat Readmore Otomatis Ringan di Blog

Cara Membuat Readmore Otomatis di Blog

1. Di Blog Blogger.
2. Pilih template => klik edit html
3. Cari kode </head> (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
4. Letakkan kode dibawah ini diatas kode </head> , Angka yang bewarna merah merupakan ukuran gambar postingan, bisa anda ubah sesuai keinginan
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
Keterangan kode berwarna merah:
  • summary_noimg =  banyaknya huruf jika tidak ada gambar
  • summary_img = banyaknya huruf jika ada gambar
  • img_thumb_height = Ukuran tinggi gambar
  • img_thumb_width = Ukuran lebar gambar
5.Selanjutnya cari kode <data:post.body/> ( jika sebelumnya anda telah memasang readmore maka hapus kode readmore yang lama dan jika kode <data:post.body/> silahkan di coba satu persatu  ) dan Ganti kode tersebut dengan kode dibawah ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> &#8594; <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
6. Tulisan Readmore bisa diganti sesuai keinginan.
7. Simpan template dan lihat hasilnya.

Sekian postingan yang dapat dibagikan saat ini, semoga bermanfaat.
Cara Memasang Iklan Melayang Close 2X! Wow Keren ga tuh?

Cara Memasang Iklan Melayang Close 2X! Wow Keren ga tuh?

Pada kesempatan ini spezernet akan membagikan tutorial bagaimana cara membuat iklan melayang yang mesti di close sebanyak 2x. Jenis iklan PPC pada umumnya tidak diperbolehkan memasang iklan seperti ini. Jika kamu memiliki iklan mandiri akan sangat dianjurkan karena para advertiser cenderung berani membayar dengan harga tinggi untuk memasang iklan di posisi ini.

Salah satu letak iklan yang paling bagus adalah iklan floating atau melayang. Lokasi iklan jenis ini akan selalu kelihatan meskipun scroll browser di naik turunkan sehingga akan selalu dilihat oleh pengunjung. Hanya saja jenis iklan ini kurang disukai oleh pengunjung selain menggangu tampilan blog membuat pengunjung tidak nyaman dengan keaadaan ini.

Cara Memasang Iklan Melayang CLose 2X di Blogger
Sebelumnya juga spezernet telah membagikan tentang cara memasang iklan di bawah postingan dan cara memasang iklan di tengah postingan.  Ok lanjut ke...

Cara Memasang Iklan Melayang Close 2x di Blogger

1. Di Blogger
2. DI Blog kamu pilih Tab Tata Letak
3. Tambah Gadget Pilih HTML / JAVASCRIPT
4. Copy semua kode di bawah ini dan letakan di dalam Widget HTML yang terbuka tadi ;
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
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.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>
Masukan Kode iklan atau Gambar yang anda inginkan di sini
</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
5. Tulisan berwarna biru di atas silahkan ganti dengan script kode iklan milik kamu
6. Simpan dan Lihat hasilnya.

Sekian tutorial singkat mengenai cara memasang iklan melayang diblog, semoga bermanfaat.