Pasang Feed di Blog

Mengutip sebuah permintaan yang saya kutif dari shoutbox yang kira-kira seperti ini :



"aku mau tiap ada artikel baru di blog ni aku bisa tahu diblog aku"



Permintaan tersebut melukiskan keinginan untuk selalu mengetahui apakah ada artikel baru atau tidak di blog ini dengan tidak harus bercape ria bolak-balik membuka browser. Bila ada pertanyaan apakah bisa kita memasang sesuatu di blog milik sendiri agar mengetahui perkembangan atau update terbaru dari blog yang kita senangi? jawabannya bisa, bahkan banyak cara yang bisa di tempuh.



Agar tidak terlalu memakan space, saya akan menerangkan hanya dengan satu cara yaitu memakai RSS feed. Apa itu RSS? RSS singkatan dari Rich Site Summary atau jika dalam bahasa indonesia adalah ringkasan dari isi sebuah situs (blog juga termasuk di dalamnya). Tapi dalam postingan kali ini saya tidak akan menerangkan secara gamblang tentang RSS feed tadi, bagi yang ingin tahu lebih jauh tentang ini sobat bisa baca di wiki indonesia.



Dari mana kita mengetahui alamat RSS feed blog milik kita? biasanya untuk alamat di blogger ditambah dengan --> atom.xml , jadi alamat feed untuk blog ini adalah :



http://kolom-tutorial.blogspot.com/atom.xml



Sekarang bagaimana cara memasang kode feed di blog milik kita? bagi sobat yang menggunakan template baru alias new blogger template cara nya sangat mudah. Silahkan ikuti langkah-langkah berikut ini :

1. Sig in di blogger dengan id sobat





2. Klik menu layout





3. Klik menu Elemen Halaman





4. Klik tulisan Tambahkan sebuah Elemen Halaman





5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan Feed





6. Tulis alamat ini pada kotak di samping tulisan URL feed --> http://kolom-tutorial.blogspot.com/atom.xml





7. Klik tombol SIMPAN PERUBAHAN





8. Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki





9. Klik tombol SIMPAN





10. Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat





11. Selesai

Untuk melihat contoh, judul postingan terbaru pada blog ini bisa muncul di blog lain, silahkan klik di sini !



Ada satu lagi bagi sobat yang lebih mengutamakan penampilan, spring widget telah membuat suatu panel yang sangat unik sehingga akan bisa di jadikan sebagai aksesori blog. Contoh dari panelnya adalah seperti di bawah ini :

Bagaimana lebih menarik bukan di banding dengan tadi yang hanya menampilakan judul artikel saja. Bila tertarik memasang ini silahkan ikuti langkah-langkahnya.



Untuk template klasik :

1. Sign in di blogger dengan id sobat





2. Klik menu Template





3. Klik menu Edit HTML





4. Copy kode berikut, lalu paste pada sidebar











<br /><br /><object allowNetworking="all" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" id="" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="180" height="318" align="middle" data="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw"><br><br /><param name="movie" value="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" /><param name="flashvars" value="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial&amp;param_style_borderColor=000000&amp;param_style_brandUrl=&amp;" /><br><br /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="bgColor" value="0x000000" /><br><br /><embed bgColor="0x000000" allowNetworking="all" allowFullScreen="true" allowScriptAccess="always" src="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" flashvars="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial&amp;param_style_borderColor=000000&amp;param_style_brandUrl=&amp;" quality="high" wmode="transparent" width="180" height="318" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed></object><br><br /><div style="font:11px/12px georgia;width:180px;margin-top:2px;"></div><br />








Sedikit clue, untuk bagian sidebar. jika template asli buatan blogger biasanya seperti ini :



<!-------- Begin#sidebar---------->


<div id="sidebar">




.......................




.......................




.......................




</div>


<!-------- End#sidebar---------->



nah pasang kode tadi diantara kode diatas.




5. Klik tombol Pratinjau, lihat hasilnya. jika sudah OK klik tombol Simpan Perubahan Template





6. Selesai.

Untuk yang template baru :

1. Sign in di blogger





2. Klik menu layout





3. Klik menu Elemen Halaman





4. Klik tulisan Tambahkan sebuah Elemen Halaman





5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript





6. Copy kode berikut, lalu paste pada kotak yang ada :











<br /><center><br /><object allowNetworking="all" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" id="" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="180" height="318" align="middle" data="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw"><br><br /><param name="movie" value="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" /><param name="flashvars" value="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial&amp;param_style_borderColor=000000&amp;param_style_brandUrl=&amp;" /><br><br /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="bgColor" value="0x000000" /><br><br /><embed bgColor="0x000000" allowNetworking="all" allowFullScreen="true" allowScriptAccess="always" src="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" flashvars="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial&amp;param_style_borderColor=000000&amp;param_style_brandUrl=&amp;" quality="high" wmode="transparent" width="180" height="318" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed></object><br><br /><div style="font:11px/12px georgia;width:180px;margin-top:2px;"></div></center><br />










