Cara Mudah Membuat Widget Profile Keren Pada Blog

Widget profile default biasanya sangat simple dan kurang menarik untuk dilihatnya. Jadi biar profile kita terlihat menarik dan keren untuk dilihat, tentu harus ada sedikit perubahan. Gimana, apakah sobat mau photo profilenya terlihat keren atau biasa-biasa saja? Jika mau terlihat keren, kita langsung saja kenalan sama cara mudah membuat widget profile keren pada blog, mangga disimak!

Baca juga cara mudah membuat tombol share keren dibawah postingan ala Copasange

1.Sobat login dulu ke Blogger

2. Pilih Tata Letak ► Tambah Gadget

3. Pilih HTML/JavaScript

4. Masukkan kode dibawah ini ke dalam kolom HTML/JavaScript

<style>

#aboutme {

background-color:#fff;

-moz-box-shadow:0 0 3px #59B52E;

-webkit-box-shadow:0 0 3px #59B52E;

box-shadow:0 0 3px #59B52E;

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:250px;

height:auto;

}

.name-author {

margin:0 0 7px;

display:block;

width:100%;

}

.name-author h3 {

position:relative;

display:inline;

background-color:#59B52E;

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 #59B52E;

}

@-webkit-keyframes name-author {

0% {color:white}

20% {color:Orange}

40% {color:pink}

60% {color:Orchid}

80% {color:gold}

100% {color:white}

}

@-moz-keyframes name-author {

0% {color:white}

20% {color:Orange}

40% {color:pink}

60% {color:Orchid}

80% {color:gold}

100% {color:white}

}

@-keyframes name-author {

0% {color:white}

20% {color:Orange}

40% {color:pink}

60% {color:Orchid}

80% {color:gold}

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:#6fc0f3;

}

.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/AVvXsEjHmHn6ykgh9svo4zaYDKfC5N5-IyHIbWCjURz59Xlh4OhiLkQjNCE47jA9ywCvK_ZnHc0igmF57cGyWeBAAI4EuIuHPJ1XkWB4oY4HTXP049t59e0f3T1vcLcRZEGsSjVl14iEyj0DOEK-/s1600/logo+copasange.png" />

</div>

<div class='name-author'>

<h3>Copas Sange</h3></div>

<div class='aboutme-text'> Newbie yang baru belajar nge~Blog. So! Maaf aja jika blog ‘CS terlihat berantakan<a href="Masukkan URL Profile Sobat" style="color: #666;">...Read More</a>

</div></div>

Tulisan yang berwarna biru silahkan sobat ganti ; untuk ukuran lebar, URL photo, nama sobat serta URL profile sobat

5. Simpan dan lihat hasilnya

Selamat sob, sekarang profile sobat sudah terlihat sangat keren. Demikian cara mudah membuat widget profile keren pada blog, semoga dapat membantu dan bermanfaat. Terimakasih atas kunjungannya.

► Copas Sange ◄

Sobat sedang membaca artikel tentang Cara Mudah Membuat Widget Profile Keren Pada Blog. Jika sobat ada pertanyaan atau pesan mengenai artikel diatas, salurkan pada kolom berkomentar !! Dan untuk mendapatkan tambahan pahala, silahkan LIKE and SHARE ♂

<a href="http://copasange.blogspot.com/2016/05/cara-mudah-membuat-widget-profile-keren.html" target="_blank">Cara Mudah Membuat Widget Profile Keren Pada Blog</a>

:: Salam Blogger ! ::