Cara Membuat Widget About Author ( tentang Penulis ) Blogger

Bloggingpasuruan - Widget "Abaut Me"  blogger ini memiliki latar belakang profil berupa foto, nama dan deskripsi tentang penulis blog. Widget About Me ( tentang penulis ) di buat sederhana namun kesan pro masih melekat dalam desainnya, widget hanya menunjukkan sebuah gambar dengan Google+ tombol dan link ke profil Google+ pengikut. Kali ini Bloggingpasuruan akan share 4 model widget "About Me" yang mudah digunakan, keren dan ada tambahan 4 tombol jaringan sosial di dalam widget yang. Saya harap Anda menyukai widget ini. Untuk menambahkan widdget ini ke blog ikuti langkah-langkah di bawah ini.


Langkah 1: Buka blogger Dashboard >> Tata Letak >> Add Gadget >> Html / javascript.

Langkah 2: Salin kode yang diinginkan dari widget "About Me" yang saya berikan dibawah ini kemudian salin ( copas ) pada kotak kode >> Html / javascript

Cara Membuat Widget About Author ( tentang Penulis ) Blogger


<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div class="box">
   <div class="ribbon"><span>Admin</span></div>
<div id="about-me">
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Ganti Nama Anda</p><p></p><h5>Masukkan teks mengenai profile Anda disini</h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="ganti link id Facebook Anda" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="ganti link ID Twitter Anda" target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/ ganti ID google+Anda " target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="ganti ID Pinterest Anda " target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div></div>
<style>
#about-me{
  color:#444;
    width: 300px;
    padding: 20px 10px 110px;
    border: 2px solid #555;
  background-color:#eee;
 font-family: 'Open Sans Condensed',sans-serif;
}
#about-me img {
  border: 2px solid #666;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 16px;
  border-radius: 2px;
  left: 8px;
}
#about-me p{
position:absolute;
bottom:84px;
  font-size:17px;
font-weight:bold;
  left:119px;
color: rgb(58, 148, 227);
}
#about-me h5{
  width:200px;
  position:absolute;
  left:119px;
  top:9px;
  color:#555;
font-size:14px;
}
#my-link {
position:absolute;
top: 94px;
  left: 119px;
}
.ribbon {
  position: absolute;
  left: -3px; top: -3px;
  z-index: 5;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#359BED 0%, #5467A7 100%);
  box shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #5467A7;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #5467A7;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #5467A7;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #5467A7;
}
</style>


Model 2

Cara Membuat Widget About Author ( tentang Penulis ) Blogger


<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me">
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Nama Anda</p><p></p><h5> Masukkan teks mengenai profile Anda disini </h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="https://www.facebook.com/ganti ID facebook Anda" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/ ganti ID Twitter Anda " target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/ ganti ID Google plus  Anda " target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="https://www.pinterest.com/ ganti ID pinterest Anda " target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 314px;
  padding: 40px 22px 114px;
  border: 2px solid #A0A0A0;
  background-color: #fafafa;
  font-family: 'Open Sans Condensed',sans-serif;
}
#about-me img {
  border: 6px double #A0A0A0;
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 23px;
  border-radius: 12px;
  left: 18px;
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(-17deg);
  z-index: 5;
}
#about-me p {
  position: absolute;
  bottom: 102px;
  font-size: 18px;
  font-weight: bold;
  left: 146px;
  color: rgb(58, 148, 227);
}
#about-me h5 {
  width: 185px;
  position: absolute;
  left: 146px;
  top: 15px;
  color: #747272;
  font-size: 15px;
  letter-spacing: 0.2px;
  text-align: left;
}
#my-link {
  position: absolute;
  top: 20px;
  left: 332px;
}
#my-link img{
border-radius:70px;
padding:2px;
}
</style>



Model 3


Cara Membuat Widget About Author ( tentang Penulis ) Blogger


<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me">
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Nama Anda</p><p></p><h5>> Masukkan teks mengenai profile Anda disini </h5>
<p></p><p></p>
</div>
<div id="my-link">
<a href="https://www.facebook.com/ganti ID Facebook Anda" target="_blank"><img src="http://i57.tinypic.com/aonk43.png" title="Facebook" width="22px" /></a>
<a href="https://twitter.com/ ganti ID Twitter Anda " target="_blank"><img alt="Twitter" src="http://i58.tinypic.com/2ldzzog.png" title="Twitter" /></a>
<a href="https://plus.google.com/ ganti ID Google plus  Anda " target="_blank"><img alt="Google+" src="http://i57.tinypic.com/3009oqw.png" title="Google" /></a>
<a href="https://www.pinterest.com/ ganti ID pinterest Anda " target="_blank"><img alt="Pinterest" height="22px" src="http://www.nptechforgood.com/wp-content/uploads/2012/02/pinterest-logo.jpg" title="Pinterest" width="22px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 225px;
  padding: 20px 10px 110px;
  border: 2px solid #B0AEAE;
