Software House Production: Blog Tutorial

Home » Posts filed under Blog Tutorial

Tampilkan postingan dengan label Blog Tutorial. Tampilkan semua postingan

Cara paling mudah bikin komentar Facebook di Blogger-Blogspot kamu

Cara Membuat/Memasang Kotak Komentar Facebook di Blogger/Blogspot -Cara Mudah Membuat Kotak Komentar Facebook di Blogger. Cara Membuat Komentar Facebook Untuk Setiap Postingan Blog. Tutorial Lengkap Buat dan Pasang Facebook Comments di Atas kotak komentar blog. Tutorial ini sudah saya uji coba dan berhasil.

Untuk sobat semuanya, pada postingan kali ini saya hadir untuk memberikan tutorial/tips trik tentang blogging. Tentunya sobat sudah punya Facebook semuanya kan, dan tentunya juda sudah pada sering kan komen-komenan ama temen2 FBnya.

Tau gak, kalo kita juga bisa memasang fasilitas komentar facebook di blog kita, kita semuanya tau, bahwa hampir seluruh dunia telah menggunakan facebook sebagai situs jejaring sosial paling populer. Nah dengan memanfaatkan fasilitas Facebook Comments di blog kita, akan dapat memudahkan para pengunjung yang datang untuk meluangkan kritik dan saran kepada blog kita, sehingga kita melalui komentar tersebut kita bisa lebih memperbaiki dar apa yang kurang dari blog kita, yaitu dengan melalui Facebook Comments ini.

Sebenarnya Tutorial Cara memasang komentar facebook di blogspot ini sudah banyak sekali diposting oleh kebanyakan para blogger, namun banyak yang aku coba ternyata banyak yang gak berhasil. dan kini saya menghadirkan tutorial ini sesuai dengan apa yang telah saya uji coba, dan berhasil. yuk ikuti langkah2nya,

Berikut Demo kometar Facebook yang akan kita buat.

Cara Membuat Komentar Facebook di Blog - Tutorial Lengkap

Atau silahkan langsung kunjungi halaman ini untuk melihat demonya :
---> Free Download GOM Media Player Terbaru 2012/2013

Cara Buat kotak komentar Facebook di Blogger :
Untuk memasang fasilitas Komentar Facebook di blog ini, saya menyarankan kepada para sobat blogger semuanya, untuk membackup/mendownload dulu templatenya, hal itu dilakukan untuk menjaga terjadinya error kode/hal-hal yang tidak kita inginkan, sehingga bila ada masalah, kita bisa kembalikan lagi.

Sebelum kita membuat kotak komentar Facebooknya, kita buat dulu Facebook Apps, yang nanti kita akan mendapat App ID, yang mana App ID itu yang kita perlukan untuk membuat facbook koemntarnya.

1. Cara Buat ID Aplikasi Facebook untuk Blogger :

1. Kita mulai dengan masuk ke Akun Facebook.com kita.

2. Setelah masuk, Kunjungi url ini: https://developers.facebook.com/apps

3. Isi kotak yang tersedia, lihat gambar dibawah ini :

Isikan App Display Name sesuai ke ingginan, kosongkan saja App Namespacenya, lalu klik Continue.

4. Etelah Klik Continue/Lanjutkan. maka akan muncul window verifikasi kata dan isikan kata yang telah diberikan. lalu klik Continue/lanjutkan.

5. Setelah itu, akan muncul window baru berupa App ID, Lihat gambar dibawah ini:

"App ID/API Key" adalah nomor aplikasi id facebook Anda. Catat dan simpan nomor App id tersebut di notepad. ini akan diperlukan nantinya.

6. Alamat blog sobat harus ditambahkan ke aplikasi yang dibuat. Tanpa itu, akan muncul warning di kotak komentar blog seperti "Warning: the url --- is Unreachable".

Berikut cara menambah alamat blog:

Klik Edit Settings (kanan atas) pada aplikasi anda. lihat gambar dibawah ini :
Pada "Select how your app integrates with Facebook" Masukkan alamat url blog anda. Contoh, http://vqrtdo.blogspot.com/ (jangan lupa diakhiri dengan garis miring).
Klik Save Changes

Lihat gambar dibawah ini :

