SR-SITE

Using Print to Establish Your Online Blog or Business

noreply@blogger.com (Siraj Shamim) — Tue, 21 May 2013 17:58:00 +0000

Printed marketing materials are used on a daily basis by hundreds of thousands of businesses and corporations around the globe, and with great success. But one area which often seems to forget about printed marketing is the online industry. Bloggers and online businesses alike tend to go straight for the digital marketing methods, rather than utilising print – this could be a big mistake.

Marketing with printed materials has a few great benefits over digital marketing, one of which is its cost effectiveness. You can print business cards for as little as around 10c per card, making them a very cheap way of advertising.

Like with any method of advertising, your advert needs to stand out from the rest in order to do its job properly. If it doesn’t stand out, and if it isn’t memorable, then people are not going to look at it, let alone follow it up by visiting your website. It can be hard to think of new and original ideas for your designs with so many out there already. I’ve collected a number of awesome designs to give you some inspiration for your own design projects. Whatever you’re designing, the examples below should certainly help to get your creative juices flowing freely!

Hopefully these materials have given you some ideas on how best to advertise your blog or online business through printed materials. As you can see from the designs, the way in which the information is presented on them, and the designs themselves, have more of a personal feel than a corporate one, and as their often advertising personal blogs, they include that bloggers social accounts too; Twitter, Facebook, Google + etc. So, remember to incorporate those points into your own designs. When it comes time to print your design, you’ll probably want to use an online printing company, as they tend to be cheaper and quicker than offline companies. There are companies like www.nextdayflyers.com which allow you to print any type of marketing material online through their website. Whether you’ve chosen to go with business cards, or flyers, or brochures, or some other type of material, you’ll be able to get it printed with them, and at super high quality.

Author Bio: Nathan Daniels is a regular contributor of technology, creativity, design and print posts to this blog and other top blogs around the web. When he’s not blogging he enjoys keeping up to date on the latest in gadgets and technology, and travelling around Europe!

Stylish Popular Post Widget with 3D Effect for Blogger

noreply@blogger.com (Siraj Shamim) — Wed, 16 Jan 2013 16:03:00 +0000

Want to add stylish popular post for blogger. So this post is for you. Today I share 3D effect popular post widget. I have posted moving popular post widget before. To add 3D effect popular post widget follow below steps:-

LIVE DEMO

1. Login to your Blogger account.

2. Click on Dashboard >> Layout.

3. Click on Add a Gadget and Choose Popular Posts (If you already have this gadget skip this step)

4. After adding Popular Post Gadget Add a Gadget again Select HTML/Javascript widget.

5. Paste the following code and Save.

6. You are done.

Add CSS3 3D Style Verticle Menu to Blogger Blog

noreply@blogger.com (Siraj Shamim) — Sun, 06 Jan 2013 06:14:00 +0000

Want add CSS3 3D Style Verticle Menu to Blogger blog. CSS3 3D Style Verticle Menu make blog more visitor friendly. Today I share CSS3 3D Style Verticle Menu to Blogger. To add just make below steps properly.

1. Login to your Blogger Account.

2. From Dashboard >> Tamplate >> Edit HTML >> Proceed.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Find out (Press Ctrl+F) the Code ]]></b:skin>

6. Now Just before the ]]></b:skin> Paste the following Code

#nav12,#nav ul {
background-color: #8899AA;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav12 {
display: block;
padding: 5px;
position: relative;
width: 112px;

-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
#nav12 ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
position: absolute;
top: -9999px;

-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);

-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;

-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav12 li {
background-color: #FFFFFF;
position: relative;
}
#nav12 > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#nav12 li a {
background-color: #AABBCC;
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
color: #000000;
display: block;
font-size: 15px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:95px;

-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#nav12 li:hover > a {
background-color: #8899AA;
border-color: #8899AA;
color: #FFFFFF;
}
#nav12 li:hover ul.subs {
left: 114px;
opacity:1;
top: 0;

-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;

-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#nav12 ul li {
width: 100%;
}

7. Go back Blogger and click Layout than Add Gadget >> HTML/Javascript.

8. Paste the below code and Save.

<div class="container">
<ul id="nav12">
<li><a href="http://www.sr-site.com/">Home</a></li>
<li><a href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>

9. Replace your url where need. You are done.

