all about my PC: TEMPLATE BLOGGER TEMPLATE A5 "SMOOTH SLIDE"

Pemirsah, kali ini penulis mencoba memodifikasi template asli blogger "sederhana" dan thema kali ini adalah 'smooth slide' maksudnya semua gerakan yang ada di template tersebut ditampilkan secara slide yang halus.

Gambar - Template a5

Template a5 ini diberi warna 'negative' kelabu dengan diberi sedikit kejutan background image header (judul blog) dengan sentuhan warna warni yang menyolok untuk sedikit menyegarkan suasana.

Sesuai dengan thema template ini yaitu smoothslide maka menu utama, side bar dan bottom bar bahkan tombol "kembali keatas" pun dibuat dengan smooth slide sehingga gerakan membuka dan menutup lebih alami. Khusus untuk tombol "kembali keatas" diberi animasi ( silahkan lihat demo blog ) sehingga membuat 'sedikit hiburan bagi pengunjung yang tadinya hanya tampilan seperti "hover - muncul dan lenyap" dirubah menjadi animasi bergerak "turun dan naik" pada kondisi tertentu .

Template a5 ini tidak akan 'kekurangan ruang' untuk gadget karena bisa di sisipkan di slide sidebar atau di slide bottom bar.

Sebenarnya slide yang tampil tersebut adalah hasil modifikasi tutotial slide dari situs http://www.developerdrive.com/, aslinya slide tersebut hanya berbentuk seperti di bawah ini :

S o u r c e C o d e


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
.square1
{
width:100px;
height:100px;
background:red;

transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */

transition-duration: 4s;
-moz-transition-duration: 4s; /* Firefox 4 */
-webkit-transition-duration: 4s; /* Safari and Chrome */
-o-transition-duration: 4s; /* Opera */

transition-timing-function: linear;
-moz-transition-timing-function: linear; /* Firefox 4 */
-webkit-transition-timing-function: linear; /* Safari and Chrome */
-o-transition-timing-function: linear; /* Opera */ 

}

.square1:hover
{
width:300px;
}

.square2
{
width:100px;
height:100px;
background:blue;

transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */

transition-duration: 4s;
-moz-transition-duration: 4s; /* Firefox 4 */
-webkit-transition-duration: 4s; /* Safari and Chrome */
-o-transition-duration: 4s; /* Opera */

transition-timing-function: ease;
-moz-transition-timing-function: ease; /* Firefox 4 */
-webkit-transition-timing-function: ease; /* Safari and Chrome */
-o-transition-timing-function: ease; /* Opera */ 

}

.square2:hover
{
width:300px;
}

</style>
</head>
<body>
<div id="div1" class="square1"></div>
<br/>
<div id="div2" class="square2"></div>
</body>
</html>

dan kemudian diubah dan disesuaikan menjadi "slide sidebar dan slide bottom bar" seperti yang anda lihat di demo dan bisa menampung banyak gadget atau menu tambahan lainnya.

So demikianlah pemirsah , mudah-mudahan template ini bisa memberikan inspirasi bagi semua orang terutama bagi basic blogger seperti saya misalnya untuk terus berkreasi push till the limit.

TEMPLATE BLOGGER TEMPLATE A5 "SMOOTH SLIDE"

Tidak ada komentar:

Posting Komentar