Custom domain blogger dengan Subdomain

Sebagai lanjutan dari artikel sebelumnya tentang Custom Domain di Blogger, pada posting kali ini kang Rohman akan menuliskan tentang Custom domain blogger dengan Subdomain.

Pada umumnya sebuah website bisnis atau toko online adalah bersifat pasif atau jarang sekali dilakukan pembaharuan terhadap konten dari website tersebut, untuk bisa lebih berinteraksi dengan para pelanggannya admin website tersebut biasanya membuat sebuah blog tersendiri dengan menggunakan subdomain dari domain utamanya. Misalkan alamat domainnya seperti ini domainanda.com, maka subdomain yang digunakan adalah blog.domainanda.com.

Untuk contoh kasus diatas, dengan membeli domain yang ada free DNS nya kita bisa membuat berbagai subdomain yang diinginkan serta mesin blog yang digunakan adalah blogger.

Agar lebih mudah dalam pembahasan, kang Rohman menggunakan domain indodesigner.net. Sebagai contoh, alamat sub domain yang akan dibuat adalah blog.indodesigner.net. Langkah yang harus dilakukan adalah terlebih dahulu membuat subdomain pada kontrol panel domain. Berikut langkah-langkahnya :

* Silahkan login ke kontrol panel domain anda, tentunya dengan username serta password yang telah di berikan.

*  Sorot menu Domains kemudian pilih List All Orders.

* Klik pada domain yang ingin anda setting untuk custom domain.

 

* Klik tab menu DNS, lalu klik tombol Manage DNS, akan muncul halaman baru, kemudian klik tab menu CNAME Records,  lalu klik tombol Add CNAME Record

* Isi Host Name dengan blog , lalu isi Value dengan ghs.google.com , untuk TTL biarkan saja. Akhiri dengan klik tombol Add Record.

 

 

 

* Hasilnya akan seperti ini :

* Untuk setting CNAME pada domain telah selesai, langkah selanjutnya adalah setting pada blog anda yang di blogger.

 

Berikut cara setting blog anda yang di blogger

* Silahkan login ke blogger dengan ID anda

* Klik Pengaturan untuk yang mau di custom domain

* Klik tab Publikasikan

* Klik Domain Ubahsesuaian

* Klik Beralihlah ke pengaturan lanjut

* Isilah Domain Anda dengan nama sub domain yang tadi disetting DNS nya, Contoh blog.indodesigner.net. Isilah verifikasi kata yang ada dan akhiri dengan klik tombol SIMPAN SETELAN.

* Selesai.

 

Proses Custom domain blogger telah selesai, namun biasanya memerlukan waktu agar blog anda bisa diakses menggunakan domain baru. Proses ini biasanya memakai waktu paling lama 24 jam, namun biasanya dalam 1 jam pun telah selesai, dan blog anda bisa diakses dengan nama subdomain anda.

Pada artikel sebelumnya ada yang bertanya pada kotak komentar apakah untuk setting domain dot info sama atau tidak? tentu saja sama, dan tidak hanya domain dengan ekstensi dot info saja ekstensi yang lainnya seperti .com, .org, .biz, .name serta yang lainnya adalah sama saja. Kang Rohman menggunakan domain .net hanyalah sebagai contoh saja.

Informasi tambahan bahwa anda dapat membuat berbagai nama sub domain pada nama domain anda, idealnya adalah unlimited atau tidak terbatas. dan semua itu bisa untuk menggantikan sub domain blogspot dengan cara seperti yang di contohkan diatas.

Fitur Pertahankan Widget

Ini bukanlah info fresh dan boleh di katakan sudah basi kali yeh, tapi ternyata masih ada yang menanyakan. Dulu, hal yang paling mengerikan pada saat mengganti template diblogger adalah kehilangan berbagai widget yang telah terpasang pada template sebelumnya. Untuk mengakalinya kang Rohman telah posting sebanyak dua kali tentang bagaimana cara membuat backup data agar ketika mengganti template tidak serta merta kehilangan berbagai widget yang telah terpasang.

Itu semua merupakan cerita masa lalu, sekarang blogger sudah semakin pintar dengan menghadirkan fitur PERTAHANKAN WIDGET.

 

 

