Showing posts with label Blog Design. Show all posts
Showing posts with label Blog Design. Show all posts

Home » Posts filed under Blog Design

5 Cara membuat 3 kolom di atas footer

Cara membuat 3 kolom di atas footer, mungkin sobat pernah pernah mengunjungi blog yang menggunakan wordpress? saya yakin pasti sobat akan menjawab pernah bahkan sering. Kalau jawabanya seperti itu, tentunya pernah juga memperhatikan layout atau desain dari templatenya. Nah jika saya sendiri sering memperhatikan bahwa template wordpress dibagian footer nya sering kali dibuat menjadi multi kolom, ada yang dua kolom, tiga kolom, dan ada juga yang sampai empat kolom.
membuat 3 kolom di atas footer
Mungkin beberapa dari kalian  akan muncul pikiran atau bahkan pertanyaan "apakah bisa template blogger bagian footer nya dibuat menjadi multi kolom?" Saya tegaskan jawabanya adalah "bisa". mau tau caranya? Oke sob, Cara membuat 3 kolom di atas footer bisa sobat lihat di bawah ini:
  1. Login pada blog sobat
  2. Masuk ke halaman template
  3. Edit HTML lalu Lanjutkan
  4. Expand Template Widget
  5. Cari kode ]]></b:skin> letakkan kode di bawah ini di atas kode tersebut
    #footer-bottom {
    width: 900px;background:#fff;
    position: relative;display:inline;
    clear:both;
    margin:0 auto 0;
    color:#000;
    float: left;
    padding:10px;
    }
    #left-bottom {
    width: 270px;
    float: left;display:inline;
    margin:10px 5px 0 5px;
    padding:5px
    }
    #center-bottom {
    width: 280px;
    float: left;
    margin:10px 5px 0;
    padding:5px
    }
    #right-bottom{
    width: 270px;
    float: left;display:inline;
    margin:10px 5px 0;
    padding:5px
    }
  6. Lalu cari kode <div id='footer'> dan letakkan kode di bawah ini di atas kode tersebut
    <div id='footer-bottom'>
    <b:section class='footer-bottom' id='left-bottom' preferred='yes' showaddelement='yes'>
    </b:section>

    <b:section class='footer-bottom' id='center-bottom' preferred='yes' showaddelement='yes'>
    </b:section>

    <b:section class='footer-bottom' id='right-bottom' preferred='yes' showaddelement='yes'>
    </b:section>
    </div>
  7. Simpan
Keterangan:
  • Kode yang berwarna merah adalah ukuran masing - masing kolom, bisa sobat ganti dengan kemauan sobat sendiri
  • Kode yang berwarna biru adalah warna background nya bisa sobat ganti dengan kemauan sobat sendiri.
Bagaimana, mudah kan sob ? Pembuatan kolom yang seperti di atas, biasanya di gunakan untuk widget recent post (artikel terakhir) atau juga recent comments (komentar terakhir). Untuk membuat widget tersebut di lain waktu kapan - kapan akan saya share. Ok ? Sampai Jumpa ;)
Read More

0 Cara memasang efek power saver pada blog

Cara memasang efek power saver pada blog adalah salah satu cara untuk mempercantik tampilan blog kita. Selain untuk mempercantik tampilan blog, efek ini juga bermanfaat untuk penghematan energy yang diaplikasikan pada blog. Maksudnya bila blog di diamkan selama beberapa detik akan keluar mode power saver. Dan jika mouse di gerakkan ke blog tersebut, efek ini akan hilang lagi. Untuk melihat screenshotnya lihat di bawah ini:
Cara memasang efek power saver pada blog
Cara memasangnya tidak sulit ternyata sobat. Ikuti saja langkah - langkah di bawah ini:
  1. Login pada blog sobat
  2. Template
  3. Edit HTML lalu Lanjutkan
  4. Cari kode </head>
  5. Jika sudah ketemu copy kode di bawah ini dan paste di atas kode </head>
    <script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js?time=20' type='text/javascript'/>
    Keterangan: Tulisan yang berwarna merah adalah waktu untuk mengaktifkan mode power saver. Jadi bisa sobat ganti dengan waktu yang sobat inginkan
  6. Simpan Template
Mudah kan sob, okedeh. Sampai disini dulu untuk Cara memasang efek power saver pada blog. Sampai jumpa ;)
Read More

2 Membuat postingan di homepage tampil hanya judul

Judul postingan kali ini panjang banget ya, hehehe :D. Kali ini kita akan membahas tentang Cara membuat postingan di homepage tampil hanya judul. Maksud post kali ini yaitu bila post di homepage tampil dengan tulisan dan gambar"nya, namun kali ini tampil hanya judul. Cara membuat tampil hanya judul mudah kok sob, ikuti langkah - langkah di bawah ini:

1. Login pada Blogger
2. Masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin> (gunakan ctrl+f) jika sudah ketemu pasang kode di bawah ini di bawah kode ]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>
5. Simpan Template

Nah, jika sobat sudah memasang kode di atas namun masih terdapat elemen postingan seperti: tanggal pengeposan, jumlah komentar dll, gunakan kode di bawah ini:
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link, 
.post-timestamp, .reaction-buttons, 
.star-ratings, .post-backlinks, 
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>
Sampai disini dulu ya, Selamat Mencoba sob...
Read More

