|
|
Apalagi tuh maksudnya? Kalian pernah kan masuk ke situs web besar? Maksudnya situs wb yang canggih? Di beberapa situs web yang besar, pada bagian navigasinya ada sesuatu yang unik, misalnya jika memasuki halaman tertentu pada situs web tersebut, maka pada bagian navigasi akan ter-highlight. Masih belum mengerti? Coba masuk ke http://www.forumblogger.co.cc. Di sana, link "Home" akan terlihat berbeda dengan yang lainnya. Lihat screenshootnya:
]]></b:skin>, lalu masukkan kode berikut diatasnya./* Navigasi menu with highlight */4. Lalu cari kode berikut.
#navmenu {
height:auto;
margin:0;
width:auto; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwExPbQ07nCzFngzCpBLMy4ibghudGifn2xUUaU53vat6NurCpMeFgqEkEdi4GbEqFm3S0mBNMqq2gtMOsDWZx1tJMiDf-__OJuSMHAbsI1sa4kWQ8RegZuIVFsNU05OdreM_1U9PVMjc/s320/Navbgblue.jpg); /*gambar pada link biasa*/
float:left;
display:block;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000;
font-family: Verdana;
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px;
}
#navmenu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbGPYiXlPVAjMQRoje_W2ah5mJ8nkHjLquh7iDpZpfHN61yPBOtP91fgWcJig6IckM_X73r7YAbqzOI_hidVH3xkHhns0VglfXNiLZ01emu6PFgwiMiy9M2r0id2m3KZqoaNGO_rh-SI/s320/Navbgbluehover.jpg);/*gambar pada link biasa pada saat mouse hover*/
color:#000000;
}
#navmenu li.selected a, #navmenu li.selected a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQID9i9lY7yT7id5CcYV0qJqD6iU02zh_mAvjdCXsrwpIo5gUtokSZzODUYFTUn8pacQHOfPfzVN8QVV0Ml5KQIKuGZqEkj7C9By8SIhvRs4qR_lGHnuH5HD70Pix5EvRu7Kim7G2VDcs/s320/Navbgyellowhover.jpg)/*gambar pada link highlight*/
}
<div id='header-wrapper'>5. Masukkan kode berikut dibawahnya.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Forum Para Blogger (Header)' type='Header'/>
</b:section>
</div>
<div id='navmenu'>Ket: link-nya disesuaikan yah...
<ul id='navmenu'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<li class='selected'><a href='http://www.forumparablogger.co.cc'>Home</a></li>
<b:else/>
<li><a href='http://www.forumparablogger.co.cc'>Home</a></li>
</b:if>
<b:if cond='data:blog.url == "http://www.forumparablogger.co.cc/p/forum-blogger.html"'>
<li class='selected'><a href='http://www.forumparablogger.co.cc/p/forum-blogger.html'>Forum</a></li>
<b:else/>
<li><a href='http://www.forumparablogger.co.cc/p/forum-blogger.html'>Forum</a></li>
</b:if>
<b:if cond='data:blog.url == "http://www.forumparablogger.co.cc/p/info-forumparablogger.html"'>
<li class='selected'><a href='http://www.forumparablogger.co.cc/p/info-forumparablogger.html'>Info</a></li>
<b:else/>
<li><a href='http://www.forumparablogger.co.cc/p/info-forumparablogger.html'>Info</a></li>
</b:if>
<b:if cond='data:blog.url == "http://www.forumparablogger.co.cc/p/about-admin-forumparablogger.html"'>
<li class='selected'><a href='http://www.forumparablogger.co.cc/p/about-admin-forumparablogger.html'>About Admin</a></li>
<b:else/>
<li><a href='http://www.forumparablogger.co.cc/p/about-admin-forumparablogger.html'>About Admin</a></li>
</b:if>
<b:if cond='data:blog.url == "http://www.forumparablogger.co.cc/p/kontak-admin-forumparablogger.html"'>
<li class='selected'><a href='http://www.forumparablogger.co.cc/p/kontak-admin-forumparablogger.html'>Kontak Admin</a></li>
<b:else/>
<li><a href='http://www.forumparablogger.co.cc/p/kontak-admin-forumparablogger.html'>Kontak Admin</a></li>
</b:if>
</ul>
</div>
<head><b:if cond='data:blog.url == "POSTINGANYANGDIREDIRECT"'Ket: POSTINGANYANGDIREDIRECT adalah postingan yang akan diredirect ke situs lain. Sedangkan SITUSTUJUANREDIRECT adalah situs tujuan redirect postingan yang akan diredirect.
<meta http-equiv="refresh" content="0;URL=SITUSTUJUANREDIRECT"/>
</b:if>
a2 - b2 = (a + b) x (a - b)Contoh 1: kita pakai bilangan 1 digit dulu, biar lebih gampang.
Blogger kabarnya melakukan blunder besar-besaran! Ketika kemarin (atau kapan lupa tetapi di akhir minggu kemarin kayaknya) saya login ke Blogger link yang dulunya bertuliskan Tata Letak berubah menjadi Rancangan. Lihat gambar dibawah!
agar pada selanjutnya Blogger bisa lebih baik lagi. (Sumber: http://www.masdoyok.co.cc/2010/06/tata-letak-hilang-ada-dimana-layout-tab.html).
]]></b:skin> lalu ketikkan kode berikut diatasnya./* caption */4. Klik Simpan Template.
.caption-left{
clear:left;
float:left;
margin:10px 10px 10px 0;
}
.caption-center{
clear:both;
text-align:center;
margin:10px 0;
}
.caption-right{
clear:right;
float:right;
margin:10px 0 10px 10px;
}
.caption-left, .caption-center, .caption-right{
background-color:#0B3861;
padding:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
-webkit-border-radius-bottomleft:10px;
-webkit-border-radius-bottomright:10px;
width:auto;
height:auto;
}
.caption-left img, .caption-center img, .caption-right img{
margin-bottom:10px;
}
.caption-left span, .caption-center span, .caption-right span{
font-size:smaller;
display:block;
color:#fff;
text-align:center;
}
<div class="caption-left">Ket: yang berwarna biru adalah jenis dari perataan gambar. Apabila ingin dikiri ketikkan caption-left, untuk ditengah caption-center, sedangkan untuk disebelah kanan kodenya adalah caption-right. Kode yang berwarna kuning adalah link pada gambar, sehingga jika diklik maka akan terbuka website yang telah ditentukan. Ynag berwarna merah adalah URL dari gambar. Dan yang berwarna hijau adalah keterangan dari gambar tersebut. Kode diatas hasilnya seperti ini nih...
<a href="http://muhammadrizkifadillah.blogspot.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLSrCDrz9fEONYtg6YtENEWvXfBODSDSxly7avN6aISAIQJkDH39wE4DkdWwCr2rNYQCtes1jZi93nDk-HRN2CXXrAxCYTtKMf_DvGganwnu5Ju9U-VhR53sAoxrJkPngkC5W9oZppnTp/s320/pacman+google.JPG" /></a>
<span>Asyiknya main Pacman di Google!!!</span>
</div>
]]></b:skin>, lalu ketikkan kode berikut diatasnya.body{Ket: URLGAMBARCURSOR adalah URL dari gambar cursor.
cursor:url(URLGAMBARCURSOR),default;
}
<style type="text/css">Perhatikan, selector #inputtext adalah selector dari bagian input teks. Sedangkan #submitbox adalah selector dari bagian tombol submit. URLGAMBARTOMBOLSUBMIT adalah URL dari gambar yang dijadikan tombol submit. Nih, contoh untuk yang ada di http://tipntrikblogging.blogspot.com:
#inputtext{
/* Properti CSS dari kolom teks */
}
#submitbox{
/* Properti CSS dari tombol submit */
}
</style>
<form action="http://tipntrikblogging.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text" id="inputtext" /> <input value="cari" class="buttonsubmit" name="submit" type="image" src="URLGAMBARTOMBOLSUBMIT" id="submitbox" /></form>
<style type="text/css">Apabila anda mahir CSS, anda bisa berkreasi lebih lanjut untuk menciptakan variasi lainnya.
#inputtext{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-color:green;
float:left;
margin:5px 0px;
padding:4px 5px;
height:20px;
font-family:Arial, Tahoma, Verdana;
font-size:12px;
}
#submitbox{
display:inline;
margin:5px;
}
#submitbox:hover{
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
}
</style>
<form action="http://tipntrikblogging.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text" id="inputtext" /> <input value="cari" class="buttonsubmit" name="submit" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjah99kSYpM8PpJmsvASRcf3ZDX2MvP7DsrUwsoziOKDFR_b5_rKavLfVwxhStvywZuGRnfESZJBwVEKNDFI7Vc64n8Cm7TIkWXLZdUDrw-TjWjv03dL1kFo45jhYoxsAHFfXQlhWOPQ0/s320/1267576773_search_button_green.png" id="submitbox" /></form>
Kadangkala kita harus mengetikkan sebuah teks atau script yang panjang dan harus berada disetiap teks, seperti read more, misalnya. Tetapi kita malas mengetikannya? Ada cara mudah untuk melakukannya, yaitu dengan membuatnya otomatis ada pada setiap kita membuka teks editor. Ini juga bisa jadi alternatif untuk menambahkan signature pada postingan anda.
Caranya mudah saja:
1. Login ke Blogger, lalu klik Pengaturan > Format.
Subscribe in a reader
