Mecha versi 2.6.4 sudah dirilis!

Membuat Halaman Muka Blog Tersendiri (Tanpa Posting)

Tip: Membuat Halaman Muka Blog Tersendiri, Tanpa Posting

Sebuah impian mungkin, bagi kalian untuk memiliki halaman muka blog tersendiri yang terbebas dari daftar posting yang telah diterbitkan. Dulu Saya juga begitu, sampai Saya mempelajari tag kondisional Blogger lebih jauh. Kali ini Saya akan membagikannya kepada kalian tentang bagaimana cara menghilangkan semua posting dan menambahkan pesan selamat datang di halaman muka. Yang kita butuhkan pada dasarnya hanya satu jenis tag kondisional, yaitu tag kondisional halaman muka seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Pertama-tama masuklah ke menu Tema kemudian klik Edit HTML dan klik Lanjutkan:

Edit HTML Blogger
Mengedit HTML

Temukan kode yang kurang lebih tampak seperti ini:

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Tepat di atas kode tersebut, letakkan kode ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:section class='main' id='homepage'></b:section>
<b:else/>

dan tepat di bawahnya, letakkan kode ini:

</b:if>

sehingga hasilnya akan menjadi seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:section class='main' id='homepage'></b:section><b:else/><b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
  </b:section></b:if>

Seperti yang kalian lihat bahwa apa yang kalian lakukan sebenarnya hanyalah menggandakan elemen <b:section> dimana salah satu hanya akan tampil di halaman muka, sedangkan satunya lagi hanya akan tampil selain di halaman muka.

Klik Simpan Tema. Sekarang masuklah ke halaman Tata Letak. Jika berhasil, seharusnya widget posting akan menghilang, digantikan oleh sebuah navigasi untuk menambahkan widget baru seperti ini:

Widget posting menghilang, dan sebuah elemen untuk menambahkan widget baru akan tampil seperti halnya pada sidebar blog.
Widget posting akan menghilang, dan sebuah elemen untuk menambahkan widget baru akan tampil seperti halnya pada sidebar blog.

Dari elemen itu Anda bisa menambahkan widget yang hanya akan ditampilkan pada halaman muka. Widget bisa berupa apa saja. Misalnya seperti teks ucapan selamat datang seperti gambar di atas, widget daftar isi, slideshow otomatis, atau yang lainnya.

Catatan: Menerapkan manipulasi ini akan membuat fitur pratinjau pada editor posting tidak berfungsi. Sebenarnya bukannya tidak berfungsi, hanya saja saat Anda mengeklik tombol Pratinjau, yang akan Anda lihat selalu berupa widget yang Anda tambahkan, sedangkan posting yang seharusnya ingin Anda lihat tidak akan tampil.

113 Komentar

Unknown

mantep sekali bang, itu kalau orang gak biasa, di kira Area postingX ilang dan gak bakal tampil juga di blog :D

Ijal Fauzi

Ada solusi untuk masalah pratinjau ngga mas? Pake conditional tag mungkin ?

Taufik Nurrohman

@Ijal Fauzi Sepertinya belum ada. Ini bukan masalah tag kondisional, tapi masalah tautan pratinjau standar Blogger. Seandainya Blogger bisa menyesuaikan arah halaman pratinjau dengan tempat dimana kita berada, mungkin itu tidak akan menjadi masalah. Dan bukan hanya arah saja, tapi juga elemen-elemen yang tepat.
Katakanlah jika kita berada di dalam editor posting, seharusnya URL pratinjau harus murni mengarah ke halaman yang akan kita terbitkan, sekaligus mengambil dan megabaikan elemen halaman yang tidak sesuai dengan kondisi dalam pengaturan template pengguna. Tapi Saya rasa jika sampai Blogger menciptakan sistem pratinjau yang terlalu banyak proses deteksi seperti ini, sepertinya fitur pratinjau akan menjadi lebih lambat dalam segi proses (hanya untuk mempratinjau posting saja harus mengecek semua isi template??!! Tidak efisien. Tidak sesuai dengan tujuan utamanya, yaitu mengintip hasil jadi posting :-a).
Ini bukan sesuatu yang terlalu penting, lagipula fitur pratinjau itu cuma sementara. Saya sendiri masih heran, padahal mereka memiliki URL pratinjau tersendiri, tapi modifikasi ini masih saja memiliki kekurangan:

