Menambahkan Back Ground pada Postingan

Bagaimana cara anda menampilkan latar belakang pada postingan sehingga membuat blog anda menjadi berbeda dan lebih menarik tampilannya seperti di bawah ini?
Caranya adalah dengan :

Membuat background dengan warna
Agar warna background postingan bisa berbeda-beda setiap postingan, anda perlu melakukan :
Ketika anda akan memulai untuk membuat postingan, pilih tab Edit HTML jangan pilih Compose. Awali postingan anda dengan kode seperti ini :

<div style="background:kode_warna_disini;">

Dan diakhir postingan, harus di tutup dengan kode seperti ini :

</div>

Contoh:

<div style="background:#C0C0C0; text-align:justify; ">

Oleh karena itu, pada kesempatan ini, dari lubuk hati terdalam, saya ingin berterimakasih kepada para sahabat yang telah berbagi dengan saya. Saya percaya, dengan memberi maka kita pun akan menerima. Itu adalah rumus Semesta, dimana kita semua tidak bisa lari atau bersembunyi daripadanya.

</div>

Hasilnya akan seperti ini: ( dengan warna background C0C0C0) abu abu

Oleh karena itu, pada kesempatan ini, dari lubuk hati terdalam, saya ingin berterimakasih kepada para sahabat yang telah berbagi dengan saya. Saya percaya, dengan memberi maka kita pun akan menerima. Itu adalah rumus Semesta, dimana kita semua tidak bisa lari atau bersembunyi daripadanya.

Jika warna backgroundnya kita rubah dengan warna kuning kode #ffff66, maka hasilnya adalah seperti ini:

Oleh karena itu, pada kesempatan ini, dari lubuk hati terdalam, saya ingin berterimakasih kepada para sahabat yang telah berbagi dengan saya. Saya percaya, dengan memberi maka kita pun akan menerima. Itu adalah rumus Semesta, dimana kita semua tidak bisa lari atau bersembunyi daripadanya.

Untuk kode warna anda bisa cek situs ini.

Membuat background dengan gambar

Untuk membuat postingan dengan gambar tentu saja anda harus mempunyai gambar yang tersimpan di hosting gratisan. Sebagai contoh disini, saya mempunyai akun di www.Photobucket.com dan menyimpan gambar disana. Sekarang kita masuk ke dalam tahap pembuatan background dengan gambar: Masuk kepostingan baru. Sama seperti diatas pilih Tab Edit HTML jangan Compose / Tulis. Awali postingan juga dengan:

<div style="background:url(alamat_gambar_disini) no-repeat;">

Dan diakhir postingan, harus di tutup dengan kode seperti ini :

</div>

Ganti tulisan alamat_gambar_disini dengan alamat gambar yang ingin anda tampilkan. Penggunaan kode no-repeat tentu saja apabila gambar yang anda miliki memiliki ukuran besar dan tidak mau di tampilkan berulang-ulang.

Seperti halnya pada background dengan warna, kode ini pun bisa anda tambah-tambahin sesuai dengan keinginan. Untuk tampilan foto Iwan Fals kali ini saya blur supaya teks yang saya tulis diatasnya bisa lebih terbaca. Untuk melakukan efek blur anda tinggal mengatur opacity nya. Anda bisa lakukan di Program Photoshop atau secara online anda juga dapat melakukannya di Photobucket.com.

Sebagai contoh, saya ingin membuat posting dengan background yang beralamat di http://i693.photobucket.com/albums/vv298/neokoder/iwanfals-2.jpg, background ingin di simpan di sebelah kanan atas posting tanpa repeat, padding sebesar 10 pixel, besar hurup 90% :

<div style="background:url(http://i693.photobucket.com/albums/vv298/neokoder/iwanfals-2.jpg) no-repeat right top; text-align:justify; font-size:90%; padding:10px">

Virgiawan Listianto yang populer dengan nama Iwan Fals dikenal sebagai ‘wakil rakyat’ yang lantang menyuarakan seruan hati para wong cilik. Sepanjang karirnya selama kurang lebih 20 tahun di dunia musik ia telah terbukti memiliki kelompok penggemar khusus yang dekat dengan kemiskinan, ketidakadilan dan pengangguran. Lagu-lagunya kerap dihubungkan dengan protes-protes sosial seperti pernah terkenal lewat Oemar Bakrie (1981) dan Bento (1991).

