CrystalWeb Blogger Template

CrystalWeb Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	CrystalWeb Blogger Template
Description	CrystalWeb is a free blogger template with 3 columns, right sidebar, exclusive design for Blogger, space for ads, slideshow and social icons.
Template Author	http://www.deluxetemplates.net
Designer	Deluxetemplates
Instructions URL	How to install Blogger Template

Demo

Download

Source : btemplates.com

Read More

Menampilkan Thread Comments di Blogger

Menampilkan Thread Comments di Blogger | Tutorial Blog

Thread Comments (komentar yang bisa di reply atau di balas) merupakan fitur baru dari Blogger. Untuk sementara fitur ini dibenamkan otomatis pada blog dengan tampilan dinamic view. Bagi Sobat yang belum muncul secara otomatis Thread Comments-nya, Anda dapat mengikuti tutorial di bawah ini :

• Masuk ke Dasbor, klik Design / Rancangan > Edit HTML
• Demi keamanan silahkan backup dulu template anda, klik Download Template Lengkap
• Geser ke bawah kemudian klik Kembalikan template widget ke default / Revert widget templates to default > OK
• Sekarang lihat blog anda yang sudah ada komentarnya. Atau buat komentar baru untuk mencoba.

Sampai disini thread comments blogger anda harusnya sudah aktif. Tetapi jika masih belum muncul lanjutkan dengan tutorial berikut :

• Klik Setelan > Komentar atau Settings > Comments.
• Pada Penempatan Formulir Komentar pilih Disemat di bawah entri atau Comment Form Placement > Embedded below post.
• Lalu klik Simpan Setelan / Save Settings
• Masih di Setelan / Settings klik Feed Situs / Site Feed.
• Pada Izinkan Feed Blog / Allow Blog Feeds pilih Penuh / Full.
• Terakhir klik Simpan Setelan / Save Settings

Ok, selesai... Semoga berhasil Menampilkan Thread Comments di Blogger.

Read More

Membatasi Jumlah Postingan di Homepage

Membatasi Jumlah Postingan di Homepage | Tutorial Blog

Bila sebuah blog menampilkan jumlah postingan yang cukup banyak pada homepage, tentu hal ini akan membuat loading blog terasa berat, untuk itu kita bisa membatasi jumlah postingan yang akan di tampilkan pada halaman utama/homepage sesuai dengan keinginan kita.

Jika Sobat ingin mengatur jumlah postingan yang ingin ditampilkan di homepage blog, Anda bisa melakukannya pada menu Settings, berikut tutorialnya :

• Langkah pertama Login ke blogger Sobat, Pilih Settings > Formatting.
  
• Pada Show at most ganti dengan angka yang Sobat inginkan, misalkan 5 atau 10.
  
• Lalu klik SAVE SETINGS.
  
  Selesai...

Demikian tutorial singkat tentang Membatasi Jumlah Postingan di Homepage.

Read More

Membatasi Pengunjung yang Berkomentar

Membatasi Pengunjung yang Berkomentar | Tutorial Blog

Pada tutorial kali akan saya bahas tentang cara Membatasi Pengunjung yang Berkomentar di blog. maksudnya Sobat bisa membatasi pengunjung yang diperbolehkan memberikan komentar pada halaman dan postingan blog Anda.

Langsung saja Sob, berikut caranya :

• Login ke blogger, klik Pengaturan > Komentar, atau Settings > Comments.
  
• Pada bagian Siapa yang Bisa Berkomentar / Who Can Comment?, terdapat beberapa pilihan yang harus Anda pilih salah satunya.
  
  Keterangan :
  Siapapun - termasuk pengguna Anonim (Anyone - includes Anonymous Users) : memperkenankan semua pengunjung, baik dengan maupun tanpa identitas memberikan komentar pada blog Anda.
  Pengguna Terdaftar – termasuk OpenID (Registered Users - includes OpenID) : memperkenankan pengunjung yang telah terdaftar saja yang bisa memberikan komentar dalam blog.
  Pengguna dengan Google Account (Users with Google Accounts) : hanya pengunjung yang telah memiliki account Google saja yang bisa memberikan komentar.
  Hanya anggota blog ini (Only members of this blog) : hanya memperkenankan pengunjung yang telah tercatat sebagai anggota blog saja yang bisa memberikan komentar.
• Kalau sudah selesai klik Simpan Setelan / Save Settings.
  

