Panduan mudah membuat fitur login/logout blogger untuk pemula

Bagi anda pengguna blogger untuk memulai kegiatan tulis menulis artikel pada blog, anda tentunya diwajibkan masuk kedalam akun blogger anda melalui halaman sign in google. Pada artikel kali ini saya akan mengulas sedikit tentang bagaimana cara membuat form login / logout bagi member blogspot.

Secara umum banyak cara untuk membuat form login, yaitu bisa dengan html, atau dengan php dan mysql secara session yang dipadukan pembuatannya dengan aplikasi dreamweaver, namun karena pembuatannya memerlukan keahlian khusus tak jarang kita akan menemukan masalah seperti script php logout yang tidak bisa di back. Adapula dalam membuat form login menggunakan php tanpa database, namun kali ini saya akan berbagi membuat form login yang saya dapat dari buatan kang adhy suryadi

Teknik yang digunakan adalah dengan menggunakan fungsi onclick dan form sederhana untuk tombolnya login dan logout yang nantinya menjadi sebuah popup semacam dialog box dengan background transparant yang menutupi blog. Sebelumnya lihat dulu live demonya disini.

Bagaimana, jika anda tertarik anda bisa menggunakan script dibawah ini :

Kode CSS :

#adminblog{background: #F4836A;color: #fff!important;width:60px;border:none;font-size: 14px;font-family:Arial;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 0;position:absolute;top:10px;left:10px;transition:all .4s ease-in-out;}

#layoutlogin{background:#000;opacity:.7;position:absolute;top:0;left:0;right:0;bottom:0;z-index:99999;display:none}
#login{position:absolute;width:222px;height:auto;top:30%;left:50%;margin-left:-111px;font-family:Arial;z-index:100000;display:none}
#loginbox{background:#fff;width:200px;padding:10px;display:none;position:absolute;top:62px;left:0;border:1px solid #ddd;border-radius: 2px;z-index:1;overflow:hidden;}
#loginbox .emaillogin input.email {color: #777;padding: 10px;font-size: 14px;font-family:Arial;width:89%;border:1px solid #ddd;border-radius: 2px;}
#loginbox .emaillogin input:focus {outline: none;}
#loginbox .emaillogin input.signin-btn{background: #F4836A;color: #fff!important;border:none;outline: none;width:100%;font-size: 14px;font-family:Arial;cursor:pointer;border-radius: 2px;margin-top: 10px;padding: 11px;}
#login1,#login2{color: #777;padding:5px 10px;font-size: 14px;font-family:Arial;width:38%;display:none;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:38px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
#login2{border-bottom:none;z-index:2}
#Admin1,#Admin2{color: #777;padding:5px 0;font-size: 14px;font-family:Arial;width:100%;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:0px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
.logout{background: #F4836A;color: #fff!important;width:38%;font-size: 14px;font-family:Arial;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 10px;position:absolute;top:38px;right:-1px;transition:all .4s ease-in-out;}
a.logout{text-decoration:none}
#Admin1:hover,#login1:hover{background:#eee}
.logout:hover,#adminblog:hover{background:#d56148}

Untuk kode HTML nya, seperti dibawah ini :

<div id="adminblog" onclick="document.getElementById('login').style.display='block';layoutlogin.style.display='block';adminblog.style.display='none';">Admin</div>

<div id='login'>
<div id="Admin1" onclick="document.getElementById('login1').style.display='inline';logoutbox.style.display='inline';Admin1.style.display='none';Admin2.style.display='inline';">Silahkan Pilih</div>
<div id="Admin2" style="display:none" onclick="document.getElementById('login1').style.display='none';logoutbox.style.display='none';Admin1.style.display='inline';Admin2.style.display='none';">Silahkan Pilih</div>
<div id='login1' onclick="document.getElementById('loginbox').style.display='block';login1.style.display='none';login2.style.display='inline';logoutbox.style.display='none';">Login</div>
<div id='login2' style="display:none" onclick="document.getElementById('loginbox').style.display='none';login1.style.display='inline';login2.style.display='none';logoutbox.style.display='inline';">Login</div>
<div id='loginbox'>
<div class='emaillogin'>
<form action="https://accounts.google.com/ServiceLogin?service=blogger&amp;continue=https://www.blogger.com/home&amp;followup=https://www.blogger.com/home" method="post" target="_blank" onsubmit="onlogin()">
    <input class="email" value="Username" name="Email" onblur='if (this.value == &quot;&quot;) {this.value = &quot;Username&quot;;}' onfocus='if (this.value == &quot;Username&quot;) {this.value = &quot;&quot;;}' type="text" />
      <input class="signin-btn" value="Sign In" name="submit" type="submit" onclick="document.getElementById('login').style.display='none';layoutlogin.style.display='none';adminblog.style.display='block';"/>
    </form>
   </div>
  </div>  
    <div id='logoutbox' style="display:none">
<a class='logout' href="https://accounts.google.com/Logout?service=blogger" target="_blank" onclick="document.getElementById('login').style.display='none';layoutlogin.style.display='none';adminblog.style.display='block';">Logout
   </a>
  </div>
    </div>
<div style="clear:both"></div>
<div id="layoutlogin"></div>

CATATAN :

1. Tempatkan kode CSS pada bagian selector CSS, untuk blogger sebelum kode ]]></b:skin> atau </style>
2. Untuk Kode HTML letakan diatas kode </body>
3. Jika anda ingin merubah letak tombol Admin, silahkan ubah #adminblog pada kode CSS

