Spiga

Pages

Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Create Favicon With Iconarchive

Generally favorite icon or Favicon emerged in in the web address and will be kept when the visitor kept him in the bookmark or favorite menu available in the web browser.
Favicon that was provided by each provider's blog generally same in each of the owner of the account, and if you wanted to replace Favicon and to be seen was different from the user that was other blogs, you could make use of iconarchive.com/
How to create Favicon using Icon archive
you'll need to add the following code to your Blogger template between the
<head> and </head> tags
<link href='http://imagehost.com/yourfavicon.ico' rel='shortcut icon'/> <link href='http://imagehost.com/yourfavicon.ico' rel='icon'/>
Change the code in green with URL of your favicon from iconarchieve.com
(for example just like this picture, copy link location and then change the code in green)
READ MORE - Create Favicon With Iconarchive

Create Marque Box


Apart from Textarea Box, Marquee Box could accommodate many link in the crowded place. However the box blog roll this be different from textarea box, because of the box this one did not have rollbar like Textarea Box. Link or the contents will in this box move/went, could be vertical or horizontal.

MARQUEE BOX



Bookmark and Share

Add to Technorati Favorites







How To Create Marquee Box:


First Go to Add Elemnet > HTML Java Script

Copy and paste this code
<MARQUEE align="center" direction="up" height="100" scrollamount= "2"

onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>



Information:
The Code "up" = the movement direction, you could change it with down, left, right
If you changed it with the horizontal movement (left or right) then eliminated the <br /> code
The Figure "100" showed high from the Marque Box box. Even more of his figures then increasingly high also the Marque Box measurement.
READ MORE - Create Marque Box

Create Textarea Box

The Textarea box could be used by you for various needs, I used to keep my "Friends links", or you could pass him with baner the friend, was unlimited only until there, Textarea box also could save at your blog and more benefits, if you creative used Textarea Box
How to create Textarea Box

Copy this code to Layout > Add Element > HTML/Javascript

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 100px;
height: 100px;
text-align: center; ">

link1 <br />
link2 <br />
link3 <br />
link...

</div>

Note:
the Code width: 100px; and height: 100px; was the wide and long measurement the box, you could change it with the measurement yg you liked.
the Substitute for the article "link1,link2, link3 etc." with your link list or your friends banner
If wanting your Textarea box like my property (Frind Links) then you must only remove the <br /> code

SAVE
READ MORE - Create Textarea Box

Change Text Size at Hover Link



When you pointing mouse cursor at a link, the underline will appear on the link but the size of link same like the other text, just like the ordinary blog
But if you want different appearance link on your blog, you can change the link size, so when the cursor pointing at the link, than the link size will bigger than the other
How to Hack:

1. Layout > Edit HTML and find this code

a:hover {
color: $mainVisitedLinkColor;
Text-decoration:underline;
}

2. Change the code become like this:

color: $mainVisitedLinkColor;
Text-decoration:underline;
font-size: 125%;
}

you can change the red code size as you like

Oh one more thing, you also can remove underline at link text by change the blue code from underline to none, just like this
a:hover {
color: $mainVisitedLinkColor;
Text-decoration:none;
font-size: 125%;
}
and than click Save Template
there you go two hack at the same time, it's easy
READ MORE - Change Text Size at Hover Link

Auto Hide Navbar

We can hide navigation bar or navbar with little configuration on HTML code, so when mouse not pointing at navbar, the navbar will be hide. With this simple hack we can save space on our blog
How to Hide Navbar:

First:
 Enter Dashboard > Layout > Edit HTML

Second:
Find this code

body {
Third: copy this code
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100}
Put the blue code upper tthe red code and than click SAVE TEMPLATE
READ MORE - Auto Hide Navbar

Create Read More

Usually new post will be displayed in first page of the blog, but when your post is to long, it's can make your blog page is to crowd.
But if you want your post displayed only just few sentence and following by “Readmore” link following this steps

Important : backup your template!!

How To Create Readmore :


First :
After Login to Blogger open Layout > Edit HTML don't forget to giving mark on “Expand Widget”

Second :
Copy this code :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

Third :
Find this code
<div class='post-header-line-1'/>
<div class='post-body'>

Paste the blue code and put that code under the red code above

Fourth :
Find this code <p><data:post.body/></p>
and then copy-paste this code
<a expr:href='data:post.url'>Readmore</a>
</b:if>
and put the code under the green code (<p><data:post.body/></p>)

Tips : Readmore can change by other word such as “Next”, "ReadMe" or else

the complete code should be like this :
<div class='post-header-line-1'/>
<div class='post-body'&gt;<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore...</a>
</b:if>
<div style='clear: both;'/>

Fifth :
After saving the code, open Settings > Format and find “Post Template” after that enter this code :
<div class="fullpost">
</div>
don't forget to save

Sixth :
in this steps I'll try to explain how to use “Readmore” at the posting page. There is little different when post your article using “Readmore”, when you are going to post your article, in post page, you will find 2 tab “Edit HTML” and “Compose” choose Compose and you will find this code at the text box
<div class="fullpost">
</div>
this is the example :
You have article with 10 sentence lke this
Sentence 1,2,3,4,5(“Read more” will be put in here)6,7,8,9,10
How to do that ?
Sentence 1,2,3,4,5<div class="fullpost">,7,8,9,10</div>
and your post will be like this
Sentence 1,2,3,4,5 Readmore
READ MORE - Create Read More

Search Here

Custom Search