Si Efendi Membikin Blog: 2013

Monday 30 December 2013

Pasang Link di New Blogger Template

Menilik beberapa pertanyaan yang di ajukan beberapa sobat, rupanya masih ada yang berkeinginan lebih dalam hal membuat link walaupun sudah saya posting sampai dua artikel, terutama bagi yang memakai template baru alias new blogger template. Untuk memenuhi hasrat beliau-beliau ini, sengaja saya posting kembali mengenai membuat link dan mudah-mudahan dengan adanya postingan ini dapat menjawab beberapa keinginan yang belum terjawabkan.

Ok, saya mulai dengan membuat link yang bisa memunculkan window baru. saya ambil contoh blog yang ingin saya link sebanyak lima buah, yaitu :

http://copy-copy-copy.blogspot.com
http://hackerbpd.blogspot.com
http://xtkj2cmuahacker.blogspot.com
http://aas111.blogspot.com/
http://amen24.googlepages.com/koded%27treemenu

Untuk membuat kode link yang arah vertikal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
 
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
 
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
 
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
 
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Hasilnya akan seperti ini :

Rubrik Elektronik
Free blog template
Rotating banner blog
User Online status
Kode menu d tree

kode yang saya tuliskan di atas merupakan kode atau tag untuk memindahkan link ataupun tulisan berpindah satu line break kebawah. Jika sobat tidak memasang kode/tag tersebut, walaupun di tulis berjauhan ke bawah hasilnya akan berdempetan kepinggir. satu kode/tag adalah satu kali link berpindah kebawah, jika sobat ingin jaraknya lebih lebar, maka tambahkan tag tersebut beberapa kali, misal , atau , dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Untuk membuat kode link yang arah horizontal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
 
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
 
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
 
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
 
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Maka hasilnya akan seperti ini :

Rubrik Elektronik Free blog template Rotating banner blog User Online status Kode menu d tree

kode   yang saya tuliskan di atas merupakan kode untuk memindahkan link ataupun tulisan berpindah satu spasi ke samping. Jika sobat tidak memasang kode tersebut, walaupun di tulis berjauhan ke samping, hasilnya akan tetap berdempetan. satu kode   adalah satu kali link berpindah ke samping, jika sobat ingin jaraknya lebih lebar, maka tambahkan kode tersebut beberapa kali, misal    , atau     , dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Mudah-mudahan agak sedikit jelas. Ok, kita lanjut. Sempat ada yang menanyakan juga tentang yang memakai variasi abjad supaya terlihat lebih menarik. Kira-kira jawabannya melalui contoh saja.

Ambil contoh blog yang ingin di link adalah seperti berikut ini :

http://sncepuspiritualsciencequantum.blogspot.com --> Abu Amin
http://adry-fx.blogspot.com --> Adryy-fx
http://belati.blogspot.com --> Belati
http://benhardleroy.blogspot.com --> Benhard Journey
http://melileagroup.blogspot.com --> Capunk
http://catatanpojok.blogspot.com --> Catatan pojok

Untuk membuat link yang arah vertikal seperti ini :

:::A:::
 
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
 
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
 

:::B:::
 
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
 
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
 

:::C:::
 
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
 
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini :

:::A:::
Abu Amin
Adryy-fx

:::B:::
Belati
Benhard Journey

:::C:::
Capunk
Catatan pojok

Untuk membuat link yang arah horizontal seperti ini :

:::A:::
  
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
  
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
  

:::B:::
  
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
  
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
  

:::C:::
  
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
  
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

maka hasilnya akan seperti ini :

:::A::: Abu Amin Adryy-fx :::B::: Belati Benhard Journey :::C::: Capunk Catatan pojok

Pemakaian tag ... adalah agar karakter yang ada diantara tag tersebut menjadi tebal. Pemakaian tulisan :::A::: adalah karakter biasa yang ada di keyboard, jika ingin berbeda tinggal cari karakter lain yang menurut sobat lebih menarik.

Ada juga variasi lain agar tampak lebih menarik yaitu menambahkan bulatan.

contoh untuk arah vertikal :

<< A >>
 
• <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
 
• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
 

<>
 
• <a href="http://belati.blogspot.com" target="_blank">Belati</a>
 
• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
 

<< C >>
 
• <a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
 
• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini :

<< A >>
• Abu Amin
• Adryy-fx

<>
• Belati
• Benhard Journey

<< C >>
• Capunk
• Catatan pojok

Untuk arah horizontal :

<< A >>
 
• <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
  
• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
  

<>
 
• <a href="http://belati.blogspot.com" target="_blank">Belati</a>
  
• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
  

<< C >>
 
• <a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
  
• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Hasilnya akan seperti ini :

<< A >> • Abu Amin • Adryy-fx <> • Belati • Benhard Journey << C >> • Capunk • Catatan pojok

Bagaimana lebih menarik bukan?

Jika sobat mempunyai icon yang berukuran kecil dan ingin di tambahkan di depan link, ini bisa di lakukan dengan hanya mengganti kode • diatas dengan kode gambar yang sobat miliki. Sebagai contoh saya memiliki gambar dalam bentuk bulatan dan mempunyai alamat gambar sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif

Untuk menampilkan gambar ini tentu dengan kode untuk menampilkan gambar, yaitu :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif">

hasilnya akan seperti ini :

Jika melihat dari bentuknya, sepertinya terlalu besar maka saya akan mengakalinya dengan menambahkan kode untuk lebar dan tinggi gambar, maka kodenya misalkan jadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="12" hight="12" border="0">

hasilnya akan seperti ini :

Nah, tugas sobat hanya mengganti kode • diatas dengan kode ini :

misalkan :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="10" hight="10" border="0"> <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

Maka hasilnya akan seperti ini :

Abu Amin

Untuk membuat gambar serta cara upload sudah saya terangkan pada postingan terdahulu, silahkan baca saja ya.

Ada juga pertanyaan dari mba Ati mengenai cara pembuatan link gambar yang arah horizontal, jawaban saya, mba tinggal buat link untuk gambar dan menaruh kode   di antara gambar link tadi. misal saya punya alamat gambar butto seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif

http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif

Nah mba tinggal buat agar link gambar, bisa link ketulisan yang ada di blog mba atau mau link ke blog lain juga bisa, tinggal menuliskan alamat URL yang du ju oleh link tersebut, contoh jika saya ingin menghubungkan gambar button dengan blog milik saya yang lain :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif" border="0"></a>
  
<a href="http://www.rohman24.co.nr" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif" border="0"></a>

Hasilnya akan seperti ini :

jika ingin gambar buttonnya banyak, tinggal tambahkan saja dan jangan lupa sisipkam kode   agar ada jarak antara buttonnya.

Bagaimana sobat, sudah cape bacanya? pasti cape karena panjang banget, apalagi saya yang waktu ngetik postingan ini ampe lima jam depan komputer dan lebih sedihnya lagi kita belum sampe ke topik bahasan utama yakni memasukan kode link-link yang telah saya contohkan diatas ke dalam blog.

Yoi...sobat!!! Sekarang tiba waktunya kita memasukan kode-kode link yang telah kita buat kedalam blog. Dan tentunya seperti judul artikel diatas, langkah-langkah berikut berlaku bagi yang memakai template baru alias new blogger template :

