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 Blogger Lainnya :

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhktEq_vrql8K90RtTmd8JxaPzjdCO3T2jJ9SxOVTggyiA0kgDcEBfUDhFGjMLzFBNBg7QdCR1I2pvdXDfreW0dWLnD6hrd9wPsIi2lp8w9L7hdsNiVRUnkyocjeCRSzd_ybekdaZsZrQQW/,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.
24 komentar
  1. fayzismeOctober 7, 2015 at 7:39 PM

    Keren, thanks udah berbagi...

    ReplyDelete
  2. Pekalongan NewsOctober 7, 2015 at 7:46 PM

    mantap tuorialnya nanti coba ane praktekin gan

    ReplyDelete
  3. AsfizaOctober 7, 2015 at 7:51 PM

    ijin nyobain gan. keren nih

    ReplyDelete
  4. UnknownOctober 7, 2015 at 7:57 PM

    wah mantap nih gan templatenya juga ringan gan

    ReplyDelete
  5. bondr3sOctober 7, 2015 at 8:06 PM

    mantap gan update terus hehehhe

    ReplyDelete
  6. Yulka MayatskayaOctober 7, 2015 at 8:20 PM

    keren gan patut dicoba nih hhe

    ReplyDelete
  7. BillOctober 7, 2015 at 8:26 PM

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

    ReplyDelete
  8. UnknownOctober 7, 2015 at 8:31 PM

    Izin coba gan =D

    ReplyDelete
  9. UnknownOctober 7, 2015 at 8:34 PM

    keren gan,ijin coba dulu

    ReplyDelete
  10. Pembuat PatungOctober 7, 2015 at 8:40 PM

    ijin nyoba Mas

    ReplyDelete
  11. UnknownOctober 7, 2015 at 9:25 PM

    keren gan, tapi bikin loading blog lola gak ?

    ReplyDelete
    Replies
    1. Mas TamvanOctober 7, 2015 at 9:38 PM

      Tenang gan, ini masih ringan. tanpa javascript

      Delete
  12. FX mantapOctober 7, 2015 at 9:42 PM

    mau coba ahhhh kayaknya keren abis!!!

    ReplyDelete
  13. Egi ErdianOctober 7, 2015 at 10:17 PM

    ijin nyoba :v

    ReplyDelete
  14. UnknownOctober 7, 2015 at 10:23 PM

    Bang, itu Contact nya melayang, gimana buatnya itu ?

    ReplyDelete
    Replies
    1. Mas TamvanOctober 7, 2015 at 10:35 PM

      Oh Itu Widget sticky bebz :3 Nanti saya bikinin tutorialnya :-bd

      Delete
  15. UnknownOctober 7, 2015 at 10:37 PM

    wah keren banget gan jadinya . .

    ReplyDelete
  16. UnknownOctober 8, 2015 at 2:21 AM

    ini heightnya gabisa di kecilin gan ? :3

    ReplyDelete
    Replies
    1. Mas TamvanOctober 8, 2015 at 2:30 AM

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

      .profile_card {
      width: 260px;

      . Ok Thank atas komentarnya :3

      Delete
  17. BobbyOctober 8, 2015 at 5:01 AM

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

    ReplyDelete
  18. ahmadOctober 8, 2015 at 7:23 AM

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

    ReplyDelete
  19. Mas TamvanOctober 8, 2015 at 5:26 PM

    izin pasang gan bagus widgetnya

    ReplyDelete