padinrose | Tips, Hobi dan Motivasi

padinrose | Tips, Hobi dan Motivasi
Home » , » Ingin Kelihatan Kemas Dengan AutoSlide

Ingin Kelihatan Kemas Dengan AutoSlide

/ October 10, 2010 /
Selamat Datang Ke padinno.com


Inginkan laman anda kelihatan kemas? Ya, inilah jawapannya. Wahh dah macam iklan MLM pula. Takdelah, aku cuma ingin berkongsi cara - cara menjadikan laman anda kelihatan kemas, walaupun widget berderet - deret ke bawah. Gunakan fungsi autoslide di sidebar anda, dan mungkin persembahan laman anda akan lebih kemas.


Apa yang di katakan autoslide? Ehemm nak terang lebih lanjut pun, tak perlu rasanya. Korang boleh tengok sendiri di bahagian sidebar padinno.com ni. Kalau anda rasa smart, sila like, dan kalau biasa aja, sila senyum ye. hehe


Caranya mudah saja. Ikuti langkah berikut. Penting, sebelum melakukan apa - apa perubahan, download full template dulu, sebagai langkah berjaga - jaga andai tutorial ini gagal berfungsi dengan dengan baik, seperti yang di harapkan.


Login > Design > Edit HTML >Expand Widget


Cari code </head> , tambahkan code ini di atasnya.


<style type="text/css">
.texthidden {display:inline}
.shown {display:block}
</style>


<script type="text/javascript">
document.write('<style>.texthidden {display:none} </style>');
</script>


<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="shown") {
whichpost.className="texthidden";
}
else {
whichpost.className="shown";
}
}
</script>


Kemudian, cari code h2 { .... }, tambahkan code baru selepas tanda }


h4 {
background: #ffff00;
color: #666666;
margin-left: -1px;
margin-right: -1px;
margin-top: 0px;
margin-bottom: 1px;
padding-left: 10px;
padding-bottom: 5px;
padding-top: 5px;
border: 2px solid #996666;
font-size: 11px;
}


SAVE template anda!! haha


Ok, sekarang cara - cara nak masukkan di sidebar


ADD A GADGET > HTML > paste je code nih..


<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> <h4>[+/-] Web Blog</h4></a></ul>

<ul class="texthidden" id="keyword">

<li><a href="http://link.com">Link 1</a></li>

</ul>


PERINGATAN : korang boleh tukar sendiri warna background, saiz tulisan, size border dan macam - macam saiz lagi lah, mengikut citarasa masing - masing.


Code di sidebar, perkara terpenting, perkataan "keywords" tu adalah sama. Boleh tukar ikut sukahati juga, contohnya "code 1", "special" dan... pikirlah sendiri.. tulis je apa - apa, yang penting kena sama. Ok, selamat mencuba. Semoga laman kita semakin kemas, tersusun dan tidak terlalu serabut walaupun kita mahu meletakkan banyak widget atau pun bloglist.


Terima Kasih ~ Datang Lagi

0 comments:

Archives

Facebook Pages

 
Lifestyle BlogsReal Time Web Analytics
Copyright © 2009-2017 padinrose - Tips, Hobi dan Motivasi, All rights reserved | Disclaimer | Sitemap