Widget Profil About Me Keren Di Blog

widget about me for blogger

Cara Membuat Widget Profil About Me Keren Di Blog

Mas Tamvan Berbagi Tutorial Memuat Widget Profil About Me Keren Di Blog Plus Sosial Media yang akan membuat tampilan blog kalian lebih elegan dan membuat para pengunjung betah memandangnya :)
Setiap tutorial yang saya bagikan sangat simple karena saya juga masih newbie belum bisa copas script yang lebih rumit. Anak kemarin sore bisanya apa sih kalo ga copas :3 . Tapi tidak semuanya copas si ada beberapa yang di tambah dan di kurangi supaya lebih maksimal :v


Tutorial Membuat Widget Profil About Me Keren Di Blog

  • Login to your blogger.com
  • Next, Go to Template' open. Click on Edit HTML, Search Code ]]></b:skin> or </style>
  • Input css below right on top code ]]></b:skin> or </style>.

@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

@font-face {
  font-family: 'Museo';
  src: url("http://rocket-design.fr/fonts/museo/museo.eot?") format("eot"), url("http://rocket-design.fr/fonts/museo/museo.woff") format("woff"), url("http://rocket-design.fr/fonts/museo/museo.ttf") format("truetype");
}
* {
  -webkit-font-smoothing: antialiased;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: .02em;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #333333 url(http://sandbox.lucasbonomi.com/img/blur/Retina-Size/10.jpg) no-repeat center center;
  background-size: cover;
}

