Tag: theme

Tips menggunakan tema WordPress percuma

Assalam kepada semua pembaca. Ini adalah entri yang pertama sejak aku menggunakan tema ‘Sorbet‘ di dalam blog ni.
sorbet-theme

Aku dan Tema WordPress

Aku dah lama menulis blog menggunakan platform WordPress, sejak tahun 2008. Awal-awal dulu, aku cuma guna tema sedia ada. Bila tak berkenan aku ubah dan modify sendiri ikut citarasa. Aku juga pernah buat tema sendiri sebab nak nampak unik dan kreatif seperti yang menggunakan nama Binafsha, Binafsha 2 dan Binafsha 3.


Antara sebab aku buat template tu jugak sebab nak nampak blend in dengan iklan Adsense dari Google. Tapi lama-lama, bila dah sibuk dengan hal lain, nak tulis blog pun tak sempat, makin bosan tengok blog dengan tema yang sama je. Lepas tu aku pun nekad untuk kembali kepada penulisan blog yang sejati.

Aku nak kongsikan apa amalan terbaik (baca: best practice) untuk menggunakan tema dan juga supaya anda senang untuk menukar tema blog anda dengan pantas.

1. Fokus kepada penulisan / kandungan blog
Nama pun blog, anda kena tumpukan pada isi kandungan blog. Luangkan masa pada penulisan, bukan pada rupa bentuk blog anda. Isi kandungan itu yang paling utama dalam sesebuah blog. Bila ada isi kandungan yang mantap, setakat nak bertukar tema ni merupakan perkara yang tak akan mengambil masa yang panjang. Tema yang aku tukar ni cuma mengambil kurang 30 minit untuk adjust kedudukan Widget dan link menu.

2. Modify guna Jetpack – Edit CSS
Sejak WordPress memperkenalkan plugin Jetpack, ada satu fungsi yang sangat bermanfaat iaitu Edit CSS. Dulu jika nak ubah, aku akan ubah terus pada stylesheet tema atau gunakan plugin untuk edit CSS. Kelebihannya, jika anda ada perubahan yang sama dari dulu sampai sekarang, ia akan kelihatan konsisten walaupun anda bertukar tema.

Contohnya, aku ada buat selector untuk butang download atau petak highlight seperti di bawah. Dah dua tiga kali tukar blog, rupa bentuk button tu tetap sama. Yang aku suka guna Jetpack ni sebab ia merupakan plugin yang ada semua benda. Kurang pergantungan kepada plugin pihak ketiga.

Ini adalah kotak untuk highlight supaya orang akan fokus

3. Hadkan penggunaan Widget untuk satu Sidebar.
Kebanyakan tema didatangkan dengan satu sidebar yang utama. Walau anda tukar tema apa sekali pun, widget dalam sidebar akan kekal di dalam sidebar, cuma mungkin kedudukan sidebar tu yang berubah.

Data widget ni disimpan di dalam database. Itu sebabnya aku lebih suka tema blog yang ada satu sidebar utama seperti sekarang. Tak perlu memakan masa yang lama untuk setiap kali perubahan.

4. Catatkan apa perubahan pada tema jika ada.
Aku sebenarnya tak buat pun perkara ni. Sebab perubahan yang aku buat adalah sangat minimal dan aku tahu apa yang berubah. Mungkin anda boleh gunakan Evernote untuk mencatat log ubah (baca: change log) yang anda buat pada blog anda.

Kesimpulan

Dengan mengamalkan pengurusan blog yang baik, blog anda akan sentiasa kelihatan moden dan mengikut trend terkini. Anda juga akan bersemangat bila tengok blog anda yang menggunakan tema responsif, kelihatan seperti tahun 2014 (bukan 2005) dan juga mesra pengguna.

Sekian sahaja dariku, selamat mencuba.

Filed under: BlogTagged with: , , ,

New Binafsha 3.0 theme with responsive layout

Salam. Introducing my new blog theme, Binafsha 3.0.

The reason why I changed this theme is because I’m bored with the current theme. I’ve been using Binafsha 2.0 for more than one year. Anyway that’s not the main issue.

Actually I had the time to work on this new theme since I got two weeks of Eid break.

In this latest version of Binafsha theme, there are a few major features that I’ve implemented. Let’s go one by one.

1. Responsive layout

This is the trend in web design as far as I’m concerned. More people are using smartphones and tablets to surf the web. So I need to make sure they can view my website beautifully in different screen resolutions.

This is how it looks like in an iPhone. You can also try to resize your browser to see the magic of the responsive layout.

2. Threaded comments

In the previous theme, to be honest, I forgot to design the threaded comment section. The framework that I used did not come with a threaded comment function. Now I’m using the Starkers framework and it comes with threaded comments which is cool.

3. jQuery and more CSS3 stuff

I always fancy applying some animation and fancy typography on my clients’ website. So this is my chance to play around with the current trend. In this theme, there are only 5 images. Other effects are achieved by CSS2 and CSS3 alone. Try hovering your mouse on the logo to see the effect!

4. Magazine style layout

