Pages

Bank Mega Syariah Cabang Semarang

Persahabatan Yang Membuat Kami Lebih Kuat dan Selalu Berada Didepan

Rapat Dinas Kenaikan Kelas

Kekompakan dan Kebersamaan Menjadikan Sebuah Kekuatan Yang Luar Biasa

Lomba Nasyid Rohis Unisbank Semarang

Alhamdulillah Tim Nasyid SMA Negeri 6 Semarang Juara 1 Tingkat Jawa Tengah dan DIY

Pembelajaran Moving Class

Menciptakan Proses Pembelajaran TIK Yang Berbasis Kolaboratif dan Konstruktivisme

Tour Wisata Ketep - Yogyakarta 2012

Bersama Siswa Saat Liburan Kenaikan Kelas Tahun Pelajaran 2011/2012

Semangat Bekerja dan Berkarya

Alhamdulillah Mendapat Beasiswa S2 Kepengawasan Sekolah dari Kemendikbud

Rabu, 23 Januari 2013

Membuat Header Blog


Membuat Header Blog dengan Gambar

Header pada sebuah situs baik itu berjenis blog atau website di ibaratkan wajah pada manusia. ketika seorang pengunjung yang masuk ke sebuah blog maka yang pertama kali dilihat adalah Header. Oleh karena itu elemen ini merupakan bagian yang cukup penting dari keseluruhan blog. Apabila tampilan header blog anda kurang menarik atau malah terkesan acak-acakan, maka kemungkinan kecil pengunjung akan betah/simpati terhadap blog anda. Tampilan Header para blogger di blogspot bermacam-macam, ada yang menggunakan header apa adanya (default), ada juga dengan memakai gambar yang sudah didesign sebelumnya. Itu tergantung selera anda.
Nah, kali ini saya akan membahas bagaimana cara membuat header blog dengan gambar, caranya adalah :
  1. Log in ke blogger > Rancangan> elemen laman.
  2. Pada elemen Header klik link EDIT. 
  3. Pada jendela konfigurasi Header terdapat row isian untuk : Judul blog, Deskripsi blog, Gambar, dan penempatan gambar. 
  4. Isi Judul blog dan deskripsi blog, jangan lupa judul dan deskripsi anda termuat keyword utama dari blog anda. 
  5. Pada bagian gambar pilih Browse mengupload gambar Header dari komputer anda. 
  6. Untuk menghasilkan gambar yang sesuai dengan tampilan template blogger anda aktifkan tanda periksa Susut kan agar sesuai. 
  7. Atur lah posisi gambar dengan memilih posisi penempatan sesuai dengan keinginan anda, ada tiga opsi penempatan, yaitu Di balik judul dan keterangan, selain judul dan keterangan, dan Tempatkan keterangan setelah gambar. Karena kali ini kita akan menjadikan gambar diletakkan di depan judul blog dan deskripsi dan tertutup oleh gambar, maka aktifkan pilihan kepada “selain judul dan keterangan”. 
  8. Selain mengambil gambar pada komputer, anda juga bisa mengambil gambar secara link, dan anda bisa memanfaatkan media hosting save dan share salah satunya adalah: http://imageshack.us/

Contoh-Contoh Tampilan Template


Contoh 10 Template Top

Bagi anda yang mau mengganti template blog-nya dengan template modern, disini saya sediakan beberapa template yang didalamnya sudah ada : slideshow, Jquery pun mudah di tambahkan. Silakan lihat dulu dengan mendekatkan kursur ke gambar, gambar akan membesar. jika cocok ya silakan download aja.

1. Snatch

2. Styled

3. Arowa 

4. Pharse

5. Lodge

6. Video



7. Deems

8. Primes

9. Cantare

10. NewsReport

Membuat Template Blog


Cara Mengganti Slideshow di Template XML

Selamat bagi anda yang telah memulai dan menetapkan untuk membuat blog, dan anda sudah punya blog sekarang. e....malah sudah berhasil mengganti template clasic dengan template XML (modern). Wah template yang baru sudah ada slideshow  (tampilan gambar bergerak bergantian). Tapi bagaimana cara mengganti gambar slide bawaan template dengan gambar kesayangan anda? Ok ikuti langkahnya berikut ini :
  • Siapkan  gambar yang menjadi kesayangan anda, upload ke server , contohnya : http://www.flickr.com . sebelum upload foto , daftar dulu kalau anda belum punya Acount di flickr.com. Ini hanya contoh saja, silakan anda upload  diserver  mana saja foto anda, pastikan alamat foto anda . ini  saya kasih  contoh foto yang saya upload di flickr.com:  alamat fotonya  sebagai berikut: http://farm6.static.flickr.com/5095/5559348203_99c60114fc.jpg
  • Masuk login ke blog anda
  • Tampilkan blog anda dengan View
  • Klik kanan gambar slide yang akan diganti, pilih  View Image
  • Akan tampil gambar dan alamat  gambar.
  • Copy alamat gambar, seperti contoh diatas ( warna merah )
  • Tinggalkan View dan Masuk ke area edit blog
  • Pilih Design - Edit HTML
  • Klik kursur di koding dan tekan F3 untuk mencari alamat gambar
  • paste kan tampilan F3, akan muncul tampilan seperti koding dibawah ini : 
    <div class='fp-thumbnail'><ahref='http://www.sma6semarang.com'>
    <img src='http://farm6.static.flickr.com/5230/5558179492_9128f6493e.jpg'/></a></div>
    Dari koding diatas  src='alamat gambar', sedangkan href='alamat link jika gambar di klik' alamat gambar diganti dengan alamat gambar anda yang telah diupload di server.Ok  selamat mencoba dan nikmati slideshow  yang telah anda isi dengan gambar-gambar kesayangan anda.