Free Template Blogger Responsive

Template Blogger Responsive, ini adalah experimen saya membuat sebuah template responsive. Responsive adalah istilah yang dipakai dalam web design dalam penyesuaian lebar (width) dengan menyesuaikan jenis media yang digunakan user saat mengakses. Mungkin yang suka mengedit template pasti tau satuan pada width pada CSS template dan sering digunakan adalah pixel disingkat px.

Coba bayangkan saat Sobat kasih lebarnya misalnya 1024px dan saat dilihat di layar yang ukuran lebih kecil msilanya 900px apa yang terjadi sebagian tampilan template tidak terlihat dan harus scrool ke kanan ke kiri. Nah untuk template experimen saya kali ini saya gunakan satuan persen (%) dan penbahan CSS Media Query untuk menyesuaikan lebar layar. Oke langsung saja kalau mau dicoba.

Live Demo Blogger Responsive (untuk mencobanya silahkan zoom monitor sobat tekan CTRL +)


1. Template Blogger Responsive v.1

Fitur :

• Responsive
• Simple
• Mudah diedit
• Meta tag
• Tread comments
• Auto Read More
• Post tumbnail

Download file

2. Template Blogger Responsive v.2

Fitur :

• Responsive
• Simple
• Mudah diedit
• Meta Tag
• 3 kolom footer
• Last Tweet widget (mudah dimodifikasi)
• Recent comments plus avatar
• Search widget (responsive)
• Tread comments
• Auto Read More
• Post tumbnail

Download file

Note : tamabahan file widget tweet, search, recent koment dan last tweet saya berikan satu paket dengan file js'nya juga jadi tinggal sobat masukan saja template dab untuk HTMLnya masukan di widget HTML/JavaScript. Yang paling penting tolong jangan hapus link kreditnya, jika ada pertanyaan silahkan komentar sobat makasih.

Recent Comments Blogger Plus Avatar

Recent Comments Blogger Plus Avatar. Setelah adanya fitur baru Threaded Comments, memungkinkan menampilkan avatar pada widget Recent Comments/Komentar Terakhir akrena adanya perubahan pada API komentar blogger. Script komentar terakhir/recent comment dibuat oleh Harish (http://www.way2blogging.org). Saya share disini buat-rekan rekan blogger. Contohya pada gambar dibawah ini, atau lihat Komentar Sahabat di blog ini.

Cara membuat Reccent Comments Blogger plus avatar
1. Login Blogger -> dasbor -> Racangan
2. Buat widget baru HTML/JavaScript
3. Masukan kode dibawah ini pada widget.

<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://alamat.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Keteragan : kode yang berwarna merah bisa disesuaikan dengan selera Anda dan Ganti alamat.blogspot.com dengan alamat blog Anda, ganti max-results=5, sesuai jumlah komentar yang akan ditampilkan.

numComments = 5, (jumlah komentar yang ditampilkan)
showAvatar = true, (Menampilkan avatar atau tidak, jika tidak ganti dengan "false")
avatarSize = 30, (ukuran avatar dalam pixel)
roundAvatar = true,(Menampilkan avatar jadi bulat atau tidak, jika tidak ganti dengan "false")
characters = 30, (jumlah karakter yang ditampilkan)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", (url avatar)
hideCredits = true; (Menampilkan link credit atau tidak, jika tidak ganti dengan "false")

4. Klik Simpan.

selain cara diatas silahkan ada bisa pakai Widget Generator Recent Comments Avatar

Semoga berhasil dan bermanfaat!