Masih ingat dengan artikel blog ini tentang Effect Tulisan 3D dengan CSS3 ??
dimulai dari part 1 trus dilanjut dengan part 2 nya.. 

Kini Final dari effect kedua trik tersebut ditambah satu effect lagi,
yang akhirnya membentuk sebuah kubah 3D seperti ini.


Atau bisi dilihat demo nya.


Sama halnya dengan trik sebelumnya, point penting nya hanya membulak-balik posisinya saja.
dengan mengatur SkewY dan SkewX nya, ditambah penempatan satu bentuk sisi lagi diatasnya.

Agar lebih mudah difahami baca lagi artikel blog ini tentang Effect tulisan 3D sebelumnya part 1 trus dilanjut dengan part 2 nya.

bagi yang sudah menerapkan trick ini sebelumnya,
ane sarankan agar menghapus kode/script yg sudah dipakai,
agar memudahkan dalam pengimplementasian nantinya.


Langkah 1
Masukan kode/script dibawah ini di atas kode ]]></b:skin> 
pada halaman Rancangan Edit HTML.

.cube {
        position: relative;
        top: 80px;
}
.rightFace,
.leftFace,
.topFace div {
        padding: 10px;
        width: 180px;
        height: 180px;
}
.rightFace,
.leftFace,
.topFace {
        position: absolute;
}
.leftFace {
        -webkit-transform: skewY(30deg);
        -moz-transform: skewY(30deg);
        background-color: #EEFC9B
}
.rightFace {
        -webkit-transform: skewY(-30deg);
        -moz-transform: skewY(-30deg);
        background-color: #9BFCDD;
        left: 200px;
}
.topFace div {
        -webkit-transform: skewY(-30deg) scaleY(1.16);
        -moz-transform: skewY(-30deg) scaleY(1.16);
        background-color: #FC9BFB;
        font-size: 0.862em;
}
.topFace {
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        top: -158px;
        left: 100px;
}

Langkah 2
Save template sobat, lalu masuk ke halaman Rancangan Elemen Laman.
dan tambahkan gadget HTML/Java Script jika sobat ingin memasang Effect tulisan 3D ini di sidebar.
dan jika sobat ingin memasang nya di postingan, sobat masuk pada kolom Edit HTML untuk menaruh kode nya.
Dan inilah kode pemanggil dari kode diatas yang sudah dipasang :

<div class="cube">
<div class="topFace">
<div>
Isi conten dari sisi atas
</div>
</div>
<div class="leftFace">
Isi conten dari sisi kiri
</div>
<div class="rightFace">
Isi conten dari sisi kanan
</div>
</div>

Isikan conten yang sobat kehendaki dengan mengganti tulisan/kode diatas pada
Baris 4 untuk isi conten di sisi atas.
Baris 8 untuk isi conten di sisi kiri.
Baris 11 untuk isi conten di sisi kanan.

Langkah 3
Save.. lalu lihat hasilnya.
Effect nya akan membentuk sebuah kubah 3D.


Oya sobat juga dapat berkreasi sendiri dengan mengedit atau mengutak atik kode CSS nya
pada langkah pertama, baik itu kode warna, ukuran widht atau pun yang lain nya.

Selamat mencoba dan berkreasi..
Semoga bermanfaat.

Alhamdulillah masih diberi nikmat semangat..
Semoga nikmat ini memotifasi diri ini untuk selalu bersyukur Kepada-Nya..
Amin..

Mengulas recent posts atau artikel terbaru dan berbagai macam bentuk dan kreasinya,
kali ini ane akan berbagi model recent posts generasi ke (mungkin) 206.. karena sangking banyaknya..
yaitu recent post accordion..

Bingung ?? langsung saja lihat demonya..


Selain dapat menampilkan artikel terbaru dari semua artikel blog kita, juga dapat menampilkan
artikel berdasarkan category yang kita inginkan.
Selain itu dapat juga menampilkan artikel-artikel blog teman kita di blog kita..

Cara memasang nya cukup mudah..
Hanya dengan memasukan semua kode/script dibawah ini ke sebuah gadget HTML/Java Script

Kode/Script 1

