Membuat Iklan Melayang Dengan Tombol Close

Kenapa kita membuat iklan yang melayang???Karna dengan membuat iklan melayang,para pengunjug blog anda secara tidak langsung melihat iklan anda,dan harus mengklik close agar iklan tersebut bisa hilang atau keluar.beda dengan iklan yang hanya di simpan di pinggir atau di bawah blog.iklan di pinggir atau di bawah blog kemungkinan kecil bisa di lihat oleh pengunjung blog anda.di sini saya akan membahas iklan yang melayang di blog dengan 1 close.yang artinya iklan akan hilang apabila mengklik close dengan 1 kali klik.bukan 2 klik.jadi membuat pengunjung anda tidak repot untuk mengklik 2 kali agar si iklan nya bisa hilang.
oke ga usah panjang lebar ceritanya kita langsung aja mulai membuat iklan melayang di blog anda.
Pertama kamu harus login dulu ke blogspot dengan id blog kamu..setelah itu masuk ke rancangan lalu pilih edit halaman..pilih tambah gadget.pilih gadgethtml/javascript.lalu copy paste html berikut..



<style >
#topbar{
position:absolute;
visibility: hidden;
width: 500px;
z-index: 100;
padding:5px;
background-color: #000000;
border: 1px solid #A5BD51;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #FFFFFF;
text-align: justify;
font-size: 14px;
font-family: Verdana, serif;
}
</style>

<script src=" http://yourjavascript.com/04913141539/coppasdot3.js "></script>
<script >
var persistclose=0
var startX = 240
var startY = 100
var verticalpos="fromtop"
</script>

Sumber: http://id.shvoong.com/business-management/mo ney-online/2173724-bikin-iklan-melayang-di-halaman/#ixzz1T07v75Y2

<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false">
<img src="http://im-fact.com/images/Close.png" /></a></div>

MASUKAN KODE IKLAN ANDA YANG DI BERIKAN PENYEDIA IKLAN ANDA

<div align="center"><font color="#FFFFFF">
..::: Mau Pasang Window Seperti
<a href="http://coppasdot.blogspot.com/2013/04/membuat-iklan-melayang-dengan-tombol.html">
<strong>Ini ?</strong></a> :::..
</font></div><br /></div> 



lalu simpan deh..sekarang lihat blog anda.. 
semoga sukses.. 
Tambahan..text yang di cetak miring dan tebal bisa di ganti dengan kode iklan atau pun kode benner yang di berikan oleh penyedia iklan anda..dan simpan gadget di tengah halaman atau di pinggir..tapi menusrut saya lebih baik simpan nya di tengah. 
Sebenarnya masih banyak kode javascript atau html untuk menampilkan iklan melayang di blog.tapi menurut saya yang lebih menarik adalah kode javascript atau html yang saya postingkan..selain tampilan nya menarik untuk para pengunjung blog.pengunjung blog juga ga usah ribet untuk meng close iklan tersebut..karna kode tersebut di seting dengan 1 klik close..jadi ga bkin pengunjung blog ribet buat meng close iklan dengan 2 klik atau double klik.
bila anda mencari masih banyak artikel yang menarik..langsung saja kunjungi blog saya di http://panji-mbinx.blogspot.com 
bagi anda yang menyukai artikel ini tolong kasih komentar dan ratting artikel ini..

Read More

Cara Merubah Tag Heading H1 H2 H3 Agar Seo Friendly

Dalam template bawaan blogger sepertinya dalam penyusunan tag heading tidak tertata rapi / tidak beraturan. Maka supaya template anda tersusun dengan rapi dalam tag headingnya dan akan cepat terindeks oleh google, diusahakan merubah tag heading yang ada pada template bawaan blogspot tersebut. 

