Navigasi

Jumat, 01 Maret 2013

3 Template Blogger dengan Desain Unik & Canggih





Posting ini agak special menurut saya, karena untuk pertama kalinya saya me-review dan share beberapa template Blogger unik, menarik, dan sangat modern dalam hal desain blog.

Banyak sekali template Blogger yang dishare secara gratis oleh para pembuatnya. Tentunya ada kekurangan dan kelebihan, tapi saat ini secara umum semua template Blogger memiliki karakteristik yg khas serta telah menggunakan CSS3 dan HTML5. Sebagian berhasil menerapkannya, sebagian lagi gagal karena berhadapan dengan masalah browser, sehingga dibutuhkan hack tambahan agar dapat ditampilkan dengan baik. Tapi adakah yang benar-benar maksimal penggunaannya sehingga menghasilkan desain yg benar-benar otentik, cantik, dan menarik? Ada!
3 Template Blogger yang saya share di bawah adalah sebagian dari template-template Blogger buatan sobat Andre 'Pandet' of urangkurai, yang ngaku "terjebak dalam dunia blogger" sehingga kalo tidur sering mimpiin kode-kode CSS, wkwkwkwk.... Peace! Template buatannya memang unik, karena memiliki desain lain dari yg lain, maksudnya ada banyak kekhasan dan bisa di bilang extraordinary banget. Dan yang jelas, CSS3, HTML5, javascript, dan Web Fonts benar-benar diimplementasikan secara maksimal.
Salah satu contohnya adalah penggunaan CSS Reset untuk menghandle dan menghindari inkonsistensi browser ketika menerjemahkan aturan-aturan CSS tertentu, misalnya line-height, margin, font-size pada judul (heading), dll. Mengapa? Karena masing-masing browser memiliki default presentasi tampilan berbeda-beda, sehingga dibutuhkan penyamaan 'persepsi' agar tampilan suatu halaman sama ketika ditampilkan oleh bermacam browser. Hal ini sangat dibutuhkan, terutama untuk struktur HTML5. Contoh lain lagi adalah pada font-font template, digunakan CSS font-face (@font-face).  CSS rounded corner tampaknya menjadi menu utama untuk mengatur dan membagi tampilan excerpt (rangkuman post) di halaman-halaman utama. Yang paling menarik adalah penggunaan CSS Transform pada tampilan header lengkap bersama menu dan search form, sehingga tampilan elemen-elemen header miring beberapa derajat. Ada banyak lagi penggunaan advanced coding lain yg tidak bisa satu per satu saya uraikan di sini.
Ketiga template sebenarnya hampir sama, dibuat untuk memberikan 3 alternatif skin atau theme dengan warna yg berbeda.
Ada sedikit problem ketika Opera digunakan untuk menampilkan halaman ketiga template ini, terutama ketika ditampilkan pada monitor/layar dengan lebar di bawah 1280px, tapi saya rasa tidak begitu masalah karena Opera adalah browser yg rajin update, sehingga akan segera menyelesaikan masalah ini.
Penasaran? Segera saja tengok 'demo' dan download template-template tersebut!

X6 Yellow Blogger Template

X6 Blogger Template

X7 Blue Black Blogger Template

X7 Blogger Template

X8 White Blogger Template

Pass (kalo diminta): buka-rahasia.blogspot.com
Yup, itu dia semua Blogger templates unik dan menarik yang saya review dan share. Silahkan dicoba dan review kembali bagaimana hasil penggunaan template blog tersebut pada blog sobat.
Have a nice Blogging!

Cara Membuat Gambar Berputar dan Membesar di Sorot Kursor


 
Gimana ? Seruuuuuu kan ?
Okey jika kamu tertarik untuk mencobanya silahkan simak dan lakukan langkah-langkahnya berikut ini:
1. Login terlebih dahulu ke Blogger

2. Selanjutnya Pilih Rancangan

3. Pilih Edit HTML

4. Cari kode </head>

5. Copy kode dibawah ini dan letakan tepat diatas kode </head>

Selanjutnya untuk bisa menampilkan Gambar Berputar dan Membesar di Sorot Kursor, sahabat copy kode dibawah ini pada halaman posting maupun sidebar blog.


<div id="sundaboy">
<a href="http://gratisfulltain.blogspot.com/"><img src="KODE GAMBAR" /></a></div>



Keterangan :

•    http://gratisfulltain.blogspot.com/ Ganti dengan Url yang dituju pada saat gambar diklick
•    KODE GAMBAR Ganti dengan Url Gambar milik kamu

Selanjutnya kamu coba lihat dulu hasilnya dengan klik Pratinjau dan kalau sudah yakin hasilnya maksimal maka Publikasikan dan selanjutnya terserahkamu

Kumpulan Widget Animasi Yang Lucu dan Keren Untuk Blog



Cara Memasang Widget Animasi Yang Lucu dan Keren di Blog -
Banyak hal yang dapat membuat sebuah blog dikatakan menarik, selain dari isi content atau postingan , ternyata ada hal - hal lain yang bisa membuat si blog terlihat lebih menarik dan tentunya banyak pengunjungnya. Nah selain postingan, disain dan animasi / pernak - pernik blog ternyata dapat meningkatkan performa dari suatu blog.. ga percaya ? cobalah anda berkunjung kesuatu blog yang disainnya polos hanya berisikan artikel saja kemudian bandingkan dengan blog yang berisi postingan menarik dengan disain yang menarik pula . Pasti kita akan lebih betah berlama-lama di blog yang berisi artikel menarik dan disain / animasi yang menarik itu bukan ? tentunya. Dan, memberikan efek animasi di blog itu ga sulit kok, dan pilihan animasinya pun beragam bergantung selera. . nah dibawah ini ada beberapa contoh widget animasinya. Kalo udah cocok, berikut langkahnya :

 Cara Memasang Widget Animasi Di Blog

1.Copy script yang ingin anda munculkan animasinya
2.Login ke Blog
3.Pilih Rancangan
4.Tambah gedget
5.Pilih edit html atau script,
6.Pastekan script tadi
7.Lalu save.. “pasti akan langsung  muncul animasi yang anda pilih tadi” 

selamat mencoba..

1.helicopter



<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="widget animasi lucu bergerak atau gif"  alt="animasi bergerak naruto dan onepiece"/></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

2. Ekspresi muka


<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/742/th/74214.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Ekspresi</a></center></small></div>
 
3. Kodok mata gede



<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/466/th/46606.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

4 Spiderman


<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/3/th/312.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

5.Pig


 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/110/th/11046.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

6. Muka senyum



<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/197/th/19769.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

7. monyet


<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/458/th/45845.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

 8.Doraemon


 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1031/th/103123.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

9.Spongebob


 <div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

10.Panda

 
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/212/th/21215.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

11.Monyet loncat


<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53966.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

12.Anime cewek


<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/228/th/22801.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

13.Saringgan


<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/712/th/71266.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

14.Naruto berubah


<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/656/th/65649.gif" title="My widget" alt="animasi  bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">My Widget</a></center></small></div>

15.Gajah loncat


<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget-Animasi</a></center></small></div>

16. Lumba lumba


<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget Animasi</a></center></small></div>

17.Kucing tidur


<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget Animasi</a></center></small></div>

18.Ayam betelur


<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020541.gif" title="Click to get more." /></a><small><center><a href="http://permathic.blogspot.com/2012/04/kumpulan-widget-animasi-yang-lucu-dan.html" target="_blank" title="Cara Memasang Widget Animasi">Widget</a></center></small></div>