7. Klik tombol SIMPAN PERUBAHAN





8. Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki





9. Klik tombol SIMPAN





10. Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat





11. Selesai.

Untuk contoh bisa di lihat di sini !





Ada satu hal penting yang saya lupa, sobat harus mengatur menu setting agar bisa di menampilkan feed. Langkah-langkahnya yaitu :

1. Sig in





2. Klik menu layout (untuk template baru), atau klik menu Template (untuk template klasik)





3. Klik menu Pengaturan





4. Klik menu Feed situs





5. Klik menu dropdown di samping tulisan Ijinkan Feed blog





6. Pilih yang Penuh





7. Klik tombol Simpan Setting





8. Selesai.

Bagaimana sobat? mudah-mudahan dengan ini sobat tidak perlu bolak-balik karena setiap ada postingan terbaru akan langsung bisa di lihat di blog milik sobat sendiri.



Selamat mencoba !!!

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 :

1. http://rubrik-elektronik.blogspot.com


2. http://www.rohman24.co.nr


3. http://jaya-example.blogspot.com


4. http://user-online.blogspot.com


5. 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>

<br/>

<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>

<br/>

<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>

<br/>

<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>

<br/>

<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 <br/> 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 <br/> adalah satu kali link berpindah kebawah, jika sobat ingin jaraknya lebih lebar, maka tambahkan tag tersebut beberapa kali, misal <br/><br/>, atau <br/><br/><br/>, 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>

&nbsp;

<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>

&nbsp;

<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>

&nbsp;

<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>

&nbsp;

<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 &nbsp; 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 &nbsp; adalah satu kali link berpindah ke samping, jika sobat ingin jaraknya lebih lebar, maka tambahkan kode tersebut beberapa kali, misal &nbsp;&nbsp; , atau &nbsp;&nbsp;&nbsp; , 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 :

1. http://sncepuspiritualsciencequantum.blogspot.com --> Abu Amin


2. http://adry-fx.blogspot.com --> Adryy-fx


3. http://belati.blogspot.com --> Belati


4. http://benhardleroy.blogspot.com --> Benhard Journey


5. http://melileagroup.blogspot.com --> Capunk


6. http://catatanpojok.blogspot.com --> Catatan pojok

Untuk membuat link yang arah vertikal seperti ini :



<b>:::A:::</b>

<br/>

<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

<br/>

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

<br/><br/>



<b>:::B:::</b>

<br/>

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

<br/>

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

<br/><br/>



<b>:::C:::</b>

<br/>

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

<br/>

<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 :







<b>:::A:::</b>

&nbsp;&nbsp;

<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

&nbsp;&nbsp;

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

&nbsp;&nbsp;



<b>:::B:::</b>

&nbsp;&nbsp;

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

&nbsp;&nbsp;

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

&nbsp;&nbsp;



<b>:::C:::</b>

&nbsp;&nbsp;

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

&nbsp;&nbsp;

<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 <b>...</b> 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 :



<b><< A >></b>

<br/>

&bull;&nbsp;<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

<br/>

&bull;&nbsp;<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>

<br/><br/>



<b><< B >></b>

<br/>

&bull;&nbsp;<a href="http://belati.blogspot.com" target="_blank">Belati</a>

<br/>

&bull;&nbsp;<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>

<br/><br/>



<b><< C >></b>

<br/>

&bull;&nbsp;<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>

<br/>

&bull;&nbsp;<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 arah horizontal :



<b><< A >></b>

&nbsp;

&bull;&nbsp;<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

&nbsp;&nbsp;

&bull;&nbsp;<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>

&nbsp;&nbsp;



<b><< B >></b>

&nbsp;

&bull;&nbsp;<a href="http://belati.blogspot.com" target="_blank">Belati</a>

&nbsp;&nbsp;

&bull;&nbsp;<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>

&nbsp;&nbsp;



<b><< C >></b>

&nbsp;

&bull;&nbsp;<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>

&nbsp;&nbsp;

&bull;&nbsp;<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>





Hasilnya akan seperti ini :



<< A >>   • Abu Amin    • Adryy-fx    << B >>   • 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 &bull; 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 &bull; diatas dengan kode ini :



misalkan :



<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="10" hight="10" border="0">&nbsp;<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 &nbsp; 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>

&nbsp;&nbsp;

<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 &nbsp; 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 :

1. Sig in di blogger dengan id sobat



2. Klik menu Layout



3. Klik menu Elemen Halaman



