Cara Membuat Recent Post Blogger dengan 3D Efek CSS3

Kali ini saya akan membagikan tricks Cara Membuat Recent Post Blogger dengan 3D Efek CSS3 terbaru. Recent Post widget di blog saat ini memang cukup banyak kita ketahui cara-caranya dan berbagai efek, fitur telah yang di bagaikan kepada para blogger, tetapi berbeda dengan yang satu ini Recent post widget ini dibuat dengan CSS3 sehingga memperbaik design dan tampilan yang berbeda dengan CSS saja.

Kelebihan dari recent post dengan CSS3 ini yaitu mempunyai efek 3D dalam tampilannya dan design yang elegan sehingga membuat para pengujung tertarik dengan efek tersebut  Widget tersebut dapat dipasang di blogger sesuai sidebar anda. Untuk lebih jelas lihat demo berikut :

DEMO

Cara Memasang Recent Post With Efek 3D Di Blogger

1. Masuk ke akun blogger sobat > Template > EditHTML

2. Letakkan kode dibawah ini tepat di atas tag </style> atau </b:skin>

/* BASIC RESET */

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}



/* HTML ELEMENTS */

body { background-color:#F8F8F8; font:14px/21px Arial,Helvetica,sans-serif; }

h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #0066FF; text-shadow: 0px 2px 6px #00CCFF; }

h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #000; }

h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif;  text-align: center; color: #0066ff; text-shadow: 0px 2px 6px #b3d1ff; }

h2 a:hover { color: #ff9933; }



/* COMMON CLASSES */

.break { clear:both; }



/* WRAPPER */

#wrapper { width:960px; margin:40px auto; }



/* CONTENT */

#content { }

#content .info { padding:10px; }



/* RECENT POSTERS */

#recentposters { list-style:none; margin:100px 0; height:550px; }

#recentposters li { display:inline; float:left;

 -webkit-perspective: 500; -webkit-transform-style: preserve-3d;

 -webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }

#recentposters li:hover { -webkit-perspective: 5000; }



#recentposters li img { border:10px solid #fcfafa; -webkit-transform: rotateY(30deg);

 -moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888;

 -webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }

#recentposters li:hover img { -webkit-transform: rotateY(0deg); }



.recentinfo { border:10px solid #fcfafa; padding:20px; width:200px; height:180px; background-color:#deddcd; margin:-195px 0 0 55px; position:absolute;

 -moz-box-shadow:0 20px 40px #888; -webkit-box-shadow:0 20px 40px #888;

 -webkit-transform: translateZ(30px) rotateY(30deg);

 -webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s; }



#recentposters li:hover .recentinfo { -webkit-transform: rotateY(0deg); -webkit-box-shadow:0 5px 10px #888; margin:-175px 0 0 30px; }



.recentinfo h3 { color:#0033CC; font-variant: small-caps; font-family:Georgia,serif,Times; text-align:center; padding-bottom:15px; }

.recentinfo p { padding-bottom:15px; }

.recentinfo a { background-color:#0033CC; padding:5px 10px; color:#eee; text-decoration:none; display:block; width:80px; text-align:center; margin:0 auto;

 -moz-border-radius:5px; -webkit-border-radius:5px; }

.recentinfo a:hover, .recentinfo a:focus { background-color:#0066FF; color:#fff; }

Klik Save
3. Masuk ke Tata Letak dan tambah widget dengan html/javascript lalu masukan kode berikut

<div id="wrapper">
 <h1>3d animation using pure CSS3<small>Recent Posters Example</small></h1>
 <h2><a href="http://www.zuamsyah.id/" title="Visit Zuamsyah.id">Zuamsyah.ID</a></h2>
 <div id="content">
  <p class="info">Berikut ini adalah contoh dari animasi CSS3 cukup baik dan efek 3d Berikut ini adalah contoh dari animasi CSS3 cukup baik dan efek 3d. Menggunakan perspektif, mengubah dan sifat transisi, kita dapat membuat efek animasi 3d. Cukup arahkan kursor poster film di bawah ini untuk melihat efek di dalamnya penuh keindahan.</p>
  <p class="info">Pastikan Anda menjalankan versi terbaru dari browser berbasis WebKit (Apple Safari atau Google Chrome) untuk melihat efek.</p>
  <ul id="recentposters">
   <li>
    <img height="450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF1bhUNdirSeNzPFhrkdvnnlI-BKFDX4ReNg9GtHIE37Z42l3-qv0asLIBLSNyYEfymZo-78OMvZLUA-PDOr8_Nv7r626SIByIi1HzDQ8keOU7etKiQqceJwNRrqAYuQh4-Cz4N4f3hRhw/s320/01_iron_man_2.jpg" width="300" />
    <div class="recentinfo">
     <h3>Iron Man 2</h3>
     <p>Dengan dunia sekarang sadar kehidupan ganda sebagai superhero lapis baja Iron Man, miliarder penemu Tony ...</p>
     <a href="http://www.imdb.com/title/tt1228705/" title="Iron Man 2">More info</a>
    </div>
   </li>
   <li>
    <img height="450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGZYnqa6Kd7QkFUtse8hUJZs5l-bACSYPSal0eJXAAZwLS8KFn2mG0P0IeqcCOgB-Oi1jCXHzPZIHQqceeJlkH8y5hlQeUVlsdfPUZ8V3MsB6Z7m2_o5-yPLkRuRw7531qluOn8j7-_Ho/s320/02_the_last_airbender.jpg" width="300" alt="The Last Airbender" />
    <div class="recentinfo">
     <h3>The Last Airbender</h3>
     <p>Cerita mengikuti petualangan Aang, penerus muda untuk garis panjang Avatar, yang harus menempatkan nya ...</p>
     <a href="http://www.imdb.com/title/tt0938283/" title="Iron Man 2">More info</a>
    </div>
   </li>
   <li>
    <img height="450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG-IkiyEnfFVolNYG30Z8_4TonqX1W9zaXkdwzup80ljy7uyTXb_keplSrRaGOUF_NR5owW-NWKrPz4QKmZVpd2tWi8kScZL2fPm3B-wWpD4wy8wmy6vhro_Kuqa6aXFhO_70LhMrIN3yu/s320/03_tron_legacy.jpg" width="300" alt="Tron Legacy" />
    <div class="recentinfo">
     <h3>Tron Legacy</h3>
     <p>Sam Flynn, yang tech-savvy anak berusia 27 tahun Kevin Flynn, melihat ke hilangnya ayahnya dan menemukan ...</p>
     <a href="http://www.imdb.com/title/tt1104001/" title="Tron Legacy">More info</a>
    </div>
   </li>
  </ul>
 </div>
</div>

Note:
h3 = Judul post anda
p = artikel post anda
a href = link yang dituju
tittle = sam seperti h3
img src = link atau url gambar anda

4. Simpan. Selesai.