Guilty Crown Blogger template

Hai sobat,kali ini ini saya buat template anime lagi nih,tema'a Guilty crown dengan Icon'a Inori :).pasti pada taukan guilty crown,film anime yang lagi populer sekarang karena ceritanya yang menarik dan keren.disini saya buat template Guilty Crown
,hasil Editan dari template Another yang pernah saya share minggu lalu.sperti yang sudah saya janjikan,saya merombakya jadi template css,tapi tetap mendapat tema guilty crownnya.design'a yang cukup simple dan paduan warna yang ga terlalu girly.

Untuk gambar headernya,saya edit sendiri,asli editan sendiri dari hasil gambar scan yang saya temukan di Website minitokyo.net.hasilnya seperti gambar dibawah ini~xD

kembali lagi soal templatenya,kali ini saya buat 2 versi,yaitu versi 1 sidebar dengan 2 sidebar.dikarenakan banyak client yang selera'a berbeda minta ini itu bikin pusing =__="
berikut preview'a

-1 Sidebar-

-2 Sidebar-

Lanjut ke pengaturanya,sama" mirip dengan template Another,tapi disini menggunakan menubar yang berbeda.dan untuk kedua template guilty crown versi 1 sidebar dan 2 sidebar,pengaturanya juga sama.


Pengaturan 1

buka blogger=>rancangan=>edit HTML,lalu cari kode HTML seperti dibawah ini

<div id='navigation'>
<div id='navi'>
<ul>
<li class='selected'><a href='#'>Home</a></li>
<li class='selected1'><a href='#'>About me</a></li>
<li class='selected2'><a href='#'>Exchange link</a></li>
<li class='selected3'><a href='#'>Site map</a></li>
<li class='selected4'><a href='#'>Guestbook</a></li>
<li class='selected5'><a href='#'>Download</a></li>
<li class='selected6'><a href='#'>Contact</a></li></ul>
</div>
</div>

Lalu ganti tanda pagar '#' Dengan Url link kamu,dan jangan lupa diganti nama link'a sesuai yang kamu inginkan.

Pengaturan2

Avatar

Untuk Avatar,sama seperti template Another kamu harus setting manual agar avatar mucul,kalau tidak,ya tidak akan muncul==v
ukuran gambar avatar tepatnya 68px x 68px

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/AVvXsEi-I1BVAr25WcLXOm5FI9nUXTB99ZVyVh1fnOkWtc_EXx7nxTUYrYITUxnnk3OKf-k6to-si8iWNjWyh0EFmk-YvW8r7XNpobIckPsxIbw7giO2pLeT5mQwczQVm53Zg7oRlAvAO1Cvfzi_/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>

<b:if cond='data:post.author == &quot;Chera Ant Sullivan™&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-I1BVAr25WcLXOm5FI9nUXTB99ZVyVh1fnOkWtc_EXx7nxTUYrYITUxnnk3OKf-k6to-si8iWNjWyh0EFmk-YvW8r7XNpobIckPsxIbw7giO2pLeT5mQwczQVm53Zg7oRlAvAO1Cvfzi_/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>

<b:if cond='data:post.author == &quot;xMikhailx Ryuzaki&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-I1BVAr25WcLXOm5FI9nUXTB99ZVyVh1fnOkWtc_EXx7nxTUYrYITUxnnk3OKf-k6to-si8iWNjWyh0EFmk-YvW8r7XNpobIckPsxIbw7giO2pLeT5mQwczQVm53Zg7oRlAvAO1Cvfzi_/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>


kode html Diatas ini,saya sudah sediakan 3 jenis avatar untuk tiga author blog.
cara mengaktifkan avatar ini,yang perlu kamu lakukan adalah mengganti username blogger kamu pada tag conditional author yang sudah tersedia

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

ok deh,bagi yang mau coba template anime ini,selalu saya ingatkan terlebih dahulu untuk membackup template kamu,agar tidak terjadi hal" yang diinginkan.Selamat Mencoba,Arigatou gozaimasu~xDD

//Untuk template guilty crown 2 sidebar,saya tidak buat demonya,tapi preview'a ada di gambar diatas//



-Update!! Released: April 1, 2012
Fix a bug Guilty Crown Blogger template 1 sidebar:
-readmore at pages removed / tombol readmore yang ada dipages sudah dihapus //fixed
-pagenavi:fix / perbaikan pagenavi yang terhalangi kontent blog //fixed
-post title:fix/ Judul posting yang kepanjangan tidak akan lagi kepotong //fixed
-kotak komentar : auto width //fixed
-footer:fix/penambahan widget bertumpuk sudah tidak terpotong//fixed
-pages:fix/Autoreadmore:off//fixed

