D.A.H Sharing Blog

<div style="border: 1px solid #eee; height: 700px; overflow: auto; padding: 10px; width: 530px;">
<script src="http://widgetsitemap.googlecode.com/files/daftarisi.js"></script><script src="http://yoga-tc.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>

Ini dia sobat.google font api,google memberikan layanan kostum font dengan slogan - 'Making Beautiful Web!.dgn font dari google ini,sobat bisa mengganti font/gaya tulisan/tipografi yang unik-unik untuk blog sobat.
mau tau cara menerapkan google font api di blog kita?cekidot gan..


Sebelum menggunakan font ini,ada baik'a sobat backup dulu template'a..

Pertama,sobat kunjungi gallery font'a di diSini
disana,sobat akan lihat kumpulan variasi font yang sudah disediakan oleh google.

<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'>

font-family: 'Just Me Again Down Here', arial, serif;

#sidebar h2 {
font-family: 'Just Me Again Down Here', arial, serif;
}
*contoh untuk sidebar*

body {
font-family: 'Just Me Again Down Here', arial, serif;
}
*Contoh untuk mengganti semua gaya tulisan di blog sobat*

a {font-family: 'Just Me Again Down Here', arial, serif;}
*mengganti gaya tulisan untuk link/tautan*

<div style="font-family: 'Just Me Again Down Here', arial, serif;">Text kamu</div>

*cara agar dapat mengganti gaya tulisan pada text tertentu/yang kita inginkan*

<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'/>

 


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>

<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'>

<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'>

<div class='admin'>
<b:if cond='data:post.author == &quot;Johanes djogan&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKcV-625sRMaa4kmhj4x_NXfASTLqlijpieiKBk8PMochI5eSDijLx9JueT_p-GgBlWAfZ_kcqpVwLnaoVThcWMqWs3jwafEWbBMFVNYrjc1hqiiu_thyBlXk0fQRHQWr4fm929unxAafG/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
</div>

copy paste kode html diatas tadi tepat dibawah kode:
(<div class='post hentry uncustomized-post-template'> )

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 == &quot;Johanes djogan&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKcV-625sRMaa4kmhj4x_NXfASTLqlijpieiKBk8PMochI5eSDijLx9JueT_p-GgBlWAfZ_kcqpVwLnaoVThcWMqWs3jwafEWbBMFVNYrjc1hqiiu_thyBlXk0fQRHQWr4fm929unxAafG/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
</div>

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>

.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 danGuilty 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.//

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 == &quot;Johanes djogan&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKcV-625sRMaa4kmhj4x_NXfASTLqlijpieiKBk8PMochI5eSDijLx9JueT_p-GgBlWAfZ_kcqpVwLnaoVThcWMqWs3jwafEWbBMFVNYrjc1hqiiu_thyBlXk0fQRHQWr4fm929unxAafG/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.//

Sobat bosen dengan tampilan blog sobat?sekedar berbagi ilmu,bagaimana caranya warna background pada home page berbeda dengan tampilan saat membaca posting blog,seperti blog saya.mau tau cara'a gan?Cekidot gan...



Untuk dapat merubah tampilan blog,cara yang kita gunakan hanya CSS3 dan HTML b:if cond yang sudah saya kasih tau di artikel 5 Kode HTML Untuk Mengatur Tampilan Blog.yang kita lakukan sekarang,hanya merubah css pada tampilan posting,kita tidak perlu menambah kode HTML lagi pada primary CSS/homepage.disini saya hanya akan share trik sederhana untuk mengganti background.

yang kita akan gunakan adalah kode HTML:

<b:if cond='data:blog.pageType == &quot;item&quot;'> isi widget </b:if>

<style type='text/css'> Isi CSS </style>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>


isi CSS



</style>
</b:if>

<b:skin><![CDATA[/*



body {
background:#000000;
}




]]></b:skin>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>


body {
background:#000000;
}


</style>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>


body {
background:#ffffff;
}


</style>
</b:if>

body {
background:#ffffff url(http://urlgambarkamu.jpg);
background-attachment: fixed;
}

background-attachment: fixed; digunakan agar posisi gambar tetap/tidak berubah saat kita scroll halaman ke atas/kebawah.contohnya seperti blog saya