Cara Membuat Page View Hits Counter Setiap Posting Blogger

Cara Membuat Widget Counter Berapa Kali telah Dilihat Masing-Masing Posting

Pelajaran Blog - adalah sebuah trik bagaimana memasang atau membuat pageviews alias hit counter stat untuk masing-masing posting berapa kali telah di lihat oleh pengunjung.

Biasanya widget ini ditulis seperti; Telah dilihat "sekian" kali atau "sekian kali" views untuk menerapkannya.
Widget seperti ini sangat cocok untuk mempermudah kita dalam mengetahui traffik dari sebuah posting.Jika widget seperti hitstats,dan sejenisnya hanya menghitung berapa kali view sebuah blog atau situs,widget yang akan kita bahas ini dapat membaca berapa kali posting telah ditampilkan.

Hanya saja untuk menciptakan sendiri widget ini memerlukan hosting sendiri karena berhubungan dengan database dan sql.
Wah,klo gitu repot dong jika widget ini harus ditempatkan di posting blogger?

Tidak juga sob,yang berhasil saya ambil dari http://csharpdotnetfreak.blogspot.com rupanya sudah dapat membantu kita mewujudkan widget ini.
Kelemahannya tentu jika server di situs tersebut tidak lagi mendukung,widget ini juga tak lagi dapat bekerja.

Tapi seperti yang sobat lihat (jika masih ada,hehehe) dalam blog sederhana ini pun telah menerapkannya.

