Script Anti Iframe

Dulu, kang Rohman pernah menulis tentang Iframe pada artikel Mengenal perintah IFRAME, dengan iframe kita bisa menampilkan isi dari website yang lain didalam website atau blog milik kita. Ini tentunya bisa menguntungkan bagi yang memasang iframe, namun sebaliknya bagi pemilik website yang dipasang iframe sangat merugikan karena tidak mendapatkan jumlah kunjungan yang sebenarnya dan dapat mengambil jatah bandwidth website tersebut ( apabila hosting sendiri).

Untuk yang blognya di host di blogger tentu tidak ada masalah karena bandwidth blogger boleh di katakan tidak terbatas, namun bagi yang sewa hosting sendiri ini sangatlah merugikan. Walaupun demikian untuk pengguna blogger juga dirasa sedikit kurang menguntungkan karena mendapatkan sebuah kunjungan palsu.  Bagaimana cara untuk menghindari agar orang lain tidak bisa memasang iframe untuk blog kita? caranya sangat mudah, dengan hanya memasang sebuah script sederhana, anda dapat menghindari pencurian dari kode iframe.

Langkah sederhana yang bisa anda lakukan adalah dengan memasang script berikut pada bagian header template anda.

 

<script type="text/javascript">
<!-- Hide Script
	if (top.location != self.location) {
	  top.location = self.location
	}
//End Hide Script-->
</script>

 

atau bisa juga memakai script berikut :

 

<script type="text/javascript">
<!--
if (parent.frames.length > 0) { parent.location.href = location.href; }
-->
</script>

 

Jika script diatas terpasang pada kode template website atau blog anda, maka apabila ada yang memasang iframe terhadap blog anda maka secara otomatis akan di redirect ke website anda.

Bagi yang masih merasa sedikit kebingungan tentang pemasangan script diatas, berikut langkah-langkahnya.

 

Untuk blogger :

 

• Silahkan login ke blogger dengan ID anda.



• Klik Tata Letak.



• Klik tab Edit HTML.



• Carilah kode </head>



• Copy paste kode berikut persis diatas kode </head>
  

   

  
  
  

  <script type="text/javascript">
  <!-- Hide Script
  	if (top.location != self.location) {
  	  top.location = self.location
  	}
  //End Hide Script-->
  </script>

  
  
  

   

  
  



• Klik tombol SIMPAN TEMPLATE.



• Selesai

Untuk pengguna Wordpress.org, pada theme umumnya ada file yang bernama header.php, bukalah file tersebut lalu cari kode </head>, lalu copy paste script yang tadi tepat diatas kode </head>. Namun, jika anda ingin praktis, anda bisa menggunakan plugin break out of frame.

Selain itu, script anti iframe juga untuk menghindari pemasangan iframe oleh google image ataupun digg, sehingga akan berpeluang mendapatkan jumlah kunjungan yang lebih banyak.



Salah satu contoh website yang mengimplementasikan kode diatas adalah http://fliptextgenerator.com. Untuk membuktikan bahwa script diatas bekerja dengan baik, silahkan anda pasang kode iframe dibawah ini pada sidebar blog anda.

<iframe align="left" frameborder="0" src="http://fliptextgenerator.com" width="200" height="200" scrolling="no"> </iframe>

 

Setelah script diatas dipasang, lalu silahkan buka halaman blog anda dan lihat apa yang terjadi?

Pasang Widget 2 Kolom Di Bawah Posting

Pada posting terdahulu yang berjudul Membuat widget Dibawah Posting telah di tulis bagaimana cara membuat widget di bawah posting pada template blogger, namun pada tutorial tersebut hanya membuat berupa satu kolom saja. Rupanya ada yang penasaran dan menanyakan tentang bagaimana membuat widget dibawah posting agar bisa menjadi dua kolom? Yuk kita bahas.

Prinsip dasar yang harus diingat adalah anda membuat satu kolom utama yang ukuran lebarnya sama dengan lebar kolom posting seperti yang telah di terangkan sebelumnya, kemudian kita membuat lagi dua buah kolom di dalamnya, yang satu diatur agar berada disebelah kiri dan kolom yang satu lagi berada disebelah kanan. Berikut ilustrasinya :

 

Dari ilustrasi di atas terlihat ada 3 buah kolom, dalam kenyataannya kolom tersebut bisa memakai garis pinggir agar terlihat kolom-kolomnya atau bisa juga tidak ditampilkan sehingga tidak akan terlihat bahwa disitu adalah merupakan gabungan dari 3 buah kolom.