//templatenya sudah diperbaiki,bagi yang sudah menggunakan template Guilty Crown sebelumnya,silakan download lagi template ini,dan upload ke blog kamu.thx//

untuk yang 2 sidebar mungkin akan menyusul saya perbaiki =__=v

Download@1 sidebar Via Google Drive

Download@2 sidebar Via Google Drive

Demo

Bonus wallpaper Guilty Crown, Inori

-Download-

Read More

Animasi Text dengan CSS3

Entah kenapa akhir" ini lagi seneng"a main animasi,mungkin lagi bosen buat template kali ya?wkwkwk,padahal dari dulu paling males pakai keyframe karena agak berat,apalagi kalau di browser mozilla.ggrrrr malesin bgt deh=___=".saya buat beberapa experimen coba" dan hasil'a ada yg seperti hedaer saya,dan efek menarik lainya.tapi yang seperti di header saya tidak bisa dishare,karena udah nyatu ama header blog saya,mana yg dicopas jg udah lupa,n ribet==v,tapi contoh" dibawah ini tidak kalah menarik juga loh.daripada css HTMLa dibuang sayang,saya share aja deh.beberapa animasi diantara'a,mungkin cenderung lebih bagus di browser google chrome daripada mozilla firefox.meskipun udah diupdate browser mozilla'a ke yang paling baru,tp tetap aja masih menang google chrome kalau soal CSS3.

nah,langsung aja saya dah sediain demo + CSS + HTMLnya.masih ada yang gatau css sama html'a mau ditaruh dimana?ckckck=="

#Indonesian ._.

Htmlnya bisa di masukan di layout blog kamu,add a gadget=>html/javkascript,lalu copas dan simpan.
atau juga dimanapun yang kamu mau.

<body> isi html </body>

css/a diatas /b:skin

do you know what I mean?







1. Animasi dengan keyframe CSS3



Sliding text background color

• Home
• About me
• Contact
• Download

HTML

Ganti tanda pagar dengan URL link kamu

<div class="menuku">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>

CSS