Demikian Panduan membuat fitur login/logout blogger semoga bermanfaat.

5 Langkah Mudah Membuat Email Google bagi Pemula

Membuat Email Google Baru Gratis - Saat ini siapa yang tidak memiliki alamat email/mail, tentunya sahabat pembaca telah memiliki email tentunya.  Email adalah kependekan dari electronic mail merupakan surat dalam bentuk elektronik yang dijadikan sebagai  media / sarana kirim mengirim surat melalui jalur internet.

Penyelia layanan email di internet begitu banyak dari yang berbayar sampai yang gratis semua tersedia. Begitu banyaknya terpilihlah beberapa layanan email yang banyak digunakan oleh pengguna, sebut saja gmail dari google, ymail dari yahoo serta hotmail dari microsoft. Bagi saya kenapa layanan email diatas paling banyak digunakan, karena selain gratis email yang kita miliki akan terkoneksi dengan semua layanan atau produk-produk yang dimiliki.

Jika anda telah memiliki email dari google (gmail) anda tinggal masuk ke produk-produk layanan google dengan hanya menggunakan 1 alamat email saja. Sebagai contoh jika anda ingin membuat blog gratis dari blogger anda tinggal daftar dengan menggunakan alamat email yang ada. Begitu pula apabila anda ingin mendaftar google adsense, google bisnisku, google adwords, google play,  google webmaster tools, dsb maka anda hanya memerlukan alamat email yang sama saja begitu mudah bukan, selain itu juga anda dapat membuat email google dengan domain sendiri.

Wajib dibaca : Tips Melindungi Alamat Email Anda dengan ReCAPTCHA

Sobat blogger, jika anda menemukan halaman artikel ini melalui mesin pencari maka besar kemungkinan anda belum memiliki alamat email dari google, benarkah demikian? Jika tidak maka mengklik tautan share pada akhir artikel ini tidak terlalu berlebihan sebagai media informasi bagi yang membutuhkan. :)

Namun jika benar adanya, di awal bulan Mei ini saya sengaja menulis artikel dan berbagi informasi tentang bagaimana cara mudah mendaftar email google gmail bagi pemula. Tutorial yang saya berikan ini adalah cara mudah daftar email gmail via android / lewat hp yang hanya membutuhkan waktu tidak lebih dari lima menit saja. Berikut langkah-langkahnya :