Sebenarnya,saya ingin menerapkannya di we hosting gratisan seperti www.000webhost.com,namun yang saya alami,situs tersebut sering mengupdate ststus user mereka (scara gratisan gitu,hihihi),sehingga semua file yang telah saya upload lenyap entah kemana :( -sedih-.
Sobat bisa lihat,dalam setap tutorial posting dalam blog sederhana ini yang melibatkan mrpujiajadeh.comze.com nyaris tutorial tersebut tak dapat bekerja.(ya ea lah,servernya keox :( -.

Tapi,ini menjadi pelajaran berharga bagi saya pribadi agar dilain waktu tidak main 'bermudah-mudah' dalam mencomot 'produk' luar tanpa izin.kapok gue :(

Oke,kita kembali pada permasalahannya ya gan,yup! bagaimana kita dapat menciptakan widget 'posting ini telah dilihat sebanyak sekian kali'.

Langkah dan Cara Membuat hit counter pageview Berapa Kali Posting Telah di Lihat

Pertama,sobat pilih Dashboard lalu pilih Template,pilih Edit Html lalu pilih Proceed kemudian contreng Expand Widget Templates seperti gambar:








Selanjutnya,sobat gunakan dalam keybord Ctrl+F - ini untuk mempermudah pencarian kode - dan cari kode berikut:

<data:post.body/> atau <p><data:post.body/></p>

Setelah sobat ketemukan,letakkan persis di bawahnya script post pageviews berikut:

<br/>
<span style='color: #660000;'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:300px; display:compact'>Posting ini telah dilihat sebanyak <b><script src='http://amitjain.in/pageviews.php' type='text/javascript'/> (kali)</b></div></span>
<br/>

Kode <br/> untuk memberi jarak saja,jadi bisa untuk tidak disertakan.
Lalu simpan templates dan lihat hasilnya.
Semoga berhasil ya :D

Right Click Notification / Warning Messages pada Klik Kanan

Enable or Disable Copy Paste / Right Click

Masih ingat ga sob tutorial disable copy paste yang dah di share di blog ini beberapa waktu lalu?

Jika sobat belum menemukannya silakan cari menggunakan kotak pencarian di blog ini dengan keyword 'right click'.
Namun daripada repot-repot kami cantumkan lagi link tutorialnya.
Ni linknya ya gan:

1.Disable copy paste untuk Browser Mozilla Firefox
2.Disable copy paste untuk browser Internet Explorer

Untuk kali ini,Pelajaran Blog akan mempublikasikan sebuah script yang mana dengan script sederhana ini,pengunjung tidak dapat melakukan right click atau klik kanan,namun setelah pengunjung memberikan eksekusi pada check box pada message warning atau menekan tombol OK,right click atau klik kanan dapat aktif kembali.Ya,seperti yang bisa sobat pada blog sederhana ini.

Gimana sob,ingin mencobanya juga?

Trik dan Cara Membuat Disable dan Enable Right Click / Klik Kanan

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak dan klik Add New Gadget





Lalu tambahkan script berikut pada HTML/Javascript widget tersebut dan simpan.

<script language='javascript'>
<!--

//edit by mrpujiajadeh


var message="Sekali lagi,kami mohon perhatiannya,apa yang akan anda sedang lakukan adalah menyangkut hak cipta.Pelajaran Blog tidak bertanggung jawab jika anda menyebarkan atau mengambil bagian tema dan konten maupun source template dari blog ini tanpa menyertakan link sumbernya.Terima kasih dan harap maklum.";

///////////////////////////////////


document.oncontextmenu=new Function("alert(message);return true")

// -->
</script>

Selesai dan moga bermanfaat ya sob :D
**kode hijau rubah sesuai dengan keinginan kamu :)

Cara Membuat Rating Bintang di Posting Blogger

Membuat Tanda Bintang di Blogger Post

Berbeda dengan trik cara membuat google rich snippet - rating bintang di result page google yang telah dipublikasikan beberapa waktu lalu,kali ini adalah mengaktifkan rating bintang dalam posting blogger itu sendiri.

Sebenarnya fitur ini sudah lama disediakan oleh pihak www.blogger.com,hanya saja untuk sebagian kasus yang saya alami,fitur ini tak tersedia.

Bagaimana Mengaktifkan Rating Bintang untuk Posting Blogger?

Untuk mempersingkat waktu,kegagalan dari pengalaman yang saya alami,sobat langsung aja peri ke draft.blogger.com lalu pilih Rancangan:

Kemudian,sobat pilih Edit pada page halaman-nya:



Lalu sobat beri tanda pada check box Show Star Rating:



Setelah itu sobat simpan templates,dan lihat hasilnya.
Sekarang sobat sudah bisa pindah ke blogger.com dengan mengklik di SINI

Mengapa Tanda Rating Bintang hanya tampil di Halaman Utama?

Jika tanda rating bintang hanya tampil pada halaman utama saja,dan tak dapat tampil di halaman posting,sobat ikuti langkah berikut:

Pertama,sobat pilih Dashboard lalu pilih Tata Letak kemudian contreng Expand Widget Templates:


(1)


(2)


(3)

Lalu sobat cari kode berikut:

<p><data:post.body/></p> atau <data:post.body/>

Jika sudah sobat ketemukan letakkan kode berikut tepat dibawahnya:

<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>

Bagaimana jika saya memiliki lebih dari satu kode <data:post.body/>?

Jika sebagian templates yang sobat miliki sudah menggunakan fasilitas read more memang akan memiliki dua kode <data:post.body/> ini,bagaimana solusinya?

Misal templates sobat setelah membuat fitur 'read more' dalam tutorial di SINI seperti ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

Maka untuk menerapkan kodenya,hapus kode tersebut dan rubah menjadi seperti ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>
</b:if>

Hasilnya akan seperti ini:



Simpan dan lihat hasilnya,semoga bermanfaat ya :D

Revisi : Membuat Menu Home,About,Profil,etc

Revisi Lagi,Revisi Melulu!

Ada apa dengan blog ini yang isi content-nya selalu sama,emang ga ada materi lagi ya? hehe
Ini ada kaitannya dengan sarat email gan,sebagian besar email yang masuk mempermasalahkan posting tentang tema yang akan kita bahas malam ini,meskipun tema ini sudah di posting beberapa waktu lalu,bahkan saya sempat mempublikasikan posting yang sama.
Sebelum ke titik permasalahan,dalam blog sederhana ini telah mempublikasikan bermacam-macam menu navigasi diantaranya:

1.Menu dengan efek Horizontal jQuery
2.Slide jQuery Navigation Menu
3.Menu Navigasi dengan Sub Menu Bergambar
4.Membuat Menu Navigasi dengan Sub Menu
5.Menu Navigasi dengan Css

Nah,diantara menu2 tersebut hanya menu nomor 2 yang sering dipermasalahkan,oleh karenanya,sobat ikuti langkah dengan teliti ya sob,baca artikelnya ya (meski ga tau kemana arahnya dengan gaya bahasa yang sedikit ngelantur dan ngawur hihi pent-)

Kwick Menu Navigasi Blogger dengan jQuery

Untuk kesekian kalinya di blog bertema tutorial blog dan seo blogger blogspot ini mengunduh tutorial jQuery dalam membuat menu navigasi di blogger.

Jika sebelumnya telah dipublikasikan bagaimana menerapkan jQuery di blogspot dalam beberapa trik membuat slide show widget,sliding panel dan slick tab view menggunakan jQuery,kini ada trik satu lagi yang tak kalah menarik.
Betul gan! Yuk kita intip bagaimana sih membuat menu navigasi untuk flatform blogger/blogspot dengan jQuery ini.

Membuat Menu Navigasi Blogger dengan Kwicks jQuery

Sobat pernah lihat di beberapa blog atau situs dimana pada menu navigasi-nya dapat menyembunyikan icon atau gambar secara geser / slide saat mouse berada diatasnya?
Demo atau contoh dari menu navigasi kwicks jQuery ini sobat dapat lihat di:

http://www.jeremymartin.name/examples/kwicks.php?example=1

atau yang telah berhasil saya buat di :

http://pujiantoroblog.blogspot.com/

Memang betul,bahwa kelemahan dari kwicks menu navigasi ini tidak dapat dibaca oleh beberapa browser khususnya handphone atau browser yang tidak mengaktifkan javascript.Namun kwicks menu navigasi jQuery ini dapat bekerja sangat baik di browser mozilla juga Google chrome dan IE terbaru.

Penasaran,yuk mari kita pelajari bagaimana membuat menu navigasi blogger dengan jQuery kwicks tricks.
Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)


(2)


(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diATAS kode ]]></b:skin> tersebut.


.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}


Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script class='jsbin' src='https://sites.google.com/site/pujiantoroinc/Home/kwicks.js'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.kwicks&#39;).kwicks({
duration: 500,
max: 170,
spacing: 0
});
});
</script>


**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Lalu simpan templates sobat.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)



(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<table width="100%" border="0"><tr><td bgcolor="black">
<ul class='kwicks'>
<li id='kwick1'><a href='http://pujiantoro.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://pujiantoro.blogspot.com/search' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://pelajaran-blog.blogspot.com/2009/02/profil.html' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://pelajaran-blog.blogspot.com/' title='recomended links'>Resource</a></li>
</ul></td></tr></table>


Simpan,selesai sudah dan sobat sudah bisa lihat hasil dari menu navigasi kwick jquery ini.
Jikaa mengalami kesulitan mohon diskusikan adi facebook pagenya ya gan and selamat mencoba!