Pada postingan kali ini saya ingin berbagi tentang cara menambahkan widget Aboutme keren. Nah baca juga ya postingan seebelumnya tentang Cara Mematikan Komputer secara cepat . Oke kita langsung saja ke TKP : heheheh
1. Masuk Blog kalian dulu, Blogger.
2. Pada dashboard , Kalian pilih "Tata Letak " lalu "add a gadget"
3. Setelah Jendela Gadget muncul , lalu kalian pilih " Html/Javascript", Lalu copas script di bawah ini lalu tempel di jendela baru
<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:270px;
height:auto;
}
.name-author {
margin:0 0 7px;
display:block;
width:100%;
}
.name-author h3 {
position:relative;
display:inline;
background-color:#0097BD;
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 #0097BD;
}
@-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:#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://www.facebook.com/photo.php?fbid=888102674587420&set=a.127483897315972.22985.100001630875095&type=1&theater" />
</div>
<div class='name-author'>
<h3>Vian V</h3></div>
<div class='aboutme-text'>Kenalin , Saya terlahir dengan nama Vian, ASli loh. cowok 20 tahun ini cukup ganteng dan friendly loh, suka belajar komputer dan seluk beluknya dan juga suka musik terutama gitar. kalian bisa tanya tanya deh soal komputer dan Musik sama saya di jamin asik deh hehehe<a href="https://plus.google.com/u/0/114082503123290482401/posts?tab=XX" style="color: #666;">...Read More</a>
</div></div>
Catatan : merah petama kalian pilih warnanya terserah,
merah yang kedua letak / URL foto kalian
merah yang ketiga nama Kalian, nama google kalian juga bisa
merah ke empat Link kalian bisa pakai google plus kalian
Mudah kan. Selamat mencoba.
-
keyboard tidak berfungsi Kalau keyboard tidak befungsi, maka kita bisa menggunakan keyboard on screen. Caranya : masuk ke start&...
-
Nah alhamdulillah ada waktu buat postingin lagi beberapa tutorial dan Tips hehehe. Untuk postingan sekarang tentang cara membuat Physical...
-
Nah sedikit artikel nih tentang komputer Built Up dan Rakitan. Karena tadi baru beli komputer, dan masalahnya adalah komputer yang saya cari...
-
Mungkin tips kali ini sudah bukan zamannya untuk dibahas karena dipostingan blog - blog lain jika kalian mensearch kata kunci Cara Mengata...
-
haii semua. alhamdulillah masih bisa diberikan kesempatan untuk posting hehehe. Oke kali ini saya ingin berbagi tips tentang komputer nih...
0 komentar:
Posting Komentar