Demikian tutorial mengenai Cara Membatasi Pengunjung yang Berkomentar.

Read More

Menampilkan Widget Hanya di HomePage

Menampilkan Widget Hanya di HomePage | Tutorial Blog

Trik ini dapat Sobat gunakan jika Anda ingin Menampilkan Widget Hanya di HomePage, jadi widget tidak akan muncul pada halaman posting, halaman label, dan halaman yang lainnya, karena widget hanya akan muncul pada halaman utama saja. Jika Sobat ingin kebalikannya atau widget tidak akan muncul pada halaman utama (Home Page), Sobat dapat mengikuti tutorial Menyembunyikan Widget di HomePage.

Jika Sobat hanya ingin menyembunyikan widget dari postingan saja, silakan baca Menyembunyikan Widget pada Halaman Posting.

Untuk cara Menampilkan Widget Hanya di HomePage, berikut tutorialnya :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Cari ID widget yang ingin di edit, misal HTML1, HTML2, HTML3, Label1, HTML9, PopularPosts1, dan lain lain.
  Untuk mengetahui ID widget tersebut silakan baca Cara Mengetahui ID Widget Blogger.
• Lalu tambahkan kode berikut pada kode widget tersebut.
  Kode :

  <b:if cond='data:blog.url == data:blog.homepageUrl'>
  
  KODE WIDGET
  
  </b:if>
  Untuk lebih jelasnya lihat kode berikut :
  Kode :

  <b:widget id='HTML7' locked='false' title='' type='HTML'>
  <b:includable id='main'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
  <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <data:content/>
  </div>
  </b:if>
  </b:includable>
  </b:widget>
  Ket : Kode yang berwarna merah adalah kode yang di tambahkan.
• Terakhir klik Save / Simpan Template.
  

Sekian tutorial tentang Menampilkan Widget Hanya di HomePage.

Read More

Cara Mengetahui ID Widget Blogger

Cara Mengetahui ID Widget Blogger | Tutorial Blog

ID widget perlu Sobat ketahui jika Anda ingin menampilkan atau menyembunyikan widget tersebut pada suatu halaman. misalnya Menyembunyikan Widget di HomePage, Menyembunyikan Widget pada Halaman Posting, dan lain lain.

Untuk mengetahui ID widget, berikut caranya :

• Login ke Blogger, Klik Design/Rancangan > Page Element/Elemen Halaman.
  
• Letakkan posisi mouse pada tulisan Edit, sebagai contoh saya gunakan widget kode script Tutorial Blog.
  
  Pada bagian bawah browser, akan terlihat URL widget, disitu tertulis ID widget tersebut HTML5.

Gampang kan?!?, Semoga tutorial singkat ini dapat membantu Sobat untuk Mengetahui ID Widget Blogger.

Read More

Membuat Dua Kolom Tulisan diPostingan

Membuat Dua Kolom Tulisan di Postingan | Tutorial Blog

Pada tutorial kali ini saya akan berbagi tentang cara membuat tulisan terbagi menjadi dua kolom pada postingan.

Cara ini dapat di lakukan pada Blogspot maupun Wordpress.com, Buat yang ingin mencobanya silakan ikuti tutorial berikut.

• Login ke dasboard anda.
• Buat postingan baru dan pilih mode HTML.
• Lalu letakkan kode dibawah ini pada area postingan.
  Kode :

  <table width="500" border="0" cellspacing="10">
  <tr>
  <td width="250" valign="top">kolom 1...</td>
  <td width="250" valign="top">kolom 2...</td>
  </tr>
  </table>
• Kemudian kembali ke mode Visual / Compose.
• Bila table sudah tampak pada halaman penulisan, lakukan penulisan pada masing-masing kolom sesuai keinginan anda.
• Jika sudah selesai silakan klik Publish.

Semoga tutorial ini dapat membantu Sobat dalam Membuat Dua Kolom Tulisan di Postingan.

Read More

Mengganti Background di Postingan

Mengganti Background di Postingan | Tutorial Blog

Buat Sobat yang ingin menampilkan sesuatu yang berbeda pada sebuah postingan, Sobat dapat mengganti background / latar berupa Image / gambar pada postingan tersebut.

Caranya gampang Sob, silakan ikuti tutorial berikut :