11 Cara membuat Menubar pada blog

Hallo sobat, kita ketemu lagi. Kali ini saya akan sharing tutorial tentang Cara membuat Menubar di blog. Sobat tau menubar kan? benar.. Menubar adalah navigasi menu yang dibuat untuk memudahkan pengunjung blog mengunjungi suatu halaman blog. Biasanya menubar ini terletak di bawah header. Cara memasangnya tidak terlalu sulit kok sobat. Ikuti langkah - langkah di bawah ini:

1. Login pada blogger
2. Masuk ke halaman Template 
3. Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin> , jika sudah ketemu pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
margin-top:5px;
float:center;
background:#de360f;
height:35px;
border:1px solid #de360f;
}
#menubar-left{
float:left;
width:900px;
padding-top:1px;
}
#menubar ul{
position:relative;
overflow:hidden;
padding:0;
margin:0;
font-weight:none;
font-size:12px;
}
#menubar li{
cursor:pointer;
float:left;
margin:0 padding:0;
height:32px;
}
#menubar ul li{
float:left;
list-style:none
}
#menubar ul li a{
border-right:1px solid #F0512D;
float:left;
padding: 9px 12px;
text-decoration:none;
color: #ffffff;
font-weight:bold;
font-size:14px;
font-family: Calibri;
}
#menubar ul li a:hover{
background:transparent;
color: #ffa500;
}
#menubar ul li a.current, #menubar ul li a.current:visited, #menubar ul li a.current:hover{
color:#ffa500;
}
5. Setelah Itu Cari kode <div id='header-wrapper'> atau lebih lengkapnya seperti ini:
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blognya Reggy (Header)' type='Header'/>
</b:section>
</div>
6. Pasang kode di bawah ini di bawahkode yang mirip dengan kode Pada no 5

<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a href='http://anjeunn.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://anjeunn.blogspot.com/#' title='Lihat Seluruh Postingan Disini'>Daftar Isi</a></li>
<li><a href='http://anjeunn.blogspot.com/#' title='budayakan bertukar link'>Tukar Link</a></li>
<li><a href='http://anjeunn.blogspot.com/#' title='Kumpulan tool - tool untuk blog'>Blog Tools</a></li>
<li><a href='http://anjeunn.blogspot.com/p/guest-book.html' title='Sapa pengunjung lainnya :D'>Guest Book</a></li>
</ul>
</div>
</div>
7. Simpan Template

Keterangan:
- Kode yang berwarna Biru adalah kode ukuran menubar. Sehingga bisa sobat ganti sesuai keinginan
- Kode yang berwarna Merah HARUS sobat ganti dengan URL yang di inginkan, misal: Url ke suatu postingan / Kategori
- Kode Yang berwarna Ungu adalah Nama dari URL yang di inginkan
- Untuk title='bla..bla..bla' adalah deskripsi dari URL yang di inginkan
- Menubar bisa sobat ganti dengan mengcopy kode <li>hingga..</li> dan pastekan di bawahnya

Semoga dengan artikel ini sobat mengerti untuk memasang Menubar. Selamat Mencoba!!!
Read More

0 Cara menghilangkan Navbar blogger


Pada postingan sebelumnya kita telah membahas tentang Membuat navbar auto hide. Kali ini bahasan kita hampir sama yaitu tentang Menghilangkan Navbar blogger. Selain membuat navbar autohide navbar blogger juga bisa dihilangkan, sobat hanya tinggal menyelipkan kode ke template sobat.

 Tapi, saya tidak bertanggung jawab oke! atas kejadian sesuatu di blog sobat suatu hari. Alias resiko di tanggung masing - masing. Langsung aja deh kita ke tekapee,,,

1. Login pada blogger
2. Masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin> , jika sudah ketemu sisipkan kode di bawah ini, di atasnya
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
5. Simpan Template

Simple kan? semoga artikel ini bermanfaat bagi kita semua. Amin.. Selamat Mencoba ;)
Read More

0 Cara membuat Navbar blogger auto hide

Pada kesempatan ini saya akan sharing tutorial tentang Cara membuat Navbar blogger auto hide. Sobat pasti tau kan Navbar blogger itu seperti apa? yups, navbar blogger adalah menu navigasi yang nangkring di atas Header blog.

Navbar memang tidak mengganggu tampilan layout, tapi kalo Navbarnya bisa auto hide kan akan lebih menarik lagi, Cara membuatnyapun mudah. hanya tinggal memasang sedikit kode css pada template sobat. Langsung deh, ke TeKaPe..

1. Login pada blogger
2. Masuk ke halaman Template
3. Edit Html lalu Lanjutkan
4. Cari kode ]]></b:skin>
5. Sisipkan kode di bawah ini di atasnya
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}
6. Simpan Template

Bagaimana? navbarnya sudah autohide kan? yasudah deh, sampai disini dulu oke, Sampai Jumpa :)
Read More
 
© 2012 Anjeunn All Rights reserved | Design by Reggy Zian | Powered by Blogger