How To Add Text Resizer In Blog

In this post, I will share to you about how to add text resizer in blog. The function of text resizer is to change the font size of the posts to be larger or smaller by click on the text resizer icon. If you want to add text resizer for your blog, you can follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the Expand Widget Templates box
4. Copy the code below, and paste above ]]></b:skin>

.textsizernorm, .textsizerbig, .textsizerbigger, .textsizersmall {
padding-top: 20px;
-o-transition: font 2s ease-in;
-moz-transition: font 2s ease-in;
-webkit-transition: font 2s ease-in;
}
.textsizersmall{font-size:12px}
.textsizernorm{font-size:13px}
.textsizerbig{font-size:14px}
.textsizerbigger{font-size:15px; font-weight:bold}
span.sizer {
float: right;
text-align: center;
height: 20px;
width: 250px;
margin: 0 10px 10px 0;
background: #333366;
display: block;
font-size: 18px;
padding: 2px 10px;
color: #00CCFF;
text-shadow: 1px 1px 1px blue;
cursor: pointer;
border: 1px solid #eee;
font-family: Times New Roman;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 6px #000;
-moz-box-shadow: 1px 1px 6px #000;
-webkit-box-shadow: 1px 1px 6px #000;display: block;
}
span.sizer:active {
border: 1px solid #555;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #003399;
box-shadow:0px 0px 12px #000;
-moz-box-shadow:0px 0px 12px #000;
-webkit-box-shadow:0px 0px 12px #000;
margin-top: -1px;
}
.clr20 {clear: both; height: 20px;}

=> You can change the font size and font style
5. Then, find <data:post.body/> , after that add the code below, so the result will like this (the blue code are the code that you have to add)

<div class='textsizersmall' onclick='if (this.className==&quot;textsizersmall&quot;) { this.className=&quot;textsizernorm&quot; } else if (this.className==&quot;textsizernorm&quot;) { this.className=&quot;textsizerbig&quot; } else if (this.className==&quot;textsizerbig&quot;) { this.className=&quot;textsizerbigger&quot; } else if (this.className==&quot;textsizerbigger&quot;) { this.className=&quot;textsizersmall&quot; } else { this.className=&quot;textsizersnall&quot; }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>

<data:post.body/>

</div>

6. Now, you can save your work.

How to Add Drop Shadows Effect to Images

With drop shadows effect to images, our blog images will given a kind of shadow which will surround beside the images. So, the images will look attractive. This effect is active when you put your cursor on the picture, then the picture will expand and there are drop shadows effect. For additional info, drop shadows effect is used CSS (CSS 3), so your blog is not too heavy. Now, if you want to know how to add drop shadows effect to images, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>

.MBT-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}

.MBT-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

4. Then, when you will use drop shadow effects to images, use this code

<div class="MBT-CSS3">
<img src="IMAGE URL" />
</div>

=> Change IMAGE URL with your image URL choice
5. Done!

How To Make Headline News In Blog

As we know, headline news is a feature in TV stations wich usually located at the bottom. Usually, that's display some latest news. But in this case, because it's about blog, so the headline news display the recent posts of your blog. So, the visitors can watch the newest post of your blog. Now, if you want to add it into your blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose HTML/Java Script
4. Copy the code below, and paste into the place

<script type="text/javascript">
var hn_url_blog = "http://maridadiagency.blogspot.com";
var hn_jumlah_post = 5;
var hn_warna_latar = "#EEEEEE";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src=" https://sites.google.com/site/maridadiagency/javascript-sama-edit-html/headlinenews.js?attredirects=0&d=1 ">
</script>

=>Change with your blog address
=>Number of posts that you want to display
5. Save now

Add Simple Back to Top Button

Previously, I've posted about Double Click to Back to Top, now I will post about Add Simple Back to Top Button. Actually, the function is same. But, in this trick, we can add a button or the picture. So, if we want to back to the top, we just click the button at the bottom right. Shortly, if you want to try Add Simple Back to Top Button, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"
4. Add the code below

<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="http://1.bp.blogspot.com/_u4gySN2ZgqE/SukYqBahTkI/
AAAAAAAABCc/QVxl3cG5_90/s400/back-to-top.gif"/></a></div>

• Replace http://1.bp.blogspot.com/_u4gySN2ZgqE/SukYqBahTkI/AAAAAAAABCc/QVxl3cG5_90
  /s400/back-to-top.gif with your button or picture URL

