Assalmualaikum wr. wb.
selamat malam para Lucky's kembali lagi berjumpa dengan admin2,, kali ini saya mau posting tentang menambahkan widget ke blogspot..
masih membahas praktikum kali ini yaitu "buatlah blog sebagus mungkin" tentu anda semua pasti berpikiran bagaimana cara mempercantik blog...
sebenernya sihh banyak banget cara yang digunakan untuk mempercantik blog,, mulai dari design webpage dengan HTML, JS, PHP,CSS, dll sampai dengan cara instans yaitu
menambahkan widget dari google :
Tentunya di mbah google terdapat banyak sekali widget yang dapat kalian cari.. namun disini saya memposting widget yang harus ada dalm sebuah blog..
tentunya kami bertujuan untuk mempermudah para Lucky's,, ma'lum kami memang orang yang baik.. :p
oleh karena itu disini kami hanya memposting code JS-nya saja..
oke.. langsung aja:
1. code widget profile keren CSS
<style>
#aboutme {
background-color:black;
-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:black;
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=126085210902175=a.102556269921736.4751.100005020894330=1" />
</div>
<div class='name-author'>
<h3>Lucky Fitri Adhi</h3></div>
<div class='aboutme-text'>EXOTIC<br />
Exact One<br />
The Intelegent class<a href="http://lucky-komputer.blogspot.com/#" style="color: #666;">...Read More</a>
</div></div>
2. code widget Yahoo Messanger
<a href="ymsgr:sendIM?ID YM KAMU"> <img src="http://opi.yahoo.com/online?u=IDYMKAMU&m=g&t=14&l=us"/></a>
3. code widget hit counter
<div align='center'><a href='http://www.hit-counts.com'><img src="http://www.hit-counts.com/counter.php?t=MTI5MDIxNQ==" border="0" alt="lucky hit counter" /></a><br /><a href='http://www.hit-counts.com'>Free Hit Counter</a></div>
4. code widget page rank
<a href="http://www.mypagerank.net" target="_blank"><img src="http://www.mypagerank.net/services/pagerankbutton/pagerankbutton.php?aut=c5531d5db6a27f9b0f91eb8f54375b005d4a0d27b57be1542651308dd1e10eb5854a" border="0" alt="Google PageRank Checker Powered by MyPagerank.Net" /></a>
5. code widget animation bergerak
<div style="position: fixed; bottom: 0px; left: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="280" src="http://www.widgipedia.com/widgets/widgetindex/Welcome-animation-widget-indonesia-6979-8192_134217728.widget" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>
ahh.. saya rasa itu cukup yah...
sekian dulu para Lucky's Oyatsuminasai ... (-.- ) zzZZ
