Chykalophia | Freelance Graphic & Web Designer » tutorial

Add Pinterest Pin It Button To Blogger Post

Ari Krzyzek — Tue, 22 Nov 2011 18:29:09 +0000

Last time I wrote about how to add Pinterest Pin It button I designed to WordPress Page and Post, today since I realize that other Pinterest addicts who happen to love blogging as well are using Blogger instead of WordPress. So cheer up Bloggers, here’s the simple way to add the Pin It button to your Blogger Posts.

The Steps:

Important: Always backup your template before you do anything described in this post! I will NOT responsible for any damage or template error on your blogger template.

Go To Blogger > Design > Edit HTML
Click Expand widgets templates box
Search for
If you want to add the button just below your post titles then add the cheat code below just above
If you want the button appear at the end of your posts then paste the following cheat code just below

Hit save and that’s it!

More info about the Pin In Button I designed and some related info about the button.

Note: The above code is currently using my PinIt-Compact button, if you wish to replace the button with your own button or Pinterest PinIt button replace the source image “http://chykalophia.com/images/pinit-compact.png” to your button source image/location.

Sphere: Related Content

Read more awesome articles like this (Add Pinterest Pin It Button To Blogger Post) at Chykalophia | Freelance Graphic & Web Designer.

Add Pinterest Pin It Button To WordPress Page & Post

Ari Krzyzek — Tue, 23 Aug 2011 17:53:21 +0000

I was working on one web design project for vintage event/theme rental company, Intaglio Vintage of which you have seen the teaser on my Facebook Page. And since Pinterest has been very common for the owners, I propose the idea of adding the Pinterest Pin It button for their blog post and inventories.

After researching for some plugin or similar feature for this, I only found the Pin It Button for the Bookmark on Website Browser. You can use it by simply dragging the button to your bookmark of either Safari, Chrome, or Firefox.

Another one is Pinterest Follow Button, which I have also added on Intaglio Vintage’s website header. Pinterest also provide the Pin It button for website which I thought could be the solution for this project. Sadly, this only works if you set the url of the website and url to the image of which you want people to pin. In the plus side, it works like the Facebook Like button as it comes with the count bubble.

Then I decided to grab the code from the Pin It Button for Bookmark, attach it on a button and add it to the website. After few test and help from PiotrKrzyzek.com, I managed to add the Pin It button (Designed by Chykalophia Design) to the end of the blog post as shown on the image below.

So now, how did we do it you ask? Here’s the cheat code you can use:

ps: Place the cheat code above under the content of your post or page. Do not forget to set the to your Pin it Button. Then, you can style it using CSS. :)

In addition to this post, I’d also like to share some freebies. Below are the preview on the Pin it Button I’ve designed. You can get the Pin it Button Collection from my Download page. Enjoy, and happy pinning!

For those who didn’t get it work, please make sure to change the Pinit button URL to your own button. However, if you would like to use the one I designed, simply copy and paste the code below:

And if you are familiar with the coding, I’m pretty sure you can also use the Pin it ribbon corner button I made to work. See my Showcase page for the live sample.

Sphere: Related Content

Read more awesome articles like this (Add Pinterest Pin It Button To WordPress Page & Post) at Chykalophia | Freelance Graphic & Web Designer.

Senorita iPhone Theme: Behind the making

Ari Krzyzek — Mon, 22 Mar 2010 20:18:32 +0000

Apple says:

It’s three devices in one.

iPhone is more than just a phone. It combines three devices in one: a revolutionary mobile phone, a widescreen iPod, and a breakthrough Internet device. All that and more makes it the best phone you’ll ever use.

I’d say:

It’s irresistible! : )

Like most of other designers who believe the iPhone is the unlimited Smart Phone, I’ve always wanted to get one of these since the first generation came out. I ended up buying the second generation, the iPhone 3G. For the first few months, I played around with how to change the all black wallpaper, and changed it with my (of course) own picture or my designs. After a while, my curiosity began to grow more and more. Yesterday, I decided to create my own iPhone Theme. How I want MY iPhone to look and feel. And today, I’ll tell you how I made it. Not a tutorial per say, but more like a documentation.

As a designer, I have to admit I’m way too picky selective. I guess all designer are like that aren’t we? So, why did I end up with this Senorita Theme? Well I wanted a theme that defines me, that will obviously reflect who is the owner of the iPhone and her character. I spent a while thinking about this. I tried talking to my friends and fiance about what image portrays me the best? I came with no decisions, though I decided not to waste my time any longer and went ahead using my web (original Chykalophia website design) theme.