Change Blog Background Become Fire

Hi, friends! Now, I wil post about Change Blog Background Become Fire. This trick is proper for blog which has topic about automotive. But if your blog has black background, that's also proper for fire background. OK shortly, if you want to know how to Change Blog Background Become Fire, just follow the steps below.

1. Log in to your blogger account
2. Go to Design Page Elements --> Add Gadget
3. Choose "HTML/Java Script"
4. Add the code below

<style type="text/css">
body{background:url(https://lh3.googleusercontent.com/_GaKwmMcf4N4/TSKbNtAKZVI/AAAAAAAAD_g/5BNQ-CAM0PM/DADfire.gif) repeat-x bottom center fixed black;}
</style>

5. Now, you can click SAVE

Full Blog Tricks is Ready for Mobile

al Aminur Rahman Monday, May 30, 2011 Labels: Tricks

As you know, many of people have started using mobile. So, it's not impossible for people to open our blog by their phone. And maybe you think, the appearance on mobile is bad. But throw away your mind, the appearance on mobile is clean and ease. Its just contains some lines. One page contains 5 post (shorten).  The trick s very very easy... You just follow the tricks below.

Add this code beside your link

?m=1

So, the link will be like this

http://full-tricks.blogspot.com/?m=1

OK, that's all friend... Very easy right. So, Full Blog Tricks is Ready for Mobile now. Hopefully useful...

Automatic Link Source in Every Article when COPASTed

Hi, guys! How are you today? OK, now we will try a "cunning trick". That's Automatic Link Source in Every Article when COPASTed. What's the effect, guys? It will add automatic link source when the article has been copied. Hhmm... maybe it can muffle some plagiarisms.

DEMO - COPY SOME OF THE ARTICLE, AND PUT ON THE NOTEPAD

How add automatic link source? Just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </head>

<script type='text/javascript'>
function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    var pagelink = "<br/><br/> Original from: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright Maridadi Agency"; // change this if you want
    var copytext = selection + pagelink;
    var newdiv = document.createElement('div');
    newdiv.style.position='absolute';
    newdiv.style.left='-99999px';
    body_element.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function() {
        body_element.removeChild(newdiv);
    },0);
}document.oncopy = addLink;
</script>

Customize:

• You can change Original from: and Full Blog Tricks with your words

4. Click Save

How to Add Related Posts on Sidebar

Related posts Blogger

Hi, friends! Advance, I've written some tricks about related posts. They're How To Make Related Article In Blog and How to Add Related Posts with Thumbnail. Then, what will we disquss now? That's How to Add Related Posts on Sidebar. Actually the function are similar with them. But, in this case the related posts are in sidebar. So, it can contain more articles and have a good look. Now, How to Add Related Posts on Sidebar? Just follow the steps below!

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Backup first your template, because we'll make some changes.
4. Click on "Expand Widget Templates"
5. Copy and paste the code below above </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

6. Find (Ctrl + F) some code which looks like this

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

7. Then change with this code

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Customize:

• max-results=10 is the number of related posts will be display, you can change the number.

8. Click
9. Then, go to Design --> Page Elements --> Add Gadget, then choose "HTML/Java Script". Add the code below.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

10. Write Related Posts as the name of the widget. Click if you finished
11. To show the widget only in next page (not in homepage), go back to Design --> Edit HTML, click on "Expand Widget Templates"
12. Find (Ctrl + F) Related Posts,  and add some blue code. So the code will be like this

<b:widget id='HTML7' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>
</b:widget>

15. Click

Just do How to Add Related Posts on Sidebar patiently, and you will be done!

Change Blog Background Become Matrix Style

Previously, I've posted about Change Blog Background Become Fire. Now, I will posted about Change Blog Background Become Matrix Style. Have you watch Matrix? I think you have. Because Matrix is a big movie. Even this movie can enter into Box Office and earned $742,128,461! Amazing! So, if you like Matrix, by learn this trick, you can try to change your blog background become Matrix style. Interseted? Just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"
4. Add the code below

