Kamis, 03 Desember 2009

Widget Top Artikel

Sempat pusing juga kemarin nyari widget top artikel yang seperti aku maksud.
Berkali-kali pasang... copot....pasang... copot, widget top artikel begitu di lihat eeee ???...malah jadinya artikel terbaru.
Coba lagi di tutorial laen , ech .... koq jadinya gini sie !!!
Maksudnya aku pengen top artikel yang lengkap dengan jumlah komentar



Akhirnya nemu juga widget yang di maksud.

Letakkan saja sript di bawah ini pada + html/java sript





<div style="overflow:auto; padding:0px; width:515px; height:180px; background-color: rgb(204, 204, 153); border:0px solid #ccc;"><script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a7d3195528df5e96181a3d2712266226&url=http%3A%2F%2Fkoleksi-osi.blogspot.com&num=10" type="text/javascript"></script>
<a href="http://www.koleksi-osi.blogspot.com" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a></div>



Selanjutnya sobat bisa atur sendiri tinggi dan lebar serta warna yang di inginkan.

Oke...
Lanjut lagi lain waktu dengan artikel widget lainnya.
Selamat mencoba



READ MORE - Widget Top Artikel

Senin, 30 November 2009

Ungkapkan Dengan Rasa ...


Cinta sejati berawal dari sikap yang tulus
Keikhlasan
Kejujuran
Serta tanggung jawab
Menjadikan penyerta yang sempurna

Ingatlah dan cobalah, perlakukan cinta dengan istimewa
Maka akan terasa berhargalah setiap upaya yang kita kerjakan demi cinta

Misi dari cinta ialah kebahagiaan
Seperti timbal balik antara memberi dan menerima.
Seolah berbeda namun hampir sama.

Sejauh mana kita bisa menerima cinta ???
Sebanyak apa kita mampu memberi cinta ???
Lihat, dengar dan rasakanlah...
Setiap keluhan, kegelisahan dan keinginan dari cinta

Cinta datang membutuhkan ketulusan hati...
Membutuhkan extra kesabaran, maka hadapilah cinta dengan rasa.


Semoga cinta bisa kau raih, karena kau harus mampu...
Tidak ada kata menyerah dalam cinta...
Ungkapkan cinta dengan rasa bukan dengan nafsu, dan berusahalah tanpa lelah.
Maka tersenyumlah untuk cinta...

Buatlah semua menjadi mudah tanpa harus membuat semua menjadi sulit.




READ MORE - Ungkapkan Dengan Rasa ...

Rabu, 25 November 2009

Ganti warna tab menu navigasi persi lama ala Diary Osi...
Bukan hal yang susah lho untuk di praktekkin, asalkan sobat sudah memakai versi tab menu navigasi (versi 1) yang ada di Diary Osi

Contoh Tab Menu Navigasi Versi 1 :



Sekarang Diary Osi sudah ada beberapa koleksi warna yang bisa di terapkan di blog sobat, sesuai dengan keinginan sobat.
Pada artikel tab menu navigasi versi 1, Diary Osi hanya menyisipkan warna orange.Sebenarnya gak semua orang suka dengan warna oranye...termasuk saya sendiri.


Perhatikan 2 contoh gambar di bawah ini :





Pada gambar diatas tampak warna tab menu navigasi yang berbeda.
Gimana berminat ingin mencoba warna baru tab menu navigasi versi 1 yang sudah ada...

Yuk simak caranya :

1. Log in dahulu ke account blogspot sobat.

2. KLik "Page Element" & Klik "Edit HTML"

3. Centangkan "Expand Widget Templates"

4. Copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>

