Optimasi Web Blog Supaya Lebih Professional Bagian 1

Saat ini kegiatan Bloging sudah menjadi hal utama karena dari ngeblog bisa menghasilkan uang, sarana dokumentasi ilmu,  dan manfaat lainnya. Banyak sekali.  Blog berasal dari kata Web dan Log (WEBLOG) yang berarti catatan online (yang berada di web). Pengertian yang lebih lengkap, blog adalah situs web yang berisi tulisan, artikel atau informasi bermanfaat yang diupdate (diperbaharui) secara teratur dan dapat diakses secara online baik untuk umum maupun pribadi. Dan semua pengguna Internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.Ketika sudah membuat blog, tentunya harus dilakukan optimasi baik terhadap desain tampilan, Content, dan SEO tentunya. Berikut beberapa Tips dan Trik untuk Optimasi Blog.

1.      Gunakan Domain .com atau yang lainnya. Anda bisa beli domain sendiri kemudian Rubah Nama Domain blogspot ke domain Sendiri. Berikut tutorialnya.

2.       Edit Bagian Content blog, Kemudian Hilangkan Tanggal, Penulis, dan Option Lainnya (Sesuai kebutuhan). Masuk ke menu Admin Blogger kemudian edit di bagian Posting.

3.       Hilangkan Komentar Pembaca, jika halaman yang di posting merupakan halam statis atau bukan Artikel. Caranya Klik menu Setting. 

4.       Hilangkan Nav Header dengan cara masuk ke menu tempalte  kemudian pilih edit tempalte  Cari kode ]]></b:skin> gunakan CTRL+F, lalu letakkan kode berikut diatas kode ]]></b:skin> selanjutnya Save. Kode ada dibawah

“#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}”

Copy tanpa tanda kutip

5.       Hialngkan Tulisan Langganan Entri Atom caranya

·         Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find (CTRL+F) untuk memudahkan pencarian kode;

·         Cari kode di bawah ini:

<b:include data='feedLinks' name='feedLinksBody'/>

·         Hapus/delete semua kode di atas, lalu Save Template, selesai.

6.       Sembunyikan Tulisan Tampilkan posting dengan label Caranya Masuk ke kode Template Gunakan CTRL+F cari kode ]]>

Kemudian letakkan kode dibawah ini, diatas ]]> kemudian Save

“.status-msg-wrap{
display:none;
}
.status-msg-body{
display:none;
}
.status-msg-border{
display:none;
}”

7.       Membuat Menu, langkahnya tambahkan Gadget HTML/JAVASCRIPT selanjutnya paste code dibawah ini.

"<style type="text/css">

/*CSS MENU*/

#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}

#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}

#menu ul{height:35px}

#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}

#menu li:first-child{border-left: none}

#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}

#menu li:hover > a,#menu li a:hover{background:#111}

#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}

#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}

#menu label span{font-size:12px;position:absolute;left:35px}

#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}

#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}

#menu li:hover ul.menus{display:block}

#menu a.home {background: #c00;}

#menu a.sub{padding:0 27px 0 14px}

#menu a.sub::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}

#menu ul.menus a:hover{background:#333;}

</style>

<!-- Mulai Area Menu -->

<nav id="menu">

<input type="checkbox" />

<label>≡Navigation</label>

<ul>

<li><a class="Home" href="#">Home</a></li>

<li><a href="#">Menu 1</a></li>

<li><a href="#">Menu 2</a></li>

<li><a href="#">Menu 3</a></li>

<li><a href="#">Menu 4</a></li>

<!-- Mulai Area Menu Dropdown -->

<li><a class="sub" href="#">Menus</a>  <ul class="menus">

<li><a href="#" title="Kode Warna HTML">Menu 1</a></li>

<li><a href="#">Sub Menu 1</a></li>

<li><a href="#">Sub Menu 2</a></li>

<li><a href="#">Sub Menu 3</a></li>

<li><a href="#">Sub Menu 4</a></li>

<li><a href="#">Sub Menu 5</a></li>

</ul>

</li>

<!-- Area Dropdown Selesai-->  </ul>

</nav>

<!-- Area Menu Selesai-->"

Selanjutnya Edit Sesuai Kebutuhan.

8.       Membuat Peta Lokasi Menggunakan Google Map, Catatan Sudah menandai peta lokasi selanjutnya tinggal share kode kemudian Paste di Postingan Blog di View HTML.

9.       Mengilangkan Show All Label Caranya:

·         Login to Blogger kemudian masuk ke dashboard

·         Pilih Template , Edit HTML , jangan lupa Pilih Check pada "Expand Widget Templates"

·         Cari kode dibawah ini (gunakan fasilitas search Crtl+f):

<b:include data='top' name='status-message'/>

·          Kalau Sudah ketemu, silahkan  hapus saja kode tersebut.

·         Pilih simpan template, dan lihat hasilnya.

10.   Menambahkan Header Blog, untuk membuat header blog anda bisa desain sendiri menggunakan photoshop atau software desain lainnya. Setelah Banner Header Jadi tinggal di pasang di blog.

11.   Membuat Footer Blog.

Refrensi bisa dicoba tutorial ini

http://www.masyadi.com/2014/08/cara-membuat-footer-keren-2-kolom-responsive.html

12.   Menghilangkan Posting Lama, Posting Baru, Beranda, dan Langganan Entri Atom

Refrensi :

http://denblangkon.blogspot.co.id/2012/02/cara-menghilangkan-tulisan-beranda.html

Lihat Hasil Optimasi di Blog www.privatkomputer.com

Selamat Mencoba

Share

Artikel Lainnya :