Tutorial Cara Mudah Design Blog

Tips - Template - Mempercantik Blog - Traffic Blog - SEO

Cara Memasang Meta Tag,Keyword dan Deskripsi di Template blogspot

Selain mengubah tag heading di blogspot menjadi seo friendly, Meta tag keyword dan deskripsi ini salah satu teknik seo yang wajib, kenapa wajib ? Menurut pakar seo dalam meningkatkan blog menjadi no 1 di serp adalah keyword. Berikut langsung saja cara memasang meta tag keyword dan deskripsi di blogspot :

Masuk blogger > rancangan > edit html > centang expand template widget, cari kode di bawah ini:

<title><data:blog.pageTitle/></title>

Letakan kode berikut ini di bawah kode tadi:

<meta content=' Tulis deskirpsi kamu disini' name='description'/> <meta content='tulis keyword1 keyword2 keyword3 kamu disini' name='keywords'/> <meta content='INDEX, FOLLOW' name='ROBOTS'/>

Penjelasan :

<meta content=' Tulis deskirpsi kamu disini' name='description'/> Kode di atas disebut dengan meta tag deskripsi yang berisikan tentang deskripsi atau gambaran umum tentang blog kita. Contoh nya <meta content=' aplikasi handphone,jasa iklan' name='description'/> <meta content='tulis keyword1 keyword2 keyword3 kamu disini' name='keywords'/> kode di atas disebut meta tag keyword kode ini lah yang menentukan keyword sebagai senjata utma dalam seo.

Dalam menuliskan keyword harus di tandai dengan tanda pemisah ( , ) atau ( | ) tidak boleh di ulang- ulang misalkan begini : tutorial linux ubuntu | aplikasi linux ubuntu. Terlihat jelas bahwa dalam penulisan tersebut terdapat kata yang berulang-ulang yaitu linux ubuntu. Hal ini akan di anggap sebagai spam oleh google. Berikut contoh penulisan keyword yang benar <meta content='Tutorial, cara, instal, how to, aplikasi,applications, Driver, Linux, Ubuntu' name='keywords'/> <meta content='INDEX, FOLLOW' name='ROBOTS'/> kode di atas adalah meta tag robots, tujuan nya adalah mengizinkan robot search engine atau spider untuk mengindex blog kita. Ini sangat berguna supaya halaman-halaman kita terbaca oleh search engine.
22.14

Cara Membuat Menu Dtree Pada Blog


Ada yang menanyakan tentang menu Dtree, saya akan bahas sekalian bisa agan praktekan

Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?

Beginilah cara membuatnya :

1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>

<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" />
<script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>

3. Trus Klik Tombol "Save
4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.

<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>
berikut ini keteranganya:
  • Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
  • Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
  • Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
  • Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:
