Beranda / BLOGGER

Widget Profil About Me Keren Di Blog

Posting Komentar


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


Result







Tutorial Blogger Lainnya :









  • Membuat Slide Recent Post Responsive






  • Widget Recent Post Gallery Invert






  • Membuat Animasi Menu Bar 3D With CSS











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/AVvXsEha7iaRSU8OzhDnPwzcyLGNO0jVhRvM7Vi__ade1QcCWYs3TbdVHdG1vpifqTNk5-LfPlN85085RR_2hPF2mGc6FOq2Lb211fKz6eUFHhqopXpn6rNun7leuBNGLgwv5LqRj7kW6wDkxkp0/,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.



Anda mungkin menyukai postingan ini

Tidak ada komentar untuk "Widget Profil About Me Keren Di Blog"

Posting Komentar