Membuat Page Navigasi Halaman pada Blogspot

Navigasi yang jelas dan mudah merupakan salah satu hal yang dapat membuat pengunjung sebuah situs atau blog menjadi betah, tentu alasannya karena mereka merasa mudah dalam menemukan informasi yang mereka butuhkan. Tips dan trik blogging kali ini adalah mengenai cara membuat nomor halaman pada blogspot. Caranya cukup mudah, hanya perlu melakukan beberapa settingan pada blog dan fitur ini pun sudah jadi. Kawan-kawan tidak perlu mahir dalam Javascript atau bahasa pemrograman lainnya karena script untuk penomoran atau paging blogspot tersebut sudah banyak tersebar secara gratis.

Baiklah, kita langsung aja mulai tips dan trik blog dalam membuat nomor halaman untuk blogspot ini. Langkah-langkahnya adalah:

1. Seperti biasa anda harus login dulu ke dashboard
2. Setelah login, silahkan anda pilih menu "Tata Letak" atau "Layout"
3. Selanjutnya anda klik "Tambah Widget" atau "Add Widget"
4. Cari widget "HTML/Javascript"
5. Langkah selanjutnya anda copy kode di bawah ini lalu paste pada widget "HTML/Javascript" tadi.

Kodenya :

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=10;
var displayPageNum=5;
var firstPageWord = 'Home';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Page '+thisNum+' for '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Setelah di paste ke widget "HTML/Javascript" tadi, silahkan kawan-kawan simpan widget tersebut di bagian bawah panel "Blog post". Bila kawan-kawan melakukannya dengan benar, maka sekarang, saat halaman blog di refresh, nomor halaman tersebut sudah muncul.

Tapi, berdasarkan pengalaman saya pribadi, script tersebut ada yang bekerja ada pula yang tidak pada template tertentu, jadi kalau ternyata nomor halamannya tidak muncul, ada kemungkinan templatenya tidak cocok. Bila menemukan kasus tersebut, kawan-kawan bisa mencob,a trik yang kedua, yaitu:

Kawan-kawan silahkan masuk pada menu "Template" lalu pilih "Edit HTML". Selanjutnya aktifkan centang pada bagian "Expand widget template". Langkah selanjutnya kawan-kawan silahkan cari kode ]]></b:skin>. Untuk mempermudah proses pencarian, kawan-kawan bisa menggunakan Ctrl + F lalu pada kotak pencarian ketikkan kode ]]></b:skin>. Setelah ketemu, silahkan kawan-kawan copy script berikut lalu paste di atas kode ]]></b:skin> tersebut.

Scriptnya :