background: -webkit-linear-gradient(#eee, white);
  font-family: 'Open Sans Condensed',sans-serif;
  height: 175px;
}
#about-me img {
  border: 2px solid #666;
  width: 110px;
  height: 110px;
  position: absolute;
  bottom: 184px;
  border-radius: 60px;
  left: 65px;
}
#about-me p {
  position: absolute;
  bottom: 135px;
  font-size: 19px;
  font-weight: bold;
  left: 91px;
  color: rgb(58, 148, 227);
}
#about-me h5 {
  letter-spacing: 0.3px;
  width: 200px;
  position: absolute;
  left: 35px;
  top: 140px;
  color: #555;
  font-size: 14px;
  text-align: center;
}
#my-link {
  position: absolute;
  top: 260px;
  left: 79px;
}
</style>



Model 4

Cara Membuat Widget About Author ( tentang Penulis ) Blogger


<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<div id="about-me">
  <img src="http://lh5.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s80-c/photo.jpg" /><p>Nama Anda</p><p></p><h5> Masukkan teks mengenai profile Anda disini <br /><br />Email: nama-anda@gmail.com<br />Phone: xxx-xxx-xxx-001<br />Skype ID: Nama Anda</h5>
<p></p><p></p><h4>Author Name:</h4>
</div>
<div id="my-link"><p>Ikuti Saya </p>
<a href="https://www.facebook.com/pages/ganti ID Facebook Anda" target="_blank"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" title="Facebook" width="35px" height="35px" /></a>
<a href="https://twitter.com/ ganti ID Twitter Anda " target="_blank"><img alt="Twitter" src="http://icons.iconarchive.com/icons/danleech/simple/1024/twitter-icon.png" title="Twitter" width="35px" height="35px" /></a>
<a href="https://plus.google.com/ ganti ID Google plus Anda " target="_blank"><img alt="Google+" src="https://developers.google.com/+/images/branding/g+128.png" title="Google" width="35px" height="35px" /></a>
<a href="https://www.pinterest.com/ ganti ID pinterest Anda " target="_blank"><img alt="Pinterest"  src="http://www.iconarchive.com/download/i54058/danleech/simple/pinterest.ico" title="Pinterest"  width="35px" height="35px" /></a></div>
<style>
#about-me {
  color: #444;
  width: 275px;
  border: 2px solid #A0A0A0;
  background-color: #fafafa;
  font-family: 'Open Sans Condensed',sans-serif;
  height: 310px;
}
#about-me img {
  border: 2px solid #A0A0A0;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 15px;
  border-radius: 4px;
  left: 186px;
}
#about-me p {
  position: absolute;
  top: -2px;
  font-size: 18px;
  font-weight: bold;
  left: 99px;
  color: rgb(58, 148, 227);
  letter-spacing: .4px;
}
#about-me h5 {
  border-top: 3px double #999;
  width: 169px;
  position: absolute;
  left: 13px;
  padding-top: 5px;
  top: 16px;
  color: #747272;
  font-size: 15px;
  letter-spacing: 0.2px;
  text-align: left;
}
#about-me h4 {
  font-size: 18px;
  position: absolute;
  top: 15px;
  left: 14px;
}
#my-link {
  position: absolute;
  top: 268px;
  left: 10px;
}
#my-link p {
position: absolute;
  bottom: 29px;
  color: #444;
  font-size: 16px;
  font-weight: bold;
  left: 3px;
}
#my-link img{
border-radius:5px;
padding:2px;
}
</style>

Kustomisasi

Ganti link yang saya warnai kuning dengan link foto Anda. Jika ada masalah dengan widget diatas, silahkan tinggalkan komentar anda di kotak komentar di bawah ini.

Semoga bermanfaat….
Share this with short URL: Get Short URLloading short url

Nama saya Usman Kurniawan dari Pasuruan - jawa timur dan bukan seorang Blogger Pro, Namun saya akan serius belajar jika menyukai sesuatu hal, termasuk dunia blogging.

Previous
Next Post »