Cara menampilkan postingan hanya judulnya saja

Beberapa blogger ada yang lebih memilih hanya menampilkan judul postingan saja pada halaman depan homepage atau beranda blog. Banyak alasan memang mengapa sebagian blogger lebih memilih alternatif ini. Seperti dengan hanya menampilkan judul saja dapat menghemat ruang sehingga jumlah post yang ditampilkan bisa lebih banyak pada halaman depan.

Saya sangat setuju dengan alasan seperti itu. :)

Alasan lainnya yaitu mungkin karena judul posting di halaman depan lebih memungkinkan artikelnya akan lebih banyak dibaca oleh para pengunjungnya.

Nah, berikut adalah contoh blog yang hanya menampikan judul postingannya saja di halaman depan atau homepage :

Mungkin sobat akan bertanya, kenapa blog ini tidak menerapkan alternatif yang lumayan menguntungkan ini?! Sebab, saya punya jawaban dan alasan tersendiri loch.. hehehe :D

Udah lah, berikut cara untuk membuat agar halaman depan hanya menampilkan judul postingannya saja, ikuti langkah-langkahnya ya..

1.      Silakan sobat login dulu ke blogger, lalu klik Rancangan

2.      Klik menu Edit HTML

3.      Saya sarankan agar sobat seperti biasa membackup template sobat terlebih dahulu, caranya dengan mengklik tulisan Download Template Lengkap. Pake jaga-jagaa aja sich.. ;)

4.      Cari kode ]]></b:skin>

5.      Copy kode di bawah ini, lalu paste di bawah kode tadi

<style type='text/css'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

.post-body{display:none;}

</b:if>

</b:if>

</style>

6.      Kemudian klik Save Template

Gimana, gampank kan? Tapi, dengan kode di atas masih menyisakan beberapa elemen seperti tanggal postingan, komentar, dan yang lainnya. Nah, jika sobat ingin menghilangkan semuanya dan yang tersisa hanya judul postingannya saja, mungkin sobat bisa gunakan kode di bawah ini :

<style type='text/css'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

.post-body, .post-footer, .jump-link,

.post-timestamp, .reaction-buttons,

.star-ratings, .post-backlinks,

.post-icons, .date-header{display:none;}

</b:if>

</b:if>

</style>

Sekian dulu dari saya untuk kali ini. Semoga tips cara menampilkan judul postingan saja pada halaman depan atau homepage blog tadi dapat bermanfaat buat sobat sekalian.

Sampai bertemu dalam postingan berikutnya yaa..

Mengganti Icon Blogger

Ketika membuka atau blog kita maka akan muncul di addres bar (tempat unuk menuliskan alamat URL) akan muncul icon atau gambar kecil. Dan jika blog kita ada di blogger.com atau blogspot maka icon itu berupa gambar dari blogger.com seperti d ibawah ini.

Untuk kita-kita yang sedikit tak meninginkan icon blogger itu muncul di Addres Bar blog kita, bisa juga kita ganti icon blogger itu dengan yang lainnya. Misalkan denagn foto kita sendiri atau gambar-gambar yang begerak atau berformat gif. Tapi yang paling penting adalah ini sebuah icon jadi usahakan yang berukuran kecil saja, misal 24 x 24 pixel atau 32 x 32 pixel saja supaya loadingnya cepat.

Cara Mengganti Icon Blogger di Addres Bar
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini </head>
6. Taruh script berikut ini tepat diatas kode </head>

<link href='http://img401.imageshack.us/img401/7652/eqizqu6.gif' rel='SHORTCUT ICON'/>

7. Lalu Simpan kalu sudah selesai.

Berikut ini Icon-icon yang bisa kita gunakan:

http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif
http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif 

Cara Mengganti Template - Mendesain Template Blog

Melanjutkan artikel Cara Buat Blog kali ini akan membahas tentang bagaimana cara mengganti Template Blog atau "mengganti desain template blog". Template merupakan desain rangkaian  halaman blog /web beserta seluruh komponennya terdiri dari beberapa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web/blog.

Nah apa yang anda lihat saat ini di monitor adalah susunan gambar dan tulisan.  Itu yang di namakan template.belum faham juga..!  oke coba perhatikan baik-baik halaman yang sedang anda baca, ini template blog saya.