Add Heart Style Social Sharing Widget to Blogger Blog

noreply@blogger.com (Siraj Shamim) — Sun, 06 Jan 2013 05:55:00 +0000

Want add Social Sharing Widget to Blogger blog. Social share button make blog more visitor friendly. Today I share Heart Style Social Sharing Widget to Blogger. To add just make below steps properly.

LIVE DEMO

1. Login to your Blogger Account.

2. From Dashboard >> Tamplate >> Edit HTML >> Proceed.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Find out (Press Ctrl+F) the Code ]]></b:skin>

6. Now Just before the ]]></b:skin> Paste the following Code

.sr-site{
list-style-type:none;
margin:0;
padding:0;
}
.sr-site li{
display:inline;
width: 60px;
height:60px;
}
.sr-site li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.sr-site li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

7. Go back Blogger and click Layout than Add Gadget >> HTML/Javascript.

8. Paste the below code and Save.

9. Replace your url where need. You are done.

Add Sliding Social Sharing Widget to Blogger Blog

noreply@blogger.com (Siraj Shamim) — Fri, 04 Jan 2013 06:39:00 +0000

Do you want to Add Sliding Social Sharing Widget to Blogger Blog. It is a excellent widget. It has a nice hover effect. You can link your Rss Feed, Facebook, Twitter and Google plus by this widget. Let go to see.

LIVE DEMO

1. Login to your Blogger account.

2. Click on Dashboard >> Layout.

3. Click on Add a Gadget.

4. Select HTML/Javascript widget.

5. Paste the following code and Save.

6. Replace with your URLs where highlight with red color text. You are Done.

Stylish Rss Feed, Facebook, Twitter, Email Subscription Widget to Blogger

noreply@blogger.com (Siraj Shamim) — Fri, 04 Jan 2013 06:11:00 +0000

Do you want to add Excellent/Stylish Rss Feed, Facebook, Twitter, Google Plus, Email Subscription Widget to Blogger? By this widget visitor can subscribe to your blog and get update easily. To do it just follow the below steps:

1. Login to your Blogger account.

2. Click on Dashboard >> Layout.

3. Click on Add a Gadget.

4. Select HTML/Javascript widget.

5. Paste the following code and Save.

Note: Replace your site where need replacing sr-site.

How to Make Blogger Blog Post Title SEO Friendly

noreply@blogger.com (Siraj Shamim) — Sun, 30 Dec 2012 08:03:00 +0000

Do you want to make your blogger post title seo friendly? If your post title be seo friendly you will get more visitor from search engine. Post Title increase visitor so that improve your page rank. But the blogger templates are not search engine optimized that is they are not simply compatible to boost up your page rank. Do make your blogger template post title seo friendly just fulfill below steps:

1. Login to your Blogger Account.

2. From Dashboard >> Tamplate >> Edit HTML >> Proceed.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Then search for this tag <data:blog.pageTitle/>

Normally it is located in "head" section.

6. Replace the above code with the following code:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

I hope this trick will help you to drive more traffic to your Blogs or Websites. It also increases SEO of your Blogger Blog. Post a comment if you have any query. Thanks a lot !!!! To more How To Make a Blogger Template SEO Friendly

Show Blog Post Title First on Search Engine || SEO Tips

noreply@blogger.com (Siraj Shamim) — Sun, 30 Dec 2012 07:29:00 +0000

Do you want show blogger post title first in search result? If your post title show first visitor will know something to see search result. So, they will not jump to others site. It will confirm you more visitor. To do just follow the below steps:

6. Now if you want to show only Blog Post Title then replace the above tag with following code:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

7. If you want to Show Blog Post Title First + then Blog Title, replace the tag with the following code.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>

How To Make a Blogger Template SEO Friendly

noreply@blogger.com (Siraj Shamim) — Sat, 29 Dec 2012 06:43:00 +0000

There are many blogger template you get but most them are not seo friendly. Most of those template are designed by unknown designer who don't know seo properly. Don't worry. Today I show how to make your blogger template seo friendly. Just fulfill below jobs.

1. Login to your Blogger Account.

2. From Dashboard >> Tamplate >> Edit HTML >> Proceed.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Find out (Press Ctrl+F) the Code <head>

6. Now Just below the <head> Paste the following Code