<style type="text/css">
<!--
body {
background-color: #000;
background-image: url(http://facebookskin.com/imgres/matrix-animated-image.gif);
}
-->
</style>

=> You can change the matrix style with other image, for example

http://1.bp.blogspot.com/-tSfSsH65WZQ/TcJhgd58YWI/AAAAAAAAAYA/Ahbme-7fRzc/s1600/Matrixl.gif

Blogger Free Images Hosting

Blogger Free Images Hosting

Hi, guys! Usually when we have a TLD (Top Level Domain) and use paid hosting, we will save any files into our hosting. Whereas, the hosting has limited place. So, we have to spare place by limit the uploading some files such as picture, script, CSS, etc. But, I think tha's not true. Because it can limit our creativity in blogging activity. So, how to solve it?

You can save your picture files in a free hosting such as Blogger. Wait, How? Use Blogger as a free image hosting? Yups, that's correct. In Blogger Free Images Hosting Tip, I will share to you how to use Blogger free images hosting.

1. Create a static pages at [Posting --> Edit Pages --> New Page]
2. Upload your images normally at this page
3. Then after your images have been finished in upload, right-click your mouse. Choose "Copy link address"
4. Hoopla! You've gotten the image link. You can paste the link address wherever you want.

NOTE: DON'T "PUBLISH" THIS PAGE, JUST "SAVE" IF YOU'VE FINISHED

Best CPM for Alternative Online Earning

Alternative Earning

Hi, Bloggers! Have you tried Internet Marketing? What kind of internet marketing did you use? Pay per Click, Paid to Affiliate, Paid to Review, or maybe CPM? No matter what did we use, the main is our earning, right?

One of the easiest internet marketing is CPM. CPM or Cost per Millions is advertising network which paid us (As a publisher) per 1000 impressions in our blog which have been installed the CPM ads. CPM is good for you who want to get dollar from internet with blog easily. Especially the blog has a high traffic, so you can get more dollar a day.

Now, Full Blog Tricks will share for you some Best CPM for Alternative Online Earning.

• BlueAdvertise
BlueAdvertise or DEX Platform is a standardized direct banner media exchange platform for publishers.  BlueAdvertise helps to monetize publisher's websites, blogs , cms's and social websites with network CPM ads.  BlueAdvertise is an easy to use platform that accepts many international publisher.

• Smowtion
Smowtion is a technology company specializing in the Ad-Network business. Smowtion is focused on developing products and solutions for the online advertising industry, helping them to target quality audiences. Smowtion also works with over 150,000 publishers worldwide, using the same optimization processes to help them obtain a higher eCPM and present visitors the most appropriate ads.

• Tribal Fusion
Tribal Fusion is a digital marketing solutions company that drives superior results at all levels of the purchase funnel.  Tribal Fusion is built around dedicated vertical teams that leverage their industry-specific knowledge of “what works” to create fully customized advertising solutions to help companies capitalize on opportunities at every level of the consumer decision process.

3 best CPM above are based on my observation from friends and some blogs reviews. Actually the main things of CPM are TOTAL TRAFFIC and TRAFFIC SOURCE (Country). Because the price of 1000 visitors from US and 1000 traffic from Indonesia are different. So try to get more traffic from US, because the best CPM earning is from US.

OK, I think enough here for this best CPM article. Hopefully this tips are useful for you. Good luck and have a nice day!

How to create vertical Menu

We have learned how to create horizontal menu  before. Now we will try to make a vertical menu. We will make a vertical menu like the image. Ok let's do it

1. Login to blogger then choose "Layout-->Edit HTML"
2. Put the script below before this code ]]></b:skin> or put it in CSS code area.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

You can change the menu color, look at the red text (blue1.gif and blue2.gif). Change it with some color menu below. For example, if you want to choose red color, then the code would be like this :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Vertical Menu Color :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Save your template.
4. Then go to "Page Elements" menu
5. choose "Add a Gadget -->HTML/JavaScript" the insert the code below.

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Note :
- The red code is the links.
- The Blue code is anchor text.
- If you want to add menu, just copy the blink code and paste it.

6. Then click "Save"

Reposition Navigation Buttons in Blog

The navigation buttons or links that are displayed at the bottom of each comment section in BlogSpot blogs enable visitors to switch between new and old posts or move from one post page to another ordered by date and time. These buttons become less of use when number of comments increase too much. Normally readers do not even observe the navigation deep down and this results in loss of precious pageviews. I have always emphasized that value pageviews more than unique visitors because it is indeed pageviews that turns into revenue generating page impressions both for AdSense or any other Ad Network.  You might have seen the More, Next and Previous button showing inside the top black sticky bar on MBT homepage and post pages. It is really not possible to shift a Post data item to any other widget section in blogger. Doing such results in "Data variable not found in dictionary" error or similar.

