Cara Membuat kotak iklan Melayang dan ringan

 Iklan / pemasangan iklan ini memang banyak dilakukan oleh para web designer ataupun bloggers termasuk saya sendiri. Apalagi dengan adanya income dollar yang lumayan buat si pemilik blog/web site. Jelas sekali bahwa  pemasangan iklan ini sangat menguntungkan bagi para web designer ataupun bloggers. oleh karena itu banyak para bloggers memilih untuk menyisakan tempat untuk pemasangan iklan.
Akan tetapi terkadang kita juga ada kendala dari pemasangan iklan. Apalagi dengan adanya tuntutan penempatan iklan yang harus strategis karna dari situlah kita bisa dapat dollar. Nah disini kita coba untuk belajar membuat tempat iklan yang mudah dibaca oleh para pengunjung sekaligus menghemat tempat tanpa menggeser isi-isi yang lain. yaitu membuat kotak/tempat iklan yang melayang.
jika anda tertarik untuk menggunakannya silahkan ikuti langkah - langkah dibawah ini,


1.Log in Blogger.com
2.Pilih Rancangan/layout
3.Edit HTML --> centang Expand Template Widget ,jangan lupa Download Template Lengkap untuk keamanan ... okey... :)

4. Setelah itu cari kode </head>

Kalau sudah ketemu taruh kode dibawah ini tepat di atasnya

<script src='http://sites.google.com/site/anasprod/adse.js' type='text/javascript'/>

5.Selanjutnya cari kode ]]></b:skin>

Kalau sudah ketemu taruh kode dibawah ini tepat di atasnya

#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}

 Ket : Width: 620px ( untuk mengatur lebar Kotak )
        Lightyellow   ( warna background ) anda bisa ganti warna tsb, misal Black (hitam), Red ( merah ) dan banyak lagi lainnya..

6. Save template.

Langkah di atas masih Belum selesai sob,setelah Sobat ikuti langkah diatas langkah selanjutnya  kita masuk ke halaman Rancangan lalu tambahkan gadget HTML Javascript sobat dan masukkan kode dibawah ini :

<div id="topbar">

MASUKKAN CODE IKLAN ATUPUN CODE LAINYA YANG ANDA INGIN PASANG

<a href="" onclick="closebar(); return false"><img src="http://sites.google.com/site/anasprod/close.gif" border="0" /></a>

</div>

Setelah anda masukan Code yang ingin anda pasang klik Save dan selesai sudah sob..
Silahkan lihat hasilnya...

Selamat Mencoba dan Sukses Selalu Buat Sobat... :)

Cara Membuat Highlight all (teks dalam Kotak)

Pada kesempatan ini saya ingin mempostingkan cara membuat Highlight all atau membuat kotak sebuah teks seperti pada gambar di atas. Highlight all ini sangat berguna bila kita ingin mempostingkan atau membuat tempat suatu teks ataupun script agar mudah untuk diambil/dicopy oleh pengunjung blog kita. Disamping itu highlight all ini juga mempermudah pengunjung dalam meng-copy teks ataupun script yang telah kita postingkan atau sediakan.
Contohnya seperti dibawah ini :

simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung

Setelah anda melihat contoh di atas dan berminat untuk mencoba dan memakainya silahkan ambil code dan ikuti langkah berikut ini.

Jika anda ingin memasangnya di sidebar ataupun di widget
1. Login dulu ke blogger anda
2. pilih RANCANGAN

3. kemudian pilih Add Gadget/Tambah Gadget => pilih yang HTML/Javascript.
4. Masukan kode di bawah ini ke dalam content HTML/Javascript:

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 144px; width: 300px;" wrap="VIRTUAL">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></div>
</form>
</div>

6. Kemudian Simpan.
7. Setelah itu view blog dan lihat hasilnya.

Akan tetapi jika anda ingin menampilkan kotak teks tersebut di postingan anda. Anda cukup meng Kopas Code diatas di pilihan EDIT HTML pada form posting.

Selamat Mencoba............ dan semoga Sukses... Amin.......

...................Kanca...................

Membuat Navbar Sendiri / Penutup Navbar

Nah Sekarang aku mau posting tentang cara membuat navbar yang berbeda... seperti contoh gambar dibawah ini... navbar merah yang dilingkarin hitam...

hehehe... sebenere itu bukan navbar ce tp itu cuman buat nutupin navbar biar tampilan blok kita lebih bervareasi... :)... ya udah kita langsung aja bagaimana membuatnya... okey... :)

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.
2. Kemudian klik pada Edit HTML.
3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.
4. Kemudian centanglah Expand Template Widget.
5. Kemudian carilah kode ]]></b:skin> untuk mempermudah tekan tombol ctrl + F.
6. selah anda menemukan kode tersebut, letak Kode Dibawah ini tepat diatasnya..