Note: Replace Your Site Description Here with your site description but make sure it shouldn't exceed 60 characters. Also replace Your Site Keywords Here with 10 to 15 keywords that relates your site.

7. Now again Find out (Press Ctrl+F) the below or similar Code

8. And replace it with below code

Save your template. You are done. It may take 1 week or more to apply. It change must give you more traffic before. You can see show blog post title first on search engine.

Add CSS3 Flying Style Drop Down Menubar to Blogger

noreply@blogger.com (Siraj Shamim) — Thu, 27 Dec 2012 18:38:00 +0000

Do you want to Add CSS3 Flying Style Drop Down Menubar to Blogger. It it a excellent menubar what you blog make more attractive before. You can add this menubar easily. Just follow the below steps:

#flyingmenubt,#flyingmenubt ul {
list-style: none outside none;
margin: 0;
padding: 0;
height:500px;}
#flyingmenubt {
font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
font-size: 13px;
height: 36px;
list-style: none outside none;
margin: 40px auto;
text-shadow: 0 -1px 3px #202020;
width: 980px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}
#flyingmenubt ul {
left: -9999px;
position: absolute;
top: -9999px;
z-index: 2;
}
#flyingmenubt li {
border-bottom: 1px solid #575757;
border-left: 1px solid #929292;
border-right: 1px solid #5d5d5d;
border-top: 1px solid #797979;
display: block;
float: left;
height: 34px;
position: relative;
width: 105px;
}
#flyingmenubt li:first-child {
border-left: 0 none;
margin-left: 5px;
}
#flyingmenubt li a {
color: #FFFFFF;
display: block;
line-height: 34px;
outline: medium none;
text-align: center;
text-decoration: none;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}

/* keyframes #animation1 */
@-webkit-keyframes animation1 {
0% {-webkit-transform: scale(1);}
30% {-webkit-transform: scale(1.3);}
100% {-webkit-transform: scale(1);}}
@-moz-keyframes animation1 {
0% {-moz-transform: scale(1);}
30% {-moz-transform: scale(1.3);}
100% {-moz-transform: scale(1);}}
#flyingmenubt li > a:hover {

-moz-animation-name: animation1;
-moz-animation-duration: 0.7s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: animation1;
-webkit-animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#flyingmenubt li:hover > a {
z-index: 4;
}
#flyingmenubt li:hover ul.subs {
left: 0;
top: 34px;
width: 150px;
}
#flyingmenubt ul li {
background: none repeat scroll 0 0 #838383;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
opacity: 0;
width: 100%;
/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/
}

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
0% {margin-left:185px;}
100% {margin-left:0px;opacity:1;}
}
@-moz-keyframes animation2 {
0% {margin-left:185px;}
100% { margin-left:0px;opacity:1;}
}
#flyingmenubt li:hover ul li {
/* css3 animation */
-moz-animation-name: animation2;
-moz-animation-duration: 0.3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: animation2;
-webkit-animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#flyingmenubt li:hover ul li:nth-child(1) {
-moz-animation-delay: 0;
-webkit-animation-delay: 0;
}
#flyingmenubt li:hover ul li:nth-child(2) {
-moz-animation-delay: 0.05s;
-webkit-animation-delay: 0.05s;
}
#flyingmenubt li:hover ul li:nth-child(3) {
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
#flyingmenubt li:hover ul li:nth-child(4) {
-moz-animation-delay: 0.15s;
-webkit-animation-delay: 0.15s;
}
#flyingmenubt li:hover ul li:nth-child(5) {
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
#flyingmenubt li:hover ul li:nth-child(6) {
-moz-animation-delay: 0.25s;
-webkit-animation-delay: 0.25s;
}
#flyingmenubt li:hover ul li:nth-child(7) {
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
#flyingmenubt li:hover ul li:nth-child(8) {
-moz-animation-delay: 0.35s;
-webkit-animation-delay: 0.35s;
}

7. Go back Blogger and click Layout than Add Gadget >> HTML/Javascript.

8. Paste the below code and Save.

<ul id="flyingmenubt">
<li><a href="http://www.sr-site.com/">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="http://www.sr-site.com/">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
<li><a href="#">Submenu 6</a></li>
<li><a href="#">Submenu 7</a></li>
<li><a href="#">Submenu 8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="http://www.sr-site.com/">Back</a></li>
</ul>

