Cara Posting HTML di Blog

Posting pada blog adalah kegiatan yang pasti selalu dilakukan oleh blogger, nah setiap posting kebanyakan hanya artikel berbentuk text saja. Bagaimana apabila ingin posting KODE HTML.

Untuk Memposting HTML tidak bisa hanya di copy paste saja, untuk memposting kode html terlebih dahulu kode html harus di Konversi agar bisa tampil di Posting Blog, lalu bagaimana caranya dan bagaimana mendapatkan CONVERTER HTML itu?

Berikut ini saya akan menjelaskan bagaimana Cara Memposting Kode HTML di Blog dan Cara Buat HTML CONVERTER Di Blog. Sebenarnya para  blogger sudah sangat familiar dengan Posting HTML ini, tapi saya hanya ingin menambah koleksi post Blog ini yang masih banyka kekurangan, dan ingin membantu teman blogger yang mungkin saja belum tau.

Oke cuy berikut CARA POSTING HTML DAN CARA BUAT CONVERT HTML

1. Silahkan Convert terlebih dahulu Kode HTML anda sebelum di Post pada Tools penyedia HTML Convert Di bawah :

http://centricle.com/tools/html-entities/

Atau Klik   Disini   
2. Setelah Convert HTML barulah anda Copy ke posting Blog seperti biasa.

Sebenarnya banyak penyedia Tools seperti di atas, saya rasa cukup satu saja, karena cara kerjanya kurang lebih sama,

NAH sekarang saya akan ajak anda untuk Membuat HTML CONVERTER DI BLOG, apabila anda memasang Converter HTML di blog tentu akan memudahakan anda apabila setiap kali ingin Posting HTML.

Terima Kasih,,, Semoga Bermanfaat,,, Jangan Lupa Komentar Anda

Convert Kode HTML

Copy code HTML sobat pada kolom di bawah ini, kemudian klik convert,,, 
Copy code yang sudah sobat konvert ke halaman posting sobat..


Tinggalkan Komentar anda,,, OK...

Pasang icon disamping judul posting

Memasang Icon pada Judul Posting akan membuat judul blog lebih menarik dan ciamik untuk di lihat sebagai contohnya liat saja di samping kiri judul postingan ini, kang salman pasang gambar rumah,  kalau anda sendiri mau apa? 

Ini adalah contoh yang akan kita buat :
Judul Postingan Anda.

Bagi teman-teman yang ingin membuat sesuatu seperti di atas, silahkan untuk memperaktekkan langkah2 berikut

1.   Login ke Blogger
2.   Klik Tata Letak/Rancangan.
3.   Klik Edit HTML
4.   Centang "Expand Widget Template"
5.   Lalu carilah kode: <a expr:href='data:post.url'>   

dan letakkan script berikut setelahnya 
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibBhVb0ZyHF5XM77MMSZAOzUuF72juf1AzlrIRgT1krG2easCFNe0NsnOwd2pmZ4OqnlNl_cXJ21Srb0AiquhuAK6o049ql8jEnCZI_z92m5JV9WbP98MXS-j_j4PG36wsMPZRmiJPk-St/s1600/panah_post_oktri.gif'/>


Ganti URL Merah  dengan URL gambar/icon anda
6.   Simpan hasil kerjaan anda. dan lihat hasilnya.
Oke sobat informasi maya selamat mencoba salam Blogger! 

Header tampil beda dengan Supalogo (Update)

Salah satu ciri khas dari sebuah Website atau blog adalah Header. Headermerupakan bagian atas dari blog yang menggambarkan tentang kondisi atau cirri dari blog tsb. Banyak yang menyangka jika ingin membuat header yang cantik dan menarik harus menguasai setidaknya Photoshop atau Corel. Itu memang dibenarkan, tetapi seiring berjalannya waktu pembuatan header sudah sangatlah mudah banyak situs yang menyediakan jasa pembuatan header blog secara online, baik free maupun prabayar.

Disini saya akan memaparkan cara membuat header blog dengan memanfaatkan penyedia jasa pembuatan header “GRATIS” ikuti langkah – langkahnya :

@ Buka supalogo.com atau anda bisa searching via google.com dengan mengetikkan kata kunci.

@ Masukkan nama blog anda pada kolom yang disediakan

@ Hasilnya akan langsung ditampilkan pilih download untuk mengambil gambar.
Mudah bukan anda dapat menyesuaikan dengan warna template anda“SELAMAT BERKREASI” 

source : kang oktri