4. Klik tulisan Tambahkan sebuah Elemen Halaman



5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/javaScript, ingat jangan menggunakan yang untuk membuat daftar link



6. Beri judul link yang sobat kehendaki. contoh : link temanku :



7. Copy kode-kode link yang telah sobat buat lalu paste pada kotak yang tersedia



8. Klik tombol SIMPAN PERUBAHAN



9. Pindahkan elemen yang baru saja pada tempat yang sobat kehendaki



10. Klik tombol SIMPAN



11. Selesai.

Akhirnya selesai juga postingan ini. Mudah-mudahan penjelasan diatas mudah untuk di mengerti.



Selamat mencoba !

Read More Versi baru

Bagi para sobat yang gemar menyingkat artikel dengan fasilitas Read more
atau Baca selengkapnya seperti yang telah saya terangkan pada artikel terdahulu, Sekarang ada cara membuat menu Read more yang saya sebut dengan Read more versi baru. Kenapa demikian? karena menu Read more kali ini sedikit berbeda dengan yang saya terangkan pada artikel yang telah lalu.



Fasilitas Read more kali ini di buat oleh Ramani dan Hans. Kelebihannya
yaitu ketika pembaca mengklik link Read more, maka keseluruhan artikel
bisa terbuka tanpa harus me-loading ulang yang terkadang membuat BT pembaca yang
koneksi internetnya rada lelet ( jadi malu, padahal blog saya berat banget untuk di loading), selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga tidak mengganggu pemandangan seperti yang di keluhkan sobat yuki beberapa waktu lalu yang merasa terganggu karena tulisan readmore selalu muncul walaupun pada artikel yang pendek.



Tapi sayang kode-kode berikut ini hanya berlaku bagi sobat yang memakai template baru saja dan untuk yang memakai template klasik saya ucapkan Kaciaaaaaan deeeeehhh (padahal blog ini pun pake template klasik jadi ga bisa pake ini).



Untuk menyingkat tulisan agar tidak terlalu dipenuhi dengan intermezo yang
sedikit membuat bete and ngeselin, langsung saja untuk membuat read more versi baru ini silahkan ikuti langkah-langkah berikut ini :

1. Sig in di blogger dengan id sobat





2. Klik menu layout





3. Klik menu Edit HTML





4. Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template





5. Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi jangan lupa untuk memberi tanda centang dulu yah





6. Tunggu beberapa saat sampai proses selesai





7. Copy kode berikut, lalu paste tepat di atas kode </head>






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






8. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan :





<h3 class='post-title'>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

<div class='post-header-line-1'/>


<div class='post-body' expr:id='"post-" + data:post.id'>

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

<p><data:post.body/></p>

<b:else/>

<style>#fullpost {display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>

<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if>

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

</div>

</div>

.... rest of template code ....






9. Klik tombol SIMPAN TEMPLATE

Langkah selanjutnya :

1. Klik menu Pengaturan





2. Klik menu Format





3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping
   tulisan Template posting










<span id="fullpost">




</span>








4. Klik tombol Simpan Setting





5. Selesai.

Cara posting artikel :



Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :





<span id="fullpost">






</span>





Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode <span id="fullpost">, dan sisa keseluruhan artikel di simpan sesudah kode <span id="fullpost"> dan sebelum
kode </span>.




Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti
artikel muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja....



Untuk contoh nyata saya sudah membuat blog yang sudah memakai sistem ini, silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan sobat klik di sini !.




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 :

1. Sig in di blogger dengan id sobat





2. Klik menu Layout





3. Klik menu Elemen Halaman





4. Klik tulisan Tambahkan sebuah Elemen Halaman





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





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





7. 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)





8. Klik tombol yang bertuliskan SIMPAN PERUBAHAN





9. 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.

1. Sign in di blogger dengan id sobat


2. Klik menu layout


3. Klik menu Page Elements


4. Klik tulisan Add a Page Element


5. Klik tombol ADD TO BLOG di bawah tulisan HTML/JavaScript


6. 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>



7. Klik tombol SAVE CHANGES


8. 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 :

1. Sign in di blogger dengan id sobat




2. Klik menu Template




3. klik menu Edit HTML




4. 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




5. 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>






6. Klik tombol Save Template Changes




7. Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini :

1. Sign in di blogger dengan id sobat




2. Klik menu Layout




3. Klik menu Edit HTML




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




5. 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




6. Tunggu beberapa saat sampai proses selesai




7. 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>






8. Klik tombol SAVE TEMPLATE




9. 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.




Seperti yang saya katakan di awal artikel bahwa kode yang saya berikan di atas hasil efeknya tidak sama dengan yang ada di blog ini, untuk melihat hasil nyatanya, silahkan sobat klik di sini.



Selamat mencoba !!!