Nah, sejauh ini kita sudah selesai membuat ID Aplikasi Facebook untuk blog kita. langkah selanjutnya adalah kita membuat dan memasang kotak koemntar facebook di blog kita.

2. Cara Pasang kotak komentar Facebook di Blogger :
1. Login ke blogger,
2. Masuk ke Template -> Edit HTML -> Centang "Expand Template widget"
3. Cari kode seperti dibawah ini, [biasanya berada sebelum <head>]

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>

masukkan kode seperti ini, lihat kode diatas, ada kode yang saya warnai, itu adalah kode yang ditambahkan.

xmlns:fb='http://www.facebook.com/2008/fbml'

4. Lalu cari kode </head>, lalu letakkan kode berikut tepat diatasnya.

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='NAMA BLOG ANDA' property='og:site_name'/>
<meta content='App ID' property='fb:app_id'/>
<meta content='ID Profil Anda' property='fb:admins'/>
<meta content='article' property='og:type'/>

KETERANGAN: Lihat tulisan yang berwana.
a. Ganti tulisan NAMA BLOG ANDA sesuai nama blog/situs anda.
b. Ganti tulisan APP ID ANDA dengan nomor aplikasi id Anda yang telah anda buat tadi.
c. Ganti ID PROFIL FB dg yang sesuai.

5. Cari kode </head> seperti no 3 tadi dan letakkan kode berikut ini tepat dibawah kode </head>

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'App ID Anda',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Ganti App ID Anda diatas dengan App ID tadi.

6. Lalu cari kode berikut, <data:post.body/> lalu letakkan kode berikut tepat dibawah kode tersebut :

<b:if cond='data:blog.pageType == "item"'> <div class='fb-comments' data-num-posts='2' data-width='450' expr:data-href='data:post.url'/>
</b:if>

450 bisa diganti dengan panjang kotak komentarnya yang sesuai keinginan anda.

7. Setelah langkah diatas sudah selesai, silahkan Klik pratinjau, jika tidak ada error kode, Klik Save Tempaltes/Simpan Template.

Selesai. Enjoy! Sobat telah berhasil membuat kotak koemntar facebook diblognya. Selamat mencoba.

16.49 | 0 komentar | Read More

Membuat breadcrumb agar terindeks mesin pencari

Membuat Breadcrumb Google di Blogger. Memasang atau membuat google breadcrumb ini sangat penting dan sangat dibutuhkan untuk sebuah blog karena dengan memasang google breadcrumb, dapat menutupi salah satu kekurangan blogger yaitu alamat url posting yang terbatas dan kadang terlihat kurang bagus. Selain itu, dengan Google breadcrumb akan membuat blog kita di search engine google lebih terlihat rapi. Coba sobat lihat contoh Google Breadcrumb di bawah ini.

Cara Membuat Breadcrumb Google di Blogger

Pada artikel Membuat Breadcrumb Google di Blogger ini menampilkan semua label yang ada pada sebuah postingan, jadi akan terlihat lebih sempurna lagi dan cepat terindex di SERP [Search Engine Results Page]. Perlu diingat, jika sobat memiliki label yang banyak pada sebuah postingan atau mungkin postingan tersebut memiliki label yang cukup panjang, maka ini akan terlihat sedikit jelek. Usahakan jangan terlalu banyak label dan jangan terlalu panjang membuat label. Bagi yang berminat, silahkan ikuti langkah-langkah berikut ini.

Cara Memasang Breadcrumb Google di Blogspot / Blogger

Langkah pertama sobat login dulu ke blog, itu pasti. kwa kwa kwa,,
Seperti biasa, kita langsung menuju halaman Design [Rancangan] Edit HTML Ceklis Expand Widget Templates (jangan lupa selalu backup template sebelum editing). Jika sobat menggunakan tampilan baru, silahkan klik Template Edit HTML Lanjutkan Ceklis Expand Widget Templates.
Jika sobat telah memasang kode breadcrumb sebelumnya, silahkan delete [hapus] dulu.
Kemudian sobat cari kode <b:include data='top' name='status-message'/> biasanya ada 2 kode tersebut. Kalau sudah di temukan, silahkan paste kode berikut ini tepat di atasnya (paste aja di atas 2 kode yang sobat temukan biar tidak bingung).

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