Template: http://namablog.blogspot.com/b/html-preview?token=-p6JWTYBAAA.6cf1a5JOOLRm_mcYd9vbcQ.78Q3CcvWCf_T7F6KZhci1w&blogID=XXXX00102869691923
Posting: http://namablog.blogspot.com/b/post-preview?token=lQ9_WzYBAAA.6cf1a5JOOLRm_mcYd9vbcQ.FU6TIUQZGG1E2Dc5YcV3QA&postId=XXXX01172151545712&type=POST
Halaman Statis: http://namablog.blogspot.com/b/post-preview?token=2RaBWzYBAAA.6cf1a5JOOLRm_mcYd9vbcQ._-gzjb3WCJvZaJqgvXlA6Q&postId=XXXX024526800021063&type=PAGE

azhar

mantap bang,,,,should be tried at home \o/ :-a

Atika Aziz

mas mau tanya, disaya adanya seperti ini

jadi tidak dibarengi dengan

solusinya gimana ya?
haruskah saya ganti fALSE itu ke TRUE... dan harus saya apakan kode nya??
dan bagaimana dengan yang tidak ada di kode html saya??
makasih byk mas

MUX SPARROW

Udah diterapin barusan di blog sarang, Mas.. \o/ makasih tips kerennya nih.. :-bd

Unknown

waduh kok postingnnya ga mau ilng nih taufik.........padahal dah coba cara diatas dengn benar

www.metal-xp.net

Taufik Nurrohman

@Metal-xp Naruh kode </b:if> yang terakhir bukan di bawah <b:else/> kan?
Hasil akhirnya harus jadi seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='main' id='homepage'></b:section>
<b:else/>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</b:if>

Unknown

Yah terus taruh dimananya ?

Anonim

Mas, kalau mw ngedit yang widget post gmana ?? kan dah gk kliatan.

Yayas

mas ,. kalau saya coba sembunyiin widget pake cara itu,spt ini
<b:if cond='data:blog.pageType == &quot;item&quot;'> di homepage blog ,biar bisa tampil di menu tata letak tuh gimana ya?
thx.

Gerardo P

Mas, saya coba menampilkan kode di komentar kok ga bisa ya? Baik dengan rel="code" maupun yang rel="pre" tidak bisa semua :'(

Unknown

seandainya ada cara menyelesaikan masalah pratinjau.. tapi ada cara lain gak untuk menghilangkan widget posting blog pada halaman awal.. agar tida menggangu pratinjau..?? saya utak atik hal ini tidak pernah berhasil.. sekalipun bisa namun itu hanya menggunakan dislpay:none; namun kurang fektif cara menyembunyikan widget tersebut... :'(

Unknown

terima kasih mas info nya ^_^ :-bd :Q

Kidang Alit

Saya mencoba menerapkan diblog saya, tapi saat buat posting baru halaman pratinjaunya gak muncul mas ! Bagaimana cara agar halaman pratinjaunya tetap tampil mas ? Help Solusinya mas ! Trims

Taufik Nurrohman

Sudah Saya tuliskan dengan jelas di atas ^:D

Catatan: Menerapkan manipulasi ini akan membuat fitur pratinjau pada editor posting tidak berfungsi. Sebenarnya bukannya tidak berfungsi, hanya saja saat Anda mengeklik tombol Pratinjau, yang akan Anda lihat selalu berupa widget yang Anda tambahkan, sedangkan posting yang seharusnya ingin Anda lihat tidak akan tampil.

Dan di beberapa komentar balasan:

Tetap tidak bisa tampil, ini sudah resiko menerapkan tampilan ini.

Saya bukan pemilik Blogger, jadi tidak bisa melakukan apa-apa =(

EM

sabar mas taufik....
mungkin tadi beliau lupa baca bagian yang itu.....
tetap semangat mas,
saya selalu menanti ide-ide kreatif sampean,

:-)

Yusril Ibnu Maulana