Supaya menjadi Seo Friendly maka Tag Heading H1, H2, H3 tersebut perlu untuk diatur kembali penyusunannya. Tag heading yang benar akan mampu meningkatkan kualitas blog terhadap optimasi SEO.

     1. Tag Heading H1 = adalah title/judul blog
     2. Tag Heading H2 = adalah judul postingan/artikel
     3. Tag Heading H3 = adalah widget

 Berikut Cara Merubah Tag Heading H1 H2 H3 Agar SEO Friendly
     1. Login ke Blogger anda
     2. Rancangan
     3. Edit HTML dan centang Expand Widget Template

•  Cara di bawah ini yaitu menjadikan tag h2 sebagai judul postingan/artikel

 <b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

      4.  Silahkan ubah tag h3 menjadi h1

•  Lanjut dengan merubah Tag Heading pada widget 

      1.  Carilah kode seperti dibawah ini pada template anda :

   <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if>

       2   Silahkan anda ganti tag h2 menjadi h3
            (Tergantung pada widget anda di homepage, apabila widget anda ada 7 buah, ya ubah 
            yang 7 buah widget anda di homepage untuk menjadikan tag h2 menjadi h3)
       3.  Selesai dan simpan template
       4   Cek hasilnya dengan klik link ini : H and ALT Tag Checker 
    

    Kemudian Cari Kode ]]></b:skin> Letakkan kode berikut diatas kode    ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

Tujuannya adalah membuat judul yang awalnya berubah menjadi berukuran sangat besar karena diubah menjadi <h1> kembali menjadi berukuran sedang.

     5.  Klik save template
     6.  Selesai..

Read More

Membuat Popular Post Bergerak V.2

BERIKUT LANGKAH-LANGKAH ATAU CARA MEMBUAT POPULAR POST BERGERAK KEATAS


1. Login ke blog dulu, kemudian anda masuk ke DESAIN --> TATA LETAK
2. Sudah! kemudian tambah widget = klik gadget
3. Pilih entri popular, centang semua kotak
4. Simpan/SAVE

Apabila Gadget sudah terpasang kemudian klik Desain-Template yang posisinya dibawah Tata Letak. Kemudian klik Edit HTML, jangan lupa centang Expand widget.

Setelah langkah diatas, kemudian selanjutnya Cara membuat popular post bergerak pada blogspot adalah dengan mencari kode berikut:


Sobat Cari kode berikut:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>

Sudah ketemu, kemudian letakkan kode berikut setelah kode diatas.

<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
Setelah itu cari dibawahnya lagi kode </ul>, dan masukan kode dibawah ini tepat sebelum/diatas kode </ul> tersebut.

</marquee>




LIHAT HASIL PERPADUAN KODENYA, SEPERTI DIBAWAH INI
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if></b:if>
</li> </b:loop>
</marquee> </ul>
<b:include name='quickedit'/></div>
</div>
</b:includable>
</b:widget>

Semoga bermanfaat

Sumber Artikel : http://tipseofriendly.blogspot.com/2013/02/cara-membuat-popular-post-bergerak.html#ixzz2QpICpUGY

Read More

Mudah Membuat Textarea di Blog

Textarea pengertian lepasnya kurang lebih kumpulan kata, kalimat bahkan artikel sekalipun terdapat di dalam kotak area. Fungsinya biasanya untuk memudahkan user meng-Copy ke media lain dan tak kaha pentingnya yaitu untuk menghemat ruang blog. Untuk bentuknyapun widget ini bervariasi sesuai dengan kebutuhan dan selera masing-masing. Dan penempatanyapun bisa di area postingan juga di side bar.

Berikut ini adalah bentuk-bentuk Textarea :

1. Simple Textarea Standar/Biasa

    Kode :

    ,<textarea>Silahkan Isi Tulisan di sini</textarea>

    Hasil :



2. Textarea Bisa di Atur Ruanganya

    Kode :
   
    <textarea cols="20' rows="5">Silahkan isi apa saj di sini</textarea>



3. Textarea Untuk Password

    Kode :
   
    <input type="password" value="Tulisan yang nantinya gak kelihatan">

    Hasilnya :

    