Pasang Widget Free Send SMS menggunakan css3

 Halo pengunjung DeOlenC'zaiV, kali ini saya akan share bagaiman cara memasang widget kirim sms online, tanpa bayar, tarif siang malam (GRATIS POOLLL) hohoho.... dengan menggunakan code css3, akhirnya terciptalah sebuah widget keren "sms gratis waccchhh",,, penasan pengen coba, langsung aja ikuti langkah-langkah berikut :

• Pertama Login dulu di Blogger.com
• Kedua, Dasbor (tampilan setelah sobat login di blogger)
• Kemudian Klik menu Rancangan
• Pilih Elemen laman
• Klik tambah widget
• Pilih HTML/javascript
• Copas code css berikut :

<style type="text/css"><br /> .boxsmsluar2 {<br /> height:190px;<br /> width:186px;<br /> padding:5px;<br /> overflow:hidden;<br /> border:3px solid #999;<br /> border-radius:8px;<br /> -moz-border-radius:8px;<br /> -webkit-border-radius:8px;<br /> -o-transition:all 1.1s ease-out;<br /> -moz-transition:all 1.1s ease-out;<br /> -webkit-transition:all 1.1s ease-out;<br /> background:#555 url() top center no-repeat;<br /> background-position: 12px 92px; <br /> }<br /> .boxsmsluar2:hover {<br /> height:380px;<br /> background:#CC9966 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgRasterBlackTransV8H8.png);<br /> border-color:#663300;<br /> }<br /> .boxsmsluar2 iframe {<br /> background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/bgsms2.jpg);<br /> border:2px solid #666; <br /> border-radius:8px;<br /> -moz-border-radius:8px;<br /> -webkit-border-radius:8px;<br /> }<br /> .boxsmsluar2 .boxsmsdalam2{<br /> overflow:hidden;<br /> opacity:0.5;<br /> height:76px;<br /> margin:0; /* original code by:gubhugreyot.blogspot.com */<br /> padding:0;<br /> border-radius:8px;<br /> -moz-border-radius:8px;<br /> -webkit-border-radius:8px;<br /> box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;<br /> -moz-box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;<br /> -webkit-box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff; <br /> -o-transition:all 1.8s ease-out;<br /> -moz-transition:all 1.8s ease-out;<br /> -webkit-transition:all 1.8s ease-out;<br /> }<br /> .boxsmsluar2:hover .boxsmsdalam2 {<br /> height:380px;<br /> opacity:1.0; /* original code by:gubhugreyot.blogspot.com */<br /> -o-transition:all 1.5s ease-in;<br /> -moz-transition:all 1.5s ease-in;<br /> -webkit-transition:all 1.5s ease-in; <br /> }<br /> .boxsmsluar2 a {padding:2px 8px;margin:0 auto;display:block;text-align:center;font-family:Verdana;color:red;font-size:16px;font-weight:normal;text-shadow:1px 1px 1px #000;font-weight:bold; border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-o-transition:all 1.5s ease-in;-moz-transition:all 1.5s ease-in;-webkit-transition:all 1.5s ease-in;}<br /> .boxsmsluar2 a:hover {color:blue;background:#999;width:170px;text-decoration:none;}<br /> </style><br /> <div class="boxsmsluar2"><br /> <div class="boxsmsdalam2"><br /> <iframe height="340" name="I2" src="http://divasms.com/widget" width="170">&amp;lt;p&amp;gt;&amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;not support &amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;&amp;lt;/p&amp;gt;</iframe><br /> </div><br /> </div>

• Setelah di copas code css di atas, lakukan tips tercanggih berikut
• Gak usah repot, Langsung simpen templatenya dah,,,

Membuat Vertical Sliding Info Panel Dengan JQuery (Update)

Membuat Vertical Sliding Info Panel Dengan JQuery, itulah yang akan saya share pada kesempatan kali ini. Setelah kemarin blogwalking kesana-kesini, ada beberapa sobat blogger (oEmar, & kawan2nya) yang menanyakan bagaimana sih caranya membuat menu Info Panel, seperti menu dipojok kiri atas blog sobat?? Selagi saya sempat dan bisa, pasti saya buatkan tutorialnya, ini juga saya cari sana-sini koq. cuman untuk CSS dan tambahan menu, saya modifikasi sendiri. dan pastinya untuk kode CSS-nya lebih simple.
Untuk lebih jelasnya silahkan sobat lihat gambar/demonya dibawah ini.

Kiranya seperti gambar diataslah yang kali ini akan saya share.
Berikut langkah-langkah membuatnya:

1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Tekan Ctrl+F (untuk mempermudah pencarian) dan cari kode: ]]></b:skin>