/* ----- Page Navigation styles ----- */
.showpageNum a {
padding: 2px 5px;
margin:0 5px;
text-decoration: none;
border:1px solid #ccc;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #eee;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #ccc;
background: #ddd;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 2px 5px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

Langkah selanjutnya adalah kawan-kawan cari kode </body>, lalu kawan-kawan copy script berikut dan simpan di atas kode </body> tersebut.

Scriptnya :

<!--Page Navigation Start-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://ahmad-rifai-tools.googlecode.com/files/pagenavi.js'
type='text/javascript'/>
<!--END Page Navigation -->

Simpan template, dan pekerjaan membuat nomor halaman atau paging pada blogspot pun selesai. Selamat mencoba.

Catatan:

Pada script di atas, terdapat kode "postperpage=4", kode tersebut merupakan setting mengenai jumlah postingan yang ingin ditampilkan dalam setiap halaman, ini harus disesuaikan dengan pengaturan postingan pada blog kawan-kawan yang ada di bagian setting.

Kode-kode lainnya yang berwarna merah dapat kawan-kawan rubah sesuai dengan keinginan kawan-kawan.

Script untuk Membuat Related Post pada Blogger

Fitur "Related Posts" atau "Artikel Terkait" merupakan salah satu fitur yang banyak sekali memberi keuntungan baik bagi pemilik blog maupun bagi pembaca/pengunjung. Bagi pengunjung, mereka akan dengan mudah menemukan artikel-artikel lain yang memiliki tema atau topik bahasan yang serupa atau terkait dengan yang sedang mereka baca, sedangkan bagi pemilik blog, dengan banyaknya artikel terkait dengan yang sedang dibaca maka akan menambah page view semakin banyak dan itu artinya akan semakin besar peluang untuk mendapatkan keuntungan (bagi blog atau website yang berkategori komersial).

Oke, sekarang bagaimana cara membuat fitur Related Posts tersebut? Berikut langkah-langkahnya:

1. Seperti biasa anda login dulu ke Dashboard
2. Buka bagian "Template" kemudian pilih pada menu "Edit HTML" maka akan muncul jendela pop up dan anda pilih aja "Proses" atau "Proceed" (kalo yang menggunakan bahasa Inggris)
3. Setelah itu, aktifkan tanda centang pada "Expand Widget Template"
4. Langkah selanjutnya cari kode <data:post.body/>. Gunakan Ctrl + F untuk mencarinya.

Setelah kode di atas ketemu, silahkan kawan-kawan copy script berikut ini lalu paste di bawah kode tersebut.

Scriptnya:

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot;
&quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Sangat mudah bukan? Selamat mencoba, bila ada yang kurang jelas, bisa tanya lewat komentar ato lewat YM kalo saya kebetulan lagi online. Terima kasih telah berkunjung.

Membuat Blog Menjadi Seo Friendly

Sebetulnya agak ragu untuk menulis posting ini, mengingat algoritma Google mengenai hasil pencarian seringkali berubah-ubah. Tapi ngga ada salahnya juga kalau saya tuliskan tutorial atau lebih tepatnya trik SEO jadul ini, siapa tahu masih bermanfaat. Trik yang akan saya bagikan kali ini adalah bagaimana membuat judul postingan blog (yang saya maksud disini blog pada Blogger) menjadi lebih SEO friendly atau bersahabat dengan search engine sehingga mendapatkan SERP (Search Engine Result Page) yang cukup baik sesuai dengan kata kunci yang dibidik.

Untuk melakukan trik ini caranya sangat mudah, langkah-langkahnya adalah sebagai berikut:

1. Silahkan login dulu ke Dashboard
2. Setelah login, silahkan kawan masuk ke menu "Template"
3. Disana kawan klik pada "Edit HTML" lalu pilih "Proceed"
4. Selanjutnya kawan cari bagian title (tag title), kalau mau lebih cepat bisa menggunakan bantuan kotak pencarian dengan menekan tombol "Ctrl + F"

Kode yang saya maksud adalah seperti ini:

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

Kalau kode tersebut udah ketemu, silahkan kawan blok kode tersebut lalu ganti dengan kode berikut:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Selesai :D.

Kalo ada yang kurang dipahami mengenai caranya, kawan bisa menghubungi saya, boleh via komentar atau kalau kebetulan lagi online, bisa via Yahoo Messenger.

Selamat mencoba.

Memasang Widget Yahoo Messenger pada Blog

Sebagai sebuah aplikasi chatting yang sangat populer, Yahoo Messenger menjadi salah satu unsur yang sangat penting untuk dipasang dalam sebuah blog, apalagi jika blog itu merupakan toko online atau pun blog yang menyediakan layanan konsultasi bagi para pengunjungnya. Nah, bagaimana cara untuk memasang widget status Yahoo Messenger pada blog? Tips dan trik blogging ini merupakan tingkat permulaan, jadi bagi yang sudah mahir dan kebetulan mampir di blog ini, ya boleh langsung diskip aja tutorial ini :D.

Langsung aja tanpa perlu banyak berbasa-basi lagi, untuk memasang status Yahoo Messenger di blog, silahkan kawan lakukan langkah berikut:

1. Masuk ke Dashboard
2. Masuk ke bagian "Tata Letak" lalu pilih "Tambah Widget" atau "Add Widget" jika menggunakan bahasa Inggris
3. Pilih "HTML/Javascript"

Setelah jendela "HTML/Javascript" terbuka, silahkan copy paste kode berikut:

<a href="ymsgr:sendIM?username_anda"> <img
src="http://opi.yahoo.com/online?u=username_anda&amp;m=g&amp;t=2&am
p;l=us"/></a>

Tulisan yang berwarna merah, silahkan anda ganti dengan username Yahoo Messenger anda. Setelah anda memasang kode tersebut, ketika anda sedang online di Yahoo Messenger baik di desktop komputer, laptop, atau bahkan di ponsel, maka script tersebut akan menunjukkan status online sehingga orang bisa tau bahwa anda sedang siap untuk menerima pesan.

Selamat mencoba!