I’ve designed the home page to be very simple with a magazine style layout. However the entry page is still the same. The reason is because I believe most of my traffic come from search engines. If you noticed, most ads are placed on the entry page, making the home page less cluttered to achieve simplicity.

References

Credits to these websites for the inspiration and helping me with this theme.

I’ll keep on tweaking this theme for the time being. If you have any comments or suggestions regarding the new look, please let me know in the comment section below.

Filed under: Blog, DesignTagged with: ,

New blog theme – Binafsha 2.0

Salam. Introducing my new blog theme, Binafsha 2.0. Its a tweaked design from the Binafsha 1.0 which is my previous theme. I call it Binafsha 2.0 because it still has the same colour scheme, purple with various shades.

Before we go any further, let’s see how Binafsha 1.0 looks like. I uses WP Framework for this design.

For Binafsha 2.0, I uses Whiteboard framework with major arrangement. You can see they have same color scheme and overall layout.

This theme was inspired from many design blogs out there. I also had experimented few new features in this design.

What’s New?

  • Typekit – You can see in the blog title. Its not a web standard font but it gives new feel about the blog.
  • New fonts collection – Header uses Myriad Pro, the title uses Sovba and the content uses Lucida Sans Unicode
  • 960 grid system – I want to make the blog shorter (less scrolling) and that’s where vertical sidebar took place
  • Big fat footer – using the 960 grid system, I put many stuff down there to allow important ones on the sidebar
  • Innity ads – replacing the old good Nuffnang
  • Experiment with CSS3 – Put few text-shadow, rounded corners and box shadows.
  • New comment section – everything is aligned!

Why I redesign?
There are few reason why redesigning the whole theme is crucial. The first reason is to improve the loading time. Previously, there are too many unnecessary items here and there. So I’ve decided to design it purposely for improving my loading time. These are the comparison of the loading time for both themes.

Second is to motivate my to write shorter post, as I don’t really read long post (more than 300 words). So I just reduced the font size and surprisingly, its easier to read with less scrolling!

I designed a homepage with thumbnails & excerpt is also to improve the loading time. Based on my statistics, for the past 3 months, most of the visitors came from search engine and they read my post page only, about 80%. While those who visited the homepage are 19%. Since its hard to know which entry do the read, I revert back to excerpt with thumbnails layout. Only 3% visit my About, Portfolio & Contact page.

I guess that’s it for today. I’ll post more creative ideas in the future. Been busy with few works recently.

P/S – Am I a speed addict? 😛

Filed under: DesignTagged with: , , ,

ArliaHashim new blog design

Salam. I just want to introduce to you ArliaHashim new blog design. Actually, its not my design. But I have converted her design in Photoshop (PSD) into CSS. This is my first time to convert blog design for others.

Its quite easy because I’ve experienced converting PSD in other websites too, check my portfolio. I always experiment WordPress theme with my own blog. ArliaHashim design is quite simple and minimal, so I can do it within hours.

arliahashim-blog-with-super-powers.jpg

This is what she said about her new theme.

So I’ve got my good buddy AK to help me code my layout design into a WordPress theme. I didn’t realise installing it on my own server etc was actually sooo easy!

Convert from AI to CSS

Besides that, I also can convert from Adobe Illustrator to CSS. For your information, my current blog design is created entirely with Illustrator.
ps-ai-convert-css-wp.jpg

Imitating other web design?

I know this is quite unethical for designer. But if you think you like (for example) Facebook design, you can ask me to convert as your theme too. But I will have to change the layout and color so that it won’t looks like the original one. I remember one quote saying, “Design is an imitation”.

Price

It depends on the design. If the design is complicated, I will have to spend more time to do it. My rate is affordable for young (and old) bloggers. So, if you are looking for a freelance, I can help you to convert your design into your blog, you can contact me. For the mean time, I only do for WordPress blog. I hope I can convert design for Blogspot too because lots of people uses Blogspot than WordPress.

Filed under: DesignTagged with: , , , ,

Blog makeover: Binafsha Theme

binafsha.jpg

Salam. As you can see, I’ve just uploaded my brand new theme. I call it as Binafsha Theme, which means purple in Uzbek.

Basically, its a two column theme. I’ve chosen this style because I want to put more things on the sidebar. Besides that, I’ve also has shown entire post. For a longer post, you can click ‘Read more’ to view the rest.

Content Slider

The unique cool thing about this theme is the Sliding Content on top part of the blog. You can click on the category tabs, which is Blog, Personal, Design and Event. Twitter tab is for my twitter updates and Malay tab is two latest entry from my Malay blog, Warna Kehidupan.

More white space and justified content

I was influenced by the printing media. The same goes for a blog design. It should have plenty of white space for the reader. This time, I used justify align to make the paragraph aligned, just like when you see in the magazine.

Problems

Yes, there are some problems because the theme is 90% ready and I just can’t wait to release it to see how its gonna look on the web. Finally, I’ve spotted some error when using IE7. I will fix it later.

Here’s the resources and inspiration for my Binafsha theme.
Core77 website
WP Framework
Coda Slider Effect

So, what do you think?

Filed under: BlogTagged with: , , , , ,