Cara Membuat Widget About Me di Blogspot

Cara Membuat Widget About Me di Blogspot - Mayoritas di setiap blog, tentunya ada kolom tentang penulis blog itu sendiri atau istilah lainnya Admin, ada juga yang menyebutnya kolom About Me. Sesuai dengan sebutanya, kolom admin atau about me, berisikan tentang jati diri dan informasi penulis.

Banyak macam cara untuk membuat membuat widget About Me, dari yang standar/biasa sampai yang keren alias di modifikasi.

Tampilan widget About Me yang akan saya terangkan dibawah ini menurut saya cukup keren dan tambah nilai plus untuk sebuah blog.

Untuk sobat-sobat yang menginginkan tampilan widget About Me seperti yang akan saya jelaskan, Ikuti panduan di bawah ini:

• Masuk ke blog
• Klik Tata Letak >> Tambah Gadget.
• Klik HTML/Javascript.
• Pada Kolom Konfigurasi HTML/Javascript pastekan kode berikut ini:

.<style>#aboutme {  background-color:#fff;  -moz-box-shadow:0 0 3px #e0e0e0;  -webkit-box-shadow:0 0 3px #e0e0e0;  box-shadow:0 0 3px #e0e0e0;  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:270px;  height:auto;}.name-author {  margin:0 0 7px;  display:block;  width:100%;}.name-author h3 {  position:relative;  display:inline;  background-color:#0097BD;  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 #0097BD;}@-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: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:#59B52E;}.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><br />
<div id="aboutme">
<div class="aboutme-image-container">
<img src=" https://lh3.googleusercontent.com/lFG2Pnmv0rLIN45-scKRMX86ZucnvdnhnItIAMYIFhc=w198-h207-p-no" /></div>
<div class="name-author">
<h3>
Mr Ivanchan</h3>
</div>
<div class="aboutme-text">
Saya hanyalah seorang yang sedang belajar tentang segala macam ilmu pengetahuan dan mencoba berbagi apa yang saya ketahui, kesalahan dalam artikel mutlak kesalahan saya pribadi sebagai manusia yang tak luput dari  salah dan lupa, sekiranya harap di maklumi dan di maafkan  atas kesalahan-kesalahan yang mungkin tanpa saya sadari. Niat saya tulus dan iklhas hanya mencoba mengamalkan ilmu yang saya pelajari dan membagi kepada yang membutuhkan tanpa pamrih. Untuk mengetahui profil saya klik <a href="https://www.blogger.com/ALAMAT%20PROFIL" style="color: #666666;">...Read More...</a></div>
</div>

Keterangan kode:

- Ganti tulisan yang warna merah dengan url fhoto sobat yang mau di jadikan fhoto profil.

- Ganti tulsan warna kuning dengan nama admin.

- Ganti tulisan warna biru dengan kata-kata yang kalian inginkan.

- Ganti tulisan warna hijau dengan alamat url tentang sobat.

• Langkah terakhir Klik Simpan
• Hasilnya akan seperti dibawah ini.....

Demikin panduan membuat About Me keren di blog,

Semoga bermanfaat dan selamat mencoba.

Regards,

Mr Ivanchan

BloggingTips & Triks

Share This :