Minggu, 17 November 2013
Trik Memasang Avatar penulis blog,Mungkin sobat sering melihat avatar" atau foto penulis blog yang penulis blognya berbeda,dan mempunyai avatar'a masing" yang berbeda seperti template Anime" orang luar negeri yang tiap design'a menggunakan sistem postingan seperti itu.sebenarnya Ini trik lama dan untuk memasang'a sangat simple,tapi trik saya kali ini agak berbeda dengan yang lain ,karena trik yang saya berikan valid HTML dan penempatan CSS'a yang benar.penggunaan css Inline Styles yang salah contoh'a seperti dibawah ini.
<div style="color=#fff;background:#fff;">...</div>
Sebisa mungkin hindari penggunaan inline style seperti diatas. Lebih baik menggunakan stylesheet bawaan blogger,diantara <b:skin> isi css </b:skin>. cara ini akan sangat memudahkan kamu pada saat mengedit CSS'a.
Untuk mencoba trik ini saya sarankan untuk membackup template kamu agar tidak terjadi hal yang tidak diinginkan.sebenarnya cara'a cukup simple dan sudah umum menurut saya.
Fungsi avatar'a itu sendiri menggunakan tag Conditional data:post.author yang memungkinkan untuk menampilkan konten dari author/penulis tersebut
ok langsung saja,pertama buka blogger=>rancangan=>edit HTML,lalu centang Expand Widget Templates.
Setelah saya coba,ternyata tidak semua template sama,oleh karena itu disini ada 2 cara:
tapi saya sarankan coba yang cara2 ,karena tingkat keberhasilan'a lebih tinggi daripada cara1 :)
Cara 1
kemudian Cari kode HTML seperti dibawah ini
<div class='post hentry uncustomized-post-template'>
#Note bila kamu menemukan kode html yang sama seperti diatas,pastikan dibawah kode html itu ada kode:
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
Cara2
Cari kode Html yang mirip" seperti dibawah ini
<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
Setelah itu,copy paste Kode HTML dibawah ini
<div class='admin'>
<b:if cond='data:post.author == "Johanes djogan"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LYPjPZ_h8ZTIwAY0fAQg4ED4j9kYqvMvCRyTafXD8SgZNwfFHqCnjef_-43X97PSR5jk_fp9YO1VYskXJ1hvn5CSPUAXWb_HeYTb9DwpfBZF8qY7vxJKCFiY2NVTLHZ8d74zY3I2Gu8K/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
</div>
Cara1
copy paste kode html diatas tadi tepat dibawah kode:
(<div class='post hentry uncustomized-post-template'> )
Atau
Cara2
copy paste kode html diatas tadi seperti dibawah ini.
<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry'>
<div class='admin'>
<b:if cond='data:post.author == "Johanes djogan"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LYPjPZ_h8ZTIwAY0fAQg4ED4j9kYqvMvCRyTafXD8SgZNwfFHqCnjef_-43X97PSR5jk_fp9YO1VYskXJ1hvn5CSPUAXWb_HeYTb9DwpfBZF8qY7vxJKCFiY2NVTLHZ8d74zY3I2Gu8K/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
</div>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
Setelah itu,copy paste CSS Dibawah ini,diatas kode ]]></b:skin>
.admin {
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-linear-gradient(top, white, #EEE);
background: -moz-linear-gradient(top, white, #EEE);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
margin-left: 10px;
margin-top: 40px;
}
.admin img {width:68px;height:68px}
Pada CSS .Admin,untuk mengatur posisi gunakan margin.
CSS Diatas sama dengan Template saya Another dan Guilty Crown
pada CSS .admin img digunakan untuk mengatur lebar dan tinggi gambar/avatar itu sendiri
CSS Dibawah ini cuma Hiasan background gradient dan border radius CSS3,kamu bisa merubah warna atau sudut bulatnya.
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-linear-gradient(top, white, #EEE);
background: -moz-linear-gradient(top, white, #EEE);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
//Ada kemungkinan sesudah kamu menyimpan'a,posisi'a tidak beraturan,karena itu gunakan margin-left,margin-right,margin-top dan margin-bottom untuk mengatur posisi avatar tersebut.//
lalu simpan dan lihat hasilnya.
Pengaturan Tambahan
Untuk Avatar,sama seperti template Another dan Template Guilty Crown kamu harus setting manual agar avatar mucul,kalau tidak,ya tidak akan muncul==v
Pertama,buka blogger=>rancangan=>edit HTML=> Centang Expand Widget Templates
Lalu carikode html seperti dibawah ini
<b:if cond='data:post.author == "Johanes djogan"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-LYPjPZ_h8ZTIwAY0fAQg4ED4j9kYqvMvCRyTafXD8SgZNwfFHqCnjef_-43X97PSR5jk_fp9YO1VYskXJ1hvn5CSPUAXWb_HeYTb9DwpfBZF8qY7vxJKCFiY2NVTLHZ8d74zY3I2Gu8K/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
kode html Diatas ini,saya cuma beri 1 jenis avatar untuk 1 author blog.
cara mengaktifkan avatar ini,yang perlu kamu lakukan adalah mengganti username blogger kamu pada tag conditional author yang sudah tersedia.untuk menambahkan avatar'a,yang kamu perlu lakukan cuma copas HTML diatas,tepat dibawahnya,lalu ganti nama penulis dan url gambar avatar'a.
text bewarna merah:ganti dengan Username kamu.
text bewarna biru :ganti dengan Url gambar avatar kamu.Ukuranya 136px x 190px.
kalau tidak tahu username kamu,sebenar'a mudah aja,tinggal copas dari nama profil di blog kamu,atau bila ada banyak penulis tapi tidak tahu username'a,cara'a:
buka blogger=>setting=>izin/permission.
Contoh:
Lalu kamu akan melihat beberapa nama penulis dan admin disana.tinggal copy paste deh nama'a
//Saya Sudah mencobanya di berbagai template,dan hasilnya ada beberapa yang bisa menggunakan cara 1 dan juga ada yang bisa menggunakan cara2.//
Selesai deh.jadi dengan ini saya harapkan sobat bisa lebih kreatif dalam hal CSS dan HTML,jangan ngikutin style orang lain,apalagi punya orang luar negeri.ciptakan style kita sendiri,kreasi kita sendiri,dan hasil tangan kita sendiri.Ini Style ku,apa style mu?Indonesia harus kreatif.Arigatou Gozaimasu,semoga bermanfaat :)
Posting Komentar