4. Textarea dengan garis putus-putus

    Kode :
 
    <textarea cols="20" rows="5" style="border: 2px dashed;">Silahkan isi disini</textarea>



5. Textarea jika dklik auto Block

    Kode :

    <textarea cols="20" rows="5" onclick="this.focus(); this.select();">Silahkan isi di sini</textarea>

    Hasil :

   

6. Textarea Tombol Block

    Kode :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Silahkan Tulis apa saja di sini</textarea></p></div></form>

    Hasil :

Demikianlah, Cara Mudah Membuat Textarea di Blog ini semoga bermanfaat untuk kemaslahatan Blogger....

Read More

Mengirim SMS Gratis di Blog

SMS ( Short Message Service ) adalah suatu media yang biasa dipakai untuk mengirim pesan singkat dari satu orang ke satu orang dan bahkan dari satu orang ke banyak orang. Ketika kita hendak mengirim SMS menggunakan HP tentunya kartu yang kita punya harus sudah berisi pulsa aktif dan tidak sedang habis masa aktifnya. Terus bagaimana apabila kita sedang kehabisan pulsa dan ingin mengirim SMS ke do'i atau teman ? jangan takuuut.... sekarang ada alternatif jitu walaupun kita tidak punya pulsa tapi tetap bisa berkirim SMS yaitu dengan menggunakan Layanan SMS gratis dari www.sms-online.web.id. Sebenarnya masih banyak situs penyedia SMS gratis di Internet seperti www.freesms4us.com/, www.smsgratis2indonesia.com/, www.smsgratisan.us/, www.smsgratis.web.id/dll tapi saya hanya mengambil 1 ( satu ) saja yang sudah populer di Internet untuk di pakai di Blog ini  dan selebihnya bisa sobat cari di mesin pencari yang sudah populer.

Screeshot :

Cara penggunaanyapun sangat mudah sekali layaknya kita menggunakan HP, tinggal ketik No Tujuan, Isi SMS maksimal 160 karakter kemudian Klik Tombol " KIRIM ".

Cara memasang widget SMS ini cukup simple dan mudah dipahami, ikuti langkah-langkahnya :

Langkah pertama

Kode HTML Widget SMS :

<iframe name="widgetsms" src="http://www.sms-online.web.id/widget/" width="270" height="350" frameborder="0"></iframe>

Keterangan kode :

- Width="270" : untuk lebar Form SMS dan bisa di ganti sesuai selera

- Height="350" : untuk tinggi Form SMS dan bisa diganti sesuai selera

Langkah kedua

Widget SMS Gratis ini tidak beda dengan Cara memasang spoiler di blog, Cara mudah memasang kode warna di Blog, Cara mudah memasang widget Alquran digital Online di blog bisa dipasang di Postingan dan di Sidebar Blog.

 DI POSTINGAN 

1. Login ke Blogger sobat menggunakan Akun yang masih aktif

2. Pilih Elemen Rancangan

3. Pilih Entri Baru >> Beri Judul Posting >> Pilih Mode HTML

4. Copy kode di atas ( Kode HTML Widget SMS )

5. Kembalikan ke Mode Compose

6. Publish ( Publikasikan )

7. Lihat hasilnya

DI SIDEBAR BLOG 

1. Login ke Blogger

2. Pilih  Elemen Rancangan

3. Pilih Tata Letak >> Add Gadget >> Copy kode di atas ( Kode HTML Widget SMS )

4. Save/ Simpan 

5. Lihat hasilnya

Hasilnya :

Read More

Membuat Widget Popular Post Bergerak

cara membuat widget popular post bergerak

 

widget popular post adalah untuk menampilkan artikel yang sering dibaca sobat blogger pasti sudah tau semua kan ..he..hee.
Nah kali ini bagi sobat bloger yang ingin modif widget populer postnya supaya bisa  bergerak naik turun cukup mudah dan untuk menseting widget ini masuk di dasbord tata letak entri populer nah disitu anda bisa mensetting sesuai degan selera anda misalnya ingin menampilkan dengan tumbnail dan dan juga cuplikan semua tergantung keinginan sobat seperti ini gambarnya:

 
nah sedangkan untuk langkah langkah membuat Entri Populer supaya bisa bergerak naik turun sebagai berikut: 