Sekarang cari kode <b:includable id='main' var='top'> dan kalau sudah ketemu, paste kode berikut tepat di atas kode <b:includable id='main' var='top'>

<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><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><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><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><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><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>

Sampai tahap ini silahkan simpan template sobat. Taraaaaaa, sobat berhasil Membuat Breadcrumb Google di Blogger.

Untuk mempercantik Breadcrumb google yang sudah sobat buat, sekarang tambahkan sedikit sentuhan CSS berikut ini yang perlu sobat tambahkan di atas kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

Itu saja artikel blogger kali ini dan mudah-mudahan bermanfaat buat para sobat blogger. Happy blogging..

20.46 | 0 komentar | Read More

Cara Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)

Dalam membuat sebuah blog, kita pasti ingin blog kita tampil lebih rapi. Tulisan-tulisan yang mungkin tidak diperlukan atau mengganggu kerapian blog kita, lebih baik kita hilangkan atau digantikan oleh fungsi dari tool lain. Salah satunya adalah Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom), ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"? Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut kita tidak penting dan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya agar lebih rapi. Sesuai dengan namanya Langgan: Entri (Atom) adalah fasilitas untuk berlangganan artikel/posting, sedangkanSubscribe to: Poskan Komentar (Atom) adalah fasilitas berlangganan bagi pengunjung untuk mengetahui komentar-komentar atas posting/artikel dari blog yang bersangkutan.

Namun demikian sebagian blogger tidak menyukai fitur-fitur tersebut, karena selain terlalu sederhana, juga telah tersedia fasilitas berlangganan yang lebih canggih seperti FeedBurner.Com, maka dari itu sebagian blogger lebih suka menghapus/menghilangkan fitur Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) dari blog mereka.

Nah jika Anda ingin mengikuti jejak sebagian blogger tersebut, berikut ini cara menghilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) di Blogspot :

A. Cara Menghapus Langgan: Entri (Atom):

Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotakExpand Template Widget dan gunakan tombol Find 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.

B. Cara Menghapus Subscribe to: Poskan Komentar (Atom):

Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotakExpand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
Cari kode di bawah ini:

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
Hapus/delete semua kode di atas, lalu Save Template, selesai.

Demikianlah tutorial sederhana cara hapus/hilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot ini

Semoga bermanfaat.

14.57 | 0 komentar | Read More

Bikin Widget Recent Post Maskolis.com

Di kesempatan hari ini yang cukup panas, saya akan berbagi tutorial baru yang lumayan hot juga. Recent post Canggih, kenapa aku bilang canggih? karena recent post yang terlihat bukan seperti widget melainkan seperti recent post asli dari blog, ada nextdan Previous.

Ini merupakan widget garapan dari Creating website mas kolis. Bagi anda yang ingin melihat recent post lainnya di sini juga ada seperti :

Kali ini yang ingin membuat recent post canggih, bingung mau ngasih judul apa, langsung aja ikuti tutorialnya.

1. Login blogger anda

2. Masuk template >> edit html >> lanjutkan (oh iy saya sarankan lebih baik anda backup dulu template anda)

3. Selanjutnya, centang expand widget templates dan cari kode ]]></b:skin>, letakkan kode di bawah ini tepat di atas kode yang anda cari sebelumnya

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8EV9u8ex42aDhJsAeQumCP-AXnnb-170ZcB7EjrjhKKK_seenKcb0nG1vGUj4dJwszN27-rFWP7RCJDBhaA_riUkatBTGK4WzL-mZqIrWqNbMIqnJeuAdr3GhQRv3joCT9rmpRYDb3Co/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

Keterangan : warna biru merupakan ukuran tinggi dan lebar image

4. Selanjutnya letakkan kode di bawah ini tepat di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://wartabeta.com/";
var charac = 100;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-VYdDBENwTIBSHGlRu8xpMtj2jixWlSsihtpFFVBIOycWHFMiMDnRQGzzxU3TTBC3sPpg65h4LpVvrRhvK7PYuCEWKoAJn692osW-FvVpsMg9n1knY1Zan5Eb9YCjNg8NM6tZ6C-zZZzZ/d/noimagethumb.gif";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Keterangan :
var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
var urlblog = "http://wartabeta.com/"; >> ganti dengan URL blog Anda
var charac = 100; >> Jumlah karakter atau huruf pada setiap post.

