Tampilkan Judul Postingan Saja Pada Halaman Depan

Lagi - lagi tentang trik blog yang tiada habisnya di ungkap. Kesempatan kali ini saya memberikan tips untuk menyembunyikan post body di halaman depan atau yang lebih banyak disebut yaitu Menampilkan Judul postingan saja pada halaman depan. Kenapa harus di sembunyikan post body-nya? sebenarnya agar lebih cepat saja loading blog kita dan menurut saya ini tampilan atau desain yang berbeda + unik dari blog lain walaupun sudah banyak blogger yang memakai trik ini.
Menampilkan Judul Postingan Saja Pada Home Page tidak mempengaruhi trafik blog, kenapa bisa? karena post body atau isi postingan hanya di sembunyikan bukan dihilangkan. Kalau menurut SEO bagaimana? untuk permasalahan SEO saya tidak tahu lebih dalam dan baik namun menurut saya trik ini terhadap SEO pun tidak mempengaruhi karena yaitu hanya di sembunyikan bukan di hilangkan. Oiya hampir lupa, sobat semua sudah taukan maksud dari trik ini? kalau belum lihat gambar di bawah ini sebagai contoh dari trik ini.

Panah pada gambar di atas menunjukan Judul postingan yang di tampilkan pada halaman depan saja sedangkan pada halaman postingan yang tampil tidak hanya judul saja namun isi dari judul tersebutpun akan tampil. Mudah - mudahan penjelasan di atas cukup untuk mendeskripsikan maksud dari trik ini, sekarang kita lihat caranya.

1. Login ke blogger
2. masuk ke Rancangan >> Edit HTML
3. cari kode ]]></b:skin> lalu taruh kode di bawah ini tepat di bawahnya
   <style type='text/css'>
   <b:if cond='data:blog.pageType != "item"'>
   .post-body, .jump-link,
   .post-timestamp, .post-backlinks,
   .date-header, .post-footer, .comment-link, .post img, .post blockquote {display:none;}
   </b:if>
   </style>
   
   
4. Sekarang simpan dan sobat dapat melihat hasilnya

Ingat! dengan menggunakan cara di atas sobat dapat melihat judul postingan saja pada halaman depan dan kode di atas dipakai menurut template blog ini, setiap template memang berbeda - beda jadi ada kemungkinan trik ini berhasil pada template sobat namun yang hilang hanya post body (isi postingan), tanggal postingan dan bagian postingan paling bawah. Ternyata pada halaman depan blog sobat ada elemen yang ingin sobat hilangkan, tinggal tambahkan id (#) atau class (.) -nya sebelum kode {display:none;}. Mungkin hanya itu saja yang bisa saya berikan. Terima kasih dan Happy Blogging.

Membuat Efek Bergelombng dengan CSS

Banyak sekali cara untuk menghiasi blog dan template agar lebih menarik untuk di kunjungi dan tentunya membuat pengunjung menjadi betah di blog anda, namun jangan karena ingin blog anda terlihat banyak hiasannya, blog anda menjadi berat karena terlalu banyak script yang di pakai. Untuk trik yang satu ini, di buat dengan menambahkan kode CSS saja tanpa ada bantuan script - script yang memberatkan blog. Contohnya kaya gimana sich? lihat yuk ke bawah!
:

Demo

• Trik Blog
• Memperlebar Halaman Blog
• Cheats GTA San Andreas
• Blue Dark CSS3 Blogger Template
• Membuat Pop Up Gambar
• Smooth Scrolling Page
• Naik Turun Scrolling
• Belajar CSS
• Belajar HTML
• CSS3 Border Color

Gimana dengan efeknya? wajar saja efeknya tidak terlalu menarik karena trik ini tidak menggunakan Javascript ataupun Jquery. harap di maklumi saja y, tapi dengar - dengar di masa yang akan datang css ada kemungkinan bisa mengganti peranan javascript atau script - script yang lain, hmmmm kita tunggu aja y, oke sekarang kita lihat cara memasangnya :

1. Login ke blogger
   
   
   
2. masuk ke Rancangan >> Edit HTML
   
3. cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya
   
   ul, ol a:hover{padding:0 0 0 20px;}
   
   
   
4. Setelah itu langsung simpan dan lihat hasilnya

Bagaimana mudah bukan caranya? oiya efek Link Bergelombang akan kelihatan apabila link dalam sebuah list di sentuh. Memang caranya simple tapi efeknya keren kan. oke deh sekarang saya pamit dulu. Terima kasih dan Happy Blogging.

Related Widget With Thumbnail

Sempat libur beberapa hari untuk menulis tentang trik di blog ini, ada yang berpendapat bahwa blog ini merubah 180 derajat isi-nya yang tadinya berisikan semua tentang trik menjadi free download dan cheats. Pendapat tersebut salah, sebelumnya saya minta maaf bukan maksud untuk merubah namun saya hanya menambahkan isi pada blog ini. Penambahan isi pada blog ini di faktori oleh teman saya yang meminta untuk mengisi tentang cheat dan free download, jadi saya tambahkan saja kategori tersebut kedalam blog saya. Ingat saya bukan merubah isi tapi hanya menambahkan!



Sekarang kita fokus ke judul postingan ini yaitu Membuat Related post Widget With Thumbnail. Mungkin hampir semua blogger yang isi blognya tentang trik blog pasti punya trik ini namun tidak ada salahnya dong kalau saya membahas ulang? Semua blogger mengetahui manfaat dari widget ini, yaitu untuk memudahkan pengunjung blog menjelajahi salah satu kategori blog. Langsung aja yuk ke cara pemasangannya.

1. Login ke blogger
2. masuk ke Rancangan >> Edit HTML
3. setelah itu klik kotak kecil di samping tulisan expand widget template
4. lalu cari kode post-footer-line post-footer-line-1 dan tambahkan kode di bawah ini tepat di bawahnya
   
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;Related Posts&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> </b:if>
   
   
5. setelah itu cari kode lalu tambahkan kode </head> ini tepat di bawahnya
   
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/> </b:if>
   
6. Setelah semua langkah di atas di lakukan maka langkah terakhir simpan
7. selesai

kemudahan dalam penjelajahan isi dari blog anda adalah salah satu cara untuk meningkatkan trafik blog dan mendapatkan pengunjung setia. Mungkin hanya itu saja yang bisa saya sampaikan, kurang lebihnya mohon maaf. Terima kasih dan Happy Blogging.