Nama besar yang disandangnya saat ini dicapainya setelah melalui jalan penuh kerikil dan berdebu di bawah hujan dan terik matahari dalam komunitas ‘pengamen jalanan’. Pria yang diberi julukan “Pahlawan Besar Asia” menurut majalah Time Asia edisi 29 April 2002 ini mengalami banyak perubahan selama enam tahun terakhir.

Kepergian anak pertamanya, Galang Rambu Anarki (almarhum), April 1997, seorang gitaris yang baru saja meluncurkan album perdananya di usia 15 tahun, membuatnya semakin menghargai posisinya sebagai seorang ayah yang harus menjaga, mendidik, dan memelihara anak-anaknya. Rasa cintanya kepada dua anaknya, Annisa Cikal Rambu Basae dan Rayya Rambu Robbani, adalah pengobar semangat di usianya yang kini sudah berkepala empat.

Iwan Fals yang pernah memperoleh Juara II Karate Tingkat Nasional, sempat masuk pelatnas dan melatih karate di kampusnya, STP (Sekolah Tinggi Publisistik) sehari-harinya dipanggil Tanto. Ia lahir pada 3 September 1961 di Jakarta dalam keluarga besar yang taat beragama. Dari sembilan bersaudara, empat meninggal dunia. Semenjak kecil Iwan sering diajak ibunya, Lies Haryoso, mengikuti berbagai kegiatan sosial. Kini, ibunya masih aktif mengurusi sebuah yayasan sosial miliknya yang menampung anak-anak tidak mampu dan menyantuni orang-orang jompo. Yayasan sosial `Hairun Nissa' yang didirikannya tahun 1986, kini menyantuni 213 anak dalam panti, 90 anak non panti, dan 313 orang tua jompo.
Semenjak kecil Iwan sudah berjiwa sosial dan sangat perhatian kepada teman-temannya. Itu semua terbukti ketika Iwan dengan murah hati memberikan pakaian yang dia pakai dan sepatu baru yang harganya mahal kepada temannya yang membutuhkan.

</div>

Untuk jelasnya anda bisa klik gambar di bawah ini..... atau anda kunjungi blog saya yang lain www.neokoderinspirasi.blogspot.com
( Sumber saya : Blog Kang Rohman )

Baca Selanjutnya.. Baca Selanjutnya...

Elemen Halaman Mempunyai Fungsi Scroll

Untuk membuat elemen halaman dengan scroll seperti gambar dibawah (yang saya highlight!! Lihat tanda panahnya!!), bukan pekerjaan yang sulit, anda hanya perlu membuat kode seperti ini :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
isi halaman
</div>

Untuk penempatannya caranya adalah: anda tinggal masuk ke halaman kustomisasi» Tata letak » Elemen Halaman » Tambah Gadget » Pilih untuk JavaScript/HTML » Masukan kodenya » Simpan » selesai.

Contoh :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">

001.<a href="http://neokoderblog.blogspot.com/2009/06/panduan-membuat-blog-di-blogspot.html"><span style="color: rgb(255, 255, 255);"></span> Panduan membuat blog di blogspot </a><br/>

002.<a href="http://neokoderblog.blogspot.com/2009/06/cara-setting-blog.html"><span style="color: rgb(255, 255, 255);"></span> Cara Setting Blog</a><br/>

003.<a href="http://neokoderblog.blogspot.com/2009/06/span.html"><span style="color: rgb(255, 255, 255);"></span> Cara membuat <span style="font-weight: bold;">Read More</span> di Template klasik</a><br/>

004.<a href="http://neokoderblog.blogspot.com/2009/06/cara-membuat-read-more-di-template-baru.html"><span style="color: rgb(255, 255, 255);"></span> Cara membuat <span style="font-weight: bold;">Read More</span> di template baru</a><br/>

005.<a href="http://neokoderblog.blogspot.com/2009/06/cara-memposting-script-code-html-pada.html"><span style="color: rgb(255, 255, 255);"></span> Cara memposting script code di HTML</a><br/>

006.<a href="http://neokoderblog.blogspot.com/2009/05/kadang-kita-ingin-memodifikasi-template.html"><span style="color: rgb(255, 255, 255);"></span> Cara membuat sidebar dengan kotak terpisah </a><br/>

007.<a href="http://neokoderblog.blogspot.com/2009/05/google-translate-bahasa-indonesia.html"><span style="color: rgb(255, 255, 255);"></span> Google Translate</a><br/>

008.<a href="http://neokoderblog.blogspot.com/2009/06/cara-modifikasi-kotak-komentar.html"><span style="color: rgb(255, 255, 255);"></span>Cara Modifikasi Kotak Komentar </a><br/>

Didalam kode tersebut, yang berperan besar adalah kode yang ada dalam style. Dengan style itulah kita bisa membuat apa yang kita inginkan. Berikut adalah perintah-perintah yang di pakai:

overflow:auto; » kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
width:300px; » adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
height:200px; » adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.
padding:10px; » adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;
border:1px solid #eee » agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.

Isi dari halaman tersebut tentu saja bukan hanya berisi link , anda bisa mengisinya dengan yang anda inginkan. Misalkan tulisan biasa, gambar, iklan atau apa saja.Lengkapnya anda bisa baca disini.
Hasil akhirnya akan seperti ini :

001. Panduan membuat blog di blogspot
002. Cara Setting Blog
003. Cara membuat Read More di Template klasik
004. Cara membuat Read More di template baru
005. Cara memposting script code di HTML
006. Cara membuat sidebar dengan kotak terpisah
007. Google Translate
008.Cara Modifikasi Kotak Komentar

Baca Selanjutnya.. Baca Selanjutnya...

Modifikasi Kotak Komentar

Cara membuat kotak komentar seperti ini. Selengkapnya anda bisa lihat dan baca di blognya Kang Rohman tentang penjelasan kotak komentar ini. Saya akan membuat tutorialnya secara cepat

Untuk diketahui sebelumnya bahwa setiap kode template antara yang satu dengan yang lain bisa berbeda bisa juga sama, jika tutorial ini tidak sama dengan kode yang ada pada template anda, maka maaf saja berarti anda kurang beruntung. Sebagai contoh, kang rohman memakai kode template Minima.

Langkah - langkahnya:
1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
5. Beri tanda centang/tik pada kotak kecil di samping tulisan Expand template Widget.


expand widget template


6. Tunggu beberapa saat ketika proses sedang berlangsung.
7. Cari kode pada bagian CSS yang seperti ini :

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

8. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :

#comments h4 {
margin:0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000;
}

#bg_commentblock {
width: 548px;
background: #ffffff;
float: left;
padding:20px;
margin:0 0 10px 0;
border:1px solid #C0C0C0;
}

#commentblock {
width: 510px;
background: #E8E8E8;
text-align:left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 2px solid #333333;
border-bottom: 1px solid #333333;
}
#commentblock ol {
list-style-type: square;
margin: 0px 0px 0px 10px;
padding: 0px 0px 10px 0px;
}
.commentdate {
font-size: 12px;
padding-left: 0px;
}
#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwsyA77WSOlbuOKbkECwoTkqQNmSIUR5fV5V5g139YQNC3s67C6PLQS0FD73YhDDjVS8TtMriB9R97DQWapNIha1eu0r7Fffj1noJKqYYi00B2oz-5ijcXuxzJofZyWIkzWHj6hZaS6NL/s320-r/comment.gif) no-repeat top left;
}

.commenttext-admin {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwsyA77WSOlbuOKbkECwoTkqQNmSIUR5fV5V5g139YQNC3s67C6PLQS0FD73YhDDjVS8TtMriB9R97DQWapNIha1eu0r7Fffj1noJKqYYi00B2oz-5ijcXuxzJofZyWIkzWHj6hZaS6NL/s320-r/comment.gif) no-repeat top left;
}

9. Lihat Ke bagian bawah, dan cari kode yang seperti ini :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1<data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>

10. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>

<div id='bg_commentblock'>

<h4>

Komentar :

</h4>

<div id='commentblock'><!--commentblock-->

<strong>ada</strong> <b:if cond='data:post.numComments == 1'>1
<b:else/>
<strong><data:post.numComments/> <data:commentLabelPlural/> ke &#8220;<data:post.title/>&#8221;</strong>
</b:if>

<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></span>
<dd class='commenttext'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:loop>
</dl>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>

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

<b:include data='post' name='comment-form'/>

<b:else/>

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

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>
</b:if>
</p>
</div><!--end commentblock-->
</div>
</b:if>

11. Klik tombol Simpan Template.
12. Selesai. Silahkan lihat hasilnya.

Kode-kode diatas tentunya tidaklah mutlak harus seperti itu, jika anda sedikit familiar dengan css, maka anda bisa berkreasi lebih. Terutama pada bagian lebar kotak komentar, anda harus menyesuaikan dengan lebar kotak komentar template anda. Sedikit petunjuk, untuk mengubah lebar kotak koemntar di atas, anda tinggal mengganti nilai dari width nya, contoh : width: 548px; di ubah jadi width: 500px; atau berapa saja sesuai dengan template anda.

Selamat mencoba.

Sumber : Blog Kang Rohman

Baca Selanjutnya.. Baca Selanjutnya...

Read More di template baru

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. Keterangan tentang itu anda bisa baca disini.

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

Anda bisa baca lebih lengkap di Blog Kang Rohman dengan alamat http://kolom-tutorial.blogspot.com/2007/05/membuat-read-more-2.html
* Selamat mencoba !

Baca Selanjutnya.. Baca Selanjutnya...

Cara memposting Script Code HTML di Blog.

Ketika kita menemukan sebuah ide/tips dan trik untuk mempercantik isi blog atau kata lainnya mengotak atik isi blog yang kita dapat dari hasil otak atik sendiri atau baca buku atau artikel laiinya pastinya kita ingin mensharingkan ide tersebut ke artikel di blog kita, supaya bisa membantu temen-temen kita yang lainnya sesama blogger yang kebetulan membutuhkan informasi tersebut.

Dalam penulisan bahasa script HTML/JS memang ada caranya tersendiri. Jika kita menulis apa adanya yang bakalan muncul di blog beda deh dengan apa yang kita inginkan sebetulnya. Contohnya, jika kita menuliskan kode <html> langsung di blog kita maka hasil yang muncul bukan tulisan tadi karena bakalan langsung di terjemahkan ke dalam bahasa HTML/Js. So jika pengen menulis kode <html> untuk bisa muncul di dalam artikel kita maka kita harus mengganti dengan tulisan ini &lt;html&gt;. Terus kalo kode scriptnya banyak gimana ???

Jangan panik dan jangan bingung baca aja caranya di bawah ini …

Cara yang pertama,
Pastinya kita bisa menggunakan bantuan dari para software web design,seperti Macromedia Dreamwaver, Microsoft Frontpage dll. Atau dengan software-software blogtools seperti post2blog dll.
Tuliskan aja semua kode yang pengen temen-temen tulis di dalam area design, trus copy kode-kode tersebut dari area HTML Code. Kode-kode inilah yang nantikan kita postingkan di Blog kita.


Cara yang kedua dan hanya menggunakan notepad tanpa bantuan dari luar.
Tulis aja semua kode/script ke dalam notepad selanjutnya ganti/replace kode-kode berikut

Kode Kode Pengganti

< &lt;
> &gt;
" &quot;

Replace aja langsung dengan menggunakan menu edit di notepad edit --> replace kemudian pada kotak yang muncul masukkan kode yg akan direplace pada kolom "Find what" trus masukkan kode pengantinya pada kolom "Replace with"trus langsung pencet tombol Replace All.
Nah udah berubah semua kan… baru deh kamu copy paste kode tadi ke dalam postingan kita

Cara lainnya yang bisa di bilang paling gampang :
langsung masuk aja ke situs ini http://centricle.com/tools/html-entities,
trus isikan kode-kode kamu kedalam kotak yang disediakan, selesai langsung pencet tombol "Encode", nongol deh hasil script yang baru, tinggal di postingkan saja di blog kita.

Sumber : BlokInfo http://blokinfo.blogspot.com/2009/05/cara-memposting-script-code-html.html

Baca Selanjutnya.. Baca Selanjutnya...

Cara membuat Read More di template klasik Blogspot

"Membuat Read More" maksudnya apa? .
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 >> Baca 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... kita mulai langsung saja pembahasannya. 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.
Untuk info selengkapnya bisa anda baca dari Blognya Kang Rohman di http://kolom-tutorial.blogspot.com/2007/04/membuat-read-more-1.html

Baca Selanjutnya.. Baca Selanjutnya...

Cara Setting Blog pada Blogger.com

Bagi para sobat yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di lakukan agar blog kita bisa di kenali mesin pencari semisal Google, Yahoo, Msn serta teman-temannya yang lain. Bila belum tahu yang harus di setting, silahkan ikuti langkah-langkahnya:

Silahkan sobat Login ke blogger.com dengan user name dan password milik sobat

Klik judul blog yang mau di setting ( jika sobat sudah mempunyai beberapa blog)

Klik Pengaturan, trus klik Dasar.Beberapa form yang harus di isi pada menu Dasar :

• Judul ⇒ isi dengan judul blog sobat. Contoh : Blogspot Tutorial
• Uraian ⇒ isi dengan deskripsi blog sobat. Contoh : disini kita akan berbagi pengalaman dan pengetahuan seputar Blog
• Tambahkan blog Anda ke daftar kami? ⇒ pilih ya agar setiap posting kita selalu masuk di daftar Blogger.com.
• Biarkan mesin pencari menemukan blog Anda? ⇒ pilih ya
• Tampilkan Editing Cepat di Blog Anda? ⇒ pilih Ya
• Tampilkan Link Posting Email? ⇒ Sebaiknya pilih ya, tapi pilih tidak juga tidak apa-apa
• Konten Dewasa? ⇒ Pilih tidak. Kalau pilih ya berarti blog anda di anggap blog untuk dewasa (semacam blog porno)
• Tampilkan Mode Compose untuk semua blog Anda? ⇒ pilih Ya
• Aktifkan transliterasi? ⇒ pilih Tidak, jika anda ingin ada button untuk mengubah biasa ke huruf hindi (India), pilih ya jika sebaliknya
• Klik tombol Simpan Pengaturan .
• Selesai

Klik Publikasi untuk mengatur menu Publikasi :

• Alamat Blog*Spot ⇒ isi dengan nama blog sobat. Contoh : kolom-tutorial. Biasanya alamat yang tercantum adalah langsung alamat blog anda, jadi jangan di ubah aja.
• Klik tombol Simpan pengaturan.
• Selesai

Klik Format untuk mengatur menu format :

• Tampilkan ⇒ pilih angka posting yang ingin anda tampilkan. Misal : Tampilkan : 6 posting, berarti posting yang akan tampil di halaman blog sobat adalah sebanyak enam posting. Pilih posting (jangan hari) pada menu pulldown.
• Format Header Tanggal ⇒ pilih model tanggal/bulan yang anda sukai. Format tanggal/bulan ini akan selalu muncul diatas postingan kita.
• Format tanggal Index Arsip ⇒ pilih model untuk peng-arsip-an yang anda sukai.
• Format Timestamp ⇒ Pilih bentuk waktu yang anda sukai.
• Zona Waktu ⇒ Pilih zona waktu yang sesuai. Contoh untuk WIB : [UTC-+7.00]Asia/Jakarta.
• Bahasa ⇒ Pilih bahasa yang di inginkan.
• Tampilkan Field judul ⇒ Pilih ya atau tidakpun tidak apa-apa,
• Tampilkan kolom link ⇒ pilih ya, tapi seandainya pilih tidak juga tidak apa-apa.
• Aktifkan perataan float ⇒ pilih ya, tapi seandainya mau pilih tidak juga tidak apa-apa.
• Klik tombol Simpan Pengaturan.
• Selesai

Klik Komentar untuk mengatur menu komentar :

• Komentar ⇒ pilih tampilkan, ini agar artikel anda dapat di komentari oleh pengunjung
• Siapa yang Bisa Berkomentar ? ⇒ Pilih Siapa pun - termasuk Pengguna Anonim. Ini di maksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota blogspot saja.
• Default Komentar untuk Posting ⇒ pilih Posting baru memiliki komentar.
• Link balik ⇒ Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang link pada artikel kita.
• Default Link Balik untuk Posting ⇒ pilih Posting baru Memiliki Link Balik.
• Format Timestamp Komentar ⇒ pilih format jam yg singkat. Contoh: 8.00 PM.
• Tampilkan komentar dalam sebuah window popup? ⇒ pilih Ya. Supaya ketika di klik oleh pengunjung, halaman blog anda tidak menghilang/tertimpa halaman komentar.
• Aktifkan moderasi komentar? ⇒ pilih Tidak (sebaiknya).
• Tampilkan verifikasi kata untuk komentar? ⇒ pilih Ya. ini di maksudkan agar terhindar dari software robot dengan tujuan melakukan spam.
• Tampilkan gambar profil dalam komentar? ⇒ pilih ya. Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya.
• Email Pemberitahuan Komentar ⇒ isi dg alamat email anda, ini di maksudkan agar setiap ada yang berkomentar pada artikel anda, anda dapat kiriman email dari blogger.com sebagai pemberitahuan.
• Klik tombol Simpan Pengaturan.
• Selesai

Klik Arsipkan Untuk mengatur menu Arsipkan :

• Frekuensi Arsip ⇒ pilih Bulanan.
• Aktifkan Halaman Posting? ⇒ pilih ya.
• Klik tombol Simpan Pengaturan .
• Selesai.

Klik Fedd Situs untuk mengatur menu feed situs :

• Izinkan Feed Blog ⇒ pilih Penuh.
• Posting URL Pengubahan Arah Feed ⇒ di isi dengan alamat feed pengganti semisal alamat feed dari feed burner, jika belum punya, di kosongkan saja.
• Footer Feed Posting ⇒ Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.
• Klik tombol Simpan Perubahan.
• Selesai.

Jika Anda ingin tahu lebih lengkap dan detil anda bisa baca di Blog Kang Rohman. Alamatnya nih... http://kolom-tutorial.blogspot.com/2007/04/cara-setting-blog.html

Baca Selanjutnya.. Baca Selanjutnya...

Panduan membuat Blog di Blogspot

Mungkin ada diantara anda-anda yang belum tahu tentang blog dan bertanya-tanya tentang blog, maka saya akan mengulas sedikit tentang blog menurut versi saya sendiri.

1. Apa itu Blog ?

Blog ( singkatan dari Web log) adalah situs yang sifatnya lebih pribadi, yaitu lebih berat kepada penggambaran dari si pembuat blog itu sendiri.

Blog dibuat oleh para desainer penyedia blog agar bekerja secara otomatis dan mudah untuk dioperasikan , jadi bagi kita-kita yang masih bingung dengan bahasa pemrograman untuk membuat sebuah website tidak jadi persoalan. Apabila anda sudah bisa membuat sebuah account email di internet, maka dalam membuat blog pun saya yakin anda bisa.

2. Cara membuat blog

Seperti halnya e-mail, dalam membuat blog pun kita harus mempunyai sebuah account terlebih dahulu, oleh karena itu silahkan daftarkan diri anda terlebih dahulu di free blog provider (penyedia hosting/domain blog gratis). Free blog provider sangatlah banyak terdapat di internet dan beberapa yang populer saat ini adalah http://www.blogger.com, http://www.wordpress.com serta http://blogsome.com.

Dalam kesempatan kali ini saya akan mengulas tentang cara pembuatan blog di http://www.blogger.com. Silahkan anda klik gambar dibawah untuk mendaftar.


Setelah anda berada pada situs blogger.com, anda akan melihat gambar seperti gambar di atas. Silahkan lakukan langkah-langkah berikut ini :

1. Klik tanda anak panah yang bertuliskan " CIPTAKAN BLOG ANDA "

2. Isilah Alamat Email dengan alamat email anda (tentunya yang valid)

3. Isikan kembali alamat email anda tadi pada form Ketik ulang alamat email

4. Tuliskan password yang anda inginkan pada form Masukkan sebuah password

5. Isikan kembali password anda tadi pada form Ketik ulang sandi (password)

6. Isi Nama Tampilan dengan nama yang ingin anda tampilkan

7. Tulis tulisan yang tertera pada form Verifikasi Kata. Beri tanda conteng /cek pada kotak di pinggir tulisan Saya menerima Persyaratan dan Layanan.

8. Klik gambar anak panah yang bertuliskan "LANJUTKAN"

9. Tuliskan judul blog yang anda inginkan (nanti bisa di rubah lagi) pada form Judul Blog

10. Tulis nama situs anda pada form Alamat Blog (URL)

11. Tulislah tulisan verifikasi yang ditampilkan pada form Verifikasi kata, jika sudah selesai klik gambar panah yang bertuliskan "LANJUTKAN".

12. Pilihlah gambar (template) yang anda inginkan (nanti bisa di rubah lagi), kemudian klik gambar anak panah yang bertuliskan "LANJUTKAN"

13. Setelah keluar tulisan "Blog Anda telah diciptakan". Klik gambar panah bertuliskan "MULAI POSTING". Silahkan anda tuliskan semau anda, jika sudah selesai klik tombol "MEMPUBLISKAN POSTING".

3. Isi ( Content ) blog :

Bagi para pemula, biasanya mereka bingung setelah daftar membuat blog apa yang harus di isi( diposting ) dalam sebuah blog. Isi ( content ) dari sebuah blog tentu saja terserah kepada si pemilik blog itu sendiri, apakah mau di isi puisi, perjalan hidup, teknik, ataupun apa saja. Nah di sini saya menyarankan, isilah blog anda tersebut dengan minat ataupun hoby serta keahlian anda sendiri, karena tentu saja di luar sana banyak sekali orang yang tentunya sama minat dan hoby nya dengan anda, sehingga mereka akan tertarik untuk membaca tulisan-tulisan anda.

Lebih lengkapnya anda bisa baca dari Blog Kang Rohman. sumber : http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html

Baca Selanjutnya.. Baca Selanjutnya...