Basically, what you need are an iPhone (any generation), Adobe Photoshop, Cyberduck (or other FTP program), and a wi-fi connection. Decided the theme concept for your own theme first. Take your time on this, you want your first theme will be awesome, don’t you? :p Once you figure it out, to make things easier, choose an existing theme that is closed to what you desire.

First things first, download the theme to your computer. If your downloaded the theme through Cydia, then copy the theme pack into your computer using Cyberduck (or other FTP program).

Next, let’s say that you want to have your own iPhone Wallpaper design, the Lockscreen, even the SMS background. With Adobe Photoshop, you could easily create your own design for wallpaper, lockscreen, SMS background, and other graphic. Of course, if you prefer to use Illustrator, go ahead, use any graphic program that you’re comfortable with. Other than wallpaper, lockscreen, and SMS background, I also created my own iPhone slider that match my theme. Make sure that you don’t make the slider more than 90 px high. And for the SMS background, you have to remember that iPhone can be viewed vertically and horizontally. So the SMS background size will be a bit tricky. I made it 480px x 480px. See the picture below to find out how the dimension worked.

You see in that 480px x 480px, some of my artwork won’t be shown as it is cropped automatically by the iPhone size when you view it horizontally. You’re done with the designs? Don’t forget to pick custom icons (it’s optional).

You’re almost done. Remember to save the designs and icons you have selected with the exact file name and extension in the theme pack you copied. To change the name of the theme, simply change the name of the folder. You did it? Well, now simply upload it through Cyberduck to your iPhone theme directory (root/Library/Themes/). Open Winterboard on your iPhone after the upload is completed and select the theme you have just created. And, tada…. now you have your own designed theme on your beloved iPhone.

I apologize if the steps I have explained isn’t easy to follow, this is my first documentation/tutorial article, so I hope this helps. :)

*Credit:
Women Illustration : Ari Suardiyanti (Chykalophia Graphic Design)
Flower Graphic : (iStockPhoto)
Icons : Elio Rivero (ilovecolors)
SMS Original theme : iMilk by Jesse (Repo: iSpazio – Cydia)
Album Cover Art : SnowCover (Cydia)

Sphere: Related Content

Read more awesome articles like this (Senorita iPhone Theme: Behind the making) at Chykalophia | Freelance Graphic & Web Designer.

T-SHIRT Round-up

Ari Krzyzek — Sat, 17 Oct 2009 21:58:49 +0000

Who doesn’t love tees? Or the usual name; T-Shirt? Everybody loves T-shirts! This type of clothes has been survive from the late of 1800′s to the 19th century, and even till now. With many variation images, or typography or both, for any purposes, it’s always attract us to wear them, of course it is also depends on how attractive the design on the t-shirts themselves.

For designers, sometimes the limited color become a problem, but for today, I think that’s an old problem which has been solved by the technology on the garment industry. So, I provide you a link to these Ultimate T-shirt Round-up article from smashing magazine. There are tutorials on how to design the t-shirt design for the printing method or technique, also some useful resources you can use for free. ;)

Hit the link:
http://www.smashingmagazine.com/2009/10/16/the-ultimate-round-up-of-t-shirt-design-tutorials/

Sphere: Related Content

Read more awesome articles like this (T-SHIRT Round-up) at Chykalophia | Freelance Graphic & Web Designer.

Begin to Make Website for Designer

Ari Krzyzek — Mon, 12 Oct 2009 18:38:22 +0000

For most Print Graphic Designer, design and create a website would be a challenging task to do. As much as we enjoy ourselves working on the artwork and layout for it, those principles on print designs won’t aesthetically pleasing as it is for the print designs. As a print graphic designer, it was quite confusing for me when I was being critiqued by my client for the web page I did for his company. I found that even though he isn’t a designer, he knows the real function of the web page and the customer’s vision flow when they are browsing the web. I searched more resources about them. And yes, even though it’s basically part of graphic design, web design has its own rules. From the illustration, color scheme, and typography, it’s all what we’ve been familiar with in print design, but in web design, pay more attention to the effects (ie. gradients or shadows) as well.

Below are some great links to articles that have helped me understanding more about website design. Hopefully they could be useful for you to :)

Part of the TutPlus website series from Envato to help providing designers about internet and websites.

A step to step tutorial to guide you designing and coding your first website.

Great blog and resources for web designer.

This article has 9 important things you should never underestimate when designing a blog web page, really useful and such a great reminder for designer ;)

And this last one is an article to prepare yourself to be ready in polishing your next web project professionally.

Good luck and have fun ;)

Sphere: Related Content

Read more awesome articles like this (Begin to Make Website for Designer) at Chykalophia | Freelance Graphic & Web Designer.