Untuk mengganti template sobat tidak usah repot repot membuat template sendiri karna itu membutuhkan keahlian khusus ( bisa anda pelajari kemudian ) namun anda bisa mencarai desain template untuk blog anda yang telah di sediakan oleh blogger. atau anda bisa menggunakan jasa Penyedia template Blog Gratis dengan cara masuk ke Sarch Engine Google dan ketik kata kunci " Template Blog Gratis" atau anda langsung saja klik di sini.

Selanjutnya anda tinggal memilih template yang anda inginkan karna tersedia banyak sekali Template  kemudian download template yang menurut anda cocok dengan tema blog yang anda kelola saat ini ( file yang anda download biasanya berbenruk Zip/Rar ) jadi anda extrak dulu file tersebut timpa pada my dokumen atau boleh pilih desktop agar mudah menemukan file Template blog nantinya okke...! :-)

Berikut Langkah-Langkah Mengganti Template Blog atau cara mengganti desain template di blogspot :

• Login terlebih dahulu ke akun blogger anda
• klik menu lingkaran hujau tanda panah 1
• Setelah iitu klik Perancang Template kotak Hijau

 

 

• Akan tampil halaman seperti gambar di bawah ini silahkan klik Cadangkan/Pulihkan perhatikan tanda panah merah
  

• setelah anda klik Cadangkan/pulihkan maka muncul seperti di bawah ini : 

• Unduh Template Lengkap : jika anda masih menginginkan template blog yang anda pakai saat ini anda bisa menyimpannya dengan mengklik Unduh Template Lengkap
• klik Browser Untuk mencari File Template Blog yang sudah anda download sebelumnya

• ketika anda klik browse maka anda tinggal mencari tempat anda menyimpan File Template Blog bereksistensi XML Dokumen ( sebaiknya anda simpan file template yang anda extrak ke Dextop anda agar mudah menemukannya hmm...seperti yang saya lakukan heheheh... perhatikan ( Gambar-Gambar Cara unggah tempalte Blog  Di bawah ini ) 

 

Akhirnya template blog  sobat sudah berubah. silahkan ketikkan alamat blog anda pada browser yang anda gunakan Semoga dengan template yang baru ini sobat bisa blogging dengan semangat yang tinggi.sekian dulu dari saya semoga bermanfaat untuk sobat sekalian.Bila ada pertanyaan atau saran,silahkan tulis komentar sobat di bawah.Sampai jumpa di Panduan cara membuat Blog dan aplikasi widget untuk blog anda .

Terima kasih atas kunjungan anda jika ada pertanyaan silahkan saya tunggu dan siap membantu anda, tanpa di pungut biaya GRATISS BRO sampai jumpa

Cara Mudah Membuat Readmore Otomatis di Blog Terbaru

Bagaimana cara membuat readmore di blogspot dengan cara yang mudah dan cepat kilat di blog kesayangan sobat blogger . inilah pokok bahasan yang akan saya bahas untuk anda semua,hehehe.

baik sobat blogger, sebelumnya saya jelaskan sedikit apa gunanya read more pada blog kita. dengan adanya readmore blog sobat tampilan nya di home tidak terlalu memanjang ke bawah seperti tampilan home blog saya yang menggunakan readmore namun disini saya menggantinya dengan tulisan baca selengkapnya, itu seterah sobat.

Berikut cara memasang readmore di blogspot :

-Login ke blogger dengan ID sobat.

-Pilih Rancangan atau Tata Letak.

-Pilih Edit HTML.

-Centang tulisan "expand template widget".

-Lalu cari kode </head> :   untuk mempermudah pencarian tekan F3.

-Lalu masukkan code di bawah ini tepat di atas  </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Kemudian sobat  cari kode <data:post.body/>

Ganti kode <data:post.body/>  dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

Kemudian Save Template.

untuk keterangan readmorenya...

var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;

summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;

summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;

img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel;

img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;

READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, sobat bisa menghapus code script ini .

nah demikian lah tutorial dari berry blog , semoga tutorial blog mengenai cara membuat readmore di blog dapat bermanfaat untuk sobat semua.