We played a work around and used Cascading stylesheet Position properties to allocate fixed positions to these buttons anywhere on the page. This is again a unique addition to Blogger Customization and being implemented for the first time. The tutorial today will not only help you change the position of navigation links but will also teach you to install a custom sticky bar just like the one we are using on our blog. We are pretty sure you will find today's tutorial really easy yet delicious!
PS: Tested with Chrome, Firefox, IE9 & Safari.

STEP1: Adding the sticky bar

First comes first. I have already shared a detailed tutorial on adding a stickybar to blogger. Please first install a stickybar on your blogs and then try step#2 of today's tutorial.
Note: The style that I am using on MBT is different from that of the tutorial so if you want a similar color theme then simply copy the stylesheet from MBT source file or let me know to help you.

STEP2:

Now comes the interesting part. What we will do here is simply shifting your current Newer, Older & Home buttons to the top left of the stickybar and replace them with more fancy buttons like the one we are using.  Follow these steps:

1. Go To Blogger > Template
2. Backup your template
3. Click Edit HTML and then check "Expand Widget Templates"
4. Search for the following CSS classes and delete them all: You will find three such classes or more starting with either #blog-pager or .blog-pager

#blog-pager {
------
}

#blog-pager-newer-link {
----
---
--
}
#blog-pager-older-link {
-----
---

--
}

   5.   Now after you have deleted them, add the following code in their place:

#blog-pager {
text-align:center;
}
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-320px;
top:0px;
margin-top:5px;
}
#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-290px;
top:0px;
margin-top:5px;
}
#blog-pager-more-link {
position:fixed;
z-index:9999;
margin-left:-20px;
top:0px;
margin-top:5px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-627px;
top:0px;
}
#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-597px;
top:0px;
}
}

What we did in step4 and step5 was simply replacing your old code with the new one.
    6.   Next search for the following chunk of code:
Note: You are only concerned with finding the two highlighted codes. The code inside them may look different for your template so just finding these two highlighted tags and then follow step7.

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Previous'>&#171; Prev</a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Next'>Next &#187;</a>
      </span>
    </b:if>
<span id='home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</span>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

     7.  Replace the code inside them with the following code as shown below:

<b:includable id='nextprev'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-more-link'>
      <a class='blog-pager-more-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_4BWyPm_IJxYM51n4P19CaoF3Sme-ioO-46z2yvLyjtng_VCl_usF5NhjU8m7gAF2OP5gS7xm5xiAy_ONnUyFmPm2jHbmJMlCom-tjnDIkhUah0a8TFBcVQlRcWexwaMl0m5_vwpcYM3c/s400/more.png'/></a>
      </span>
      </b:if>
</b:if>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSIUEnpjo7H9jArHHa4U0RIxSSvcRm22thKDpOaqI1YqtEG2SF4CgQVIBjlSUSeFqXVVoYY4veJfaxVtBAAOrchAIRqwhVAiI3ba_Bvu6V2PQ6odsLKNW6oiVRjPvHMaAmicv6PsWhPX2C/s400/Previous.png'/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdOkcfeDiKT5itAS2Gw4Op44R6_iLDcua-zvyo4mneFAb4zNC5O3katAkgAfWQr3j9tX0F8Ny3msmmyYR2D7xzbi_pW4z5U1sCOw02kiDosvoPcsirnf461tumFcYfN674be1J6_uXugU8/s400/Next.png'/></a>
      </span>
      <b:else/>
 
    </b:if>
  </div>
  <div class='clear'/> </b:if>
</b:includable>

It was that easy!
   8. All done! Visit your Blog to see it functioning just fine.

How to Add Google Plus Followers Gadget To Blogger.

One of the best perks of using Google is, it has products that seamlessly integrate with each other to provide an easy and comprehensive interface to users. For example, Google Drive can be used to attach files with emails quickly. You can +1 posts outside Google+, and share search results on Google Plus. You can even auto-publish your Blogger blog feed to your G+ profile. And that is by no means the end of it. In fact, Google just announced a brand new feature, the Google Plus Followers gadget for blogger blogs! This new Google Plus followers' gadget for blogspot blogs will provide another layer of integration between your Google Plus profile and your Blogger/Blogspot blog.

The Google Plus followers' gadget

Connecting your Google Plus profile with your blog is a great way to enhance your readership by increasing your followers and engaging better with your audience. You can auto-publish your blog posts on your Google Plus stream so as to deliver your content right where your readers want it delivered. Those readers can then recommend your content directly, which can lead to more exposure. This new Google Plus followers widget is another step towards enhancing your readership and boosting your authority.

