POST VIEWS DI BLOG

Asep Akang 23 Sep 2013 0 comments
Sobat blogger semua sekarang anda akan dapat menampilkan hitungan dinamis untuk tampilan halaman individu (postviews). Kita sekarang dapat dengan mudah membuat posting ini pandangan kontra tanpa khawatir tentang server atau server code. Dengan layanan gratis dari Firebase kini Anda dapat membuat plugin dinamis dan data-drive untuk blogger



Langsung saja tahapan awal pembuatan

Buat Akun Firebase Anda

Dalam rangka untuk mendapatkan akses ke database gratis dan dapat menyimpan cadangan postviews Penghitung data Anda, Anda harus mendaftar untuk account gratis di Firebase.
Klik di sini untuk mendaftar sekarang!

Buat Database Firebase


Di dalam kotak ini masukan nama website Anda. Sebagai contoh saya masukkan blogger-copast dan ini dihasilkan URL firebase berikut: http://blogger-copast.firebaseio.com/

Instalasi Plugin Postviews
  • Pergi Untuk Blogger> Template
  • Backup template Anda
  • Klik Edit HTML
  • Centang kotak "Expand widget Template"
  • Cari]]> </ b: skin>
  • Tepat di atas ]]> </ b: skin> paste kode CSS berikut:

/*-------- Post Views ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('http://4.bp.blogspot.com/-PZMStRDcchY/USOp3xFp4yI/AAAAAAAAJOo/rm5FSsaSKh0/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #333;
}
.views-icon{
background: url('http://4.bp.blogspot.com/-_dXedKDHIws/USOp369zEPI/AAAAAAAAJOs/Cv3fTZUaBTU/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}


Kustomisasi:
Untuk mengubah warna teks dari hitungan angka, mengedit # EE5D06
Untuk mengubah alignment Plugin, mengubah kanan ke kiri.

Berikutnya cari </ body> dan paste kode JavaScript dibawah ini tepat di atas </body>

<!-- Post Views Script by MBT -->
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;);
var blogStats = new Firebase(&quot;https://blogger-copasts.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.removeClass(&#39;mbtloading&#39;).text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>


Ganti garis coklat disorot dengan URL firebase Anda. Pastikan Anda menggantinya dengan benar
Kemudian cari kode <data:post.body/>
Catatan : Jika anda menemukan dua kode yang sama, pilih kode yang pertama.
lalu letakan scipt dibawah ini di atas <data:post.body/>

<-! Pos Views Counter oleh MBT ->
<div id='views-container'> <span class='views-icon'/> <div class='views-text'> Views: </ div> <div class = id 'mbtloading viewscount' = 'postviews' /> </ div>


Anda dapat mengganti kata teks yang berwarna hijau dengan kata yang anda suka

Sekarang tinggal langkah terakhir, paste link jquery berikut tepat di bawah <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'> </ script>

Liat tampilan di bawah ini :



Sumber

Artikel Terkait

TERIMA KASIH ATAS KUNJUNGAN SAUDARA
thumbnail Judul: POST VIEWS DI BLOG
| Twitter | Facebook Page
Published :23 Sep 2013 Jam 14.11
Rating: 4.5 Reviewer: 7
Silakan jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi tulisan ini. Terima kasih sudah singgah serta membacanya, Semoga tulisan ini bermanfaat bagi sobat Blogger Copast semuanya amin.

Pin It

Silahkan tentukan pilihan komentar anda!



atau

Tidak ada komentar:

Komentar anda dimoderasi, Kata-kata yang kurang baik tidak akan saya tampilkan atau saya hapus Terima kasih

Pengikut

Blogger Copast
Designed by Bamz
Untuk SEO lebih lanjut kunjungi
Trik SEO terbaru

Statistik

Page Rank
blogger-copast.blogspot.com Webutation

ping fast  my blog, website, or RSS feed for Free Blog Directory & Search engine blog search directory Personal Blogs - Blog Rankings Technology Blogs Blog Directory My Zimbio My Ping in TotalPing.com I ♥ Validator GeoURL Blogger Copast Yahoo bot last visit powered by MyPagerank.Net Msn bot last visit powered by MyPagerank.Net Personal - Top Blogs Philippines Blog Search: The Source for Blogs
Link Centre Directory and Search Engine
Active Search Results blogger-copast.blogspot.com trustrank blogger-copast.blogspot.com Real PageRank

http://blogger-copast.blogspot.com$3,065$3,065How much is yours?

Waudit score SEO Reports for blogger-copast.blogspot.com Top SEO Sites Blogarama - The Blog Directory IndoUrl - indonesian directory, webmaster friendly
blogger-copast.blogspot.com CoolSocial.net Badge
dirbit.com free search engine submission Link Exchange with BLOGGER COPAST how to create a website AskDirectory.com - FREE Web Directory Blog Directory Blog Search Links Exchange Blog Directory | Submit to Directories and Promote your Blogs Frety Webengine bloggercopast's Profile on Ping.sg  Ping Url ping.sg - the community meta blog for singapore bloggers blogger-copast.blogspot.com-Google pagerank and Worth Personal Blogs
Online Marketing
Feedage Grade B rated
eXTReMe Tracker
Amfibi Web Search & Directory Sistema Enlaces Reciprocos Search Engine Submission and Marketing Services ExactSeek: Relevant Web Search waplog
blognation.com
Submit Blog Directory Situs Monitor Backlinks Site Meter

Enter your email address:

Delivered by FeedBurner