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.
Selasa, 31 Maret 2015
Home »
Tutorial Blogging
» Cara Menambahkan Widget Aboutme Keren
Cara Menambahkan Widget Aboutme Keren
-
Sejak didirikan pada 1975 di Amerika Serikat, Microsoft memiliki banyak unit bisnis. Tak hanya sistem operasi dan perangkat lunak ( softwar...
-
hay sobat,,nih saya kasih lagi tutorial untuk membuat Html sederhana. Pada bagian ini kita akan langsung mencoba membuat halaman HTML ...
-
Print disini untuk mencetak keluaran (output ) yang ingin kita cetak. Nah Print itu sendiri ada 3 macam dalam pemograman yaitu Print, Printl...
-
Belajar Java pastinya harus memilih IDE yang pas agar belajarnya lebih mudah. IDE merupakan kepanjangan dari Integrated Development Enviro...
-
Ohayuu semuannya, bisa nulis lagi nih ceritanya. Oke pada postingan kali ini saya ingin memahas sebuah program warung sederhana menggunakan...
0 komentar:
Posting Komentar