• Masuk ke dashboard anda. Klik Posts > Add New pada wordpress.com dan Posting > New Post pada blogger.
  Spoiler :

  Blogspot

  
  

  Wordpress.com

  
• Lalu pilih tab Edit HTML.
  Spoiler :

  Blogspot

  
  

  Wordpress.com

  
• Copy kode dibawah ini dan paste-kan di area postingan
  Kode :

  <div style=”background-image:url(‘http://url_gambar.jpg‘); background-repeat:repeat; background-position:center center; text-align:justify; padding:5px;”>
  Tulis text anda disini
  </div>
  Keterangan :
  Ganti http://url_gambar.jpg dengan alamat gambar yang ingin Anda jadikan background.
  Ganti Tulis text anda disini dengan artikel yang ingin Sobat posting.
• Jika sudah selesai kembali ke mode Visual / Compose.
  Spoiler :

  Blogspot

  
  

  Wordpress.com

  
• Terakhir klik Publish.
  Spoiler :

  Blogspot

  
  

  Wordpress.com

  

Demikian tutorial singkat tentang Mengganti Background di Postingan.

Read More

Widget Web Counter

Widget Web Counter | Tutorial Blog

Seperti kita ketahui Web Counter berguna untuk mengetahui jumlah pengunjung yang datang ke website/blog Anda. Sebenarnya tutorial ini sama saja dengan Memasang Widget Web Counter yang saya posting sebelumnya, namun pada situs penyedia Web Counter kali ini kita tidak perlu memasukkan alamat email, username, password, dan lain lain. Jadi langkah pemasangannya akan lebih ringkas.

Berikut cara Memasang Widget Web Counter :

• Masuk ke http://www.totallyfreecounter.com/.
• Lalu pilih salah satu tampilan widget yang ingin Anda gunakan.
  
• Klik Select pada bagian bawah kode.
  
• Lalu Copy kode tersebut.
  
• Langkah selanjutnya Paste kode tersebut pada Widget HTML blog Sobat.
  Jika belum bisa memasang Widget, silakan baca tutorial berikut :
  • Memasang Widget di Wordpress.com
  • Memasang Widget / Gadget di Blogspot

Demikian tutorial singkat tentang Widget Web Counter.

Read More

Menyembunyikan Widget pada Halaman Posting

Menyembunyikan Widget pada Halaman Posting | Tutorial Blog

Trik ini dapat membantu meringankan loading blog Sobat pada saat halaman postingan di tampilkan, karena widget tidak akan muncul pada halaman posting, tetapi hanya pada halaman utama saja. Jika Sobat ingin widget tidak muncul pada halaman utama / Home Page, Sobat dapat mengikuti tutorial Menyembunyikan Widget di HomePage.

Berikut cara menyembunyikan widget pada halaman posting :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Cari kode ]]></b:skin>, lalu letakkan kode berikut ini di bawah kode ]]></b:skin>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style>
  #HTML1,#HTML2,#HTML3,#Label1,#HTML9,#PopularPosts1 {display:none;}
  </style>
  </b:if>
  Ket : Kode yang berwarna merah adalah ID widget yang mau disembunyikan pada halaman posting.
• Terakhir klik Save / Simpan Template.
  

Untuk mengetahui ID widget, berikut caranya :

• Pilih Design/Rancangan > Page Element/Elemen Halaman.
  
• Letakkan posisi mouse pada tulisan Edit, dan lihat dibagian bawah browser, akan terlihat URL widget tersebut.
  

Silakan dicoba Sob, dan semoga berhasil...

Read More

Memasang Widget Web Counter

Memasang Widget Web Counter | Tutorial Blog

Web Counter berguna untuk mengetahui jumlah pengunjung yang datang ke website/blog Anda. Melalui statistik sederhana ini, Anda bisa mengetahui jumlah pengunjung yang mampir ke website Anda sejak Anda memasang widget ini, semakin banyak pengunjung tentunya website Anda semakin populer.

Dibawah ini tutorial untuk Memasang Widget Web Counter :

• Masuk ke http://www.123counters.com.
• Lalu klik Get your Free Web Counter Now!
  
• Pilih salah satu tampilan widget yang ingin Anda gunakan.
  
• Pada halaman selanjutnya isi data yang diperlukan, beri centang pada I agree to the policies, dan klik Submit.
  
• Lalu Copy kode yang di berikan.
  