Langkah #1: Buka browser diperangkat android anda dan klik tautan http://gmail.com/ , maka tampilan awal pendaftaran email google seperti dibawah ini. Silahkan klik tombol "Buat Akun".

Langkah #2: Isikan data-data anda termasuk nama email yang anda inginkan serta password awal (buat password serumit mungkin dengan kombinasi angka dan huruf tapi tetap mudah diingat bagi anda), selanjutnya gulung halaman kebawah.

Langkah #3: Ketik teks untuk verifikasi, isi lokasi anda dengan pilihan "Indonesia". Lanjutkan ketuk opsi persetujuan "Persyaratan layanan dan Kebijakan privasi Google". dan akhiri klik "Lanjutkan"

Langkah #4: Akun atau alamat email anda sudah selesai dan berhasil. Selamat anda sudah bisa menggunakannya. Setelah itu klik "Lanjutkan ke Gmail".

Langkah #5: Jika anda ingin langsung menggunakan email anda silahkan klik "situs Gmail selular".

Baca juga : Cara Daftar Akun Email Yahoo

Selamat bersenang-senang! sangat mudah bukan 5 langkah tidak lebih dari 5 menit anda sudah mempunyai email google dan sudah bisa menggunakan email anda secara mudah dan gratis. Sekian.

Cara Redirect 301 Domain Blogspot Lama ke Domain Blogspot Baru (Blogger)

Redirect 301 - Dulu saya pernah membahas topik ini yaitu “Custom Domain pada Blogspot Blogger“. Disana saya membahas terlebih bagaimana merubah / redirect alamat domain blogspot lama ke alamat seft domain yang baru, dan saya rasa pembahasannya sangatlah lengkap dan jelas.

Nah, kali ini yang saya bahas adalah bagaimana me-redirect URL atau permalink blogspot lama ke permalink blogspot baru. Sehingga jika pengunjung mengetikan alamat domain lama anda, apakah itu pada halaman utama ataupun halaman-halaman artikel maka secara otomatis akan mengarah ke alamat domain baru anda.

Banyak alasan mengapa kita melakukan redirect domain ini, diantaranya ;

1. Agar pengunjung tetap kita yang mungkin menyimpan alamat permalink tertentu tidak akan kehilangan apa yang mereka cari sewaktu mengunjungi kembali.
2. Memiliki beberapa blog yang mana konten nya ingin digabungkan dalam satu domain.
3. Agar URL blog kita tetap terindex di mesin pencari Google, Yahoo, Bing dan sebagainya.

Dari tiga alasan diatas mungkin yang sangat dipertimbangkan adalah poin 3, betapa tidak sudah capek-capek membangun blog dan sudah terindex dari pencarian namun semuanya harus dimulai dari awal lagi, walaupun konten sudah siap (impor konten) ke domain baru. Belum lagi apabila telah menyimpan alamat permalink tertentu dan sewaktu-waktu mengunjungi kembali maka yang didapat hanya kembali menemukan halaman domain yang lama saja.

Apapun alasannya, cara dibawah ini mungkin saja dapat membantu anda dalam mengarahkan alamat domain lama ke domain baru. Teknik / pengalihan yang akan dilakukan adalah menggunakan pengalihan "301 redirect".

Apa itu 301 Redirect ?
301 redirect atau bisa disebut permanen redirect yang tujuannya digunakan untuk memberitahu bots mesin pencari bahwa halaman yang ada telah dipindahkan ke lokasi (halaman url) baru, sehingga semua tautan permalink lama akan merubah permalink baru, sehingga meminimalisir kerugian peringkat pada SERP (Search Engine Result Pages).

Baca juga : Cara Mengatasai Pesan Error HTTP 404 Not Found

Apa yang perlu dipersiapkan untuk melakukan 301 Redirect ?
Baiklah, apabila anda berniat untuk melakukan Redirect 301 Domain Blogspot Lama ke Domain Blogspot Baru ataupun hanya ingin coba-coba saja yang perlu anda lakukan adalah hanya mempersiapkan dua domain blogspot.