!!! NB: Backup dulu template sobat untuk mencegah hal-hal yang tak diinginkan nantinya...!!!

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-background-1-abu.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
padding:0 0 0 16px; /*Jangan Dirubah kode Jarak ini*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 20px 0 8px;
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kiridiaryosicopy.gif) no-repeat;
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kanan-abu.gif) no-repeat right top;
}



5. Lalu copy code di bawah ini dan letakkan tepat di atas kode <div id='content-wrapper'>



<ul class='glossymenu'>
<li class='current'><a href='URL-Blog-Kamu'><b>Home</b></a></li>


<li><a href='URL-Link-Tujuan1'><b>Judul-Tujuan1</b></a></li>
<li><a href='URL-Link-Tujuan2'><b>Judul-Tujuan2</b></a></li>
<li><a href='URL-Link-Tujuan3'><b>Judul-Tujuan3</b></a></li>
<li><a href='URL-Link-Tujuan4'><b>Judul-Tujuan4</b></a></li>
<li><a href='URL-Link-Tujuan5'><b>Judul-Tujuan5</b></a></li>
<li><a href='URL-Link-Tujuan6'><b>Judul-Tujuan6</b></a></li>
<li><a href='URL-Link-Tujuan7'><b>Judul-Tujuan7</b></a></li>

</ul>



Perlu di ganti !!!

Pada teks yang berwarna merah sobat isi url tujuan yang di inginkan.
Pada teks yang berwarna biru sobat isi dengan judul sesuai dari tujuan dari link tersebut.

Contoh :<li><a href='
http://id-id.facebook.com/people/Osi-Rosita/1359902088'><b>My Facebook </b></a></li>
Dan seterusnya.....




Bagi yang sudah menggunakan tab menu navigasi yang di bahas
di atas sobat hanya perlu mengganti " background: url " agar warna tab menu navigasi yang dinginkan sesuai dengan keinginan sobat.



Berikut ini adalah beberapa warna yang bisa sobat terapkan pada tab menu navigasi sobat.

Menu-kanan-abu

"background: url"

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-background-1-abu.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kiridiaryosicopy.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kanan-abu.gif


Menu-kanan-ungu

"background: url"

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-background-1ungu.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kiri-ungu.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kanan-ungu.gif



Menu-kanan-merah

"background: url"

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-background-1merah.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kiri-merah.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kanan-merah.gif


Menu-kanan-hijau

"background: url"

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-background-1hijau.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kiri-hijau.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kanan-hijau.gif


Menu-kanan-biru

"background: url"

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-background-1biru.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kiri-biru.gif

- http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Menu-kanan-biru.gif


Oke...selamat mencoba



READ MORE - Cara Ganti Warna Tab Menu Navigasi Versi (1)

Selasa, 24 November 2009

Masih ingat tentang menu navigasi/navbar di bawah header pada ulasan aku sebelumnya Cara Buat Menu Navigasi #1

Contoh :






Ternyata gak semua blog cocok menggunakan Menu Navigasi Di Bawah Header Blog versi sebelumnya

Karena :
  1. Ukuran Yang sudah paten/tidak dapat di ubah ukuran lebar menu navigasi tersebut.
  2. Warna yang tidak bisa di ganti sesuai keinginan


Contoh salah 1 blog yang telah menggunakan Menu Navigasi Di Bawah Header Blog versi sebelumnya





Pada tab menu contoh gambar di atas telah jelas terlihat bahwa tab menu tersebut nampak terlalu panjang.

Jadi sebelum sobat berniat menggunakan tab menu navigasi, ada baiknya para sobat memikirkan, kira-kira tab menu navigasi yang cocok dengan lebar header.


Karena kejadian di atas, maka kali ini aku akan bahas tentang menu tab navigasi dalam versi lain, namun tetap dalam tampilan yang oke...

Contoh tab menu navigasi versi baru :



Simak caranya yuk....

1. Log in dahulu ke account blogspot sobat.

2. KLik "Page Element" & Klik "Edit HTML"

3. Centangkan "Expand Widget Templates"

Simpan dulu template sobat dengan cara mengklik link Download template lengkap.Untuk Berjaga-jaga apabila terjadi kesalahan dalam pemasangan script !!!

4. Copy kode dibawah ini dan letakkan tepat diatas kode
#outer-wrapper {



#NavbarMenu {
background:#000000 ;
width: 680px; /*samakan kode ini dgn lebar outer wrapper anda*/
height: 35px;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
color: #fff;
font-weight: bold;
margin: 0px;
padding: 0px;
}
#NavbarMenuleft {
width: 400px; /*Lebar menu sebelah kiri*/
float: left;
margin-top: 3px;
padding: 0;
}
#NavbarMenuright {
background:#ff7604 url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-merah.png);
width: 260px; /*lebar menu search sebelah kanan*/
font-size: 11px;
float: right;
margin: 0px;
padding-left: 3px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
border:2px solid #ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
background: #ff7604 url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-merah.png);
color: #ffffff;
display: block;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: bold;
text-transform: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border: 2px solid #ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li a:hover, #nav li a:active {
background: #ff7604 url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-hitam.png);
color: #ffffff;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ff7604 url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-merah.png);
width: 150px;
color: #ffffff;
font-size: 14px;
font-family: trebuchet ms, Times New Roman;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #ff7604 url(http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-hitam.png);
color: #ffffff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #ffffff !important;
width: 210px; /*Lebar kolom search*/
color: #202020;
font-size: 12px;
font-family: Trebuchet MS;
font-weight: normal;
margin: 0;
padding: 4px 0 3px 5px;
border: 2px solid #c0c0c0;
display: inline;
-moz-border-radius-topleft: 21px;
-moz-border-radius-topright: 21px;
-moz-border-radius-bottomleft: 21px;
-moz-border-radius-bottomright: 21px;
}
#searchbutton {
cursor: pointer;
background: #ffffff;
color: #FF8000;
font-size: 11px;
font-family: Trebuchet MS;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
font-weight: bold;
border: 2px solid #c0c0c0;
-moz-border-radius-topleft: 18px;
-moz-border-radius-topright: 18px;
-moz-border-radius-bottomleft: 18px;
-moz-border-radius-bottomright: 18px;
}


