User Online Status

0 komentar
english English Version


How many people is online at your blog? you know that or don't?
If you don't know how many people is online at your blog, you can use
a free tracker to know it. That is much site provide this service. Once
of them is www.histats.com. If you
use them tool, you can know how many people online at your blog, how
many people was visited to your blog, and any function. This is
once of example :



histat.jpg




How to get it? please following the steps :



  1. Please visit www.histats.com.
  2. If you was on the histats site, click Register at the top tab.
  3. Content the form with your information, such as email, password, your blog url and etc.
  4. Click Continue button.
  5. Choose the style of histats counter, click Choose a counter from this category.
  6. Please mark the radio button beside the counter style you wanted.
  7. Click Continue button at the bottom of page.
  8. Click at the drop down menu, choose the category which to display at your counter. the choice is : visitor today,
    Page views today, User online, Total visitors, and total page views. Choose empty
    if you want not to display them.
  9. Click Continue button.
  10. Wait a moment, your counter is updating.
  11. Until the process is done, copy your counter code and paste to the Notepad or
    other text editor. Save into your computer.
  12. Logout and close your internet browser.
  13. Done. Now you has have a counter code to add at your blog.






Next step is add your counter code to your blog, please following the steps :



  1. Login to blogger with your ID.

  2. After entering the dasboard page , click Layout.
  3. Click at Page Element tab. See the picture below :

    4. page element

  4. Click at Add a Page element.

  5. After emerging pop up window , Klik add to blog button for the things HTML/JavaScript. See the picture following :

    6. javascript

  6. Open your Counter code, copy and then paste into available column.
  7. Click save changes
  8. Done. Please see the result.



Now you have a Counter, and you will know how many people online at your blog.



If you don't like with this counter, you can get at the other site, this
is several site provide the same service :



  • http://www.neoworx.net
  • http://www.webfooted.net
  • http://www.fastonlineusers.com






See you next time at my new tips. Happy blogging.









bahasa indonesia Versi Bahasa Indonesia



Berbicara masalah blog tools, kayanya saya jarang sekali membahasnya. Dari sekian banyak artikel yang telah saya posting, tercatat baru dua artikel yang membahas tentang blog tools. Untuk itu dalam postingan kali ini akan di bahas salah satu blog tools yang banyak di gunakan oleh para blogger yakni tool untuk mengetahui berapa banyak pengguna/user yang sedang online pada blog milik kita.



Disamping berfungsi sebagai blog tools, tool ini berfungsi juga sebagai aksesori blog yaitu untuk menghiasi halaman blog milik kita agar tampak lebih cantik dan menarik untuk dilihat oleh para pengunjung. Oleh karena alasan tadi banyak penyedia tool ini yang menawarkan tampilan-tampilan yang unik serta menarik di samping fungsi utamanya yakni melacak user yang sedang online di blog kita.



Ok, biar ga bosan baca intermezo yang terlalu panjang dan garing, langsung saja pada topik bahasan utama.Untuk mendapat tool user online status, salah satunya kita bisa mendapatkan dari www.Geovisite.com,
untuk langkah-langkahnya silahkan ikuti langkah berikut :



  1. Silahkan buka www.geovisite.com
  2. Klik tulisan Register yang berada di bawah gambar Geo counter Flash
  3. Tulis alamat email sobat pada kotak kosong di samping tulisan Email
  4. Tulis address blog milik sobat disamping tulisan URL. Contoh : http://rubrik-elektronik.blogspot.com
  5. Tulis kata untuk login di samping tulisan Login (4/12). Contoh : amen24
  6. Tulis password yang di inginkan disamping tulisan password (4/8). Contoh : kinoy
  7. Pilih waktu yang sesuai dengan daerah sobat disamping tulisan Location. contoh :untuk daerah jakarta adalah Asia/Jakarta (GMT+7)
  8. Pilih kategori yang sesuai dengan blog sobat di samping tulisan Category. Contoh : Internet
  9. Pilih bahasa yang sesuai dengan blog sobat di samping tulisan Language of your site. Contoh : English (soalnya kalo indonesia ga ada,
    belum di akui bo)
  10. Pilih judul blog sobat disamping tulisan Title. Contoh : Rubrik Elektronik
  11. Tulis deskripsi dari blog milik sobat pada kotak di samping tulisan Descriptioan. Contoh : All about Electronic, tips, maintenance, until how to
    service the equipment of electronic
  12. Klik tombol yang berlogo disket
  13. Copy salah satu kode HTML yang dinginkan, antara lain : GEOGLOBE, GEOCOUNTER, GEOMAP lalu paste pada program notepad
  14. Silahkan close window browser sobat
  15. langkah selanjutnya adalah memasukan kode HTML tersebut pada kode HTML milik sobat, nah untuk langkah ini sudah saya bahas, silahkan klik di sini untuk membacanya
  16. Selesai.





Agar sobat bisa menentukan pilihan mana yang harus di pilih apakah GEOGLOBE, GEOCOUNTER, atau GEOMAP ? Silahkan klik di sini untuk melihat secara nyata gambar dari ketiga pilihan tadi, tunggu beberapa saat,loadingnya lumayan sedikit lama. Kenapa tidak saya cantumkan di sini,alasannya yaitu agar halaman blog ini tidak terlalu berat untuk di akses makanya sengaja saya pisahkan.



Sebagai tambahan, situs penyedia yang lainnya sobat bisa kunjungi di :



  • http://www.neoworx.net
  • http://www.webfooted.net
  • http://www.fastonlineusers.com
  • http://www.histats.com





Selamat menikmati tool baru...
newer post

Membuat Read More (2)

0 komentar
Bagi para sobat yang menggunakan template baru tentu saja akan mengalami kebingungan ketika membaca tutorial terdahulu yang membahas tentang membuat menu Read more.. atau menu Baca selengkapnya.., karena tutorial tersebut memang di peruntukan bagi para sobat yang menggunakan template klasik. Nah bagi sobat yang menggunakan template baru dan ingin menggunakan menu Read more.. juga silahkan ikuti langkah-langkah berikut :




  • Sign in seperti biasa di blogger dengan id milik sobat
  • Klik Setting
  • Klik Formatting
  • Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi tesxt area kosong tersebut dengan kode di bawah ini :
    • <div class="fullpost"> </div>
  • Klik tombol yang bertuliskan Save Settings
    • Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut.




Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :



  • Klik menu Dasboard
  • Klik menu Layout
  • Klik menu Edit HTML
  • Klik tulisan Download Full Template
  • Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template,
    kita masih punya back up data untuk mengembalikannya seperti semula
  • Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah,
    sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya
  • Tunggu beberapa saat ketika proses sedang berlangsung
  • Silahkan Sobat cari kode berikut pada kode template milik sobat :
    • <div class='post-body'>
  • Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
    • <b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>
  • Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :
    • <p><data:post.body/></p>
  • Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
    • <a expr:href='data:post.url'>Read More......</a> </b:if>
  • klik tombol bertuliskan Save Template



  • Selesai.







Cara Posting Artikel



  • Klik menu Posting
  • Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :
    • <div class="fullpost"> </div>
  • Tulisankan artikel yang ingin tampak pada blog sebelum kode :
    • <div class="fullpost">
  • Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :
    • </div>
  • Klik tombol bertuliskan PUBLISH POST
  • Klik tulisan Open New Window untuk melihat hasil dari postingan kita,
    kemudian lihat apakah hasilnya sukses atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan. Coba lihat kembali langkah diatas
  • Selamat mencoba !
newer post

Tutorial HTML (2)

0 komentar


