Bagaimana menampilkan sebagian postingan dengan “baca selengkapnya..” di blogspot

Banyak yang nanya bagaimana memotong postingan di blogspot dengan kata “baca selengkapnya..” atau “read more..” sehingga yang tampil di halaman depan hanya separuh postingan dan postingan lengkap akan muncul apabila link “baca selengkapnya..” atau “read more..” di klik.

mas, mau nanya boleh? saya dah lama penasaran sama yg namanya kode untuk mempersingkat postingan….yang biasanya berbunyi : “read more” atau “cerita selengkapnya..”. soalnya kalo ga digituin puanjaaaang…suka pusying. makasih loh. ditunggu jawabannya.

Sebenarnya fasilitas ini nggak ada di blogger/blogspot, tapi kalo kamu pake wordpress fasilitas ini udah ada, cukup klik dimana kamu pengen memotong postingan, kemudian klik icon SPLIT POST USING READ MORE TAG.

Untuk pengguna blogspot, berikut ini langkah modifikasi yang bisa dilakukan. Trik ini menggunakan css untuk menyembunyikan sebagian post, sehingga hanya bagian yang diinginkan saja yang tampil di halaman depan.

Pertama buka template blogger kamu, kemudian tambahkan CSS berikut, CSS biasanya terletak di antara tag

 
  span.selengkapnya {display:none;}
  

  span.selengkapnya {display:inline;} 
  

Dengan style ini, kita membuat sebuah class di css dengan nama “selengkapnya” dan hanya akan tampil ketika postingan berdiri sendiri (post page). Sebagian dari berita akan menggunakan class ini seperti yang akan saya jelaskan kemudian.

Langkah kedua adalah menambahkan kode untuk menampilkan link “baca selengkapnya…” tambahkan kode berikut setelah kode < $BlogItemBody$> pada template kamu:

">baca selengkapnya..

Kamu bisa mengganti tulisan “baca selengkapnya..” dengan kata lain yang kamu suka!
Setelah mengkopi kode-kode diatas kedalam template kamu, Save Template dan Republish.

Langkah terakhir adalah melakukan modifikasi setiap kali kamu membuat postingan. Ketika membuat berita yang akan dipotong, selalu gunakan mode Edit Html bukan Compose mode , dan tambahkan kode seperti contoh berikut ini:

Ini adalah awal postingan dan akan dipotong disini. Ini adalah akhir postingan saya

maka akan menghasilkan sebuah postingan seperti ini:

Ini adalah awal postingan dan akan dipotong disini baca selengkapnya..

ketika link di klik maka akan menampilkan postingan secara penuh seperti ini:

Ini adalah awal postingan dan akan dipotong disini. Ini adalah akhir postingan saya.

Selamat mencoba !

Klik disini untuk melanjutkan »»

Cara Membuat Menu di Blogspot dengan List-O-Matic

Banyak yang nanyain cara bikin menu seperti yang aku pake di blog ini. Untuk blogspot, sebelum membuat menu, halaman yang akan di link sebaiknya di buat dulu dari postingan biasa, karena di blogspot tidak ada fasilitas membuat halaman, yang ada hanya membuat postingan. jadi menu kita nantinya akan di link ke postingan yang udah kita buat.

Misalnya kamu ingin membuat menu Depan, Tentang, dan Portofolio. maka kamu harus membuat postingan dengan Judul/Title: Depan, Tentang, dan Portofolio, dengan demikian kita akan mempunya 3 halaman dengan url http://nama.blogspot.com/depan.html, http://nama.blogspot.com/tentang.html dan http://nama.blogspot.com/portofolio.html.

Selanjutnya ikuti langkah-langkah pembuatan menu secara otomatis menggunakan List-O-Matic. Setelah semua langkah di lakukan, kamu akan di beri 2 jenis kode yaitu HTML dan CSS.

Here is the HTML for this list:

• Depan


• Tentang


• Portofolio

Copy kode HTML dan masukkan lewat Add a Page Element - HTML/JavaScript dan letakkan dimana kamu pengen menunya muncul.

Here is the CSS for this list:

#navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

Sedangkan untuk kode CSS harus di copy dan di letakkan dalam kode template. Di halaman template blog kamu, pilih Edit HTML, letakkan kode CSS dari List-O-Matic tadi sebelum kode ]]> dan save template.

Selamat Mencoba !

Klik disini untuk melanjutkan »»

Free Blog dari Oggix

Sukses dengan free shoutbox dan blog toolsnya, si Ogi ngeluarin layanan bikin blog gratis.

Yang pengen punya blog silahkan daftar, ntar dapat sub domain mirip kayak bikin blog di wordpress.com, namakamu.oggix.org. karena berbasis wordpress, oggix.org tentu saja sangat mudah untuk digunakan, apalagi buat kamu-kamu yang udah terbiasa di wordpress.com.

Sama kayak di wordpress.com, untuk customize nggak begitu banyak yang bisa dilakukan. Hanya bisa memanfaatkan widget yang tersedia dari themes yang kita pilih.

