Belajar Ngeblog

Selamat Datang di APRIZAL. ini membahas seputar Blogspot, SEO dan juga berbagi. Semoga apa saya tulis bermanfaat buat sahabat.

perumnas tekojo blok E27

Minggu, 29 Desember 2013

Buat Navigasi Menu Full Color di Blog.



 Mari renovasi blog dengan Navigasi Menu Full Color di Blog kita

1. Login ke akun blogger.
2. Langsung menuju Template klik Edit HTML.
3. Copy kode CSS berikut ini, lalu taruh di atas kode ]]></b:skin> kemudian Simpan template.


.navmenu { background: #111; border-bottom: 5px solid #0091d6; position: relative; height:35px; margin: 0 auto; text-transform: uppercase; z-index: 1; }
ul.navfullcolor { list-style: none; padding: 0; font: 14px Arial; font-weight: bold; width:auto; line-height: 15px; margin: auto; }
ul.navfullcolor li { float: left; position: relative; margin: 0px 1px 0px 0px; }
ul.navfullcolor li a, ul.navfullcolor li a:link { color: #fff; text-decoration: none; display: block; padding: 10px 26px; transition: all 0.2s ease; }
ul.navfullcolor li a:hover { color: #fff; transition: all 1s ease; }
ul.navfullcolor li ul { display: none; top: 35px; border-top: 5px solid #FF8000; }
ul.navfullcolor li:hover ul { position: absolute; display: block; padding: 0; list-style: none; }
ul.navfullcolor li ul li { float: none; background: #282321; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230; width:210px; }
ul.navfullcolor li ul li a, ul.navfullcolor li ul li a:link { color: #aaa; display: block; }
ul.navfullcolor li ul li a:hover { background: #FF8000; }
.green{background-color:#01A451 !important;} .green:hover{background-color:#52e052 !important;}
.yellow{background-color:#FBC700 !important;} .yellow:hover{background-color:#FFE500 !important;}
.red{background-color:#D52100 !important;} .red:hover{background-color:#ff0000 !important;}
.purple{background-color:#660099 !important;} .purple:hover{background-color:#D580FE !important;}
.blue{background-color:#0091d6 !important;} .blue:hover{background-color:#80C8FE !important;}

4. Selanjutnya taruh HTML ke dalam template, letaknya bisa menyesuaikan template lama atau agar lebih mudah masuk Tata Letak > Tambah Widget > HTML/Javascript.
5. Copy kode berikut ini, lalu paste ke dalam widget HTML/Javascript kemudian klik Simpan.

<div class='navmenu'>

<ul class='navfullcolor'>

    <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li>

    <li><a href='http://blog anda.blogspot.com' class='red'>Menu utama</a>

        <ul>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 1</a></li>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 2</a></li>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 3</a></li>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 4</a></li>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 5</a></li>

        </ul>

    </li>

    <li><a href='http://blog anda.blogspot.com' class='yellow'>Menu utama</a>

        <ul>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 1</a></li>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 2</a></li>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 3</a></li>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 4</a></li>

        </ul>

    </li>

    <li><a href='http://blog anda.blogspot.com' class='green'>Menu utama</a>

        <ul>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 1</a></li>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 2</a></li>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 3</a></li>

        </ul>

    </li>

    <li><a href='http://blog anda.blogspot.com' class='purple'>Menu utama</a>

        <ul>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 1</a></li>

        <li><a href='http://blog anda.blogspot.com'>Sub Menu 2</a></li>

        </ul>

    </li>

    <li><a href='http://blog anda.blogspot.com' class='red'>Menu utama</a></li>

    <li><a href='http://blog anda.blogspot.com' class='yellow'>Menu utama</a></li>

    <li><a href='http://blog anda.blogspot.com' class='green'>Menu utama</a></li>

</ul>

</div>

Keterangan:
Ganti http://Blog anda.blogspot.com dengan label link blog anda.

6. Setelah tersimpan silahkan lihat hasilnya.

Kamis, 26 Desember 2013

Menambah Widget di Samping Kiri dan Kanan Blog



  1. Login ke akun blog sobat
  2. Pilih template
  3. Edit HTML
  4. Cari kode ]]></b:skin>
  5. Tempatkan kode dibawah ini tepat di atassnya ]]></b:skin>

.content{z-index:1;}
.ad-left, .ad-left img {left:0px}
.ad-right, .ad-right img {right:0px}
.ad-left, .ad-right {bottom:0px;
min-width:0px; max-width:120px;
height:100%; text-align:center;
white-space: nowrap; position: absolute;
z-index:0; overflow:hidden;
margin:0px; padding:0px}
.ad-left .widget, .ad-right .widget,
.ad-left .widget-content,
.ad-right .widget-content {
margin:0px;padding:0px;}
.ad-left h2, .ad-right h2 {display:none}
.ad-left .widget-content,
.ad-right .widget-content {line-height:1;}
.ad-left img, .ad-right img {
top:32px; position:fixed;
z-index:-1; opacity:0.7;
width:120px; height:600px;}
.ad-left a:link, .ad-right a:link {
width:120px; height:600px;
display:block; position:relative;}
.ad-left:hover, .ad-right:hover{z-index:2}
.ad-left .widget .widget-item-control img,
.ad-right .widget .widget-item-control img {display:none;}



         Selanjutnya cari kode </body> dan sisipkan kode dibawah ini tepat di atasnya

        <b:section class='ad-right' id='ad-right' showaddelement='yes'></b:section>
        <b:section
 class='ad-left' id='ad-left' showaddelement='yes'></b:section>

      Simpan template



Nah, sekarang tinggal kembali ke tata letak, perhatikan tambahan gadget di bagian bawah...


NB :

      Ganti 120px jika ingin ukuran iklannya 160px


Senin, 25 November 2013

Cara Seting Preferensi Penelusuran Blogger Untuk Optimasi SEO



    Blogspot di tahun 2012 telah melakukan perubahan besar-besaran, mulai dari tampilan yang terlihat lebih simpel dan elegan juga di tambah dengan fitur-fitur baru yang dapat membantu para blogger untuk memanajemen blog nya. Ada satu fitur yang menarik menurut saya yaitu fitur-fitur pada Preferensi penelusuran fitur ini berfungsi untuk mempermudah kita dalam optimasi blog, sehingga kita tidak perlu lagi disibukkan oleh penyesuaian meta tag blog dengan mengutak atik kode template.
Oke langsung saja kali ini saya akan menjelaskan cara setting preferensi penelusuran step by step.
pertama masuk dulu ke akun blog kamu.
pilih salah satu blog dan pilih menu setelan
setelah masuk ke menu setelan kemudian pilih sub menu preferensi penelusuran.


1. Pada fitur Tag Meta Deskripsi pilih edit lalu aktifkan Deskripsi penelusuran dengan memilih radio buton "Ya".
kemudian Kamu masukan deskripsi blog Kamu di kolom yang di sediakan dengan maksimal panjang 150 karakter, kemudian Simpan.

2. Pada fitur kesalahan dan pengalihan, opsi  Pesan Khusus Halaman Tidak di Temukan
berfungsi untuk memberi keterangan pada halaman atau link blog yang tidak di temukan, dan opsi pengalih khusus berfungsi untuk mengalihkan atau salah sau halaman atau link blog ke link lain. fitur ini kita abaikan saja.

3. Pada fitur perayapan dan pengindekan kita dapat membuat sitemap blog pada opsi custom robots.txt khusus secara otomatis. Artinya kita tidak perlu lagi ping blog secara berkala, dengan penyesuaian robots.txt untuk sitemap, maka secara otomatis ketika google mengcrawl blog kita seluruh postinga akan segera diindeks oleh google.

Caranya :
Pada opsi robots.txt khusus pilih edit dan akfifkan dengan memilih radio buton "Ya".
kemudian masukan kode di bawah ini pada kolom.

Kode untuk postingan blog yang kurang dari 500 artikel
User-agent: *
Disallow: /search
Allow: /


Sitemap:  http://.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

Kode untuk postingan blog di atas 500 - 1.000 artikel
User-agent: *
Disallow: /search
Allow: /



Sitemap:  http://blogspot.com/atom.xml?redirect=false&start-index=501&max-results=500



Kode untuk postingan blog di atas 1000 - 1500 artikel
User-agent: *
Disallow: /search
Allow: /


Sitemap:  http://.blogspot.com/atom.xml?redirect=false&start-index=1001&max-results=500

ganti url yang berwarna merah dengan url blog kamu.
kemudian simpan.


ntuk mengoptimalkan tag header robot ubahsuaian, ada beberapa penyettingan yang harus kita lakukan. yaitu dengan memberi centang atau ceklis pada Laman arsip dan penelusuran. Hal ini kita lakukan agar tidak terjadi lagi duplikat content dari arsip blog yang kita miliki.

Caranya :
Klik Edit pada opsi Tag header robot khusus, kemudian pilih "Ya", setelah itu beri centang atau ceklis pada kotak noindex dan noarchive pada Laman Arsip dan Penelusuran,lalu simpan perubahan.



Catatan : Pada opsi Beranda dan Default untuk Pos dan Laman kosongkan saja, agar robot crawl google dapat leluasa untuk meng-crawl homepage serta single page pada blog kita.


Demikianlah penjelasan yang dapat saya sampaikan mengenai Cara Setting Preferensi Penelusuran blogspot, semoga bermanfaat dan menambah wawasan Anda.