Tag: wordpress

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: , , ,

How to delete duplicated comments after uninstalling Disqus

Salam. I had installed Disqus plugin for my blog last year to improve the commenting system on my blog.

However since Disqus seemed to slow down my page load time, I’ve decided to remove it and revert to the standard WordPress commenting system. WordPress since the version 2.7 already have a threaded comment system, without having to install any third party plugins anymore.

Duplicated comments?

When I installed Disqus, Disqus imported and sync all of my comments into their server. I’m not sure what happened next. After a few months of trying out the plugin on my blog, I’m not really happy with the page load time and I’ve decided to uninstall it. At that time, I noticed that my older entries had duplicated comments.

How to fix it?

After looking around for some solution on the web (I was looking for a plugin) but to no avail, I tried to look into the database and my comment section to look for a pattern. There were two similar patterns of the duplicated comments.

  1. User agent : Disqus
  2. Email : commenter-name@anonymous.disqus.net

To make it easier, instead of listing down the comments based on the user agent, you can just list them by using their email. This is how I did it.

Warning: Don’t forget to make a backup of your database first.

1. Go to Comment Section.
2. In the search box, type ‘@anonymous.disqus.net’.
3. After it displayed the search result, you can verify which comment is duplicated or generated from Disqus.

4. Check all boxes.
5. Choose ‘Move to Trash’ from the Bulk Action drop down and click the ‘Apply’ button.
6. Go to Trash and click ‘Empty Trash’ button.

I’m not saying that Disqus is not good. I still use it on my Tumblr blog. I also choose to comment using my Disqus account if I want to comment on any blog with Disqus platform.

Filed under: TutorialTagged 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: ,

How to add image as background of blog header

Salam. Recently, one of my visitor asked me on how to change or customize the look of wordpress blog. I guess the blogger just shifted from Blogger to WordPress and the blogger might confused with the overall layout, theme and CSS in WordPress.

So, in order to help the blogger, I’ve decided to come up with a screencast tutorial. I think it is easier to learn by watching and learning instead of just reading the whole thing.

Basically, this is my first and official WordPress screencast tutorial. I’ll create more tutorial in the future. Thanks to Screencast-o-matic for the useful Java application that allows me to capture my screen without any installation (except Java). It is in Malay language and target audience are WordPress and CSS beginners. The duration of this tutorial is 13 minutes.

In this tutorial, I’ll cover on how to add a background to a header section of a wordpress blog, changing the position of the header elements and change font type. The theme for this tutorial is Green Park 2 by Cordobo. Check it out.


Cara mengubah CSS WordPress

More tutorials coming soon. If you have any question, please ask me in the comment form below. Thank you.

Filed under: TutorialTagged 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: , , ,