.profile_card {
  height: 460px;
  width: 260px;
  margin: 15vh auto;
  border-radius: 1px;
  box-shadow: 0 0 0 0.22em rgba(255, 255, 255, 0.35);
}
.profile_card .header-muka, .profile_card .profile {
  height: 230px;
  width: 100%;
  float: left;
}
.profile_card .header-muka {
  background: url(https://lh3.googleusercontent.com/-20w3clSNcfM/VhDM78h4TVI/AAAAAAAAAGI/46DSIH13z6Y/s630-fcrop64=1,00003fe6ffffffff/background-tamvan.jpg) no-repeat center center;
  background-size: 126% 100%;
  -webkit-transition: background-size 0.3s ease;
  -moz-transition: background-size 0.3s ease;
  transition: background-size 0.3s ease;
}
.profile_card .header-muka:before {
  content: '';
  display: block;
  width: 100px;
  height: 28px;
  background: #f9f9f9;
  position: relative;
  z-index: 1;
  margin: 15em auto 0;
}
.profile_card .header-muka .inner_head {
  position: relative;
  margin-top: -16.8em;
  width: 260px;
  height: 230px;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.profile_card .header-muka .inner_head a {
  font-size: 1.4em;
  padding: 1.5em 0.5em 0 1em;
  display: inline-block;
  color: transparent;
  text-decoration: none;
  width: 23%;
  text-align: center;
}
.profile_card .header-muka .inner_head a i {
  position: absolute;
  margin-top: 2em;
  text-align: center;
  display: block;
  display: none;
  font-style: normal;
  left: 0;
  right: 0;
  margin: 2.8em auto;
  font-family: "Museo", Helvetica, sans-serif;
  color: #fff;
}
.profile_card .header-muka .inner_head a:hover i {
  display: block;
}
.profile_card .header-muka .inner_head a span {
  margin-left: -.5em;
  margin-top: -1em;
  display: block;
}
.profile_card .header-muka:hover {
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  transition: background 0.3s ease;
  background-size: 252% 200%;
}
.profile_card .header-muka:hover a {
  color: #fff;
}
.profile_card .header-muka:hover a:nth-child(1) {
  -webkit-transition: color 0.1s ease;
  -moz-transition: color 0.1s ease;
  transition: color 0.1s ease;
}
.profile_card .header-muka:hover a:nth-child(1):hover {
  color: #2ecc71;
  -webkit-transition: color 0.1s ease !important;
  -moz-transition: color 0.1s ease !important;
  transition: color 0.1s ease !important;
}
.profile_card .header-muka:hover a:nth-child(2) {
  -webkit-transition: color 0.1s ease 0.1s;
  -moz-transition: color 0.1s ease 0.1s;
  transition: color 0.1s ease 0.1s;
}
.profile_card .header-muka:hover a:nth-child(2):hover {
  color: #ecf0f1;
  -webkit-transition: color 0.1s ease !important;
  -moz-transition: color 0.1s ease !important;
  transition: color 0.1s ease !important;
}
.profile_card .header-muka:hover a:nth-child(3) {
  -webkit-transition: color 0.1s ease 0.2s;
  -moz-transition: color 0.1s ease 0.2s;
  transition: color 0.1s ease 0.2s;
}
.profile_card .header-muka:hover a:nth-child(3):hover {
  color: #f1c40f;
  -webkit-transition: color 0.1s ease !important;
  -moz-transition: color 0.1s ease !important;
  transition: color 0.1s ease !important;
}
.profile_card .header-muka:hover a:nth-child(4) {
  -webkit-transition: color 0.1s ease 0.3s;
  -moz-transition: color 0.1s ease 0.3s;
  transition: color 0.1s ease 0.3s;
}
.profile_card .header-muka:hover a:nth-child(4):hover {
  color: #FF667A;
  -webkit-transition: color 0.1s ease !important;
  -moz-transition: color 0.1s ease !important;
  transition: color 0.1s ease !important;
}
.profile_card .header-muka:hover .inner_head {
  background: rgba(0, 0, 0, 0.5);
}
.profile_card .profile {
  background: #333333;
  font-family: "Museo",serif;
  box-shadow: 0 -0.2em 0 0 rgba(255, 255, 255, 0.5);
}
.profile_card .profile .avatar_image {
  width: 82px;
  height: 82px;
  background: url(https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn2/v/t1.0-9/10430851_462603853880977_7914483635301175019_n.jpg?oh=4caeb0be5ba17fc1d8c44afcf2a56888&oe=568E1E9D&__gda__=1452803175_704daaf1474881a9380f8c70b5981cac) no-repeat top right;
  background-size: 100%;
  border-radius: 100%;
  margin: -2.5em auto;
  box-shadow: 0 0 0 0.2em rgba(255, 255, 255, 0.85), 0 0 0 0.3em rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 3;
}
.profile_card .profile .inner_content {
  width: 92%;
  height: 194px;
  float: left;
  margin: 0.5em 4%;
  background: #f9f9f9;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 1px;
}
.profile_card .profile .inner_content:after {
  content: '';
  display: block;
  width: 100%;
  height: 16px;
  background: #f9f9f9;
  margin-top: -.8em;
  margin-left: -1px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 -0.15em 0 0 #f4f4f4, inset 0 -0.2em 0 0 rgba(0, 0, 0, 0.1), inset 0 -0.35em 0 0 #f4f4f4, inset 0 -0.4em 0 0 rgba(0, 0, 0, 0.1);
}
.profile_card .profile .inner_content .name {
  color: #959595;
  font-size: .9em;
  text-align: center;
  padding: .3em 0 .2em;
  line-height: 2;
  border-top: 0.1em solid rgba(0, 0, 0, 0.2);
  border-bottom: 0.1em solid rgba(0, 0, 0, 0.2);
  font-family: "helvetica neue";
  font-weight: 400;
  margin: 2.8em auto;
  width: 75%;
  margin-bottom: 1em;
}
.profile_card .profile .inner_content .description {
  font-size: .75em;
  text-align: center;
  line-height: .5;
  font-weight: 100;
  padding: .2em .5em -.1em;
  color: #ababab;
  text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.8);
}
.profile_card .profile .inner_content ul {
  list-style: none;
  padding: 0;
  width: 80%;
  height: 3.5em;
  display: block;
  margin: 1em auto;
}
.profile_card .profile .inner_content ul li {
  display: block;
  float: left;
  padding: 0;
  margin: .75em 0 0 1.25em;
  text-align: center;
}
.profile_card .profile .inner_content ul li:hover a {
  color: #7f8c8d;
}
.profile_card .profile .inner_content ul li a {
  color: #95a5a6;
  text-decoration: none;
  text-align: center;
}
.profile_card .profile .inner_content ul li a span {
  line-height: 1;
}

/* Buttons-Bawah */
.button-bawah {
  padding: 10px 11px;
  font-size: 1.1em;
  width: 30px;
  height: 28px;
  line-height: 1;
  position: relative;
  background: -webkit-linear-gradient(top, #fefefe, #f2f2f2);
  background: linear-gradient(to bottom, #fefefe, #f2f2f2);
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.1), inset 0 0.2em 0.2em rgba(255, 255, 255, 0.2), 0 0.1em 0.1em rgba(0, 0, 0, 0.1), 0 0.2em 0.1em rgba(0, 0, 0, 0.05);
  border-radius: 100%;
}
.button-bawah:hover {
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15), inset 0 0.2em 0.2em rgba(255, 255, 255, 0.2), 0 0.1em 0.1em rgba(0, 0, 0, 0.15), 0 0.2em 0.1em rgba(0, 0, 0, 0.05);
}
.button-bawah:active {
  top: .05em;
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.1), inset 0 0.2em 0.2em rgba(255, 255, 255, 0.2), 0 0.1em 0em rgba(0, 0, 0, 0.1), 0 0.1em 0.1em rgba(0, 0, 0, 0.05);
}


  • Save your template and go to Layout, open. Click on Add a Gadget, and scroll down to HTML/JavaScript.
  • and input code below in box HTML/Javascript