This widget will tell the world how many people are following you, and will also show them some friendly faces (different for each person). It also has a follow button by default, which lets users follow your Google Plus profile page with a single click. This will help in getting your content across multiple streams, and to reach more readers on a more personal level through your blog.

Adding this widget to your Blogger blog is really simple. But for it to work, you first have to connect your blogger profile with your Google Plus account. We have detailed the process in a previous post, so make sure you read it first.

• How to automatically share blog updates on Google Plus

Once done, visit the Layout tab on your blogger dashboard, and select "Add a Gadget". You will then be able to see and add this widget easily to your blog.

A note from Google: For those who are using Google Friend Connect followers' widget, they can keep using it, even though Google retired most of Friend Connect services earlier this year. For the time being, it will keep running on Blogger.

How To Add Official Twitter Follow Button to Blogger

Adding Twitter Follow Button to your website, making it easy for you to discover the Twitter accounts of your favorite reporters, athletes, celebrities, and other personalities. Using the Follow Button is as simple as a single click. You can also see the profile and latest Tweets of the account you want to follow by clicking the username next to the Button.

For publishers and brands, adding the Follow Button to your website and using Twitter to stay connected with your audience is a powerful combination. People who follow your account are much more likely to retweet and engage with your Tweets, and to repeatedly visit your website. Adding the Follow Button to your website is quick and easy.

Follow the steps given below add twitter follow button to your blog posts.

Step 1 : Go to "Edit HTML". Click on "Expand Widget Templates"

Step 2 : Scroll down to where you see below code:

<div class='post-header-line-1'/>

Step 6 : Now Copy below code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template, paste the code just before <data:post.body/> .

<div style='float:right;margin-right:5px;'>Your Twitter Code Here</div>

Now replace "Your Twitter Code Here" with the code, taken using below link:

http://twitter.com/about/resources/followbutton

Now save your template and you are done.

How toThe Blogger Navbar To Hover Effect / Peek A Boo Effect

This is quiet a popular post as many dont like the navbar, but it can be useful.The navbar has progressed over the years to include extra options such as bookmarking and of course has the quick links into your account.So how about a hover effect navbar ?.Basically the navbar will only appear when you place your cursor over the space were it sits.Take a look at the demo below and place your cursor over the area were the navbar should be.
Removing navbar and setting peek-a-boo effect are not against blogger T.O.S.We set navbar to hover effect in three easy steps.
Have Hover Effect Blogger Navbar

Follow these simple steps.

1.Select 'Design' then 'Edit Html' for your blog.

2.Find this piece of code in your blogs html :

]]></b:skin>

3.Add the code below just BEFORE ]]></b:skin>

    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}


Click save template and that's it check out your blog with its new hover navbar.

Just remove the code to set the navbar back to standard or to see how to remove it completely

How To Increase Readers To A New Blog

I suppose there is no point in spicing up your blog if you get no visitors.Getting your blog noticed is not an easy task but there are steps you can take to give your blog a push in the right direction.

Remember you need to keep posting to your blog, this is one of the most used phrases but 'content is king'.Try to publish a post once a day or at least five time a week if you are posting more than once a day try leave a gap between the posting times.

Here is the list of Eight ways to get started :

