Variasi Icon Pada Judul Sidebar

Pernah melihat blog yang judul sidebarnya memiliki variasi icon yang berbeda antara satu widget dengan widget lainnya?

Memang sepertinya sedikit cukup menarik apabila setiap judul di sidebar mempunyai icon yang berbeda karena sejatinya judul disidebar tidak mempunyai icon, atau apabila mempunyai icon, icon tersebut akan sama anatara widget yang satu dengan widget yang lainnya.

Agar judul sidebar anda mempunyai icon yang bervariasi, maka ada sedikit trik yang harus anda lakukan.

Bagi anda yang tertarik namun belum mengetahui caranya, berikut kang rohman akan memberi gambaran bagaimana agar anda bisa dapat memasang icon favorit anda pada judul sidebar.

 

#1 Pilih Icon Favorit anda

Silahkan persiapkan icon favorit milik anda atau jika belum mempunyai koleksi icon anda bisa mendownloadnya secara gratis di internet. sedikit referensi, kang rohman pernah posting beberapa penyedia icon gratis, silahkan anda baca pada artikel Free Icon Untuk Blog Dan Website atau pada artikel

Cari icon  di IconFinder.

 

Sebagai contoh, beberapa icon yang kang Rohman pakai ;

 

   

 

Silahkan upload icon-icon tersebut ke hosting tempat biasanya anda menyimpan gambar, jika anda belum mengetahui bagaimana cara upload gambar, anda bisa membaca artikel kang Rohman tentang  Buat Logo & Image Button atau bisa juga anda baca artikel Upload gambar melalui blogger.

 

Berikut beberapa contoh alamat gambar (URL) icon yang telah kang di upload :

 

http://lh5.ggpht.com/_pt7i0nbIOCY/SxDF6E8cH-I/AAAAAAAACbU/qMNd6rY8owA/icontexto-user-web20-blogblogs_thumb%5B1%5D.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBPePmr99HbKZUalG3A9z36TrOfNpAUSUzrnlPf1mBxuD2juYNUvIU2HfOhHk91Yx6xmwCFxEfUxA81yE0FlikQNwpgMoyYmR2r83gYXb9jf3PrIr_xz8Em8ZNcqmXR6jdpVPHbBERcUU/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbq5O_X8oKg04jB4z0UdG6cnMR0DE5IHy557O2lFyNSLamHjd_Ia2PgusGCfYRKhVumrN2oDg_r-Qal8bNur2-mDpURsYI_1DN5EZAe04dKhOBcDRolAx8pamPWnrnRkkOnYm7wy6Gp1c/

 

Silahkan anda sesuaikan berapa jumlah icon yang ingin anda pasang. Sebagai contoh akan diterangkan untuk memasang 3 icon saja.

 

#2 Mencari Kode Widget Sidebar

Langkah kedua yaitu mencari tahu kode widget di dalam template anda, mana yang ingin di pasang icon. Berikut langkah-langkahnya :

 

• Silahkan login ke blogger dengan ID anda.
• Klik Tata Letak.
• Klik tab Edit HTML

• Carilah kode yang mirip-mirip seperti ini :

  <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
  <b:widget id='Label1' locked='false' title='Categories' type='Label'/>
  <b:widget id='HTML2' locked='false' title='Friend Llinks' type='HTML'/>
  <b:widget id='HTML1' locked='false' title='Sponsors' type='HTML'/>
  <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

• Setiap blog pasti berbeda kodenya, makanya kang Rohman tulis yang mirip dengan kode diatas. Copy kode tadi pada pada note pad atau sejenisnya.

Dari contoh diatas, blog kang Rohman mempunyai 5 widget, dan yang penting harus anda perhatikan adalah yang tercetak merah  dan orange yaitu :

 

• Profile1   -    About Me
• Label1    -    Categories
• HTML2   -   Friend Llinks
• HTML1  -   Sponsors
• BlogArchive1  -  Blog Archive

Yang dicetak merah adalah ID dari widget dan yang dicetak orange adalah judul widget atau judul yang ada di sidebar.