/*-- (mta bar) --*/
#mta_bar{background:#444 url('http://s1180.photobucket.com/albums/x406/sismawan/Nav.jpg')
repeat-x; border-bottom:1px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:8px; padding-bottom:6px}
* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}
#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#FFFFFF; width:65%}
#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FFFFFF; width:20%}
#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}
#mta_bar .right a{font-size:10px; color:#FFFFFF; text-decoration:underline}
#mta_bar .right a:hover{font-size:10px; color:#80FF00; text-decoration:none}
#left_bar a{background:url('http://i1105.photobucket.com/albums/h356/Ozyw42/check-c.png') no-repeat; text-decoration:none; color:#FFFFFF; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}
#left_bar a:hover{text-decoration:underline; color:#80FF00}
#left_bar2 a{background: url(http://i1180.photobucket.com/albums/x406/sismawan/facebook.png)
<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%6E%6F%2D%72%65%70%65%61%74%20%32%70%78%3B%20%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%20%63%6F%6C%6F%72%3A%23%46%46%46%46%46%46%3B%20%70%61%64%64%69%6E%67%2D%6C%65%66%74%3A%32%31%70%78%3B%20%70%61%64%64%69%6E%67%2D%72%69%67%68%74%3A%30%3B%20%70%61%64%64%69%6E%67%2D%74%6F%70%3A%30%3B%20%70%61%64%64%69%6E%67%2D%62%6F%74%74%6F%6D%3A%30%7D%0A%23%6C%65%66%74%5F%62%61%72%32%20%61%3A%68%6F%76%65%72%7B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%75%6E%64%65%72%6C%69%6E%65%3B%20%63%6F%6C%6F%72%3A%23%38%30%46%46%30%30%7D%0A%23%6C%65%66%74%5F%62%61%72%33%20%61%7B%62%61%63%6B%72%6F%75%6E%64%3A%74%72%61%6E%73%70%61%72%65%6E%74%29%20%6E%6F%2D%72%65%70%65%61%74%3B%20%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%20%63%6F%6C%6F%72%3A%23%46%46%46%46%46%46%3B%20%70%61%64%64%69%6E%67%2D%72%69%67%68%74%3A%32%33%70%78%3B%20%70%61%64%64%69%6E%67%2D%6C%65%66%74%3A%30%3B%20%70%61%64%64%69%6E%67%2D%74%6F%70%3A%30%3B%20%70%61%64%64%69%6E%67%2D%62%6F%74%74%6F%6D%3A%30%7D%7D%0A%23%6C%65%66%74%5F%62%61%72%33%20%61%3A%68%6F%76%65%72%7B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%75%6E%64%65%72%6C%69%6E%65%3B%20%63%6F%6C%6F%72%3A%23%38%30%46%46%30%30%7D%0A%23%74%6F%5F%74%6F%70%7B%62%61%63%6B%67%72%6F%75%6E%64%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%75%72%6C%28%68%74%74%70%3A%2F%2F%69%31%31%30%35%2E%70%68%6F%74%6F%62%75%63%6B%65%74%2E%63%6F%6D%2F%61%6C%62%75%6D%73%2F%68%33%35%36%2F%4F%7A%79%77%34%32%2F%64%65%6C%65%74%65%2E%70%6E%67%29%20%6E%6F%2D%72%65%70%65%61%74%20%73%63%72%6F%6C%6C%20%30%25%3B%20%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%20%2F%2A%74%68%69%73%20%72%65%70%6C%61%63%65%73%20%66%6C%6F%61%74%20%2D%20%66%69%78%65%73%20%74%68%61%6E%6B%73%20%74%6F%20%4C%61%72%72%79%20%6F%66%68%74%74%70%3A%2F%2F%62%6C%6F%67%2E%6C%72%6F%6F%74%2E%63%6F%6D%2A%2F%68%65%69%67%68%74%3A%31%38%70%78%3B%20%77%69%64%74%68%3A%31%39%70%78%3B%20%6D%61%72%67%69%6E%3A%30%20%30%20%30%20%39%30%30%70%78%3B%20%2F%2A%74%68%69%73%20%77%61%73%20%75%70%64%61%74%65%64%2A%2F%70%61%64%64%69%6E%67%3A%39%70%78%20%35%70%78%7D%0A%23%74%6F%5F%74%6F%70%20%61%7B%70%61%64%64%69%6E%67%3A%38%70%78%7D'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>

