DownloadSelamat 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>
.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;
}
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>
<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