7. Taruhlah kode CSS berikut tepat diatas kode:  ]]></b:skin>

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #666;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px 30px 30px 100px}
.panel p{color:#fff;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZUNCxaVxyQP3AhpD-9lXZGXqfnzQpciiCLGXt_YVWDoiMivWsHIE0wY0n-Uunm_pMLsCq-3bEJ8eCr0avo6jkj2ILc17G1bRDuCL92N_ZRXXtQ3CvW_nfwKkY7qYNeJ1dQ6tPE7xLQI/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 35px 10px 10px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheZUNCxaVxyQP3AhpD-9lXZGXqfnzQpciiCLGXt_YVWDoiMivWsHIE0wY0n-Uunm_pMLsCq-3bEJ8eCr0avo6jkj2ILc17G1bRDuCL92N_ZRXXtQ3CvW_nfwKkY7qYNeJ1dQ6tPE7xLQI/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 40px 10px 10px}
a.active.trigger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9pJXBHJLEsMfeDlEAzhvRxBVflcJlJOpDDDPBwlUHy5ZW4USa8kiBwr2nl-mvKsnuaXEhRwHanKDsMgsujxQI1VUTY4c3b4CaKIPPRKBptiTyK5FeouWKLzs6_iZ2ZVJhUp7ihyphenhyphenSKNo4/s320/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none}
.panel img{border:1px solid #666;float:right;margin:3px 0px 6px 5px;padding:2px}
.panel h3{border-bottom:1px solid #666;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#fff;font-size:13px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

8. Kalau sudah, cari kembali kode: </head> dan taruh kode JavaScript berikut, tepat diatasnya

<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>


<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>

9. Simpan/Save Template.

Langkah terkahir, agar menu Info panel-nya bisa nongol di blog sobat,
Masuk ke:
> Tata Letak/Rancangan
> ADD New Widget
> Tambah Gadget
> Pilih HTML?Javascript

Kemudian Masukan kode dibawah :



<div class='panel'>
<center><font size="3"><a href="http://www.olenc.co.tv"target=_blank"><div style="color: #7FFF00;">
<span >OlenC'z</span></div></a></font></center>
<h3>Welcome to my blog, I hope you are interested to visit again</h3>
<p style="text-align:justify">Regards Bloggers | It was nice to bloggers are willing to stop here. hopefully you can get what you need of this my blog. Thanks Has Visited In my blog, and if acceptable please comment and follow my blog, with our expectations as a fellow blogger can establish silaturrahmi among fellow bloggers.
<br/>
<a title="Cheliel Rahman" target="_blank" href="http://www.blogger.com/profile/01688679903745808485">Learn more about the author</a></p>
<h3>Overview of the authors</h3>
<img width="73px" height="73px" alt="OlenC'z_MATsDA" src="http://i1096.photobucket.com/albums/g337/Vilza_Net/FunPhotoBox062205s3wlbwuz.gif" />
<p>My name is Chaliel_Rahman<br/>
I am an operator in Vilza.net Kangenan Pamekasa, SMK MATsDA Year 2011 Graduates</p>
<div class='columns'>
<div class='colleft'>
<a href:"http://www.olenc.co.tv/2011/06/membuat-vertical-sliding-info-panel.html/">Klik Disini untuk mendapatkan widget ini</a>
<h3>Social Stuff</h3>
<a href="feeds/posts/default"><img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_4QIZ0_Wz4Fy-5vRjhFGceJj3kAWWCs4ALeaeustR01QITAZ1IrZ8BM3k_RUhvL9eEe8nzFBzPu3NUu8tnmIp5fn5XKhDtblou-ncERmrE7ySv47hFnWEYEKs-Ls7b3APhgwaMgJCyk/s320/r.png" /></a>
<a href="https://twitter.com/#!/DeOlenczaiv"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wONfqd_FFw5MRZnUBwxZwddxqj6HrzVxQ31FvIcYQ-j45_rRVXBIPKCDRUWLCuXFeuf9_j3rMOmC0Vt529Xu2HLpVeeosB1b88vTf3Me4CzfNTzOrPS0wHs8llUAOigXtm0mAXgolcU/s320/t.png" /></a>
<a href="http://www.facebook.com/DeOlenCz9BLenK4lWayZ"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9QeS0QcLQ98dlThGly_bvBU_or7DXUIcq5TJudyFKzflcLn6PD3wqkyVCnhEwQdosy86tG0uLAyLdVsQuWnH4qOaaURex1Bboq1G-NbQI5GmZtUuVH0R6yaBvtrNFdQoo9ceuuDPr7tM/s320/f.png" /></a>
<a href="http://www.olenc.co.tv/"><img alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6rP-_NPQXjvVaQ1ZExseFoF3o3RPU3g8at6ypM-eC_l7w3HApn0wPbT8TScZNoVlhBx3x-LhYAP2PNieYURwc-uaVX8QWpGvMLcMflHSndNrigp-ZOv15ubZNONZBF1LP5OA0edLVnBM/s320/b.png" /></a>
</div>
</div>
</div>
<a class='trigger' href='#'>Info</a>


Seppp sampai disini selesai sob, Simpan dan lihatlah hasinya.
Eittt... tunggu dulu, sebelum menyimpannya harap rubahlah untuk kode widget ditas, sebab nanti prifile sayalah yang keluar diblog sobat. hehehe :p


Tambahan:
BIla dalam pemasangan Info panel di blog sobat bermasalah? ini bisa dikarenakan kode.js di template sobat double, dan mungkin diblog sobat sudah tepasang kode jquery-1.3.2.js atau semacamnya. Untuk itu hapuslah salah satu kode.js tersebut.
jadi bila ditemplate sobat sudah terdapat jquery-1.3.2.js, maka sobat tidak perlu lagi menambahkan kode.js tersebut.
Ok... Selamat mencoba, dan semoga bermanfaat.

Cara Pasang Author di bawah Posing Blog (Update)

Hello Pembaca Olenc.co.tv Pada Tutorial Blog kali ini saya akan berbagi Tutorial Cara Membuat Author Box Di Bawah Postingan Blog, Author Box Ini Bertujuan Agar Pengunjung Mengetahui Siapa Penulis Artikel Yg Ada Di Blog Sobat Semua Untuk melihat Contohnya obat Bisa Melihat Pas Dibawah Artikel Ini Ada About Authornya.Atau Juga Sobat Bisa Melihat Gambar Yg Ada Di atas Artikel Ini.
Jika Sobat Berkenan Memasangnya Sobat Bisa Mengikuti Langkah-Langkah Berikut: 


1. Login Ke Akun Blogger Sobat  
2. Pada Dasbor Pilih Rancangan --> Edit HTML Dan Jangan Lupa UntukCentang Kolom Expand Template     Widget
3. Letakan Kode Berikut Tepat Diatas Kode ]]></b:skin>