Sebagai contoh, kang Rohman hanya akan memasang pada widget  dengan ID Profile1, Label1, serta HTML2.

 

#3 Membuat kode CSS

Langkah ke tiga adalah membuat kode CSS untuk ID widget yang tadi (Profile1, Label1, serta HTML2). Property yang di buat cukup sederhana, yaitu anda hanya menambah h2 pada ujungnya, contoh :

 

#Profile1 h2 { }

#Label1 h2 { }

#HTML2 h2 { }

 

Untuk value nya, anda bisa berkreasi sendiri sesuai dengan keinginan, namun sebagai contoh, value nya misalkan seperti ini :

 

#Profile1 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#Label1 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#HTML2 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}

 

Untuk URLGambar tentunya harus anda ganti dengan URl gambar anda, namun sebagai contoh kang Rohman akan memakai URL gambar yang sudah di tulis di artikel bagian atas, sehingga kodenya akan seperti ini :

 

#Profile1 h2{
background:transparent url(http://lh5.ggpht.com/_pt7i0nbIOCY/SxDF6E8cH-I/AAAAAAAACbU/qMNd6rY8owA/icontexto-user-web20-blogblogs_thumb%5B1%5D.png) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#Label1 h2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBPePmr99HbKZUalG3A9z36TrOfNpAUSUzrnlPf1mBxuD2juYNUvIU2HfOhHk91Yx6xmwCFxEfUxA81yE0FlikQNwpgMoyYmR2r83gYXb9jf3PrIr_xz8Em8ZNcqmXR6jdpVPHbBERcUU/) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#HTML2 h2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbq5O_X8oKg04jB4z0UdG6cnMR0DE5IHy557O2lFyNSLamHjd_Ia2PgusGCfYRKhVumrN2oDg_r-Qal8bNur2-mDpURsYI_1DN5EZAe04dKhOBcDRolAx8pamPWnrnRkkOnYm7wy6Gp1c/) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}

 

#4 Memasang kode CSS

Karena tadi sudah mendapatkan kode CSS yang di perlukan, maka langkah terakhir adalah memasang kode CSS tadi ke template anda, berikut langkah-langkahnya :

 

• Silahkan login ke blogger dengan ID anda.



• Klik Tata Letak.



• Klik tab Edit HTML



• Carilah kode ]]></b:skin>



• 
  

  Copy lalu paste kode berikut diatas kode tadi ( namun ingat! widget ID serta URL gambarnya harus anda ganti sesuai dengan blog anda )

  
  
  

   

  
  
  

  #Profile1 h2{
  background:transparent url(http://lh5.ggpht.com/_pt7i0nbIOCY/SxDF6E8cH-I/AAAAAAAACbU/qMNd6rY8owA/icontexto-user-web20-blogblogs_thumb%5B1%5D.png) no-repeat scroll left center;
  padding:8px 8px 2px 40px;
  margin-top:15px;
  }
  #Label1 h2{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBPePmr99HbKZUalG3A9z36TrOfNpAUSUzrnlPf1mBxuD2juYNUvIU2HfOhHk91Yx6xmwCFxEfUxA81yE0FlikQNwpgMoyYmR2r83gYXb9jf3PrIr_xz8Em8ZNcqmXR6jdpVPHbBERcUU/) no-repeat scroll left center;
  padding:8px 8px 2px 40px;
  margin-top:15px;
  }
  #HTML2 h2{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbq5O_X8oKg04jB4z0UdG6cnMR0DE5IHy557O2lFyNSLamHjd_Ia2PgusGCfYRKhVumrN2oDg_r-Qal8bNur2-mDpURsYI_1DN5EZAe04dKhOBcDRolAx8pamPWnrnRkkOnYm7wy6Gp1c/) no-repeat scroll left center;
  padding:8px 8px 2px 40px;
  margin-top:15px;
  }

  
  



• Klik tombol SIMPAN TEMPLATE



• Selesai.

Ternyata mudah sekali bukan?

Tambahan, agar tampilan icon cocok dengan kondisi template anda maka anda bisa mengubah nilai padding atau margin nya.

