Essential Tutorial

How to Add Follow Button [Method 2]

2011-06-09T12:10:00.000-07:00

Wow, never expected to get quite a lot of messages, I'm glad this blog helped you ^^
Ah , here another way add a follow button . I had posted an entry about adding a follow button but that had image for your readers to click and then a window pops up.

But this one is different. Check it out. ^^

Go to dashboard > template
Copy this code:

<a href="http://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID">+FOLLOW ME</a>

Paste the code onto somewhere. (if you don't know much just paste under your profile descripstions etc)
Done. :)

Tips

You Blog ID can be found on dashboard, and more on your link bar.
You can change the orange words to anything you like.

Still don't get it? :(
Leave a message on shoutmix. I'll help you! ^^

Contest !

2011-06-05T06:38:00.001-07:00

have to join, have to join,
lol, you have to try your luck no matter what x33

try it here ! :D

How to Enable Permalink URL

2011-03-09T22:53:00.000-08:00

Another accomplishment, if you do not understand what is this tutorial then let me give an example. Usually, blogskins doesn't active the thing where you click this blog post title and leads you to another page with it's permalink URL.

So now, I found a way and this is so awesome .! -_-"

Go to Dashboard>Template
CTRL+F to find this code.

<$BlogItemTitle$>

Highlight it and replace with this code,

<a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a>

Click "Save Template Changes" , done!

How to Add Facebook "LIKE" Button on Each Blog Post

2011-03-09T07:10:00.000-08:00

Ok, I found this after a year. I thought this is impossible at first, but NOOOO . <3
Argh, so effing happy to find this! ^^~~~

This is the example. :D (Click like haha, of course it's gonna be wrong here.)

Go to Dasboard>Template
CTRL+F and find,

<$BlogItemBody$>

Paste this code below the code given.

<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&layout=standard&show-faces=true&width=490&height=70&font=arial&";action=like&colorscheme=dark; colorscheme="dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:490px; height:70px"></iframe>

Click "Save template changes" . DONE, AGAIN. ^^

How to Add a Follower Box

2011-02-18T02:39:00.000-08:00

This tutorial is dedicated to Khairisa, this is a pretty simple thing to do. I hope you can understand what I am showing! <3 This tutorial will show you how to add a widget which will show you the number of Followers you have in your blog.

Example.

Go to google.com/friendconnect.
After logging and so on, they will lead you to this page. Click on "ADD THE MEMBERS GADGET"

Then, you can customize how you want your Follower Box to look like.

You now can click on the "Generate Code" button.

Go to Dashboard>Template
Paste the code wherever you want it to be. And that means inside <body></body> not <head></head> ! ^^

Relink Layouts !

2011-02-03T20:10:00.000-08:00

Sometimes, it's better if you leave your original link and just make a new URL at another blog. Why? Because if you post your link to many other sites and suddenly you changed the URL wouldn't that be waste of your time?
So now, people make relink skins. :D

http://www.blogskins.com/info/296613/
http://www.blogskins.com/info/232801/
http://www.blogskins.com/info/243760
http://www.blogskins.com/info/340418

If you know any more relink layouts leave me a feedback down here!

How to Disable Background Image Moving

2011-02-02T20:05:00.000-08:00

It's pretty easy but yeah, ^^.

Go to Dashboard>Template

CTRL+F to find this code,

<head> OR <title> OR </style>

Paste this code below,

<style type="text/css">
body
{
background-image:
url("IMAGEURL");
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>

Click "save template changes" and it's done. :D

TIP: As long as the code is inside <head></head> it's going to work! Don't put the codes inside another code.

How to Disable Highlighting Text

2011-02-02T02:24:00.000-08:00

So I've given you the codes to disable right clicking but to be honest that's NOT enough! I can drag the image to a new window and get the URL link, yeah, I'm a stealer sometimes too XD But I keep it to myself ^^

This is a code that will ensure that everything inside you blog will be safe and sound. :)

Ctrl+F to find ..

<head> ORR <title>

Paste this code below it,

<SCRIPT TYPE="text/javascript">

</SCRIPT>

Click "Save template changes" DONE!

Now I have to flee, Let's Go Dream Team is on tv!

How to Disable Right Click

2011-02-02T02:17:00.000-08:00

Sometimes it's annoying that people copy and take your stuff then they didn't credit you. So here's a code that will disable right click! :)

Ctrl+F to find this code.

<head> ORRR <title>

Then paste this code below it.

<SCRIPT TYPE="text/javascript">

</SCRIPT>

Click "Save template changes" and no more copy&paste! :D

TIP: There's 2 main chambers.
<head></head>
<body></body>

Mainly </script> is inside <head>.

Classic Template is hard.

2011-01-31T23:34:00.000-08:00

Before you decide to change to Classic you just need to know that this is not easy. Well, it is once you know the HTML basic. :)