1. Submit your blog to search engines
Click here to add your blog to Google Click here to add your blog to Bing
2. Get a feedburner for your blog :
Click here to see how
3. Join and submit you blog to Blog Directories :
I will cover Blog Directories in a later post for now here's a great post by Loren Baker on the subject :20 Essential Blog Directories to Submit Your Blog To
4. Leave your link :
Were ever you go on the Internet leave your link. When you Comment on other blogs,Forums etc.. leave a link to your blog. Don't spam when commenting if you don't leave proper relevant comments most will be deleted.
5. Traffic Exchange
If your willing to go the extra mile a resource rarely taken advantage of by bloggers is Traffic exchanges. This will automatically drive traffic to your blog. (Don't use traffic exchanges if your blog has AdSense it is against their T.O.S. and could get you banned)
6. Press Release
Why not create a free press Release. A Press release can get you a good result but only when you do it the right way. If you want to try press release, Click Here for an article on how to write a quality Press Release Here's a list of free press release Distribution Sites
7. Tell your friends online on offline !
Twitter-Facebook-Myspace-Bebo-Friendster there are so many social networks were you can connect with friends and let them know about your blog.Check these two posts to have your blog automatically connect with social networks : Feedburner ConnectTwitterfeed Connect
8. Leave your blog link at the foot of all your Emails.
If you like me send lots of funny Emails you can add your blog URL at the bottom of the Email.Most of these emails get sent on again and again and now a link to your blog is been sent with them. Most Email providers like Gmail have a setting to automatically leave a link at the bottom of all your Emails just check out your Email settings.

These are just a short list of ideas and suggestions try to cover as many as you can.I have are more tips to help get visitors to your blog Search Engine Blog Tips.And keep posting make sure there is content there for people to see and remember only good content will bring them back.

How to make dual language blog with one click

Some time ago I wanted to have two languages on my blog - one for my natives, one international. WordPress have a solution called WPML but it's paid solution. Second thing, I have blogger running so long I don't want to transfer.

I've found simple solution!

This method changes main/home/base adress/domain and leads to same URL on other adress/domain. It's also simple installed, just one HTML/JS widget :)

What you should do before:
1. Create two blogs in two different languages.
2. Go to Settings->Search options and make a link to your own site in "page not found code" just in case :) it can look like:
There is nothing in this link, please continue on <a href="http://maridadiagrncy.blogspot.com">maridadiagency.blogspot.com</a>.
Put your adress instead of mine ;)

---
Now in both of them  in Layout, create a widget "HTML/Javascript" and paste this code:

<script language="javascript" type="text/javascript"> 
document.write ("<a href=" + window.location.protocol + "//" + "theotherlanguageadress.com" + window.location.pathname + ">the other language name</a>"); 
</script>

Put adress of the second-language-blog in  theotherlanguageadress.com and name of language used in another blog in the other language name. 

---
Writing new post:
1. go to blog of first language, click New Post
2. put some title
3. put the text, images etc
4. put labels etc.

5. copy all info from points 2,3,4 to New Post in other language
6. publish posts

7. now you can edit post, change titles to the proper ones in both languages, change text in second language post etc
8. don't translate labels!!!

Procedure for new pages is exactly same :)

---

What you need to know:

You must have all links exact same in both languages . That's why you have to publish posts and pages with exact titles (you can edit later, but URL of post will be created at first time). Also that's the reason to have all labels exact same for all languages.

What works? Changing language while reading post, when looking for label, on archive pages.

What is not working? Every URL containing question mark (?) doesn't work. For example links to comments are not working; also changing language while looking for older posts is not -> search works by '?' sign so URLs are being shortened to everything before "?" sign. It's not so important, because most visitors will change language at first; also they probably won't be interested in comments in other language.

How to change maximum number of posts in Blogger label page

Blogger has set a default maximum 20 blog posts in its label page (category page). This may or may not suit your preference or your purpose in setting up the label page. You may want to decrease it to increase download time. Alternatively, you may want to increase the maximum number of posts to show all posts with the same label (category).

If you want to change this default maximum number of post, you will have to edit the template. First, backup your blog template (Dashboard > Template > Backup (at the top right corner) > Download full template > All files)

Now you got to open the template editor (Dashboard > Template > Edit HTML). Tick [ ] Expand Widget Templates

Now use ctrl+F to help you find the following codes:

expr:href='data:label.url'

Replace the above with the following (I used the number 150 because I want all posts to be displayed in the label page. You may use other numbers in place of 150):

expr:href='data:label.url + "?max-results=150"'

Repeat this for all instances of expr:href='data:label.url' that you can find. I think for the Simple template, there will be 3 instances, so the above will have to be repeated 3 times.

When done, save template and exit.

How to Make your Blogger Blog ready for Mobile Phones

As you know, millions of people use their mobile phones to access internet. The mobile internet speed is also very fast these days with 3G's , mobile apps,etc.

From this, we can say many of your readers are coming to your blog through mobile phones..But, if you don't make your blog mobile friendly, .you may lose all your mobile readers because in a mobile phone, a normal blog takes lot of time to load and there are other issues that your site not fitting properly in the mobile screen.

So, here is how to make your Blogger (blogspot) blog mobile internet friendly..

Sign into your Blogger account > Design > Edit html

Find this line..


<b:include data='blog' name='all-head-content'/>

Paste this code below that line...



<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>

Save the Changes!

That's it! Now, your visitors can access your blogger blog through mobile phones with blazing speed...