Sig in di blogger dengan id sobat
Klik menu Layout
Klik menu Elemen Halaman
Klik tulisan Tambahkan sebuah Elemen Halaman
Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/javaScript, ingat jangan menggunakan yang untuk membuat daftar link
Beri judul link yang sobat kehendaki. contoh : link temanku :
Copy kode-kode link yang telah sobat buat lalu paste pada kotak yang tersedia
Klik tombol SIMPAN PERUBAHAN
Pindahkan elemen yang baru saja pada tempat yang sobat kehendaki
Klik tombol SIMPAN
Selesai.

Membuat Penggalan Artikel

Menanggapi pertanyaan sobat tanggo yang menanyakan perihal penggalan artikel dari rubrik elektronik yang katanya selalu muncul di atas posting artikel, maka dari itu kali ini saya akan membahas cara pembuatannya, barangkali ada dari sobat-sobat lainnya sama-sama tertarik atau kalau tidak tertarik, ya sekedar pengetahuan saja juga tidak ada ruginya kan.

Sebenarnya penggalan artikel di atas adalah bukanlah suatu tulisan hasil posting, akan tetapi hanya berupa tulisan biasa yang ujung kalimatnya di beri link untuk menuju ke artikel sebenarnya yakni artikel yang terdapat pada blog rubrik elektronik. Maksud pemasangan penggalan kalimat itu sebenarnya untuk membawa para pembaca ke blog saya yang satu lagi yaitu Rubrik Elektronik tadi, soalnya itu blog kan ada iklan google adsense nya, nah barangkali saja ada diantara para sobat sekalian yang mau berbaik hati meng klik iklan google adsense milik saya

cuma hiks.... hiks

masih dikit yang mau klik iklan aku

tapi ga apa-apa berarti belum rezekinya

(berarti ga ikhlas donk bikin tutorialnya kalo gitu

/ weith..... maaf bukan begitu maksud saya, jadi ga enak hati nih

).

Untuk membuat penggalan artikel seperti diatas, langkah pertama adalah mengcopy sebagian kalimat yang mau kita link, yang kedua adalah mencatat address dari artikel tersebut, nah ujung dari kalimat tersebut kita buatkan link. Agar tidak terlalu membingungkan saya beri contoh. Misalkan address dari artikel yang mau saya pasang linknya adalah sebagai berikut :

http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html

Isi dari penggalan kalimatnya adalah sebagai berikut :

Electronic Shopping

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them?

Maka kode yang kita buat adalah sebagai berikut :



<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>


<hr width="100%" align="left">


 
<br/>


Many Indonesians were still believing that products that in marketed 
overseas his quality was far more better than products that in marketed 
in the country. Around them many that were deliberate went overseas only
 a to shop. You some among them? <a 
href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read
 more...</b></a>


<hr width="90%" align="left"> 


<br/>

Kode tersebut hasilnya akan seperti ini :

Electronic Shopping

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? ...Read more...

Biar lebih faham, sedikit saya uraikan :

 .....  --> ini adalah kode untuk merubah warna text. #FD8403 merupakan kode warna orange.
.......< --> ini adalah kode untuk menampilkan huruf dalam ukuran font 6 (ukuran besar)
<hr width="100%" align="left"> --> ini adalah kode untuk membuat garis sebesar 100% dari lebarnya halaman blog yang dimulai dari tepi kiri.
  --> kode untuk membuat suatu kalimat pindah ke bawah sebesar satu line break.

Mudah-mudahan keterangan diatas dapat di pahami. Setelah kita membuat kode seperti yang di terangkan diatas, tugas selanjutnya yaitu memasukan kode tersebut kedalam blog. Tentunya ada perbedaan cara memasukan kode antara template klasik dengan template baru. Silahkan ikuti langkah-langkahnya :

Untuk template klasik :

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode HTML yang ada, kemudian save di komputer sobat. Ini untuk backup data apabila terjadi kesalahan dalam proses editting template

Cari kode seperti di bawah ini :



<div class="post"><a name="<$BlogItemNumber$>"></a>


         <BlogItemTitle>

Tempatkan kode yang telah kita buat tadi persis diatas kode diatas, sehingga kodenya menjadi :



<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span>


<hr width="100%" align="left">


 
<br/>


Many Indonesians were still believing that products that in marketed 
overseas his quality was far more better than products that in marketed 
in the country. Around them many that were deliberate went overseas only
 a to shop. You some among them? <a 
href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read
 more...</b></a>


<hr width="90%" align="left"> 


<br/>


<div class="post"><a name="<$BlogItemNumber$>"></a>


         <BlogItemTitle>

Klik tombol Preview untuk melihat perubahan yang baru di lakukan

Apabila sudah OK, klik tombol save Template Changes

Selesai.

Catatan : cara di atas tentunya merujuk kepada template asli buatan blogger.com, bagi pengguna template bukan buatan blogger tentu akan lain, yang perlu di ingat yaitu penempatan kode penggalan artikel adalah persis diatas kode untuk Posting artikel.

Untuk template baru :

Klik menu Layout

Klik menu Page Elements

Klik Add a Page Element

Klik tulisan ADD TO BLOG yang berada di bawah tulisan HTML/JavaScript

Copy paste kode penggalan artikel yang telah kita buat tadi

Klik tombol SAVE CHANGES

Klik kotak element yang baru di buat, tahan kemudian pindahkan di atas kotak yang bertuliskan Blog post (di drag & drop)

Klik tulisan View Blog untuk melihat hasil dari penambahan kode tadi

Bila sudah OK, klik tombol SAVE

Selesai.

Bagaimana penjelasannya sobat? mudah-mudahan dapat di pahami. Selamat mencoba !

Cara membuat kategori (label)

Menanggapi beberapa pertanyaan dari para sobat yang di ajukan baik melalui shoutbox, kotak komentar dan bahkan ada yang melalui yahoo messenger menyoal tentang bagaimana cara membuat kategori dari artiekl-artikel yang telah di posting. Memang betul, tentu dengan adanya pengkategorian atau pengelompokan artikel yang telah di posting oleh pemilik blog dapat lebih mempermudah bagi para pembaca untuk memilih artikel mana yang ingin dibaca.

Di blogger.com fasilitas ini sebenarnya sudah di sediakan, akan tetapi walaupun fasilitas tersebut telah tersedia tentu saja jika kita tidak mengetahui cara menggunakannya akan menjadi tidak berguna. Untuk membuat kategori, di blogger.com di kenal dengan istilah Label. Dengan adanya fasilitas ini kita sebagai pemilik blog hanya tinggal mengisi kotak label yang di sedikan pada setiap posting artikel, sangat simpel dan sederhana.

Agar tidak membingungkan, silahkan sobat lihat pada akhir postingan artikel ini. Disana ada tulisan seperti ini : Labels : Blog tutorial, membuat label. Nah berarti postingan ini termasuk ke dalam dua kategori, yaitu kategori Blog tutorial dan kategori membuat label. Untuk melihat fungsi dari label ini silahkan sobat klik label yang bertuliskan Blog tutorial, maka secara otomatis seluruh postingan yang saya beri label Blog tutorial akan di tampilkan dan siap untuk di baca oleh pengunjung.

Bagaimana cara membuat label?

Untuk membuat sebuah kategori atau label, sobat hanya tinggal mengisi kotak kosong di samping tulisan Label untuk postingan ini : (karena sekarang blogger sudah ada yang berbahasa indonesia) yang berada di bawah kotak tempat membuat artikel. Isi kotak tersebut dengan kategori yang kira-kiracocok untuk postingan yang kita buat. Contoh : liburan musim dingin. Satu postingan tidak hanya terpatok hanya pada satu kategori saja, akan tetapi satu postingan bisa mempunyai beberapa kategori. untuk membuatnya tinggal di pisahkan dengan tanda koma ( , )saja, misal untuk postingan artikel blog ini ada yang ber label Blog tutorial, blog tools, aksesori blog, karena postingan tersebut memang cocok dan masuk kedalam ketiga kategori tersebut.

