Friday, 4 January 2013

The Blog-Face 1.0 - Jquery Plugin that creates your blog home page with a brick-wall look!

"A good interface is one which you don't have to build!"
Introducing, BlogFace 1.0, a new jQuery plugin that will build a brick-wall view for your blog home page. All you need to do is specify your blog URL in your javascript. More recent articles will be better positioned and will have a better size. Additionally, every article on the interface will have a zoom on mouse hover effect. This zoom effect can be toggled at run time by pressing "b".

How to use:

The download pack contains the plugin files - blogface.min.js and the extended hover zoom plugin - hover_zoom_extended.min.js.
The file blogface_demo.html is the html file deployed in my live demo. blogface_blogger.html is the file deployed in my blog as a blog page.

1. Specify your blog URL

Enter you blog URL in a piece of javascript as shown below

2. Include plugins

Include the jQuery plugin if not done already. Now, include the plugin blogface.min.js and the hover zoom plugin hover_zoom_extended.min.js

3. Create a container for your interface

Add a div as shown below. This div will contain your interface and display a maximum of 20 recent articles from your blog feed.
If less articles are shown, you can increase the number of articles in your feed by modifying your blog settings.

The view will occupy 720px in width and a maximum of 640px in height when all 20 articles are displayed. So make sure you have that amount of space available on you webpage.


  1. Replies
    1. can you add feature next/previous, so just not 20 :D

    2. yup sure, will make a version 2.0 with next and pervious buttons..

    3. add default image for post not add image :D

  2. Hey , I've added this awesome jquery plugin in

    1. cool .. thanks for the add, are you the owner of Jquer?

  3. So very very helpful. Thank you. You can see where I've used this tip at Skin Tightening, thank you again!

  4. Jake Handling Hello, thank you once you've made ​​this post. It really helped me, because I can not make the code, hehe. Very helpful, Thank you all.

    Do not forget to also visit my site Jersey Bola Original Shop


  5. I need Download it bro... :D Thanks, Im come back later...

  6. Postingan yang sangat bagus, saya setuju dengan Anda 100%!

  7. Sangat jarang saya menemukan sebuah blog yang informatif dan menghibur seperti ini.

  8. saya tidak melakukannya untuk tujuan SEO , tetapi untuk belajar hal-hal baru.

  9. Blog Anda sangat penting bagi semua orang, teruslah berbagi.

  10. saya harus mengatakan bahwa secara keseluruhan saya benar-benar terkesan dengan blog ini.

  11. blog yang bagus dan informatif, yang berisi semua informasi dan juga memiliki dampak yang positif