Berikutnya adalah melakukan backup/import konten dari blog lama yang nantinya di ekspor ke blog yang baru, dan caranya lakukan seperti dibawah ini :

Langkah #1 : Awal yang anda lakukan adalah login ke akun blogger anda, lalu pilih domain blogspot lama yang akan dialihkan setelahnya rujuk ke Setelan lalu pilih Lainnya.

Langkah #2 : Klik tombol "Cadangkan Konten" lalu ikuti intstruksi  berikutnya :

Langkah #3 : Pilih domain blogspot yang baru untuk melakukan impor konten, sama seperti langkah #1 tetapi  tidak seperti pada langkah #2 klik "Cadangkan Konten" tetapi klik "Impor Konten".

Langkah #4 : Kembali pada dasbor domain blogspot lama, pilih Template lalu Edit HTML.  Lalu copykan kode script dibawah ini dibawah kode <head> :

<script type='text/javascript'>
var d='<data:blog.url/>';
d=d.replace(/.*\/\/[^\/]*/, '');
location.href = 'http://domainbaru.blogspot.com' + window.location.pathname;
</script>

Catatan! : Ubah alamat domainbaru.blogspot sesuai domain anda.

Klik Simpan template.

Selanjutnya kita eksekusi, apabila alamat link yang diketik :

http://domainlama.blogspot.com/
http://domainlama.blogspot.com/p/halaman.html
http://domainlama.blogspot.com/2016/04/cara-merubah-link-domain.html

maka akan secara otomatis akan me-redirect ke halaman seperti dibawah ini :

http://domainbaru.blogspot.com/
http://domainbaru.blogspot.com/p/halaman.html
http://domainbaru.blogspot.com/2016/04/cara-merubah-link-domain.html

Lalu bagaimana beberapa domain blogspot lama di redirect ke domain baru?
Baiklah, setelah saya bereksperimen yang perlu dilakukan hanyalah melakukan hal yang sama seperti langkah-langkah diatas, yaitu jika ada blog lain yang akan dialihkan juga ke domain baru yang sama maka setiap blog domain lama hanya memasukan kode script diatas kebawah kode <head>, selanjutnya lakukan impor konten ke blog domain baru maka proses redirect 301 bisa berjalan dengan baik.

Bagaimana? masih tidak percaya silahkan dicoba. Dan apabila masih mengalami masalah bisa kita diskusikan pada kotak komentar.

Cara Mengatasai Pesan Error HTTP 404 Not Found

Pesan Error HTTP 404 Not Found - Dikala kita membuka halaman-halaman pada situs tertentu kita diberikan tampilan yang memberikan pesan kesalahan "Error HTTP 404 Not Found", bagi pengguna ini pasti pengalaman yang kurang nyaman dan bagi pemilik situs ini bisa menjadi masalah besar. Bagaimana tidak sebagai pengguna yang ingin membaca halaman situs namun halaman tersebut tidak ditemukan tentu sangat mengecewakan bukan, untuk itu sebagai pemilik situs tentu masalah ini harus segera diatasi.

Apa itu Error 404 ?
Secara umum pesan kesalahan dengan angka 404 adalah kesalahan yang dihasilkan oleh server sebuah situs/website ketika URL yang diminta tidak ditemukan.

Cara mengenal pesan kesalahan Error 404 ?

Ada banyak pesan kesalahan error 404 yang tampilan redaksinya berbeda-beda pada browser pengguna. Dalam penggunaan kata-kata pesan kesalahan error 404, sebagai pemilik situs/website bisa menggunakan kata-kata sesuai keinginan. Akan tetapi secara umum beberapa kata-kata yang dapat atau digunakan untuk suatu pesan kesalahan yang ditampilkan dari sebuah HTTP Error 404 :

1. 404 Error
2. 404. That’s an error.
3. 404 Not Found
4. The requested URL [URL] was not found on this server.
5. HTTP 404 Not Found
6. 404 Page Not Found

