What makes your blog different from others? How could you make your blog stand out? If you want to have some personal logo, try this – Customized Top Banner!


Do those limited official templates make you bored? Are you satisfied for showing title on your header only?

Then, here we are! In this post, I shared how to add personal logo into your blog and gave it a different look! Let’s try customize your Top Banner!

There’s nothing about coding, the hardest part here is IDEA. So, try to figure out a creative, unique and meaningful title name and image for your blog before you start! Also, STYLE is important, too! If you wanna have a colorful top banner, try to simplify your background!

And, believe it or not, you are almost there! Only 2 easy steps!!

  1. Design a logo, title through any image editing app and save as a .png file. (Here, I use photoshop to design images, and be sure to set background contents as transparent. Save as .png file, then there’s no any conflict to your background in blog.)
  2. Navigate to your Blogger Dashboard –> Layout –> Blog Title (in our case Princess Peach | (小桃小天地)) –> Edit –> Upload the image from computer –> Save 
客製化標題圖片   客製化標題圖片設定

And, it’s DONE!!! 
Go check it! If there’s some dimension problem, just go back to modify the canvas size. And there are still some options for you.



  • Option 1 – Image Behind Title and Description: You can design the logo only, show both the title and description as well. But you’ll need to control the space precisely. Because the image may be overlapped by your title or description. Moreover, the description just goes below your title, no way to change the space. If it’s a problem for you, try option two.
  • Option 2 – Image Instead of Title and Description: Which means the image would be the only thing on your top banner, neither title nor description would show up. Congrats, now you can design your top banner without any limitation. You can go with different space, different fonts, sizes. It’s all depends on what you like!
  • Option 3 – Have Description Placed after Image: This one is very similar to Option 2. The only difference is the description, it shows up after image.


Ta Dang!!! Hopefully you got it working. 🙂 If not, please comment.


Looking for more tools to customize your blog? See the following posts!

–> More blogging fun please hop on over to: ♥ Blogging ♥

現居德州, 致力於在平凡的生活中尋找不平凡, 在忙碌的生活中尋找只屬於我們的小幸福... 旅行。美食。生活。牽著手的三人行... 若無特別聲明, 本站所有文章皆為作者原創, 欲轉載請註明作者 & 文章出處, 請尊重智慧財產權, 謝謝~!!