Apakah kategori (label) bisa di tampilkan di sidebar?

Untuk sobat para pengguna template baru, Label (kategori) bisa di tampilkan di sidebar, dan biasanya element label ini sudah tersedia ketika baru memasang template. Jika element label belum tersidia, sobat bisa membuatnya sendiri, silahkan ikuti langkah - langkah berikut ini :

Sig in di blogger dengan id sobat

Klik menu Layout

Klik menu Elemen Halaman

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol yang bertuliskan TAMBAHKAN KE BLOG yang berada di bawah tulisan Label

Tulisan Labels di samping tulisan Judul bisa sobat rubah menjadi Kategori jika sobat mau merubahnya

Pilih radio button yang sobat inginkan di samping tulisan Menyortir, Alfabetik : jika kategori ingin di tampilkan sesuai dengan abjad alfabetik ( dari A --> Z ), Berdasarkan Frekuensi : jika kategori ingin ditampilkan sesuai dengan banyaknya label (kategori)

Klik tombol yang bertuliskan SIMPAN PERUBAHAN

Selesai.

Sangat mudah bukan?

Sedikit pengumumam, karena blogger sekarang sudah ada yang berbahasa indonesia, maka mulai sekarang dalam memandu mengikuti dengan memakai yang berbahasa indonesia.

Selamat mencoba !

Random Banner Header

Menjawab pertanyaan mba Ati beberapa hari yang lalu yang di ajukan melalui shoutbox mengenai cara membuat random banner header atau gambar banner yang ada di header bisa bergantian atau berubah-berubah. Sepertinya memang lebih menarik apabila banner yang ada di header bisa bergantian sehingga suasana akan lebih fresh karena tidak monoton seperti blog saya ini

, tapi tidak apa-apa, mungkin suatu hari nanti blog inipun headernya bisa bergantian

.

Untuk membuat random banner ada beberapa langkah yang harus sobat lakukan, yaitu :

Langkah pertama

Langkah pertama yang harus dilakukan tentunya sobat wajib membuat beberapa banner, bisa tiga, empat, lima, dan seterusnya tergantung dari keinginan sobat. Untuk membuatnya sobat bisa menggunakan program-program semisal adobe photoshop atau coreldraw serta kawan-kawannya yang lain. Akan tetapi karena saya tidak terlalu mahir masalah program untuk desain gambar, maka tidak akan saya terangkan cara pembuatannya. Jika sobat ingin berkonsultasi mengenai program adobe photoshop, silahkan kunujungi http://jaloee.blogspot.com miliknya kang jaloee, beliau ini pakarnya kalau masalah photoshop.

langkah kedua

Langkah kedua yang harus dilakukan adalah mengupload banner-banner tersebut pada hosting tempat menyimpan gambar, saya ambil contoh www.photobucket.com untuk cara upload pada situs ini sudah saya terangkan pada postingan terdahulu, jika masih bingung silahkan klik di sini.

Jika proses upload selesai, copy URl address banner-banner tersebut lalu paste pada program notepad guna nanti untuk di masukan kedalam kode/script yang akan saya berikan.

Langkah ketiga

Langkah ketiga yaitu memasukan script kedalam kode template yang sobat miliki. Script dasarnya adalah :

   <script type="text/javascript">

var banner= new Array()

banner[0]="bannerURL0"

banner[1]="bannerURL1"

banner[2]="bannerURL2"

banner[3]="bannerURL3"

banner[4]="bannerURL4"

banner[5]="bannerURL5"

banner[6]="bannerURL6"

banner[7]="bannerURL7"

banner[8]="bannerURL8"

banner[9]="bannerURL9"

var random=Math.floor(10*Math.random());

document.write("<style>");

document.write("#header {");

document.write(' background:url("' + banner[random] + '") no-repeat top left;');

document.write(" }");

document.write("</style>");

</script>

Terlihat diatas bahwa jumlah banner yang diberikan adalah 10 buah, akan tetapi jumlah ini tidak mutlak yaitu berapa saja yang sobat inginkan yang penting pada kode var random=Mat. jumlahnya harus sesuai dengan jumlah banner.

Lagi-lagi karena template blogger ada dua yaitu template klasik dan template baru maka untuk menempatkan kode/script akan berbeda, Sehingga pembahasannya pun akan saya bagi menjadi dua bagian. Sebelumnya saya akan memberikan contoh kode yang memuat banner yang sudah saya upload dan masing-masing memiliki URL addres sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif

http://i162.photobucket.com/albums/t253/rohman24/banner5.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif

http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif

dan contoh bannernya adalah sebagai berikut (gambar diperkecil) :

Contoh script dari banner-banner ini adalah :

   <script type="text/javascript">

var banner= new Array()

banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"

banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"

banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"

banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"

banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"

banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"

banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"

banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"

banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"

banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"

var random=Math.floor(10*Math.random());

document.write("<style>");

document.write("#header {");

document.write(' background:url("' + banner[random] + '") no-repeat top left;');

document.write(" }");

document.write("</style>");

</script>

Untuk caranya silahkan ikuti langkah-langkah berikut ini.

Sign in di blogger dengan id sobat
Klik menu layout
Klik menu Page Elements
Klik tulisan Add a Page Element
Klik tombol ADD TO BLOG di bawah tulisan HTML/JavaScript
Copy paste kode berikut kedalamnya

   <script type="text/javascript"> var banner= new Array() banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif" banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif" banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif" banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif" banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif" banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif" banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif" banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif" banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif" banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif" var random=Math.floor(10*Math.random()); document.write("<style>"); document.write("#header {"); document.write(' background:url("' + banner[random] + '") no-repeat top left;'); document.write(" }"); document.write("</style>"); </script>

Klik tombol SAVE CHANGES
Selesai.

Sekedar tambahan (padahal masih banyak

), kode diatas adalah sekedar contoh, silahkan ganti address bannernya dengan yang di miliki sobat.

Mungkin ada beberapa template yang di pakai sobat saat ini banner headernya tidak sesuai dengan keinginan sobat, sebenarnya ukuran tersebut bisa kita ganti. Contoh untuk template minima sebagai berikut :

 @media all { 

#header { 

width:660px; 

margin:0 auto 10px; 

border:1px solid #ccc; 

}

Pada kode diatas terlihat bahwa untuk lebar banner header sebesar 660p(width:660px;), nilai tersebut bisa kita rubah sesuai dengan keinginan. Dan untuk tinggi dari banner header tidak di definisikan, nah agar banner kita sesuai dengan keinginan maka kita harus menyelipkan kode tambahan sebagai definisi, contoh lebar yang di inginkan adalah sebesar 150px, maka kode yang di tambahkan adalah height:150px; sehingga kode di atas menjadi seperti ini :

 @media all { 

#header { 

width:660px; 

height:150px;

margin:0 auto 10px; 

border:1px solid #ccc; 

}

Untuk masing-masing template tentunya akan sangat berbeda, akan tetapi untuk template milik blogger, biasanya untuk bagian header di beri nama #header.

Untuk melihat contoh nyata dari efek script diatas, saya sudah membuat satu blog sebagai percontohan, blog tersebut sudah di pasang 10 banner seperti yang saya terangkan di atas, untuk melihat perubahannya sobat harus mengklik susuatu agar layar browser menjadi berubah baru, saya beri contoh dengan mengklik judul arsip atau yang lainnya. Untu melihat contoh silahkan lihat di sini

