Cara Membuat Tampilan Home Blog yang Unik

watch_later June 18, 2013
An-Info | Artikel ini adalah Trik untuk mengubah tampilan blog, maksudnya adalah untuk membuat tampilan home blog berbeda dari yang biasanya. Biasanya blog akan menampilkan postingan ketika kita membuka halaman awal atau home blog kita, nah trik ini digunakan untuk menggantinya. Anda bisa membuat slide gambar di home atau kreasi yang lainnya.


Triknya adalah kode logika/html/if. dengan kode ini kita bisa menambahkan sedikit kode sehingga menjadi 
b:if cond=, dalam artinya, jika kondisi...guna'a agar kita dapat menghilangkan elemen yang berat di halaman tertentu yang kita inginkan. Sama halnya jika anda belajar fungsi if di bahasa pemrograman Java atau C++
Cara Membuat Tampilan Home Blog yang Unik

Macam2 kode...
Ada 5 macam yang yang bisa saya temukan di google n_n 

1.
<b:if cond='data:blog.url == data:blog.homepageUrl'> isi widget</b:if>

Kode di atas ini fungsinya agar widget hanya pada homepage atau halaman utama saja.

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


Kode ini fungsi'a supaya widget ada di halaman homepage dan label atau di kategori post.

3.
<b:if cond='data:blog.pageType == &quot;item&quot;'>isi widget </b:if>


Kode ini berfungsi agar widget hanya ada ketika kita membaca posting blog saja. Contoh'a adalah kotak komentar yang terdapat dibawah posting blog kita.

4.
<b:if cond='data:blog.url != data:blog.homepageUrl'> isi widget </b:if>

Kode ini berfungsi agar widget ada di halaman posting. Fungsi ini kebalikan dari kode ke 1.

5.
<b:if cond='data:blog.url == &quot;url postingnya disini&quot;'> isi widget </b:if>

Kode ini berfungsi agar widget ada ketika kita membaca posting tertentu. sobat tinggal ganti kata "url postingnya disini" dengan url posting sobat.

Contoh sederhana untuk menghilangkan Tab Slider di halaman depan/home page

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- begin featured content slideshow -->
<div id='featured'>
<div id='slidearea'>
<div id='gallerycover'>
<div class='mygallery'>
</div>
</div>
</div>
</div>
<!-- end featured content slideshow -->
</b:if>

Untuk Demonya silahkan lihat Blog saya satunya lagiWESHARE™


Untuk Menghilangkan Daftar postingan anda di home page, ikuti langkah-langkah ini

1.Temukan kode yang sama/kira-kira sama dengan kode dibawah ini

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

2. Tepat di atas kode tersebut letakkan kode berikut ini

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

3. Dan tepat di bawah kode "no1" letakkan kode berikut ini

</b:if>

4. Hasilnya kira-kira 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>

Penambahan kode ini akan berpengaruh pada daftar postingan yang akan hilang di halaman utama blog dan di gantikan dengan sebuah tempat untuk menambah widget, anda bisa menambahkan widget gambar untuk menggantinya.

Catatan:
Jika anda menggunakan trik menghilangkan postingan di homepage blog akan berpengaruh pada pesan error yang akan muncul ketika anda menyimpan setingan di Layout blog.

Code for Live | Code for Love

avatar

menarik, terima jasa pembuatan template gak nih boss.

delete October 01, 2013
avatar

thank's gan.
gimana ya, bisa buatin custom template bisa aja sih.
email in aja bro, untuk info lebih lanjut.

delete October 10, 2013
avatar

gan ane masih newbie ni gan..
biar home pagenya kaya blog punya agan yg weshare gmana ya gan??

delete November 02, 2013
avatar

@muhammad adie,
itu pake cara yg diatas gan,
1. hilangin dlu post di home blog (baca cara diatas)
2. hilangin sidebar kiri-kanan blog
3. pasang widget slide (terserah)
4. check it out.

Terimakasih sudah berkunjung

delete November 03, 2013
avatar

keren om http://alexringo.blogspot.com/ nya
bisa berbagi template mentahnya gak.
jadi pengen punya tampilan kayak gitu..
email aja ke isme1989@rocketmail.com kalo ada waktu om..

delete November 04, 2013
avatar

@deni setiawan,
template mentahan yg gmna maksudnya gan?
yg blm diedit kah? -> semua template bisa kyk gitu kok.
tinggal jalanin cara diatas.

Terimakasih sudah berkunjung