<style type="text/css">
#acrec-post{
 font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#333;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3x6DPhiOZv2J3ex5kgqEwatQsef_4leGuOE-kCBsUoIscg8P9IPg6EG_swVTybxIrDEgDC79Xa9NxOivfMnEi8C7qgpT5_DULiEr803rYhzco8OD9wzIR2ZT7PWik3LQ2OM99-M_FNc/d/bg5.gif) repeat-y scroll left center #E7F7FB;
 padding:2px 0;
 border:1px solid #339DC6;
}
.acrecpost-label{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuEidj-Qd0uwZG7WtcMqmfu2qTsWhgY3y7e7myR0dpMRQ6uR1RMznWgq2DpNgO04PNLR-qoGAaI7C3h_0FzqjObPljEU3HFd9yG0_6ME4q6nBMkfZ5_x8bsrejCFNW-2pLkF8qRyuXvro/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
 font-weight:bold;
 line-height:1.4em !important;
 overflow:hidden;
 vertical-align: baseline;
 margin: 1px 3px;
 outline: none;
 cursor: pointer;
 text-decoration: none;
 padding: 2px 10px;
 color: #FFF;
 text-shadow: 0 1px 1px rgba(0,0,0,.3);
 border:1px solid #2F94BA;
}
.acrecpost-label:hover{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElUcJja4gQt-VEHqQvZ6jXLq4sHI-VU1lQC2QzEy3bClmxJlSMdpfZr646uwrFTf5cV7tEKAAutIuZiJybAmocdRLZFwLi010WKf09GdLfw2P6T63HwrR0aBpL7F0jgMwwgFZf9Roh9c/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
 color:#003366;
}
#acrecpost{
 overflow:hidden;
 line-height:1.3em;
 margin:1px 3px !important;
 padding:2px !important;
 border:1px solid #339DC6;
 background-color:#FFF;
}
#acrecpost li{
 height:65px;
 padding:5px;
 list-style:none;
}
#acrecpost .news-title{
 display:block;
 font-weight:bold;
 margin-bottom:4px;
 font-size:11px;
}
#acrecpost .news-text{
 display:block;
 text-align:justify;
 padding:0 5px 0 70px;
}
#acrecpost a{
 text-decoration:none !important;
 color:#FF0000;
}
#acrecpost img{
 float:left !important;
 margin-right:5px !important;
 padding:4px !important;
 border:solid 1px #339DC6;
 width:55px !important;
 height:55px !important;
}
</style>

Terus.. tambahkan kode dibawah ini tepat dibawah kode diatas..

Kode/Script 2

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Script diatas adalah merupakan script loader framework jQuery, jika sobat sudah pernah
memasangnya pada template sobat, maka Kode/Script 2 diatas tidak perlu disertakan..

Kode/Script 3
Tambahkan kode/script dibawah ini setelah script diatas.

<script type="text/javascript" src="http://daftarisi-girant.googlecode.com/files/accrecpost-pack1.js"></script>
<script style="text/javascript">
var numposts = 10;
var numchars = 200;
</script>

Perhatikan angka 10 dan 200 diatas.

• angka 10 pada var numposts adalah untuk menentukan jumlah artikel yang akan ditampilkan.
• angka 200 pada var numchar adalah untuk menentukan jumlah karakter yang akan ditampilkan.

Rubahlah angka-angka diatas sesuai keinginan sobat..

Kode/Script 4
Tambahkan pula kode/script dibawah ini setelah kode/script 3 diatas.

<script src="http://agoezimoetz.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>

Rubahlah kode/script yg berwarna merah dengan URL blog sobat.
Sava gadget dan lihat hasilnya..

Nb.

---

Jika sobat ingin menampilkan artikel berdasarkan category/label di blog sobat,
sobat cukup mengganti script pada kode/script 4 dengan script dibawah ini :

<script src="http://agoezimoetz.blogspot.com/feeds/posts/default/-/label?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>

Script yg berwarna kuning adalah script tambahan,
gantikan label dengan label yg ada di blog sobat..

contoh yang ane gunakan pada demo diatas adalah hanya menampilkan artikel dari label Tips n Trick
Maka script yg digunakan pada kode/script 4 nya adalah seperti ini :

<script src="http://agoezimoetz.blogspot.com/feeds/posts/default/-/Tips n Trick?orderby=published&amp;alt=json-in-script&amp;callback=accrecentpost"></script>

Selamat mencoba..
dan Semoga bermanfaat..

Setelah melihat grafik diatas, ternyata benar prediksi ane slama ini..
Bahwa tidak ada yg bermutu di blog ini.. !!

Hampir seminggu lebih sengaja berdiam diri,
Kini ane tau kelebihan dan kekurangan blog ini..

Mudah-mudahan ini menjadi motifasi untuk lebih segalanya tuk kedepan nya.. Amiin.

Dan untuk semua yg masih sempet nyempetin kemari Karena isi dari blog ini,
Bukan karena merasa memiliki hutang kunjungan,

Terimakasih banyak buat semuanya..