Template Toko Online Blogspot: Tutorial

Browse » Home Page » Semua Artikel Tentang » Tutorial

Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Sabtu, 03 Agustus 2013

Bikin Title Tag SEO Friendly

TItle tag default bawaan blogspot sepertinya kurang begitu bagus di mata search engine. Hal ini tentunya dapat mengurangi nilai SEO blog kita. Kali ini akan saya share suatu tips seo untuk blogger blogspot tentang bagaimana merubah title tag di blogspot supaya lebih seo friendly.

Merubah Title Tag Blogspot

To the point aja. Saya asumsikan anda sudah berada di halaman edit template pada blogspot. Jika belum, silahkan login dan masuk ke menu template lalu klik edit HTML kemudian klik lanjutkan.

Sebelum lanjut, disini kita akan merubah title tag pada blogspot dengan menggunakan blogger conditional tag. Sehingga penggunaan title tag bisa lebih terfokus / tertarget sesuai dengan halaman yang kita inginkan. Berikut tutorial nya :

1. Cari kode <title><data:blog.pageTitle/></title>

2. Hapus kode tersebut, kemudian ganti dengan kode berikut :


<b:if cond='data:blog.pageType == "index"'>

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

<b:else/>

  <title><data:blog.pageName/> | <data:blog.title/></title>

</b:if>

3. Save Template.

Penggantian kode title tag diatas, akan merubah title tag yang ada di halaman selain index, yaitu halaman posting dan static page menjadi seperti ini :

Judul Post | Judul Blog

Dengan adanya perubahan pada title tag tersebut, maka halaman posting dan static_page blog anda akan lebih search engine friendly. Untuk selanjutnya, tinggal giliran sobat untuk mengoptimasi masing – masing artikel agar bisa tampil di halaman terdepan dari mesin pencari.

Selanjutnya ...

Kamis, 01 Agustus 2013

Membuat Artikel Terkait Vertikal Dengan Thumbnail

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail sangatlah mudah. Artikel terkait ini banyak digunakan untuk membantu blogger yang kesulitan melakukan interlink antar artikel. Manfaat lain penggunaan artikel terkait ini adalah membantu meningkatkan pageview blog anda dengan terus menawarkan artikel-artikel yang lain ke pengunjung blog.

Untuk membuat artikel terkait tampil di bagian bawah postingan cukup lakukan prosedur sederhana berikut ini:

Buka menu TEMPLATE lalu pilih EDIT HTML

Centang EXPAND TEMPLATE WIDGET

Copy kode di bawah ini dan paste tepat di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #333;  border-bottom:1px solid #333;  color:#333;  font-size:14px;  letter-spacing:0;  line-height:20px;  margin:0 0 5px;  padding:5px 10px; background:#03C}
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 150;
var morelink = "selengkapnya";

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

Sekarang cari kode <data:post.body/>

Copy kode di bawah ini dan taruh tepat di bawah <data:post.body/> tadi

<b:if cond='data:blog.pageType == "item"'>

<div id='related_posts' style='margin-top:35px;'>
<h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;'>Artikel Terkait</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>

Jika lebih dari satu coba saja pasang satu persatu. Jika tidak terjadi perubahan, pindahkan ke kode <data:post.body/> lainnya. Sebaiknya mulai dari <data:post.body/> yang paling bawah....

Hasil dari pemasangan kode ini akan terlihat seperti gambar di bawah ini:

Ok, terima kasih sudah mau mampir di blog saya ini. Mudah-mudahan artikel ini bisa membantu anda.

Sumber : http://trikmudahseo.blogspot.com/2012/10/cara-membuat-artikel-terkait-vertikal-dengan-thumbnail.html

Selanjutnya ...

Sabtu, 27 Juli 2013

Cara Bikin Breadcrumb

Cara Bikin Breadcrumb di Blogspot.

Artikel saya kali ini akan membahas tentang fitur navigasi yang terletak di atas atau bisa juga di bawah judul postingan, yang biasa kita kenal dengan nama breadchumb. Pengertianbreadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).

Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat.

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :

Seperti biasa anda harus login ke Blogger.

Langsung tuju Edit HTML.

Klik Expand Template Widget.

Letakkan kode berikut ini tepat sebelum kode ]]></b:skin>

/* breadcrumbs

----------------------------------------------- */

.breadcrumbs{padding-top:5px;padding-bottom:5px; margin:0 0px 5px 0px; font-size:11px; border-bottom:4px double rgb(224, 224, 224); font-weight:bold; font-family:Tahoma; height:auto;}

.breadcrumbs a,