• Logi ke dasbord
• Pilih Rancangan Tambahkan Gedget Entri Populer atau Populer Post kalau sobat belum pasang tapi kalau anda sudah pasang lewati aja
• Tambahkan Gedget lagi HTML Java Script
• Lalu copy code dibawah ini di HTML Java Script
• Dan  langkah terahir simpan

<style type="text/css" media="screen">
#PopularPosts1 { overflow:hidden;margin-top:5px;padding:0px 0px;height:280px; }
#PopularPosts1 ul {width:342px;overflow:hidden;list-style-type: none;padding: 0px 0px;margin:0px 0px;}
#PopularPosts1 li { width:334px;padding: 5px 5px;margin:0px 0px 5px 0px;list-style-type:none;float:none;height:80px;overflow: hidden;background:#fff url() repeat-x;border:1px solid #ddd;}
#PopularPosts1 li .item-title { color:#A5A9AB; font-size:1em; margin-bottom:0.5em;}
#PopularPosts1 li .item-title a { text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;margin:0px 0px;padding:0px 0px 2px 0px;}
#PopularPosts1 li img { float:left;margin-right:5px;background:#EFEFEF;border:0;}
#PopularPosts1 li .item-snippet { overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;padding:0px 0px;margin:0px 0px;}
#PopularPosts1 .item-snippet a,#PopularPosts1 .item-snippet a:visited { color:#3E4548; text-decoration: none;}
#PopularPosts1 .spyWrapper { height: 100%; overflow: hidden; position: relative; }
#PopularPosts1 { -webkit-border-radius: 5px; -moz-border-radius: 5px;}
.tags span,.tags a { -webkit-border-radius: 8px; -moz-border-radius: 8px;}
a img { border: 0;}
--></style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript" charset="utf-8">$(function () { $('.popular-posts ul').simpleSpy();});</script><script src="http://camporbawor.googlecode.com/files/popularpost2.js" type="text/javascript"></script>

okey semoga membantu salam blogger

Sumber : http://aly-ahmad.blogspot.com/2012/10/cara-membuat-widget-popular-post.html#ixzz2QmZLuCO9

Read More

Cara mengganti tag heading judul blog agar menjadi lebih SEO friendly

Assalamualaikum..

Kembali lagi kali ini kita membahas permasalahan SEO, dan yang akan dibahas kali ini adalah Cara mengganti tag heading judul blog agar menjadi lebih SEO friendly.

Mesin pencari google lebih menyukai tag heading <h1> dibandingkan lainnya, dikarenakan dianggap merupakan yang terpenting. Oleh sebab itu, ada baiknya bila kita mengganti tag heading judul post kita dengan <h1>.

Untuk melakukannya ikuti langkah berikut ini :

• Masuk ke dashboard
• Klik desing
• Pilih tab edit HTML
• Cari kode berikut ini :

<b:if cond='data:post.title'>

<h3 class='post-title entry-title'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</b:if>

</h3>

</b:if>

• Ganti angka 3 tersebut dengan 1
• Cari kode ]]></b:skin>
• Letakkan kode berikut ini sebelum  ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

Tujuannya adalah membuat judul yang awalnya berubah menjadi berukuran sangat besar karena diubah menjadi <h1> kembali menjadi berukuran sedang.

• Klik save template
• Selesai..

Nah itu tadi cara merubah tag heading judul blog kita agar menjadi lebih SEO friendly.. semoga bermanfaat dan dapat semakin menunjang kesuksesan sahabat dalam blogging 

Coppast : http://ourreference.blogspot.com/2012/07/mengganti-tag-heading-judul-blog-agar.html

Read More