Install an Icon on Our Corner Blog

Hi bro, i want to talk about "how to install an icon on our corner blog side". You can see about the icon on my blog tooo, look at right bottom of this blog, yes you r right, you will see a cute icon with word GoOd LucK. to make it in our blog is very2 easy, we just need for simple steps

Login to your blogger account, n than choose layout option, Click edit HTML

Find tag ]]></b:skin> n than replace it with following code

#corner {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
]]></b:skin>

The last step, place following code before tag </body>

<div id="corner">
<a href="http://t4belajarblogger.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg6k5T5Fq5paVn8aLmPB_CMejMgm9S7XhrEo5CkN4bF5BTzca6CVFMYjXjAim72-EdTO89mpKigg5mNe4PvmQXRpLI76TOBsd0RAAxdxwPqj_1GQLRb_JAOyOaXt3qW-6Ieulwn9vIrZV2/" border="0" /></a>
</div>

So, dont forgt to save your work. Preview your blog now...how easy?

You can to set or customize it, look at the code before tag ]]></b:skin>, right...you can replace "bottom" with "top", or "left" with "right"

So with the code before tag </body>, you can replace it with any/other widget you want, look at following code:

<div id="corner">
<a href="http://t4belajarblogger.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg6k5T5Fq5paVn8aLmPB_CMejMgm9S7XhrEo5CkN4bF5BTzca6CVFMYjXjAim72-EdTO89mpKigg5mNe4PvmQXRpLI76TOBsd0RAAxdxwPqj_1GQLRb_JAOyOaXt3qW-6Ieulwn9vIrZV2/" border="0" /></a>
</div>

You just need for replace red code, ok friend GoOd LuCK! Any question...dont shame to contact/ask me..


hopefully helpful_

Tags: install an icon, corner blog trick, trick to appear an icon on corner, install corner icon with CSS

How to Create Bubble Tooltips with CSS?

Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. Besides that if you have an advanced site in the first place you probably have enought javascript already.

Also with the IE hack for the :hover state, you can do this with elements besides anchors.

If you dont like how it allows you to hover over the tooltip also then you can adjust the padding and top to separate the tool tip from the link.

View Demo here!!!


To create it we just need for the simple steps

Login to your blogger account >> n than choose layout option >> click Edit HTML n don't forget to download template complete (don't be lazy, OK)

So, replace tag ]]></b:skin> with following code

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJabGVMK90LZK8isz9pTkF9sRb159TzBg4ZWVyqsut12ZVBGogwMpx_L4VFWCpbtAxSgnsb-iLNmxKYCznq5NYEC_XfEXSFTu00aQkqKzMLs_UryJ4Gup1VoUnjHeIvWj8pxJEku7Csq8/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja1DYJntj49hEnsV5j24VaFH13xw36LKr_ZW0uWCcKLg8iwUCHWICKbKiqR6kVneX6h0EyzhbdzVPQn_pqkQBmBKpIQre_Qdzzt66aEV34nmpHwpM7TbgfC6hYZqfeHcTT3PD_wzEOLRI/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJabGVMK90LZK8isz9pTkF9sRb159TzBg4ZWVyqsut12ZVBGogwMpx_L4VFWCpbtAxSgnsb-iLNmxKYCznq5NYEC_XfEXSFTu00aQkqKzMLs_UryJ4Gup1VoUnjHeIvWj8pxJEku7Csq8/) no-repeat bottom;
}
]]></b:skin>

N than save your template

The last step, when you want to post a new entri you must use the folowing code

<a href="URL Link here!!!" class="tt">Link Text<span class="tooltip"><span class="top"></span><span class="middle">ToolTips Message</span><span class="bottom"></span></span></a>

Make it easy, n goOd LuCk for you....if you hv any question you can contact me






Trick Source: Trentrichardson.com

Tutorial Style inspired by: Kang Rohman style

Tags: how to create bubble tooltips, making bubble tooltips, bubble tooltips with CSS, simple step to create bubble tooltips

How to Create A Page Peel Effect?

Hi bro, i feel all of you have knwn what the function of page peel effct. with page peel effect We can decorate our blog, you can see it in my blog too... look at top right side in this blog, yas you r right it seemly like following preview



too create it we just need for simple steps

login to your blogger account >> clck Layout option >> click Edit HTML and than put following code before/above tag <b:skin><![CDATA[

<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>

n than put following code before/above tag ]]></b:skin>

#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://software2iqbal.files.wordpress.com/2009/11/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}

n then the last step...put following code after tag <body>

<div id='pageflip'>
<a href='http://feeds.feedburner.com/TutorialBlogDiBloggerBelajarMembuatBlogNgeblogUntukPemulaDanLanjutan' target='_blank'>
<img alt='' src='http://software2iqbal.files.wordpress.com/2009/11/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>

FINISH...now you can view your blog changes, how easy n simple bro...


u can replace my FeedBurner Link with your Own URL, what URL can i put? Up to you, but i suggest to you to replace it with your Feed URL like Rss or Atom, this just my advice...yahaaa GoOd LuCk

Source: Sohtanaka.com

Tags: Create page peel effect for Blogger, page peel effect for your blog, how to create page peel effect, page peel effect with jQuery

How to Add Three Columns in The Footer

We know that Too many gadget in the header n sidebar blog, wll effect the speed of load our blog. Therefore many blogger put their blog gadget in the footer but there is a problem, some blog templates only provide a few footer culomns. and how to overcome this problem?

Of Course! to overcome this problem we just need to add some columns in the footer. How to do it?

1. Login to your blogger account.

2. Click the layout option >> Edit HTML

3. Find code

]]></b:skin>

(you can use Ctrl+F to find it)

4. And then put the codes below above the

]]></b:skin>

code:

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

5. N Then find code below:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

6. So put the codes below under the codes in number 5 (above)

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p> <hr align='center' color='#5d5d54' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>

<div style='clear:both;'/>
</div>

7. Save your Template.



To see the result of your work, click layout option. You ll see:



BEFORE:















AFTER:























gOOD LucK

Tags: Add three columns in the footer, how to add three columns in the footer, trick to adding three columns, editing template to be three columns in footer