sip, bagus tutornya... tapi mau tanya lagi hehehe berhubungan dengan .

gini tema dasar saya ( bisa di lihat di homepage blog saya yuzsite.blogspot.com ) (maklum punya 2 blog hehehe), dasarnya kan abu abu..., nah gimana caranya agar di setiap postingan yang berlabel ramadhan backgroundnya bisa hijau...

saya dah coba memakai tag b:if yaitu salah satunya

<*i rel="pre">
<*b:if cond='data:blog.url == "http://yuzsite.blogspot.com/2012/07/marhaban-ya-ramadhan.html"'>
<*style type='text/css'>
a:hover{color:green;text-decoration:italic;outline:none;text-shadow: -1px 1px 8px green, 1px -1px 8px #C0F7C6;transition-duration:3s}body{background:#C0F7C6;color:#656565; font-family:Arial,Verdana; font-size:12px; margin:0px; padding:0px}a:link{color:green}a:visited{color:green}::-webkit-scrollbar-thumb{background-color:#C0F7C6;-moz-border-radius:10px;border:1px solid #000;border-radius:10px}
<*/style>
<*/b:if>
<*/i>

nah itu dah bisa kan (di yuzsite.blogspot.com/2012/07/marhaban-ya-ramadhan.html)tapi masa saya kalau menambah artikel harus edit lagi css nya , seperti yg disebutkan tadi nah gimana caranya agar di setiap postingan yang berlabel ramahan backgroundnya bisa hijau... tolong bantu yah...

budkalon

Sama seperti postingan bang Tovic di http://www.dte.web.id/2012/04/different-posts-style-based-on-label.html

Seperti ini mungkin:
// Lihat semua posting yang ada kemudian cek masing-masing tautan di dalam span.post-labels
// Cek apakah di dalamnya terdapat kata tertentu atau tidak (misalnya: Menyenangkan)
// Jika ada, tambahkan satu kelas spesifik baru pada posting tersebut
$('.post').each(function() {
if ($(this).find('.post-labels a:contains(Menyenangkan)').length) {
$(this).addClass('red');
} else if ($(this).find('.post-labels a:contains(Jelek)').length) {
$(this).addClass('green');
} else if ($(this).find('.post-labels a:contains(Bosan)').length) {
$(this).addClass('blue');
} else if ($(this).find('.post-labels a:contains(Mamamia)').length) {
$(this).addClass('yellow');
}
});

Lalu css selectornya:
.post.red {background-color:red; }
.post.green {background-color:green; }
.post.blue {background-color:blue; }
.post.yellow {background-color:yellow;}

Hehe :D maaf nyontek

budkalon

Ah!!! Jadi mungkin seperti ini!!!!
$('.post').each(function() {
if ($(this).find('.post-labels a:contains(Ramadhan)').length) {
$(this).addClass('ramadhan');
}
});

dan CSS-nya:
.post.ramadhan {background-color:green; }

Lizanovia M. Hadi

Alhamdulillah... berhasil juga akhirnya..
Saya googling kemana2 tutorialnya sama semua, n gagal pula hasilnya

Anonim

wah keren banget nih fitur tambahan...sangan mendukung sekali...makasih atas tipsnya,,,

hanggarps

yah ternyata kuk ada effek sampinya gtu yah :'(

Anonim

THX gan, tutor nya ... sudah saya terapkan di blog, dan terhasil .... :-bd :-bd

Unknown

gimana sih gan?? aku masih belum nemuin dibawah mas?? tolongg solusinya mas... , blog saya downloadgames-x.blogspot.com

Taufik Nurrohman

Nanti lama-lama tahu. Coba tanya sama agan-agan di atas ^:D

shoshuri

gan cara ngembaliin ke tampilan semula gimana ya?
blog ana jadi bersih, gak bisa di tambah widget lag....
please PM shoshuri@chemist.com

Taufik Nurrohman

Hapus semua tag kondisional yang mengelilingi <b:section id='main'> sehingga tersisa seperti ini:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Unknown

maaf nih. boleh repost nggak?? :)

Unknown

mengatur post gimana yah?
atau membuat next page?

Direkori Penerjemah