Bagaimana cara mengatur tata letak kolom-kolom tersebut? jawabnya yaitu dengan kode CSS. Dengan CSS kita dapat mengatur semua itu, baik lebar kolom, warna dasar kolom dan lain-lain. Sebagai contoh, kolom utama akan dinamakan .bawahpost kolom kiri akan dinamakan .bawahkiri, kolom kanan akan dinamakan .bawahkanan. CSS class nya akan seperti ini :

 

.bawahpost {     

}

.bawahkiri {

}

.bawahkanan {

}

 

Yang harus anda perhitungkan pertama kali adalah anda harus mengetahui berapa ukuran lebar kolom posting anda, sehingga nanti bisa menentukan berapa lebar kolom kiri serta kolom kanan. Sebagai contoh misalkan kolom posting adalah sebsar 550px, maka kolom kiri dan kanan tinggal di bagi dua, namun anda juga harus memperhitungkan besarnya padding serta margin, maka sebagai contoh kolom kiri akan kita jadikan 265px dan kolom kanan sebesar 265px. Contoh kode CSS nya seperti ini :

 

.bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}

.bawahkanan {
float:right;
width:265px;
}

 

Untuk contoh kode CSS sudah beres, selanjutnya tinggal kode HTML untuk memanggil fungsi CSS tadi. Karena dalam kode tadi yang dipakai adalah tanda titik ( . ) maka ini adalah fungsi class, sehingga contoh kode HTML nya seperti ini :

 

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

<div class='bawahpost'>

           <div class='bawahkiri'>

            Kode Iklan anda yang ingin ada di sebelah kiri disini

           </div>

          <div class='bawahkanan'>

          Kode Iklan anda yang ingin ada di sebelah kanan disini

           </div>

</div>

</b:if>

 

Sebagai contoh sederhana, berikut cara-cara mengimplementasikan kode diatas pada template anda :

 

* Login ke blogger dengan ID anda

* Klik Tata Letak

* Klik Tab Edit HTML

* Silahkan backup dulu sebelum melakukan editting template dengan klik Download Template Lengkap.

* Klik kotak kecil disamping tulisan Expand Widget Template.

* Carilah kode ]]></b:skin>, lalu copy paste kode di bawah ini persis diatasnya :

 

.bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}

.bawahkanan {
float:right;
width:265px;
}

 

* Lalu carilah kode berikut :

 

<data:post.body/>

 

* Kemudian copy paste kode di bawah ini persis di bawahnya :

 

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

<div class='bawahpost'>

           <div class='bawahkiri'>

            Kode Iklan anda yang ingin ada di sebelah kiri disini

           </div>

          <div class='bawahkanan'>

          Kode Iklan anda yang ingin ada di sebelah kanan disini

           </div>

</div>

</b:if>

 

* Klik tombol SIMPAN TEMPLATE.

* Selesai.

 

Langkah diatas hanya sebagai contoh, dan mudah-mudahan anda memperoleh sebuah gambaran prinsip dasar. Karena jika anda sudah faham akan prinsip dasarnya, membuat berbagai variasi pun akan sangat mudah. Satu sebagai tambahan, jika anda menginginkan lebar kolom yang leboh dinamis, anda bisa menggunakan satuan persen ( % ) bukan memakai satuan pixel ( px )

Selamat mencoba.

Membuat widget Dibawah Posting

Banyak yang mengirimkan pesan melalui email menanyakan perihal cara membuat widget di bawah posting, semisal untuk memasang iklan google adsense, form berlangganan, Artikel terkait dan lain sebagainya.

Untuk memasang kode google adsense dibawah posting sebenarnya sudah pernah di bahas pada artikel  Pasang Iklan Google Adsense di Bawah Posting, namun karena umur posting tersebut telah lama dan telah banyak perubahan pada template blogger semisal fungsi read more yang telah di dukung oleh blogger, maka sekarang artukel tersebut tidak lagi lagi relevan.

Untuk posting ini, kang Rohman lebih menekankan terhadap bagaimana cara membuat tempat atau kotak di bawah posting agar bisa dipasang berbagai widget yang diinginkan.

 

Prinsip awal yang perlu di ingat adalah anda harus mengetahui kode posting blogger, dan kodenya adalah sebagai berikut :

<data:post.body/>

 

Secara logika, jika anda ingin menyimpan sesuatu katakanlah Iklan, maka anda tidak usah pusing, simpan saja kode iklannya di bawah kode tadi, misal ilustrasinya seperti ini :