Melanjutkan posting yang terdahulu setelah terselang oleh beberapa artikel tentang blog tutorial maka kali ini saya akan membahas tentang tutorial HTML kembali.Sebelum menginjak kepada topik bahasan ada baiknya para sobat mengikuti bahasan kali ini dengan langsung memfraktekannya agar lebih cepat mengerti. Caranya siapkan terlebih dahulu program notepadnya lalu tuliskan kode HTML seperti dibawah, kemudian apabila telah selesai mempraktekan simpan file tersebut dengan extensi .htm (dot htm). Contoh file : latihan.htm kemudian jalankan dengan internet explorer. silahkan tulis kode-kode berikut :







<html>

<head>


<title>latihan</title>


<body>


Tulis apa-apa yang saya terangkan di sini !


</body>


</html>






Kita langsung ke topik bahasan aja ya biar ga bosan.




Elemen dasar HTML




Ada beberapa elemen dasar HTML yaitu :





Elemen Blok Level




Elemen blok level yaitu tingkatan besarnya hurup yang akan di tampilkan pada browser. Elemen blok level yang paling sering di gunakan adalah Heading (h1 sampai h6).Tag heading
ini ini berupa <h1>...</h1> sampai dengan <h6>...</h6>.




Contoh :



<h1>Ini heading 1</h1>


<h2>Ini heading 2</h2>


<h3>Ini heading 3</h3>



<h4>Ini heading 4</h4>


<h5>Ini heading 5</h5>


<h6>Ini heading 6</h6>






Hasilnya akan seperti ini :




Ini heading 1





Ini heading 2



Ini heading 3



Ini heading 4


Ini heading 5




Ini heading 6





Sebenarnya ada cara lain untuk menampilkan berbagai ukuran hurup, yakni memakai
tag <font size="...">.....</font>.



Contoh :








<font size="1">Ini font size 1</font>



<font size="2">Ini font size 2</font>



<font size="3">Ini font size 3</font>




<font size="4">Ini font size 4</font>



<font size="5">Ini font size 5</font>



<font size="6">Ini font size 6</font>




<font size="7">Ini font size 7</font>





Hasil yang akan tampil seperti ini :







Ini font size 1




Ini font size 2



Ini font size 3



Ini font size 4



Ini font size 5



Ini font size 6



Ini font size 7





Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran.



Untuk kesempatan kali ini, kaya nya udah dulu sobat soalnya belum mandi nih, mo berangkat kerja hiii.....pantesan dari tadi ada yang bau aneh




Nantikan seri berikutnya!

newer post

Membuat menu D'tree

0 komentar
Beberapa waktu yang lampau, saya pernah menulis artikel mengenai cara
membuat menu yang menyerupai menu yang ada pada Windows explorer

yaitu menu dtree, akan tetapi rupanya kemarin lusa ada laporan
bahwa menu tersebut mendadak hilang entah kemana, untuk itu tulisan ini
adalah sebagai referensi agar kejadian tersebut tidak terulang kembali.





Saran saya, apabila sobat memasang suatu script atau image yang bersumber dari milik orang lain,
sebaiknya bersegeralah untuk menyimpannya pada account milik sobat, akan tetapi sebelum mengambilnya
tentu sobat harus minta izin terlebih dahulu kepada pemilik script tersebut, etika nya seperti itu.
Misalkan seperti ini, apabila saya menyuruh memasang script seperti ini :





pasanglah kode ini di atas kode </head> :




<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />






kode --> http://amen24.googlepages.com/Readmore.js berarti java script ini di simpan
pada account milik saya. Tentu apabila sobat memasang kode ini tidak ada masalah, akan tetapi hal itu beresiko apabila
saya iseng atau tidak sengaja atau juga terjadi suatu hal sehingga sumber dari script tersebut terhapus, walhasil sobat
akan kehilangan fungsi dari script tersebut tanpa bisa berbuat apa-apa. Bagaimana cara mengatasinya? begini caranya :
copy kode sumber script ini lalu paste pada address bar browser internet sobat :





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






Jangan lupa untuk klik Go untuk memanggilnya. Setelah itu nanti akan muncul sederetan script java. Langkah selanjutnya
adalah klik file pada bar menu yang ada paling atas sebelah kiri, klik Save As lalu simpan di komputer sobat.
Apabila kode tersebut sudah tersimpan di komputer sobat, uploadlah kode tersebut pada hosting yang biasa sobat gunakan, misalkan
saya sering menyimpannya di Google Page Creator.Setelah di upload, copy alamat dari script yang baru di upload tadi, misalkan
script ini mempunyai alamat :






http://juned.googlepages.com/Readmore.js





Nah, langkah terakhir adalah mengganti sumber script yang saya punyai dengan milik sobat, misal kode di atas seperti ini :




<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' />










Gantilah sumber script di atas dengan yang sobat miliki, sehingga kodenya jadi seperti ini :




<script type='text/javascript' src='http://juned.googlepages.com/Readmore.js' />





Apabila sobat melakukan hal yang di atas, maka sobat tidak usah khawatir akan kehilangan dari fungsi script tersebut.





Langkah-langkah di atas merupakan langkah preventif saja bukan bermaksud mengajarkan sobat untuk mencuri
kode milik orang lain.





Baiklah kita kembali pada topik pembahasan mengenai cara membuat menu dtree, karena pada pembahasan yang tempo hari
agak menyulitkan pembaca, sehingga kali ini saya akan mencoba membahasnya lebih mendalam dengan maksud agar lebih mudah untuk di pahami.




Untuk membuat menu dtree, sobat bisa mendownload pada situs resminya yaitu di http://www.destroydrop.com,
silahkan untuk mendownloadnya sendiri. Akan tetapi kode tersebut tidaklah merupakan suatu barang yang sudah jadi, dengan kata lain sobat harus
memahaminya, oleh karena alasan tadi maka saya akan mencoba memberi sedikit gambaran agar supaya lebih mudah untuk di pahami.




Contoh dasar dari script menu dtree yang langsung dari situs http://www.destroydrop.com adalah sebagai berikut :






Kode ini di simpan di atas kode </head> :




<link rel="StyleSheet" href="dtree.css" type="text/css" />

<script type="text/javascript" src="dtree.js"></script>




Kode di bawah ini di simpan di bagian sidebar :




<h2>Example</h2>


<div class="dtree">


<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>



<script type="text/javascript">

<!--


d = new dTree('d');


d.add(0,-1,'My example tree');

d.add(1,0,'Node 1','example01.html');

d.add(2,0,'Node 2','example01.html');


d.add(3,1,'Node 1.1','example01.html');

d.add(4,0,'Node 3','example01.html');

d.add(5,3,'Node 1.1.1','example01.html');

d.add(6,5,'Node 1.1.1.1','example01.html');

d.add(7,0,'Node 4','example01.html');

d.add(8,1,'Node 1.2','example01.html');


d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');

d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');

d.add(11,9,'Mom\'s birthday','example01.html');

d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');


document.write(d);


//-->


</script>


</div>














Apabila sobat mempunyai intelegensi yang cukup lumayan bagus, maka saya yakin
tidak usah saya terangkanpun akan memahami bagaimana untuk membuat menu dtree
dari kode diatas sehingga link-link milik sobat dapat di pasang pada kode-kode
di atas.



Dengan tidak ada maksud saya untuk merendahkan sobat yang masih belum mengerti, maka
saya akan mencoba menerangkannya, akan tetapi untuk lebih memudahkan maka saya telah
membuat sebuah menu dtree buatan saya yang telah saya sertakan link-link di dalamnya :
source code dari menu yang saya buat seperti ini :







Kode ini di simpan di atas kode </head> :





<link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" />

<script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>




Kode di bawah ini di simpan di bagian sidebar :



<div class="dtree">



<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>



<script type="text/javascript">

<!--


d = new dTree('d');


