Cara Membuat Tampilan Profil Blogger pada Post Author

Cara Membuat Tampilan Profil Blogger pada Post Author

1. KLIK "Expand Widget Templates".
2. Cari kode : ]]></b:skin>; Gunakan Ctrl+F untuk mempercepat dan mempermudah pencarian kode!
3. Copy-paste kode CSS dan letakkan di atasnya.
4. Lanjutkan dengan mencari kode:
   
5. Copy-paste xHTML dan letakkan di bawahnya!
6. KLIK "SAVE Templates/Simpan Template".
7. Buka blog dan nikmati "gaya baru" blog anda!

*/Kode CSS*/

profilauthor {
display:block;
position:relative;
margin:0px 0 8px 0; /* 0px dapat dirubah untuk mengatur posisi background hingga diperoleh posisi tepat , misalnya hingga nilai -10px */
float: right;/* Modive code by: lefransparasian.blogspot.com */
color: #0066FF;
background:#aaa;
text-shadow:0 1px 0 #000;
padding:2px 5px 2px 20px;
border-radius:4px 3px 3px 22px;
-moz-border-radius:4px 3px 3px 20px;
-webkit-border-radius:4px 3px 3px 22px;
border:1px solid #777;
cursor:pointer;
}
.profilauthor:hover {
color:red;/* modifikasi code by: lefransparasian.blogspot.com */
background: #aaa;
border-bottom: 1px solid blue;
}
.profilauthor img {
position: absolute;
top:-500px;
left:-800px;
width:30px;
height:5px;
opacity:0;/* Modification by: lefransparasian.blogspot.com */
filter:alpha(opacity=0);
border:2px solid red;
padding:1px solid blue;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-o-transition:all 6s ease-in;
-moz-transition:all 6s ease-in;
-webkit-transition:all 6s ease-in;
}
.profilauthor:hover img {
width:125px; /* sesuaikan width dengan lebar gambar/image */
top:-50px;
left:-150px;
height:150px; /* sesuaikan height dengan tinggi gambar/image */
opacity:100;
filter:alpha(opacity=100);
border:4px solid #aaa;
background: #999;
padding:3px;
border-radius:12px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
-o-transform:rotate(735deg);
-moz-transform:rotate(735deg);
-webkit-transform:rotate(735deg);
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}

*/Kode HTML*/

<div style='clear:both;margin:3px 0 1px;height:3px;background:#222;'/>
<span class='profilauthor post-author'>
<img src='http://h1.ripway.com/fransfra/GRimages/joged.gif'/>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>
<div style='clear:both;'/>

Dengan memanfaatkan celah yang ada, kita akan buat blog semakin mengejutkan bagi pengunjung. Melalui Post Author yang terletak di bawah judul posting sebuah photo blogger muncul secara tiba-tiba ketika cursor menyentuh teks Post Author. Untuk membuat animasi cantik yang sama sekali belum tersentuh oleh satupun tutorial blogger ini, kita akan memanfaatkan CSS3 transition yang dipadukan dengan kode HTML yang lain guna menciptakan sebuah bentuk animasi. Tak banyak kode yang diperlukan, tetapi sebuah modifikasi template perlu dilakukan. Nggak akan sulit, sobat! Dalam waktu setengah jam pasti akan kelar dan sebuah "animasi atraktif layaknya sulap" siap menghiasi blog kalian

Keterangan/Catatan:

1. Kode yang dengan keterangan seuaikan width dan sesuaikan height digunakan untuk menyesuaikan tinggi (height) dan lebar (width) gambar yang akan di tampilkan. Kode ini terletak pada syntax .profilauthor:hover img {width:125px; .... dst;}. Rubah nilainya sesuai dengan ukuran gambar/photo.
2. Kode css dengan keterangan /* 0px dapat dirubah ... dst */ berfungsi untuk mengatur posisi background dan teks post author hingga diperoleh posisi yang tepat. Semakin besar nilainya maka akan semakin turun dan semakin kecil maka akan semakin naik (hingga nilai negatif: misalnya -10px). Perubahan nilai pada kode css tersebut untuk membuat posisi simetris dengan garis di sebelah atas post author (border yang dibentuk melalui background div di xHTML).

xHTML

Kode yang berwarna merah diganti dengan URL gambar/photo milik kalian sendiri yang ingin di tampilkan.

Posted in: Panduan lanjut