<data:post.body/>
< simpan kode iklan anda disini >

Sangat sederhana bukan? namun itu belum sempurna. Kondisi yang kurang nyaman adalah iklan anda akan muncul setelah posting, namun iklannya akan terlihat juga di halaman depan sehingga pemandangan kurang sedap terhadap blog anda. Solusi yang sederhana adalah anda harus menambahkan sedikit kode tambahan seperti ini :

 

<data:post.body/>

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

< simpan kode iklan anda  disini >

</b:if>

 

Kode tambahan yang dicetak hijau akan membuat iklan anda tidak akan muncul di halaman depan dan hanya akan muncul pada halaman penuh artikel saja. Sampai disini sebenarnya sudah selesai, namun untuk menambah keindahan misalkan widget yang dipasang mempunyai warna background atau dengan gambar, maka anda bisa menggunakan kode div class, misal seperti ini :

 

<data:post.body/>

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

<div class=’bawahpost’>

< simpan kode iklan anda  disini >

</div>

</b:if>

Dari contoh diatas, class yang digunakan di beri nama bawahpost, dari sini kita bisa mengatur berbagai tampilan yang berada diantara div dengan menambahkan berbagai property didalam CSS :

 

.bawahpost{

tambahkan berbagai property disini

}

 

Misalkan tampilan yang diinginkan adalah mempunyai warna latar biru dan pinggirnya mempunyai garis border serta tulisan didalamnya tidak ingin rapat dengan dinding luar, maka contoh CSS yang di buat seperti ini :

 

.bawahpost{
padding:10px;
margin:10px 0px;
background:#e1f2ff;
border:1px solid #ddd;
line-height:1.6em;

}

Kode yang berwarna merah bisa anda kreasikan sesuai dengan imajinasi anda, namun tentu saja anda harus sedikit menguasai dasar-dasar CSS. Lalu dimana kode tersebut disimpan? cara mudah adalah anda meletakkannya di atas kode ]]></b:skin> karena kode tersebut adalah kode penutup CSS pada template blogger.

 

.bawahpost{
    padding:10px;
    margin:10px 0px;
    background:#e1f2ff;
    border:1px solid #ddd;
    line-height:1.6em;
}

]]></b:skin>

Sebagai contoh sederhana, berikut cara-cara mengimplementasikan kode diatas pada template anda :

 

* Login ke blogger dengan ID anda

* Klik Tata Letak

* Klik Tab Edit HTML

* Silahkan backup dulu sebelum melakukan editting template dengan klik Download Template Lengkap.

* Klik kotak kecil disamping tulisan Expand Widget Template.

* Carilah kode ]]></b:skin>, lalu copy paste kode di bawah ini persis diatasnya :

 

.bawahpost{
padding:10px;
margin:10px 0px;
background:#e1f2ff;
border:1px solid #ddd;
line-height:1.6em;
}

* Lalu carilah kode berikut :

 

<data:post.body/>

 

* Kemudian copy paste kode di bawah ini persis di bawahnya :

 

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

<div class='bawahpost'>
Bagi yang ingin belajar <strong>PHP / HTML / MySQL</strong> dengan sangat mudah sambil langsung praktek, kang Rohman rekomendasikan anda belajar <a href='http://www.kursus-online.com/?id=rohman' rel='nofollow' target='_blank'><strong>di sini</strong></a> &#160;&#160;<strong>&#171;&#171;</strong>&#160;sok atuh di klik biar situsnya keluar.
</div>
</b:if>

* Klik tombol SIMPAN TEMPLATE.

* Selesai.

 

Langkah diatas hanyalah sebagai contoh saja, kata-kata yang berwarna merah tentu saja bisa diganti sesuai keperluan anda. Hasilnya nanti adalah akan terlihat sebuah kotak berwarna biru pada setiap akhir posting anda.

Hasilnya adalah widget dibawah post satu kolom, jika ingin membuat dua kolom berdampingan diperlukan sedikit variasi pada kode CSS nya. Semoga dapat sedikit difahami.

Cara atasi Halaman Statis yang Tidak Muncul

Sejak adanya fitur static pages atau halaman statis diblogger.com, ini membuat banyak blogger user merasa gembira akan kehadirannya. Namun belakangan ada beberapa email yang masuk ke kang Rohman menanyakan perihal masalah halaman statis yang tidak bisa muncul, yang muncul hanyalah judulnya saja sedangkan isinya tidak bisa terbuka.