5. Save template, setelahsave anda masuk di Tata letak blog, Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

Simpan widget, Dan lihat hasilnya akan seperti di bawah iini, dengan tampilan yang begitu fresh

15.35 | 0 komentar | Read More

Cara membuat nomor halaman keren di blogspot

Sudah pernah melihat kan beberapa template yang menggunakan page navigation number pada templatenya. fungsi dari page navigation number ini adalah untuk menggantikan link posting lama atau posting baru yang ada pada bawah postingan halaman utama pada sebuah template. Dengan page navigation number ini pengunjung bisa bebas memilih halaman postingan keberapa yang ingin dibaca.

Page navigation number ini juga bisa dibilang memberikan kesan rapi dan indah pada blog kita, walaupun saya sendiri tidak menggunakannya. Tetapi jika ada sobat yang ingin menggunakan page navigation pada blognya, berikut ini saya berikan Cara Membuat Page Navigation Number Pada Blog.

1.Log in ke blogger.
2.Klik template edit HTML centang Expand Template Widget.
3.Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat di atasnya.

/* -- NUMBER PAGE NAVIGATION -- */
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}

4.Cari kode </body> dan letakkan kode dibawah ini tepat di atasnya.

<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord ='« ';
var downPageWord =' »';
</script>
<script src='http://u-sup.googlecode.com/files/page_num.js' type='text/javascript'/>

Keterangan:

Jika anda ingin mengganti jumlah postingan yang akan ditampilkan pada setiap halaman silahkan ganti kode yang berwarna biru.

5.Cari kode 'data:label.url' dan ganti kode itu dengan kode dibawah ini.

'data:label.url + "?&max-results=7"'

Keterangan:

var pageCount=4; (Jumlah postingan yang akan ditampilkan)
var displayPageNum=4; (Jumlah tombol angka navigasi)

6.Save Template anda.

Nah selesai sudah Cara Membuat Page Navigation Number Pada Blog mudah-mudahan artikel ini bisa bermanfaat bagi anda

23.34 | 0 komentar | Read More

Cara paling mudah bikin foto dan bintang muncul di Google Search

Hallo sobat....
Dalam Postingan Kali ini zona blogging akan share tentang Membuat Rating Bintang Muncul di Google Search Engine. Mungkin sudah banyak blog lain yang sudah membahas tentang hal ini, tapi gak ada salahnya kalo saya trbitkan postingan atau articles ini, dari pada di hapus dari draft! Dan mungkin juga yang ingin Membuat Rating Bintang Muncul di Google Search Engine.

Sebenarnya jika sobat menerapkan Rating Bintang banyak kemungkinan blog sobat yang akan di klick atau di pilih oleh para googling. Seperti saya jika saya sedang mencari sesuatu dengan kata kunci tertentu dan bila saya menemukan ada yang beranting bintang maka yang beranting bintang itulah yang saya klick, bagaimana dengan anda?
Kebanyakan orang berfikir, kalo blog atau web yang memiliki ranting bintang adalah blogger prfesional, padahal ya biasa-biasa aja!

Gak usah terlalu lama-lama lagi sekarang mari kita bahas cara Membuat Rating Bintang Muncul di Google Search Engine di blogger sobat.

"Attention"

Tolong Perhatikan dan ikuti langkah-langkah berikut jika ingin Membuat Rating Bintang Muncul di Google Search Engine.

Dan jangan sampai ada yang terlewatkan!

1. Pertama-tama sobat harus migrasi dari profil blogger ke Google + (Pluss).
Untuk migrasi dari profil Blogger ke Google + (Plus) sliahkan klick disini.

2. Jika sudah sekarang dalam profil Google + (Plus) klick Edit Profil ? Lalu pilih Kontributor Halaman ? Lalu masukkan/pilih halaman blogger sobat.

3. Langkah selanjutnya adalah masuk ke akun blogger sobat.

4. Pada menu klick Rancangan ? Edit Template ? CentangExpand Template Widget.

5. Jangan lupa Backup dulu templatenya untuk berjaga-jaga bila terjadi kesalahan.

6. Sekarang dalam Edit Template sobat cari kode <head> (pake perintah CTRL + F untuk mempermudah pencarian)

7. Jika sudah ketemu sekarang copy kode di bawah ini dan paste atau letakkan di bawah kode tadi.