padding:8px 8px 2px 40px;

margin-top:15px;

 

Selamat Mencoba!

Kontak Form dengan Google Docs

Satu tahun yang lalu kang Rohman pernah menulis tentang Cara membuat Contact form / Kontak Kami dengan menggunakan layanan dari emailmeform.com. Setelah mengunjungi beberapa blog baik itu yang di dalam negeri ataupun luar, ternyata sekarang banyak yang menggunakan kontak form yang dibuat dari google docs.

Nah, bagi anda yang tertarik ingin membuat kontak form dengan menggunakan Google Docs namun tidak mengetahui caranya, berikut kang Rohman terangkan langkah-langkahnya :

 

• Silahkan login ke Google docs dengan ID gmail anda.
• Klik Tombol drop down  “ Create New “, lalu pilih “ Form “.

  

• Klik tombol “Theme: Plan” jika anda ingin memilih tampilan form sesuai dengan keinginan, atau jika tidak ingin memilih theme tinggal abaikan saja.
• Gantilah tulisan “ Untitle Form “ dengan tulisan yang anda inginkan, misal : Kontak kami. Isilah kotak yang ada di bawahnya dengan tulisan yang anda inginkan, misal : Untuk menghubungi kami, silahkan isi form di bawah.
• Silahkan anda pikirkan, elemen apa saja yang ingin anda buat. Contoh sederhana yang sering di buat dalam sebuah kontak form adalah “ Nama, Email, Subjek, Pesan “ untuk menambah elemen baru, anda tinggal klik tombol “ Add item  “ yang ada di bagian kiri atas.
• Untuk membuat form isian sesuai dengan keinginan, Isilah kotak Question Title dengan yang diinginkan, contoh : Nama. Help Text boleh di isi atau di kosongkan, Question Type pilih “Text”. Centang kotak kecil di samping tulisan “Make this a required quetion” jika anda menginginkan agar form tersebut harus di isi oleh pengirim pesan. Klik tombol “ Done “ jika form yang ini sudah selesai.

  

• Untuk membuat form isian lain, anda tinggal menambah elemen baru dengan cara klik tombol “ Add item “ lalu isi dengan keinginan anda. Untuk question type, sesuaikan dengan kebutuhan.
• Jika semua form yang diingkan sudah selesai dibuat, Silahkan klik tombol “More Action” lalu pilih “ Edit Compirmation “, isilah dengan ucapan yang diinginkan. Tulisan tersebut adalah tulisan yang akan muncul ketika pengunjung selesai mengirim pesan. Contoh tulisan : Terima kasih telah menghubungi kami, Kami akan berusaha sesegera mungkin untuk membalasnya. Klik tombol “ Save “ jika sudah selesai.

  

• Klik kembali tombol “More Action”, lalu pilih “Embed”. Copy kode yang di berikan, lalu paste pada “Note pad” ataupun text editor lainnya. Kode tersebut adalah kode yang nanti harus di pasang pada blog anda.
• Selesai.

Cara pasang Kontak Form pada blog

Setelah anda mendapatkan kode kontak form dari google docs, langkah selanjutnya adalah memasang kode tersebut pada blog anda.

Berikut langkah singkatnya :

 

• Silahkan login ke blogger dengan ID anda
• Klik Entri baru
• Beri judul posting anda, contoh Kontak Kami.
• Pindahkan tab penulisan ke Edit HTML
• Copy paste kode kontak form yang tadi di dapat dari google docs
• Klik tombol Terbitkan Entri.
• Selesai.

Contoh nyata kontak form yang kang rohman buat adalah seperti kontak form di bawah ini :

Untuk memeriksa pesan yang masuk, anda tinggal login ke google docs, lalu lihat pada file yang anda buat tadi.

Sedikit tambahan, contoh kode yang didapat dari google docs :

<iframe src=http://spreadsheets.google.com/embeddedform?key=tdWoV2dYiv-4sCe4-5kOr width="760" height="783" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

Agar lebar serta tinggi kontak form sesuai dengan blog anda, ubahlah nilai angka yang kang rohman cetak merah.