delete November 04, 2013
avatar

maksudnya file xml blog itu om hehe..
tadi sudah saya coba, tapi kotak header diatas masih ada. ga hilang full semua..

ini ngirim skrinsut di kotak komentar gimana ya (,--)

delete November 04, 2013
avatar

kalo ngilangin header nya juga pake fungsi yg no.3
pasang kodenya setelah kode "body>" dan cari yg ada kode pembuka header. mis ....

untuk ss ga bisa kyknya gan.
kasih link ss nya aja.

delete November 04, 2013
avatar

revisi,,
misalnya kode pembuka < > didalamnya ada header,

kodenya ilang tadi :D

delete November 04, 2013
avatar

kaskuser ye gan hehe?

gini aja dah, ini url blognya setelah ane edit pake cara diatas, tapi belum disentuh kode 1-5
http://ndyb-baritoputera.blogspot.com/

nah nomor berapa aja yg buat ngilangin semua tampilan mukanya itu biar bisa dikasih label gambar kayak punya agan di blog sebelah itu hehe

delete November 04, 2013
avatar

iye gan, tp masih newbi :D

tunggu ane analisis dlu ya gan (cek pagesource nya)

delete November 04, 2013
avatar

jadi gini gan,
untuk ngilangin menu atas (beranda, dll) pake fungsi no 3 dan diletakkan pada kode "fixed>" yang memuat menu tersebut.

untuk header (banner blog/judul blog) pake fungsi no 3 jg, dan diletakkan pada kode "headerpic-wrapper>" atau "header-wrapper".

untuk yg lainnya tinggal ikutin langkah diatas gan.

btw itu memang off.site nya suporter nya BARITO PUTRA ya gan?

delete November 04, 2013
This comment has been removed by the author.
avatar

bentar gan, ane pelajari dulu, masih nubi soal html :|

iya gan, mau dibikin domain nantinya..

delete November 04, 2013
avatar

sip gan,

semoga sukses blognya jdi off.site yg keren.

delete November 04, 2013
avatar

yg ini kan :


"

trus "fixed>" taroh dimana?

delete November 04, 2013
avatar

ah elah HTMLnya ga muncul di post komentar. gimana yak..
ada YM gak gan (,--)

delete November 04, 2013
avatar

itu dia gan,
kode fixed aku tulis nanggung biar ga kena parse html,

jadi,
misalnya untuk memasang di element "fixed"
maka sebelum kode <"fixed>" masukkan fungsi no.3
dan setelah kode <"fixed>" pasang kode penutup fungsi no.3 yaitu <"/"b:if>"

delete November 04, 2013
avatar

#revisi,
maksudku setelah kode <"/fixed">

delete November 04, 2013
avatar

ada cara yg lebih rinci kayak tutor di "Untuk Menghilangkan Daftar postingan anda di home page, ikuti langkah-langkah ini" gak gan?
ane bingung mindahin kode cara 3 masukin fixed nya kemana gan..

delete November 04, 2013
avatar

mungkin disini agan salah pengertian nih,,

nanti saya post cara membuatnya dengan lebih rinci lagi.

delete November 04, 2013
avatar

haha iya gan, kayaknya ane yg ga ngerti. maklum nubi..
oke gan ditunggu artikel terbaru secepatnya..

kalo boleh sekalian link donlot template nya..

delete November 04, 2013
avatar

gan ane datang lagi.
udah bisa dikit, tinggal tambahan lagi nih gan..
tapi ngutak ngatiknya di blog pribadi http://isme1989.blogspot.com/ hehe

tutor bikin slide show gambar kalo di sentuh mouse bisa gerak kayak di http://alexringo.blogspot.com/ itu ada gak gan?
ato namanya apa, biar dicari di gugel hehe..

delete November 06, 2013
This comment has been removed by the author.
avatar

Gan blog q deskripsi postingannya kok tulisannya aneh knapa ya?...

delete November 10, 2013
avatar

@Deni Setiawan: Mantap dah bro,
untuk slider nya itu bisa di cari di google aja bro,
banyak kok. kan gak harus slider sih dipasang di homenya :D

@Naruto wahib: Blognya mana bro?

delete November 11, 2013
avatar

iye gan. comot tutor dari sana sini..
tapi pake kata clue nyarinya di gugel..
ni gan blog khusus setingan buat ane corat coret tampilan http://amat-okes.blogspot.com/ dah hampir sama kayak blog sebelah ini http://alexringo.blogspot.com/

