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:
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:
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.
111 Comments:
mantep sekali bang, itu kalau orang gak biasa, di kira Area postingX ilang dan gak bakal tampil juga di blog :D
Ada solusi untuk masalah pratinjau ngga mas? Pake conditional tag mungkin ?
@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
mantap bang,,,,should be tried at home \o/ :-a
Makasih ya mas...
keren banget blog nya...
:-bd
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
@Atika Aziz ARRGGHHH!!! Kodenya hilang??? :-a
mantap \o/
Udah diterapin barusan di blog sarang, Mas.. \o/ makasih tips kerennya nih.. :-bd
waduh kok postingnnya ga mau ilng nih taufik.........padahal dah coba cara diatas dengn benar
www.metal-xp.net
@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>
@Taufik Nurrohman : Kok saya ngk bisa bisa ya ?
@Uqi Sebelum melangkah ke bagian ini lebih baik pelajari dasarnya terlebih dahulu: Pemahaman Tag Kondisional Tingkat Pertama
Mas, kalau mw ngedit yang widget post gmana ?? kan dah gk kliatan.
mas ,. kalau saya coba sembunyiin widget pake cara itu,spt ini
<b:if cond='data:blog.pageType == "item"'> di homepage blog ,biar bisa tampil di menu tata letak tuh gimana ya?
thx.
@Yayas Tetap tidak bisa tampil, ini sudah resiko menerapkan tampilan ini.
Mas, saya coba menampilkan kode di komentar kok ga bisa ya? Baik dengan rel="code" maupun yang rel="pre" tidak bisa semua :'(
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... :'(
@Denddy Gustiana Belum ada. Itu di luar kekuasaan admin blog.
terima kasih mas info nya ^_^ :-bd :Q
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
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 =(
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...
menarik sekali mas, :-bd
Kalau ada waktu Saya posting.
Alhamdulillah... berhasil juga akhirnya..
Saya googling kemana2 tutorialnya sama semua, n gagal pula hasilnya
wah keren banget nih fitur tambahan...sangan mendukung sekali...makasih atas tipsnya,,,
yah ternyata kuk ada effek sampinya gtu yah :'(
THX gan, tutor nya ... sudah saya terapkan di blog, dan terhasil .... :-bd :-bd
gimana sih gan?? aku masih belum nemuin dibawah mas?? tolongg solusinya mas... , blog saya downloadgames-x.blogspot.com
Nanti lama-lama tahu. Coba tanya sama agan-agan di atas ^:D
gan cara ngembaliin ke tampilan semula gimana ya?
blog ana jadi bersih, gak bisa di tambah widget lag....
please PM shoshuri@chemist.com
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>
kang trick 404 gak ngeload body gmn tu kang :D
Sudah Saya posting kok caranya :\ ⇒ Menciptakan Halaman Error 404 dengan Benar
maaf nih. boleh repost nggak?? :)
mengatur post gimana yah?
atau membuat next page?
Yah terus taruh dimananya ?
Untuk melihat demo dari tutor bagus diatas,
silah kunjungi blog saya http://direktori-penerjemah-indonesia.blogspot.com/ :-bd
Makasih sharing bagusnya mas
kalo halamn postingannya ilang. terus postingannnya ditampilkan dimana gan? hehehe maklum masih belajar
om Taufik,, kalo maw ubah lebar halaman mukanya aja, gimana ya ? :p
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#selector {width:500px}
</style>
</b:if>
Mantap blognya
saya sudah coba, tetapi ketika disimpan template, laaaamaaaaa betul
kira-kira kenapa ya kang taufik?
Alhamdulillah dah berhasil, makasih ilmunya ya!
wah.. mantab om tricknya sangat memuaska. makasih om,...
saya juga kagum dengan tampilan blog anda... 100% mantab om
salam kenal ya om
bang, kalo menggunakan trik ini gimana caranya diawal halaman utama/homepage diganti dengan "hanya gambar atau apalah" gitu??
oia makasih yah bang sebelumnya B)
Tinggal dikasih widget gambar saja kan?
mas,kan misalnya postingan saya panjang,nah biar di pendekan terus ada bacaan BACA SELENGKAPNYA gimana caranya mas,jadi nanti pas di klik baca selengkapnya langsung ke artikel yang saya posting tapi yang fullnya mas
Umum ⇒ /2011/08/membuat-posting-read-morebaca.html
Rekomendasi ⇒ /2012/04/posting-auto-read-more-tanpa-javascript.html
mantaaaaaaaap
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)
makasih mas :D, Tips-nya berjalan dengan lancar :-bd
mas,gimana caranya ngapus homepage ini..? mohon penjelasannya
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.
yeahh berhasil :D
thx kak DTE :]
asik2 \o/
:( 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
Pakai Tabulasi, buat dua panel saja. Satu untuk ucapan selamat datang dan satunya lagi untuk bagian <b:section class='main' id='main'>
Nice gan mantap! ini yg ane cari2 nih.thanks xD (heboh deh)
Mas taufik, kalo ingin mengubah ukuran dan letak homepage gimana ya??, kaya punyanya mas taufik :\
⇒ /2011/08/tag-kondisional-tingkat-lanjut.html
⇒ /2011/09/menciptakan-tampilan-template-yang.html
mas taufik
maaf OOT ya
boleh minta cara membuat "Tentang Blog" kyk di blog ini ga mas?
keren banget soalnya... :D
tx gan work 100%
mampir-mampir oke :)
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*
upp kurang sorry gan ....
<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {display:none;}
</b:if>
</style>
Work perfect in my blog. terimakasih mas taufik... \o/
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
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; }
Saya sangat berterima kasih buatpenulis jugapara pengunjung lainnya kalian sudah bebagai ilmu yang bermanfaat !
ya mudah-mudahan dapat ketemu lagi solusinya jadi pada saat di pratinjau posting bisa kelihatan ! ^____^
Ditunggu saja update terbarunya !
Mas taufik... kalau post nya yang hanya berjudul saja dan dirubah menjadi berjudul dg artikel dan gambar bagaimana ya.... ?
Terimakasih
⇒ /2012/11/xhtml-blogger-seksi-posting.html
sabar mas taufik....
mungkin tadi beliau lupa baca bagian yang itu.....
tetap semangat mas,
saya selalu menanti ide-ide kreatif sampean,
:-)
menurut saya itu bukan menghilangkan, tapi menyembunyikan atau tidak menampilkan gan,
kalau menghilangkan ya harus menghapus kondisional tagnya
:-)
Udah dicoba dan mantab jaya \o/
tengkyu masbero
terima kasih atas tipsnya gan.. :-bd
ditaruh dimana itu kodenya mas?
mas, saya mau tanya nih, gimana cara merubah lebarnya, kan di homepage saya hilangkan side barnya, saya maunya Gadget yg ada post ni aja di halaman utama. atau namanya di page elemen apa ya? apa side bar juga?
info yang bagus.. thx
mmmm akhirnya berhasil juga,Thanks atas infox.
MaKasih Ya Kak, INI INformasi yang sangat berguna, BLog yang memakai sistem ini dapat terlihat ProfesionaL, TerimaKasih Ya Kak TLah mau BerBaGi ILmunya..SaLam..
Berarti kalau menggunakan cara ini, penggunaan auto readmore dan effect cssnya ga berfungsi dong mas. kalau di hapus saja auto readmore+css ny gimana mas? takut ada effect lainny..
Terima kasih gan.. sangat bermanfaat dan berhasil di aplikasikan..
ada tutor cara modifikasi judul blog seperti di blog ini ga..
keren :)
kunjungin balik iya
http://vionadewiayunitami.blogspot.com/
http://vis-fashion.blogspot.com/
artikel yang bagus gan..sudah saya coba di blog saya dan berhasil
www.sutinishare.blogspot.com
mas taufik, ni dah berhasil, tp kok mlah tata letaknya ga bisa di geser2 lg?? kenapa ya??
makasih =p*
Ganti atribut locked="true" menjadi locked="false"
mas taufik kok tetep ga bisa ya,???
makasih ^_^
bang, klo bikin gadget hasilnya menjadi dua kolom caranya gimana? thanks... \o/
Thanks gan infonya
akan saya coba, sangat membantu. trims..
http://doakubunda.blogspot.com/
kalo sama widget2nya gimana mas..
newbi mas saya pake template mas taufik yang blogazine ,, kok beda ya bingung :(
Ini pos sudah lama. Saya membuatnya sebelum editor HTML Blogger tampak seperti sekarang. Kalau dulu masih ada opsi Expand Template Widget di sebelah kanan atas area kode. Mungkin karena itulah jadi agak bingung (kodenya kelihatan berbeda). Kalau bingung coba klik bagian kosong tepat sebelum <b:widget id='Blog1'> supaya panelnya menutup:
[img]http://4.bp.blogspot.com/-NcckKpD6dj8/UrQoI1wU1JI/AAAAAAAAIbc/coq0nho0oQA/s1600/2013-12-20_181356.png[/img]
siip mas udah berhasil makasih banyak \o/ \o/
Makasih mas, work nih! :-bd
Meskipun kode di template blog saya sedikit berbeda, tapi akhirnya bisa juga diterapkan.. \o/ \o/
Makasih banget mas, dari sini saya bisa belajar banyak hal.. :-bd
blog anda sangat bermanfaat, dan semoga blog saya juga http://pramarda.blogspot.com/
keren keren, saya sudah pake....
kasih jempol
keren.....................................
saya juga niatnya mau buat ginian sih :D
Tipsnya bermanfaat sekali mas.. Sudah dicoba beberapa kali, akhirnya berhasil juga. Perlu template yang pas untuk menerapkan tips ini.. Mantab.. :-bd
ada problemo yg sama disini,
udah di ganti kodisinya tetep ga bisa mas, cuman suruh refresh & cobalagi nanti ^:D
ga cuman mindah layout, tp juga ga bisa nambah/ngesave, semua yg ada di tata letak ^:D heleph :p
Kalau tidak bisa dari halaman Tata Letak, dicoba saja manual dari halaman Editor HTML. Hasilnya akan sama saja.
http://4.bp.blogspot.com/-V780NegRwB4/U_qF9iWH5nI/AAAAAAAAInw/Qk4uxTfU7sA/s1600/blogger-widget-xml-tags.png
Bagian <b:widget> dipindah-pindah urutannya antara yang satu dengan yang lainnya.
NB: Cek juga komentar Saya ke iwan qynos.
ya, lewat Perancang Template » Tata Letak juga bisa mas :yaya:
[img]http://1.bp.blogspot.com/-UshTQ6wGxlk/U_r0nW2yV2I/AAAAAAAAATU/9PJ7kdFlyJ4/s1600/Perancang%2BTemplate.png[/img]
poin yg saya cari bagaimana agar bug ini bisa di netralisir dan bisa menggunakan fungsi Tata Letak dengan semestinya :yaya:
iya mas expand/collapse yg sekarang jauh lebih efisien ga kaya yg jadul :p
resiko nya orang pintar, selalu di sibukan oleh banyak nya pertanyaan pertanyaan... salam sukses & salam sejahtera buat mas TAUFIK NURROHMAN
Mantap gan....
sangat membantu banget...
kunjungi juga ya gan di blog ane
http://lembaranhatii.blogspot.com/
mantap om, semangat terus om!
ko kaga ada yah gan ga berpengaruh
mohon pencerahan nya donk admin saya juga mau bikin halaman depan kosong tapi kode
saya ga nemu diblpog saya mohon bantuannya terimakasih
na acih 0:)
dengan menghilangkan begitu, jika kita menuliskan alamat posting, posting akan tetap bisa kebuka?
Masih, ini adalah salah satu contoh → http://damzaky.blogspot.com
punya saya adanya
di tambahain tag di atas ga bisa ada solusi mas ?
Sob, kalau saya sebaliknya ingin menampilkan seluruh post di halaman home, awalnya saya memakai halaman khusus untuk home dengan nulis artikel di pages, tapi saya hapus, dan sekarang halaman Home kosong, saya ingin balikan ke awal di menu Home dengan tampilan semua post, gimana caranya ? saya sudah coba pasang script untuk menampilkan judul-judl post di home, tapi masih kosong.
Post a Comment
<< Home