.

Membuat Author Box Responsive Dengan Rotate Zoom

Author Box Responsive Dengan Rotate Zoom

Membuat Author Box Responsive Dengan Rotate Zoom shadows akan share untuk anda semua, tetapi sebenarnya ini atas permintaan dari seorang blogger dari benua eropa sana, yang ingin tampilan blog dia berpenampilan yang cukup baik dan ingin mengisi biografy mengenai dirinya, Maka saya share widget ini untuk dia pergunakan, anda juga bisa pergunakan ini widget karena bentuknya cukup elegant dan image rotate dan ada satu hal lagi nama author itu selalu dan setiap saat per 8 detik selalu berganti warna nah cukup kerenkan widget seperti ini.
Bagaimana keren bukan jika anda menginginkannya Membuat Author Box Responsive Dengan Rotate Zoom marilah kita lihat kode CSS3 dibawah ini :

1. Anggap saja anda sudah berada di blog sobat.

2. Klik Template > Edit HTML lalu pergunakan CTRL+F agar cepat pencarian cari ]]>
    </b:skin>

3. Lalu letakkan CSS ini tepat diatasnya.

/* Css Author Box */

#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;max-width:600px;height:auto;margin:5px;}
.name-author {margin:0 0 7px;display:block;width:100%;}
.name-author h3 {position:relative;display:inline;background-color:#E67E22;color:#FFF;font-family:Segoe UI; font-size:15px;font-weight:bold;margin:0 0 0 -3px;padding:3px 5px 4px 9px;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 #E67E22;}
@-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}}

/* Efek Element Author Box */

.name-author h3 {animation:8s infinite name-author linear;-webkit-animation:10s infinite name-author linear;}
.aboutme-text {font-size:14px;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:#F22613;}
.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:1px1px 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;}

4. Meletakkan kode HTML kita cari kode ini  <data:post.body/>  atau <p>
    <data:post.body/></p> tepat dibawahnya. Semua ada lima ambil yang ketiga
    atau sesuaikan template anda karena sebuah
    template tidak sama tata letaknya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='aboutme'><div class='aboutme-image-container'>
<img src='http://4.bp.blogspot.com/-6k4Mj5Xv82o/Vjo1ryPnmbI/AAAAAAAABKQ/3OTccAC7W7/s1600/nata.jpg'/></div>
<div class='name-author'><h3>Andre Lee</h3></div>
<div class='aboutme-text'>
~>> Enter Your Description Here <<~
</div></div>
</b:if>

 Keterangan : Warna merah ganti dengan url gambar anda.
                       Warna biru ganti dengan nama author anda.
                       Warna orange isikan kata anda sendiri.

Baca juga disini : http://shadows-k.blogspot.co.id/2015/11/related-post-thumbnail-dan-feedburner.html

Demikianlah Membuat Author Box Responsive Dengan Rotate Zoom yang telah saya share kepada anda semoga tampilan blog anda semakin lebih baik, dan juga bermanfaat untuk kedepannya jika ada pertanyaan silahkan komentar dibawah ini.

0 komentar:

Posting Komentar

> NO ~ Sara, Porno, Hujat, Provokasi, Hargailah Sesama.
> NO ~ Promo ( iklan ), Spam, Link Hidup, Akan Langsung Hilang
> Berkomentar Sesuai Topik Tidak OOT, Agar Kita Semua Bisa Berbagi.