.menuku {background:#000;width:auto;margin: 5px;}

.menuku ul {
padding:10px;
font-family:"helvetica neue", helvetica, arial, sans-serif;
font-weight:700;
line-height:1.8;
color:#fff;
padding-left:5px;
text-shadow: 0 1px 1px transparent;
float:left;}

.menuku ul li {
clear:left;
font-size:.9em;
background:-webkit-linear-gradient(0, #3FB1E7 50%, #fff 50%);
float:left;
cursor:default;
background-position:100% 0;
background-size:200% 100%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-transition:background-position .4s cubic-bezier(0,0,.5,1);
-moz-background-clip:text;
-moz-text-fill-color:transparent;
-moz-transition:background-position .4s cubic-bezier(0,0,.5,1);}

.menuku ul li:hover {
background-position:0 0;}

Animated text background gambar

Johanes

HTML

<div class="textanimasi1">
Johanes</div>

CSS

@-webkit-keyframes slide {
0% { background-position:0 0; opacity:0; }
2% { background-position:2% 2%; opacity:1; }
99% { background-position:99% 99%; }
100% { background-position:100% 100%; opacity:0; }
}

.textanimasi1 {
text-align:center;
letter-spacing:-.08em;
font:700 9.4em helvetica, sans-serif;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn8l1-xQIrUSlMos2B-hBXmle3A_KgjYGXw-G8mrsCaRs_Sv-w4sSD3Zm_-QuaL35QmX5nU1PCTxY2sUzLNDNuoptMqPKq44iIAysWcd4Rx9_eSi7u502O_FXHgMbvZNQHlgxgbsR6deI/s1600/bg.jpg);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:slide 60s linear infinite;
-moz-background-clip:text;
-moz-text-fill-color:transparent;
-moz-animation:slide 60s linear infinite;
text-shadow: 0 1px 1px transparent;
}

Animated text background gradient

Johanes

HTML

<div class="textanimasi2">
Johanes</div>

CSS

.textanimasi2{

.textanimasi2{
text-align:center;
letter-spacing:-.08em;
background: -webkit-gradient(linear,left top,right bottom,from(#E51D66),to(#705170));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation:slide1 5s linear infinite;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-moz-animation:slide1 5s linear infinite;
background: -moz-gradient(linear,left top,right bottom,from(#E51D66),to(#705170));
font:700 9.4em helvetica, sans-serif;
text-shadow: 0 1px 1px transparent;}



@-webkit-keyframes slide1 {
0% { -webkit-transform: rotateZ(0); }
1% { -webkit-transform: rotateZ(30deg); }
3% { -webkit-transform: rotateZ(-28deg); }
5% { -webkit-transform: rotateZ(34deg); }
7% { -webkit-transform: rotateZ(-32deg); }
9% { -webkit-transform: rotateZ(30deg); }
11% { -webkit-transform: rotateZ(-28deg); }
13% { -webkit-transform: rotateZ(26deg); }
15% { -webkit-transform: rotateZ(-24deg); }
17% { -webkit-transform: rotateZ(22deg); }
19% { -webkit-transform: rotateZ(-20deg); }
21% { -webkit-transform: rotateZ(18deg); }
23% { -webkit-transform: rotateZ(-16deg); }
25% { -webkit-transform: rotateZ(14deg); }
27% { -webkit-transform: rotateZ(-12deg); }
29% { -webkit-transform: rotateZ(10deg); }
31% { -webkit-transform: rotateZ(-8deg); }
33% { -webkit-transform: rotateZ(6deg); }
35% { -webkit-transform: rotateZ(-4deg); }
37% { -webkit-transform: rotateZ(2deg); }
39% { -webkit-transform: rotateZ(-1deg); }
41% { -webkit-transform: rotateZ(1deg); }
43% { -webkit-transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes slide1 {
0% { -moz-transform: rotate(0); }
1% { -moz-transform: rotate(30deg); }
3% { -moz-transform: rotate(-28deg); }
5% { -moz-transform: rotate(34deg); }
7% { -moz-transform: rotate(-32deg); }
9% { -moz-transform: rotate(30deg); }
11% { -moz-transform: rotate(-28deg); }
13% { -moz-transform: rotate(26deg); }
15% { -moz-transform: rotate(-24deg); }
17% { -moz-transform: rotate(22deg); }
19% { -moz-transform: rotate(-20deg); }
21% { -moz-transform: rotate(18deg); }
23% { -moz-transform: rotate(-16deg); }
25% { -moz-transform: rotate(14deg); }
27% { -moz-transform: rotate(-12deg); }
29% { -moz-transform: rotate(10deg); }
31% { -moz-transform: rotate(-8deg); }
33% { -moz-transform: rotate(6deg); }
35% { -moz-transform: rotate(-4deg); }
37% { -moz-transform: rotate(2deg); }
39% { -moz-transform: rotate(-1deg); }
41% { -moz-transform: rotate(1deg); }
43% { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(0); }
}

Johanes

HTML

<div class="textanimasi3">Johanes</div>

CSS

.textanimasi3{
text-align:center;
letter-spacing:-.08em;
color:#E51D66;
font:700 9.4em helvetica, sans-serif;
text-shadow: 0px 0px 0px #ddd, 0x 0px 0px #ddd;
-webkit-animation:text1 10s linear infinite;
-moz-animation:text1 10s linear infinite;
height: 100px;
}


@-webkit-keyframes text1 {
0% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif; }
25% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
50% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
75% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
100% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
}


@-moz-keyframes text1 {
0% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif; }
25% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
50% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
75% {-webkit-transform: rotateZ(360deg);font:700 2.4em helvetica, sans-serif;}
100% {-webkit-transform: rotateZ(-20deg);font:700 9.4em helvetica, sans-serif;}
}

Johanes

Johanes

HTML

<div class="textwrapper">
<div class="textanimasi4">Johanes</div>
<div class="textanimasi5">Johanes</div>
</div>

CSS

.textanimasi4{
text-align:center;
letter-spacing:-.08em;
color: rgba(255, 0, 0, 0.3 );
font:700 9.4em helvetica, sans-serif;
-webkit-animation:text4 3s linear infinite;
-moz-animation:text4 3s linear infinite;
height: 100px;top:0px;position:absolute;
text-shadow: 0 1px 1px transparent;
}

.textanimasi5{
text-align:center;
letter-spacing:-.08em;
color: rgba(0, 0, 255, 0.3 );
font:700 9.4em helvetica, sans-serif;
-webkit-animation:text5 3s linear infinite;
-moz-animation:text5 3s linear infinite;
height: 100px;top:0px;position:absolute;
text-shadow: 0 1px 1px transparent;
}

.textwrapper{position:relative;height: 100px;}



@-webkit-keyframes text4 {
0% {margin-left:5;}
50% {margin-left:-10px;}
100% {margin-left:5;}
}
@-webkit-keyframes text5 {
0% {margin-left:-5;}
50% {margin-left:10px;}
100% {margin-left:-5;}
}
@-moz-keyframes text4 {
0% {margin-left:5;}
50% {margin-left:-10px;}
100% {margin-left:5;}
}
@-moz-keyframes text5 {
0% {margin-left:-5;}
50% {margin-left:10px;}
100% {margin-left:-5;}
}

Johanes

HTML

<div class="textanimasi6">Johanes</div>

CSS

.textanimasi6{
text-align:center;
letter-spacing:-.08em;
color: rgba(0, 0, 255, 0.3 );
font:700 9.4em helvetica, sans-serif;
-webkit-animation:text6 10s linear infinite;
height: 100px;
text-shadow: 0 1px 1px transparent;
}

@-webkit-keyframes text6 {
0% {color:#74015A;}
25% {color:#FF005E;}
50% {color:#FC537D;}
75% {color:#FBB185;}
90% {color:#FDF9DB;}
100% {color:#74015A;}
}

@-moz-keyframes text6 {
0% {color:#74015A;}
25% {color:#FF005E;}
50% {color:#FC537D;}
75% {color:#FBB185;}
90% {color:#FDF9DB;}
100% {color:#74015A;}
}

Johanes

|

Scaning...

HTML

<div class="textwrapper1">
<div class="textanimasi7">Johanes</div>
<div class="textanimasi8">|</div>
<div class="textanimasi9">Scaning...</div>
</div>

CSS

.textanimasi7, .textanimasi8{
text-align:center;
letter-spacing:-.08em;
color: rgba(0, 0, 255, 0.3 );
font:700 9.4em helvetica, sans-serif;
height: 100px;top:0px;position:absolute;
text-shadow: 0 1px 1px transparent;
}
.textanimasi8 {
-webkit-animation:text8 3s linear infinite;
-moz-animation:text8 3s linear infinite;}

.textwrapper1{position:relative;height: 100px;}

@-webkit-keyframes text8 {
0% {margin-left:0px;}
50% {margin-left:530px;}
100% {margin-left:0px;}
}
@-moz-keyframes text8 {
0% {margin-left:0px;}
50% {margin-left:530px;}
100% {margin-left:0px;}
}

.textanimasi9 {
text-align: center;
letter-spacing: 15px;
color: rgba(0, 255, 0, 0.5 );
font: 700 20px helvetica, sans-serif;
bottom: -20px;
position: absolute;
text-shadow: 0 1px 1px transparent;
width: 100%;
-webkit-animation:text9 2s linear infinite;
-moz-animation:text9 2s linear infinite;
}
@-webkit-keyframes text9 {
0% {color: rgba(0, 255, 0, 0 );}
50% {color: rgba(0, 255, 0, 1 );}
100% {color: rgba(0, 255, 0, 0 );}
}

Sekianlah contoh" experimen saya tentang css3 keyframe~
Semoga bermanfaat :) Arigatou Gozaimasu~xD

Read More

Need For Speed - PRO Street

 

Minimum Sytem Requirements

OS: Windows 2000/XP/Vista/7

Processor: 1.8 GHz (Vista/7 2.1GHz) or faster

Memory: 512 MB RAM

Hard Drive: 4.7 GB

DVD Drive - 8 SPEED

Video Card: 64 MB*

Sound Card - DirectX 9.0c compatible

DirectX - Version 9.0c

Online Multiplayer: 512 Kbps or faster; 2-8 Players

Input - Keyboard, Mouse

Optional: USB Steering Wheel / Dual Analogue Gamepad


Link

via Indowebster (4.7gb ISO File)

Part1  Part2  Part3  Part4  Part5  Part6  Part7

Semoga Bermanfaat!
Salam TYZ!

Read More

The House Of The Dead 3 - COMPRESSED

Mungkin Sudah Banyak yang tau tentang game ini, game ber-genre Horror ini memang banyak diminati sekitr beberapa tahun lalu. Buat yang ingin Bermain tembak menembak melawan Zombie yang ada di Rumah Hantu, Wajib Download Game ini, meskipun sudah jadul tapi tetep seru untuk dimainkan, dan juga game ini sangat menegangkan... Berminat??? Ayo Download Game The House Of The Dead III Gratis Disini!!!

Minimum Requirements:
Windows 98/ME/2000/XP/Vista/7
CPU: Intel Pentium III 733 MHz or equivalent AMD Processor
Memor 500 MB RAM

How To Install the game:
1.join file with hjsplit
2.extract filenya
3.klik the house of the dead reg.reg

Download: HERE!!!!
Pass: theyoungsterszone.blogspot.com

Semoga Bermanfaat!
Salam TYZ!

Read More

SBK Superbike World Championship 2011

Minimum System Requirements

OS: Windows XP/Vista
Processor: Intel Pentium 4 @ 2.4 GHz / AMD Athlon XP 2600+
Memory: 2 Gb
Hard Drive: 4 Gb
Video Memory: 128 Mb
Video Card: nVidia GeForce 6600 / ATI Radeon X1300
Sound Card: DirectX Compatible
Network: Broadband Internet Connection
DirectX: 9.0c
Keyboard
Mouse

Download: HERE!!!
Pass: theyoungsterszone.blogspot.com

Semoga bermanfaat!
Salam TYZ!

Read More

Men of War : Assault Squad

Screenshots:

Men of War: Assault Squad takes place across the globe during the height of World War II and features five different armies each with their own unique units, vehicles and abilities. The game also features the unique "direct control" feature which enables players to maneuver units using the directional keys, rather than pointing and clicking. PC Generals can get behind the controls of a tank to smash through obstacles, crush soldiers under its tracks and fire armor-piercing shells at enemy emplacements, or take control of individual soldiers as they fight.

Features:

Different historical settings and battlegrounds for every nation presented in the game allowing players to face distinct varieties of enemies and tactics
Unique hero units with powerful abilities such as increasing units' firepower, boosting morale or providing other advantages to defeat the enemy against all odds
Bonuses featuring remote controlled bombs that can flatten entire residential blocks, airstrikes to destroy incoming tank columns, special "For the Motherland" charge attacks and many more
Improved and dynamic AI ensures that no two missions in the game will play out the same way, making each battle a new experience against an AI that really fights back
A great choice of various locations including Western Europe to Eastern Europe, North Africa and the Pacific area
The ability to play together with up to four friends in LAN or cooperative online play
New multiplayer maps and game settings
Improved multiplayer providing authentic use of equipment and vehicles
Overhauled infantry squads and the ability to purchase specific soldiers
More realistic weapon behavior and penetration values
A reworked artillery system providing innovative assault and defense strategies
New types of ammunition which increase the tanks' strength

System requirements:
* Windows XP / Vista / Windows 7
* 2.6GHz Processor
* 1GB RAM
* GeForce 6200/Radeon 9600 Videocard or higher
* DirectX 9.0c
* Compatible sound card
* 4GB free HDD space
* DVD-ROM

Download link @IDWS (Single link)
Size 1.12 GB


INSTALL NOTES
1. Mount or burn the image
2. Install
3. Copy the content from the SKIDROW folder to the game installation
4. Support the companies, which software you actually enjoy

Download: HERE!!!!
Pass: theyoungsterszone.blogspot.com

Semoga Bermanfaat!
Salam TYZ!

Read More

Trik Memasang Avatar penulis blog

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 == &quot;Johanes djogan&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-I1BVAr25WcLXOm5FI9nUXTB99ZVyVh1fnOkWtc_EXx7nxTUYrYITUxnnk3OKf-k6to-si8iWNjWyh0EFmk-YvW8r7XNpobIckPsxIbw7giO2pLeT5mQwczQVm53Zg7oRlAvAO1Cvfzi_/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 == &quot;Johanes djogan&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-I1BVAr25WcLXOm5FI9nUXTB99ZVyVh1fnOkWtc_EXx7nxTUYrYITUxnnk3OKf-k6to-si8iWNjWyh0EFmk-YvW8r7XNpobIckPsxIbw7giO2pLeT5mQwczQVm53Zg7oRlAvAO1Cvfzi_/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.dan lihat source code yang saya gunakan,sama dengan tutorial diatas
untuk contoh demo'a,silakan lihat sendiri pada template saya:
Another blogger template
Guilty crown Blogger template

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 == &quot;Johanes djogan&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-I1BVAr25WcLXOm5FI9nUXTB99ZVyVh1fnOkWtc_EXx7nxTUYrYITUxnnk3OKf-k6to-si8iWNjWyh0EFmk-YvW8r7XNpobIckPsxIbw7giO2pLeT5mQwczQVm53Zg7oRlAvAO1Cvfzi_/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 :)

Read More