You are done. It may be helpful for you Add Menubar with Submenu in Blogger.

How to Add Google Plus Follower Gadget For Blogger

noreply@blogger.com (Siraj Shamim) — Thu, 27 Dec 2012 17:58:00 +0000

Do you want add Google Plus Follower Gadget to your blogger blog? It will make to follow you easy for your blog visitor. Google Plus Follower Gadget will make you blog more user friendly. To do it follow below steps:

1. Login to your Blogger account.

2. From Dashboard drop down Select Google+ Button.

3. Than Click Upgrade to Google+

4. Than Profile Page will come. After then Add people you know and than Follow interesting people and page will come. Full fill them and click Continue.

5. Than You will get a page like below. Check the box and click SWITCH NOW.

6. Now Choose your blog and click ADD BLOGS.

7. Go back Blogger and click Layout than Add Gadget.

8. A new window will come. Choose Google+ Followers.

9. Click Save and you are done.

How to Add Snow Storm Effect to Blogger Blog

noreply@blogger.com (Siraj Shamim) — Thu, 27 Dec 2012 17:06:00 +0000

Do want want to add anything new to your blogger Blog? I suggest you to add customizable snow storm effect to your blog. I am sure a new looking will come to your blog. It has created using Javacript. You can customize it easily. Let go to look....

1. Login to your Blogger Account.

2. From Dashboard >> Tamplate >> Edit HTML.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Find out (Press Ctrl+F) the Code </head>

6. Now Just before the </head> Paste the following Code

7. Save your template. You are done.

Note: You can change color changing color code #99ccff and number of snow changing 68.

How to Add Moving Popular Posts in Blogger Blog

noreply@blogger.com (Siraj Shamim) — Wed, 26 Dec 2012 05:54:00 +0000

Wants to add moving/animated stylish popular post feature in your Blogger? The trick is extremely easy however it will produce a pleasant impression of your diary. If you're interested to feature the same style of moving common posts contraption to your blogger then this post is for you. The method is extremely easy. Simply follow the easy steps.

1. Login to your Blogger account.

2. Click on Dashboard >> Layout.

3. Click on Add a Gadget.

4. Select HTML/Javascript widget.

5. Paste the following code and Save.

You are done. You can customize the size of the moving popular post. Just find width, height, color section and change it according to your need.

Add Stylish Unique Search Box to Blogger Blog

noreply@blogger.com (Siraj Shamim) — Tue, 25 Dec 2012 14:58:00 +0000

Do you want to Add Stylish Unique Search Box to Blogger Blog? Every template does not provide search box. But Search Box is very the most useful tool for navigating of any website. Though you can add blogger default search box but but unfortunately it does not provide accurate search result all the times. Don't worry, today I show how to remove this problem easily. Let's go...

1. Login to your Blogger account.

2. Click on Dashboard >> Layout.

3. Click on Add a Gadget.

4. Select HTML/Javascript widget.

5. Paste the following code and Save.

You are done. You can customize the size of the search box. Just find width, height, color section and change it according to your need. To see more unique and stylish search box click here.

How To Add Facebook Send Button Every Post to Blogger

noreply@blogger.com (Siraj Shamim) — Mon, 24 Dec 2012 17:40:00 +0000

Facebook has launched a new button for sharing in private. This button features are amazing and it’s completely different from the “facebook like button”. It allows your visitors:

1. Share your posts with selected friends through Facebook Messages.

2. Post them to Facebook Groups.

3. Email them (without snippet) to individuals.

Do you want to add Facebook send button. Today I try to show to do it simply. Just follow the below steps carefully.

1. Login to your Blogger Account.

2. From Dashboard >> Tamplate >> Edit HTML.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Find out (Press Ctrl+F) the Code </head>

6. Now Just before the </head> Paste the following Code

7. Now find (CTRL+F) this in the Code: <data:post.body/>

8. Now Just before the <data:post.body/> Paste the following Code

9. Save your template and you are done.

Note: To place the Facebook Send button at the end of your post paste the code after/below <data:post.body/>

How to Add Related Posts Below Every Post to Blogger With Thumbnails

noreply@blogger.com (Siraj Shamim) — Sun, 23 Dec 2012 18:13:00 +0000

