Cara Mengedit Widget Profile G+ Di Blog

Kamis, 29 September 2016

Cara Mengedit Widget Profile G+ Di Blog

    Tidak ada komentar
Cara Mengedit Widget Profile G+ Di Blog - Hallo sobat blogger kali ini admin mau membagikan Ilmu nih, Ilmunya yaitu Cara Mengedit Widget Profile G+ Di Blog nah pasti pada belum tahu caranya yah, nah pada kesempatan kali ini saya mau membagikan Ilmu yang bermanfaat, kalian pasti sudah mengetahui apa yang di maksud judul postinganya nah kalian pasti melihat Profile G+ kalian biasa-biasa saja tanpa ada kata-kata nah kalau mimin ada makanya langsung mau membagikan Ilmunya, Oke mari kita ke Topiknya.

1.Masuk ke blog kalian masing-masing
2.Klik Tata Letak
3.Tambahkan Gadget
4.Klik HTML/JAVASCRIPT
5.Copy kode di bawah ini untuk mempermudah.

<style>
#aboutme {
  background-color:#fff;
  -moz-box-shadow:0 0 3px #e0e0e0;
  -webkit-box-shadow:0 0 3px #e0e0e0;
  box-shadow:0 0 3px #e0e0e0;
  border:1px solid #666;
  padding:3px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  margin:0 auto;
  margin-top:15px;
  padding:10px;
  width:248px;
  height:auto;
}
.name-author {
  margin:0 0 7px;
  display:block;
  width:100%;
}
.name-author h3 {
  position:relative;
  display:inline;
  background-color:#FF0000;
  color:#FFF;
  font-family:Segoe UI;
  font-size:15px;
  font-weight:bold;
  margin:0 0 0 -3px;
  padding:3px 5px 3px 10px;
  width:100%;
  -moz-text-shadow:0 1px 0 black;
  -webkit-text-shadow:0 1px 0 black;
  text-shadow:0 1px 0 black;
}
.name-author h3:after {
  content:" ";
  width:0;
  height:0;
  position:absolute;
  left:100%;
  top:0;
  border-width:13px;
  border-style:solid;
  border-color:transparent transparent transparent #FF0000;
}
@-webkit-keyframes name-author {
  100% {color:white}
}
@-moz-keyframes name-author {
  100% {color:white}
}
@-keyframes name-author {
 100% {color:white}
}
/* Penerapan efek pada element yang akan diberi efek*/
.name-author h3 {
/* Waktu 10 detik */
  animation:10s infinite name-author linear;
  -webkit-animation:10s infinite name-author linear;
}
.aboutme-text {
  font-size:12px;
  text-align:left;
  margin:0;
}
.aboutme-image-container {
  float:left;
  width:70px;
  height:70px;
  margin-right:75px;
        z-index:1;
}
.aboutme-image-container {
  margin:-20px 0 5px 0;
  padding:9px;
  position:relative;
  -webkit-border-bottom-right-radius:10px;
  -webkit-border-bottom-left-radius:100%;
  -moz-border-radius-bottomright:100%;
  -moz-border-radius-bottomleft:100%;
  border-bottom-right-radius:100%;
  border-bottom-left-radius:100%;
  -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  background-color:#59B52E;
}
.aboutme-image-container:before {
  content:' ';
  position:absolute;
  top:0;
  left:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 10px 10px;
  border-color:transparent transparent #333 transparent;
}
.aboutme-image-container:after {
  content:' ';
  position:absolute;
  top:0;
  right:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:10px 0 0 10px;
  border-color:transparent transparent transparent #333;
}
.aboutme-image-container img {
  width:100%;
  height:100%;
  border:2px solid yellow;
  border-radius:100%;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  transition:all 0.3s ease;
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
.aboutme-image-container img:hover {
  border:2px solid GOld;
  cursor:pointer;
  margin-left:0;
  -moz-transform:scale(1.2) rotate(360deg);
  -webkit-transform:scale(1.2) rotate(360deg);
  -o-transform:scale(1.2) rotate(360deg);
  -ms-transform:scale(1) rotate(-360deg);
  transform:scale(1.2) rotate(360deg);
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
</style><div id='aboutme'>
<div class='aboutme-image-container'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGc6cTWMgCzTnEG0I6ayLNFGWzbrQDDvGjmhEeuqHLQI7bSJRLsb0-QUARucD-Et7Q2ewUZajX-BP1P5ZaLeHM1Ce1qB0-kvELXr8C5DYafS7xdN5IMA9h8LJSowCX7pOloc6-mmgCBxO/s1600/blogger-content-640x426.jpg" />
</div>
<div class='name-author'>
<h3>ADMIN Blogriby</h3></div>
<div class='aboutme-text'>Sekedar memberikan ilmu yang bermanfaat bagi semua orang :)<a href="https://plus.google.com/u/0/112419452049188148731" style="color: #666;"> G+</a>
</div></div>

Keterangan:

  1. Kode warna Merah adalah Url Photo
  2. Kode warna Biru adalah nama profile
  3. Kode warna orange adalah kata-kata
  4. Kode warna Hijau adalah Url akun Gmail
6.Klik Simpa/Save
7.Scroll ke bawah untuk melihat Profile G+ yang sudah jadinya.

Sekian Ilmu dari saya semoga bermanfaat bagi kalian semua :D

Salam blogger

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )