ShoutMeLoud – Shouters Who Inspire

Superlinks
≡ Menu
≡ Menu

How To Design A Professional Blog Profile Box For Your Blog

bluehost
How To Design A Professional Blog Profile Box For Your Blog

Introducing your blog is very Important for the visitors and blog readers who visits the blog. Its very important to have an introducing look of your blog, and every theme does”nt have this look. So, to change your blog looks perfect, we have made a Subscribe Box which you can add to your blog’s sidebar, to introduce your blog, and to make your blog readers visit again and again. The whole code looks like this :

screen1

<div id="subs">
<h3> Subscribe for Blog Tips </h3>
<p>Introduce Your Blog</p>
<p><a href="http://feeds.feedburner.com/ShoutMeLoud" title="Subscribe via RSS">Subscribe ShoutMeLoud via RSS</a></p>
<p><a href="http://www.facebook.com/ShoutMeLoud" title="Become ShoutMeLoud Fan">Become a Fan on Facebook</a></p>
<p><a href="http://www.twitter.com/ShoutMeLoud" title="Follow ShoutMeLoud on Twitter">Follow @SmashinGeeks on Twitter</a></p></p>
</div>

First step, is to understand the above code,in order to put it on your blog. The code is wrapped using div so that the box can easily be styled using CSS. The <h3> tags introduces the heading of the box.

Step 3: Introduce your Blog with Blog Title and the categories your blog belongs to. Replace the line [ Introduce Your Blog ] with your blog introduction and link to your blog’s about page.

Step 4: First login to your Feedburner account and copy your blog’s feed link and paste it in place of [ http://feeds.feedburner.com/ShoutMeLoud ]. Then, if you want to change the title, you can and change the link name to your desired one.

Step 5: If you have a facebook page or facebook profile of your blog, then copy the link of the facebook page and paste it in place of [ http://www.facebook.com/ShoutMeLoud ]. After that you can change the title and link name.

Step 6: If you have Twitter account or if you have your blog’s twitter profile, then paste the link in place of [ http://www.twitter.com/SHoutMeLoud]. You can also change the title and link name according to you.

Step 7: Its not all over now, you can make he box more crispy and stylish using a piece of CSS code. You can add some images to the box. Save these images and upload it to your themes directory wp-content/themes/images/.

#subs {background:#FFFFFF url(images/subscribe_bg.gif) no-repeat scroll right top;border:5px solid #A6AABA; width:300px;}
#subs a:hover {color:black;text-decoration:underline;}
#subs p {padding:0 10px;
font-family:cambria;
font-size:1.1em;
padding:0 10px;
}
#subscribe_widget p { margin: 0 0 1em 0; }
#subscribe_widget h2 { margin-bottom: 1em; }
a.rss { padding: 0px 0 1px 20px; background: url("images/rss_icon.gif") 0 0px no-repeat; margin-right: 20px;padding:0 2em; }
a.whatrss { padding: 0 0 0 20px; background: url("images/facebook.bmp") 0 -1px no-repeat;padding:0 2em; }
a.twtr { padding: 0 0 0 20px; background: url("images/twitter-icon.gif") 0 -1px no-repeat; padding:0 2em;}

Now, once you completed, you will get your Subscribe Box to put on. Just paste the obtained code in your blog’s widget where you want to display the box and you are on the go.

sbox

Now, it would be easy for your readers to navigate to your Blog’s Networking and it would be easy to Connect to your Blog in these 3 different sites. If you have more way to show your blog subscribers, you can leave us a comment introducing your Subscribe Box.

Do let us know what do you think about this tutorial? Do you have a subscription box into your blog for easy subscription?

This is a guest post by SmashingGeeks who writes at SmashingGeeks.com. If you want to join Shoutmeloud, Guest author team: read How to become a guest author at Shoutmeloud.

  • Author Bio

  • Latest Post

Article by SmashinGeeks

SmashinGeeks has written 1 articles.

If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to ShoutMeLoud feed via RSS or EMAIL to receive instant updates.

    { 7 comments… add one }

    • SmashinGeeks

      You can definitely use CSS code, due to this only I wrapped the code in div.
      You can us #subs{} , #subs h3 {} and more.

      Reply
    • Rajeel

      Btw, Can i use the same css codes for blogger too ….???

      Reply
    • Sagar Gholap

      Although I have a subscription plugin installed, I will surely give this a try as the plugin widget doesn’t look that good as this is.

      Thanks!

      Regards,
      Sagar Gholap

      Reply
    • jai prakash

      Nice looking..I will try to use this because rightnow I have no subscribe box.
      thanks for giving one copy…….

      Reply
    • Tushar

      super easy dude…and looks nice…will get one for myself

      Reply
    • ishanbanga

      I recently changes my template design …I think i am going to use this on my blog.

      Reply
    • Anshul Dixit

      Nice tutorial. I am using icons of facebook, twitter, rss etc in the sidebar of my recently launched blog to offer subscription . Looks nice and elegant on my blog. But i’ll try this method as well. If this brings more subscribers i’ll stick to it.

      Reply

    Leave a Comment