5. Lalu copy code di bawah ini dan letakkan tepat di atas kode <div id='content-wrapper'>




6. Selesai deh.. sekarang anda tinggal mengganti text ‘# dengan ‘Alamat link yang anda ingin pasang’.

7. Selanjutnya,ganti text berwarna ungu dengan judul dari link anda tersebut.


Contoh:

<li><a href='http://id-id.facebook.com/people/Osi-Rosita/1359902088'>My Facebook</a></li>



Dan seterusnya.....

6. Simpan Lalu lihat hasilnya

7. Selesai



Sobat dapat mengganti text “http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-merah.png” dengan beberapa alternatif warna dari Diary Osi.

Photobucket Warna orange : http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-orange-ok.png

Photobucket Warna ungu : http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-ungu.png

Photobucket Warna putih : http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-putih.png

Photobucket Warna pink : http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-pink.png

Photobucket Warna coklat : http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-coklat.png

navbar-biru Warna biru : http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-biru.png

navbar-hijau Warna hijau : http://i557.photobucket.com/albums/ss14/KOKON9LOVE/Navbar-hijau.png

navbar-hitam
Warna Abu-abu : http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-hitam.png

navbar-merah Warna merah : http://i557.photobucket.com/albums/ss14/KOKON9LOVE/navbar-merah.png



Met mencoba.....

Oh ...ya....
Bagi para sobat yang telah terlanjur menggunakan tab menu navigasi versi sebelumnya, dan sobat ingin menggunakan tab menu versi yang di bahas barusan, hendaknya sobat hapus terlebih dahulu kode Cara Buat Menu Navigasi Di Bawah Header Blog yang ada pada html template sobat, dan setelah itu met baraktifitas dengan menu tab navigasi versi 2




READ MORE - Cara Buat Menu Navigasi Blog Versi Baru

Jumat, 20 November 2009

Menu navigasi ???...
Mungkin ada yang gak paham akan hal ini.
Coba tengok di bawah header Diary Osi yang warnanya orange n putih keabuan.
Dimana kegunaan dari navbar ( Navigation Bar )/ menu navigasi ini adalah untuk membantu pengunjung melakukan akses jalan pintas langsung menuju ke sebuah kategori dalam blog kita.
Yang secara gak langsung juga dapat menghemat berat loading blog kita serta tampilan blog kita yang lebih apik.

Yuk simak caranya :

1. Log in dahulu ke account blogspot sobat.

2. KLik "Page Element" & Klik "Edit HTML"

3. Centangkan "Expand Widget Templates"

4. Copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>


!!! NB: Backup dulu template sobat untuk mencegah hal-hal yang tak diinginkan nantinya...!!!




.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-background-1.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
padding:0 0 0 16px; /*Jangan Dirubah kode Jarak ini*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 20px 0 8px;
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kiri.gif) no-repeat;
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kanan.gif) no-repeat right top;
}





5. Lalu copy code di bawah ini dan letakkan tepat di atas kode <div id='content-wrapper'>




<ul class='glossymenu'>
<li class='current'><a href='URL-Blog-Kamu'><b>Home</b></a></li>

<li><a href='URL-Link-Tujuan1'><b>Judul-Tujuan1</b></a></li>
<li><a href='URL-Link-Tujuan2'><b>Judul-Tujuan2</b></a></li>
<li><a href='URL-Link-Tujuan3'><b>Judul-Tujuan3</b></a></li>
<li><a href='URL-Link-Tujuan4'><b>Judul-Tujuan4</b></a></li>
<li><a href='URL-Link-Tujuan5'><b>Judul-Tujuan5</b></a></li>
<li><a href='URL-Link-Tujuan6'><b>Judul-Tujuan6</b></a></li>
<li><a href='URL-Link-Tujuan7'><b>Judul-Tujuan7</b></a></li>

</ul>




Perlu di ganti !!!
Pada teks yang berwarna merah sobat isi url tujuan yang di inginkan.
Pada teks yang berwarna biru sobat isi dengan judul sesuai dari tujuan dari link tersebut.

Contoh :
<li><a href='http://id-id.facebook.com/people/Osi-Rosita/1359902088'><b>My Facebook</b></a></li>

Dan seterusnya.....

6. Simpan Lalu lihat hasilnya

7. Selesai



Met mencoba.....


READ MORE - Cara Membuat Menu Navigasi Di Bawah Header Blog

Top Artikel

Popular Posts Widget

Daftar Isi Diary Osi

Widget By: [Diary-Osi]