Profile selain cukup penting untuk dipasang pada blog juga berfungsi untuk mempercantik blog itu sendiri. Secara default penampilan profile terlihat sederhana dan biasa-biasa saja, namun sehabis dimodifikasi penampilan profile ini terlihat keren. Bagaimana, apakah anda ingin profilenya terlihat biasa-biasa saja atau ingin terlihat keren? Jika profilenya ingin terlihat keren, anda sudah sempurna sekali berkunjung ke blog ini alasannya ialah pada kesempatan ini Kang AP ingin memperlihatkan trik cara memasang profile keren pada blog. Tanpa banyak basa-basi lagi, silahkan simak langkah-langkah berikut ini.
1. Pertama, tentu anda harus login dulu ke Blogger
2. Pilih Tata Letak » Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukkan instruksi dibawah ini ke dalam kolom HTML/JavaScript
<style>
#aboutme {
background-color:#16e162;
-moz-box-shadow:0 0 3px #3316e1;
-webkit-box-shadow:0 0 3px #3316e1;
box-shadow:0 0 3px #3316e1;
border:1px solid #666;
padding:3px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
margin:0 auto;
margin-top:15px;
padding:10px;
width:250px;
height:auto;
}
.name-author {
margin:0 0 7px;
display:block;
width:100%;
}
.name-author h3 {
position:relative;
display:inline;
background-color:#3316e1;
color:#FFF;
font-family:Segoe UI;
font-size:15px;
font-weight:bold;
margin:0 0 0 -3px;
padding:3px 5px 3px 10px;
width:100%;
-moz-text-shadow:0 1px 0 black;
-webkit-text-shadow:0 1px 0 black;
text-shadow:0 1px 0 black;
}
.name-author h3:after {
content:" ";
width:0;
height:0;
position:absolute;
left:100%;
top:0;
border-width:13px;
border-style:solid;
border-color:transparent transparent transparent #3316e1;
}
@-webkit-keyframes name-author {
0% {color:white}
20% {color:Orange}
40% {color:pink}
60% {color:Orchid}
80% {color:gold}
100% {color:white}
}
@-moz-keyframes name-author {
0% {color:white}
20% {color:Orange}
40% {color:pink}
60% {color:Orchid}
80% {color:gold}
100% {color:white}
}
@-keyframes name-author {
0% {color:white}
20% {color:Orange}
40% {color:pink}
60% {color:Orchid}
80% {color:gold}
100% {color:white}
}
/* Penerapan imbas pada element yang akan diberi efek*/
.name-author h3 {
/* Waktu 10 detik */
animation:10s infinite name-author linear;
-webkit-animation:10s infinite name-author linear;
}
.aboutme-text {
font-size:12px;
text-align:left;
margin:0;
}
.aboutme-image-container {
float:left;
width:70px;
height:70px;
margin-right:75px;
z-index:1;
}
.aboutme-image-container {
margin:-20px 0 5px 0;
padding:9px;
position:relative;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:100%;
-moz-border-radius-bottomright:100%;
-moz-border-radius-bottomleft:100%;
border-bottom-right-radius:100%;
border-bottom-left-radius:100%;
-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color:#30a4ee;
}
.aboutme-image-container:before {
content:' ';
position:absolute;
top:0;
left:-10px;
width:0;
height:0;
border-style:solid;
border-width:0 0 10px 10px;
border-color:transparent transparent #333 transparent;
}
.aboutme-image-container:after {
content:' ';
position:absolute;
top:0;
right:-10px;
width:0;
height:0;
border-style:solid;
border-width:10px 0 0 10px;
border-color:transparent transparent transparent #333;
}
.aboutme-image-container img {
width:100%;
height:100%;
border:2px solid yellow;
border-radius:100%;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
transition:all 0.3s ease;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
.aboutme-image-container img:hover {
border:2px solid GOld;
cursor:pointer;
margin-left:0;
-moz-transform:scale(1.2) rotate(360deg);
-webkit-transform:scale(1.2) rotate(360deg);
-o-transform:scale(1.2) rotate(360deg);
-ms-transform:scale(1) rotate(-360deg);
transform:scale(1.2) rotate(360deg);
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
</style><div id='aboutme'>
<div class='aboutme-image-container'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt0Nhu_nGPHBmhl_RVQ-XFHaQCQj3KHn9mQ2WNdiLd7BQIqbYIU5FgHy-fHx2hHa7O8DtiFK_cU2r1T6aSf0YzmsnGK0ojnAGE8CzInHO-WdO440HKm8PrBBESoxreDnDEQFrgPIeczGu2/s1600/%2523AP.png" />
</div>
<div class='name-author'>
<h3>Nama Anda</h3></div>
<div class='aboutme-text'>Masukan Kata-kata anda disini►►<a href="http://goo.gl/5yCPBX" target="_blank"> Selengkapnya </a>
</div></div>
Baca juga :
» Cara Praktis Membuat Kolom Langganan Keren Dibawah Postingan
» Cara Membuat Tombol Share Efek 3D
» Cara Membuat Tulisan Bismillah Dan Alhamdulillah Pada Blog
Ganti instruksi yang berwarna biru
» 250 untuk mengatur lebar kotak, sesuaikan dengan sidebar blog anda
» Ganti dengan url photo anda
» Tulis dengan nama anda
» Tulis dengan kalimat tentang/slogan anda
5. Simpan dan lihat hasilnya
Demikian cara memasang profile keren pada blog, biar bermanfaat. Happy Blogging...!
Sumber http://ap-thea.blogspot.com
EmoticonEmoticon