I will show short tutorial how to implement @font-face syntax. Prepare .ttf or .otf font and .eot file. Upload it to folder of your template where there is css file. For the example I use Yikes font.

Edit css and insert this code:

@font-face {
	font-family: 'Yikes';
	src: url('yikes.eot');
	src: local('☺'), url('yikes.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
 
.yikes1 {font: 2em 'Yikes', Arial, sans-serif;}

If you use wordpress change to HTML mode when create new post, then insert this code (for example):

<p class="yikes1">R. Bambang Widiatmoko<br />Featuring Yikes font</p>

And here is the result:

R. Bambang Widiatmoko
Featuring Yikes font

Try to select the text ^^

Related posts:

1. Insert Facebook Like Button to WordPress Taken from Cordobo.com, Integrate Facebook’s “Like” Plugin into WordPress. The...

Related posts brought to you by Yet Another Related Posts Plugin.

Non-System Web Font with HTML5 @font-face Syntax was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 3 July 2010.

Font arab Arial dengan Times New Roman tidak jauh berbeda. Menurut saya font Traditional Arabic dan Arabic Typesetting mempunyai tingkat kejelasan yang terbaik, perbedaannya kalau Arabic Typesetting terlihat lebih rapat. Namun untuk penggunaan tasydid dan kasroh, Arabic Typesetting terlihat lebih tepat peletakannya seperti mushaf saat ini.

Lalu bagaimana untuk penggunaan di web? Untungnya font seperti Arabic Typesetting merupakan salah satu font standard web, jadi kita bisa menggunakan dalam coding desain web. Contohnya sebagai berikut.
Di file css:

.arab1 {font: 3em Arabic Typesetting, Arial, sans-serif;}

Lalu di file html:

<p class="arab1">صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ</p>

Tulisan arab bisa diedit di word lalu copas ke HTML editor. Contoh jadinya:

صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ

Update:
Ternyata font Arabic Typesetting bukan font standard web jadi kalau dilihat di komputer yang tidak terinstall font tersebut, tulisan arabnya tidak seperti di screenshot. Jadi solusinya adalah dengan memanfaatkan fitur @font-face HTML5 (lihat tutorialnya).

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Perbandingan Font untuk Menulis Arab was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 28 June 2010.

Available in 1440×900

Download all Islamic Wallpaper – al Qiyaamah

You can see my other Islamic wallpaper

Related posts:

1. Islamic Wallpaper 6 – Sayyidul Istighfar Du’aa Sayyidul Istighfar — HR. al-Bukhari, kitab ad-Da’awaat, bab Maa...
2. Islamic Wallpaper 2 1. Available in 1920×1200, 1280×800, 1024×768 Download: HERE 2. Available...
3. Islamic Wallpaper 3 1. Available in 1920×1200, 1280×800, 1024×768 Download: HERE Download in...

Related posts brought to you by Yet Another Related Posts Plugin.

Islamic Wallpaper – al Qiyaamah was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 8 May 2010.

The original code can be generated from Facebook’s Like Button generator. Here is how to insert the code.

Update: One of the WordPress social bookmark plugin, Digg Digg, now add Facebook Like Button.

Insert the Code

1. Edit your theme. Appearance -> Editor -> Single Post (single.php)
2. For example I insert the code after the content:

<div class="content">
<?php the_content(); ?>
<div class="fixed"></div>
<insert the code here>
</div>
<div class="under">

3. Here is the code to be inserted:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show-faces=true&amp;width=500&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:60px"></iframe>

4. So the final code would be:

<div class="content">
<?php the_content(); ?>
<div class="fixed"></div>		
 
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show-faces=true&amp;width=500&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:500px; height:60px"></iframe>
 
</div>
<div class="under">

5. See the different from original code generated by Facebook?
Original:

href=http%3A%2F%2Fwheeqo.web.id%2F&

Modified:

href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;

Related posts:

1. Tips Insert Image in Joomla! There are many ways to insert image(s) in Joomla!. The...
2. Non-System Web Font with HTML5 @font-face Syntax In this post I just want to try the new...
3. Fix RSS Feed Error in WordPress Recently I got error when I try to validate my...

Related posts brought to you by Yet Another Related Posts Plugin.

Insert Facebook Like Button to WordPress was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 24 April 2010.

Related posts:

1. Islamic Wallpaper 3 1. Available in 1920×1200, 1280×800, 1024×768 Download: HERE Download in...
2. Islamic Wallpaper 4 **Indonesia language only** 1. Do’a memohon ilmu yg bermanfaat, rizki...
3. Islamic Wallpaper 2 1. Available in 1920×1200, 1280×800, 1024×768 Download: HERE 2. Available...

Related posts brought to you by Yet Another Related Posts Plugin.

Global Warming Wallpaper – Awareness Can Save the Earth was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 28 March 2010.

Related posts:

1. Islamic Wallpaper 3 1. Available in 1920×1200, 1280×800, 1024×768 Download: HERE Download in...
2. Islamic Wallpaper 6 – Sayyidul Istighfar Du’aa Sayyidul Istighfar — HR. al-Bukhari, kitab ad-Da’awaat, bab Maa...
3. Islamic Wallpaper 4 **Indonesia language only** 1. Do’a memohon ilmu yg bermanfaat, rizki...

Related posts brought to you by Yet Another Related Posts Plugin.

Islamic Wallpaper – Du’aa for Bride n Groom after Nikah was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 28 March 2010.

The Steps

1. Create rounded rectangle 512x512px. Feel free with the fill color. Mine is blue vertical gradient, the bottom is 00001e and the top is 00005a.

2. Create text in middle of rectangle. I use Myriad Pro bold font. If you want to control the kerning, edit the text, then use alt + arrow. Use gray gradient color, the bottom is 1a1a1a and the top is 666666.

3. Step 3 – 7 see picture below. We will create the white shadow. Duplicate (ctrl + D) the text. Choose the duplicate one.

4. Color it white.
5. Lower it one step, so it under the gray-gradient text.
6. Move it right 1px (x: +1) and down 1px (y: -1). Move it by change the coordinate in toolbar.
7. Change the blur to 1.
8. Last create inner shadow on gray-gradient text (the original one). Select gray-gradient text. Go to menu Filter -> Shadows and Glows -> Inner Shadow.

Done!

Inkscape ebook recommendation

Related posts:

1. Create Glassy Effect on CorelDRAW On this tutorial shows how to add a glassy effect...
2. Convert Full Color Image to a 3 Color Separation in GIMP I will show how to convert from full color image...
3. Create Slide Show on Windows 7 Desktop Background Windows 7 has a feature to change the desktop background...

Related posts brought to you by Yet Another Related Posts Plugin.

Inkscape Tutorial: Create Letterpress Text Effect was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 21 February 2010.

Inkscape ebook recommendation

Related posts:

1. Download Free CV Template 1 The CV design is inspired from Smashing Magazine. Designed with...

Related posts brought to you by Yet Another Related Posts Plugin.

2 Free High Quality Inkscape Icons was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 19 February 2010.

The Steps

1. Duplicate into 3 layer. Rename it each one with white, gray, and black.

2. We will start with the gray layer. Select gray layer and hide the other layer. Go to menu Colors -> Threshold….

3. Fill the left value 85 and the right value 170. Click OK. See image below.

Click to see larger image.
Now all midtone color will be seen in white color.

4. Now we must delete the black color and change the white color into gray. With Select by Color Tool click on black color area.

5. With the black color selected, go to menu Layer -> Transparency -> Add Alpha Channel. Then delete. The black color will be deleted.

6. Right click on gray layer -> Alpha to Selection.

Click to see larger image.
All the white color will be selected.

7. Change the Foreground color with gray. Then go to menu Edit -> Fill with FG Color.

Click to see larger image.

8. The white color area will be changed to gray color.

9. Now select white layer and hide the other layer. Go to menu Colors -> Threshold…. Fill the left value 170 and the right value 255. Click OK. See image below.

Click to see larger image.
Now all light color will be seen in white color.

10. Since the light color already in white, you only have to delete the black color. The process just like the gray layer.

11. Now select black layer and hide the other layer. Go to menu Colors -> Threshold…. Fill the left value 0 and the right value 85. Click OK. See image below.

Click to see larger image.
Now all dark color will be seen in white color.

12. Now you must delete the black color and change the white color into black color. The process just like the gray layer.

13. Last step, unhide all layer except the original layer. Don’t forget to save it in GIMP format (.xcf)

Related posts:

1. Inkscape Tutorial: Create Letterpress Text Effect This effect is become famous nowadays especially in web design....
2. Transparent Image in Office 2007 White Background on Image When we inserting image, except png...
3. Tips Insert Image in Joomla! There are many ways to insert image(s) in Joomla!. The...

Related posts brought to you by Yet Another Related Posts Plugin.

Convert Full Color Image to a 3 Color Separation in GIMP was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 10 February 2010.

Related posts:

1. Islamic Wallpaper – al Qiyaamah Available in 1280×800 Available in 1440×900 Download all Islamic Wallpaper...
2. Islamic Wallpaper 2 1. Available in 1920×1200, 1280×800, 1024×768 Download: HERE 2. Available...
3. Islamic Wallpaper 3 1. Available in 1920×1200, 1280×800, 1024×768 Download: HERE Download in...

Related posts brought to you by Yet Another Related Posts Plugin.

Islamic Wallpaper 6 – Sayyidul Istighfar was originally appeared on WheeQo.web.id posted by R. Bambang Widiatmoko on 2 January 2010.