Cara Membuat Tampilan Awal Blog Anda Berbeda

Kali ini kita akan membuat setiap orang yang akan membuka/mengunjungi blog kita, harus melewati sebuah tampilan yang berbeda dari biasanya yang dinamakan tampilan intro dari sebuah blog, ibarat sebuah lagu yang akan dinyanyikan pasti ada intronya bukan...? seperti itulah maksud saya hehehehe. Untuk contohnya anda bisa membuka alamat blog ini di Catatan Pena, itupun dengan catatan jika seandainya saya belum merubahnya ya...! karena saya sering sekali merubah penampilan dari blog Catatan Pena ini...maklumlah bro...saya ini orangnya gampang bosanan...hehehehe...seandainya nanti blog Catatan Pena telah berubah, seperti gambar dibawah inilah maksud saya contoh dari tampilan awal (intro) nya, dan tentu tampilannya pasti akan berbeda dengan punya anda ketika nanti anda sudah membuatnya, karena apa..? karena gayaku bukanlah gayamu...dan gayamu juga bukanlah gayaku..hehehe...


Perhatikan gambar diatas, lihat tulisan kecil bertuliskan "Enter" tulisan itu adalah sebuah tombol yang harus di klik oleh sipengunjung untuk dapat masuk ke blog tersebut, dan setelah di klik barulah blog tersebut akan terbuka.

Bagaimana apakah sudah jelas..? kalau sudah jelas maka kita akan memasuki ke tahap berikutnya yaitu cara pembuatannya.

Langkah-langkahnya adalah sebagai berikut:

1. Login ke blog anda.

2. Di halaman Dashboard klik "Rancangan".

3. Kemudian klik "Edit HTML" dan jangan lupa centang kotak kecil yang bertuliskan "Expand Template Widget".

4. Cari kode  <div id='header-wrapper'>  dan seperti yang ada dibawah inilah kode lengkapnya.

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Catatan Pena (Header)' type='Header'>
<b:includable id='title'>

5. Perhatikan kode diatas,  ada tulisan <b:includable id='title'> dan sekarang silahkan anda copy/paste kode yang ada dibawah ini kemudian letakkan tepat dibawah kode <b:includable id='title'> tersebut.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>body{background-color:#000000;background-image:none;}#intro-blog{font-size:80px;padding-top:220px;text-align:center;color:#ff0000;}#navbar-iframe{display:none;}#layout_wrapper{display:none;}#outer-wrapper{display:none;}#es{padding-top:30px;text-align:center;font-size:14px;font-weight:bold;</style><b:else/><style>#es{display:none;}#intro-blog{display:none;}</style></b:if>

6. Langkah selanjutnya adalah mencari kode <body> kemudian copy/paste kode yang ada dibawah ini dan letakkan tepat dibawah kode <body> tesebut.

<div id='intro-blog'><data:blog.pageTitle/></div><div id='es'><a expr:href='data:blog.homepageUrl + &quot;search/label/?max-results=23&quot;'><blink>Masuk</blink></a></div>

Apabila anda menginginkan tampilan intro blog anda adalah sebuah gambar, maka ganti tulisan yang berwarna Merah pada kode diatas dengan URL gambar anda. Kodenya menjadi seperti yang ada dibawah ini.

<div id='intro-blog'><img alt='davotmarbun' border='0' src='http://Alamat URL Gambar Anda.jpg' style='width: 350px; height: 90px;'/></div><div id='es'><a expr:href='data:blog.homepageUrl + &quot;search/label/?max-results=23&quot;'><blink>Masuk</blink></a></div>

7. Langkah terakhir Save Template blog anda.

Keterangan :

*  Tulisan yang berwarna Hijau adalah warna latar belakang dari intro blog tersebut, silahkan anda rubah
*  Tulisan yang berwarna Biru adalah jumlah postingan yang akan ditampilkan, silahkan anda rubah.
*  Untuk mengganti ukuran lebar dan tinggi dari gambar anda, silahkan rubah nilai width dan height pada kode tersebut.
*  Yang bertuliskan "Masuk" bisa anda ganti dengan tulisan anda sendiri.

Mudah bukan...? silahkan  anda mencobanya.

Semoga informasi ini bermanfaat.
Terima kasih anda telah membaca artikel tentang
Cara Membuat Tampilan Awal Blog Anda Berbeda
Jika Anda menyukai Artikel di blog ini, Silahkan berlangganan gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel baru yang terbit di Catatan Pena

Share this :

Previous
Next Post »
26 Komentar
avatar

Tidak berkerja di blog ane gan

Balas
avatar

koq d save d blog aq tx bz ea....
trjd mslh trz kt nya,,,
knp yea....

Balas
avatar

@Andrye : mungkin hanya kurang kehati2an

Balas
avatar

download game call of duty2 free ful crack
disini bro :)
http://download-gratis-full.blogspot.com/

Balas
avatar

INFO BISNIS SAMPINGAN KERJA DI RUMAH
HANYA MENERIMA JAKARTA SURABAYA BANDUNG BEKASI BOGOR DEPOK TANGGERANG
Di kerjakan di rumah anda sendiri,semua bahan sudah di sediakan
Tugasnya ngelem benang teh clup Rosella 1.box isi 200.benang
Mengelem 1.box upah 70.ribu (berlaku kelipatan)

SMS Alamat anda ke pak BASIR.085692559700

Balas
avatar

thanks infonya keren bgt :)

http://jadikanpinter.blogspot.com/

Balas
avatar

tidak ada kode 'header-wrapper di html saya ya, kadang di setaip tempate kan berbeda-beda

Balas
avatar

Top postingannya dan patut untuk dicoba, Trima kasih sahabat.

Balas
avatar

gan gimana kalau halaman depannya di buat dengan daftar isi posting saja.. di tunggu jawabannya

Balas
avatar

Salam.. mau nanya, apa bisa blog (blogspot) disetting agar tampilan awalnya tetap tiap kali pengunjung masuk pada menu Home/Beranda. Jd bukan berdasarkan urutan postingnya.

Thanks lot..

Balas
avatar

KEYEN....KEYEN...dari semalam...cari2 di gugel, cuman ada yg buat maintance aje...tapi pas pagi nich...he...ketemu...clclclclclc

mampir juga yach...zonependidikan.blogspot.com

Balas
avatar

thanks gan informasinya, mau tanya ne, kalau tombol enter itu kita jadikan tombol like facebook bisa gak ? biar like kan banya gitu

Balas
avatar

tx gan infonya mampir-mampir yah ..

http://trickcomputer95.blogspot.com/

Balas
avatar

artikel ini sangat bermanfaat , mohon ijin untuk dicoba ya gan , trims.

cahayasuksestronik shopping online, Cirebon City, since Januari 2010
http://cahayasukses99.wetpaint.com
http://cahayasukses99.blogspot.com/

Balas
avatar

sangat bermanfaat gan...

http://prasetya-computer.blogspot.com

Balas
avatar

mau nyoba tapi kurang paham kode html, takutnya jadi ancur..

Balas
avatar

Visit my blog animemonzt.blogspot.com tersedia anime
Yg mau request anime/movie bisa komentar disana

Balas
avatar

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Balas
avatar

Artikel bermanfaat kunjugi juga untuk mendafatkan info menarik di dunia1001info.blogspot.co.id

Balas

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