Untuk melihat demo dari tutor bagus diatas,
silah kunjungi blog saya http://direktori-penerjemah-indonesia.blogspot.com/ :-bd

Makasih sharing bagusnya mas

Unknown

kalo halamn postingannya ilang. terus postingannnya ditampilkan dimana gan? hehehe maklum masih belajar

Unknown

om Taufik,, kalo maw ubah lebar halaman mukanya aja, gimana ya ? :p

Taufik Nurrohman

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#selector {width:500px}
</style>
</b:if>

Unknown

ditaruh dimana itu kodenya mas?

Sua Betria Dhani

Mantap blognya
saya sudah coba, tetapi ketika disimpan template, laaaamaaaaa betul
kira-kira kenapa ya kang taufik?

Anonim

wah.. mantab om tricknya sangat memuaska. makasih om,...

saya juga kagum dengan tampilan blog anda... 100% mantab om

salam kenal ya om

Unknown

bang, kalo menggunakan trik ini gimana caranya diawal halaman utama/homepage diganti dengan "hanya gambar atau apalah" gitu??

oia makasih yah bang sebelumnya B)

Abu Hanif

sepertinya kang mas ini masternya blog....
saya punya permaslahan besar mas.
2 bulan yang lalu saya pelajari SEO lewat internet, krn belum mahir langsung saja praktekkan.

Baru terasa dan kelihatan setelah 1 bulan kemudian, kok sunyi banget pengunjungnya... dan setelah saya lihat dan baca petunjuknya tenyata tidak terindex lagi sy punya blog.

malah postingan baru sdh tidak bisa terindeks, mungkin ada solusinya untuk mengembalikan lagi mas....

mohon petunjuknya

sebagai informasi tambahan, saya sdh ngecek di http://www.searchenginegenie.com/google-banned-site-checker.php

pesannya begini mas :

Deprecated: Function ereg() is deprecated in /home/seoking/public_html/tools/includes/seg_tools.php on line 217

Deprecated: Function ereg() is deprecated in /home/seoking/public_html/tools/includes/seg_tools.php on line 224
Your Site Is Not Banned In Google.

mungkin bisa bantu referensinya mas...

(by basogama@yahoo.com)

Unknown

makasih mas :D, Tips-nya berjalan dengan lancar :-bd

Unknown

mas,gimana caranya ngapus homepage ini..? mohon penjelasannya

Taufik Nurrohman

Ganti kode ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='main' id='homepage'></b:section>
<b:else/>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</b:if>

dengan kode ini:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Klik Simpan Template.

Anonim

yeahh berhasil :D

thx kak DTE :]

asik2 \o/

Unknown

:( cara ini sebenarnya bagus. tapi untuk blog ku jadi jelek krn halaman menu yg berisikan semua artikel ku kok hilang.
aku pengen halaman depannya seperti ini tapi efeknya halaman menu yg berisikan semua artikel ku tetap ada.
dengan kata lain saya ingin halaman utama yg muncul paling awal adalah seperti ini lalu ketika saya klik tombol tab saya langsung ke halaman menu yg berisikan semua artikel saya. apakah bisa di bantu?
blog saya: Damar-journal.blogspot.com
terima kasih

Taufik Nurrohman

Pakai Tabulasi, buat dua panel saja. Satu untuk ucapan selamat datang dan satunya lagi untuk bagian <b:section class='main' id='main'>

Unknown

Nice gan mantap! ini yg ane cari2 nih.thanks xD (heboh deh)

Anonim

mas taufik
maaf OOT ya
boleh minta cara membuat "Tentang Blog" kyk di blog ini ga mas?

keren banget soalnya... :D

Unknown

tx gan work 100%
mampir-mampir oke :)

Unknown

kalo cuma mau ilangin postingan nya , kenapa ngk gini aja gan :
<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {display:none;}
</b:if>

kan lebih simple.... =p* =p* =p*

Unknown

upp kurang sorry gan ....

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {display:none;}
</b:if>
</style>

EM

menurut saya itu bukan menghilangkan, tapi menyembunyikan atau tidak menampilkan gan,

kalau menghilangkan ya harus menghapus kondisional tagnya

:-)