.teja{background:#000;margin:20px 0 40px 0;padding:10px;overflow:auto;color:#fff}
.teja p{margin:0;padding:0}.teja a{color:#FFF}
.teja img{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CujFmrY7KlnNYwageToW7fE-xQm8b9rEFFJBwR8wiYaxdUpva5SZL7a8xmGeCveOVoHVVHvvwKDvP4BKq7GYPZ8hiLjflgCgTDHPr7cLzJxZ-n8w55fNjv6T4oTMo7v38lgA5oEkzkpN/s1600/bg-img-auhtor.gif)no-repeat;float:Left;margin:0 10px 0 0;padding:4px}

4. Cari Kode <div class='post-footer-line post-footer-line-1'>  Agar Memudahkan Pencarian Gunakan CTRL F Atau F3

5.Letakan Kode Berikut Tepat Dibawah Kode <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <div class='teja'>

<p><img alt='' class='avatar avatar-70 photo' height='130' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8mmcDtodFNCqL3GHIkAbrbPdf9XuLs6Sgmv43XegshLo9cARuCRlPcFd0-MmXYp2s2Ibd4xfaBGxmXUsG3Ni8ECGCTSD8CQdiKMllJIWX5oQ6jAdE-eHYtbYh02Lumv6xAifSBgLDlZk/s1600/author.png' width='100'/><div style='font-family: kristen itc; color: rgb(255, 0, 0);'><b>ABOUT THE AUTHOR</b></div>

<div style='text-align: justify; font-family:bedizen'><a href='http://www.olenc.co.tv//' target='new'><b>OlenC'z : </b></a>Seorang Manusia yang selalu ingin menjadi lebih baik 

</div></p>

</div>

    </b:if>

 6.Simpan Templatenya

CATATAN: Sobat Bisa Mengubah Url Gambar Yg Berwarna Merah Dengan Url Gambar Sobat
                     Dan Ubah kata kata Yg Berwarna Kuning Dengan Kata kata sobat sendiri 

Semoga Berhasil... Jangan Lupa Komentar Sobat... 

Percantik Blog Dengan Tombol Wibia (Update)

Wibiya.com merupakan salah satu web yang menyediakan widget untuk mempercantik blog anda. Diantaranya sebuah toolbar multifungsi. Toolbar yang mirip dengan toolbar yang ada pada halaman facebook anda. Toolbar wibiya kaya dengan fitur-fitur, anda dapat menambah dan menghapusnya kapan anda suka. 

Cukup 4 langkah saja untuk memasang toolbar wibiya pada blog. Berikut ini cara memasang toolbar wibiya pada blog : 

Langkah Pertama

1. Kunjungi wibiya.com, klik disini 

2. Pada halaman depan wibiya.com, klik tombol Get It now 

3. Di halaman Create An Account, isi dengan data yang diminta. Setelah itu, ketik kode captcha yang tampil. Selanjutnya klik tombol Next pada sebelah kiri halaman. 

 

Langkah Kedua Anda berada di halaman Select A Theme, pilih salah satu tema yang anda sukai. Kemudian klik tombol Next. 

Langkah Ketiga Di halaman Select Your Apps, wibiya.com telah menyediakan fitur-fitur lengkap buat anda. Namun jika anda tidak berkenan dengan salah satu aplikasi yang disediakan, anda boleh menghapus aplikasi tersebut. Jika sudah, Klik tombol Next untuk melanjutkan. 

Selanjutnya anda diharuskan untuk mengisi form berikut. Isi data sesuai yang diminta. Jika sudah, klik tombol Done. 

Langkah Keempat Di halaman Add It, pilih icon blogger jika anda mau memasang toolbar wibiya pada blog anda di blogger. Ikuti saja langkah-langkah berikutnya, maka secara otomatis toolbar wibiya akan terpasang melintang Horizontal pada bagian bawah blog anda. 

Jika toolbar wibiya tidak terpasang pada bagian bawah blog anda, silahkan copy script toolbar wibiya tersebut, kemudian letakkan sebelum pada halaman Edit Html.

Selamat mencoba …… Semoga Berhasil...

Membuat Iklan Melayang Di Blog (Modief)

Hello Pengunjung Olenc.co.tv, Kembali lagi di Tips Bloggere,kita berjumpa lagi dlm acara tutorial kali ini Cara Membuat Iklan Yang Muncul Tiba-tiba (Ads popout) Mungkin sebagian pengunjung sudah tahu ...


Untuk cara membuatnya silahkan simpan Kode di bawah ini pada, MenuRancangan, Elemen Laman, Tambah Gadget, Html/Java Script :

<style type="text/css">

#topbar {

 position:absolute;

 z-index: 100;

 padding: 8px;

 background: #eee;

 background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));

 background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));

 border: 1px solid #fff;

 border-radius: 10px;

 -webkit-border-radius: 10px;

 -moz-border-radius: 10px;

 -webkit-box-shadow: #600 0 2px 15px;

 -moz-box-shadow: #600 0 2px 10px;

 margin:0 auto 10px;

 float:left;

 color:rgba(0, 0, 0, 0.75);

 font-size: 12px;

 font-family: Verdana, serif;

 text-shadow:0 1px 0 #FFFFFF;

}

#topbar img {

 border:none;

}

#topbar .tombol {

 margin:0;

 padding-bottom:5px;

 text-align:right;

}

#topbar .tombol button {

 color:#FFFFFF;

 border: solid 1px #494949;

 margin:0;

 padding:2px 15px;

 cursor: pointer;

 text-shadow: 0 1px 1px rgba(0,0,0,.6);

 background: #5f5f5f;

 background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));

 background: -moz-linear-gradient(top, red,  #454545);

}

#topbar .isi_iklan {

 background-color:#FFFFFF;

 margin:0;

 padding:4px;

 width: 468px;

 border: 1px solid #999;

}

</style>

<script src="http://kangdadang.googlecode.com/files/js_pop_up.js" type="text/javascript"></script>

<script type="text/javascript">

var persistclose=1

var startX = 20

var startY = 20

var verticalpos="fromtop"

</script>

<div id="topbar">

<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>

<div class="isi_iklan">

<!-- Kode Iklan Letakkan Disini-->

</div>

</div>

Kalo udah, jgn lupa tips paling manjur ini, yaitu :

hhh,mmmm,,,, Simpan Donk,,,, hohoo,,,, 

Selamat Mencoba, Semoga Sukses,,, & Jangan lupa Komentarnya... OK..