Search This Blog

Monday 21 March 2011

Tutorial (8) : Cara disable text highlight


Dalam artikel sebelum ini saya telah masukkan cara disable right click,yang kita digunakan bagi mengelak imej disalin.tetapi itu sahaja tidak cukup kerana teks pada artikel kita perlu juga dilindungi.Jadi kali ini pula saya akan tunjukan  cara bagi menghalang teks artikel kita dihighlight dan disalin.

caranya membuatnya:

Masuk ke design--Page elements
Add a gadget dan pilih HTML/Javascript

dan masukkan kod dibawah ini:
  <script type="text/javascript">
//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>

ataupun boleh juga cara ini:
Masuk kedesign-Edit Html
dan cari kod dibawah:
.post {
padding:10px;
font-size:70%;
margin: 0 0 25px 0;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
tambahkan kod yang berwarna oren seperti diatas.
selamat mencuba.

Tutorial (7) : Cara letak scroll pada posting


Dalam artikel sebelum ini juga ada berkaitan dengan scroll dimana ia diletakkan pada widget disidebar.Scroll ini hanya muncul secara automatik bila ketinggian kandungan melebihi ukuran yang ditetapkan.Scroll juga boleh diletakkan pada keseluruhanposting   atau  sebahagian teks sahaja pada posting yang dikehendakki.
scroll pada posting

Bagi meletakkan pada keseluruhan posting

cari kod .post { pada template dan tambahkan kod merah seperti bawah

.post {
height:180px;
overflow:auto;
}

meletak scroll pada teks tertentu sahaja pada posting

masukkan kod berikut pada template

.scrollbox {
height:110px;
width:420px;
overflow:auto;
}

letakkan diatas kod ]]></b:skin>

Semasa membuat posting dan pada mode edit html masukkan kod dibawah
<div class="scrollbox">teks yang ingin dipaparkan dalam bentuk scroll</div>



Tutorial (6) : Cara letak border,background dan scroll pada widget.

cara letak border,background dan scroll pada widget

widget borderDalam artikel cara letak border pada widgetsebelum ini terdapat masaalah dimana border ini juga mengelilingi  pada tajuk widget.Ia  hanya sesuai digunakan pada widget widget tertentu sahaja(yang tidak memerlukan tajuk widget).Bila terjadi begini nampak janggal terutamanya pada yang telah menghias tajuk widget dengan begitu cantik,tapi border pula berada disampingnya. Selain dariborder,background dan scroll juga dimasukkan sekali pada kod ini.Jadi untuk artikel kali ini saya akan tunjukkan cara bagi mengatasinya:

Sebagai contoh untuk tutorial ini saya pilih widget Archives:


Masuk ke design-pilih edit html--klik pada expand template widget
kemudian gunakan fungsi carian Ctrl+F dan taipkan perkataan archive

cari

tekan butang next sehingga jumpa kod seperti ini:


<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

letakkan setelah kod: <div class='widget-content'>
dan sesetengah widget seperti ini

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
kemudian letakkan kod ini dibawahnya:

<div style='width: 190px; background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeuwhEUZtim5yMdxz3ViI6Em40dJfU5YDAulSnAQEM495jc6J6aSAMVaBbggQllyyaGd5xxovTYL_CnJdEgz5zd8DLi5ODE89v4Tc880f8mas-9Kyl59QHAkYbwSkiOwSN3l8sUiUzgko/s1600/black.png&quot;) repeat scroll 0% 0% transparent; overflow: auto; height: 100px; border: 1px solid rgb(206, 206, 246); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 20px; margin: 3px 0pt 0pt;'> 

kemudian scroll perlahan lahan lagi kebawah hingga jumpa kod

<b:include name='quickedit'/>
 
dan letakkan kod dibawah ini  selepasnya:

</div>
 

kalau nak letak background gantikan url imej pada teks berwarnamerah.Ubahkan lebar dan tinggi yang bersesuaian pada teks berwarnahijau.
kemudian preview dan save template .

Saya juga telah cuba untuk widget bloglist ,categories dan berhasil.Untuk widget yang lain rasanya tiada masaalah.Untuk widget lain cuma kenal pasti tajuk widget dan cari kod pada template seperti contoh yang diatas

Contoh kod yang dibuat untuk widget bloglist:

widget
klik untuk besarkan gambar


Selamat mencuba

Tutorial (5) : Meletak border disekeliling template.

meletak border disekeliling template

Ubahsuai pada template ada bermacam macam bentuk.Ada yang suka letak hiasan berbagai bagai ditepi kiri dan kanan template supaya kelihatan cantik.Ada yg tukar background,tulisan,warna pada template.Sementara itu ada yg sukaletak border disekeliling post,widget dan sidebar.Yang akhir  sekali sekeliling template juga ingin diletak border.Cara meletak border pada sekeliling template sama seperti di bahagian lain,kita perlu ubahsuai kod pada template.

Cara membuatnya:

Pada design--pilih edit html
dan cari kod dibawah ini:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}
kemudian tambahkan kod menjadi seperti dibawah ini:
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; border: 15px solid #DF7401;
}

Untuk ubah saiz border tukarkan saiz pada teks warna biru dan warna border pada teks berwarna hijau
Bentuk border selain dari solid ialah ridge,groove,inset,outset,dashed dan dotted

kemudian save template anda.

LinkWithin

Related Posts Plugin for WordPress, Blogger...