Selamat mencoba!

Navbar Blogger Transparan

Salah satu yang dirasa sedikit mengganggu dari sebuah tampilan blog diblogspot adalah dengan hadirnya navbar blogger yan berada paling atas pada halaman blog, oleh karenanya banyak dari blogger yang sengaja menghilangkan navbar tersebut dengan berbagai cara, ada yang menghilangkan langsung navbar tersebut ada juga yang memakai teknik auto hide atau jika disorot barulah navbar tersebut muncul.

Menghilangkan navbar blogger hingga saat ini masih jadi wacana antara boleh atau tidak boleh hal tersebut dilakukan karena dianggap melanggar TOS yang ditetapkan blogger. Rupanya pihak pengembang blogger sedikit peduli akan hal tersebut, terbukti dari ditambahkannya koleksi navbar berbentuk transparan. Ada dua model dari navbar transparan ini yakni Transparent Light  ( transparan terang )  serta transparent dark ( transparan gelap).

 

 

Sebenarnya navbar ini tidaklah seratus persen transparan namun termasuk semi transparan. Dengan hadirnya navbar transparan ini diharapkan dapat lebih menyatu dengan desain template anda.

Bagi yang mau mencoba berikut cara menambahkan navbar transparan diblog anda :

 

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak
3. Klik tab Elemen halaman
4. Klik Edit pada elemen navbar

   

5. Pilihlah navbar transparan yang anda sukai ( transparan gelap atau terang )

   

6. Tekan tombol “ SAVE “ atau “ SIMPAN “

7. Selesai.

Yang mau mencoba navbar transparan, silahkan!

Pasang Iklan di bawah posting

Seperti yang diinformasikan pada posting terdahulu, bahwa blogger sekarang telah mempunyai sistem read more sendiri, oleh karena itu semua posting kang Rohman terdahulu yang berhubungan dengan kode read more yang lama menjadi usang atau out of date, sehingga artikel-artikel tersebut harus diperbaharui atau di update. Salah satu postingan yang telah usang tersebut adalah tentang cara memasang iklan di bawah posting. Kenapa kang Rohman langsung menyoroti hal ini? ini di karenakan pada posting tentang sistem read more bloger yang baru kemarin ada beberapa komentar yang bernada khawatir bahwa apabila memakai sistem read more baru blogger maka iklan yang di pasang di bawah setiap posting akan terganggu.

Satu yang harus di ingat adalah teknik ini tidak hanya untuk memasang iklan saja tapi bisa juga memasang banner, pesan, informasi subscribe serta yang lainnya yang ingin di pasang dibawah posting. Yang perlu di ingat pula yaitu iklan atau pesan yang terpasang tidak akan tampil dihalaman depan, namun akan tampil dibawah setiap posting apabila pembaca meng klik link "Read more" atau baca "selengkapnya" atau dengan kata lain artikel anda di baca secara keseluhan.

Teknik yang dipakai adalah sebagai berikut, biasanya kode untuk posting adalah seperti ini :

 

<div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

atau ada juga yang seperti ini

 

<div class='post-body entry-content'>
      <p><data:post.body/></p>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

 

Dua-duanya sama saja karena kode tambahan <p>…</p> itu adalah kode html untuk "paragrap" atau dengan kata lain agar kode posting mempunyai paragrap yang berbeda dengan yang lain.

 

Untuk memasang iklan atau pesan atau apapun sesuai keinginan anda di bawah posting, maka anda hanya perlu menambahkan kode tambahan seperti ini :

 

<div class='post-body entry-content'>
      <data:post.body/>

      <b:if cond='data:blog.pageType == "item"'>

     <p> Kode iklan, banner, pesan atau apapun di pasang disini! </p>

     </b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

 

Nah, ternyata gampang bukan. jadi anda tidak perlu khawatir dengan sistem read more baru blogger, karena kita bisa beradaptasi.

 