Selamat mencoba !!!!

Text Berjalan di Bar menu

Sobat Ochim beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan.

Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas.

Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya.

Untuk template klasik silahkan ikuti langkah-langkah berikut ini :

Klik menu Template

klik menu Edit HTML

Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula

Copy kode berikut ini lalu paste di atas kode </head>



<script language='javascript'> 

message = "Tulis text pertama yang ingin muncul disini ^" + 

"Tulis text kedua disini ^" + 

"Tulis text ketiga disini ^" + 

"Tulis text keempat disini ^" 


scrollSpeed = 130 

lineDelay = 0 


// Do not change the text below // 


txt = "" 


function scrollText(pos) { 

if (message.charAt(pos) != '^') { 

txt = txt + message.charAt(pos) 

status = txt 

pauze = scrollSpeed 

} 

else { 

pauze = lineDelay 

txt = "" 

if (pos == message.length-1) pos = -1 

} 

pos++ 

setTimeout("scrollText('"+pos+"')",pauze) 

} 

scrollText(0) 

</script>

Klik tombol Save Template Changes

Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template

Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates

Tunggu beberapa saat sampai proses selesai

Simpan kode berikut di bawah kode </body> , kode ini letaknya berada paling bawah sebelum kode </html>



<script language='javascript'> 

message = "Tulis text pertama yang ingin muncul disini ^" + 

"Tulis text kedua disini ^" + 

"Tulis text ketiga disini ^" + 

"Tulis text keempat disini ^" 


scrollSpeed = 130 

lineDelay = 0 


// Do not change the text below // 


txt = "" 


function scrollText(pos) { 

if (message.charAt(pos) != '^') { 

txt = txt + message.charAt(pos) 

status = txt 

pauze = scrollSpeed 

} 

else { 

pauze = lineDelay 

txt = "" 

if (pos == message.length-1) pos = -1 

} 

pos++ 

setTimeout("scrollText('"+pos+"')",pauze) 

} 

scrollText(0) 

</script>

Klik tombol SAVE TEMPLATE

Selesai

sedikit clue, pada kode diatas ada tulisan yang saya buat merah, nah tulisan tersebut harus sobat ganti dengan tulisan yang sobat inginkan. contoh : selamat datang di blog saya. atau apa saja yang menurut sobat layak untuk di tulis di situ. contoh yang saya berikan diatas memuat pesan atau text sebanyak empat tulisan, jika sobat ingin lebih banyak itu bisa dilakukan dengan menambah baris tulisan seperti kode sebelumnya.Untuk kode --> scrollSpeed = 130 . angka "130" merupakan kecepatan dari text berjalan, semakin kecil nilainya semakin cepat text berjalan, dan semakin besar nilainya maka text akan semakin lambat. Silahkan sesuaikan dengan keinginan sobat.

Selamat mencoba !!!

Pasang Recent Comments

Untuk membuat recent comment pada new blogger template tidaklah sulit, karena saat ini sudah ada Recent comments widget creator dari hans serta hackosphere yang bekerja secara otomatis, tugas sobat hanya login di blogger.com, pilih blog yang mau dipasang trus add widget, selesai. Sangat gampang tanpa harus bersusah payah menambahkan berbagai kode kedalam template sobat. Untuk membuatnya silahkan sobat klik tombol di bawah ini :

Rasanya kurang seru kalau artikelnya cuma begitu ya.
Ok, setelah sobat klik tombol diatas, maka nanti akan muncul gambar seperti ini :

Agar lebih jelas, silahkan ikuti langkah-langkah berikut ini :

Silahkan klik kotak di atas atau bisa juga klik di sini
Tulis judul Recent Comments dengan yang sobat inginkan. contoh : "komentar terbaru". atau biarkan saja juga boleh
Ganti nama beautifulbeta di samping tulisan http dengan nama blog sobat. contoh : kolom-tutorial
Tulis angka banyaknya komentar yang diinginkan di samping tulisan Number of comments
Beri tanda centang pada kotak di samping tulisan Show comment date jika komentarnya ingin ada tanggalnya
Beri tanda centang pada kotak di samping tulisan Show posttitle jika komentarnya ingin ada judul postingan
Tulis jumlah karakter hurup yang diinginkan di samping tulisan Summary size
Untuk styling silahkan pilih yang mana saja
Klik tombol bertuliskan Customize
Klik tombol bertuliskan Add Widget To My blog
Silahkan sign in dengan id sobat
Pilih blog sobat yang ingin ada Recent comments nya di samping tulisan select a blog
Klik tombol bertuliskan ADD WIDGET
Secara otomatis Recent comment widget sudah di tambahkan ke blog sobat
Pindahkan elements Recent comment yang baru dibuat pada tempat yang sobat suka
Selesai.

Bagaimana sobat, gampangkan? so pasti gampang donk

Tapi ada satu lagi kabar gembira nih buat para sobat. Bagi sobat yang blog nya memakai bahasa indonesia tentu saja akan sedikit janggal, karena recent comment diatas memakai bahasa inggris. Apakah recent comments tersebut bisa menjadi bahasa Indonesia? jawaban nya bisa. Jika sobat tertarik silahkan ikuti langkah-langkah berikut ini :

Sign in di blogger dengan id sobat
Klik menu Layout pada blog yang ingin di rubah
Klik menu Page Elements
Klik tulisan Edit pada element Recent Comments yang tadi dibuat
Akan muncul kode-kode seperti ini :

  <script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/showrecentcomments2.js">
</script><script style="text/javascript">var numcomments =  5;var showcommentdate = true;var showposttitle = true;var numchars =  100;var standardstyling = true;</script> <script  src="http://YourBlogName.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

http://amen24.googlepages.com/showrecentcomments.js

Klik tombol SAVE CHANGES
Selesai.

Selamat mencoba !!!!

Menu Dropdown dengan JavaScript

Bagi sobat yang suka akan pernak-pernik blog, ada kabar baik nih. Pada kesempatan kali ini saya akan membahas tentang cara membuat menu Dropdown menggunakan JavaScript.
Caranya silahkan arahkan mouse sobat ke deretan menu yang ada pada halaman demo lalu klik untuk membuka submenu yang ada di dalamnya dan untuk menutupnya kembali sobat klik sekali lagi ke menu yang ingin di tutup, silahkan mencoba :

Bagaimana sudah di coba belum? kalau belum, coba dulu deh biar agak seru pembahasannya! Nah kalau sudah, bagaimana tanggapannya, seru tidak? kalau seru silahkan sobat baca artikel ini sampai tuntas (kaya adu banteng aja pake acara seru apa kagak), nah kalau sekiranya tidak seru, ya mending cari topik lain biar semangat bacanya.

Oke biar tidak terlalu ngelantur, kita langsung ke topik bahasan. Untuk membuat menu seperti di atas, kita perlu memasang kode JavaScript serta stylesheet CSS pada template blog kita, akan tetapi karena di blogger terdapat dua pemakaian template yaitu template klasik dan template baru, maka tentu saja dalam membuat menu dropdown tersebut caranya berbeda pula. Oleh karena itu, pembahasannya pun akan saya bagi dua juga yaitu untuk template klasik serta untuk template baru. Akan tetapi karena pembahasannya terlalu panjang, maka kali ini akan saya bahas untuk template baru saja, dan untuk template klasik akan saya bahas pada postingan berikutnya.