Dari beberapa kasus yang kang Rohman amati hal ini terjadi apabila template yang digunakan telah dimodifikasi untuk kepentingan membuat daftar isi seperti yang pernah kang Rohman posting 2 tahun yang lalu. Rupanya trik tersebut sekarang konflik dengan static pages yang dibuat oleh blogger. Lalu bagaimana solusinya?

Solusi sementara anda harus memilih antara daftar isi tersebut atau halaman statis? jika pilihan anda adalah halaman statis, maka anda harus menghilangkan modifikasi yang ada dan menggantinya dengan kode default dari blogger.

Apabila anda kesulitan mengembalikan modifikasi yang dulu, anda bisa mencoba langkah-langkah di bawah ini :

• Silahkan login ke blogger dengan ID anda.

• Klik Tata Letak

• Klik tab Edit HTML

• Silahkan download dahulu template anda untuk jaga-jaga.

• Beri tanda tik / cek pada kotak kecil di samping tulisan Expand Template Widget. Tunggu beberapa saat.

• Cari kode seperti dibawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> 
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">       <data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

• Delete / hapus kode tersebut, lalu ganti dengan kode berikut ini :

 

<b:include data='post' name='post'/> 

 

• Klik tombol SIMPAN TEMPLATE

• Selesai

 

Sekarang coba buat sebuah halaman statis, lalu lihat hasilnya. Seharusnya kini halaman statis sudah bisa muncul secara normal.

Static Pages Resmi di gunakan di Blogger

Sebelumnya telah di beritakan bahwa blogger akan meluncurkan static pages, ini ditandai dengan uji coba pada blogger in draf. Rupanya masa uji coba telah usai dan kini Static Pages sudah resmi di gunakan di blogger.

Untuk menjajal fitur static pages, silahkan lakukan hal berikut ini :

•  Silahkan login ke blogger.

•  Klik Edit Entri

•  Klik tab Edit Laman

•  Klik tombol LAMAN BARU

•  Silahkan isi dengan keinginan (sama seperti posting biasa), biasanya static pages diisi dengan halaman About Me, Contact, dan lain-lain.

•  Klik tombol TAYANGKAN LAMAN

•  Pilih posisi tombol Static pages anda, pakah mau di tab blog (posisi dibawah header), bilah samping blog (posisi di sidebar) atau Tidak ada gadget / tidak ada tombol ditampilkan, anda harus membuat tombol sendiri dari link static pages tersebut.

•  Selesai.

 

Sekilas Tentang Static Pages

Rupanya ada beberapa pembaca yang belum begitu paham akan static pages ini, berikut ulasan tentang static pages versi kang Rohman. Static pages atau jika dalam bahasa Indonesia Halaman Statis adalah halaman yang dibuat tersendiri dan terpisah dari posting secara umum. Jika anda membuat suatu halaman posting, maka artikel tersebut akan muncul sebagai artikel terbaru dan dimunculkan paling depan dihalaman depan blog anda, berbeda dengan Static pages, jika anda membuat sesuatu melalui halaman static pages katakanlah halaman About me atau tentang saya, maka halaman yang baru anda buat tersebut tidak akan muncul sebagai posting baru dan halaman ini benar-benar terpisah dengan deretan artikel posting anda, Jelas?

Fitur Static pages sebenarnya fitur yang telah lama diperkenalkan pada mesin wordpress, namun di blogger adalah termasuk fitur baru. Akan tetapi  tentu saja lebih baik terlambat daripada tetap tidak ada fitur ini, dan toh banyak fitur blogger yang lainnya yang tidak bisa dijalankan di wordpress.com, keduanya ada kekurangan dan kelebihannya masing-masing.

Jumlah maksimal static pages yang bisa dibuat adalah sebanyak 10 buah halaman. Jadi, ya selamat datang untuk Blogger Static Pages, thanks untuk para pengembang blogger. Ditunggu fitur2 ajip yang lainnya.

CSS Bubble Tooltips

Ingin blog anda lebih variatif? mungkin anda bisa menggunakan teknik CSS Bubble Tooltips. Dengan CSS Bubble Tooltips anda dapat memberikan syatu keterangn singkat suatu link yang di inginkan dan keterangan ersebut akan muncul apabila pengunjung blog menyorotkan cursor mouse pada link yang anda beri efek tooltips.

 

