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
Related Posts:
Cara Melihat Link Internal Dan External Di blog kita Postingan kali ini tentang Link di blog kita, Setelah postingan Sebelumnya tentang Mengenal Jenis - jenis Hosting Dan tingkatannya . Ada … Read More
Menampilkan Rating Bintang Di Google Search Postingan saya sebelumnya tentang Cara Melihat Link Internal Dan External Di Blog,Pada postingan Kali ini saya ingin berbagi tips tentang blog nih,,y… Read More
Cara Mengganti Older Post Dengan Deretan Angka Pada Postingan kali ini saya ingin berbagi tentang bagaimana caranya mengganti older post dengan angka2. pada postingan sebelumnya tentang Menampi… Read More
YouTube Fiddles With 4KYouTube pada hari Jumat mengumumkan bahwa mereka akan mulai mendukung Definisi 4K konten video Ultra High. YouTube resmi meluncurkan berita melalui Te… Read More
Cara Mendaftar GooglePing Cara mudah agar dapat Terindex oleh google adalah Daftar di GooglePing. Ini adalah cara Cepat agar blog kalian terindex di Search Engine Google… Read More
-
Sebelumnya Postingan saya yang Menambahkan 3000 Link Lebih , Pada tutorial kali ini saya akan membahas bagaimana mengetahui loading blog ki...
-
Pada postingan kali ini , saya ingin postingin bagaimana cara mudah mengatur waktu pada Laptop ato komputer kita yang memakai OS windows. N...
-
Mungkin kalian sangat terganggu dengan pengguna netcut yang jail karena sering memutuskan jaringan kalian atau koneksi Wifi maupun LAN, S...
-
Asus Chromebox Asus meluncurkan komputer mini Chromebox yang mengusung sistem operasi Chrome OS den...
-
keyboard tidak berfungsi Kalau keyboard tidak befungsi, maka kita bisa menggunakan keyboard on screen. Caranya : masuk ke start...
0 komentar:
Posting Komentar