Untuk membuatnya silahkan ikuti langkah-langkah berikut ini :

Langkah pertama yaitu membuat dua buah tombol untuk background dari tulisan menu, sebaiknya warna ataupun style nya di bedakan, ini dimaksudkan agar antara menu utama dengan sub menu akan terlihat perbedaannya. sebagai contoh lihat gambar tombol di bawah ini :

Langkah kedua adalah menyimpan file gambar tombol tersebut pada hosting untuk menyimpan gambar, bisa di blogger sendiri atau dengan hosting lain. Agar lebih terarah, saya ambil contoh menggunakan hosting lain yaitu www.photobucket.com. Untuk cara upload gambar ke situs ini sudah saya terangkan pada postingan terdahulu, jika ingin baca - baca lagi silahkan klik di sini. Saya ambil contoh kedua tombol tadi sudah saya upload dan mempunyai URL address sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :

Klik menu LayOut

Klik menu Edit HTML

Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template

Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates

Tunggu beberapa saat sampai proses selesai

Simpan kode berikut di bawah kode <title><data:blog.pageTitle/></title>



<script> 


var last_expanded = ''; 


function showHide(id) 


{ 


var obj = document.getElementById(id); 


var status = obj.className; 


if (status == 'hide') { 


if (last_expanded != '') { 


var last_obj = document.getElementById(last_expanded); 


last_obj.className = 'hide';
 

} 


obj.className = 'show'; 


last_expanded = id; 

} else { 

obj.className = 'hide'; 

} 

} 




</script>

Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah silahkan cari kode ]]></b:skin>, lalu simpan kode berkut di atasnya



.ogah{

background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');

text-align:center;

width:90%;

font-family: georgia, Helvetica, sans-serif;

padding-left:20px;

padding-right:20px;

padding-top:10px;

padding-bottom: 10px;

display:block;

text-decoration: none;

color: #000000;

height: 20px;

}



.ogahniye{

background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif');

text-align:center;

width:90%;

font-family: georgia, Helvetica, sans-serif;

padding-left:20px;

padding-right:20px;

padding-top:13px;

padding-bottom: 10px;

display:block;

text-decoration: none;

color: #000000;

height: 20px;

}



.hide{

display: none;

}



.show{

display: block;

}





a{cursor: hand}

Klik tombol SAVE TEMPLATE

Klik menu Page Elements

Klik tulisan Add a Page Element

Klik tulisan ADD TO BLOG di bawah tulisan HTML/JavaScript

Masukan kode berikut :



<a class="ogah" onclick="showHide('ogahku1')">Menu utama 1</a>

    <div id="ogahku1" class="hide">

        <a href="#" class="ogahniye">Link 1 di sini</a>>

        <a href="#" class="ogahniye">Link 2 di sini</a>

        <a href="#" class="ogahniye">Link 3 di sini</a>

        <a href="#" class="ogahniye">Link 4 di sini</a>

    </div>

<a class="ogah" onclick="showHide('ogahku2')">Menu utama 2 </a>

    <div id="ogahku2" class="hide">

        <a href="#" class="ogahniye">Link 1 di sini</a>

        <a href="#" class="ogahniye">Link 2 di sini</a>

        <a href="#" class="ogahniye">Link 3 di sini</a>

        <a href="#" class="ogahniye">Link 4 di sini</a>

    </div>

<a class="ogah" onclick="showHide('ogahku3')">Menu utama 3 </a>

    <div id="ogahku3" class="hide">

        <a href="#" class="ogahniye">Link 1 di sini</a>

        <a href="#" class="ogahniye">Link 2 di sini</a>

        <a href="#" class="ogahniye">Link 3 di sini</a>

        <a href="#" class="ogahniye">Link 4 di sini</a>

    </div>

<a class="ogah" onclick="showHide('ogahku4')">Menu utama 4 </a>

    <div id="ogahku4" class="hide">

        <a href="#" class="ogahniye">Link 1 di sini</a>

        <a href="#" class="ogahniye">Link 2 di sini</a>

        <a href="#" class="ogahniye">Link 3 di sini</a>

        <a href="#" class="ogahniye">Link 4 di sini</a>

    </div>

Klik tombol SAVE CHANGES

Klik pada element yang baru di buat, tahan lalu pindahkan di tempat yang di sukai ( di drag & drop )

Klik tombol SAVE

Selesai

