Tips Cara Memasang Meta Tags Description di Blogger | Update

Melanjutkan postingan boelshare yang lalu mengenai Feature baru di Blogger, Search Preferences. Sekarang boelshare akan bahas cara manmbahkan meta tags description di blogger agar lebih SEO friendly dan Unik pada setiap postingan. Kalau kemarin boelshare membahas mengenai Cara Modifikasi 404 Page Not Found Untuk Blogger yang boelshare kira cukup mudah. Pada tutorial kali ini pun cukup mudah dilakukan.. Jika pada feature blogspot sebelumnya untuk memodifikasi meta tags baik itu meta tags keyword atau meta tags description kita harus memodifikasinya langsung dari Template tapi sekarang kita bisa langsung menambahkan meta tag description langsung pada saat kita menulis postingan. Tentu saja dengan fitur baru ini "Search Description" postingan yang akan kita buat pun akan lebih SEO friendly dan bisa disesuaikan dengan judul, keywords utama dan keywords turunannya. Okeh seperti biasa kita langsung praktek aja.

Optimasi Cara Memasang Meta Tag Description pada Blogspot agar SEO Friendly

Langkah-langkahnya seperti ini:

1. Masuk ke Settings -> Search Preferences -> pada bagian Meta Tags, Description klik Edit kemudian pilih Yes,
   
   
   
   
   Lalu isikan Deskripsi mengenai blog sobat, maksimal 150 karakter, ini nantinya untuk menampilkan Meta Tags Description pada halaman Home. kemudian klik Save Changes.
   
2. Lalu kita pergi ke halaman Template, Edit Template, masukkan kode berikut:
   

   <b:if cond='data:blog.metaDescription'>
   <meta expr:content='data:blog.metaDescription' name='description'/>
   </b:if>

   Sesuaikan dengan Template sobat. Save Template
   
3. Selanjutnya untuk membuat Meta Tags Description pada tiap postingan yang berbeda, dengan cara ketika sobat membuat postingan baru, lihat pada bagian sebelah kanan, Post settings, Search Description, lalu isikan description mengenai postingan sobat. Usahakan isi description sesuai dengan judul. keyword, dan buat semenarik mungkin . :D
   
   
   
   
   
4. Selesai...

Ini contoh postingan boelshare dengan cara menambahkan meta tags description di blogspot, melalui feature Search Description: 

Sekian dulu postingan dari boelshare mengenai Tips Cara Menambahkan Meta Tags Description di Blogspot agar Menjadi SEO Friendly. 

Read More

Membuat 404 Page Not Found Untuk Blogger

Baru nyadar ternyata di blogger ada fitur barunya yaitu Search Preferences, salah satunya yaitu sekarang kita bisa meng-kostum halaman 404 error page not found. Biasanya blogger default error/404 page yang lama hanya menampilkan pesan box error berupa tuslisan saja, seperti ini:

Tapi sekarang kita bisa merubah halaman 404 error page not found dengan style yang anda mau. Anda bisa menambahkan tag HTML dan CSS di dalamnya.

Okeh langsung saja bagi yang ingin merubah halaman 404 not found, ikut langkah-langkah ini.

Tips Cara Membuat Halaman 404 Error Page Not Found untuk Blogger

• Masuk ke Tab "Setting" -> "Search Preferences", lihat pada bagian "Custom Page Not Found", pada bagian kanan klik "Edit".  copy paste kode dibawah ini :
  

  <div class="tampil-error">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEb6VlWPXcZk1RL5O9HBGtLadqxTOHi-CzCQjXqEQ4h7ZPt6UPp-AGMGygTQz6E46kKDlFzbK6qu3pxiHnU3sOxPU0_wQWZv6qDkJpuYK1XXA3owiWoS2JsnUFV9XQzzUku8PKvkhIYcQk/s1600/warning.png" width="50" height="50"/><h2>ERROR 404 </h2><br />
  <p style="font-size:14px;">Halaman yang anda minta tidak ditemukan di server ini. </p><br/>
  <button><a href="http://NAMA_BLOG_SOBAT.blogspot.com">Back to Home</a></button>
  </div>
  

  Pada tulisan "NAMA_BLOG_SOBAT" ganti dengan nama blog sobat / url blog sobat.
  
• Kemudian letakkan pada kolom yang tersedia, seperti gambar berikut, lalu Save:
  
  
• Lalu masuk ke halaman Template, tambahkan kode berikut sebelum   </head> 
  

  <b:if cond='data:blog.pageType == "error_page"'>
  <style type='text/css'>
  .status-msg-wrap{
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR2VHTOzTOhYQ7kXOGPiN2pWQWLIb_RXCnwExNWBHzf8_ROq9wzghUIC4tE28N9Eo4hjwWHnkThcZ9bmrv_P0lo2WEOLSgG8dRKV4BX728qC74Vx0LPF0KtdZE1HZiAL2WBW8F8Nk7fF4/s1600/404-error.png) no-repeat right;
   height: 300px;
  }
  .tampil-error{ font-size: 1em;}
  .tampil-error img, .tampil-error h2{float:left;margin-rigth:5px;font-size:1.5em;}
  .status-msg-border{display:none;}
  .status-msg-body{ text-align:left; padding:.3em 0; width:100%; }
  </style>
  </b:if>
  

• Tambahkan juga kode ini untuk menampilkan title blog ketika halaman 404 Error Page Not Found muncul:
  

  <b:if cond='data:blog.pageType == "error_page"'>
  <title>404 Not Found - Halaman tidak ditemukan </title>
  </b:if>
  

• "Save Template"
• Jika anda mahir dalam HTML dan CSS, Anda bisa mengkostum halaman 404 Error Page Not Found, sesuai dengan style masing-masing.
• Untuk melihat contohnya klik disini

Read More

Scroll to Top Animation for Blogger with Jquery

Lama Tidak menulis artikel, pada kesempatan kali ini boelshare ingin memberikan trik tutorial membuat Animasi Back to Top atau Scroll to Top pada blogspot. Apa itu Back to Top??, Back to Top atau scroll to top adalah semacam "Page Jump"  untuk mempermudah pengunjung blog kembali kehalaman atas tanpa melakukan scroll pada mouse. Biasanya tombol back to top di letakkan di bawah halaman blog. Untuk membuat tombol / button Back to Top diperlukan kode script sperti ini:

1. Login ke blogger.
2. Masuk ke Template => Edit HTML => Proceed => Expand Widget Templates. 
3. Tambahkan kode ini:  id="top"  pada bagian  <body> , sehingga menjadi  <body id="top">  atau bisa juga tambahkan kode ini :  <div id='top'></div>  dibawah kode  <body> , gunakan CTRL + F untuk mempermudah pencarian
4. Kemudian masukkan kode ini sebelum kode </body>

5. agar posisi tombolnya berada di sebelah pojok kanan bawah, tambahkan kode css berikut ini:
   

   #back-top{position:fixed;bottom:8px;right:10px}
   #back-top img{opacity:0.3;-webkit-transition:1s;-moz-transition:1s;transition:1s}
   #back-top img:hover{opacity:1.0}
   

6. Simpan Template, selesai....

Contohnya bisa di lihat pada blog ini,,semoga bermanfaat.. 

Read More