Namun ingat, beberapa kode iklan seperti kode iklan adsense, adbrite dan yang lainnya tidak bisa langsung di pasang disitu tapi harus di parse terlebih dahulu seperti yang pernah kang Rohman terangkan dahulu pada posting tentang  Pasang Iklan Google Adsense di Bawah Posting.

 

Masih bingung tentang cara pasang iklan di bawah posting, berikut sebagai gambaran agar lebih gampang di praktikan :

 

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik Tab Edit HTML. lalu backup dahulu template anda.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "

   

5. Carilah kode yang mirip seperti Ini :

   
   

   <div class='post-body entry-content'>
         <data:post.body/>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>

6. Silahkan tambahkan kode yang di cetak dengan warna merah serta hijau;

   <div class='post-body entry-content'>
         <data:post.body/>

         <b:if cond='data:blog.pageType == "item"'>

        <p> Kode iklan, banner, pesan atau apapun di pasang disini! </p>

        </b:if>

   <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>

7. Klik tombol SIMPAN TEMPLATE
8. Selesai.

Untuk teknik yang berhubungan dengan read more yang baru, mudah-mudahan bisa diposting berikutnya.

Trik agar bisa Upload Gambar Ukuran besar di blogger

Trik agar bisa upload gambar ukuran besar di blogger -  Dalam postring kemarin sudah di tulis bagaimana mendapatkan hosting gambar yang unlimited bandwidth, yaitu dengan memakai blogger. Namun, ada sedikit yang membuat tidak nyaman yaitu kita tidak bisa posting atau upload gambar yang ukurannya lebih dari 400 pixel, karena apabila kita upload gambar yang ukurannya lebih besar dari 400 pixel maka secara otomatis gambar tersebut akan di perkecil menjadi 400 pixel.

Apakah ada trik agar bisa upload gambar ukuran besar di blogger? jawabannya ada dan terbilang sangat mudah. Penasaran? begini caranya :

 

• Silahkan upload gambar yang berukuran lebih dari 400 pixel ke blogger.
• Jika gambar sudah tampil di blog anda, klik kanan pada gambar tersebut lalu pilih Copy Image Location untuk mendapatkan alamat gambar tersebut.
• Paste pada program text editor seperti "Notepad", "WordPad' atau text editor lainnya. Contoh : alamat gambar yang kang Rohman dapatkan seperti ini :

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGm6QwBElthyphenhyphenHhqR1t2muXbzATU0PnEOTo7biGmZSbaCcFWupymwDdt8VzWEzQIv2tthZHwzuA265e90pSWgaLIc51SPNjjX6hIj7WN6ve0w-8d0uPb_Xo-dadaYa1wUSTONcxmt3Hw16n/s400/blog-aing.jpg

• Perhatikan kode yang saya cetak merah, kode tersebutlah yang membatasi gambar besar yang kita upload menjadi kecil. Agar gambar bisa tampil maksimal, maka kita hanya cukup mengubah nilainya menjadi s800 ( jika gambar yang di upload kurang dari 800 pixel ) atau di ganti dengan s1600 ( jika gambar yang di upload melebihi 800 pixel ). Contoh, kodenya jadi seperti ini :

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGm6QwBElthyphenhyphenHhqR1t2muXbzATU0PnEOTo7biGmZSbaCcFWupymwDdt8VzWEzQIv2tthZHwzuA265e90pSWgaLIc51SPNjjX6hIj7WN6ve0w-8d0uPb_Xo-dadaYa1wUSTONcxmt3Hw16n/s800/blog-aing.jpg

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGm6QwBElthyphenhyphenHhqR1t2muXbzATU0PnEOTo7biGmZSbaCcFWupymwDdt8VzWEzQIv2tthZHwzuA265e90pSWgaLIc51SPNjjX6hIj7WN6ve0w-8d0uPb_Xo-dadaYa1wUSTONcxmt3Hw16n/s1600/blog-aing.jpg

Mudah sekali bukan? mau bukti, silahkan klik link di bawah ini :

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGm6QwBElthyphenhyphenHhqR1t2muXbzATU0PnEOTo7biGmZSbaCcFWupymwDdt8VzWEzQIv2tthZHwzuA265e90pSWgaLIc51SPNjjX6hIj7WN6ve0w-8d0uPb_Xo-dadaYa1wUSTONcxmt3Hw16n/s400/blog-aing.jpg

 