• Langkah selanjutnya Paste kode tersebut pada Widget HTML blog Sobat.
  Jika belum bisa memasang Widget, silakan baca tutorial berikut :
  • Memasang Widget di Wordpress.com
  • Memasang Widget / Gadget di Blogspot

Demikian tutorial singkat tentang Memasang Widget Web Counter.

Read More

Drink Press WordPress Theme

Template Details :

Platform Type	WordPress Theme
Template Name	Drink Press WordPress Theme
Descriptions	Drink Press WordPress Theme is free wordpress theme, pattern style with maroon background, slide show ready, right sidebar, 2 columns, 3 columns footer.
Template Author	http://buymythemes.com
Designer	I Putu Eka Ariyasa

• Demo
• Download

Read More

Menampilkan Tombol Share Di WordPress.com

Menampilkan Tombol Share Di WordPress.com | Tutorial Blog

Tombol share memang penting dalam sebuah blog, dengan memasang tombol share maka pengunjung blog dapat dengan mudah mempromosikan artikel postingan yang kita buat. Hal itu tentu saja akan meningkatkan pengunjung blog dari berbagai jejaring sosial (social network).

Kali ini saya akan berbagi cara Menampilkan Tombol Share Di WordPress.com, berikut tutorialnya :

• Login ke WordPress Sobat. Kemudian klik Settings > Sharing.
  
• Drag and drop (tahan dan geser) tombol share yang berada di menu Available Services ke menu Enabled Services.
  
• Anda dapat melakukan pengaturan tampilan pada icon, jika anda menginginkannya, caranya klik tanda { ▼ } disamping kanan icon share.
  
  Ket :
  1. Button style : pilih tampilan icon atau text.
  2. Sharing label : tulislah nama untuk fitur sharing anda.
  3. Open links in : tampilan halaman saat icon share di klik.
  4. Show buttons on : penempatan icon sharing.
• Jika sudah selesai klik Save Changes.
  

Sekian Tutorial Menampilkan Tombol Share Di WordPress.com

Read More

Tombol Back To Top WordPress

Membuat Tombol Back To Top di WordPress.com | Tutorial Blog

Beberapa waktu yang lalu saya pernah posting tentang Membuat Tombol Back To Top di blogspot, kali ini saya akan membuat tutorial untuk memasang tombol back to top tersebut pada blog wordpress.com

Berikut tutorialnya :

• Login ke Wordpess Anda, Klik Appearance > Widgets.
  
• Drag Text ke Sidebar.
  
• Lalu letakkan kode berikut pada area Text.
  <div style="display:scroll;position:fixed;bottom:10px;right:10px;">
<a href='#' title='Kembali Keatas'><img src='URL Icon' /></a>
</a></div>
  Ganti URL Icon dengan URL Image, Contoh :
  <div style="display:scroll;position:fixed;bottom:10px;left:10px;">
<a href='#' title='Kembali Keatas'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/up-blue.png' /></a>
</a></div>
  Untuk URL Icon Sobat dapat menggunakan Url berikut :
  
  http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/up-blue.png
  
  http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/up-green.png
  
  http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/up-red.png
• Terakhir klik Save.
  

Untuk tombol page downnya, silakan baca Tombol To Page Down di WordPress.com

Semoga bermanfaat...

Read More

Membuat Widget Recent Posts Menggunakan Spoiler

Membuat Widget Recent Posts Menggunakan Spoiler | Tutorial Blog

Sebelumnya saya pernah posting tentang Widget Recent Post Valid XHTML, widget tersebut menggunakan scroll sehingga dapat menghemat tempat di sidebar blog Anda. Kali ini saya akan berbagi tentang tutorial Membuat Widget Recent Posts Menggunakan Spoiler, cara ini juga sangat berguna untuk menghemat tempat di sidebar blog.

Berikut cara Membuat Widget Recent Posts Menggunakan Spoiler :

• Login ke blogger, klik Design > Page Element.
  
• Klik Add a Widget dan pilih HTML/Javascript.
  
• Lalu letakkan kode berikut di area konten widget :
  Kode Script :

  <div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Recent Posts'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 150px;" type="button" value="Recent Posts" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;  height: 250px; overflow: auto;"><script type="text/javascript" src="http://html-scripts.googlecode.com/files/recent-posts.js"></script><script type="text/javascript">
  var numposts = 10;var
  showpostdate = true;var
  showpostsummary = true;var
  numchars = 50;var
  standardstyling = true;
  </script><script type="text/javascript" src="http://wadahtutorial.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></div></div></div>
  Silakan ganti wadahtutorial.blogspot.com dengan alamat blog Sobat.