There is no click and drag, there's not automatic background upload, it's all up to you. Nothing will help you except for those codes. I myself am not very fond of html codes but I think I got the idea of all this now. ^^ Don't worry, 3 months after you use Classic template, it will be as easy as pie!

Don't give up, okay!

How to Set Width&Height for picture.

2011-01-17T20:30:00.000-08:00

Here is the code. :)

You can change to whatever you like. Here is what it looks like before and after you set the w/h!
* Just erase the italic code, if you don't want to determine the width the height. <3

Before

After

How to add Image Cursor

2011-01-16T07:57:00.000-08:00

It's fun to have a colorful cursor for your blog! I had a hard time adding this to my blog and it's actually TOO easy. =_="

Go to Dashboard>Template

CTRL+F to find this code,

</style>

Paste your cursor code below the code given.

Click "Save template changes" , DONE!

How to Add a Sparkle Cursor

2011-01-15T01:03:00.001-08:00

Sparkles <3

Go to Dashboard>Template
Paste this code above <html>

// <![CDATA[

var colour="pink";

var sparkles=100;

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);

}

// ]]>

</script>

Click "Save template changes" and it's done~ You can also change the color your want for your sparkles on the red font. ^^

How to Add Archive Drop Down Menu

2011-01-15T01:02:00.001-08:00

Hey there, this is a new template I got~ I hope you like em!

Go to dashboard>Template
Search for this code:

<BloggerArchives>
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</BloggerArchives>

Replace it with this code.

<option value=''>BLOGGER ARCHIVES</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>">histories: <$BlogArchiveName$></option>
</BloggerArchives></select><br></center>

Click "Save Template Changes" and it will look like this! :D

Yay!

Tips

+ You can change whatever you like on the red words. :3

+ As you can see, <option value="</option> made it turn to a drop down menu. ^^

How to Add a Follow Button

2011-01-15T01:01:00.003-08:00

Most Classic Templates that you get from blogskins.com doesn't have a follow button.. If you want to follow a blog, you have to go to Dashboard>Click a blue "ADD" button*it's under the Reading List*.

Click the "ADD" button to follow a blog.

Customized "follow button".

Click "ADD" to follow a blog.

This is at the top of the blog's website.

Go to Dashboard>Template.
Paste this code anywhere you like, under your profile, music, etc.

Click "Save template changes". Done! :D

Tips

+ Your blog ID can be found anywhere when you click Dashboard, Posting, Settings and more. ^^

Blog ID can be found on your address bar.

+ Ask for permission if you found a follow icon at any blog!

How to Get a Blockquote

2011-01-15T01:01:00.001-08:00

I'm bored right now, D: So I'm just going to show you how to put a blockquote like mine! Go to http://www.akuajarkamu.blogspot.com for more!

This is a blockquote.

You can just highlight the sentence you want to blockquote and just click the button in the red square. *credits to akusyamira.blogspot*

Classic Template.

Go to Dashboard>Template.
CTRL+F to find this quote

<style type="text/css">

Got it? Usually, there's only one. But for my hompy, there's two of them. Below the code I showed, there's some keywords like body, hover, scrollbar, etc
Scroll down, until you see the code like this:-

