Monday, 9 April 2012

Widget Recent Comments + Gravatar/Gambar Untuk Blogger

 
Pada tutorial kali ini saya akan menuliskan panduan/tutorial cara membuat recent comment + gravatar (gambar) di blogger atau cara pasang widget komentar terbaru yang ada gambar si pemberi komentar.

Untuk melihat contoh/demo recent comments + gravatar widget ini bisa kamu lihat pada sidebar kanan blog ini, silakan klik tab COMMENTS, berikut gambarnya:
Cara Pasang Widget Recent Comments + Gravatar Di Blogger

Nah itulah contoh penggunaan script recent comment serta gravatar pada blogger.

Next ..

Cara Membuat Recent Comment + Gravatar/Gambar Di Blogger

Tutorial pasang widget recent comment yang ada gambar gravatarnya ini sebenarnya sama saja dengan tutorial pasang widget blogger lainnya, yang membedakannya hanya script saja. Dan sama halnya dengan panduan lainnya, langkah pertama yang harus dilakukan adalah login/masuk dulu ke Dasbor blogger, kemudian ikuti langkah-langkah berikut.

Cara Pasang Widget Recent Comments + Gravatar Untuk Blogspot

1. Klik Tata Letak
Cara Pasang Widget Recent Comments + Gravatar Di Blogger (http://blog.ahmadrifai.net)

2. Klik Tambah Gadget / Add A Gadget
Panduan Pasang Widget Recent Comments + Gravatar Di Blogger (http://blog.ahmadrifai.net)

3. Pilih Gadget Html/JavaScript
Tutorial Pasang Widget Recent Comments + Gravatar (http://blog.ahmadrifai.net)
4. Masukkan Script Recent Comments + Gravatar di dalamnya (jangan lupa klik Edit HTML ya, letaknya di sebelah kanan atas kolom isian), berikut script yang harus dipasang :
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments  = 5,
showAvatar  = true,
avatarSize  = 30,
roundAvatar = true,
characters  = 30,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://blog.ahmadrifai.net/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
Catatan :
Silakan Ganti http://blog.ahmadrifai.net dengan alamat blog kamu
Untuk menentukan jumlah komentar yang ingin ditampilkan silakan ganti angka 5 pada  numComments  = 5 dan max-results=5
characters  = 30 (Silakan ganti angka 30 dengan jumlah karakter komentar yang ingin kamu tampilkan)
avatarSize  = 30 (Adalah ukuran gambar avatar yang artinya 30x30 px, silakan ganti sesuai keinginan)
http://www.gravatar.com/avatar/?d=mm adalah default avatar, silakan ganti dengan gambar yang kamu inginkan.
5. Simpan (kamu juga bisa memindahkan letak Widget Recent Comments + Gravatar tersebut dengan cara menarik gadget tersebut)
6. Selesai.

Widget Recent Comments + Gravatar ini dibuat oleh pemilik situs www.way2blogging.org, untuk mengunjungi sumber aslinya silakan baca : Recent Comments Widget with Avatar for Blogger/Blogspot.

Nah itulah langkah demi langkah panduan cara pasang widget recent comment untuk blogger yang ada gambar gravatarnya.

Selamat mencoba dan semoga bermanfaat.

Mobitech 2 Column Blogger Template

 
MobiTech 2 Column Blogger Template is a free blogger template with features such as 1 Sidebar, 2 Column, 3 Column footer, Adapted from WordPress, Elegant, Featured Section, Fixed width, Fresh, Header Banner, Magazine, Orange, Premium, Right Sidebar, Slider, Tabbed widget, Top Navigation Bar, Web 2.0, White, Yellow.
MobiTech
Install Template (Baca) Cara Mengganti Template Blogger Setelah MobiTech 2 Column Blogger Template sudah selesai diupload (install) silakan lakukan hal-hal berikut: 1. Setting Meta tags Ganti DESCRIPTION HERE (dengan deskripsi blog kamu),KEYWORDS HERE (dengan keyword blog kamu).
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
2. Setting Favicon:
<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
3. Setting Slider: Temukan <!-- Featured Content Slider Started --> Silakan lihat di bawahnya maka kamu akan menemukan kode <div class='fp-slides-items'> dan </div> . (Baca : Cara Mudah + Cepat Mencari Kode Html di Blogger) Silakan Ganti
"This is default featured post X title" Judul Slider. "#" Link ke posting yang kamu mau. "Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com." dengan deskripsi singkat slider. Slider image address dengan alamat gambar slider kamu.
4. Konfigurasi Menu Temukan kode <div class='menu-secondary-container'> Silakan ganti nama menu dan link (#) dengan nama yang kamu mau. Untuk mengganti logo blog kamu silakan buat logo dengan ukuran lebar 320px dan tinggi 50px, kemudian upload pada widget Header (Baca : Cara Mengganti Title Blog Dengan Gambar) Note of MobiTech 2 Column Blogger Template:
  • MobiTech 2 Column Blogger Template is FREE LICENSE, GPL License, and Creative Commons Attribution 3.0 License. Please be RESPECTFULL Blogger Template Makers and Do Not Remove Credit Footer Link
  • Some file dowload link is Paid To Download and we not change the download link
  • We not change all or some part of the template including not change and add links footer. File template still same from original resource blog's template maker

Thursday, 5 April 2012

MusicLife 3 Column Blogger Template

 
MusicLife 3 Column Blogger Template is a free blogger template with features such as  2 Sidebar, 3 Column, 3 Column footer, Adapted from WordPress, Black, Elegant, Featured Section, Fixed width, Header Banner, Left Sidebar, Magazine, Premium, Right Sidebar, Rounded corners, Slider, Tabbed widget, Top Navigation Bar, Web 2.0, Yellow.
MusicLife 3 Column Blogger Template
Install Template (Baca) Cara Mengganti Template Blogger

Setelah MusicLife 3 Column Blogger Template sudah selesai diupload (install) silakan lakukan hal-hal berikut:

1. Setting Meta tags
Ganti DESCRIPTION HERE (dengan deskripsi blog kamu),KEYWORDS HERE (dengan keyword blog kamu).
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
2. Setting Favicon:
<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
3. Setting Slider: Temukan <!-- Featured Content Slider Started --> Silakan lihat di bawahnya maka kamu akan menemukan kode <div class='fp-slides-items'> dan </div> . (Baca : Cara Mudah + Cepat Mencari Kode Html di Blogger) Silakan Ganti
"This is default featured post X title" Judul Slider. "#" Link ke posting yang kamu mau. "Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com." dengan deskripsi singkat slider. Slider image address dengan alamat gambar slider kamu.
4. Konfigurasi Menu Temukan kode <div class='menu-secondary-container'> Silakan ganti nama menu dan link (#) dengan nama yang kamu mau.

Untuk mengganti logo blog kamu silakan buat logo dengan ukuran lebar 444px dan tinggi 50px, kemudian upload pada widget Header (Baca : Cara Mengganti Title Blog Dengan Gambar) 

Note of MusicLife 3 Column Blogger Template:
  • MusicLife 3 Column Blogger Template is FREE LICENSE, GPL License, and Creative Commons Attribution 3.0 License. Please be RESPECTFULL Blogger Template Makers and Do Not Remove Credit Footer Link
  • Some file dowload link is Paid To Download and we not change the download link
  • We not change all or some part of the template including not change and add links footer. File template still same from original resource blog's template maker

Monday, 2 April 2012

TravelPro 2 Column Blogger Template

 
TravelPro 2 Column Blogger Template is a free blogger template with features such as 1 Sidebar, 2 Column, Adapted from WordPress, Blue, Elegant, Featured Section, Fixed width, Fresh, Magazine, Premium, Right Sidebar, Slider, Tabbed widget, Top Navigation Bar, Travel, Web 2.0, White, Travel
TravelPro blogger column
Install Template (Baca) Cara Mengganti Template Blogger Setelah TravelPro 2 Column Blogger Template sudah selesai diupload (install) silakan lakukan hal-hal berikut: 1. Setting Meta tags Ganti DESCRIPTION HERE (dengan deskripsi blog kamu),KEYWORDS HERE (dengan keyword blog kamu).
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
2. Setting Favicon:
<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
3. Setting Slider: Temukan <!-- Featured Content Slider Started --> Silakan lihat di bawahnya maka kamu akan menemukan kode <div class='fp-slides-items'> dan </div> . (Baca : Cara Mudah + Cepat Mencari Kode Html di Blogger) Silakan Ganti
"This is default featured post X title" Judul Slider. "#" Link ke posting yang kamu mau. "Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com." dengan deskripsi singkat slider. Slider image address dengan alamat gambar slider kamu.
4. Konfigurasi Menu Temukan kode <div class='menu-secondary-container'> Silakan ganti nama menu dan link (#) dengan nama yang kamu mau. Untuk mengganti logo blog kamu silakan buat logo dengan ukuran lebar 183px dan tinggi 66px, kemudian upload pada widget Header (Baca : Cara Mengganti Title Blog Dengan Gambar) Note of TravelPro 2 Column Blogger Template:
  • TravelPro 2 Column Blogger Template is FREE LICENSE, GPL License, and Creative Commons Attribution 3.0 License. Please be RESPECTFULL Blogger Template Makers and Do Not Remove Credit Footer Link
  • Some file dowload link is Paid To Download and we not change the download link
  • We not change all or some part of the template including not change and add links footer. File template still same from original resource blog's template maker