makasih gan, blog ente banyak menginfirasi ane buat belajar lebih giat :ngakak:

delete November 11, 2013
avatar
FDS

hai hai boleh minta tolong ajarin detailnya untuk tampilan home nya jadi tampilan utama gak?
terima kasih :-)

delete November 14, 2013
avatar

Itu isi widget di sini widget kita ya? cara nemuin widget kita di template htlm-nya gimana?? ane awam soal html. ths.
www.roemandesain.blogspot.com

delete November 14, 2013
avatar

@Deni setiawan : sama-sama gan,
"senang berbagi" :)
makin lancar dah untuk blognya,

@FDS : maksudnya tampilan home jadi tampilan utama gimana mbak? ya home itu memang tampilan utamanya,, :D

@Reyhan : iya mas bro,
kalo mau nemu widgetnya,
go to ->Template->Edit HTML->Jump to widget->pilih widgetnya bro,
terus masukin kode yang di inginkan sebelum dan sesudah widget mas bro,
*baca saksama diatas ya bro langkah-langkah nya,,

Thank's

delete November 14, 2013
avatar

@Farida : Your welcome

delete November 22, 2013
avatar

gan ane masih newbie nih, ajarin dong gan :(
pengen dong blognya kayak yg weshare tadi. ane cuma bisa kayak gini doang : http://wisnu-saputra27.blogspot.com

ajarin dong :(

delete November 22, 2013
avatar

@wisnu saputra : diajarin gimana bro?
itu blog nya udah berhasil dihilangin postnya,,

kalo mau buat slider tinggal cari aja di google bro, :D

Terimakasih

delete November 22, 2013
avatar

oh gitu ya :| oke oke makasih gan ane coba searching dulu hehe

delete November 23, 2013
avatar

@wisnu saputra : sama-sama gan,
smoga makin keren blognya :D

delete November 23, 2013
This comment has been removed by a blog administrator.
This comment has been removed by the author.
avatar

gan bisa minta scrip witget pingguin ama buku lipatnya pliss.. ane msh new bie :) salam kenal gan sukses terus

delete December 12, 2013
avatar

@papa rot: itu yg lingkaran sama kertas lipat banyak di google gan,
kalo ga dapat nanti saya post di website saya yg lagi dibangun,
www.kalkul.us

delete December 12, 2013
avatar

Gan request ya..
Gmn caranya untuk membuat DAFTAR ISI di Homepage blog..
Lalu pada homepagenya tidak ada post..gimana ya??

Terus..
Dimanakah letak "expand template widget" ??

Maaf byk nanya..
Saya harap ini diReply..
Semoga blog ini lebih maju..
THX..

delete December 13, 2013
avatar

@Afiq Ilyasa : Kalo membuat daftar isi di home page blog, bisa kamu pasang dengan widget berisi kode script untuk menampilkan daftar isi blog secara otomatis, berikut caranya,
buka layout->add html->copas kode ini

<***div style="background-color: none; border: 1px solid #000000; height: 270px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;"**>
<**script src="http://**yourjavascript.com/12303810938/vipergoy-daftar-isi-blog.js">
<**script src="http://nama-blog-kamu.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc">

*hapus semua *(bintang)
terus save.

-untuk menghilangkan postingan di home, silahkan ikuti langkah di atas sudah saya tulis lengkap :D

-untuk expand template widget, itu bisa kamu temukan di menu template, disitu kode2 widget bertebaran,
kamu jg bisa jump ke widget yg kamu inginkan dengan klik tab widget.

semoga beruntung

Terimakasih

delete December 13, 2013
avatar

Sangat bermanfaat :)

delete January 01, 2014
This comment has been removed by a blog administrator.
avatar

makasihhh banyakk!!!

http://iqbalnurkholis18.blogspot.com

delete January 15, 2014
avatar

@iqbal :sama-sama bro

delete January 15, 2014
avatar

pengen deh tampilannya blognya kaya punya agan,... ada panduan tersendiri ga Gan,.... atau boleh email HTML Code untuk templat yang agan buat

delete January 16, 2014
avatar

@husni: ini postingannya kan tentang panduannya gan,

untuk html nya pake template html agan aja,

tinggal insert kode2 diatas sesuai kebutuhan agan

delete January 16, 2014
avatar

untuk menghilangkan postingan di home page sudah berhasil,... nah untuk membuat halaman depan seperti contoh blog agan gimana yaa,.. masih bingung nih

delete January 17, 2014
avatar

