Index

1. Make Twitter Badge Or Follow Us On Blogger
2. Create PageNavigation 3000 For Blogger

Make Twitter Badge Or Follow Us On Blogger

In this article I will teach you how to make Follow us Twitter is placed on Scroll Bar your blog or website and this is a simple way to create a twitter follow us with ease and create your design more beautiful and will add a lot of your Followers on twitter.

results will be made :

Step One :

1. Login to Your Blogger Account
2. Choose your site or blog that will be used
3. Select the Layout and click Edit Html

Step Two :

See Picture and Search green code below :

Look for this code>> ]]></b:skin> Find the code in your Blogger templates.
To facilitate the search press ctr-f in your browser.

Before you look for the code remember Expand Template Widget check Agat code found.

Add CSS Code Below and Put Above green Code

Put the existing CSS code below on the green code above.

Put CSS code above code >> ]]></b:skin> And do not remove this code.

Css Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

/* follow twitter */
 
.followme_r .followme{
background: transparent url(http://i853.photobucket.com/albums/ab92/bloggerarticle/blogger-templates/ModernFurnitureTheme/follow.png) no-repeat scroll left top;
position: fixed;
top: 150px;
width: 27px;
height: 130px;
z-index: 5555;
cursor: pointer;
right: 0pt;
color: transparent;
}
.followme_l .followme{
background: transparent url(http://i853.photobucket.com/albums/ab92/bloggerarticle/blogger-templates/ModernFurnitureTheme/follow.png) no-repeat scroll right top;
position: fixed;
top: 150px;
width: 27px;
height: 130px;
z-index: 5555;
cursor: pointer;
left: 0pt;
color: transparent;
}
.followus_r .followme{
background: transparent url(http://i853.photobucket.com/albums/ab92/bloggerarticle/blogger-templates/ModernFurnitureTheme/follow.png) no-repeat scroll left top;
position: fixed;
top: 150px;
width: 27px;
height: 130px;
z-index: 5555;
cursor: pointer;
right: 0pt;
color: transparent;
}
.followus_l .followme{
background: transparent url(http://i853.photobucket.com/albums/ab92/bloggerarticle/blogger-templates/ModernFurnitureTheme/follow.png) no-repeat scroll right top;
position: fixed;
top: 150px;
width: 27px;
height: 130px;
z-index: 5555;
cursor: pointer;
left: 0pt;
color: transparent;
}

Then Add Widget Html and JavaScript

Add the existing code below:

1. JavaScript Code To Follow Us On Left Your Site

Add the existing code below:

1. JavaScript Code To Follow Us On Left Your Site

1
2
3

<div class="followme_l">
<div class="followme" onclick="window.open('https://twitter.com/Your-Twitter-Account')"></div>
</div>

2. JavaScript Code To Follow Us On Right Your Site

1
2
3

<div class="followme_r">
<div class="followme" onclick="window.open('https://twitter.com/Your-Twitter-Account')"></div>
</div>

Note : if code above does not work please check quotation marks in code above link your twitter account.

Or Download All Code Here

Then use the Add Widget Html and JavaScript to add code to your blog

Create PageNavigation 3000 For Blogger

Did you ever use the Page Navigation 3000?? This is a navigation that is used for bloggers and you can see this navigation demo Here. And navigation is navigation that is very new but very well liked because navigation is very simple but useful navigation and quality is very good because it has a Scroll Bar that allows you to move to find the Page or page that you want. And in this article I will teach you how to make this Page Navigation.

Result that will be made :

The steps to be made are :

1. Login to your blogger account
2. Select a blog that will be used
3. You must have a minimum of 10 articles for this Navigation function properly.
4. Save Templates or your blog before you add this Navigation Page.

See Picture …

Look for this code >> ]]></b:skin> Find the code in your Blogger templates.
To facilitate the search press ctr-f in your browser.

Before you look for the code remember check Expand Template Widget that the code is found.

Add the CSS code below and put above green code

Put the existing CSS code below on the green code above.

Put CSS code above this code >> ]]></b:skin> And do not remove this code.

Css Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

.paginator {
font-family: Trebuchet MS;
margin-top:60px;
font-size:1.1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#0AA5D5;
font-style:normal;
font-weight:bold;
}
.paginator .scroll_bar {
width:100%;	height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%;	height:3px;
background:#E8E8E8;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#0AA5D5;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

JavaScript Code

Then after you successfully add the above css code will add the JavaScript code please see pictures …
This code is usually located at the bottom of your templates …

See code JavaScript bellow and copy to your blogger.

1
2
3
4
5
6
7
8

<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://all-in-one-blogger-widget.googlecode.com/files/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

Add this JavaScript code above the code is green.
Green code above should not be deleted.

The meaning of this code in the JavaScript code is:

1. var postperpage=5;
Many Posts are shown as many as 5 units.

2. var numshowpage=10;
Scroll bar will appear if exceeds 10 Number of Page Navigation.

After the code is successful press SAVE and next steps see the picture …

see the arrow and you can change how many posts would you display on your blog main page and adjust the number of digits with JavaScript code var postperpage=5; to all be perfect and effective. Final Result Click Here and see the navigation.

If you do not succeed to make this simple navigation then you only need to leave a message on this article and I will provide the best solution for you and all of the above codes are very often I used when creating a blogger Navigation tempates with a simple design. So you can make this navigation if you do not have a good navigation for your blog. And Author this Navigation is Abu Farhan. If your change all code above please contact author this navigation.