Dengan adanya fitur PERTAHANKAN WIDGET maka kita diberikan kemudahan untuk tetap memasang widget yang ada tanpa harus repot-repot membuat backup terlebih dahulu. Jadi sekarang katakanlah bye…bye… repot

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.

hati-hati blogger sedang gencar hapus blog

Berita kurang sedap marak terdengar akhir-akhir ini, Blogger sedang gencar menghapus blog, bahkan ada yang sampai akun blog, oleh karena itu berhati-hatilah!

Berita ini bersumber dari beberapa teman kang Rohman yang mengabarkan bahwa blog mereka dihapus oleh blogger, dan beberapa hari yang lalu salah satu blog kang Rohman pun bernasib sama, di hapus . Yang lebih ekstrim lagi ada teman kang Rohman  langsung di hapus akun blognya, yang sangat menyakitkan adalah jumlah blog dalam akun tersebut lebih dari 60 blog dan telah di kelola secara susah payah selama satu tahun lebih, gimana ngga nyesek di dada tuh.

Trus bagaimana cara mengantisipasi agar blog tidak dihapus oleh blogger? sebagai pihak yang menumpang tidak ada cara yang benar-benar ampuh untuk menangkal agar blog tidak dihapus oleh blogger, namun ada beberapa tips yang mungkin bisa dilakukan untuk sedikit mengurangi kemungkinan dihapusnya blog oleh blogger atau sekedar mengurangi dampak fatal setelah di hapus.

 

• Jangan melakukan hal-hal yang melanggar Term Of service  blogger.
• Jangan melakukan hal-hal yang nyerempet-nyerempet seperti paid post review,, menjual link,, banner iklan yang terlalu berlebihan ( uppsss.. blog kang Rohman termasuk yang ini kali)
• Jangan pasang Auto-Blog (blog yang bisa posting secara otomatis).
• Jangan posting berlebihan sampai beratus-ratus posting dalam sehari.
• Jangan membuat blog sampai berpuluh-puluh hanya dalam satu account.
• Pisahkanlah blog yang dirasa sangat penting bagi anda, jadikan ini satu account satu blog jangan sampai dicampur dengan blog-blog yang menurut anda kurang berkualiatas. Sebagai contoh kang Rohman mempunyai 2 blog yang dirasa sangat penting, maka kang Rohman memisahkan keduanya. Jadi seandainya yang satu terkena penghapusan maka yang satu masih selamat. Kalau dua-duanya dihapus ya tinggal sabar kalau itu
• Untuk memisahkan blog yang penting dan  terlanjur bercampur dengan blog-blog lain adalah dengan cara membuat alamat email baru, lalu anda undang email tersebut sebagai author ( login => pengaturan => Izin => Menambah Penulis), kemudian berikan hak yang setara dengan admin sebelumnya, nah jika sudah setara tinggal login ke akun yang baru kemudian hapus tuh admin yang lama. ( bingung? duh kacian dech ). 

  

• Lakukan backup blog secara teratur, ini bisa anda lakukan dengan cara : Login -> Pengaturan - Tab dasar -> Export Blog.  

  

• Jika anda mau menanamkan sedikit modal, sebaiknya gunakan custom domain atau memakai top level domain (TLD) sehingga blog anda bukan lagi beralamat seperti http://contohsaja.blogspot.com, namun akan beralamat seperti http://contohsaja.com, jika alamat anda sudah jadi custom domain dan suatu saat blog anda dihapus blogger, maka anda tinggal membuat blog baru lalu lakukan Import dengan memakai file hasil backup (ingat langkah sebelumnya), kemudian ganti lagi alamatnya dengan dengan domain yang tadi ( ini jurus kucing-kucingan dengan blogger ). Perlu diketahui bahwa hasil import beda dengan posting baru, jika anda melakukan import maka tanggal posting serta komentar yang ada akan tetap seperti itu.
• Langkah yang lebih arif yaitu tinggalkan ketergantungan anda dari blogger, silahkan beli hosting yang murah tapi berkualitas lalu pakai mesin Wordpress.org, kemudian import semua data yang ada di blogger ke wordpress anda dan blog anda akan kembali. stttttt… kang Rohman sebentar lagi akan jual domain sama hosting murah tapi kualitas handal lho.

Moga bermanfaat, dan yang terutama di harapkan adalah jangan sampai blog anda di hapus oleg blogger.

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.