@husni:
remove apa yang ga diperlukan gan

delete January 17, 2014
avatar

boleh sharing tempat agan ga,... jadi ane tinggal pasang n sesuaikan saja

delete January 17, 2014
avatar

revisi -- template--

delete January 17, 2014
avatar

edit template sendiri aja bro,
soalnya kalo km liat tampilan template saya bakalan jadi aneh,
karena sudah banyak yg hilang,
jadinya d background(layout) nya jg jd tinggal 1

delete January 17, 2014
avatar

info nya bagus
ditunggu kunjungan nya
http://www.duniagame.info/

delete January 21, 2014
avatar

bang.. boleh minta code HTML slide yang di WeShare nggak kalau boleh codenya kirim ke email ane bang cahayar7@gmail.com...

delete January 31, 2014
avatar

Bos,.. untuk mengatasi pesan error yang muncul pas save di tata letak / layout gimana yaa

http://s3.photobucket.com/user/bolos16/media/error_zps50595e84.jpg.html

delete February 06, 2014
avatar

@husni : itu karena hilangnya postingan di layout bro, kan blog ini tujuannya untuk menampilkan posting2 pribadi, nah, ketika dihilangkan maka secara otomatis akan ditampilkan pesan error ketika menyimpan setingan layout(meskipun tidak ada pengaruhnya/tetap tersimpan).

Terimakasih

delete February 06, 2014
avatar

bingung gan, cara supaya hilang semua gimana yah ? masalahnya di template saya gak ada kode

delete February 17, 2014
avatar

@M.Aziz : Kode apanya yang ga ada gan?

delete February 17, 2014
This comment has been removed by the author.
avatar

Yang ana bingung gan cuma 1 hal, pas kita tambah buka layout-> add html-> gadget yang kita kasih ada disemua halaman " home page, comment dan home "

delete February 18, 2014
avatar

caranya supaya gadget yang kita buat hanya pada homepage gimana yah ?

delete February 18, 2014
avatar

@M.Aziz : pake kode yang no 2 gan

delete February 18, 2014
avatar

itu pasangnya di tata letak atau edit html gan ? terus kalau edit html diletakan disebelah kode mana yah ? ' maklum masih belajar dasar '

delete February 19, 2014
avatar

@M.Aziz : di html gan,
cari aja kode widget yang mau di insert gan, ada pilihan widgetnya kok

delete February 19, 2014
avatar

terus kalau widget kya WESHARE™ cssnya apa yah gan ?

delete February 20, 2014
avatar

cari aja di google gan, banyak widget2 gituan

delete February 20, 2014
avatar

keren gan... ijin coba y gan, mampir juga ke http://jatijprmebel.blogspot.com/ sama http://www.jatijeparamebel.com
terima kasih gan

delete February 23, 2014
avatar

sama2 gan,
good luck

delete February 23, 2014
avatar

keren gan,terimakasih infonya... mari berlibur kesini.

delete February 25, 2014
avatar

gan, ane bingung sama tutorial ini. Bisa lebih jelas gak.
Sudah di coba malah erorr html.
Ada solusi gak?

delete February 26, 2014
avatar

@febrian : agan ngedit html nya dimna gan.
saya saranin pake notepad++ gan ngeditnya, biar gampang dan enak liatnya

delete February 26, 2014
avatar

Kalo ada akun facebook tolong link_nya di tulis di sini. Mau ada yang ingin di tanyain... Terima kasih.

delete March 03, 2014
avatar

@febrian iskandar :
ada kok diatas link fb blog ini gan

https://facebook.com/aninf0

delete March 03, 2014
avatar

Kunjungi gan http://zidniklopedia.blogspot.com/

delete March 04, 2014
avatar

ini yang lagi tak pelajari,,, gimana caranya biar home itu tampilannya beda.... tapi masih belajar...
coba aja liat blog saya www.bacawebster.com

delete March 10, 2014
avatar

makasi infonya gan sangat membantu,,,
http://www.liputaninformasi.blogspot.com

delete March 26, 2014
avatar

Gan mau tanya nih, aku dah coba bisa utk hilangin post homepage nya, trs aku mau isi halaman homepage nya gmn ya? tlg replay nya gan

delete April 06, 2014
avatar

@oneshopgames:
kan setelah dihilangkan postnya, ada tempat widget baru kan,
Nah isi ditempat widget itu aja

delete April 06, 2014
avatar