< (((((((( \\\\\\\\\\\\\\\\\\\\      LIve Demo      ///////////////////// )))))))) >

 

Silahkan arahkan mouse komputer anda pada link yang ada pada halaman tersebut, dan seharusnya ada akan melihat efek bubble tooltips.

 

Teknik Tooltips yang dipakai adalah 100% menggunakan CSS, jadi tentunya tidak akan terlalu membebani loading blog anda. Cara untuk mengimplementasikan CSS Bubble Tooltips terbilang sangat mudah, berikut caranya.

 

Langkah #1

 

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik Tab Edit HTML.
4. Jangan lupa untuk Membackup template anda terlebih dahulu, klik link Download Template Lengkap.
5. Silahkan cari kode ]]></b:skin>
6. Copy lalu paste kode berikut diatas kode ]]></b:skin>

   /*---------- bubble tooltip -----------*/
   a.tt{
       position:relative;
       z-index:24;
       color:#3CA3FF;
       font-weight:bold;
       text-decoration:none;
   }
   a.tt span{ display: none; }

   /*background:; ie hack, something must be changed in a for ie to execute it*/
   a.tt:hover{ z-index:25; color: #aaaaff; background:;}
   a.tt:hover span.tooltip{
       display:block;
       position:absolute;
       top:0px; left:0;
       padding: 15px 0 0 0;
       width:200px;
       color: #993300;
       text-align: center;
       filter: alpha(opacity:90);
       KHTMLOpacity: 0.90;
       MozOpacity: 0.90;
       opacity: 0.90;
   }
   a.tt:hover span.top{
       display: block;
       padding: 30px 8px 0;
      background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
   }
   a.tt:hover span.middle{ /* different middle bg for stretch */
       display: block;
       padding: 0 8px; 
      background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
   }
   a.tt:hover span.bottom{
       display: block;
       padding:3px 8px 10px;
       color: #548912;
      background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
   }

7. Klik tombol SIMPAN TEMPLATE.
8. Langkah pertama selesai.

Untuk langkah selanjutnya anda hanya perlu menambahkan sedikit kode HTML pada link yang ingin ada efek bubble tooltips nya. Posisi link tentunya bisa dimana saja sesuai dengan keingina, bisa di dalam posting, sidebar, ataupun footer. Format kode tambahannya seperti ini :

 

 <a href="link_tujuan" class="tt">Teks link yg muncul<span class="tooltip"><span class="top"></span><span class="middle">Pesan yang akan muncul</span><span class="bottom"></span></span></a>

 

Contoh :

Bagi yang ingin belajar membuat blog di blogspot, coba kunjungi deh <a href="http://kolom-tutorial.blogspot.com" class="tt">Kolom Tutorial<span class="tooltip"><span class="top"></span><span class="middle">panduan lengkap membuat blog di blogspot</span><span class="bottom"></span></span></a>, di jamin puas karena tutorialnya gratisss.

 

Langkah #2

Untuk mencoba memasang di bagian sidebar, berikut caranya :

 

1. Silahkan login ke blogger dengan ID anda.



2. Klik Tata Letak.



3. Klik tab Elemen Halaman.



4. Klik Tambah Gadget.



5. Klik tanda plus (+) untuk HTML / Javascript



6. Masukan kode link yang anda inginkan ( lihat kode diatas).



7. Klik SIMPAN.



8. Selesai.

Jika anda ingin memasukkan didalam posting, pilih terlebih dahulu mode Edit HTL bukan pada mode Compose, kemudian masukan kode tambahan link tooltipnya, setelah itu anda dapat kembali ke mode compose jika mau.

Silahkan mencoba!

 

Credit : trentrichardson

The Best Accordion Untuk Blogger

Banyak dari para blogger mandambakan bahwa blog yang dimilikinya tampil menarik, elegan serta profesional. Banyak cara untuk mewujudkan itu semua, salah satunya adalah dengan menggunakan The Best Accordion untuk blogger yang di rancang oleh sahabat kang Rohman yaitu Abu Farhan.

Dengan menggunakan The best Accordion by Abu Farhan maka sidebar anda akan tampak rapih dan hemat tempat karena isi dari widget sidebar akan disembunyikan ( Hide ) dan akan tampil ( Show ) ketika judul sidebar di klik oleh pengunjung, namun tidak hanya itu saja, gerakan yang halus saat membuka dan menutup ( Show / Hide ) menjadikan The best accordion terlihat profesional.

 

Live Demo

Untuk  membaca tutorial lengkap tentang pemasangan The best Accordion, silahkan di baca disini!