Coba bandingkan dengan yang ini :

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGm6QwBElthyphenhyphenHhqR1t2muXbzATU0PnEOTo7biGmZSbaCcFWupymwDdt8VzWEzQIv2tthZHwzuA265e90pSWgaLIc51SPNjjX6hIj7WN6ve0w-8d0uPb_Xo-dadaYa1wUSTONcxmt3Hw16n/s800/blog-aing.jpg

 

Bandingkan juga dengan yang ini :

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGm6QwBElthyphenhyphenHhqR1t2muXbzATU0PnEOTo7biGmZSbaCcFWupymwDdt8VzWEzQIv2tthZHwzuA265e90pSWgaLIc51SPNjjX6hIj7WN6ve0w-8d0uPb_Xo-dadaYa1wUSTONcxmt3Hw16n/s1600/blog-aing.jpg

 

Format kode gambar di atas adalah apabila anda mengupload gambar langsung melalui post edtor blogger. Apabila anda mengupload melalui Windows Live Writer seperti yang biasa kang Rohman lakukan, maka format gambar yang di hasilkan adalah seperti ini :

 

http://lh4.ggpht.com/_pt7i0nbIOCY/SoFHgGjyQ8I/AAAAAAAACNk/FmS36kH8k3U/blog-aing_thumb%5B2%5D.jpg?imgmax=800

 

Terlihat bahwa gambar yang di tampilkan di batasi hanya 800 pixel, agar mendapatkan gambar yang maksimal, cukup dengan mengubah angka 800 dengan angka 1600, sehingga kodenya jadi seperti ini :

 

http://lh4.ggpht.com/_pt7i0nbIOCY/SoFHgGjyQ8I/AAAAAAAACNk/FmS36kH8k3U/blog-aing_thumb%5B2%5D.jpg?imgmax=1600

 

Trik mengubah nilai pixel ini berlaku juga untuk posting gambar secara umum, anda hanya perlu masuk dulu ke edit HTML, lalu ubah kode pixelnya.

 

 

 

Ternyata kita bisa upload gambar dalam ukuran besar ke blogger bukan?

 

Selamat mencoba!

Cari Hosting Gambar Unlimited Bandwidth? Pakai Blogger Saja!

Cari Hosting Gambar Unlimited Bandwidth? Pakai Blogger Saja! - Ingin mencari hosting gratisan untuk menyimpan gambar yang unlimited bandwidth? jangan pusing-pusing mencari ke sana kemari, pakai saja blogger! Bagaimana caranya? cara praktis adalah dengan membuat sebuah blog di blogger khusus untuk menyimpan gambar. Ini sudah lama kang Rohman lakukan terutama gambar yang di pakai untuk free template yang kang Rohman buat, karena semakin banyak template tersebut di pakai maka semakin besar bandwidth yang dibutuhkan.

Caranya sangat sederhana, buatlah sebuah blog untuk gallery gambar anda. Postinglah gambar yang anda butuhkan pada blog tersebut, kemudian untuk mengambil alamat URL gambar tersebut adalah seperti ini :

 

• Arahkan mouse komputer anda  ke gambar yang sudah di posting.
• Klik kanan, lalu pilih Copy Image  Location ( untuk fire fox ). ingat, bukan copy Link Location, tapi Copy Image Location.

  

• Kemudian paste pada pada text editor semisal "NotePad", "WordPad" atau yang lainnya. Contoh URL gambar yang di dapat seperti ini :

  http://lh5.ggpht.com/_pt7i0nbIOCY/Sny4dvqmvxI/AAAAAAAACM0/WqrFdWaarSw/me_thumb%5B1%5D.png?imgmax=800

  ( contoh format URL gambar di atas mungkin akan berbeda dengan milik anda nantinya karena saya memposting gambar tersebut dengan menggunakan Windows Live Writer )

