Rupanya..masih banyak yang kebingungan tentang cara membuat readmore di blogger. Artikel kursus blog yang dulu tentang cara buat read more memang agak sedikit membingungkan. Karena penyampaian isinya bisa dibilang terlalu rumit untuk di pahami para blogger yang baru.
Sebenernya cara mudah buat read more di blogspot ini tidak jauh beda dengan cara buat readmore di artikel yang dulu. Cuma..pada edisi kali ini, saya akan coba membahasnya dengan simple. Mudah - mudahan aja para blogger baru bisa lebih mengerti.
Ok..langsung aja ke materi. Cara mudah buat readmore ini ada dua tahap.
Tahap 1 - Edit HTML
Langkah pertama silahkan login di blogger dan pilih blog yang akan di pasang read more ini. Kedua, masuk ke menu edit html, lalu checklist kolom expand template widget kemudian cari kode html seperti ini :
<data:post.body> atau <p><data:post.body></p>
Ketiga, hapus kode tersebut lalu ganti dengan kode yang ini :
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More .. </a>
</b:if>
Silahkan ganti text read more nya terserah anda. Kalo blog kursus blog ini pake baca selanjutnya. Jika sudah save template
Tahap 2 - Cara Posting
Setelah bagian edit html beres, sekarang saatnya untuk cara posting artikel dengan menggunakan read more. Langkah pertama, Silahkan buat postingan sampe selesai dulu. Kedua, tentukan paragraf yang akan di tampilkan kemudian pasang kode ini dibawah paragraf tersebut :
<span class="fullpost">
Ketiga, pasang kode berikut di akhir postingan
</span>
Udah ngerti kan...??. Ok kalo masih belum saya kasih gambarannya
Paragraf postingan yang akan ditampilkan disini
<span class="fullpost">
Postingan yang ditampilkan setelah read more di klik disini
</span>
Mudah - mudahan pada ngerti ya....kalo masih lom ngerti juga, wah bener2 deh...
Peace ah.....salam blogger
Thursday, April 9, 2009
Cara Membuat Text Bergerak
Sebelum saya membahas mengenai marquee, saya akan berbicara sedikit mengenai apa itu marquee. Seperti judul postingan di atas, Marquee adalah Text Bergerak. Masih belum ngerti juga....?? silahkan lihat di bagian sidebar blog ini yang judulnya kerabatku.
Nah...pastinya kalo sudah liat itu sobat pasti tau apa itu marquee. OK.....sekarang saatnya bagaimana cara membuat marquee tersebut. Eittt tapi tunggu dulu...sebagai pengetahuan sobat saja, marquee bisa digunakan untuk text bergerak, link, dan gambar. Dan juga marque bisa digunakan di semua bagian blog. Tentunya....sobat harus tahu dulu bagaimana cara bikinnya . Ok..deh kita mulai aja.
Format dasar Marquee
Sebuah marquee mempunyai format seperti berikut :
<marquee onmouseout="this.start()" direction="up" align="center" scrollamount="2" height="100px" onmouseover="this.stop()" width="100%">TEXT atau LINK atau URL gambar anda</marquee>
Nah....pada kata yang berwarna biru itu, silahkan ganti dengan Text / Link / Url Gambar yang akan sobat jadikan supaya bergerak.
Berikut keterangan dari kode HTML diatas :
* onmouseout="this.start()" --> text akan bergerak jika pointer tidak diarahkan ke text
* direction="up" --> text akan bergerak ke atas. Bisa diganti dengan down, left, atau right.
* align="center" --> text rata tengah
* scrollamount="2" --> kecepatan bergerak (makin besar angka berarti makin cepat)
* height="100px" --> batas vertikal marquee.
* onmouseover="this.stop()" --> marquee akan berhenti ketika mouse diarahkan ke zona marquee tersebut.
* width="200px" --> batas horizontal marquee.
Nah....sekarang bisa khan membuat marquee....?. Sebagai contoh, silahkan sobat copy paste kode berikut dan masukan pada blog sobat.
<marquee onmouseout="this.start()" direction="up" align="center" scrollamount="2" height="100px" onmouseover="this.stop()" width="100%"><a href="http://kursus-blog.blogspot.com" target="_blank" alt="Kursus Blog">Kursus Blog</a></marquee>
Ket:
* Marquee tsb menggunakan link. Kalo sobat belum tahu cara buat link silahkan ikuti bagaimana cara buat link.
* Saya sarankan untuk mempermudah sobat mempraktekkan marquee tsb, sobat simpan di sidebar blog sobat. Caranya klik layout pilih page element lalu add new page element kemudian pilih html/javascript, lalu paste kode diatas.
Selamat mencoba........Good Luky.....
Nah...pastinya kalo sudah liat itu sobat pasti tau apa itu marquee. OK.....sekarang saatnya bagaimana cara membuat marquee tersebut. Eittt tapi tunggu dulu...sebagai pengetahuan sobat saja, marquee bisa digunakan untuk text bergerak, link, dan gambar. Dan juga marque bisa digunakan di semua bagian blog. Tentunya....sobat harus tahu dulu bagaimana cara bikinnya . Ok..deh kita mulai aja.
Format dasar Marquee
Sebuah marquee mempunyai format seperti berikut :
<marquee onmouseout="this.start()" direction="up" align="center" scrollamount="2" height="100px" onmouseover="this.stop()" width="100%">TEXT atau LINK atau URL gambar anda</marquee>
Nah....pada kata yang berwarna biru itu, silahkan ganti dengan Text / Link / Url Gambar yang akan sobat jadikan supaya bergerak.
Berikut keterangan dari kode HTML diatas :
* onmouseout="this.start()" --> text akan bergerak jika pointer tidak diarahkan ke text
* direction="up" --> text akan bergerak ke atas. Bisa diganti dengan down, left, atau right.
* align="center" --> text rata tengah
* scrollamount="2" --> kecepatan bergerak (makin besar angka berarti makin cepat)
* height="100px" --> batas vertikal marquee.
* onmouseover="this.stop()" --> marquee akan berhenti ketika mouse diarahkan ke zona marquee tersebut.
* width="200px" --> batas horizontal marquee.
Nah....sekarang bisa khan membuat marquee....?. Sebagai contoh, silahkan sobat copy paste kode berikut dan masukan pada blog sobat.
<marquee onmouseout="this.start()" direction="up" align="center" scrollamount="2" height="100px" onmouseover="this.stop()" width="100%"><a href="http://kursus-blog.blogspot.com" target="_blank" alt="Kursus Blog">Kursus Blog</a></marquee>
Ket:
* Marquee tsb menggunakan link. Kalo sobat belum tahu cara buat link silahkan ikuti bagaimana cara buat link.
* Saya sarankan untuk mempermudah sobat mempraktekkan marquee tsb, sobat simpan di sidebar blog sobat. Caranya klik layout pilih page element lalu add new page element kemudian pilih html/javascript, lalu paste kode diatas.
Selamat mencoba........Good Luky.....
Posting dan Bersahabat Dengan SEO
Aku dapatkan kode ini dari PASURUAN HACKER'S OFFICIAL BLOG. Ga tahu pasti apakah dengan memasang kode ini maka postingan nantinya akan lebih mudah ditemukan search engine atau gimana. Tapi ga ada salahnya kan dicoba :-)
Caranya adalah dengan mencari dan menganti kode title standar dengan kode title yang sudah dimodifikasi.
Login ke blogspot--> layout --> Edit HTML
Klik "Ctrl + F" untuk menampilkan kolom pencari yang letaknya dibawah. Ketik atau kopi baris kode ini: <title><data:blog.pageTitle/></title> sehingga langsung dapat ditemukan lokasinya.
Ganti baris kode diatas dengan kode dibawah ini:
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
Simpan.
catatan:
jika ternyata tidak bisa disimpan, coba tanda kutip (warna merah) yang ada pada baris kode
<b:if cond='data:blog.pageType == "index"'>
dihapus dan ditulis ulang, setelah itu simpan.
Selamat mencoba.
Caranya adalah dengan mencari dan menganti kode title standar dengan kode title yang sudah dimodifikasi.
Login ke blogspot--> layout --> Edit HTML
Klik "Ctrl + F" untuk menampilkan kolom pencari yang letaknya dibawah. Ketik atau kopi baris kode ini: <title><data:blog.pageTitle/></title> sehingga langsung dapat ditemukan lokasinya.
Ganti baris kode diatas dengan kode dibawah ini:
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
Simpan.
catatan:
jika ternyata tidak bisa disimpan, coba tanda kutip (warna merah) yang ada pada baris kode
<b:if cond='data:blog.pageType == "index"'>
dihapus dan ditulis ulang, setelah itu simpan.
Selamat mencoba.
Cara menampilkan kode Html dalam postingan
Tulisan Cara menampilkan kode Html dalam postingan saya tulis untuk menjawab pertanyaan dari sahabat tips blogger. Para blogger yang ingin memberikan tutorial blogger biasanya sangat membutuhkan tips ini.
contohnya :
<a href="http://demonyadvertising.co.cc">Tips blogger</a>
Bagaimana caranya?...
Ada tips atau trik biasa yang menurut saya ribet juga, yaitu dengan mengganti beberapa kode. Tapi disini saya tidak akan memberikan tips yang sulit. Cara yang sangat mudahnya adalah...
1. Siapkan kode html yang kamu ingin tampilkan. Lalu parse,klik disini...
2. Kemudian masukkan kode tadi ke kotak yang sudah tersedia, dan klik parse.
Kamu akan melihat kode yang telah diparse dan siap untuk ditampilkan dalam postingan, tapi kamu harus memperhalus kode itu terlebih dahulu.
Contohnya :
-Kode yang belum dihaluskan akan tampil kasar seperti ini
<a href="http://demonyadvertising.co.cc">Tips blogger</a>
-Untuk memperhalus code tersebut caranya cukup mudah, sisipkan kode yang berwarna merah antara kode yang telah diparse.
blogger</a>
Contohnya :
<code>kode yang telah diparse disini</code>
Hasilnya
<a href="http://demonyadvertising.co.cc">Tips blogger</a>
3. Selesai...
Cukup mudah bukan?...selamat mencoba...
contohnya :
<a href="http://demonyadvertising.co.cc">Tips blogger</a>
Bagaimana caranya?...
Ada tips atau trik biasa yang menurut saya ribet juga, yaitu dengan mengganti beberapa kode. Tapi disini saya tidak akan memberikan tips yang sulit. Cara yang sangat mudahnya adalah...
1. Siapkan kode html yang kamu ingin tampilkan. Lalu parse,klik disini...
2. Kemudian masukkan kode tadi ke kotak yang sudah tersedia, dan klik parse.
Kamu akan melihat kode yang telah diparse dan siap untuk ditampilkan dalam postingan, tapi kamu harus memperhalus kode itu terlebih dahulu.
Contohnya :
-Kode yang belum dihaluskan akan tampil kasar seperti ini
<a href="http://demonyadvertising.co.cc">Tips blogger</a>
-Untuk memperhalus code tersebut caranya cukup mudah, sisipkan kode yang berwarna merah antara kode yang telah diparse.
blogger</a>
Contohnya :
<code>kode yang telah diparse disini</code>
Hasilnya
<a href="http://demonyadvertising.co.cc">Tips blogger</a>
3. Selesai...
Cukup mudah bukan?...selamat mencoba...
Cara Menambah Widget
Template blogger gratis yang banyak tersedia di internet kadang tidak memiliki pilihan untuk menambah widget dibagian atas dibawah header. Hal ini sebenarnya disebabkan ada pembatasan pada perintah XML yang dibuat oleh si pembuat template tersebut. Alasan dibatasi ini mungkin agar tampilan template sesuai dengan keinginan pembuatnya.
Hanya saja kita kadang ingin menambahkan widget dibagian atas, bisa untuk memasang link adsense atau menambah menu model horizontal. Beberapa kawan menanyakan hal ini karena saat ingin memasang menu horizontal yang ada di ateonsoft.com tidak bisa disebabkan hal ini. Bagaimana solusinya? Ganti template?
Dalam belajar ngeblog jangan mudah putus asa, dalam mengatasi masalah ini tidak perlu ganti template, karena mungkin template yang anda gunakan saat ini adalah template kesayangan anda. Untuk menambahkannya hanya memerlukan langkah mudah dibawah ini:
Pada edit HTML, cari kode dibawah ini:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
</b:section>
Sedikit saya jelaskan mengenai perintah XML yang value-nya saya warnai merah diatas.
maxwidgets Jumlah maksimal dari widget dibagian "section" tersebut, dalam hal ini adalah section atau bagian header.
showaddelement Pada elemen halaman biasanya pada tiap "section" ada pilihan "tambah widget". Perintah ini untuk mengatur apakah penambahan widget pada section tersebut diperbolehkan atau tidak.
locked Mengatur apakah widget dikunci atau tidak. Jika dikunci maka widget tidak dapat dipindah dengan cara "drag and droup", dan biasanya tampilannya akan lain dengan widget biasa. Jika tidak dikunci maka sebaliknya.
Saya rasa penjelasannya sudah cukup jelas, dan kembali pada cara menambah widget header, silahkan anda ganti kode diatas sesuai keinginan anda. Misalnya seperti dibawah ini:
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>
</b:section>
Jumlah maxwidgets bisa anda atur sesuai keinginan, atau jika ingin tanpa pengaturan sama sekali hapus saja perintah pengaturannya seperti dibawah ini:
<b:section class='header' id='header'>
<b:widget id='Header1' title='your blog title (Header)' type='Header'/>
</b:section>
Untuk melihat apakah efek pengubahan kode silahkan menuju elemen halaman dan lihat apakah pada bagian header sudah bisa ditambahkan widget baru.
Semoga Sukses
Hanya saja kita kadang ingin menambahkan widget dibagian atas, bisa untuk memasang link adsense atau menambah menu model horizontal. Beberapa kawan menanyakan hal ini karena saat ingin memasang menu horizontal yang ada di ateonsoft.com tidak bisa disebabkan hal ini. Bagaimana solusinya? Ganti template?
Dalam belajar ngeblog jangan mudah putus asa, dalam mengatasi masalah ini tidak perlu ganti template, karena mungkin template yang anda gunakan saat ini adalah template kesayangan anda. Untuk menambahkannya hanya memerlukan langkah mudah dibawah ini:
Pada edit HTML, cari kode dibawah ini:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>
</b:section>
Sedikit saya jelaskan mengenai perintah XML yang value-nya saya warnai merah diatas.
maxwidgets Jumlah maksimal dari widget dibagian "section" tersebut, dalam hal ini adalah section atau bagian header.
showaddelement Pada elemen halaman biasanya pada tiap "section" ada pilihan "tambah widget". Perintah ini untuk mengatur apakah penambahan widget pada section tersebut diperbolehkan atau tidak.
locked Mengatur apakah widget dikunci atau tidak. Jika dikunci maka widget tidak dapat dipindah dengan cara "drag and droup", dan biasanya tampilannya akan lain dengan widget biasa. Jika tidak dikunci maka sebaliknya.
Saya rasa penjelasannya sudah cukup jelas, dan kembali pada cara menambah widget header, silahkan anda ganti kode diatas sesuai keinginan anda. Misalnya seperti dibawah ini:
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>
</b:section>
Jumlah maxwidgets bisa anda atur sesuai keinginan, atau jika ingin tanpa pengaturan sama sekali hapus saja perintah pengaturannya seperti dibawah ini:
<b:section class='header' id='header'>
<b:widget id='Header1' title='your blog title (Header)' type='Header'/>
</b:section>
Untuk melihat apakah efek pengubahan kode silahkan menuju elemen halaman dan lihat apakah pada bagian header sudah bisa ditambahkan widget baru.
Semoga Sukses
Trik Bloger
Bagi rekan blogger yang sedang mencari blogger templates. Mungkin blogger templates disini bisa menjadi pilihan. Karena blogger template disini bukan saja bagus desainnya, namun juga sudah saya tambahkan sejumlah fitur yang dapat membantu agar blog anda menjadi SEO friendly, Visitor friendly juga Money Maker friendly blogger template.
Karena saya telah menambahkan judul SEO untuk tiap halaman, Meta Deskripsi dan Keyword, Star rating ditiap posting, barisan social bookmark ditiap posting, related post juga fitur yang sedang INN yaitu format komentar ditiap posting seperti Wordpress dan tidak ketinggalan saya menyisipkan tag untuk menaruh iklan PPC (Pay Per Click) seperti Google Adsense, Adbrite, Kliksaya, Dan lain-lain. Dan juga saya telah mengedit template ini agar tampilan awalnya bersih, lebih jelasnya silahkan kesini: menyembunyikan aksesoris blogger dihalaman muka.
Informasi bagi rekan yang mungkin belum familiar dengan fitur-fitur yang saya sebutkan, ada baiknya mengunjungi posting-posting saya berikut ini agar lebih jelas:
1. Judul SEO untuk tiap halaman, lebih jelasnya silahkan ke Judul Halaman SEO untuk tiap posting blogger.
2. Meta Deskripsi & Keyword, silahkan kesini: Meta Deskripsi & Keyword Untuk Blogger Blogspot. Namun sebelumnya, ada sedikit penjelasan, jika nanti sudah anda download HTML-nya, maka lihat:
* *
Ganti NAMABLOGANDA.blogspot dengan namablog anda, juga DEskripsi dan KEYWORD ANDA.
3. Kode PPC (Pay Per Click), jika anda telah mendownload salah satu template ini, kemudian memasangnya diblog anda. Maka ketika anda membuka setiap posting anda akan muncul tulisan KODE PPC ANDA, itulah letak iklan PPC anda. Maka untuk menampilkan iklan PPC seperti Adsense, Kliksaya.com dll, bukalah template, di Edit Layout, kemudian Expand widget template, lalu cari lah tulisan KODE PPC ANDA, gantikan dengan kode PPC anda, misalnya saya menggunakan Klik saya.com maka begini tampilannya:
Ini sebelum dirubah lihat yang dibold:
Misalkan saya memakai PPC Kliksaya.com, Kemudian saya masukan/ganti KODE PPC dengan iklan kliksaya.com, lihat yang dibold:
Save template! Finish!
Dan bagaimana jika anda sudah memakai atau ingin memakai read more ditemplate anda? keterangan lebih lanjut silahkan kesini: Memasang Iklan PPC Lokal di template blogspot.
Ini contohnya: Fikiranku. Dan jika ingin memasukan kode Google Adsense silahkan kesini: Menempatkan Google Adsense di Posting Blogspot.
Dan jika anda tidak ingin memiliki iklan PPC dibawah dan diposting anda, gantilah semua kode diatas dengan tag ini:
4. Related Topic diblogspot.
5. Komentar wordpress disetiap posting silahkan kesini : Kolom komentar dibawah posting blogspot untuk mengetahuinya dan memasangnya.
6. Barisan social bookmark disetiap posting.
5. Star ratings diblogspot.
Karena saya telah menambahkan judul SEO untuk tiap halaman, Meta Deskripsi dan Keyword, Star rating ditiap posting, barisan social bookmark ditiap posting, related post juga fitur yang sedang INN yaitu format komentar ditiap posting seperti Wordpress dan tidak ketinggalan saya menyisipkan tag untuk menaruh iklan PPC (Pay Per Click) seperti Google Adsense, Adbrite, Kliksaya, Dan lain-lain. Dan juga saya telah mengedit template ini agar tampilan awalnya bersih, lebih jelasnya silahkan kesini: menyembunyikan aksesoris blogger dihalaman muka.
Informasi bagi rekan yang mungkin belum familiar dengan fitur-fitur yang saya sebutkan, ada baiknya mengunjungi posting-posting saya berikut ini agar lebih jelas:
1. Judul SEO untuk tiap halaman, lebih jelasnya silahkan ke Judul Halaman SEO untuk tiap posting blogger.
2. Meta Deskripsi & Keyword, silahkan kesini: Meta Deskripsi & Keyword Untuk Blogger Blogspot. Namun sebelumnya, ada sedikit penjelasan, jika nanti sudah anda download HTML-nya, maka lihat:
*
Ganti NAMABLOGANDA.blogspot dengan namablog anda, juga DEskripsi dan KEYWORD ANDA.
3. Kode PPC (Pay Per Click), jika anda telah mendownload salah satu template ini, kemudian memasangnya diblog anda. Maka ketika anda membuka setiap posting anda akan muncul tulisan KODE PPC ANDA, itulah letak iklan PPC anda. Maka untuk menampilkan iklan PPC seperti Adsense, Kliksaya.com dll, bukalah template, di Edit Layout, kemudian Expand widget template, lalu cari lah tulisan KODE PPC ANDA, gantikan dengan kode PPC anda, misalnya saya menggunakan Klik saya.com maka begini tampilannya:
Ini sebelum dirubah lihat yang dibold:
KODE PPC ANDA
Misalkan saya memakai PPC Kliksaya.com, Kemudian saya masukan/ganti KODE PPC dengan iklan kliksaya.com, lihat yang dibold:
Save template! Finish!
Dan bagaimana jika anda sudah memakai atau ingin memakai read more ditemplate anda? keterangan lebih lanjut silahkan kesini: Memasang Iklan PPC Lokal di template blogspot.
Ini contohnya: Fikiranku. Dan jika ingin memasukan kode Google Adsense silahkan kesini: Menempatkan Google Adsense di Posting Blogspot.
Dan jika anda tidak ingin memiliki iklan PPC dibawah dan diposting anda, gantilah semua kode diatas dengan tag ini:
4. Related Topic diblogspot.
5. Komentar wordpress disetiap posting silahkan kesini : Kolom komentar dibawah posting blogspot untuk mengetahuinya dan memasangnya.
6. Barisan social bookmark disetiap posting.
5. Star ratings diblogspot.
Subscribe to:
Posts (Atom)
