halo sobat blogger semua??????????????????? di kesempatan kali ini saya mau share beberapa script penting untuk blog sobat, langsung aja ya???????
1. Memberi Sorotan Warna Pada Kotak Posting
Ini adalah fungsi sederhana yang menurut saya juga menarik. Bila sobat masuk pertama kali di halaman utama Blog ini, maka ketika cursor di arahkan ke kotak bagian-bagian posting, maka kotak posting itu akan berubah warnanya. Sobat cukup masukkan kode berikut di antara tag ... atau bisa juga tepat di atas tag . Perlu diingat bahwa fungsi ini akan jalan bila sobat sudah menaruh script READ MORE pada point nomor 2 sebelumnya.
Sobat bisa bereksperimen dengan warna-warna lain di text berwarna Hijau dan Merah di atas.
2. Membuat kotak pencarian dengan tampilan Google Search
Ini merupakan fungsi baru yang bisa memperindah tampilan kotak search blog sobat. Tampilan search google search kita pindahkan ke blogger kita. Untuk menambahkan fungsi ini, ada 2 tahapan yang harus sobat lakukan. Pertama menaruh script untuk tampilan yaitu css. Lalu kedua menaruh script di widget elemen.
Script CSS:
/* div container containing the form */
#searchContainer {
margin:20px;
}
/* Style the search input field. */
#field {
float:left;
width:165px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:40px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYntuncfSYaza2NGye4rm4NyP6LzmQ9dcErvOTRpBgfeID0-fh_9DT-f9k7hm9gmkyLbwhVyUTK__WpJ0rHUexoK6KXsNacgIDD5kJ7V5TOjmIXaHRGayuAxD_MTPFLQI0qPbcg-HcKyv1/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYntuncfSYaza2NGye4rm4NyP6LzmQ9dcErvOTRpBgfeID0-fh_9DT-f9k7hm9gmkyLbwhVyUTK__WpJ0rHUexoK6KXsNacgIDD5kJ7V5TOjmIXaHRGayuAxD_MTPFLQI0qPbcg-HcKyv1/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
Script pada Widget Elemen:
3. Membuat Breadcrumbs (navigasi posisi kita dalam suatu blog)
Fungsi ini menurut saya penting untuk menunjukkan posisi kita dalam suatu blog. Dengan adanya fungsi ini, kita dapat dengan mudah melompat dari satu categori artikel ke kategori di atasnya. Script yang saya cantumkan mungkin sedikit berbeda dengan script yang sobat dapatkan di internet. Saya sudah merubah sedemikian sehingga tidak memberatkan blog sobat. :D
Script CSS:
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
Script Javascript: Pertama sobat cari kata kunci "
" di HTML. Lalu pastekan kode ini tepat di atas kode tadi.
4. Membuat Daftar isi blog
Bila sobat melihat bagian atas dari artikel ini, maka sobat akan menemukan kotak daftar isi blog. Fungsi ini dapat di tambahkan hanya dengan menaruk script ini ditempat yang sobat ingingkan
Script Javascript:
DAFTAR ISI BLOG
0 balasan artikel:
Posting Komentar
selalu gunakanlah bahasa yang baik dan benar untuk berkomentar di blog ini. komentar yang mengandung material melanggar hukum dan agama akan admin hapus.