Tag [pre] Yang Powerfull Untuk Menuliskan Kode Di Postingan

Pernahkah Anda menulis kode dengan menggunakan tag <PRE> di blogspot. Jika belum, mungkin ini saatnya. Mengapa tag <PRE>? bukankah lebih baik menggunakan syntax highlighter?

Tag <PRE> dalam kode HTML digunakan khusus untuk menuliskan kode. Dengan menggunakan tag <PRE> maka sebuah postingan akan memelihara indent dari kode tersebut, ini sangatlah penting.

Penggunaan tag <PRE>:
<PRE> code HTML, VB, C++, CSS, dll </PRE>

Contoh kode CSS yang menggunakan tag <pre>:

<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>

Bandingkan dengan kode di bawah:

<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>

Kode VB6.0 di bawah ini menggunakan tag <PRE>:

'Automatic select listbox when mouse over
Option Explicit

Private Declare Function ClientToScreen Lib "user32" (ByVal hwnd As Long, lpPoint As POINTAPI) As Long
Private Declare Function LBItemFromPt Lib "COMCTL32.DLL" (ByVal hLB As Long, ByVal ptX As Long, ByVal ptY As Long, ByVal bAutoScroll As Long) As Long
Private Declare Function SendMessage Lib "user32" Alias "SendMessageA" (ByVal hwnd As Long, ByVal wMsg As Long, ByVal wParam As Long, lParam As Long) As Long

Private Const LB_SETCURSEL = &H186
Private Const LB_GETCURSEL = &H188

Private Type POINTAPI
X As Long
Y As Long
End Type

Private Sub HightLightListBox(ByVal hwndLB As Long, ByVal X As Single, ByVal Y As Single)

Dim IndexItem As Long
Dim Point As POINTAPI

Point.X = X \ Screen.TwipsPerPixelX
Point.Y = Y \ Screen.TwipsPerPixelY

Call ClientToScreen(hwndLB, Point)

IndexItem = LBItemFromPt(hwndLB, Point.X, Point.Y, False)

If IndexItem <> SendMessage(hwndLB, LB_GETCURSEL, 0, 0) Then
Call SendMessage(hwndLB, LB_SETCURSEL, IndexItem, 0)
End If

End Sub

Private Sub Form_Load()
Dim i As Long
For i = 0 To 100
List1.AddItem 1234567 + i
Next
End Sub

Private Sub List1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
HightLightListBox List1.hwnd, X, Y
End Sub

Bandingkan dengan yang di bawah:

'Automatic select listbox when mouse over
Option Explicit

Private Declare Function ClientToScreen Lib "user32" (ByVal hwnd As Long, lpPoint As POINTAPI) As Long
Private Declare Function LBItemFromPt Lib "COMCTL32.DLL" (ByVal hLB As Long, ByVal ptX As Long, ByVal ptY As Long, ByVal bAutoScroll As Long) As Long
Private Declare Function SendMessage Lib "user32" Alias "SendMessageA" (ByVal hwnd As Long, ByVal wMsg As Long, ByVal wParam As Long, lParam As Long) As Long

Private Const LB_SETCURSEL = &H186
Private Const LB_GETCURSEL = &H188

Private Type POINTAPI
X As Long
Y As Long
End Type

Private Sub HightLightListBox(ByVal hwndLB As Long, ByVal X As Single, ByVal Y As Single)

Dim IndexItem As Long
Dim Point As POINTAPI

Point.X = X \ Screen.TwipsPerPixelX
Point.Y = Y \ Screen.TwipsPerPixelY

Call ClientToScreen(hwndLB, Point)

IndexItem = LBItemFromPt(hwndLB, Point.X, Point.Y, False)

If IndexItem <> SendMessage(hwndLB, LB_GETCURSEL, 0, 0) Then
Call SendMessage(hwndLB, LB_SETCURSEL, IndexItem, 0)
End If

End Sub

Private Sub Form_Load()
Dim i As Long
For i = 0 To 100
List1.AddItem 1234567 + i
Next
End Sub

Private Sub List1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
HightLightListBox List1.hwnd, X, Y
End Sub

Manakah yang menurut Anda lebih baik?

READ MORE - Tag [pre] Yang Powerfull Untuk Menuliskan Kode Di Postingan

Format Tulisan Arab Pada Template Blogger