u, underline { text-decoration:none; border-bottom: 1px #c1b097 double;}
b, strong { color: #c1b097; text-decoration:bold;}
em, i { color: #dc3a86; text-decoration:italic;}

It might be different from yours, but as long as it has the similar red keywords, then that is right.
Copy this code:-

blockquote {
margin: 1em 20px;
padding: 10px;
border: 2px dashed #555;
background:url(BG Blockquote URL);
background-repeat:repeat;
color: #000000;
text-align: justify;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Paste it below the second code I gave to you.
Click "Save template changes" and it's done!

I'm not sure if you succeed, this is how I do it. ^^ You need to know the basic of HTML codes. If you still did not get it, I can help you if you want me to, just paste the html code between <style type="text/css">____</style> on my comment box.

New Version Template

Now this is much easier! Phew!

Go to dashboard>Design>Edit HTML
Tick "Expand Widget Template"
Find this code,

.post blockquote {

Highlight all the code, and change it to this:-

.post blockquote {
background: url(bg blockquote url) repeat;
padding: 6px;
margin:1em 20px;
border: 2px solid #CCCCCC;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
}

You can put a background wallpaper on the red font and you can change anything you want on the purple font. ^^

How to Add a Youtube Audio

2011-01-15T01:00:00.001-08:00

This was a total mystery for me, until I founded this tutorial by akusyamira.blogspot ^^~

Here it is!

Go to http://www.youtube.com.
Search a song you like.
Below the video, you will see a few buttons "like" "share" "embed" etc.
Click on the "embed" button. You can choose a theme color for you audio tab.
Copy the codes given.

Go to dashboard>Template
Usually, the person who creates the skin will provide a space for you to put music. CTRL+F to search for keywords like audio,music or link.
Paste the code given.
Then, change the width and height. There's two of them at the beginning of the code and at the end of the code. Change both of them!
Here is an example of the code.

BEFORE
<object width="200" height="25"><param name="movie" value="http://www.youtube.com/v/STUBM6yrUqY?fs=1&hl=en_US&rel=0&color1=0x3a3a3a&color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/STUBM6yrUqY?fs=1&hl=en_US&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="25"></embed></object>
AFTER
<object width="200" height="25"><param name="movie" value="http://www.youtube.com/v/STUBM6yrUqY?fs=1&hl=en_US&rel=0&color1=0x3a3a3a&color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/STUBM6yrUqY?fs=1&hl=en_US&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="25"></embed></object>

Click "Save template changes", mission complete! :D

I want it to autoplay.. How?

Easy, just add &autoplay=1 after the video ID. For an example:-

BEFORE
<object width="200" height="25"><param name="movie" value="http://www.youtube.com/v/STUBM6yrUqY?fs=1&hl=en_US&rel=0&color1=0x3a3a3a&color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/STUBM6yrUqY?fs=1&hl=en_US&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="25"></embed></object>
AFTER
<object width="200" height="25"><param name="movie" value="http://www.youtube.com/v/STUBM6yrUqY&autoplay=1?
fs=1&hl=en_US&rel=0&color1=0x3a3a3a&color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/STUBM6yrUqY&autoplay=1?fs=1&hl=en_US&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="200" height="25"></embed></object>

Done!

Your Youtube audio will probably look like this!

How to Add an Icon Next to Title

2011-01-15T00:59:00.001-08:00

I played with my html, and found out how to add an icon next to your post title.
Well, here it is!

<blockquote>
<div style="text-align: center;">
<a href="http://2.bp.blogspot.com/_qDw5-GkrQWg/TPUGwnoM7JI/AAAAAAAAAAo/vVtyjjJFEd4/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span class="Apple-style-span" style="color: black;"><img border="0" src="http://2.bp.blogspot.com/_qDw5-GkrQWg/TPUGwnoM7JI/AAAAAAAAAAo/vVtyjjJFEd4/s1600/Untitled.png" /></span></a></div>
This is where your icon supposed to be. On the left of your post title.</blockquote>

<ul>
<li>Go to dashboard>Template</li>
<li>Ctrl+F to find the <span class="Apple-style-span" style="color: orange;">code</span> below:-</li>
</ul>
<blockquote>
<span class="Apple-style-span" style="color: orange;"><$BlogItemTitle$></span></blockquote>
<div>

</div>
<div>
<ul>
<li>Paste this <span class="Apple-style-span" style="color: magenta;">code</span> before the <span class="Apple-style-span" style="color: orange;">code</span> above.</li>
</ul>
<div>
<blockquote>
<span class="Apple-style-span" style="color: magenta;"><img src="icon url"></span></blockquote>
</div>
</div>
<div>
<ul>
<li>Click "save template changes", it's done! :)</li>
</ul>
<div style="text-align: center;">
<i>Tips</i></div>
</div>
<div style="text-align: center;">
<i>+ Before the first <span class="Apple-style-span" style="color: orange;">code</span>, it's either <u><div class="title"></u> OR <u><div class="entt"></u></i></div>
<div style="text-align: center;">
<i>+ The icon can be<u> animated </u>too.</i></div>

How to Enable a Comment Box

2011-01-15T00:58:00.000-08:00

This is the hardest thing for me to find.. It took me like 3 hours? I asked fahamokha90, Blogskins, Google, other websites and nothing works! Fortunately, this fellow user on Blogskin shared a link. :D

Hehe, here it is!

Note-to-self

Go to dashboard>Settings>Comments
Make sure the "Comments" are "Show".
Make sure the "Comment Form Placement" are "Full page" or "Pop-up Window". Why? Look at the sentences in the red square.

Done? Ok!.

Go to dashboard>Template
Ctrl+F to find the code below.

For me, there's two of them that has <blogger>/</blogger> . Paste this code below <blogger> OR Paste this code above </blogger>

<BlogItemCommentsEnabled>
   <a href="<$BlogItemCommentCreate$>" 
   <$BlogItemCommentFormOnClick$>>
   <$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>


Click "Save template changes" and you're good to go!

TIPS

+ You can type anything you want on the comments.

+ <blogger></blogger> is like a house. The <blogger> is the main entrance.

The </blogger> is the exit.

So in between, is where the codes belong. :)

 Just like the other codes!

Source - Here

How to Add a Hit Counter - Ads Free

2011-01-15T00:53:00.001-08:00

Wee~ Founded a hit counter that has no adds. Hating the commercials, but they need living too. :/

Erm, yeah, let's start!

<ul>
<li>Go to <a href="http://www.tinycounter.com/">http://www.tinycounter.com</a></li>
<li>Choose whatever you want, and then copy the codes.</li>
<li>Next, go to dashboard>Template.</li>
<li>Put anywhere you like!</li>
</ul>
<div>
This is where I put mine..</div>
<div>
<ul>
<li>CTRL to find, sidebar/profile/etc.</li>
<li>Paste the code underneath your profile etc . </li>
</ul>
<div style="text-align: center;">
<i><u>Tips</u></i></div>
</div>
<div style="text-align: center;">
<i>+ If you have an ad below your counter. Don't even think of removing it.</i></div>
<div style="text-align: center;">
<i>+ To make it look neater, center it! </i></div>
<blockquote>
<div style="text-align: center;">CODE COUNTER</div></blockquote>

How to Get a Favicon

2011-01-15T00:52:00.000-08:00

Yeah, I found this out yesterday when I was editing my Kpop blog, http://www.akucintakpop.blogspot.com

It was pretty hard for me, since I had to open so many blogs! :/ I finally found the right one ! I don't remember who though but many thanks!

This is a favicon if you're wondering.

Go to dashboard>Template
CTRL+F to find the code below:-

<$BlogMetaData$>

After that, paste this code next to it.

< link rel="shortcut icon" href="favicon url" type="favicon" />

Click "Save template changes". :)

What if there is no <$BlogMetaData$> ?
I've suffered this problem, ugh, but I found a solution to it. ^^

CTRL+F to find this code,

<style type="text/css">

Usually, there's two of them. Paste <$BlogMetaData$>< link rel="shortcut icon" href="favicon url" type="favicon" /> between the code. *Put above the 2nd code of it.

Tips

+ Make sure the favicon is 16x16.

+ You can get favicons at http://thefavicongallery.com/
+ < link rel, turn to, <link rel

IMPORTANT: How to Get a Classic Template

2011-01-15T00:51:00.000-08:00

For me, I always go to blogskins.com because they have so many templates for those who uses "Classic Template"! Blogger's template are really boring and dull. But here, they have creative templates made by netizens.

Go to, www.blogskins.com
Click on any templates you like.
Scroll down, and you will see "ACTIONS". There will be 3 options, choose "Blogger Main" . (You can also preview it before downloading the file)
The file will be downloaded. Click on the file. You will see the HTML codes in "NOTEPAD".
Highlight all the contents by CTRL+A. Then Copy it by CTRL+C.
Go to dashboard>templates.
Then, paste by CTRL+V.
Click "Save templates Changes" and enjoy your new template!

IMPORTANT: How to Revert Back to Classic Template

2011-01-15T00:48:00.000-08:00

Hey, this is my first ever tutorial. So if I made any mistakes, then I'm truly sorry. :(
I only provide tutorials for the "Classic Template" but I do accept for the new version of Blogspot! ^^

Here is a tutorial on how to revert back to Blogspot's Classic Template.

Go to dashboard>Design>Edit HTML.
At the bottom, there will be a text link that says "Revert to Classic Template". Click on it!
A small notification will ask you to click "OK" or "Cancel".
If you click "OK" it will bring you to the "Classic Template"'s HTML.

You have to do this if you want to have html code template. If you do not do this then this blog will not help you at all.