Do you want to Add Related Posts Below Every Post to Blogger With Thumbnails? Related post below post make blog more visitor friendly. Visitor can find easily same post of your blog. Today I show how to do it.

Note: Displaying more than 5 posts, replace 5 value from var maxresults=5;

7. Now Find out (Press Ctrl+F) the Code <div class='post-footer'>

8. Just before the <div class='post-footer'> Paste the following Code

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://sr-site.com'><img alt='Blogger Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

Note: To change the number of similar/related posts to be displayed, change the code max-results=6

9. Save your template and you are done. You many need Show or Hide Widgets In Blogger on Specific Pages here.

Show Different Image On Mouse Over on Blogger Blog

noreply@blogger.com (Siraj Shamim) — Sun, 23 Dec 2012 16:45:00 +0000

Do you like different image On Mouse Over on your Blog? Do you thing how to Show different Image On Mouse Over on Blog? Don't worry friend. Today I show how to do it. Just follow the below steps:-

1. Login to your Blogger Account.

2. From Dashboard >> Tamplate >> Edit HTML.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Find out (Press Ctrl+F) the Code </body>

6. Now Just before the </body> Paste the following Code

7. After doing this, save the template.

8. Now whenever you want to add any image in your blogger post with mouse over effect you need upload both pictures on some image hosting website,then paste below code with properly added links....

9. Replace the lines in RED and LIME color, with appropriate links and you are done.
Enjoy the effects...

How to Add Recent Posts Widget in Blogger

noreply@blogger.com (Siraj Shamim) — Sun, 23 Dec 2012 06:01:00 +0000

Many of blogger asked how to add recent post widget to blogger? Recent post widget/plugin makes your blog more visitor-friendly. The good news is that it’s too easy to add it and it takes less than 1 minute, so lets do it.

1. Login to your Blogger Account.

2. From dashboard >> layout >> Add a Gadget where you want to add Recent post.

3. Select Feed from the list

4. Add your blog’s comments feed: http://YOUR BLOG.com/feeds/posts/default

5. Write your blog post feed url and click Continue.

6. Now choose the number of how many recent posts to display and click Save.

7. You are done. Enjoy blogging.

How to Add Recent Comments Widget to Blogger!

noreply@blogger.com (Siraj Shamim) — Sun, 23 Dec 2012 05:39:00 +0000

Many of blogger asked how to add recent comments widget to blogger? Recent Comments widget/plugin makes your blog more visitor-friendly. The good news is that it’s too easy to add it and it takes less than 1 minute, so lets do it.

1. Login to your Blogger Account.

2. From dashboard >> layout >> Add a Gadget where you want to add Recent Comments.

3. Select Feed from the list

4. Add your blog’s comments feed: http://YOUR BLOG.com/feeds/comments/default

5. Write your blog comments feed url and click Continue.

6. Now choose the number of how many recent comments to display and click Save.

7. You are done. Enjoy blogging.

How to Change Blog Links Color and Font Style in Blogger

noreply@blogger.com (Siraj Shamim) — Sat, 22 Dec 2012 19:27:00 +0000

How To Change Blog Links Color and Font Style? Do you want to change links color and font style? Today I show here, how to do it easily by using css code. Just follow me:-

1. Login to your Blogger Account.

2. From dashboard >> tamplate >> Edit HTML.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Now find (CTRL+F) this in the code: ]]></b:skin>

6. Paste the below code before the ]]></b:skin> tag.