Jika anda sudah mendapatkan URL gambar yang di butuhkan, tentu saja anda bisa menggunakannya di mana saja sesuai dengan keinginan dan kebutuhan anda.

 

Selamat mempunyai Hosting gambar gratisan yang unlimited bandwidth!

Tips Mengganti template Tanpa menghapus Widget

Banyak yang mengeluh ke kang Rohman tentang hilangnya widget yang telah di pasang ketika mengganti template. Terhapusnya widget ketika mengganti template memang menjengkelkan karena mungkin saja anda medapatkan widget tersebut dalam jangka waktu yang lama, oleh karena itu kang Rohman akan memberikan tips mengganti template tanpa menghapus widget yang ada.

Saran : coba lakukan tutorial di bawah ini pada blog percobaan anda, jika sudah benar-benar faham, silahkan lakukan pada blog asli anda.

Tanpa basi-basi karena sekarang kang Rohman kurang bisa berbasa - basi, yuk langsung saja ke langkah-langkahnya.

Langkah #1. Backup Template

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata letak
3. Klik tab Edit HTML

   

4. Klik Tulisan Download Template Lengkap Silahkan download file tersebut ke komputer anda

   
5. Proses backup template selesai. Ini dilakukan hanya untuk berjaga-jaga apabila anda mengalami masalah ketika mengganti template, anda masih punya backup template yang lama.

Langkah #2 : Backup Kode Widget  (ini yang paling penting).

1. Masih dalam posisi tab Edit HTML .

2. Copy semua kode widget yang anda punyai ke dalam program " note pad "  atau text editor lainnya. Kode widget biasanya di awali dengan kode <b:widget …… 
   
   Contoh kode widget milik kang Rohman :
   

   <b:widget id='HTML5' locked='false' title='Kirim Artikel Ke Email Anda' type='HTML'/>
   <b:widget id='HTML1' locked='false' title='' type='HTML'/>

   <b:widget id='HTML4' locked='false' title='' type='HTML'/>
   <b:widget id='HTML8' locked='false' title='Sponsor Kang Rohman' type='HTML'/>
   <b:widget id='HTML6' locked='false' title='Site Info' type='HTML'/>
   
   Kecuali kode widget yang seperti ini tidak usah di backup karena setiap template sudah ada ;
   
   <b:widget id='Header1' locked='true' title='… (Header)' type='Header'/>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
3. Proses backup kode widget selesai.

Langkah #3 : Mengganti template

1. Masih di posisi tab Edit HTML yang tadi.
2. Klik tombol Browse.. yang ada di bagian atas, pilih file template yang sudah anda download di situs penyedia template, kemudian klik tombol Unggah.

   

3. Akan ada peringatan bahwa Widget akan dihapus.

4. Klik tombol batal.

   

5. Tuju bagian bawah, cari kode untuk menempatkan widget. Biasanya kode untuk menempatkan widget di awali dengan kode <b:section ….  dan di akhiri dengan kode </b:section> .  Contoh :

   <b:section class='sidebar' id='sidebar' preferred='yes'>
   </b:section>

6. Copy lalu Paste kode widget yang tadi telah di backup pada Langkah #2 diantara kode untuk menyimpan widget. Contoh ; 

   <b:section class='sidebar' id='sidebar' preferred='yes'>
   <b:widget id='HTML5' locked='false' title='Kirim Artikel Ke Email Anda' type='HTML'/>
   <b:widget id='HTML1' locked='false' title='' type='HTML'/>
   <b:widget id='HTML4' locked='false' title='' type='HTML'/>
   <b:widget id='HTML8' locked='false' title='Sponsor Kang Rohman' type='HTML'/>
   <b:widget id='HTML6' locked='false' title='Site Info' type='HTML'/>
   </b:section>

7. Jika sudah yakin bahwa semua kode widget sudah di paste pada template yang baru, silahkan klik tombol SIMPAN TEMPLATE.

   

8. Selesai. Jika anda tidak melakukan kesalahan, semua widget lama anda tidak akan hilang.

Mudah-mudahan mudah untuk di fahami.