Selamat datang di blog Sodiyc dan Acun. Nama saya Sodikin Kurniawan, Acun adalah pasangan hidup saya. Sekarang saya berkeja sebagai tenaga kesehatan di Laboratorium Biomolekuler di Semarang, Jawa tengah.


Blog Sodiyc dan Acun

Artikel Analis Kesehatan, Blogger Tutorial dan Teknologi Informasi
Responsive adalah istilah yang dipakai dalam web design dalam penyesuaian lebar (width) dengan menyesuaikan jenis media yang digunakan user saat mengakses.. Lihat
Kemaren liburan panjang tahun baru cina kita jalan jalan ke Lamongan di WBL (Wisata Bahari Lamongan). Lihat
Inikah rasanya orang galau, hati ini sungguh hancur pikiran gak bisa konsen, hidup ini monoton, itu itu saja. Lihat
Kalimat dahsyat yang disampaikan Halle Berry, artis peraih Oscar melalui film James Bond 'Die Another Day' di tahun 2004 ketika mendapat piala Razzie Award. Lihat
Omongin soal blogazine, blogazine itu apa seh? Blogazine itu sering diartikan dengan 2 buah kata blog dan gazine jadi sebuah blog berkonsep gazine atau majalah. Lihat

Artikel Terbaru

Sabtu, Februari 18, 2012

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.

4 komentar

Kamis, Februari 09, 2012

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!

0 komentar