Cara Buat About Me Di Sidebar Blog Keren

Baca Juga

Blog Ponsel Si Oon - Cara Buat About Me Di Sidebar Blog Keren Mungkin sobat sekalian sudah sering melihat di blog orang lain yang sekilas menampilkan jati diri yang punya blog atau sering di sebut dengan istilah About Me ?? .. ada banyak macam cara atau model dalam membuat widget About Me .. dari yang standar/biasa sampai yang keren alias di modifikasi .. seperti contoh nya yang akan saya bagikan ini .. about me yang terpasang di blog ini ..

Tampilan widget About Me yang akan saya terangkan dibawah ini menurut saya keren dan tambah nilai plus untuk sebuah blog .. di samping itu telah ditambahkan sedikit sentuhan hover pada gambar .. jadi tambah lebih keren lagi .. dan Untuk sobat-sobat yang menginginkan tampilan widget About Me .. ikuti panduan di bawah ini .. berikutnya silahkan modifikasi lagi sesuai keinginan .. untuk menjadi jauh lebih keren lagi .. dari yang saya terapkan ini .. dan sebelum memulai .. di bawah ini contoh hasil nya .. sesudah & sebelum di hover ..

Sebelum DiHover / Diklik

Sesudah Dihover / Diklik

Gimana .. setelah lihat hasilnya .. keren ?? Jika kurang keren silakan buat sendiri aja .. yang menurutmu jauh lebih keren .. hehehe .. ok next .. dibawah ini panduan singkat Cara Buat About Me Di Sidebar Blog Keren

• Login dulu ke Blogger.Com
• Klik Tata Letak » Tambahkan Widget
• Klik HTML/Javascript » Paste Kode Dibawah ini .. pada kolom konfigurasi HTML/Javascript

Code CSS

<style>
#aboutme {
background: #fff;
border:2px solid #ff1493;
padding:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:0 auto;
margin-top:15px;
padding:10px;
width:200px;
height:auto;
}
#aboutme:hover {
background: url(https://gambar-hover.png)no-repeat;
}
.name-author {
margin:0 0 7px;
display:block;
width:100%;
}
.name-author h3 {
position:relative;
display:inline;
background-color:#ffd700;
color:#000000;
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:9px;
border-style:solid;
border-color:transparent transparent transparent #ff1493;
}
@-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 efek 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:3px;
pading:3px;
font-weight:bold;
color: black;
}
.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:#ffd700;
}
.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 white;
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);
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
</style>

Keterangan :

• Ganti Url https://gambar-hover.png dengan Url gambar sobat .. yang mau di tambahkan sebagai gambar hover ..
• Jika ingin ditambahkan Efek Berbayang / Shadow .. silahkan tambahkan kode ini :
  -moz-box-shadow:0 0 3px #e0e0e0;
  -webkit-box-shadow:0 0 3px #e0e0e0;
  box-shadow:0 0 3px #e0e0e0;
• Berikutnya Copy Code HTML dibawah ini .. dan pasang di bawah CSS yang sudah tadi sobat Copy

Code HTML

<div id='aboutme'>
<div class='aboutme-image-container'>
<img src="https://gambar-profil.jpg" />
</div>
<div class='name-author'>
<h3>Oka Deris</h3>
</div>
<div class='aboutme-text'>
Kebahagiaan bukanlah disaat kita memiliki kesempurnaan .. namun ketika kita dapat menerima ketidaksempurnaan dengan tulus dan ikhlas ..<a href="https://oon23.blogspot.co.id" style="color: #ff1493;">Read More</a>
</div>
</div>

Keterangan :

• Ganti Url Gambar https://gambar-profil.jpg dengan Url gambar Profil sobat ..
• Oka Deris : Ganti dengan nama asli / Nama samaran Sobat ..
• Kebahagiaan bukanlah disaat kita memiliki kesempurnaan .. namun ketika kita dapat menerima ketidaksempurnaan dengan tulus dan ikhlas .. : ganti dengan deskripsi singkat blog sobat .. atau pengenalan singkat soal jatidiri sobat ..
• Ganti Link berikut https://oon23.blogspot.co.id dengan link halaman about di blog / link profil G+ dsb'y ..
• Selebih nya .. silahkan atur - atur lagi sesuai keinginan masing - masing

Gimana .. mudah kan ?? Selamat mencoba dan semoga bermanfaat .. bagi yang membutuhkan .. & terimakasih sudah membaca Cara Buat About Me Di Sidebar Blog Keren .. sampai jumpa lagi dilain waktu & lain kesempatan .. Happy Blogging ^_^

Tag : #About, #About Me, #Tentang, #Tentang Saya, #Sidebar, #Sidebar Blog, #Blog, #Blogspot, #Blogger, #Cara Buat About Me Di Sidebar Blog Keren