Tips Blog | Tutorial Blog | Belajar Blog

Monago Blogger Template

monago1 Kembali lagi dengan blogger template, kali ini saya beri nama Monago Blogger Template. Asal usul nama ini saya ambil secara acak saja, untuk arti jelas tidak ada sama sekali. Monago Blogger Template memiliki 1 kolom sidebar di sebelah kanan, 3 kolom di bagian footer, 2 page navigasi (menu di bagian atas template), banner di sebelah kanan header dengan ukuran 468 x 60.

 

Sementara untuk related posts atau artikel terkait sengaja tidak saya pasang di template ini karena selera pengguna yang berbeda-beda, ada yang suka dan ada pula yang tidak suka sehingga kerepotan untuk menghapus widget tersebut. Untuk yang lain-lain tidak banyak yang istimewa, hanya warna putih dibagian utama template, hitam sebagai background body. Dan widget popular posts yang sudah saya modifikasi sehingga bentuknya yang lebih baik ketimbang widget popular posts yang tidak di modifikasi, bisa dilihat di demo template.

 

Monago

Vudion Blogger Template

vudion Vudion blogger template adalah lanjutan atau variasi dari template azure yang baru saja saya publikasikan. Secara garis besar kedua template ini sama, hanya saja ada beberapa bagian yang mengalami penambahan dan pengurangan. Salah satunya adalah jumlah kolom dalam Vudion yang berjumlah 3. Di Vudion saya hapus navigasi halaman yang ada di bawah postingan, karena ada beberapa sobat blogger yang masih kebingungan cara mengaturnya, maka dari itu saya kembalikan ke bentuk standart.

 

Saya juga mengganti header dan footer dengan warna sedikit lebih tua dibanding Azure. Link navigasi juga saya pindah diatas header menyesuaikan bentuk background template. Dan beberapa bagian seperti border, post footer dan title sidebar saya ubah sedikit. Semoga tertarik !

 

Vudion

Azure Blogger Template

azure Rasanya cukup lama juga saya tidak membuat template blogger, terakhir kali saya membuat jampete awal desember 2010. Sedikit semangat disela-sela kesibukkan saya mengurus mybloggerthemes.com, saya sempatkan membuat azure blogger template. Saya beri nama azure karena sesuai warnanya yaitu biru. ini menggunakan model magazine, saya coba tambahkan auto readmore, related posts with thumbnail, dan share button di setiap postingan.

 

Saya juga tambahkan social media icon (twitter dan facebook) dan banner 125 x 125 yang siap digunakan dan widget untuk banner ukuran 468 x 60 di bagian header. Footer columns yang menjadi andalan saya, juga saya masukkan di azure. Columns di bagian footer ini saya buat 100% dengan float tengah jadi jika manggunakan resolusi komputer yang besar maka bagian footernya akan tampak lebar sejajar dengan headernya.

 

 azure

Google Update Pagerank, Apa Benar?

google pagerank Apa benar google sudah update? saya juga masih ragu atau saya yang ketinggalan berita. Lama tidak melihat blog zone, blog yang sudah tidak terurus lagi, blog amburadul yang tidak jelas mau dibawa kemana ternyata naik peringkat jadi 4. Untuk mengecek kapan terakhir google update, sobat bisa melihat di http://googlepagerankupdate.com dan ternyata memang google terakhir update tgl 2 april 2010. Lalu kenapa blog zone naik jadi 4 ya? berarti google hanya melakukan update minor ! saya tanya sama teman saya si beben , aisss ternyata dia lagi bengong online sendirian di blognya kang rohman.Laughing

 

Bicara masalah pagerank, situasi jual beli link mungkin kembali memperhitungkan yang satu ini. Seperti biasa, blogger-blogger yang maniak uang kembali berseri-seri jika blog mereka naik pangkat, paid review dan jualan link jadi seru lagi.

 

Biar sajalah yang mau bisnis ya bisnis, yang mau iseng ya silahkan teruskan berkreasi untuk blognya. Selamat buat yang naik, yang turun jangan kecewa, kita tunggu update yang sesungguhnya dari google, biasanya beberapa minggu setelah minor google akan update keseluran.

Tutorial Singkat CSS Box Shadow

Tutorial Singkat CSS Box Shadow

Kembali lagi dengan pelajaran seputar css, dan kali ini saya akan berikan tutorial singkat tentang css box shadow. Box shadow ini dapat sobat gunakan pada kotak postingan, sidebar atau dapat juga sobat gunakan sebagai pemanis dalam artikel blog sobat. Seperti contoh dibawah ini :

 

Support Firefox, Safari, Chrome, Opera dan IE9


kode css untuk contoh diatas adalah : 

#contoh {

-moz-box-shadow: 10px 10px 5px #222;

-webkit-box-shadow: 10px 10px 5px #222;

box-shadow: 10px 10px 5px #222;

}

 

Adapun 4 bagian yang terdapat dalam box shadow adalah :

  • Horizontal offset : Jika nilainya positif maka bayangan akan berada disebelah kanan kotak, dan jika negatif maka bayangan akan berada disebelah kiri kotak.
  • Vertikal offset : Jika nilainya positif maka bayangan akan berada dibawah kotak, dan jika negatif maka bayangan akan berada diatas kotak.
  • Blur radius : Jika nol maka akan seperti bayangan biasa, dan jika nilainya semakin besar maka bayangan akan tampak menjadi blur.
  • Warna dari bayangan

 

Berikut 6 contoh css box shadow yang bisa sobat pelajari dan gunakan :

 

A
B
C
D
E
F

 

Kode css untuk ke-6 contoh box shadow diatas adalah :

 

#Contoh_A {
-moz-box-shadow: -5px -5px #222;
-webkit-box-shadow: -5px -5px #222;
box-shadow: -5px -5px #222;
}

 

#Contoh_B {
-moz-box-shadow: -5px -5px 5px #222;
-webkit-box-shadow: -5px -5px 5px #222;
box-shadow: -5px -5px 5px #222;
}

 

#Contoh_C {
-moz-box-shadow: -5px -5px 0 5px #222;
-webkit-box-shadow: -5px -5px 0 5px #222;
box-shadow: -5px -5px 0 5px #222;
}

 

#Contoh_D {
-moz-box-shadow: -5px -5px 5px 5px #222;
-webkit-box-shadow: -5px -5px 5px 5px #222;
box-shadow: -5px -5px 5px 5px #222;
}

 

#Contoh_E {
-moz-box-shadow: 0 0 5px #222;
-webkit-box-shadow: 0 0 5px #222;
box-shadow: 0 0 5px #222;
}

 

#Contoh_F {
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

 

Jika sobat ingin menambahkan box shadow pada kotak postingan sobat, maka cari saja kode seperti di templates sobat :

 

.Post {����������dst

}

 

kemudian tambahkan salah satu kode diatas sehingga hasilnya kurang lebih akan seperti ini :

 

.post {��������;

-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

 

Bagaimana jika bayangan berada didalam kotak (inner shadow), yang harus sobat tambahkan hanya kode inset pada setiap bagian, contoh :

 

F

 

dan kodenya adalah :

 

#Contoh_F {
-moz-box-shadow: inset 0 0 5px 5px #222;
-webkit-box-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;
}

 

Css box shadow bekerja sempurna pada browser mozilla firefox, untuk browser lain hanya beberapa saja yang dapat berfungsi dengan sempurna. Semoga bermanfaat .. tetap belajar ya biar tambah pintar  smile_wink