NB : Ganti angka warna merah dengan Id Google + (Plus) sobat, Cara mengetahui Id Google + (Plus) adalah masuk ke profil Google + (Plus) sobat, lalu lihat bagian paling atas navbar maka sobat akan melihat Id profil ,maka Id angka tersebutlah yang harus sobat copy, lebih jelasnya perhatikan screen shot berikut:

8. Langkah selanjutnya sobat letakkan kode berikut di bawah kode <body>

9. Sekarang letakkan kode berikut di atas kode </body>

</div></div>

10. Simpan Template.

11. Masih dalam Edit Template sekarang sobat cari kode :
<h3 class='post-title entry-title' itemprop='name'> setiap template berbeda-beda jadi jika tidak menemukan kode tersebut coba sobat cari post-title entry-title Maka sobat akan meliat kode seperti ini :

Sekarang sobat harus menyisipkan kode <span itemprop='itemreviewed'><span itemprop='description'> dan kode </span></span>
Maka hasil penyisipannya kodenya akan terlihat seperti ini :

<span itemprop='itemreviewed'><span itemprop='description'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</span></span>
</b:if>

12. Simpan Template.

13. Masih di dalam Edit Template sekarang kita akan memasang google rich snippets, Sobat cari kode <data:post.body/> atau <p><data:post.body/></p> lalu letakkan kode berikut di bawahnya.:

<div itemscope="" itemtype="http://data-vocabulary.org/Review-aggregate">
<span itemprop="itemreviewed"><data:post.title/></span>
<span itemprop="rating" itemscope="" itemtype="http://data-vocabulary.org/Rating"> <span itemprop="average">9</span> out of <span itemprop="best">10</span> based on <span itemprop="votes">10</span> ratings. <span itemprop="count">9</span> user reviews.
</span></div>

NB : Jika sobat menemukan kode <data:post.body/> atau <p><data:post.body/></p> lebih dari satu maka . . . ???
Sobat tinggal meletakkan kode di atas di bawah semua kode <data:post.body/> atau <p><data:post.body/></p>
.
13. Simpan Template.

14. Langkah terakhir adalah mengecek tidak atau berhasilkah sobat menerapkannya blog sobat, silahkan sobat menuju lansung Rich Snippets Testing Tool.

15. Lalu isikan url milik blog sobat lalu klick Priview, seperti pada gambar:

16. Jika berhasil maka tampilannya akan seperti ini :

Oke sekian dulu!

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas.

22.04 | 0 komentar | Read More

Tutorial Cara Pasang Tombol Like Facebook Dibawah Judul Posting Blog

Kali ini saya akan membahas bagaimana cara membuat tombol like facebook dibawah judul posting blog, bagi kamu yang ingin membuat tombol like ini, kesempatan bagus apalagi diletakannya dibawah judul posting. Disni tombol like facebooknya ada tiga model, jadi pilih salah satu saja

Dengan memasang tombol like facebook kamu akan mengetahui seberapa bagus artikel anda disukai oleh pengunjung blog anda.

Berikut cara membuat nya :

1. Login ke blog kamu.
2. Pilih Rancangan.
3. Pilih EDIT HTML.
4. Cari kode <data:post.body/>
5. Setelah ketemu pilih salah satu kode dari tiga kode yang akan saya berikan, dan letakan diatas kode nomor 4.

1. Kode Pertama, Tombol Like Vertikal Dengan Count (Hitungan)

<b:if cond='data:blog.pageType != "static_page"'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&send=false&layout=box_count&show_faces=false&width=55&action=like&font=arial&colorscheme=light&height=62"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/> </b:if>

2. Kode Kedua, Tombol Like Horizontal Dengan Count (Hitungan)

<b:if cond='data:blog.pageType != "static_page"'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&send=false&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

3. Kode Ketiga, Tombol Like Tanpa Count (Hitungan)

<b:if cond='data:blog.pageType != "static_page"'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&send=false&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>

Letakan salah satu kode diatas, tepat diatas kode nomor 4 tadi.
Ingatpilih salah satu saja, jangan semuanya, nanti gagal.

Simpan Template, dan lihat hasilnya.

08.26 | 0 komentar | Read More

Cara Membuat Breadcrumb Google di Blogger

Popular Posts Today