7. Untuk url berwarna biru bisa anda ganti sesuka anda dengan url gambar anda sendiri. Setelah itu Cari Kode </head>, Setelah anda meemukannya letakkan kode dibawah ini tepat diatasnya..

<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%3C%73%63%72%69%70%74%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%73%69%74%65%73%2E%67%6F%6F%67%6C%65%2E%63%6F%6D%2F%73%69%74%65%2F%61%73%72%69%7A%61%6C%6F%66%66%69%63%69%61%6C%77%65%62%2F%6A%61%76%61%73%63%72%69%70%74%2F%53%74%72%69%70%74%2D%61%64%2E%6A%73%27%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%2F%3E'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>

8. Setelah itu cari kode <body>, terus letakkan kode dibawah ini tepat dibawahnya..

<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%3C%64%69%76%20%69%64%3D%27%6D%74%61%5F%62%61%72%27%3E%0A%3C%64%69%76%20%69%64%3D%27%6C%65%66%74%5F%62%61%72%33%27%3E%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%63%65%6E%74%65%72%27%2F%3E%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%69%64%3D%27%6C%65%66%74%5F%62%61%72%32%27%3E%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%6C%65%66%74%27%3E%0A'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>

<a href='URL FACEBOOK ANDA/FACEBOOK GROUP'>NAMA FACEBOOK ANDA/FACEBOOK GROUP</a>

<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%3C%2F%73%70%61%6E%3E%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%69%64%3D%27%6C%65%66%74%5F%62%61%72%27%3E%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%63%65%6E%74%65%72%27%3E%0A'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>

<a href='URL BLOG ANDA/'>NAMA BLOG ANDA</a>

<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%3C%2F%73%70%61%6E%3E%3C%2F%64%69%76%3E'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>



<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%72%69%67%68%74%27%20%6F%6E%6D%6F%75%73%65%6F%75%74%3D%27%73%65%6C%66%2E%73%74%61%74%75%73%3D%26%61%70%6F%73%3B%26%61%70%6F%73%3B%27%20%6F%6E%6D%6F%75%73%65%6F%76%65%72%3D%27%73%65%6C%66%2E%73%74%61%74%75%73%3D%26%61%70%6F%73%3B%61%73%72%69%7A%61%6C%77%61%68%64%61%6E%77%69%6C%73%61%26%61%70%6F%73%3B%3B%72%65%74%75%72%6E%20%74%72%75%65%3B%27%3E%20%3C%69%6D%67%20%61%6C%69%67%6E%3D%27%61%62%73%6D%69%64%64%6C%65%27%20%62%6F%72%64%65%72%3D%27%30%27%20%6F%6E%43%6C%69%63%6B%3D%27%63%6C%6F%73%65%54%6F%70%41%64%73%28%29%3B%72%65%74%75%72%6E%20%66%61%6C%73%65%3B%27%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%69%31%31%30%35%2E%70%68%6F%74%6F%62%75%63%6B%65%74%2E%63%6F%6D%2F%61%6C%62%75%6D%73%2F%68%33%35%36%2F%4F%7A%79%77%34%32%2F%64%65%6C%65%74%65%2E%70%6E%67%27%20%73%74%79%6C%65%3D%27%63%75%72%73%6F%72%3A%68%61%6E%64%3B%63%75%72%73%6F%72%3A%70%6F%69%6E%74%65%72%3B%27%2F%3E%3C%2F%73%70%61%6E%3E%3C%2F%64%69%76%3E'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>

9. Untuk yang berwarna merah danbiru bisa anda isi/ganti dengan url blog dan nama blog anda,
Contoh :

 <a href='http://www.facebook.com/home.php?sk=group_151944778194641'>Back Packer Grup</a>

 <a href='http://infokanca.blogspot.com/'>infokanca.blogspot.com</a>

10. simpan template dan lihat hasilnya..


Selamat Mencoba ..... :-)

Membuat Slide Recent Post

Banyak cara untuk menampilkan recent post atau postingan terbaru. Di blog ini saja ada banyak tutorial atau pelajaran yang membahas tentang recent post. Coba ketik saja di search box "recent post".

Sekarang kita akan belajar menampilkan recent post lebih menarik lagi. Kita membuat slide recent post, yang akan disertai thumbnail, judul terbaru, tanggal dipublish dan jumlah komentar. Ya karena slide, berarti terus bergerak dan bergantian. Widget slide recent post ini cocok dipasang di sidebar.



Cara Membuat Slide Recent Post
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--


