Menarik sekali neeh aku posting yang membahas tentang modifikasi link, Jadi ketagihan mo nulis lagi soalnya ringkas dan padat sekaligus membantu he3 ... Sebetulnya lagi malas bgt posting makanya aku pilih posting yang ringkas2 aja, g tau neeh moodnya gmn ... Kali ini mo bahas bagaimana cara membuat link tidak hanya berubah warna tetapi juga membesar ketika disorot dengan mouse. Mantap kan sob ? selain itu kita juga bisa mengganti mouse pointer kita sehingga bukan lagi bentuk tangan.
Langsung caranya aja :
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML"
3. Cari bagian a:link dan a:hover dan masing-masing ganti dengan kode dibawah ini :
a:link
{
color:#0000ff;
font-size:10px;
cursor:default;
}
a:hover
{
color:#d2691e;
font-size:19px;
font-style:italic;
cursor:wait;
}
4. Simpan Template.
+ warna biru menunjukkan warna link
+ warna merah menunjukkan ukuran
+ warna kuning menunjukkan font miring ketika link disorot
+ warna hijau menunjukkan style mouse pointer+ Kamu bisa modif menjadi hand, crosshair, wait, move, text, help dll sesuai dengan pilihanmu.
Langsung praktekkan aja sob ...
Sumber http://www.seby-antoe.com
Kamis, 01 April 2010
Membuat Link Berubah Warna dan Membesar Ketika di Sorot
Selasa, 30 Maret 2010
Membuat Menu Horizontal pada Blog
Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.
Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :- Login ke account blogger kamu.
- Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
- Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.
Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
/* navbar
================== */
#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
================== */
#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Catatan :
- Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
- Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.
- Untuk kode pewarnaan, kamu bisa melihatnya di kode warna ini.
- Kemudian cari kembali kode seperti di bawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>
... dan seterusnya ...
</b:section>
</div>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>
... dan seterusnya ...
</b:section>
</div>
- Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>
</div><!-- akhir bg_nav -->
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>
<div id='navright'>
<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
</form>
</div>
</div><!-- akhir bg_nav -->
- Jangan lupa disimpan
Minggu, 28 Maret 2010
Membuat pesan selamat datang dan selamat tinggal pada Blog
Langsung aja ya...Dicoba...Semoga bermanfaat !!!
Login ke akun Blogger anda, klik Layout-Edit HTML lalu pada bagian atas cari kode <head> dan masukan script berikut ini dibawahnya.
<script type='text/javascript'>
alert("Selamat datang di blog saya..Jangan lupa komen ya..")
</script>
Ada ucapan selamat datang pasti ada ucapan selamat tinggal, lalu bagaimana menampilkan pesan jika halaman blog ditutup untuk meninggalkan pesan bagi pengunjung, berikut triknya:
Masih dalam mode Edit HTML dan dengan cara yang sama seperti diatas hanya scriptnya yang berbeda, masukan script berikut dibawah kode <head> atau dibawah script pesan pembuka tadi.
<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('Hayoo mau kemana??..Besok mampir lagi yaa.. ');
}
parent.window.onunload=goodbye;
</script>
Silahkan dicek dengan mengklik Pratinjau...Bila sudah berhasil Klik Simpan. Mudahkan sobat Blogger. Salam Blogger Indonesia.
Sumber http://eris-agustian.blogspot.com
Menghilangkan/Merubah Tulisan Posting Lama dan Posting Baru
Pengaturan Tulisan Older Post dan Newer Post
Artikel kali ini memang bukan barang baru lagi,memang sudah banyak blogger-blogger disana yang memposting tentang ’mengganti atau menghilangkan tulisan older post dan newer post’ atau jika dalam blogspot indonesia,tulisan ’posting lama dan posting baru’.Tapi di Pelajaran Blog akan menjabarkannya lebih rinci.
Menghapus Tulisan Posting Lama dan Posting Baru
Bagi anda yang risih atau kurang begitu menyukai tulisan older dan newer post tersebut,anda bisa menghapus/menghilangkannya.Anda bisa ikuti langkah berikut:
Menghilangkan Tulisan Posting Lama/Older Post
Pergi ke Dashboard,lalu pilih Tata Letak kemudian pilih Edit HTML,selanjutnya contreng tulisan Expand Widget Templates,lalu cari kode di bawah ini:
<data:olderPageTitle/>
Agar lebih mudah mencarinya,tekan Ctrl+F pada keyboard anda,lalu ketikkan kode tersebut.Jika sudah ketemu,hapus kode tersebut,lalu Simpan Template.
Menghilangkan Tulisan Posting Baru/Newer Post
Pergi ke Dashboard,lalu pilih Tata Letak kemudian pilih Edit HTML,selanjutnya contreng tulisan Expand Widget Templates,lalu cari kode di bawah ini:
<data:newerPageTitle/>
Jika sudah ketemu,hapus kode tersebut,lalu Simpan Template.
Mengganti Tulisan Posting Lama Posting Baru
Jika anda hanya ingin merubahnya saja,misal tulisan Posting Lama/Older Post diganti menjadi tulisan Artikel terdahulu,artikel sebelumnya,dll,anda bisa ikuti langkah berikut:
Mengganti Tulisan Posting Baru/Newer Post
Pergi ke Dashboard,lalu pilih Tata Letak kemudian pilih Edit HTML,selanjutnya contreng tulisan Expand Widget Templates,lalu cari kode di bawah ini:
<data:newerPageTitle/>
Jika sudah ketemu,hapus kode tersebut,lalu ganti tulisan sesuai keinginan anda,lalu Simpan Template.
Mengganti Tulisan Posting Lama/Older Post
Pergi ke Dashboard,lalu pilih Tata Letak kemudian pilih Edit HTML,selanjutnya contreng tulisan Expand Widget Templates,lalu cari kode di bawah ini:
<data:olderPageTitle/>
Jika sudah ketemu,hapus kode tersebut,lalu ganti tulisan sesuai keinginan anda,lalu Simpan Template.
Mengganti Tulisan Posting Lama Posting Baru/Older Post,Newer Post dengan Image/Gambar
Jika anda tidak ingin menghapusnya ataupun mengganti tulisanya,anda bisa menggantinya dengan sebuah gambar.
Hasilnya seperti gambar di bawah ini:
Jika anda berminat,ikuti langkah berikut:
Sebelumnya,siapkan url gambar yang akan di tampilkan,disini saya ambil contoh dari Pelajaran Blog sendiri.
Misal:untuk Older Post/Posting Lama saya akan menggunakan gambar seperti di bawah ini:
Dimana url alamat gambar tersebut adalah:
http://3.bp.blogspot.com/_n7xseT2-HDU/SaPTr4ueIZI/AAAAAAAAALs/lUpIGO5TQpg/s200/next.pngUntuk Newer Post/Posting Baru saya akan menggunakan gambar seperti di bawah ini:
Dimana url alamat gambar tersebut adalah:
http://1.bp.blogspot.com/_n7xseT2-HDU/SaPTxYnm-QI/AAAAAAAAAL0/2jPoRDndZSk/s200/prev.png.Nah selanjutnya ikuti langkah berikut:
Mengganti Tulisan Posting Lama/Older Post dengan Image/Gambar
Pergi ke Dashboard,lalu pilih Tata Letak kemudian pilih Edit HTML,selanjutnya contreng tulisan Expand Widget Templates,lalu cari kode di bawah ini:
Jika sudah ketemu,hapus kode tersebut,lalu ganti kode tersebut dengan kode dibawah ini:
Lalu Simpan Template.
Mengganti Tulisan Posting Baru/Newer Post dengan Image/Gambar
Pergi ke Dashboard,lalu pilih Tata Letak kemudian pilih Edit HTML,selanjutnya contreng tulisan Expand Widget Templates,lalu cari kode di bawah ini:
<data:newerPageTitle/>
Jika sudah ketemu,hapus kode tersebut,lalu ganti kode tersebut dengan kode dibawah ini:
Lalu Simpan Template.
Pengaturan pada Home/Halaman Muka
Jika anda ingin mengganti atau merubah tulisan Home/Halaman Muka,ikuti langkah berikut:
Pergi ke Dashboard,lalu pilih Tata Letak kemudian pilih Edit HTML,selanjutnya contreng tulisan Expand Widget Templates,lalu cari kode di bawah ini:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
Perhatikan kode <data:homeMsg/>yang bercetak tebal,ada 2 <data:homeMsg/> kode yang sama,tapi anda hapus kode <data:homeMsg/> yang berada dibagian atas,selanjutnya ganti sesuai dengan keinginan dan hapus jika anda ingin menghilangkannya.
Misal;saya akan menggantinya bukan dengan mengganti tulisan melainkan dengan gambar sbb:
Dimana URL gambar diatas adalah:
http://3.bp.blogspot.com/_n7xseT2-HDU/SaPU_Bl5X7I/AAAAAAAAAL8/aRDZo_QBlDs/s200/home.gifsebagaimana yang saya pakai pada blog ini.
Selanjutnya saya akan merubah kode diatas sehingga akan menjadi seperi ini:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://3.bp.blogspot.com/_n7xseT2-HDU/SaPU_Bl5X7I/AAAAAAAAAL8/aRDZo_QBlDs/s200/home.gif" alt="home"/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
Lalu Simpan Template,Selesai.
Sumber http://pelajaran-blog.blogspot.com
Langganan:
Postingan (Atom)