.post a{font-weight:bold;font-size:12px;color:#000000;text-decoration:none}
.post a:hover{text-decoration:underline}

Note: You can change font size changing font-size:12px and change color changing color code color:#000000.

7. Than save your template and you are done.

How to Change Blogger "Post A Comment" Message

noreply@blogger.com (Siraj Shamim) — Sat, 22 Dec 2012 15:48:00 +0000

Do you want to change/customize blogger comment message "Post A Comment" message? In this tutorial, today I show how to change/customize blogger comment message. Just follow the steps:-

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>

6. And the below one too

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

7. Now replace the code (marked in red), with the text that you want to display.

Note: You can replace it (marked in red) with image. Create image and upload and replace (Don't forget to replace IMAGE-URL-HERE with the direct link to the image).

<img src="IMAGE-URL-HERE"/>

How to Customize Blogger Comment Message

noreply@blogger.com (Siraj Shamim) — Sat, 22 Dec 2012 15:20:00 +0000

Do you want to change/customize blogger comment message "Post A Comment" message? In this tutorial, today I show how to change/customize blogger comment message. Just follow the steps:-

1. Login to your blogger account.

2. From dashboard >> tamplate >> Edit HTML.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Now find (CTRL+F) this in the code:

6. Below this above code you will find a piece of code like this.

<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>

7. Replace this whole code with the below codes.

<b:if cond='data:post.numComments == 0'>
Be the first to reply!
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/> so far. What are your thoughts?
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> so far. What are your thoughts?
</b:if>
</b:if>

8. Save your template and you are done.

How to Hide Post Date, Time and Author in Blogspot Blog

noreply@blogger.com (Siraj Shamim) — Sat, 22 Dec 2012 13:09:00 +0000

How to Hide post date, time and Author in blogger blog Using CSS? Sometimes someone want to hide post date, time and Author. Here I show how to do it using css in blogger blog site. Just follow the below steps:-

Login to your blogger account.

Than dashboard >> layout >> Edit HTML.

Don't forget to backup your template first.

Check the Expand Widget Templates box and find the below code

Hide Post date:

To hide the post date, find the code below and delete it.

<data:post.dateHeader/>

Hide Post Time :

Find the below code and delete this.

Hide Post author:

To hide the name of author, find code below and delete it.

Save your template and you are done. You can see how to display post author, time & date and labels below post title in blogger.

How to Create a Facebook Fan Page for Blog

noreply@blogger.com (Siraj Shamim) — Sat, 22 Dec 2012 10:20:00 +0000

How to Create a Facebook Fan Page for your Blog? Facebook is a great Social Networking Site to promote your blog or brand. Most of the major brands do have a Facebook Fan Page. Facebook Fan Page is a great plugin that allows visitors who subscribe to your blog he will get updates via their Facebook accounts, without visiting your blog. After subscribing (Pressing like button) , They will receive your most recent blog updates on their Facebook page. Here I try to show how to do it easily.

1. First login to your Facebook Account.

2. Go to the Create Fan Page Link on Facebook and select Brand or Product

3. In the category dropdown, select Website.

4. Type in your blog name under the Category dropdown box, check the box to agree to Facebook’s TOS, and click Get Started.

5. Next you’ll be prompted to upload a profile picture. Upload picture and click Next. If you don’t have now, skip this step – you can always add a picture later.

6. Write here some basic information about your blog and click Save Info.

7. Choose a unique Facebook web address to make it easier for people to find your Page and click Set Address.

8. You’ll be taken to your page, which has the admin panel across the top. Feel free to explore the various settings and options. There are all kinds of prompts to help you understand what to do.

9. Pay special attention to the bottom right section of the admin panel. This section allows you to claim a custom URL for your page. You’re all done!

How To Add Facebook Like/Fan Box To Blogger

noreply@blogger.com (Siraj Shamim) — Sat, 22 Dec 2012 05:13:00 +0000

How To Add Facebook Like/Fan Box To Blogger? Facebook Fan Box is a great plugin that allows visitors who subscribe to your blog he will get updates via their Facebook accounts, without visiting your blog. After subscribing (Pressing like button) , They will receive your most recent blog updates on their Facebook page. Before creating a fan box you should already have a facebook fan page. If you haven't yet created, click here to learn how to create a facebook fan page.

1. Find out your Facebook Fan Page URL. To do that, just visit your Facebook Fan Page, and copy the url in the address bar.

2. Then visit this page: http://developers.facebook.com/docs/reference/plugins/like-box

3. Paste your url into the Facebook Page URL and click Get Code. You can see below screenshot:

4. Here, You'll be given two codes, titled HTML 5, XFBML and IFRAME. You only need the XFBML code. Copy the xfbml code which gets generated.

5. Now login to your Blogger account and go to Layout >> Click Add a Gadget Link and Add an HTML/JavaScript Gadget.

6.Paste the generated code as the Gadget’s Content. See screenshot.

7. Unchecked Expand Widget Templates Box and find out

<html

8. and change it to and save Template.

<html xmlns:fb="https://www.facebook.com/2008/fbml"

You are done. Facebook comment box are successfully add to your blogger site.