• Terakhir klik Save.
  
  Selesai...
  Berikut contoh hasilnya :

Sekian tutorial tentang Membuat Widget Recent Posts Menggunakan Spoiler.

Read More

Membuat Sticky Page di Wordpress

Membuat Sticky Page di Wordpress.com | Tutorial Blog

Sebelumnya saya bikin postingan tentang Membuat Sticky Post di WordPress, pada postingan kali ini saya akan berbagi tentang cara membuat Sticky Page di Wordpress.com.

Sticky Page merupakan sebuah page/halaman yang akan di tampilkan pada home page sebuah blog, jadi jika Sobat mengaktifkan fitur ini maka artikel terbaru yang biasa di tampilkan di home page akan di gantikan oleh Sticky Page.

Bagi Sobat yang ingin Membuat Sticky Page di Wordpress.com, Anda dapat mengikuti tutorial dibawah ini :

1. Login ke Wordpress Sobat, buat sebuah Page/halaman yang akan di sticky, lalu Publish halaman tersebut.
2. Pada dashboard klik Settings > Reading.
   
3. Pada Front page displays beri tanda pada static page, lalu pilih halaman yang akan di tampilkan.
   
4. Terakhir klik Save Changes.
   
   Selesai... Sekarang lihat home page Anda.

Semoga tutorial ini bisa membantu sobat yang ingin Membuat Sticky Page di Wordpress.com.

Read More

Widget Popular Post Menggunakan Scroll

Membuat Widget Popular Post Menggunakan Scroll | Tutorial Blog

Karena beberapa Sobat ada yang bertanya cara Membuat Widget Popular Post Menggunakan Scroll, jadi kali ini saya akan share triknya. Semoga tutorialnya mudah di mengerti dan bisa membantu Sobat yang ingin Membuat Widget Popular Post Menggunakan Scroll.

Ok Sob, berikut caranya :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Cari kode
  <div class='widget-content popular-posts'>

  atau

  popular-posts

  atau

  popularposts
  Karena setiap template berbeda, jadi intinya cari kode popular posts yang ada di template Anda.
• Lalu tambahkan kode
  <div style='overflow:auto; width:ancho; height:200px;'>

  </div>
  Untuk lebih jelasnya perhatikan kode berikut :
  Kode :

  <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

  <b:includable id='main'>

  <b:if cond='data:title'><h2><data:title/></h2></b:if>

  <div style='overflow:auto; width:ancho; height:200px;'>

  <b:loop values='data:posts' var='post'>

  <div>

  <b:if cond='data:showThumbnails == &quot;false&quot;'>

  <b:if cond='data:showSnippets == &quot;false&quot;'>

  <!-- (1) No snippet/thumbnail -->

  <a expr:href='data:post.href'><data:post.title/></a>

  <b:else/>

  <!-- (2) Show only snippets -->

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

  <div class='item-snippet'><data:post.snippet/></div>

  </b:if>

  <b:else/>

  <b:if cond='data:showSnippets == &quot;false&quot;'>

  <!-- (3) Show only thumbnails -->

  <div class='item-thumbnail-only'>

  <b:if cond='data:post.thumbnail'>

  <div class='item-thumbnail'>

  <a expr:href='data:post.href' target='_blank'>

  <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

  </a>

  </div>

  </b:if>

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

  </div>

  <div style='clear: both;'/>

  <b:else/>

  <!-- (4) Show snippets and thumbnails -->

  <div class='item-content'>

  <b:if cond='data:post.thumbnail'>

  <div class='item-thumbnail'>

  <a expr:href='data:post.href' target='_blank'>

  <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

  </a>

  </div>

  </b:if>

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

  <div class='item-snippet'><data:post.snippet/></div>

  </div>

  <div style='clear: both;'/>

  </b:if>

  </b:if>

  </div>

  </b:loop>

  </div>

  </b:includable>

  </b:widget>
  Ket : <div style='overflow:auto; width:ancho; height:200px;'> dan </div> adalah kode yang di tambahkan.
• Terakhir klik Save / Simpan Template.
  
  Selesai...

Silakan di coba dan semoga berhasil Membuat Widget Popular Post Menggunakan Scroll.

Read More