Widget about me Google+ para sidebar

Widget about me Google+ para sidebar


Hoje vamos compartilhar um widget por tejasukmana esse widget fica elegante e podemos utilizar também na sidebar do Blogger para que as pessoas possam adicionar seguir nas redes sociais para adicionar o Widget siga os Passos abaixo 


Adicionando Widget about me google+ 

Faça login no blogger então va no menu tema clique em editar HTML/JavaScript com as teclas combinadas CTRL+F busque por ]]></b:skin> ou </style> e antes disso adicione o seguinte código CSS. 


@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);
}


Salve isso então va no menu layout procure o lugar onde deseja adicionar clique em adicionar novo gadget então procure por  HTML/JavaScript e cole o seguinte código: 

<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://www.mybloggerseo.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/your id"  class="button-bawah"><span class="entypo-dribbble"></span></a></li> 
        </ul>
      </div>
    </div>

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

Click to comment