Tampilkan postingan dengan label Turtorial Membuat Blog Sendiri. Tampilkan semua postingan
Tampilkan postingan dengan label Turtorial Membuat Blog Sendiri. Tampilkan semua postingan

Jumat, 12 September 2014

Memasang Jumlah Pengunjung di Blog

 


 Memasang Jumlah Pengunjung di Blog
Dalam benak sobat pada bertanya-tanya kok bisa di website atau blog ada pemberitahuan jumlah pengunjung?, bagaimana ya cara membuatnya?, sulit atau tidak?. Pastinya sobat juga menginginkan widget tersebut guna mengetahui jumlah pengunjung pada blog sobat sendiri.

Oleh karena itu guna menjawab semua pertanyaan yang ada di benak sobat,  kali ini saya akan membahas cara untuk menambahkan widget jumlah pengunjung pada blog. Pada dasarnya kita tidak perlu ambil pusing untuk memikirkannya. Karena sudah ada website yang menyediakan widget tersebut, tinggal bagaimana cara kita memanfaatkannya.
 

Saya memberikan referensi bagi anda yang ingn menggunakan counter ini alamatnya







1. HIT- COUNTS
  •  isi kotak dialog yang berada di bagian bawah lalu tekan Generate Code
  •  Saling script tersebut lalu kembali ke blog anda pilih Tata Letak


  •  Tambah Garget
  •  Pilih HTML/Java Script

  • Setelah itu copy code tersebut kedalam kolom HTML/JavaSript yang sudah disediakan  dan tuliskan Jumlah Pengunjung kedalam kotak judul dibagian atas seperti gambar dibawah ini.


  • Kemudian klik save, sekarang sobat tinggal mengecek alamat blog sobat
2. Free Blog Hit Counter


  • Pilih Counter yang anda Sukai Lalu Klik Get My Code






  • Salin Scriptnya Lalu paste di HTML/JavaScript lihat langkah no 1


 3. Flag Counter
  • Masuk ke alamat http://www.flagcounter.com/ Kemudian anda akan langsung dibawa kehalaman untuk menyesuaikan flag counter sesuai dengan blog anda. Mulai dari jumlah bendera yang akan ditampilkan, jumlah kolom dari tampilan bendera, warna background, warna teks dll. Jika sudah sesuai dengan kriteria blog anda kemudian tekan Get Your Flag Counter





  • Setelah itu anda akan harus mengisi alamat email, jika tidak mau mengisi, sobat tinggal kosongin aja emailnya kemudian klik skip dan untuk continue jika sobat ingin memasukkan alamat email sobat. 

  • Setelah itu sobat akan dibawa kehalaman tempat untuk mendapatkan code HTML. Code HTML inilah yang akan sobat gunakan untuk menampilkan jumlah pengunjung pada blog sobat, tinggal sobat copy code tersebut seperti gambat dibawah ini.


  • Salin Scriptnya Lalu paste di HTML/JavaScript lihat langkah no 1 

















Kamis, 11 September 2014

Cara Mudah Membuat Read More di Blog



banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang mebahas bagaimana cara membuat readmore otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Ngomong-ngomong mungkin blogger pemula atau newbie masih bingung apa itu readmore?. Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll.

Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.


Untuk demonya silahkan klik link dibawah ini.

Cara membuat readmore otomatis dengan gambar

  • Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
  • Cari Kode </head>.
  • Copy paste kode dibawah ini tepat di atas kode </head>

 <!--ReadMore http://trikseosimple.blogspot.com-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 250;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx =  s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->



  • Save Template anda.
  • Kemudian scroll template anda kebawah cari kode seperti berikut:
 


 Ket: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.

  • Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
  • Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut
 

  • Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
  • Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
  • selanjutnya akan terbuka kode kode yang lain.
  • geser atau scrol ke bawah dan cari kode 
<data:post.body/>

Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:

<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

  • Klik SAVE / SIMPAN dan lihat hasilnya.
Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.