d.add(10,0,’Profile’,’link.html’,’’,’’,’http://1.bp.blogspot.com/_cwjk6FH_7pw/Sb4bSFYb_GI/AAAAAAAAD1g/Mp-0M0Xxz8s/s72-c/siu%20mau%20%28397%29.jpg’);

Ganti text "Tulisan Merah" dengan alamat gambar kamu

Mudah Khan...
Selamat Mencoba....

23.59

Cara Membuat Widget Change Font This Blog

Widget Change Font This Blog - adalah widget yang memungkinkan pengunjung untuk mengganti jenis font pada blog tersebut. Jadi hanya butuh beberapa detik saja, font ,atau jenis huruf blog tersebut dengan sekejap berubah. Selain itu, dengan Widget Change Font This Blog, pengunjung selain bisa mengubah jenis font juga bisa mengubah ukuran font atau huruf sesuka hati.

Dengan demikian penggunjung akan lebih senang, karena bisa mengganti jenis font sesuak hati. Jenif font memang sangat memengaruhi tulisan, pengunjung yang satu dengan pengunjung yang lain tentunya berbeda selera. Nah, pada postingan kali ini, kita akan belajar membuat, memasang Widget Change Font This Blog, atau Widget untuk mengubah Jenis Font Otomatis pada Blog. Bagaimana caranya ? TKP Gan . . . . .

Cara membuat dan memasang widget Change Font This Blog
  • Masuk ke blogger
  • Buka design / rancangan
  • Pilih Page Elemen /Elemen Laman
  • Add a Gadget / Tambahkan Gadget
  • Pilih HTML /  Javascript ,dan masukkan kode berikut
<script>
    function go1(){
    if (document.selecter2.select2.options
    [document.selecter2.select2.selectedIndex].value != "none") {
    document.getElementById('main').style.fontSize
    =document.selecter2.select2.options
    [document.selecter2.select2.selectedIndex].value
    }
    }
    function go2(){
    if (document.selecter2.select3.options
    [document.selecter2.select3.selectedIndex].value != "none") {
    document.getElementById('main').style.fontFamily
    =document.selecter2.select3.options
    [document.selecter2.select3.selectedIndex].value
    }
    }
    </script>
    <form id="forma" name="selecter2" method="POST">
    <select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
    <option value="Times New Roman" />Times New Roman
    <option value="Arial" />Arial
    <option selected value="Book Antiqua" />Book Antiqua
    <option value="Bookman Old Style" />Bookman Old Style
    <option value="Century Gothic" />Century Gothic
    <option value="Comic Sans Ms" />Comic Sans Ms
    <option value="Tahoma" />Tahoma
    <option selected value="Trebuchet Ms"//>Trebuchet Ms
    <option value="Verdana" />Verdana
    </select>
    <select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
    <option value="8px" />8
    <option value="9px" />9
    <option value="10px" />10
    <option value="11px" />11
    <option selected value="12px" />12
    <option value="14px" />14
    <option value="16px" />16
    <option value="18px" />18
    </select></form>
    </div>

  • Simpan
  • Hasilnya seperti ini


Oke sampai di sini, semoga bermanfaat.

Artikel sebelumnya Cara Memasang Tombol Share di Posting Blog
20.15

Snippet Google+ Tidak Plus Dengan Meta Description Tags?

Snippet Google+ Tidak Plus Dengan Meta Description Tags?

Beberapa sobat mungkin sudah pernah menambahkan Meta Tags pada template blognya, baik itu tags description, keyword, author, robots, dan lain-lain.

Nah, bagi mereka yang sudah menambahkan tags description pada template blognya, maka snippet yang muncul pada post Google+ adalah deskripsi yang terdapat pada tags tersebut, bukan snippet dari artikel yang kita tulis. Tentu saja hal ini kurang mengenakan karena setiap kali kita mempublish sebuah artikel maka yang muncul terus-terusan berupa tags description, sekalipun judul artikelnya berbeda-beda.

Snippet Google+ Tidak Plus Dengan Meta Description Tags?

Untuk menghilangkannya, hapus saja tags description yang terdapat pada template blog sehingga apabila ada sobat lain yang menshare melalui Google+ button, atau ketika mempublish sebuah artikel (bagi mereka yang sudah menghubungkan blogger profile-nya dengan Google+) maka yang muncul nanti adalah snippet dari artikel yang kita tulis. Gampang kan?

Lalu bagaimana dengan tags description-nya, padahal sangat penting buat penelusuran si mbah? Ya... tunggu saja artikel berikutnya, hehehe...

Ok, segitu aja sob informasinya. Semoga bermanfaat ..
20.07

Mengalihkan URL Tips Untuk Posting Yang Terhapus Dengan Pengalihan Khusus

Mungkin di antara sobat, secara sengaja ataupun tidak, pernah menghapus sebuah artikel yang sudah terpublikasi, atau mungkin juga ada sebuah artikel yang "sudah kadaluarsa" sehingga tidak ingin dibaca lagi oleh orang lain.

Untuk hal semacam itu sebaiknya dilakukan pengalihan ke URL (Uniform Resource Locator) lain sehingga pembaca masih bisa menikmati bacaan (artikel) lain yang mungkin masih erat hubungannya dengan artikel yang sudah dihapus atau kadaluarsa tersebut, sehingga tidak merasa sia-sia ketika membuka URL artikel yang sudah terhapus atau kadaluarsa tersebut.

Untuk mengalihkan URL ini, lakukan hal berikut:
  • Dari halaman Dasbor, pilih Setelan - Preferensi penelusuran.
  • Pada bagian Pengalihan Khusus pilih Edit.
  • Setelah itu, pada kota isian, masukkan URL yang diinginkan, seperti nampak pada gambar berikut:

Catatan:
URL tidak ditulis lengkap dengan http://namablog.blogspot.com, tapi cukup memasukkan ujungnya saja, seperti contoh berikut:
    Dari :   /2010/02/awas-css-cascading-style-sheets-blog.html

    Kepada :    /2012/09/membuat-css-sprite-untuk-mempercepat.html

Setelah itu simpan dan ucapkan Alhamdulillah....


Pengalihan khusus ini bisa lebih dari satu. Kamu bisa menambahkan URL-URL lain sesuai kebutuhan.

Ok, segitu aja sob. Semoga bermanfaat .
19.57

Cara Memasang Tombol Share di Posting Blog

Artikel sebelumnya saya sudah membahas tentang Cara Menambahkan 2 Kolom Elemen Halaman Di Bawah Header, kali ini saya akan memberikan posting tentang Cara memasang tombol share di posting blog.

Sebagai blogger sangat dianjurkan bahkan di wajibkan memasang tombol share pada setiap posting. Manfaat yang diperoleh dari pemasangan tombol share di setiap posting, terutama trafficnya akan terus meningkat.

Sebagai bayangan ilustrasi jika visitor yang membaca posting anda memiliki akun facebook yang beranggotakan 400 teman, di saat visitor tersebut melakukan klik tombol like maka otomatis postingan anda akan terkirim di dindingnya. Saat itulah teman-teman dari visitor tersebut juga akan ikut membaca artikel anda.

Berikut ini ada 3 pilihan tombol share yang bisa anda gunakan sesuai kebutuhan.

1. Kode script button share style-1:

<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71feed783c3890"></script>
<!-- AddThis Button END -->



2. Kode script button share style-2:


<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71ff8750bee738"></script>
<!-- AddThis Button END -->



3. Kode script button share style-3:

<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71fdea5bff8d67"></script>
<!-- AddThis Button END -->



Setelah anda menentukan salah satu preview yang cocok, langkah selanjutnya memasang di template. Berikut cara pemasangannya.
  1. Login ke dashboard blogger anda.
  2. Pilih Rancangan > Edit HTML, centang Expand widget template.
  3. Cari kode <data:post.body/>  atau kode <div class='post-header-line-1'/>  pada template anda ( salah satunya saja ! ) dan letakkan script button sharenya diatas kode tadi.
  4. Save template dan lihat hasilnya.
Lihat hasilnya. Semoga bermanfaat.
09.49

Cara membuat Artikel Terkait Dengan Gambar/Thumbails

Pada artikel sebelumnya saya sudah membahas cara membuat tab view widget, sekarang akan saya jelaskan cara membuat artikel terkait dengan gambar/thumbails yang berada di bawah postingan.

Baiklah tanpa panjang lebar langsung saja kita mulai tutorial ini.
1. Masuk ke akun blogger sobat
2. Klik design kemudian edit HTML
3. Centang kotak kecil di kanan atas Expand Widget Templates
4. Untuk menghindari kesalahan sebaiknya download full template dulu
5. Setelah itu letakkan kode berikut di atas </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}



#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://belajarblogging.googlecode.com/files/releatedimage.js' type='text/javascript'/>

</b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->


Kalau sudah, cari kode berikut

<div class='post-footer-line post-footer-line-1'>

Dan letakkan kode di bawah ini di BAWAH kode di atas

<!-- Related Posts with Thumbnails Code Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://bloggerbiasa.blogspot.com/2011/01/cara-membuat-artikel-terkait-dengan.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle="Artikel Terkait";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!-- Related Posts with Thumbnails Code End-->


Simpan template dan lihat hasilnya.
Selamat mencoba.


05.16
Langganan: Postingan (RSS)
 
Flag Counter