Showing posts with label Kotak Admin. Show all posts
Showing posts with label Kotak Admin. Show all posts

Wednesday, 31 July 2013

Menampilkan Animasi pada Profile Blog





Jika anda ingin melihat sesuatu yang berbeda profile blog anda maka tidak ada salahnya anda mencoba tutorial dibawah ini gan...dijamin pasti ketagihan hehehehe makanan kalee....




Masuk blog anda
pilih TataLetak/Add Gadged
Pilih Html Javascript kemudian copas kode dibawah ini pada box yang tersedia


<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:400px;
  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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7WZNODq_ZaHUfyow7EmxvvGZt7SCoiJc1AUvWRFWIAvPCLNqcwu3iL-6cgrK4-5LUJ0hwwNM0aOqKMvp9h6ICUA5LSlf6IFO7brjHXMHxXYt-Lg7b1fFFaqiVy5g45YTQoSbuEYzlVBMN/s320/jokowi.jpg" />
</div>
<div class='name-author'>
<h3>Imron fhatoni</h3></div>
<div class='aboutme-text'>sang pengembara<a href="https://plus.google.com/u/0/112756918350798570373" style="color: #666;">...Read More</a>
</div></div>

Catatan : Warna Merah Ganti dengan URL Gambar  Profile Anda
               Warna biru dengan kata - kata anda
               Warna kuning dengan ID Google Plus Anda Atau bisa juga ID yang Lain

Hasil dari Kode diatas akan terlihat seperti ini...

Menambahkan Kotak Admin Dibawah Postingan Dengan Animasi Baru





Pada Postingan Ini saya akan membagikan sebuah tips menarik yaitu membuat kotak admin dibawah postingan dengan animasi terbaru caranya gampang sekali jika saudara ingin mencobanya silahkan ikuti langkah dibawah ini.....
                                   

Masuk blog saudara
pilih template/edit html
kemudian cari kode ]]></b:skin> gunakan ctrl + f untuk mempermudah anda
jika sudah ketemu copas kode dibawah ini tepat diatas tag ]]></b:skin>




#sigilabox { margin: 10px auto; background: #aaa; padding: 5px; float: left; border: 1px solid #333; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; text-shadow: 1px 1px 1px #000; -o-transition: all 2s ease-in; -moz-transition: all 2s ease-in; -webkit-transition: all 2s ease-in; } #sigilabox:hover { box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000; -moz-box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000; -webkit-box-shadow: -2px -2px 1px #555, 2px 2px 1px #555, 0 -0 15px #000; } #sigilabox h3 { font-size: 18px; font-weight: bold; color: #FF0000; margin: 0; } .sigila { height: 100px; overflow: auto; margin : 10px 0 10px 0; padding :10px; box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000; -moz-box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000; -webkit-box-shadow : -1px -1px 1px #000, 3px 3px 4px #444, 1px 1px 8px #000; border-radius: 10px; -moz-border-radius:10px; -webkit-border-radius:10px; background : #eee; background: -moz-linear-gradient(top, #aaa, #eee); background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#eee)); font-size: 14px; font-family: Arial; font-weight: normal; color: #000000; text-shadow: 1px 1px 1px #eee; } .sigila a { font-weight: bold; font-family: Times; color: #8B0000; text-shadow: 1px 1px 1px #000; text-decoration: none; } .sigila a:hover { color: #8B0000; } .sigila img { float: left; width: 90px; border: 3px solid #fff; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; padding: 2px; background: #ddd; opacity: 0.5; margin: 0 10px 2px 0; -o-transition: all 2s ease-in; -moz-transition: all 2s ease-in; -webkit-transition: all 2s ease-in; } .sigila img:hover { opacity: 1.0; -o-transform: scale(1.2) rotate(-30deg); -moz-transform: scale(1.2) rotate(-30deg); -webkit-transform: scale(1.2) rotate(-30deg); }


Cari Lagi kode <data:post.body/> gunakan ctrl + f  tentunya
jika sudah ketemu copas kode dibawah ini tepat dibawah tag  <data:post.body/>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="sigilabox">
<h3>Happy Blogging...</h3>
<div class='sigila'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDs63hyYrjOSDg5m2HUVu7JsXRrGonLyjt9yFC6StXXJbrvkzArJTLCS0OhitBRhhRNsjAWM-q9FMjORtDeQkVxgpVi_WJ6VxRs-8OHv9EhDEEpGHNPaLUrhQ2SEv67FQ4tqnwRmxxfhx/s320/jokowi.jpg
" title="Imron fhatoni"/>Ini Hanyalah Blog Sederhana yang membagi Informasi Seputar Dunia Blogging,Sebelumnya terima kasih atas kunjungan baik anda di blog ini dan Saya Berharap Saudara tidak keberatan untuk menyalurkan kritik dan saran saudara pada kotak komentar mengenai blog ini<br /><a href="http://informasibloger.blogspot.com/" target="_blank" title="Informasi Seputar Dunia Blogger">http://informasibloger.blogspot.com</a></div></div>
</b:if>  

 Catatan : Silahkan ganti kode berwarna merah dengan URL gambar sobat sendiri
               kode  <data:post.body/>  biasanya lebih dari satu nah untuk mempermudah anda silahkan dicoba       satu persatu tetapi biasanya penempatan yang tepat adalah dibawah kode  <data:post.body/> yang nomor 2
 atau juga yang nomor 3 silahkan disesuaikan saja gan dengan template yang saudara pakai....

Langkah terakhir simpan template anda kemudian lihat hasilnya.....
selamat mencoba semoga bermanfaat......