.breadcrumbs a:visited{color:#222; font-size:11px; font-weight:bold; font-family:Tahoma; height:auto;}

.breadcrumbs a:hover{color:blue;font-size:11px; font-weight:bold; font-family:Tahoma; height:auto;}

Setelah itu, cari kode seperti ini :
<b:includable id='main' var='top'>

Lalu ganti kode berikut <b:includable id='main' var='top'> dengan kode berikut:

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == "static_page"'>

<div class='breadcrumbs'><span>Browse »

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

</span> » <span><data:blog.pageName/></span></div>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>



<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>

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

» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

</b:loop>

» <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'>

<span>

Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

</span> » <span>Unlabelled</span> »

<span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>



<div class='breadcrumbs'>

<span> Browse » <a expr:href='data:blog.homepageUrl'>Home</a>

</span> » <span>Archives for <data:blog.pageName/>

</span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == ""'>

<span>Browse »<a expr:href='data:blog.homepageUrl'>Home</a>

</span> » <span>All posts</span>

<b:else/>

<span>Browse »<a expr:href='data:blog.homepageUrl'>Home</a>

</span> » <span>Posts filed under <data:blog.pageName/>

</span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

Simpan Template.

Selanjutnya ...

Menampilkan Homepage dengan halaman statis

Sebuah impian mungkin, bagi kalian untuk memiliki halaman muka/homepage blog tersendiri yang terbebas dari daftar posting yang telah diterbitkan. Dulu Saya juga begitu, sampai Saya mempelajari tag kondisional Blogger lebih jauh. Kali ini Saya akan membagikannya kepada kalian tentang bagaimana cara menghilangkan semua posting dan menambahkan pesan selamat datang di halaman muka.

Yang kita butuhkan pada dasarnya hanya satu jenis tag kondisional, yaitu tag kondisional halaman muka seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode yang kurang lebih tampak seperti ini:

<b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Tepat di atas kode tersebut, letakkan kode ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='main' id='homepage'></b:section>
<b:else/>

dan tepat di bawahnya, letakkan kode ini:

</b:if>

sehingga hasilnya akan menjadi seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='main' id='homepage'></b:section>
<b:else/>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
</b:if>

Seperti yang kalian lihat bahwa apa yang kalian lakukan sebenarnya hanyalah menggandakan elemen <b:section> dimana salah satu hanya akan tampil di halaman muka, sedangkan satunya lagi hanya akan tampil selain di halaman muka.

Klik Simpan Template. Sekarang masuklah ke halaman Tata Letak. Jika berhasil, seharusnya widget posting akan menghilang, digantikan oleh sebuah navigasi untuk menambahkan widget baru seperti ini:

Widget posting menghilang, dan sebuah elemen untuk menambahkan widget baru akan tampil seperti halnya pada sidebar blog. — Widget posting akan menghilang, dan sebuah elemen untuk menambahkan widget baru akan tampil seperti halnya pada sidebar blog.

Dari elemen itu Anda bisa menambahkan widget yang hanya akan ditampilkan pada halaman muka. Widget bisa berupa apa saja. Misalnya seperti teks ucapan selamat datang seperti gambar di atas, widget daftar isi, slideshow otomatis, atau yang lainnya.

Tutorial | Source: http://www.dte.web.id/2012/03/tip-membuat-halaman-muka-blog.html

Selanjutnya ...

2 Step to create nice Readmore.

1. Copas style-nya diatas kode: ]]></b:skin>

/* readmore */

.jump-link a {

font-family: Arial, Helvetica, sans-serif;

font-size: 15px;

padding: 7px 12px;

background: -moz-linear-gradient(

top,

#fff 0%,

#222);

background: -webkit-gradient(

linear, left top, left bottom,

from(#fff),

to(#d7d8de));

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow:

0px 1px 2px rgba(000,000,000,0.5),

inset 0px 0px 1px rgba(255,255,255,0.5);

-webkit-box-shadow:

0px 1px 2px rgba(000,000,000,0.5),

inset 0px 0px 1px rgba(255,255,255,0.5);

box-shadow:

0px 1px 2px rgba(000,000,000,0.5),

inset 0px 0px 1px rgba(255,255,255,0.5);

}

2. Copy kode HTML-nya,REPLACE kode <data:post.body/>

(mungkin yang kedua) dengan kode berikut:

<b:if cond='data:blog.pageType == "item"'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == "static_page"'>

<data:post.body/>

<b:else/>

<div expr:id='"summary" + data:post.id'>

<data:post.body/>

</div>

<script type='text/javascript'>

createSummaryAndThumb("summary<data:post.id/>");

</script>

<span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'>

<a expr:href='data:post.url'>

Continue Reading...

</a>

</span>

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

</b:if>

</b:if>

Lalu save.

Jika mau bikin kreasi tombol, tetap semangat dan terus berusaha sampai OK.

Terimakasih.

Selanjutnya ...

SimpleSukses.com

Bikin Title Tag SEO Friendly

Merubah Title Tag Blogspot

Membuat Artikel Terkait Vertikal Dengan Thumbnail

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail

Cara Bikin Breadcrumb

Menampilkan Homepage dengan halaman statis

ReadMore

Label Artikel

Tentang Admin

Template Toko Online Blogspot

Statistik Pengunjung

Arsip Blog