d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');





d.add(1,0,'Free template & navigation')




d.add(3,1,'free template','');

d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');

d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');

d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');

d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');


d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');

d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');

d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');

d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');

d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');

d.add(100,3,'template klasik');


d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');

d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');



d.add(5,1,'Free css menu navigation');

d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');

d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');


d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');

d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');

d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');

d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');

d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');

d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');


d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');



d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');

d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');


d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');



d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');


d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');

d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');

d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');





document.write(d);


//-->


</script>


</div>









Untuk melihat hasilnya, silahkan klik dulu di sini !



Baiklah, saya akan mencoba mengulasnya agar lebih mudah untuk di pahami :



Jika sobat perhatikan dari kode di atas, akan terlihat beberapa ciri yang mudah untuk di kenali, antara lain :




d.add(1,0

d.add(2,0

d.add(4,0

d.add(6,0

d.add(7,0



Kode angka yang bergandengan dengan angka 0 (nol) akan selalu menjadi induk dari menu dtree, jadi jika sobat menginginkan
menu yang di simpan menjadi induk, sobat harus menuliskan angka yang berbeda kemudian di belakang koma harus di susul dengan
angka nol.



d.add(3,1

d.add(5,1


Kode angka yang bergandengan dengan angka 1 (satu) akan menjadi cabang dari induk yang pertama. Akan tetapi angka di depan angka 1 (satu)
adalah angka penentu bahwa menu ini akan menjadi cabang dari kode --> d.add(1,0




d.add(10,5

d.add(20,5

d.add(30,5

d.add(40,5

d.add(50,5

d.add(60,5




Terlihat bahwa angka yang bergandengan dengan angka 5 (lima) akan menjadi cabang dari menu --> d.add(5,1

begitupun angka yang bergandengan dengan angka 3 (tiga) akan menjadi cabang dari menu --> d.add(3,1




Ciri selanjutnya adalah tulisan yang tertera di samping icon selalu di dalam tanda petik (''), formasinya misal seperti ini :




d.add(10,3,'','','','','');




Jika di jabarkan denga isi menu, seperti ini :




d.add(10,3,'isi ke 1','isi ke 2','isi ke 3','isi ke 4','isi ke 5''isi ke 6');







isi ke 1 = adalah tulisan yang akan muncul terlihat langsung

isi ke 2 = adalah alamat yang di tuju apabila di klik tulisan dari isi ke 1

isi ke 3 = adalah judul atau titel atau tulisan yang akan muncul ketika mouse menyorot pada isi ke 1, akan tetapi
ini berlaku bagi induk yang tidak mempunyai cabang, misal menu : my frienster.

isi ke 4 = terus terang saya tidak tahu pasti, tapi ada kemungkinan untuk alamat image

isi ke 5 = adalah untuk alamat image icon yang mau di munculkan

isi ke 6 = adalah untuk alamat image icon yang akan menggantikan icon isi ke 5




Misal :





d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');

Blogroll = tulisan yang kan muncul pada menu induk

http://amen24.googlepages.com/globe.gif (isi ke 5) = icon yang mau dunculkan di samping tulisan Blogroll

http://amen24.googlepages.com/globe.gif (isi ke 6) = icon yang mau dunculkan ketika tulisan Blogroll di klik (akan tetapi dalam hal ini alamatnya sama, maka gambar icon seolah
tidak mengalami perubahan)






dan masih banyak ciri-ciri lainnya yang dapat memudahkan sobat untuk mengnalinya.





Bagaimana sudah jelaskah? atau masih tetap bingung? biar tidak terlalu bingung mending langsung
bikin menu dtree nya, silahkan ikuti langkah-langkah berikut ini, akan tetapi jangan lupa untuk membuat Backup data dari template sobat:




  • Untuk template Klasik





    1. Sign in di blogger
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode HTML yang ada, lalu save untuk back up
    5. Simpan kode berikut di bawah kode <title><$BlogPageTitle$></title> :
      6. <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" /> <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>
    6. Copy kode berikut, lalu paste pada kode sidebar sobat (link nya harus di ganti dengan milik sobat):

      7. <div class="dtree">

      <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

      <script type="text/javascript"> <!--

      d = new dTree('d');

      d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com'); d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik'); d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html'); d.add(5,1,'Free css menu navigation'); d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html'); d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html'); d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif'); d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif'); d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif'); d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif'); d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif'); document.write(d);

      //--> </script>

      </div>
    7. Klik tombol Simpan Perubahan Template
    8. Selesai.





  • Untuk Template Baru






    1. Sign in di blogger
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik tulisan Download Template Lengkap, save dulu untuk backup data biar aman
    5. Copy paste kode berikut di atas kode </head>
      6. <link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css" /> <script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script>
    6. Klik tombol Simpan Template
    7. Klik menu Elemen Halaman yang ada di sebelah atas monitor
    8. Klik tulisan Tambahkan sebuah Elemen Halaman
    9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript
    10. Copy paste kode berikut pada kotak yang muncul (ganti link nya dengan milik sobat)

      11. <div class="dtree">

      <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

      <script type="text/javascript"> <!--

      d = new dTree('d');

      d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com'); d.add(1,0,'Free template & navigation') d.add(3,1,'free template',''); d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html'); d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html'); d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html'); d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html'); d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html'); d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html'); d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html'); d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html'); d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html'); d.add(100,3,'template klasik'); d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html'); d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html'); d.add(5,1,'Free css menu navigation'); d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html'); d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html'); d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html'); d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html'); d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html'); d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html'); d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html'); d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html'); d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif'); d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif'); d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif'); d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif'); d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif'); d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif'); document.write(d);

      //--> </script>

      </div>
    11. Klik tombol Simpan
    12. Klik pada elemen yang barusan di buat, tahan lalu geser pada tempat yang di inginkan (di drag & drop)
    13. Klik tombol Simpan yang berada di sebelah atas
    14. Selesai. Silahkan lihat hasilnya





    Huuuuuhhh..... cape uy nulis tutorial ini, dua malem baru deh kelar..... tapi alhamdulillah, akhirnya bisa juga di posting.



    Selamat mencoba !
    newer post

    Buat Logo & Image Button

    0 komentar
    Bagi para sobat yang sudah mahir menggunakan program desain grafis semisal adobe photoshop ataupun coreldraw serta teman-temannya yang lain, membuat sebuah logo bukanlah sebuah pekerjaan yang sulit, dan mungkin tutorial ini menjadi tidak menarik untuk di baca. But barangkali ada sebagian dari para sobat sekalian yang satu nasib dengan saya, sebenarnya saya pun boleh di katakan tidak awam banget dengan program-program desain grafis tersebut, akan tetapi tak cukup hanya menguasai tentu saja di perlukan suatu daya kreasi atau imajinasi yang tinggi untuk menciptakan sebuah logo.

    Nah kalau ada diantara sobat sekalian yang senasib dan sepenanggungan seperti saya (lho ko jadi ngawur ngomongnya)jangan dulu berkecil hati, seperti biasa ada pepatah mengatakan banyak jalan menuju Roma ((irama)kaya postingan dulu...dah basi)untuk membuat logo kita bisa memakai jasa situs di internet, salah satunya yaitu cooltext.com, Silahkan ikuti langkah-langkah berikut ini :

    1. Silahkan buka alamat http://cooltext.com
    2. Lalu klik tulisan Design a Logo
    3. Klik gambar contoh logo yang sobat sukai
    4. Tulis tulisan yang ingin di jadikan logo di sampimg tulisan Logo Text. Misal : Blog Tutorial
    5. Tulis ukuran yang di inginkan di samping Tulisan Text Size. Misal : 50
    6. Klik logo warna-warni disamping kotak yang ada tulisan Text Color untuk memilih warna tulisan (text).silahkan pilih warna yg sobat sukai
    7. Pilih format image disamping tulisan file format. sebaiknya .JPG atau .GIF
    8. Klik tombol yang bertuliskan Render Logo Design
    9. Tunggu beberapa saat ketika proses pembuatan logo berlangsung
    10. Lihat hasil logo, sudah cocok apa belum? bila belum cocok, klik tulisan Edit this logo ulangi langkah diatas, rubah yang sobat inginkan. Jika sudah cocok, klik tulisan Download Image untuk kita simpan di PC kita
    11. Selesai. Sobat sudah mempunyai sebuah logo.



    Agar logo yang kita buat tadi bisa tampil di blog, sobat harus upload gambar tersebut ke blogger.com atau melalui situs lain. Tapi saya lebih suka menyimpannya di situs lain misal www.photobucket.com.

    Untuk proses upload di photobucket.com, silahkan ikuti langkah-langkah berikut :

    1. Silahkan buka alamat http://www.photobucket.com,
    2. Jika belum terdaftar di situs ini, silahkan daftar dulu (gratis bo) dengan meng klik tombol yang bertuliskan Join Now pada sudut kanan atas layar
    3. Sekarang saya asumsikan sobat sudah terdaftar (pastilah cara daftarnya bisa kan)
    4. Silahkan Sign In dengan Id sobat
    5. Bila sudah berada pada halaman Account sobat, Klik tombol yang bertuliskan Browse... Silahkan pilih logo yang tadi di buat
    6. Klin tombol yang bertuliskan Upload
    7. Tunggu beberapa saat ketika proses upload berlangsung
    8. Setelah upload selesai, akan di perlihatkan gambar logo serta kode HTML nya
    9. Copy kode HTML yang ada di sebelah tulisan URL Link. Paste pada program notepad
    10. Silahkan klik tulisan Log Out untuk keluar dari account sobat. tutup layar browser sobat




    Nah sekarang sobat tinggal memasukan kode gambar tadi ke blog ke blog sobat, cuma ada sedikit kode yang harus di tambahkan, karena kode tadi baru berupa Link Image saja. Contoh kode link image : http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg. Disini sobat harus menambahkan kode <img src="Link URL logo">, sehingga kode tadi menjadi seperti ini :

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

    Maka contoh hasilnya akan seperti ini :





    Untuk cara memasukan kode HTML kedalam blog sudah sering di bahas, jika lupa silahkan klik di sini.

    Sebagai tambahan, kode HTML di atas adalah kode untuk menampilkan image dengan ukuran yang sebenarnya. Apabila sobat ingin memperbesar atau memperkecil image tersebut, sobat bisa menambahkan beberapa atribut ke dalam kode HTML nya. Contoh : image tadi ingin saya tampilkan dalam ukuran 100px X 40px , maka kode tersebut menjadi seperti ini :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/logoblogtutorial.jpg" width="100" height="40" alt="ini contoh saja">

    sedikit clue, kode width="..." yaitu untuk ukuran lebar image, jadi untuk memperbesar atau memperkecil image, sobat tinggal menambah atau mengurangi nilainya. kode height="..." yaitu untuk ukuran tinggi image, sobat tinggal menambah atau mengurangi nilainya. Untuk alt="..." yaitu untuk menampilkan tulisan ketika mouse berada pada image tersebut.

    Sebagai contoh, hasil dari kode diatas adalah sebagai berikut, silahkan sorot image tersebut untuk melihat efek kode alt="..." :


    ini contoh saja



    Bagaimana sudah bisa kan? pasti bisa, kan sudah di coba. Sekarang bagaimana cara membuat image button? langkahnya sama saja dengan langkah-langkah di atas, cuma pada saat berada di situs cooltext.com yang sobat klik adalah tulisan Desiggen a Button bukan Design a Logo, contoh image button :










    Ok sobat, selamat menikmati hasil karyanya


    Bagi yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek, kang Rohman rekomendasikan anda belajar di sini «« sok atuh di klik biar situsnya keluar yahoo
    newer post

    Membuat foto animasi

    0 komentar
    Lagi-lagi saya berbicara tentang animasi, memang dengan animasi bisa bikin hidup
    jadi hidup ( kaya iklan aja ). Ya dalam kesempatan kali ini akan coba di bahas tentang
    bagaimana cara membuat animasi gambar ataupun foto. Bagi para sobat (mulai sekarang saya akan membiasakan diri menyebut anda menjadi sobat, biar lebih familier ya) yang sudah
    terbiasa menggunakan program animasi semisal MacroMedia Flash Player ataupun teman-temannya
    sudah barang tentu bukan hal yang wah ataupun aneh, tapi bagi sekelompok orang seperti saya ini,
    membuat animasi foto adalah suatu hal yang sangat sulit sekali.




    Adakah diantara para sobat blogger yang seperti saya? jika jawabannya ada ya kita emang senasib (hiduplah senasib),
    tapi jangan dulu patah semangat sobat blogger, pepatah bilang banyak jalan menuju rhoma (irama).. dalam hal inipun
    sama ada jalannya yakni kita bisa menggunakan jasa situs-situs pembuat animasi. Di internet buaanyak
    sekali situs pembuat animasi foto, jumlahnya ribuan atau bahkan jutaan. Nah sebagai contoh yaitu http://www.slide.com.
    Untuk membuat sebuah foto animasi di slide.com, silahkan ikuti langkah-langkah berikut :




    1. Silahkan buka situs www.slide.com
    2. Langkah pertama yaitu sobat harus daftar dahulu pada situs tersebut
    3. Klik tulisan Sign Up untuk melakukan pendaftaran (daftar gratis)
    4. Masukan alamat email sobat pada kolom yang disediakan. isi juga password yang diinginkan
    5. Jika sudah, silahkan klik tombol sign Up, dan otomatis sobat sudah masuk ke halaman account sobat
    6. Langkah selanjutnya adalah melakukan pembuatan animasi
    7. Klik style, untuk memilih gaya dari animasi
    8. klik skin, untuk memilih bingkai animasi
    9. klik Size untuk memilih ukuran
    10. Klik Tombol Select Image, lalu masukan foto/image yang ingin sobat masukan
    11. klik tombol Upload untuk melakukan proses upload foto
    12. Jika proses upload selesai, klik tombolSave
    13. Copy kode HTML yang di berikan, lalu paste pada program notepad
    14. Klik tulisan Log Out untuk keluar dari situs tersebut. Silahkan tutup halaman browser
    15. Langkah selanjutnya adalah memasukan kode HTML animasi tersebut ke dalam blog sobat, nah untuk cara memasukan kode HTML sudah sering saya bahas
      pada postingan terdahulu, jika lupa silahkan klik di sini





    Contoh gambar animasi :












    Ada pula contoh animasi dari http://www.picturetrail.com :




    Get Your Own!





    Atau para sobat bisa juga daftar di http://www.flickr.com




    Selamat mencoba !
    newer post

    Cara Pasang Musik Pada Blog

    0 komentar
    Mohon maaf, karena artikel ini sudah lama sekali di buat maka situs-situs yang saya contohkan banyak yang sudah tidak aktif.


    Rupanya ada salah seorang sobat kita yang tertarik memasang musik pada blog dan
    belum mengetahui caranya. Oleh karena itu dalam kesempatan kali ini, saya akan coba membahas tentang bagaimana cara memasukan musik ke dalam blog.



    Untuk memasang musik di blog, kita bisa memanfaatkan situs penyedia musik gratisan yang banyak bertebaran
    di internet, yang penting kita jeli untuk mencarinya. Pada intinya ada tiga jenis situs penyedia musik yaitu :



    1. Situs tersebut menyediakan berbagai pilihan lagu yang bisa kita pilih sesuai dengan selera kita
    2. Situs tersebut tidak menyediakan lagu, tapi kita harus upload lagu dari komputer kita
    3. Situs tersebut menyediakan berbagai pilihan lagu, atau bisa juga kita upload lagu dari komputer




    Tentu diantara ketiganya ada kelebihan dan kekurangannya. Keuntungan menggunakan jasa situs yang pertama yaitu kita tidak perlu mempunyai lagu sendiri, kita tinggal pilih lagu yang di sukai lalu ambil kode HTML nya kemudian masukan ke blog kita, prosesnya sangat cepat dan praktis. Tapi kekurangan nya yaitu terkadang lagu yang kita sukai tidak tersedia di situs tersebut.



    Untuk situs kedua, keuntungannya yaitu kita bisa memasukan lagu yang kita sukai tanpa harus tergantung dari situs tersebut jadi apapun lagunya pasti bisa yang penting ya kita harus mempunyai file lagu yang harus di upload. kekurangannya yaitu karena kita harus upload lagu ke situs tersebut maka dalam proses upload biasanya memerlukan waktu yang cukup lumayan lama, sehingga sedikit membosankan ketika melakukan proses upload juga tentunya biaya berinternet kita jadi semakin bengkak.



    Untuk situs ketiga, untuk saat ini saya baru mengetahui satu situs saja, tolong kepada para sobat yang mengetahui situs-situs yang masuk kategori ini untuk menginformasikan pada kotak komentar agar di ketahui oleh para sobat lainnya. Nah untuk situs ini kelebihannya ya kita lebih bisa memilih, mau pake lagu yang tersedia atau mau upload juga bisa. tapi ada kekurangannya yaitu tidak di sediakannya panel kontrol untuk para pengunjung, jadi lagu yang kita pasang tidak bisa di apa-apakan oleh para pengunjung sehingga akan jalan dengan sendirinya, yang perlu kita pikirkan adalah lagu yang kita sukai belum tentu di sukai oleh para pengunjung, sehingga ini akan mengganggu kenyamanan bagi para pembaca blog ita.



    Yo'i sobat, kayanya terlalu lama dengan fendefinisian ya, agak basi jadi membosankan...sorry bos. Kita kembali ke (laptop) topik bahasan semula yakni memasang lagu pada blog. Contoh yang pertama adalah memanfaatkan situs yang telah menyediakan berbagai lagu tanpa harus upload terlebih dahulu, saya ambil contoh www.song2play.com. silahkan ikuti langkah-langkah berikut :



    1. Silahkan kunjungi www.song2play.com
    2. Masukan judul lagu yang anda inginkan pada search engine yang tersedia. Contoh : Hotel California. Atau menuliskan nama penyanyi atau grup bandnya. Contoh the Eagle
    3. Jika judul lagu belum muncul, biasanya ada tulisan Click here to get more Result. klik aja tulisan tersebut
    4. Setelah terlihat beberapa judul lagu, klik pada judul lagu yang sedang sobat cari, secara otomatis akan ditampilkan kontrol navigasi dan lagu yang dipilih tadi akan di perdengarkan
    5. Di pojok kiri bagian bawah ada kotak yang sudah di beri tanda centang, yaitu AutoStart, Show song Title. AutoStart artinya ketika pengunjung mengunjungi blog sobat, maka lagu akan langsung play. Nah jika tidak mau langsung play alias memberi kesempatan kepada pengunjung untuk memilih sendiri apakah mau mendengarkan lagu atau tidak, sobat hilangkan tanda centang tadi dengan cara mengkliknya
    6. Show Song Title artinya pada panel navigasi akan di munculkan judul lagu yang di muat. Jika tidak mau muncul ya hilangkan saja tanda centangnya
    7. Copy seluruh kode HTML yang di sediakan pada text area, paste pada notepad. Silahkan close window situs tersebut
    8. Langkah selanjutnya yaitu sobat tinggal masukan kode HTML yang diberikan tadi ke dalam blog, nah untuk memasukan kode HTML ke dalam blog sudah sering saya bahas pada postingan terdahulu, jika sobat lupa silahkan klik di sini




    Untuk contoh silahkan klik tombol play pada panel navigasi di bawah, ini sengaja saya setting tidak Auto Start :




    Song:

    The Eagles - Hotel California






    Sedikit tambahan, jika sobat ingin menyesuaikan lebar panel navigasi agar sesuai dengan sidebar blog sobat, sobat bisa merubah nilai yang ada pada kode HTML lagu tersebut yaitu nilai width=...px.
    Contoh : didalam kode tersebut ada kode width=310px, untuk memperkecilnya kita tinggal perkecil nilai px nya. Contoh : width=200px.





    Situs yang serupa dengan ini adalah www.songhere.com. Mungkin pemiliknya memang sama. Nah langkah-langkah mendapatkan kode HTML dari situs ini mirip dengan langkah-langkah diatas,


    Contoh panel navigasi dari www.songhere, silahkan klik tombol play nya :




    Song: White Lion - When the children cry





    Tambahan lagi, untuk yang di situs www.songhere ini tidak di sediakan pasilitas untuk memilih fasilitas AutoStar atau tidak, jadi kalau kita memakainya akan langsung play tanpa harus di klik oleh pengunjung, untuk mengakalinya
    kita harus mengganti sendiri kode nya, silahhkan sobat cari di dalam kode lagu tersebut yang bertuliskan autostart=true, ganti tulisan true menjadi false sehingga kode tadi akan menjadi seperti ini autostart=false, contoh hasil kode yang sudah saya rubah adalah lagu dari white lion di atas, yang untuk menjalankannya harus di klik dulu tombol play nya.





    Nah itu tadi contoh situs yang menyediakan berbagai lagu yang bisa kita pilih, sekarang contoh situs yang harus meng upload lagu dari komputer kita salah satunya adalah www.tunefeed.com



    Untuk langkah-langkahnya, silahkan ikuti seperti di bawah ini :



    1. Silahkan buka situs www.tunefeed.com
    2. Klik kotak di sebelah tulisan widget Color, pilih warna panel navigasi yang sobat sukai
    3. Klik tombol yang ada tulisan Click here to share your music
    4. Klik tombol yang bertuliskan Add Music or Photos
    5. Masukan file foto atau pun lagu yang sobat miliki
    6. Klik tombol upload
    7. Sambil menunggu proses upload, sobat isi data-data diri sobat pada kolom yang di sediakan
    8. Tunggu sampai proses upload selesai
    9. jika proses upload selesai, sobat akan di minta untuk mngecek email di berikan tadi
    10. silahkan buka email dari www.tunefeed.com bila sudah sampai
    11. Klik link ntuk melakukan aktivasi keanggotaan, nah dengan mengklik link tadi otomatis sobat sudah berada pada halaman acount sobat
    12. Klik tulisan Share This Tunefeed
    13. Pilih volume yang diinginkan pada menu dropdown di samping tulisan Select Volume
    14. Pilih mode player, mau autoplay atau tidak pada menu dropdown di samping tulisan auto-play, sebaiknya pilih No
    15. Copy seluruh kode yang di berikan pada text area kemudian paste di notepad
    16. Klik tulisan Log Out untuk keluar dari halaman account sobat
    17. Silahkan close window browser sobat
    18. Tugas selanjutnya yaitu memasukan kode HTML yang sudah diberikan ke dalam blog. Untuk caranya sudah saya bahas pada tulisan di atas
    19. Selesai





    Contoh panelnya yaitu seperti di bawah ini, silahkan klik tombol play untuk mengaktifkan nya, tunggu beberapa saat, loadingnya agak sedikit lama :





    newer post

    IE + FireFox dalam satu komputer

    0 komentar


    Topik ini saya tulis bermula dari pengalaman saya beberapa bulan yang lalu. Sekarang saya mau flash back sebentar mudah-mudahan tidak membosankan. Ceritanya begini para sobat, di kantor tempat saya bekerja sekarang nih mempunyai beberapa buah komputer, yaitu buat orang-orang bagian akunting, resepsionis, teknisi, serta si bos sendiri. Ya kalo di itung-itung ada 8 buah komputer. Dari dulu, yang namanya browser internet pasti saya selalu memakai Internet Explorer dari Microsoft, tidak pernah browser yang lain.




    Saat itu pekerjaan rada dikit, tentunya saya bisa sedikit bersantai ria. Iseng-iseng
    saya pinjem tuh kompi nya si mba tukang akunting temen saya, mau liat technorati barangkali ada yang nge link baru ke blog saya.
    setelah di buka ntuh kompi, eh saya lihat ada dua browser dalam ntuh kompi yaitu Internet Explorer plus Mozilla FireFox. Wah nyobain ah pake FireFox, katanya sih lebih cepat dan aman di banding dengan Internet Explorer yakni si FireFox ini lebih
    kebal terhadap virus-virus semacam Trojan dan teman-temannya.



    Aku buka deh langsung ntuh si FireFox, hasilnya lumayan emang rada cepet sih, tapi kayanya rada - rada ada yang beda pada tampilan gambarnya, aku hiraukan saja ga mau mikir panjang-panjang and langsung aja ke www.technorati mau cek yang nge -link ke blog saya. Sesudah di cek, benar saja ada yang pasang link baru tanpa memberi tahu, aku langsung aja di klik ntuh linknya, betapa kagetnya daku saat itu, lho ko gambarnya begini acak-acakan nih blog ada gambarnya yang kepinggir, melorot dan lain sebagai, pokoknya pemandangan yang tidak mengasikan, apa pemilik blog ini ga sadar
    apa, blognya ancur begitu. Setelah kejadian yang kurang mengenakan tadi, buru-buru deh aku lihat blog ku, takutnya kaya kejadian tadi. Hasilnya sedikit melegakan, wah untung blogku tidak berantakan, cuma ada sedikit perbedaan saja. Karena penasaran, aku tutup tuh si FireFox dan langsung buka browser pake IE, dan aku balik lagi ke blog yang berantakan tadi, dan ternyata hasilnya sungguh mengherankan juga, yang tadinya aku lihat di FireFox sangat berantakan kalo di lihat pake IE sangat tersusun rapi dan menarik.



    Itu tadi pengalaman pertama, pengalaman yang kedua, aku pake IE seperti biasa. yah yang namanya blogger musti rajin-rajin blog walking biar banyak temen. ceritanya saya mampir di suatu blog, wah ini blog berantakan banget (menurut saya lho). Trus baca-baca tuh isi blog, eh ada sedikit artikel dari sang pemilik blog itu sendiri, sedikit penggalan isi artikel tersebut kira-kira ada kata-kata begini :
    Buset deh, kebiasaan pake FireFox pas dilihatdi IE, blog ku ancur begini ya.



    Menanggapi dua pengalaman tadi, saya mempunyai kesimpulan bahwa sebaiknya bagi para blogger mempunyai banyak browser internet dalam satu komputer, ini tentunya untuk memaksimalkan hasil dari blog kita, terutama bagi para sobat yang blognya berupa blog untuk bisnis, satu pengunjung ke blog sobat, berati satu peluang untuk mendapatkan keuntungan. Nah jika blog para sobat tidak menarik karena sebab tadi dari
    perbedaan pemakaian browser, tentunya jangankan mau membaca artikel penawaran bisnis dari sobat baru sampaipun langsung kabur. Ingat, di luar sana ribuan orang atau bahkan jutaan orang memakai browser yang berbeda dengan kita, maka itu tadi sobat harus mempunyai banyak browser pada komputer sobat, minimal dua browser paling terkenal di dunia yakni Internet Explorer dan Mozilla FireFox.



    Bagi para sobat pengguna template buatan bukan dari blogger sendiri, coba cek blog sobat, barangkali blog sobat berantakan kalau di lihat di browser lain. Bagi para sobat pecinta program HTML text berjalan <marquee>, hati-hati karena program ini tidak di mengerti oleh FireFox, jadi jika sobat menyimpan text terlalu banyak dalam marquee, jangan-jangan blog sobat jadi melorot atau melebar kesamping karena kelebihan quota space. Bagi yang suka pake kode <BLINK> untuk mengedipkan hurup buat narik perhatian pengunjung, kode sobat tidak di mengerti oleh IE tapi di mengerti oleh FireFox. Tentunya dari masing-masing Browser ada kelebihan dan kekurangannya, ya pandai-pandailah kita mensiasatinya.






    Kalau di baca-baca, kayanya artikel kali ini bukan blog tutorial ya, lebih cenderung ke tips gitu. biarin aja ya, supaya ga bosen baca tutorial terus, cari yang beda gitu. Oke, thanks ya sobat, selamat mendownload FireFox nya.
    newer post

    Membuat Link (2)

    0 komentar
    Untuk anda pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah berikut ini :


    1. Login di blogger dengan ID anda
    2. Klik menu Layout
    3. Klik Page Elements
    4. Klik Add a Page Element
    5. Klik ADD TO BLOG pada menu Link List
    6. Tulis Judul link pada pada isian di sebelah form Title. Contoh dalam blog saya
      Adalah “ Link partner” atau silahkan terserah anda
    7. Isi nomor link yang ingin anda tunjukan di blog anda pada form Number of Links to show in list, jika anda ingin membatasi jumlah link yang akan di tampilkan, jika anda tidak mau membatasi silahkan di kosongkan saja.
    8. Pada form Sorting, silahkan anda pilih sort Alphabetically bila ingin link anda di urutkan berdasarkan huruf alphabet ( mulai dari A --> Z ), atau pilih sort revers Alphabetically apabila anda menginginkan Link yang anda buat di urutkan secara terbalik ( mulai dari Z --> A ). Bila anda tidak menginginkan keduanya, yakni Link yang tampil sesuai dengan yang anda buat, silahkan pilih Don’t Sort
    9. Tulis alamat URL yang akan di Link pada form New Site URL. Contoh : http;//kolom-tutorial.blogspot.com
    10. Tulis nama atau tulisan yang ingin muncul pada link yang anda buat pada form New site Name. contoh : Blog Tutorial.
    11. Klik Add Link, jika link yang anda buat lebih dari satu. Silahkan isi semua form sesuai dengan langkah di atas.
    12. Klik SAVE CHANGES bila sudah selesai
    13. Bila anda ingin menempatkan Link yang anda buat tadi, silahkan arahkan mouse anda ke kotak link yang baru anda buat, lalu tekan mouse sambil di tahan pindahkan ke tempat yang anda inginkan ( di drag & drop ) .
    14. Klik SAVE. Selesai







    Membuat link dari gambar atau image





    Apabila anda mempunyai sebuah gambar, dan gambar tersebut ingin di jadikan sebuah link. Maka caranya seperti di bawah ini :



    1. Upload gambar yang anda miliki ke hosting tempat menyimpan gambar, contoh http://www.photobucket.com.
    2. Jika anda sudah mengupload gambar anda, maka gambar tersebut akan di beri alamat URL, copy alamat tersebut pada notepad. Sebagai contoh gambar chicklet blog tutorial di samping mempunyai alamat URL :



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



      Nah jika anda ingin membuat gambar tersebut menjadi sebuah link, maka kode yang di tulis adalah :



      <a href="http://kolom-tutorial.blogspot.com"><img src="http://i162.photobucket.com
      /albums/t253/rohman24/animasichicklet.gif"></a>


      (kode dalam satu baris)



      jika ingin dalam window baru :



      <a href="http://kolom-tutorial.blogspot.com" target="_blank"><img src="http://i162.photobucket.com
      /albums/t253/rohman24/animasichicklet.gif"></a>



      (kode dalam satu baris)





    Link berjudul



    Mungkin anda bingung, ko judul bahasan topik ini judulnya Link berjudul? Untuk memperjelas bahasan ini, silahkan anda kembali ke halaman atas blog ini lalu arahkan mouse anda ke tulisan Resep bisnis, coba diamkan sebentar pada link tersebut, maka tidak lama kemudian akan muncul tulisan Mau belajar bikin website sendiri silahkan klik disini . Nah sekarang mungkin anda sudah mengerti maksud saya, jadi dalam sebuah link ada kata-kata untuk menekankan ajakan anda kepada para pembaca untuk mengklik link tersebut. Untuk membuat judul link ini sangat mudah, yakni anda hanya harus menambahkan title=" ... " pada link yang anda buat. Contoh seperti yang saya berikan di atas :



    <a href="http://www.resepbisnis.com/?id=rohman target="new" title="mau belajar bikin website sendiri silahkan klik di sini">Resep bisnis</a>




    mudah bukan. Selamat mencoba.


    newer post

    Membuat Link (1)

    0 komentar
    Dalam dunia blog, tentu anda tidak asing lagi dengan yang namanya link.
    Apabila anda seorang blogger (tukang ngeblog kata orang jakarta mah),
    tentu saja membuat link adalah sebuah keharusan. Berbeda dengan website pada umumnya,
    di jagat per blog-an ada yang namanya link exchange atau bertukar link dengan blog lain,
    jadi kalau anda tidak bisa membuat link, ini dapat berakibat anda akan di asingkan alias
    di cuekin oleh blogger lainnya karena di anggap pelit dalam memberikan link.
    Dalam topik membuat link ini, saya akan mengulasnya dalam beberapa sub bagian yakni :




    Link pada posting-an



    Jika anda membuat sebuah artikel untuk di posting, trus di dalam nya ingin di buatkan sebuah link,
    misalkan artikel tersebut bercerita tentang bisnis yang anda ikuti pada sebuah website di internet,
    lalu anda ingin mengajak para pembaca artikel tersebut untuk mengunjungi website yang anda ceritakan.
    Misalkan dalam artikel tersebut ada kata –kata seperti Jika anda tertarik silahkan anda klik disini,
    nah untuk membuat link dari kata-kata tersebut silahkan ikuti langkah-langkah berikut :


    1. Highlight kata-kata yang ingin di buat link, contoh di atas adalah klik disini.
    2. Klik ikon yang bergambar seperti ini
      yang berada pada toolbar, maka setelah itu akan muncul tulisan http:// pada window baru yang berbentuk seperti
      gambar di bawah ini :
    3. Isi kotak yang ada tulisan tersebut dengan alamat situs yang anda inginkan, misalkan : http://www.resepbisnis.com/?id=rohman
    4. Klik OK. Selesai




    Link dengan window baru



    Mungkin anda punya pikiran, kalau anda membuat sebuah link trus pembaca mengkliknya, anda kwawatir kalau pengunjung blog kita akan meninggalkan blog kita. Untuk meminimalisir hal tersebut, bisa dilakukan dengan cara membuat window baru, jadi ketika pengunjung mengklik salah satu link yang kita buat, halaman blog kita tidak akan tertimpa dengan halaman baru tapi yang terjadi adalah halaman blog anda tetap ada dan halaman yang baru di klik akan muncul terpisah. Sebagai contoh, silahkan anda klik tulisan Resep Bisnis atau Obral plus pada banner header diatas. Ketika anda mengkliknya, akan tercipta window baru. Untuk membuat link seperti ini dapat di lakukan dengan cara :


    1. Apabila sudah melakukan cara membuat link seperti keterangan diatas, klik menu
      Edit HTML tab yang ada pada toolbar.
    2. Pada tulisan yang kita link tadi akan muncul kode seperti ini ( contoh tulisan klik disini di link ke http://www.resepbisnis.com/?id=rohman :



      <a href="http://www.resepbisnis.com/?id=rohman">klik disini</a>



      maka disini anda harus menambahkan embel-embel kode HTML target="new' ataupun target="_blank" pada awal ataupun akhir kode tersebut . Contoh kode yang sudah di modifikasi adalah :




      <a href="http://www.resepbisnis.com/?id=rohman" target="new">klik di sini</a>



      atau :



      <a href="http://www.resepbisnis.com/?id=rohman" target="new">klik di sini</a>



      atau bisa juga seperti ini :



      <a href="http://www.resepbisnis.com/?id=rohman" target="_blank">klik di sini</a>




    Buat Links di sidebar



    Bila anda berkeinginan membuat link kepada teman anda di sidebar, cara termudah adalah seperti ini : ( khusus untuk template klasik)


    1. Sign in di blogger dengan id anda
    2. Klik menu TEMPLATE
    3. Klik Edit HTML
    4. Klik Edit
    5. Klik Find (on this page)… --> untuk mempercepat pencarian
      6. find
    6. Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah Links para sahabat, klik Find
    7. Tuliskan link yang anda inginkan, contoh jika anda ingin membuat link ke blog saya, maka kode yang di tulis adalah :
      8. <a href="http://kolom-tutorial.blogspot.com" target="_blank">Blog Tutorial</a>
    8. Klik Save Template Changes. Selesai


    Sedikit clue untuk anda. Jika anda sedang mengotak-atik kode Template sebaiknya sebelum di obrak-abrik, sebaiknya anda copy terlebih dahulu seluruh template ke dalam notepad, ini untuk jaga-jaga apabila anda melakukan kesalahan, anda bisa mengembalikan kesemula karena sudah mempunyai backup data template tersebut. Atau bisa juga sebelum anda klik Save Template Changes sebaiknya anda klik terlebih dahulu tombol preview untuk melihat perubahan yang anda lakukan, apabila sudah cocok dengan perubahan tersebut baru di save Template Changes.



    Bersambung : silahkan klik di sini

    newer post

    Cara Memposting Artikel

    0 komentar
    Bagi anda yang mengalami sedikit kendala tentang tata cara memposting suatu artikel kedalam blog, maka kali ini akan di bahas tentang tata cara posting di blogger.com.Di dalam menu posting ada beberapa toolbar yang bisa anda gunakan.Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara teman kita yang masih bingung.



    Toolbar yang ada ketika posting :



    --> Untuk merubah jenis hurup yang di gunakan



    --> Untuk merubah ukuran hurup (heading)



    --> Untuk Menebalkan hurup



    --> Untuk memiringkan hurup



    --> Untuk merubah warna hurup



    --> Untuk membuat link



    --> Untuk membuat artikel menjadi rata kiri



    --> Untuk membuat tulisan menjadi di tengah



    --> Untuk membuat artikel menjadi rata kanan



    --> Untuk membuat artikel menjadi rata kiri dan rata kanan



    --> Untuk membuat sub bahasan oleh angka



    --> Untuk membuat sub bahasan oleh bullet



    --> Untuk mengecek spelling



    --> Untuk memasukan gambar(upload gambar)



    --> Untuk membuat artikel dalam kode HTML




    --> Untuk membuat artikel dalam mode Compose (biasa)




    --> Untuk me review (melihat) artikel




    Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan yang akan di edit, kemudian tekan tombol toolbar yang di inginkan.



    Langkah-langkah dalam memposting suatu artikel:


    1. Sebaiknya klik terlebih dahulu “ Edit HTML”,jika langsung di mode “Compose”, sering terjadi hang pada komputer (pengalaman saya pribadi). Copy artikel yang telah anda buat sebelumnya, kemudian paste di area posting. Edit sesuai dengan kemauan anda.
    2. Klik tombol “ compose “ untuk melakukan editing (jika anda masih bingung dengan kode HTML).
    3. Klik tombol tool yang berlambang “ panorama” berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi posting-an anda.
    4. Klik tombol “ Preview “ untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.
    5. Klik tombol “ publish “. Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh dunia.
    newer post

    Memilih Template

    0 komentar


    Bagi sobat yang sudah melakukan beberapa setting-an seperti posting terdahulu, langkah selanjutnya yang perlu sobat lakukan adalah memilih template.




    Sekilas tentang template



    Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang sobat lihat sekarang, seperti banner diatas, background warna putih, kolom-kolom di samping kanan, serta semua yang sobat lihat sekarang adalah salah satu bentuk dari desain template.



    Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik untuk di lihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang.



    Hmmm.. kayanya cukup deh pembahasan tentang apa itu template, keburu bosan kalau lama-lama….Sekarang langsung aja ke topik utama, yaitu langkah-langkah pemilihan template di blogger.com :


    • Silahkan sobat login terlebih dahulu seperti biasa dengan memakai user name milik anda ( jangan milik saya….emang nya sampeyan mau jadi hacker ya


    • Klik "Tata Letak" (bila sobat menggunakan blogger baru) atau klik "Template" (bila sobat menggunakan template classic).


    • Klik "Pick New Template", silahkan sobat pilih template yang sobat suka. Sebelum memutuskan dalam memilih "template" ini, sebaiknya anda lihat terlebih dahulu satu persatu contoh layout yang di sediakan dengan cara meng klik tulisan "preview template". Jika di rasa sudah menemukan yang paling sobat sukai, silahkan klik tulisan "Save template" yang ada di sebelah kanan atas, selesai. :




    Mungkin sobat pernah mengunjungi beberapa blog di internet yang menggunakan blogger.com (blogspot), akan tetapi template yang di gunakan tidak ada dalam pilihan ketika memilih template. Ini ada kemungkinan bahwa template yang di gunakan adalah template buatan bukan dari blogger sendiri.



    Di internet banyak sekali situs-situs yang memberikan template secara gratis untuk di pakai di Blogger (blogspot), Jika ingin melihat-lihat berbagai template buatan bukan dari blogger.com silahkan klik di sini. T



    newer post

    Membuat Read More untuk Template klasik

    0 komentar

    Update : Tutorial ini khusus bagi anda yang masih menggunakan template klasik, jika anda sudah menggunakan template baru (xml/beta), silahkan baca petunjuk membuat read more di sini!






    Wah judul yang aneh, "membuat Read More" maksudnya apa? Begini sobat, sebenarnya saya kurang setuju dengan judul tersebut, tadinya saya ingin memberi judul "Membuat menu Selengkapnya", tapi berhubung kata "Read More" yang paling di kenal di jagad blog, ya saya pun ikut-ikutan (dasar tukang ngekor). Ya sudahlah kepanjangan ngobrolnya. Kita mulai pembahasannya. Bagi para sobat yang baru mulai membuat blog, mungkin belum mengetahui informasi ini dan mudah-mudahan dengan membaca artikel ini dapat menambah pengetahuan kita tentang yang namanya nge-blog.



    Sobat mungkin melihat bahwa artikel-artikel saya terlihat hanya berupa judul-judul dengan satu atau dua buah paragrap saja, dan untuk melihat keseluruhan artikel harus meng klik link yang bertuliskan >> Selengkapnya...", ini di sebut pengkaburan
    atau pengkamuflasean postingan (ribet banget nyebutnya). Bagi sobat yang baru posting artikel hanya satu atau dua artikel saja mungkin menganggap tidak perlu menyingkat artikel sobat, namun jika nanti artikel sobat sudah banyak, maka mungkin saja ada terbersit ingin membuat menu ini.



    Oke... kelamaan ngawurnya, mending langsung saja. Untuk membuat menu Read more kita harus menambahkan beberapa kode HTML ke dalam template blog kita. Tapi untuk postingan kali ini, saya khususkan untuk blogger yang memakai template klasik saja, untuk yang memakai template baru silahkan tunggu pada postingan yang akan datang.




    Silahkan ikuti langkah-langkah berikut :



    • Login ke blogger.com dengan id sobat
    • Klik menu bertuliskan Template
    • Klik menu Edit HTML
    • jangan lupa Copy seluruh kode template milik sobat lalu paste pada notepad dan kemudian simpan, untuk membuat back up data. Ini dimaksudkan apabila terjadi kesalahan dalam template setelah kita otak-atik, kita masih punya cadangan data untuk mengembalikannya.
    • Copy kode HTML di bawah, kemudian paste persis di atas kode </style> :
      • <MainOrArchivePage> div.fullpost {display:none;} </MainOrArchivePage> <ItemPage> div.fullpost {display:inline;} </ItemPage> Untuk mempercepat pencarian kode </style>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis </style> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
    • langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode <$BlogItemBody$> :
      • <MainOrArchivePage><br/>

      <a href="<$BlogItemPermalinkURL$>">Read more!</a>

      </MainOrArchivePage>

       Lagi-lagi Untuk mempercepat pencarian kode <$BlogItemBody$>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis <$BlogItemBody$> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
    • Klik tombol yang bertuliskan SAVE SETTINGS





    • Langkah selanjutnya adalah klik menu Setting
    • Klik menu Formatting
    • Dibagian bawah menu tersebut ada kotak di samping tulisan Post Template, nah isi kotak kosong tersebut dengan kode di bawah ini :
      • <div class="fullpost"> </div> Sebenarnya langkah diatas tidak wajib dilakukan,akan tetapi ini di maksudkan agar ketika kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa harus di tulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode tersebut.
    • kemudian jangan lupa klik tombol Save Settings
    • Selesai






    Cara Posting Artikel




    Oke, sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu artikel agar ada menu Readmore nya.



    • Klik menu Posting
    • klik menu Edit HTML, nah di sana secara otomatis akan tampak kode yang kita simpan tadi, yakni :

      • <div class="fullpost"> </div> simpan artikel sobat yang ingin di tampilkan sebelum kode <div class="fullpost">, kemudian simpan sisa keseluruhan artikel setelah kode <div class="fullpost"> dan sebelum kode </div> Agar lebih jelas, saya beri contoh, misal artikelnya begini : Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul. <div class="fullpost"> dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik link yang bertuliskan Read more. </div> Hasilnya yang akan tampak pada blog kita adalah seperti ini : Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul. Read more!






    Bagaimana sobat, sudah jelaskan. bila belum jelas silahkan di tanyakan kembali pada komentar.



    Sedikit clue, kata Read more! sebenarnya bisa kita ganti sesuai dengan
    keinginan kita, misalkan kita rubah menjadi Baca selengkapnya..., Selengkapnya.., Lanjutannya... atau apa saja
    yang penting kata tersebut bisa memberi tahu kepada para pengunjung bahwa artikel kita ada kelanjutannya.




    Kode di atas sebenarnya ada alternatif lain, yakni memakai kode Span, jika berminat, ganti semua kode div menjadi Span.
    Hasilnya akan sama, cuma bagi para sobat yang suka posting pada menu compose, kode ini sering ada masalah di karenakan bertabrakan
    dengan perintah lain yang memakai kode Span.





    Akhirul kata selamat mencoba !

    newer post
    newer post older post Home
    Langganan: Postingan (Atom)