tempat widget baru dimana ya letaknya gan? apa masih masuk di template html ? trus cara masukin gambar dan deskripsi gmn ya? tlg gan newbie nih mohon replay nya.
Thx

delete April 06, 2014
avatar

@oneshopgames:
di layout bro,
gambar/desskripsi apa maksudnya bro?

delete April 06, 2014
avatar

Revisi Oh dah ketemu gan caranya, klu pingin homepage sprti http://alexringo.blogspot.com/ gmn ya ? tlg bisa minta detail nya, saya dah nyari widget slider g nemu juga gan.

delete April 06, 2014
avatar

@oneshopgames:
itu pake widget juga gan,
banyak kok widget gitu,
cari aja di google,
dan ga harus kyk gitu gan,
coba aja kreasi yang baru gan,
biar lebih sip

delete April 06, 2014
avatar

kalo mau ganti tampilan halaman index gimana gan..biar kelihatan kayak website profesional gitu???

cek blog saya

http://ngombet.blogspot.com/

delete August 05, 2014
avatar

ya tinggal ngikutin tutorial diatas bro,
terutama yang buat menghilangkan daftar postingan di blog,

cek contoh hasil nya di blog saya di http://alexringo.blogspot.com

:-bd

delete August 06, 2014
avatar

keren contoh blognya gan...
mantap... blog saya pengen saya buat begitu juga,,,
mohon bimbinganya ya gan....

sangkiyu

delete August 06, 2014
avatar

iya gan,
ikutin aja tutor diatas,

pasti bisa kok :-bd

delete August 06, 2014
avatar

KONTES SEO ITULINK , BERHADIAH TOTAL 264JT - PERIODE SEPTEMBER S/D NOVEMBER 2014

www.indowinpoker.net (05 september- 5 Desember 2014)
http://www.itulink.com/iframer4.php?page=KontesSeoIndoWin

www.poker757.com (01 september-30 november 2014)
http://www.itulink.com/iframer4.php?page=KontesSeoPoker757

www.itupoker.net ( 05 september-05 november 2014)
http://www.itulink.com/iframer4.php?page=KontesSeoituPoker

www.itudomino.net (25 agustus-25 november 2014)
http://www.itulink.com/iframer4.php?page=KontesSeoituDomino

www.itucasino.net (01 september-30 november 2014)
http://www.itulink.com/iframer4.php?page=KontesSeoituCasino

www.itubola.net (01 september-30 november 2014)
http://www.itulink.com/iframer4.php?page=KontesSeoituBola

www.inipoker.net (01 september 2014-30 november 2014)
http://www.itulink.com/iframer4.php?page=KontesSeoiniPoker

www.pokerbuaya.com (15 agustus-15 november 2014)
http://www.itulink.com/iframer4.php?page=KontesSEOPokerBuaya

Salam Cgo757, www.cgo757.co

Untuk informasi lebih lanjut, silahkan klik link diatas / kunjungi web yang bersangkutan, ayo tunjukkan kemampuan anda sekarang juga!! Menang atau kalah tetap ada hadiahnya!!

delete September 04, 2014
avatar

http://berandalpunk.blogspot.com

delete September 25, 2014
avatar

http://berandalpunk.blogspot.comhttp://cdn.kaskus.com/images/smilies/shakehand2.gif

delete September 25, 2014
avatar

jangan spamming dong gan :p

delete September 25, 2014
avatar

mas, cara bikin yang kontak kami gambar pinguin itu bagaimana ya? :)

delete November 30, 2014
avatar

itu saya ambil dari website nya sm*rtfren mas,
itu sebenarnya script + css mas
:-

delete December 01, 2014
avatar

makasih gan :) sangat bermanfaat

delete December 28, 2014
avatar

Terimakasih agan atas informasinya ")
http://bit.ly/1z9fiBQ

delete May 04, 2015
avatar

keren banget gan artikelnya, izin nyimak ya gan :)
http://goo.gl/HDmjSo (y)

delete May 12, 2015
avatar

Hatur nuhun Kang :)

delete July 22, 2015
avatar

masih gagal paham mas. belum ngerti. mau di pasang di kilasbarca gue
:-

delete November 24, 2015
avatar

Thank's ya gan, ane masih blajar2, artikel nya ane simpan dulu deh, ntar kalo ada wktu ngeblog ane cobain... oea, mampir jga ya gan ..
http://duasatuberbagi.blogspot.co.id/
Sukses gan :D

delete March 16, 2016



sentiment_satisfied Emoticon