#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}


-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[1] = "http://i1037.photobucket.com/albums/a452/thing_wu/Thing/women/2q1bhc3.jpg";
imgr[2] = "http://i1044.photobucket.com/albums/b443/akropolis_album/antarktis/125model6-1.jpg";
imgr[3] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[4] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://infokanca.blogspot.com/";
limitspy=4
intervalspy=4000
</script>


<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Sebelum kita Simpan, berikut ini yang bisa kita ubah:

220 dan 208 adalah lebar widget.
numposts = 10; adalah banyaknya postingan yg ingin kita tampilkan
Ganti http://infokanca.blogspot.com/ dengan URL blog kita sendiri.

5. Simpan jika sudah selesai.

Selamat Mencoba

Cara Praktis Buat Read More Manual Di Blogspot

Kali ini saya akan membahas cara membuat Read More di Blog. read More ini berfungsi untuk mengecilkan artikel di halaman blog, dengan artian blog anda tidak akan tampail memanjang kebawah kalau di buka halam utamanya, oce dech berikut caranya :

1. Buka menu Layout kemudian pilih Edit HTML pada blog anda.

2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog anda :

    <p><data:post.body/></p>

Untuk mempermudah klik search dengan cara Control+F lalu pastekan kode di atas.

4. kalau sudah ketemu, ganti kode di atas dengan kode berikut :

    <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>

Tulisan read More di kode di atas bisa anda ganti dengan "Baca Selanjutnya" atau terserah anda dech...

5. Simpan hasil editan tersebut.

6. Lalu pilih menu Setting lalu pilih Formatting.

7. Pada kotak "Post Template" yang berada paling bawah biasanya, lalu isikan kode berikut:

    <span class="fullpost">


    </span>



8. Simpan Settingan anda.

9. Ketika memposting, kan disana ada 2 tab pilihan, yang "Compose" dan "Edit Html", Nah anda pilih Yang "Edit HTML" dech, Maka secara otomatis akan tampak kode seperti berikut :

    <span class="fullpost">

    </span>



10. Letakkan posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") sebelum kode ini :

    <span class="fullpost">

Sementara sisanya yaitu keseluruhan posting letakkan di antara kode


    <span class="fullpost">

Dan

    </span>


11. Jangan Lupa simpan postingan anda

Cara melebarkan/mempersempit tampilan halaman blogspot

Berikut ini adalah cara-cara untuk melebarkan ataupun mempersempit tampilan blog punya kita saya tidak akan kasih tahu secara detailnya tapi hanya garis besarnya saja, Apabila kamu pakai blogspot silahkan menuju menu edit html. tidak usah memberikan tanda centang pada kolom expand template widget selanjutnya cari kode css #outer-wrapper, #main-wrapper dan #sidebar-wrapper. untuk lebih mudahnya silahkan tekan Ctrl+F dan ketikan kode yang anda cari.Jika sudah ketemu silahkan nilai angka dibawah tulisan #outer-wrapper, #main-wrapper dan #sidebar-wrapper diganti sesuka kamu tentunya di sesuaikan dengan kondisi monitor anda bukan?

Berikut penjelasan mengenai #outer-wrapper, #main-wrapper dan #sidebar-wrapper
#outer-wrapper –> kode untuk melebarkan halaman blog.
#main-wrapper –> kode untuk melebarkan postingan blog
#sidebar-wrapper –> kode untuk melebarkan sidebar blog.

jika langkah diatas tidak bisa andai pakai / atau kode diatas tidak muncul dipencarian anda bisa memakai cara ini antara lain : 

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.
2. Kemudian klik pada Edit HTML.
3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.
4. Kemudian centanglah Expand Template Widget.
5. Kemudian carilah kode ]]></b:skin> untuk mempermudah tekan tombol ctrl + F.

6. selah anda menemukan kode tersebut lihat kode dibawahnya, contohnya seperti dibawah ini :

 <b:template-skin>
      <b:variable default='930px' name='content.width' type='length' value='930px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='360px'/>
      <b:variable default='360px' name='main.column.right.width' type='length' value='360px'/> 

 angka yang berwarna merah bisa anda rubah sesuai keinginan anda,

ket : baris pertama pada angka 930 itu adalah ukuran lebar/sempitnya halaman

        baris kedua adalah ukuran lebar sidebar sebelah kiri

        baris ketiga adalah  ukuran lebar sidebar sebelah kanan

7. setelah anda rubah angka2 tersebut sesuai dengan keinginan anda, simpan template dan lihat hasilnya..

 Selamat Mencoba ..... :-)