Keterangan : pada kode diatas ada tanda pagar (#), tanda itu harus di ganti dengan URL yang mau di pasang.

Jika di lihat dari reaksi menu ini yang bersifat membuka dan menekan isi yang ada di bawahnya, maka menu ini hanya cocok di simpan pada sidebar dan tidak cocok apabila di simpan pada header.

Mudah-mudahan dapat di mengerti. Selamat mencoba !

Membuat Link Untuk Download

Sobat Saiman beberapa waktu yang lalu mengajukan sebuah pertanyaan yang di tulis pada shoutbox, beliau menanyakan tentang cara memasang artikel atau file exe di blog agar bisa di download orang lain. Sepengetahuan saya yang terbatas ini, di dalam blog tidak bisa untuk menyimpan file exe kemudian bisa di download oleh orang lain, akan tetapi walaupun begitu ada cara lain yang bisa kita tempuh yakni menggunakan jasa situs-situs yang ada di internet yang menyediakan space untuk upload file yang kita punyai dan kemudian bisa di download lagi oleh orang lain.

Secara sederhana saya jabarkan cara kerjanya, pertama tentu saja kita harus mempunyai account pada situs tersebut, kemudian setelah mempunyai account, baru kita upload data yang ingin kita simpan, lalu setelah proses upload berhasil kita akan di beri URL address file yang kita upload. Nah langkah terakhir agar pengunjung dari blog kita bisa mendownload file tersebut adalah memasang tulisan yang mempunyai link terhadap URL address file yang kita upload tadi, jadi tentu saja orang lain bisa mendownload file yang kita pasang melalui blog kita. Kira-kira begitu bos

.

Agar tidak terlalu bingung, penyedia layanan ini salah satunya adalah www.SnapDrive.net. dengan menggunakan situs ini kita bisa upload file kemudian file tersebut bisa di download lagi oleh orang lain. Untuk caranya silahkan ikuti langkah-langkah berikut ini :

Silahkan buka http://www.SnapDrive.net

Klik tulisan Register

Isi formulir yang disediakan dengan data diri sobat

Username --> isi dengan nama yang ingin sobat gunakan, boleh apa saja yang penting mudah di ingat. contoh : Unyil

Password --> isi dengan password yang di inginkan. contoh : pakraden

Confirm password --> isi kembali dengan password yang tadi di tuliskan.contoh : pakraden

Email address --> isi dengan alamat email sobat, tentunya yang masih valid. contoh : amn_tea@yahoo.co.id

First name -->isi dengan nama depan sobat

Last name --> isi dengan nama belakang sobat

Country --> pilih nama negara dimana sobat tinggal. contoh : indonesia

Postcode --> isi dengan kode post daerah sobat

Gender --> pilih sesuai dengan jenis kelamin sobat. male(pria), female(wanita)

Date of birth --> pilih tanggal kelahiran sobat

Preferances isi dengan tulisan yang tertera di situ

Klik tombol Register

Ada konfirmasi bahwa account yang baru di buat harus di aktifkan melalui email yang kita tulis tadi

Cek email milik sobat yang tadi ditulis, periksa apakah email dari Snapdrive sudah sampai atau belum

Jika email sudah sampai, silahkan buka email tersebut. Isi di dalam email tersebut ada yang berupa link untuk aktifasi, klik saja link tersebut

Secara otomatis sobat akan dibawa kehalaman yang berisi ucapan terima kasih

Klik tombol OK

Silahkan Login dengan username serta password yang tadi di tuliskan saat register

Setelah berada di halaman account sobat, klik tulisan Upload

Klik tombol Add Files

Pilih file yang ada dikomputer sobat yang mau di upload

Klik tombol Upload. tunggu beberapa saat ketika proses upload file sedang berlangsung

Jika proses upload selesai, sobat akan diperlihatkan file yang di upload tadi. Klik tulisan details yang ada disebelahnya

Klik tulisan HTML Code

Copy kode yang di berikan lalu paste pada program notepad

Klik tulisan Logout untuk keluar dari situs tersebut

Silahkan tutup layar browser sobat

Langkah selanjutnya adalah memasukan kode tadi ke dalam blog kita, saya ambil contoh kode yang sudah di upload seperti ini :



<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">billing internet.zip</a>

Kode ini merupakan kode link biasa, jadi tentunya tidak mutlak. Kata billing internet.zip, bisa kita ganti dengan kata apa saja sekehendak kita. saya ambil contoh kata billing internet.zip di rubah menjadi kata download, maka kode diatas menjadi seperti di bawah ini :



<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>

Bagaimana cara memasukan kode diatas? tentu saja terserah sobat mau di tempatkan dimana saja, mau di sidebar, footer, atau bahkan di dalam postingan pun bisa. Saya ambil contoh didalam postingan isinya seperti ini :

Untuk men download program billing internet, silahkan anda klik link di bawah ini :


<br/><br/>



<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a>

Maka nanti di blog kita akan tampil seperti ini :

Untuk men download program billing internet, silahkan anda klik link di bawah ini :

download

Contoh link yang saya buat diatas adalah link yang benar-benar nyata untuk mendownload program billing internet, silahkan sobat klik untuk membuktikannya!

Saya kira sudah cukup pembahasan tentang cara membuat link download, mudah-mudahan dapat di mengerti. Selamat mencoba !

Sunday 29 December 2013

Blogger luncurkan Post Editor Baru

Blogger luncurkan Post Editor Baru - Setelah sekian lama bertengger di blogger in draft, akhirnya post editor baru sudah resmi dipakai untuk blogger. Tentunya dalam post editor baru ini ada beberapa fitur yang ditambahkan yang tentunya akan lebih memudahkan kita dalam mengedit isi posting. Berikut screenshot dari post editor baru milik blogger :

Beberapa fitur yang di tambahkan pada post editor baru :

Improved Image Handling
Improved Raw HTML
geotagging
Vertical resizing
Easy link editing in Compose mode
Full Safari 3 support
New Preview dialog
Placeholder image for tags
New toolbar

Keterangan lengkap tentang fitur-fitur baru tersebut bisa anda baca di sini ( males nerangin mode on Big Grin

)

Berikut cara mengaktifkan post editor baru :

Silahkan login ke blogger dengan ID anda.
Klik Pengaturan. Biasanya anda langsung di bawa ke tab Dasar.
Tuju bagian bawah. Pada opsi Pilih editor entri, silahkan pilih "Editor yang diperbarui"
Klik tombol SIMPAN SETELAN.
Selesai.

Sepertinya untuk merayakan hari ulang tahunnya yang ke 10, Blogger habis-habisan menambahkan fitur-fitur baru pada mesinnya.

Template baru VS Template Klasik

Sudah dua hari ini saya tidak menelorkan tulisan baru ( emangnya ayam pake bertelor segala ) mungkin buat sobat yang rajin datang ke sini merasa bosan karena tulisannya itu-itu melulu. OK, biar ga basi langsung aja.Menanggapi banyaknya pertanyaan yang di ajukan melalui shoutbox beberapa waktu lalu seputar masalah mengganti template, maka kali ini saya akan membahasnya agar bagi sobat yang masih bingung dapat mempunyai gambaran seputar template ini.

Sebenarnya tentang masalah template ini sudah saya posting, jika mau iseng-iseng baca silahkan klik di sini, tapi biar lebih jelas akan saya bahas lebih dalam.

Mungkin ada diantara sobat semua masih bingung dengan yang namanya template klasik sama template baru. Di blogger.com saat ini template yang di gunakan ada dua pilihan yaitu template klasik dan baru. Bagaimana caranya kita membedakan apakah kita menggunakan template klasik atau template baru? Ada beberapa ciri untuk mengenal apakah yang kita pakai template baru atau klasik, diantaranya yaitu :

Template baru :

Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :

Manage : Posts, Settings, Layout

Jika kita klik menu Layout, akan ada menu seperti ini :

Page Elements | Fonts and Colors | Edit HTML | Pick New Template

Jika kita klik menu Edit HTML maka akan muncul beberapa ciri khas, yaitu :

Tulisan --> download Full Template
Tombol bertuliskan --> Browse..., Upload
Ada kotak kecil di samping tulisan Expand Widget Templates
Tombol bertuliskan ---> CLEAR EDITS, PREVIEW, SAVE TEMPLATE
Dibagian bawah terdapat tulisan :

• Revert to Classic Template
• View Classic Template

Itu tadi sedikit ciri apabila kita memakai template baru.

Apabila memakai template klasik, cirinya adalah :

Pada menu dashboard (menu yang dijumpai pada saat kita baru login) akan terlihat menu seperti ini :

Manage : Posts, Settings, Template

Jika kita klik menu Template, akan ada menu seperti ini :

Edit HTML | Pick New | customize Design | Adsense

Jika klik menu Edit HTML akan muncul beberapa ciri :

terdapat tulisan --> Change the Blogger Navbar

Tombol bertuliskan ---> Save Template Changes, Preview, Clear

Itu tadi beberapa ciri jika kita memakai template klasik.

Dari kedua contoh ciri diatas, tentu saja kita dapat mengetahui template apa yang sekarang kita pakai.

Apa kelebihan atau kekurangan dari kedua template tersebut?

Template baru

Terdapat menu : Page Elements
Dengan menu ini kita dapat dengan mudah menambahkan element tanpa harus mengerti bahasa HTML. Element-element yang bisa ditambahkan bisa berupa Newsreel, Video Bar, List, Links List, Picture, Text, HTML/JavaScript, Feed, Labels, Logo, Profile, Blog Archive, serta Page Header.

Sistem Drag & Drop
Dengan sistem ini kita dapat dengan mudah memindahkan setiap element yang telah kita buat dimana saja yang kita sukai.

Terdapat menu : Fonts and Colors
Dengan menu ini kita dapat dengan mudah merubah warna serta bentuk huruf tanpa harus repot-repot merubah style sheet dan tentunya tidak memerlukan kemampuan berbahasa HTML

Itu tadi beberapa keuntungan memakai template baru, dan kekurangannya yaitu :

bagi sobat yang suka otak-atik kode HTML, pada template ini agak susah tuk di otak-atik (khusus buat pemula seperti saya, lain halnya bila sobat sudah expert).

Sekarang apa kelebihan dari template klasik :

Kode HTML sangat mudah untuk di otak-atik, jadi bagi sobat yg suka bermain dengan HTML sangat cocok memakai template ini.

Kekurangan :

Tidak tersedia menu Page Elements, sehingga bagi sobat yang masih bingung dengan HTML akan menemui kesulitan.

Tidak tersedianya menu : Fonts and Colors, sehingga menyulitkan dalam mengatur Font serta warna hurup.

Nah itu tadi beberapa keunggulan serta kekurangan dari kedua template, silahkan pikirkan mana yang mau sobat pilih.

Cara Migrasi Template

Setelah menimbang-nimbang, tentunya sobat tertarik dengan salah satu diantara keduanya. jika ternyata sobat tertarik untuk bermigrasi(pindah) template dan belum mengtahui caranya silahkan ikuti langkah berikut:

Dari Template baru ke template klasik :

Klik menu Layout

Klik menu Edit HTML

Klik tulisan yang ada di bagian bawah layar yaitu : Revert to Classic Template
Bila muncul kotak dialog, klik OK aja
Selesai, sobat memasuki dunia baru yaitu template klasik.

Dari template klasik ke template baru :

Klik menu Template

Klik menu Customize Design

Klik tombol bertuliskan UPGRADE YOUR TEMPLATE

Pilih template yang di sukai, lalu klik tombol SAVE TEMPLATE

Selesai. sobat sudah memasuki alam baru, yaitu Template Baru.

Cara mengganti Template

Ada dua kemungkinan, yaitu mengganti template dengan buatan blogger dan mengganti template bukan buatan blogger.

Ganti template dengan template buatan blogger

Untuk template Klasik, ikuti langkah-langkah berikut :

Klik menu Template

Klik menu Pick New

Pilih template mana yang paling cocok, lalu klik tombol bertuliskan Use This Template yang berada di bawah gambar template

Selesai. Blog sobat sudah punya wajah baru.

Untuk template baru, ikuti langkah-langkah berikut :

Klik menu Layout

Klik menu Pick New Template

Pilih template mana yang sobat sukai, lalu klik tombol SAVE TEMPLATE

Selesai.Blog sobat sudah mempunyai wajah baru

Ada yang perlu di ketahui yaitu jika kita mengganti template dengan template buatan blogger sendiri, maka data-data semisal link, shoutbox, image dan lain-lain. Data ini tidak akan hilang. Lain halnya apabila kita mengganti dengan template buatan bukan blogger.com, maka semua data-data yang di sebutkan tadi akan menghilang (kecuali postingan artikel tidak akan hilang) dan tentunya harus di input ulang, dan judulnya Caaaaapppppee deeeeehhhhh .....

Ganti template dengan template bukan buatan blogger

Hal pertama yang harus di ingat adalah semua data-data yang ada seperti yang saya sebutkan tadi, maka apabila kita mengganti template dengan template bukan buatan blogger sendiri, kita harus mengcopy dulu seluruh data tersebut, dan kemudian nanti setelah kita sudah mengganti template, data-data tadi kita input ulang.

Template baru

Klik menu Layout

Klik menu page Elements

Klik tulisan Edit pada masing-masing Element, lalu copy seluruh datanya

Jika semua data di pastikan sudah di copy, maka langkah selanjutnya adalah klik menu edit HTML

Klik tulisan --> download Full Template, save dalam komputer. Ini di maksudkan apabila nanti sobat berubah pikiran dan ingin kembali lagi, sobat masih punya data template tersebut

Beri tanda centang dulu pada kotak kecil disamping tulisan Expand Widget Template

Klik tombol Browse..., lalu masukan data Template baru yang ingin di masukan

Klik Tombol Upload

Biasanya keluar peringatan bahwa data-data yang kita punya seperti link, shoutbox dan lain-lain akan ter delete (terhapus)

Klik tombol --> Confirm & Save, dengan asumsi bahwa sobat sudah mengcopy data-data tadi

Selesai. Blog sobat sudah mempunyai wajah baru.

Template Klasik

Klik menu Template

Klik menu Edit HTML

Tandai (highligh/blok) semua data template yang ada, sorot pada tulisan yang sudah di tandai, klik kanan Copy,lalu paste pada program notepad, save dan beri judul dengan nama yg mudah di ingat. Ini dimaksudkan untuk backup data untuk nanti input ulang data-data seperti link,shoutbox dll

Delete semua data template yang lama

Copy seluruh data template yang baru yang mau di masukan, lalu paste pada kotak data template yang sudah di delete tadi

Klik tombol Preview, lihat perubahan yang ada (biasanya preview ini agak berbeda dengan tampilan blog aslinya), Jika sudah cocok, klik tombol Save Template Changes

Selesai. blog sobat sudah mempunyai wajah baru.

Bagaimana sobat? mudah-mudahan keterangan diatas dapat menjawab semua pertanyaan mengenai ganti template.

Selamat mencari dan menemukan template yang sobat suka.

Menu Navigasi dengan CSS

Update : Tutorial ini khusus pagi anda yang masih memakai template klasik

Hallo sobat, bagaimana kabarnya hari ini? mudah-mudahan sehat selalu ya, biar baca ni artikel semangat, ga loyo gitoe.

Ok, biar ga terlalu garing sedikit demi sedikit kita mulai memasuki topik bahasan, yoi kali ini saya mau membahas tentang cara membuat menu navigasi menggunakan CSS. Untuk melihat demo Navigasi yang akan saya terangkan, silahkan klik tombol di bawah ini:

Bagaimana sobat, sudah mendapat gambaran apa yang akan saya sampaikan? pasti jawabnya iya. Dengan adanya menu navigasi seperti di atas, tentunya akan lebih menarik perhatian para pengunjung blog kita di banding dengan hanya menu biasa, dan selain itu pula menu ini lebih memperjelas bahwa tulisan atau tombol tersebut merupakan sebuah tombol navigasi yang bisa di klik oleh para pengunjung.

Sekarang timbul pertanyaan bagaimana cara membuatnya? bagi yang belum tahu dan berminat untuk mengetahuinya silahkan sobat terus membaca sampai akhir artikel. Untuk membuat menu seperti yang terlihat di atas tadi, kita perlu menambahkan beberapa kode tambahan pada blog kita.

Seperti pada contoh tadi di atas, ada dua jenis menu navigasi yang akan saya bahas yakni yang tidak menggunakan Image backround serta yang menggunakan Image backround, silahkan simak langkah-langkah berikut ini :

buatlah dua buah tombol navigasi yang bentuknya sama persis, akan tetapi berbeda warna, ini di maksudkan agar ketika tombol mouse menunjuk tombol tersebut tombolnya akan berubah warna. Bagaimana cara membuat tombol? Tentu saja untuk membuat sebuah tombol, kita bisa menggunakan berbagai program komputer semisal adobe photoshop, coreldraw ataupun berbagai program lainnya.

Upload gambar tombol-tombol tersebut pada hosting penyimpan semisal www.photobucket.com untuk cara upload gambar sudah saya terangkan pada pembahasa yang lalu , jika sudah lupa silahkan klik Di sini

.

Agar ada contoh, umpamanya kita mempunyai alamat tombol sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

Langkah selanjutnya adalah menambahkan kode, ada dua contoh yakni yang tidak memakai gambar tombol dan yang memakai gambar tombol. contoh yang tidak memakai gambar tombol :

Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.


.unyil{

text-align:left;

display:block;

width:180px;

height:20px;

background:#f0f0f0;

padding:3px 4px 3px 8px;

margin:7px 10px 7px 0;

}



.unyil:hover{

background:#97A4B9;

text-decoration:none;

}

copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :


<a class="unyil" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>
 


<a class="unyil" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span> 



<a class="unyil" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span class="hide"> | </span>



<a class="unyil" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>

biar tidak telalu bingung, sedikit saya uraikan :

.unyil --> kata .unyil bisa diganti apa saja yang penting harus sesuai dengan kode berikutnya.

text-align:left; --> kata left artinya tulisan akan berada di sebelah kiri, ini bisa di ganti dengan kata center atau right

display:block; --> kata block artinya di tampilkan di layar monitor.

width:180px; --> angka 180px adalah lebar dari tombol navigasi sebesar 180px, nah ini bisa di rubah sesuai dengan kondisi blog sobat masing-masing.

height:20px; --> angka 20px adalah tinggi dari tombol navigasi sebesar 20px, ini bisa di ganti sesuai dengan keinginan sobat.

background:#f0f0f0; --> tulisan #f0f0f0 adalah kode warna dari background, ini bisa di rubah sesuai dengan ke sukaan sobat.

padding:3px 4px 3px 8px; --> nilai padding ini adalah untuk mengatus jarak tulisan pada tombol navigasi, bisa di rubah sesuai kebutuhan.coba-coba aja rubah sendiri.

margin:7px 10px 7px 0; --> margin ini untuk jarak antara satu tombol dengan tombol yang lain, bisa di rubah, coba aja.

.unyil:hover{ --> .unyil:hover artinya yaitu ketika mouse berada pada tombol .unyil akan berubah menjadi seperti yang di definisikan pada kode ini.

background:#97A4B9; --> #97A4B9 adalah kode warna yang dinginkan ketika mouse berada pada tombol .unyil

text-decoration:none; --> text dekorasi jangan di rubah.

Bagaimana sudah jelas? mudah-mudahan jelas.

Contoh yang kedua adalah yang memakai background image, dalam hal ini saya ambil contoh dengan image milik saya dan mempunyai alamat seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

prinsipnya kode-kode ini sama dengan diatas, yang membedakan adalah penambahan image doang, coba lakukan langkah berikut ini :

Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.


.cuplis{

text-align:left;

display:block;

width:180px;

height:20px;

background:#f0f0f0 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif) top right no-repeat;

padding:3px 4px 3px 8px;

margin:7px 10px 7px 0;

}



.cuplis:hover{
background:#97A4B9 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif) top right no-repeat;

text-decoration:none;

}

copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :


<a class="cuplis" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>
 


<a class="cuplis" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span> 



<a class="cuplis" href="http://rohman-freeblogtemplate.blogspot.com">Free Blog Templates</a><span class="hide"> | </span>



<a class="cuplis" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>

Yang membedakan hanya pemasangan URL image saja, yang lainnya sama persis. Kata cuplis adalah untuk membedakan dengan perintah menu navigasi unyil, jadi kalau dua efek ini mau besamaan ada dalam satu blog, ya harus berbeda.

Selamat mencoba !

Daftar Mybloglog

Bagi para sobat yang baru membuat blog, pada kesempatan kali ini saya mau menambahkan perbendaharaan blog tools nya, yakni pasang MyBloglog.

Apa itu Mybloglog ?

Bingung kalau harus mendifinisikan apa itu mybloglog

biar kita tidak sama-sama bingung, silahkan alihkan perhatian sobat ke bagian sidebar sebelah kanan layar monitor, di bawah tulisan Tamu terdapat photo yang ganteng-ganteng serta cantik-cantik. Nah itu bukanlah photo saya ataupun my family, tapi itu merupakan tamu yang pernah berkunjung ke blog ini dan beliau-beliau inipun sama-sama anggota dari mybloglog, atau barangkali photo sobat sudah terpampang disana? selamat kalau iya, karena sobat akan mulai jadi orang terkenal. Ko bisa? Ya iiyya...lah, karena tercatat tak kurang dari lima puluh pengunjung setiap harinya yang mampir kemari dan selalu melihat photo sobat, keren kan! makanya sering-sering main kemari biar cepat terkenal..he..he..(wuyyy...udah dong ngelanturnya

).

Bagaimana sobat sudah dapat gambaran? saya yakin sudah. Atau belum? kalau belum bolehlah saya yang mendefinisikan, tapi tentunya dengan versi saya sendiri. Mybloglog adalah suatu situs yang menyediakan layanan untuk melacak (tracking) para pengunjung blog/website dimana apabila pengunjung tersebut merupakan anggota situs mybloglog maka dapat secara otomatis terdeteksi dan di cantumkan dalam menu Recent Reader nya (pembaca terbaru).

Apa manfaat bergabung di mybloglog?

Ada beberapa manfaat kita bergabung dengan mybloglog yaitu :

Untuk menambah traffic ke blog kita

Dengan adanya photo kita terpampang di blog orang lain, maka ada kemungkinan banyak yang akan berkunjung ke blog milik kita, sekurang-kurangnya dari pemilik blog itu sendiri.

Mengetahui link mana yang banyak di klik

Di mybloglog ada fasilitas tracking untuk memberi peringkat terhadap link-link yang kita pasang, link mana yang banyak di klik pengunjung, maka peringkat link itu semakin baik.

Mempererat tali silaturahmi antar pemilik blog

Tak bisa di pungkiri dengan adanya otomatisasi photo kita terpampang tanpa harus menuliskan pesan seperti halnya buku tamu, ini tentunya akan lebih memungkinkan saling kunjung mengunjungi antar pemilik blog.

Dan tentu saja masih ada manfaat-manfaat yang lainnya yang bisa di dapat, akan tetapi untuk menghemat pembahasan hanya itu saja dulu. Nah sekarang bagaimana cara bergabung dengan mybloglog, silahkan ikuti langkah-langkah berikut ini :

Silahkan buka situs http://www.mybloglog.com

Isi form yang telah di sediakan di bawah tulisan Sign Up Now

Screen name --> Isi dengan nama yang ingin di tampilkan. Contoh : Amen24

Email --> Isi dengan email sobat ( yang valid)

Passwor --> Isi dengan password yang di inginkan. Contoh : ranggalawe

Blog/Site URL --> Isi dengan alamat blog sobat. Contoh : http://rubrik-elektronik.blogspot.com

Klik Tombol Register

Terlihat beberapa form yang harus diisi lagi

Blog/Site Title --> Isi dengan judul blog sobat

Blog platporm --> pilih blogspot.com

Dibagian bawah ada dua radio buttun, silahkan pilih yang sobat sukai

Klik tombol yang bertuliskan Complete Registration

Klik tulisan Go to Your page

Klik tombol yang bertuliskan Edit profile yang berada di sebelah kanan atas

Isi semua data diri sobat (tidak saya sebutkan satu2 karena terlalu banyak)

Jika sudah selesai di isi semua, klik tombol bertuliskan Update my profile

Klik tulisam MY HOME untuk kembali ke home

Klik tombol yang bertuliskan Get Widget

Klik kotak di samping tulisan c_color_heading_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna background heading

Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan heading

Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround link

Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan link

Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround bottom

Tulis ukuran lebar yang sesuai dengan sidebar blog sobat (kalau mau di tempatkan di sidebar) contoh : 160

Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No juga boleh

Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih half-Size juga boleh

Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah)

Disamping tulisan Title, tulis kata yang sobat suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja

Di bagian bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu

Kembali ke bagian atas

Klik tombol bertuliskan Preview and Get Code

Copy seluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad

Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account sobat

Silahkan close window situs tersebut.

Langkah selanjutnya adalah memasukan kode yang sudah di copy pada notepad tadi kedalam blog kita, karena kode ini merupakan Java Script, maka cara memasukan kodenya sama dengan memasukan kode HTML, dan ini sudah saya bahas pada postingan terdahulu. Jika sudah lupa silahkan baca lagi di sini. Selesai.

Selamat menikmati photo-photo ganteng dan cantik dari tamu blog sobat.