Halaman yang ditampilkan untuk pesan kesalahan 404 not found berupa layar putih dengan teks hitam sederhana. Berikut adalah screenshot dari error 404 yang mungkin Anda lihat.

Atau untuk halaman yang tidak ditemukan pada blog ini tanpilannya seperti dibawah ini :

Bagaiman mengatasi pesan kesalahan error 404?
Hal pertama yang harus diketahui adalah yang apabila pesan kesalahan itu berhubugan dengan halaman konten, pastikan apakah benar konten ini pernah ada ? Jika iya, segera update/perbaharui konten tersebut, namun jika halaman tersebut sengaja anda delete dan tidak ingin menampilkan lagi atau halaman konten benar-benar tidak pernah ada, maka ini menjadi masalah tersendiri.

Dampak yang mungkin saja terjadi adalah apabila pengguna mendampatkan tautan link tersebut melalui google pencarian maka ini bisa saja memiliki dampak terhadap posisi website anda di mata google. Namun anda bisa mengatasinya dengan menggunakan Google webmasters tools, dengan cara seperti dibawah ini :

1. Lagin ke akun Google Webmaster tools anda.
2. Klik menu Google indeks > hapus URL.
3. Lalu ketuk tombol "sembunyikan sementara"
4. Masukan URL yang akan dihapus, lanjutkan ketuk tombol "terus"

Lalu bagaimana jika pesan error 404 itu terjadi pada saat kita membuka halaman depan sebuah situs?
Untuk kasus ini mungkin terlihat pada gambar ke-2 diatas yang tertulis "404. That’s an error.".. Terlihat bahwa setiap membuka halaman situs maka selalu menampilkan pesan kesalahan error 404.

Untuk kesalahan ini terjadi jika suatu domain yang dialihkan atau di custom domain ke hosting blogger/blogspot. Kesalahan ini terjadi banyak kemungkinannya :

1. Jika anda baru saja meng-custom domain anda, maka tunggu 1 x 24 jam untuk melihat hasilnya. Ini kemungkinan DNS terhadap domain membutuhkan waktu untuk me-resolved-nya.
2. Jika situs yang berjalan normal namun tiba-tiba menampilkan pesan seperti diatas maka anda harus memeriksa kembali settingan DNS domain anda. Anda bisa mempelajari bagaimana melakukannya silahkan baca artikel custom domain pada blogger - blogspot.

Untuk mengatasi pesan error 404, cara-cara dasar dibawah ini terkadang bisa saja dapat mengatasi permasalahan yang ada, dan mungkin ada baiknya anda lakukan :

1. Refresh halaman - Pertama-tama coba lakukan merefreh halaman cara dengan menekan tombol keyboard [F5]. Dengan merefresh halaman bisa saja kesalahan karena halaman tidak terload dengan sempurna.
2. Bersihkan Cache dan cookies browser - Jika anda mengunjungi halaman situs dari perangkat lain, seperti ponsel, tablet, membersihkan cache dan cookies biasanya akan memecahkan masalah.
3. Periksa URL - Pastikan bahwa URL yang dimasukkan benar tentu termasuk ejaan URL, garis miring yang benar, ekstensi file halaman, kode angka dan sebagainya.
4. Pindai Malware - Dalam beberapa kasus ada beberapa file malware yang akan memaksa 404 Kesalahan di suatu situs/website. Ini penting untuk memastikan komputer Anda bersih dan tidak terganggu.

Jika semua cara yang anda lakukan semuanya tidak menemukan hasil, dengan menghubungi Webmaster atau penyelia hosting adalah cara terakhir yang bisa anda lakukan. Ternyata setelah diselidiki lebih lanjut bisa saja server mengalami masalah, sehingga memunculkan pesan kesalahan error 404.

Baca juga : Redirect Halaman 404/Broken Link Blog untuk SEO

Pertanyaannya? sebagai pemilik situs, pernahkah anda mengalami hal tersebut diatas? bagaimana anda mengatasinya? Bisa berbagi info melalui kotak komentar dibawah?