<jangan>
<div class="profile_card">
  <div class="header-muka">
    <div class="inner_head">
      <a href="#"><span class="entypo-plus"></span><i>Add</i></a>
      <a href="#"><span class="entypo-chat"></span><i>Chat</i></a>
      <a href="#"><span class="entypo-star"></span><i>Fav</i></a>
      <a href="#"><span class="entypo-heart-empty"></span><i>Like</i></a>
    </div>
  </div>
  <div class="profile">
    <div class="avatar_image"></div>
    <div class="inner_content">
      <h2 class="name" id="name">Teja Sukmana</h2>
      <span id="desc">
        <p class="description" id="desc_one">Bukan Creator Tapi Copasor</p>
      <p class="description" id="desc_two">Yang Penting Bisa Berbagi</p></span>

      <div class="social_links">
        <ul>
          <li ><a id="website" href="http://mastamvan.blogspot.com" class="button-bawah"><span class="entypo-attach"></span></a></li>
          <li ><a id="twitter" href="http://twitter.com/Teja_7x"  class="button-bawah"><span class="entypo-twitter"></span></a></li> 
          <li ><a id="dribbble" href="https://dribbble.com/mastamvan"  class="button-bawah"><span class="entypo-dribbble"></span></a></li> 
        </ul>
      </div>
    </div>

  </div>
</div>
</jangan>

  • Done, selamat salam tamvan.
Anjer gaya pake bahasa inggris :v buat yang ga ngerti maklumin aja masih belajar ya :3 jangan di buly nanti nyali Mas Tamvan Menciut :3

Cukup sekian dan terimakasih, Untuk tutorial bahasa indonesianya, di translate aja ya. Mudah2an bisa di pahami lebih mendalam.
25 komentar
  1. mantap tuorialnya nanti coba ane praktekin gan

    ReplyDelete
  2. wah mantap nih gan templatenya juga ringan gan

    ReplyDelete
  3. mantap gan update terus hehehhe

    ReplyDelete
  4. Weh jadi ingat kayak bikin aplikasi android, layoutnya mirip dgn widget ini gan :D

    ReplyDelete
  5. keren gan, tapi bikin loading blog lola gak ?

    ReplyDelete
    Replies
    1. Tenang gan, ini masih ringan. tanpa javascript

      Delete
  6. mau coba ahhhh kayaknya keren abis!!!

    ReplyDelete
  7. Bang, itu Contact nya melayang, gimana buatnya itu ?

    ReplyDelete
    Replies
    1. Oh Itu Widget sticky bebz :3 Nanti saya bikinin tutorialnya :-bd

      Delete
  8. wah keren banget gan jadinya . .

    ReplyDelete
  9. ini heightnya gabisa di kecilin gan ? :3

    ReplyDelete
    Replies
    1. Wkwkwk bisa gan.
      Tinggal di ganti nilai width pada css ini, sesuka hati.

      .profile_card {
      width: 260px;

      . Ok Thank atas komentarnya :3

      Delete
  10. Saya mau masang sih gan , tapi ini jenis Sticky :D
    dan Thanks info gan :)

    ReplyDelete
  11. izin bookmark dulu, keren nih artikelnya.... nice post :D

    ReplyDelete