Cara Menampilkan Hanya Judul Postingan Saja Di Homepage

Cara Menampilkan Hanya Judul Postingan Saja Di Homepage | Pada kesempatan yang sangat bahagia ini saya akan berbagi pada anda yang kebetulan sedang mencari artikel yang saya tulis ini yaitu bagaimana cara menampilkan postingan cuma judulnya saja di halaman utama. Pastinya akan lebih menarik. Dengan menampilkan judul postingannya saja tanpa gambar dan postingan lengkap di sidebar, akan membuat blog akan terlihat lebih bagus dan lebih menghemat ruangan halaman depan anda.

Dan yang tidak kalah pentingnya, dengan adanya hanya judul posting saja pada halaman homepage akan membuat blog anda loadingnya lebih cepat dari pada penampilan blog anda sebelum menggunakan tutorial ini. Pengunjung lebih menyukai artikel yang tidak terlihat padat dengan gambar dan sejenisnya, karena pengunjung yang membaca artikel anda cuma focus ke title postingan saja.

Berikut langkah-langkah menampilkan hanya judul postingan saja di blog :

1.  Login ke Blogger
2.  Pilih Rancangan
3.  Klik Edit HTML
4.  Cari kode ]]></b:skin> pakai ctrl + F biar cepat
5.  Lalu copy kode di bawah ini dan di bawah kode ]]></b:skin>

<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.   Selesai dan simpan Template

Oia, dengan kode seperti diatas tersebut masih menyisakan beberapa elemen seperti : 
1. tanggal postingan
2. komentar dan yang lainnya 
Apabila anda tidak suka dengan tanggal, komentar dan yang lain, anda cukup ganti kode diatas tersebut dengan kode di bawah ini sehingga yang tampak hanya judul postingan saja.

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

Selesai, Slamat mencoba

READ MORE - Cara Menampilkan Hanya Judul Postingan Saja Di Homepage

Cara Membuat dan Mempercantik Textarea

Cara Membuat dan Mempercantik Textarea - Sungguh enaknya mengotak-atik blog, jika kita mengenal lebih dekat Pengembangan sebuah web atau blog.

Hari ini IKDT (Ilmu Komputer Dan Teknologi) akan ngepost cara membuat dan mempercantik textarea. Sebelum ke topik pembahasan,kita harus mengenal kegunaan textarea. Textarea sangat berguna untuk blog, karena dengan teks area kita dapat memodifikasi pesan,sebuah kata atau juga berguna untuk menaruh kode html pada setiap posting artikel tentang blog.

Jika anda ingin membuat textarea maka pilihlah sesuai dengan keinginan anda!!

Jika anda ingin membuat textarea maka pilihlah sesuai dengan keinginan anda!!











<br /><textarea name="code" rows="3" co2ls="40" style="background:#FF000A; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"><br />ISI TEKS AREA SOBA DISINI </textarea>



<textarea name="code" rows="3" cols="40" style="background: #FBEFFF; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 40px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;"> ISI TEKS AREA SOBAT DISINI</textarea>



<textarea name="code" rows="3" cols="40" style="background: #FFDAAF; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;"> ISI TEKS AREA SOBAT DISINI </textarea><br /> <br /> <br />

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="width: 300px; height: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Text atau kode yang ingin di masukan di kotak text area di sini

<textarea name="code" rows="3" cols="40" style="background:#BFFAFF; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> ISI TEXT/KODE </textarea><br /> <br />



<textarea name="code" rows="3" cols="40" style="background:#DAFFBF; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;"> ISI TEKS AREA SOBAT DISINI </textarea><br />





<textarea name="code" rows="3" cols="40" style="background: #EF0090; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;"> ISI TEKS/KODE </textarea>







Semoga Postingan ini bermanfaat

READ MORE - Cara Membuat dan Mempercantik Textarea

Membuat Popup Menu hanya dengan CSS

Dalam artikel sebelumnya tentang 10 Kesalahan SEO, ada satu hal yang membuat penulis terpanggil untuk memberikan solusi salah satunya. Apa itu ?? Yakni developer website biasanya melakukan kesalahan membuat popup menu dengan java script, hal ini cukup fatal, biasanya googlebot ataupun crawler yang lain enggan melewatinya.

Oke lalu bagaimana membuat googlebot maupun crawler lainnya mengindex page melalui popup menu? Yakni dengan mengubah popup menu dari yang tadinya menggunakan javascript menjadi menggunakan css saja. Menggunakan css untuk membuat popup menu jauh lebih ringan, dan tentunya jauh lebih disukai oleh googlebot maupun crawler yang lainnya. Hasilnya adalah index page jauh lebih maksimal.


Luar biasa bukan? Sungguh. :-)
Sederhananya membuat popup akan segera kita bahas segera.
Ya persiapkan satu file saja, misakan popup.html
di bagian body, isinya kurang lebih seperti ini :

<body>
<div id=”menu”>
<ul>
<li><a href=”">Home</a></li>
<li>?? ?
<a href=”">News</a>
<ul>
<li><a href=”">Website</a></li>
<li><a href=”">Mobile</a></li>
<li><a href=”">Android</a></li>
</ul>
</li>
<li><a href=”">About Us</a></li>
<li><a href=”">Contact Us</a></li>
<li><a href=”">Service</a></li>
<li><a href=”">Portfolio</a></li>
</ul>
</div>
</body>
Sedangkan style di bagian headnya kira-kira seperti ini

<style type=”text/css”>
#menu{
width:auto;
height:30px;
padding:8px 0 0px 0;
background:#0057C7;
}
#menu ul{
margin:0;
}
#menu ul li{
list-style-type:none;
margin:0;
float:left;
}
#menu ul li a{
font-family:Arial;
text-decoration:none;
margin:0 10px 0 0;
font-size:12px;
color:#fff;
}
#menu ul li ul.child{
display:none;
}
#menu ul li:hover ul.child{
display:block;
position:absolute;
z-index:2;
text-align:left;
}
#menu ul li:hover ul.child li a{
display:block;
padding:10px 20px 10px 20px;
background:#0057C7;
margin:0 0 0 -20px;
}
#menu ul li:hover ul.child li{
float:none;
margin:0 0 0 -30px;
}
#menu ul li a:hover{
text-decoration:underline;
}
</style>

Yang terjadi sebetulnya kita membuat popup menu memanfaatkan unordered list <ul>. Dimana di dalamnya terdapat kelas parent dan child seperti ini :
Dan yang membuat mereka menjadi terlihat popup adalah
Ketika kondisi normal, atau dengan kata lain li anak parent tidak di hover. Maka yang terjadi adalah ul.childnya disembunyikan.
#menu ul.parent li ul.child{
display:none;
}
dan ketika li anak parent di hover maka ul.childnya di tampilkan.
#menu ul.parent li:hover ul.child{
display:block;
position:absolute;
z-index:2;
text-align:left;
}



Mudah sekali bukan? Ya begitulah cara membuat popup menu dengan menggunakan css saja. Selamat mencoba.
Salam.

READ MORE - Membuat Popup Menu hanya dengan CSS