Karena ada widget tadi sempet nyobain masang code google adsense dan bisa muncul, artinya boleh di moneytize neh . cuman aku belum konfirm ke si Ogi, memang boleh atau nggak pasang iklan di blog yang kita bikin di Oggix.org. Semoga boleh deh, biar ada alternative lain buat bikin blog yang bisa dipake nyari duit di internet kayak blogspot.

Klik disini untuk melanjutkan »»

4 langkah cepat di banned dari technorati Top 100

4 cara ini sebenarnya adalah cara supaya cepat terkenal dan cara tercepat juga di banned dari technorati . Jadi buat kamu yang pengen cepat terkenal dan dapat banyak traffic cobalah untuk membuat sesuatu yang berguna buat orang lain, misalnya: Buat plugin wordpress kayak si Alex King, bikin software blog kayak si Matt, buat theme wordpress atau template blogger kayak Isnaini .

Masalah ntar di banned dari technorati nggak perlu dipikirin, lagian traffic dari situ juga gak penting banget, yang penting terkenal dulu, lumayan kan bisa dapat traffic dari link di web/blog lain. Dan yang paling penting adalah kita dapat backlink ketika banyak orang yang ngomongin atau pake template atau themes yang kita buat, dengan begitu kita bisa dengan mudah dapat pagerank tinggi di Google.

Klik disini untuk melanjutkan »»

Technorati: State Of The Blogosphere 2008

Technorati membuat survey acak terhadap sekitar 1,079 blogger untuk mengetahui siapa sebenarnya yang suka nge-blog di dunia maya. Technorati saat ini telah meng-index 133 juta blog sejak 2002. Menurutku hasil survey ini udah cukup mewakili keberadaan sebagian besar blogger di seluruh dunia. Saat postingan ini saya ditulis, report ini baru sampe hari ke-4: Blogging For Profit, yang menunjukkan bahwa sebagian besar blogger yang di survey masang iklan di blog mereka, dengan pendapatan rata-rata pertahun adalah $6000 dan sebagian lagi bisa mencapai $75.000 untuk yang punya visitor lebih dari 100.000 unique visitors perbulan. Artinya saat ini makin banyak blog yang digunakan untuk mencari uang . Kita tunggu saja hasil report lengkap sampai hari ke-5: Brands Enter The Blogosphere.

Klik disini untuk melanjutkan »»

Tips to Make Multi Column on Blogger Template

Hi guys? Meet again with me on Blogspot tutorial. This time, I would like to share my trick and tips to make multi column on blogger template. Like in wordpress, maybe you ever see any footer column which split into 2, 3, or even 4 parts. The question is, “do we can make the same thing in Blogger?” Of course we do. It will be very easy to build. Do you want to know more? Read it till end!

To make footer part become one column, it isn’t difficult as you imagine. But, you need a little trick to make the footer blog have multi column. To make you understand, I advise you to try it. Make a new blog for this little experiment (don’t do it on your main blog). In order to avoid any accident that might be happen..

First preparation that we need to give attention most is, width of our column that will be split into multi column, quantity of column that we going to make, space between one column to another column. But, templates in Blogger are so much. To make a deal with those problems, let’s use template Minima. Minima is original template that provide by Blogger with optional color white. Number of column that we are going to make is three column.

Original Minima template has 660 pixel column widths. We are going to make three columns, if we calculate it : 660px divide by 3 = 220px. With space (code to make space is padding) between column is 10px. Based on result of my calculation, column that we will make is 205px.

This is the steps to make multi column on blogger template :

Step 1:

1. Don’t give a tick on white little box beside sentence, “expand widget template”. Or it will be twice more difficult.
2. Add the code below exactly above code ]]>

   /* bottom
==================== */

   #bottom {
   width: 660px;
   position: relative;
   clear:both;
   margin: 0 auto;
   color:#fff;
   float: left;
   background:#BDBABD;
   padding: 15px 0 15px 0;
   }

   #bottom h2 {
   padding: 5px 0 2px 0;
   margin: 0 0 10px 0;
   color:#ff5a00;
   font-size: 24px;
   letter-spacing: -1px;
   border-bottom: 1px solid #fff;
   }

   #bottom ul {
   padding: 0;
   margin: 0;
   }

   #bottom ul li {
   line-height: 26px;
   list-style-type: none;
   border-bottom: 1px dashed #031c5d;
   }

   #bottom ul li a {
   display: block;
   padding: 0 10px;
   color:#0701FD;
   text-decoration: none;

   }
   #bottom ul li a:hover {
   background: #B1ACB1;
   }

   #left-bottom {
   width: 205px;
   float: left;
   padding-left:10px;
   }

   #center-bottom {
   width: 205px;
   float: left;
   padding-left:10px;
   }

   #right-bottom {
   width: 205px;
   float: left;
   padding: 0 5px 0 10px;
   }

3. Head to body under part of template code. Find out codes like this:

   
   
   

4. Copy and paste code below exactly above of the previous code.

5. Click Save Template Buttons.

6. It’s done!

Step 2:

1. Click Page Element tab.
2. Are your new columns already become three?

If it hasn’t success yet, you must be missing something. If you already success, congratulations on you.

Well… do you want to see the examples? Just click here! Or, you can see at the bottom of this page.

Good luck!

Klik disini untuk melanjutkan »»