Bagi para blogger yang biasa menulis arab pada blog tentunya ingin agar tulisan arabnya lebih mudah dibaca oleh para pengunjung. Hal tersebut tentu saja mudah dengan cara memodifikasi templatenya. Caranya? buatlah oleh Anda beberapa selector class arab seperti di bawah ini:

.arab{
  font-size:200%;
  font-family:"Traditional Arabic","Times New Roman",Georgia,Serif;
  background: #F8F8F8;
  text-align: right;
  margin: 6px;
  padding: 6px;
  border: 1px dotted #223344;
  line-height: 150%
}
.basmalah{
  font-size:200%;
  font-family: "Traditional Arabic","Times New Roman",Georgia,Serif;
  font-weight: Bold;
  background: #F8F8F8;
  text-align: center;
  margin: 10px;
  padding: 10px;
  border: 1px dotted #223344;
  line-height: 150%
}
.syair{
  font-size:200%;
  font-family:"Traditional Arabic","Times New Roman",Georgia,Serif;
  background: #F8F8F8;
  text-align: center;
  margin: 5px;
  padding: 5px;
  border: 1px dotted #223344;
  line-height: 100%;
}
.arabbiasa{
  font-size:170%;
  font-family:"Traditional Arabic","Times New Roman",Georgia,Serif;
  line-height: 100%;
}

Selanjutnya copy-paste code CSS diatas pada body tempat meletakan code CSS. Kemudian sarankan kepada para pengunjung untuk mendownload fonts-nya seperti postingan yang telah kami buat sebelumnya.

Cara penggunaan:

Letakkan kalimat-kalimat arab (ketika Anda membuat postingan) pada tag awal (<p class="arab">) dan tag akhir (</p>) seperti contoh dibawah ini:

• <p class="arab">huruf arab dengan paragraf</p>
• <p class="syair">syair arab</p>
• <span class="arabbiasa">huruf arab tanpa paragraf</span>
• <p class="basmalah">Lafadh basmalah</p>

Tentu saja Anda dapat memodifikasi seluruh code CSS disesuaikan dengan keinginan Anda.

READ MORE - Format Tulisan Arab Pada Template Blogger

Background - Belajar CSS

Menjelaskan mengenai kegunaan properti background pada CSS serta nilai-nilai (values) yang dapat dimasukan pada tiap-tiap propertinya. Setelah mempelajari properti background diharapkan kita dapat mengedit properti background sesuai dengan yang kita kehendaki.

Properti Background adalah untuk membuat efek latar belakang pada sebuah element. Properties CSS yang dapat digunakan dalam efek background diantaranya:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background-Color: berfungsi untuk mengatur latar belakang sebuah element dengan warna solid. Contoh:

h1 {background-color:#FFFFFF;}

Background-Image: berfungsi untuk mengatur latarbelakang sebuah element dengan gambar. Contoh:

h1 {background-image: url(nama-gambar.gif);}

Background-Repeat: berfungsi untuk mengatur latarbelakang sebuah element dengan gambar yang dapat diulang atau tidak. Contoh:

h1 {background-image: url(nama-gambar.gif);
background-repeat: no-repeat;}

selain bernilai no-repeat juga dapat bernilai inherit, repeat, repeat-x dan repeat-y.
cobalah satu persatu untuk melihat efek yang terjadi!.

Background-Attachment: berfungsi untuk mengatur latarbelakang sebuah element dengan gambar, apakah dapat digulirkan atau tidak. Contoh:

h1 {background-image: url(nama-gambar.gif);
background-attachment: fixed;}

selain bernilai fixed juga dapat bernilai inherit dan scroll
cobalah satu persatu untuk melihat efek yang terjadi!.

Background-Position: berfungsi untuk mengatur letak/posisi gambar latarbelakang sebuah element. Contoh:

h1 {background-image: url(nama-gambar.gif);
background-repeat: no-repeat;
background-position: top;}

selain bernilai top juga dapat bernilai inherit, center, left, right, dan bottom
cobalah satu persatu untuk melihat efek yang terjadi!.

Background: berfungsi untuk mendeklarasikan semua background properti menjadi satu. Cara ini paling banyak digunakan oleh web designer karena dapat mempersingkat waktu kerja anda. Contoh:

h1 {background:#FFFFFF url(nama-gambar.gif) no-repeat left top;}

READ MORE - Background - Belajar CSS