Thursday, November 22, 2012
Add CSS3 Round Buttons For Website
Wednesday, August 29, 2012
CSS3 Animated Bubble Buttons For Blogger

When i was searching for these bubble buttons for my blog, i found nothing. Bloggers posted on it but their CSS3 codes were not working. Finally i found a script and edited the code and finally it worked. Here is a demo of CSS3 animated bubble button
CSS3 Code Add
Actually above CSS code really too much huge at the same time you have to keep your template clean, so i kept the CSS3 code short
HTML Codes
Big Buttons
<a href="#" class="button big green">Big Button</a>
<a href="#" class="button big orange">Big Button</a>
<a href="#" class="button big gray">Big Button</a>
Medium Buttons
<a href="#" class="button green medium">Medium Button</a>
<a href="#" class="button orange medium">Medium Button</a>
<a href="#" class="button gray medium">Medium Button</a>
Small Buttons
<a href="#" class="button small green">Small Button</a>
<a href="#" class="button small orange">Small Button</a>
<a href="#" class="button small gray">Small Button</a>
Round Shaped Buttons
<a href="#" class="button small blue rounded">Rounded</a>
If you want to show the bubble in middle position then use this html tag <center>YOUR BUTTON CODE</center>
Now all you have to do is to place your link and link text. That's all folks. I made the article with much difficulties. If you liked the article you are warmly requested to share. Only your appreciations can encourage us to continue
Show HTML, CSS, JavaScript Codes in Colored Background In Blogger
Colored Source Code
]]></b:skin>
Implement In Post
Host CSS, JavaScript And Html Files On Google Project Hosting
Sign Up For Google Project Hosting
You Must select "Subversion" as Version Control system.
Download And Configuration TortoiseSVN
TortoiseSVN is a shell control client will be used as Subversion client to upload our static files with proper mime-type. The software was named Tortoise as it is as slow as Tortoise.This document holds all the records for the mime-type of the files to be uploaded. We need to add a list of mime-type according to extension on this file
How To Host HTML, CSS, Javascript
It is a detail discussion on hot linking files using Google Project Hosting. Actually this method is special for hosting HTML pages though you also can host CSS, JavaScript codes too< The whole precess is complex. Any fault during configuration may spoil your all attempt Feel free to ask any question. If you like the article , you can share with your friends
How To Add Scrolling Back To Top Button In Blogger
I got many questions about if is it possible to add scrolling "back To Top" button in blogger.We see many WordPress sites using "Back To Top" button using plugin.But how to do in blogger ? Yes, finally you can now add "Back to Top Button" in blogger.Its very simple like drinking a glass of water. Back to top button has been made with JavaScript and some beautiful back to top image button here
Go To Blogger → Design
Choose HTML/JavaScript widget
Paste the following code inside it
You have to put IMAGE LINK in the code.Here Few image links are given.Choose as your wish of your choices

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSo18XmBUwLtzJne2T3-EYv7b8IaNDqZKBwEpzYMECBp1FwlNOkQAdaamNm-nY_oNDAFHRUhiBFJidxWfeUaMcv-xrxa3oGfBHS4QHDeKrh4Dlda_Qhy1XLBdnWRdOoWGXX1OfLKem9iHP/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsw-GWbK2FSYxwgVdRSRnTyuM7ZbNTdak2DIhj_4C1Al5JtJwCFcsT4sIz7fbWJyQNCf9QWY6WE6F-_YDKGcPSTja1TBVlCWgp2xTyExP8Eqh44_lcVlCeIHXWImVH2BnnE9nStE5Bj0CQ/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiACMT80qbLdpiZEA9dl1BMWQinTn4xu61uGV9RIFy_ma4ctpzmIbUS_24J5xaX9yRTSxdeglRyCfo6xJhLM4XoascNBxVhxfP0ABcGQceRxI6qs2i9UTBPQ5fz51NnUDh0wVtZzkxZ76Ao/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhSidjFbd2SCvty3Ynkjw2nazZLWWXKpEdlAS8ojB89pnSbAUFZD6ax4Bo_xn8cJ5I5RAX4BnRSpLmRnMAgn80Ul2oMiqd7hFbItJlwWPxSFAXxsYTZvatox4mHstiORgYkWKi4Br_y2XK/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ2SIELxzyNmu0btwsM781WITOqXV38eIfXMrWJ1cJKQxBNHalyu0nUDIh-745kYVGpVJIlIyd1-M92O74-tp8enixh8_VAIFzA_kFnpq2qYL07ZZFUhoYYU-ye4nLz_m2uXy374sky32p/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJi6wRPxI36LCd0tUWOfNFS49fKvuXwAh6m2kSq-Oc2x8_aa51LxqRGnC3mtuKi6Oaxaj_wpKxRFdMknIOoBpsh7IhWNqhdpA2YloWyO2sMSUpuMRKOcyrdahQc8Vz143-Jk-N7472i-6c/s400/bttp-8.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFDn5Af65Dbc2vd-jfXaxezQqoHyczZghH30CWC-5EzLyZjIIND0oAD8NhMwQ6NZFk14WlJNSm5_dEc1cfRkMVJmWYMSO7KV_yfmKPlRPh2bX3Wj0OfVo7qDxBuAP3Id0-N4nOQ_UJSqGJ/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimkZEhdl9Q7d-Gn32nKOHEXG7t8sIJ3hLWsR_1uuOt2QgF8h6-JxJo6RUTXvA-64iiRKFtsBAOPJrKQAUi9s8T1vlRPfl1KN7nRM4yxWiC62Bm4WlkL61fQ1OyHT38ItfjP24qXcqR_Cao/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj85LsmK0sjb5-hLkz5UnI5qJb4pc50nKrMzqlicNsRsm8DbPvPbryhHCtx8IdRF53esWvuM5Cw_PsXC-pFjKNlqnTHLheNlVUA4zMfZhIYfpVzP2Z8g0zwVYqULVL1bMQgecR_kHXljH2r/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnYzFzoo_qYGy6zxQR52Mf3vCGYel3GfeCeB9vrEkig0QvpkRANVc4CRb1ymtNdmCy4qri3c6wyCgoyWjObHkVTvRqw5D6vpy2JjrQiQqm07muJWscgBU5AmaVCbQam-88wnD6kopcLFF/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia2KpWHFGlYA9Ro_mD4jDKdfli_kxOjaLzkQT2chaGaHFYS7rr_XfHLQTkjhnSThVXxU9q7naqlfYQfoHncDluL_B0Zb9zjj29i9XQAg3mXtSrxxTs23N3cmP_QoZzLdmgdKqwIuBzR5Fe/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU8JWjIE4itG0-zDWVOUMydiWhk_Owx2EyEs5pcf_PcpOYQTAIyQHx_SbvHHaAHcrtdfDssfxtv40kCsp26jwAKMTpw5GDR8KIJUWqU9fSnuUqaQKjIBUd8Wdc3hsl2G65olUqL27jBjHB/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPShBt1ywIX8OBlOf0JdinBrjIwp6VynPEvHFY4L888uD9kCqrmjMsrod4snE4tIddnTp-1jFgh7wsTW8dXVD4VNGsnIe66la-yBFxRmjocKoAuMOxhDh6PzG0YvmfeGG5UdcUnn7qmVt/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVnQlqztb6yhIcWOFa4C9LyGnUW5ThoGyxaZ9jFe6_yU1SpqwkeFa1jWgwrdQUczFMudGvuXmHu5aya5oxpqZYXXGsh-IsFJwBangPTN624CEPaK-FFf4duniZIbhOtRPcUx-IMDRg48dO/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEWqujQTmEG6cHraI3f2dMBHvJIwrlGezbnORtjGBVwfBIj7ZV7HI-GNFGaoJERkTeRE6svu6YjHMHV3lDjW2UNJTuAzYuMjABoEMn-Q4WTEexBv5h2LmGfSY_7U9sppz2r5Wv0boAvWWy/s400/20.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz4o_4Bt2RMOgmOUmjul5NRSEzBrCzTpTy4vu3elIRXTyVPUDs87Qqj-nSfn7sA7Hj479_lm6f1F_KZqUXWy9b5L6KPiEh6dV1cEZuZIRsyDaJNUH2yBRJmsnq2UhKbVPEd-CYQhsbBfg/s400/Back-to-top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqrpFWCPwiUQH3KGKhNMKBmArPpHcuNYzYZAEB9obk-3_h1DmJXd81iN6WwklOgDI-7iIEn9qqrOMi_WupEWJkuJVpgBo5_XXT857MR5mZc3Gn1bAvT8omRM5vdBo9I4Gxr0JPOsQzsBI/s400/Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhaCyd2Aj0YPGIbpFwVTQoQz8UokOxxbaS7gMkWZk1ffcCO_s1qPrbqS5MAsnLFiRhZ4-6tIHKS1UpJxKeSHmCc2kzNmtxX95-Prw6JPryi2sT8TjKKQr8KSV14HH8nxoT3FyBwByVxmP/s320/backtotop.jpg

http://3.bp.blogspot.com/-bbYVaCr5BOQ/UCPmHvbvBMI/AAAAAAAAAnE/UTZkfl218a4/s1600/back%2Btotop.gif
Now save the Gadget and see a nice smooth scrolling "Back To Top" button
Please share and Comment here if you like.I need your appreciation to continue
Monday, August 20, 2012
CSS Nudge Effect To Blogger Links
Nudge effect is a effect, when you place your mouse on a link, it will nudge. This effect developed with CSS3. Here is a demo of CSS3 nudge effect on blogger links. This effect looks nice on links. You can add this effect all the link or some selected links on blogger

Nudge Effect To All Links
]]></b:skin>
a:link {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}
a:hover {
margin-left: 12px; Adding Nudge Effect To Selected Links
]]></b:skin>
.nudg {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}
.nudg:hover {
margin-left: 12px;
} <a class="nudg" href="http://edutechnology.net/">Blogging Tips</a>
Please like our Facebook Page or Follow us on Twitter or Subscribe
If you like the article, please spend only 5 second to share with your friendsHow To Make All Links Open In A New Window In Blogger
Make All Links Open In A New Window
</head>
<base target='_blank' />
Please like our Facebook Page or Follow us on Twitter or Subscribe
If you like the article, please spend only 5 second to share with your friendsStylish CSS3 Ad Widget For Blogger Like SpiceUpyourBlog
Add CSS
]]></b:skin>
HTML Codes Of Ad Widget
125x125 Ad Widget
<center>468x60 Ad Widget
<div id="bsap_125" class="bsap_125 bsap">
<a href="http://AddURL" class="ad1" title="Ad Title" id="bsa_1451626" target="_blank"> <img src = "http://Imageurl "alt =" CODE "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "http://AdURL"alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad3" title="AdTitle" target="_blank"> <img src = "http://Ad Image URL "alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="Ad URL" title="Advertise Here" class="adhere ad4" target="_blank"> Advertise Here </ a>
</ Div>
</ Center>
<div id="bsap_468" class="bsap_468 bsap">728x90 Ad Widget
<span class="bsap_468 bsap"> <a href="AdURL" title="Advertise Here" class="adhere ad4" target="_blank"> Advertise Here </ a> </ span>
</ Div>
<div id="bsap_728" class="bsap_728 bsap">336x280 Ad Widget
<span class="bsap_728 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ Div>
<div id="bsap_336" class="bsap_336 bsap">Effect On Images
<span class="bsap_336 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ Div>
< img src="ImageURL" alt="AD Name" <img height="125" width="125" />Now replace with your Advertiser URL and Advertiser Image URL You may customize CSS and HTML codes if you want to stylify Ad widget.
Please comment here if any ask. Please take 5 seconds to share the writing with your friends if you like
Saturday, August 18, 2012
Add Stylish Social Subscription Widget With Search Box In Blogger

Please comment here if any problem and thank you
Friday, August 10, 2012
Custom CSS Heading Style For Blogger

]]></b:skin>
Style 1
.post h2
{
background: #FBFBEF;
font-size: 20px;
padding: 4px 10px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #01DF01;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 1px 1px 2px #AAA;
-moz-box-shadow: 1px 1px 2px #AAA;
box-shadow: 1px 1px 2px #AAA;
margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-height: 1;
}
Style 2
.post h2 {
font-size: 24px;
padding: 5px;
color: #fff;
text-shadow: 1px 1px 1px #333;
background: #E3BC50;
border-left: 20px solid #B9942D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 2px #333;
-moz-box-shadow: 1px 1px 2px #333;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height: 1;
} Style 3
.post h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0c12iHEHHB2j79BSGQYIpf64IJoVOgzEMtCgYm4NIEjj5DgQEiW4psJanczqDl7nvE01-v1Vu4_ESBGot9zzKz3oaiskWwEjoWkqhS0_6Tuk9KRknRwYe3cCSSsc4Ht4ao-gFlPyJLug/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}Style 4
.post h2 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h2:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}Style 5
.post h2Different CSS code has different style. Choose any of them as your choice
{
margin-top:10px;
max-width:840px;
padding:6px 2px;
color: #000000;
padding-left:10px;
margin-bottom:10px;
font-size:20px;
font-family:'georgia';
background-color:#F8FAFD;
text-decoration:none;
border-left:10px solid #3873CC;
box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h2:hover {
border-left:10px solid#FF0000;
}
Please like our Facebook Page or Follow us on Twitter or Subscribe
Image Hover Effect With Sliding Panel In Blogger
Step 1 (Add CSS)
<head>
<link type="text/css" href="https://rafiblog.googlecode.com/svn/newjava/SidingPanel.css" rel="stylesheet" />
step 2 (Implement Effect in Images)
<div class="imagepluscontainer" style="width: 263px; height: 199px; z-index: 2;">
<img src="http://4.bp.blogspot.com/-MWjcrO6R-H0/UCOShFDuhSI/AAAAAAAAAmc/XBY-l3uYAhA/s1600/google%2Btips.png">
<div class="desc">
This is just a simple example of image hover effect with sliding panel in blogger
</div>
</div>
Changes
Please share the article with your friends if you like
Thursday, August 9, 2012
Animated CSS3 Buttons For Blogger
CSS3 Buttons In Blogger
<head>
<link type="text/css" href="https://rafiblog.googlecode.com/svn/branches/colorcssdemo.css" rel="stylesheet" />
How To Use Buttons In Post
For Large Buttons
<a href="LINK" class="large awesome">LINK NAME</a>
<a href="LINK" class="large blue awesome">LINK NAME</a>
<a href="LINK" class="large pink awesome">LINK NAME</a>
<a href="LINK" class="large magenta awesome">LINK NAME</a>
<a href="LINK" class="large green awesome">LINK NAME</a>
<a href="LINK" class="large red awesome">LINK NAME</a>
<a href="LINK" class="large orange awesome">LINK NAME</a>
<a href="LINK" class="large yellow awesome">LINK NAME</a>
For Medium Buttons
<a href="LINK" class="medium awesome">LINK NAME</a>
<a href="LINK" class="medium blue awesome">LINK NAME</a>
<a href="LINK" class="medium pink awesome">LINK NAME</a>
<a href="LINK" class="medium magenta awesome">LINK NAME</a>
<a href="LINK" class="medium green awesome">LINK NAME</a>
<a href="LINK" class="medium red awesome">LINK NAME</a>
<a href="LINK" class="medium orange awesome">LINK NAME</a>
<a href="LINK" class="medium yellow awesome">LINK NAME</a>
For Small Buttons
<a href="LINK" class="small awesome">LINK NAME</a>
<a href="LINK" class="small blue awesome">LINK NAME</a>
<a href="LINK" class="small pink awesome">LINK NAME</a>
<a href="LINK" class="small magenta awesome">LINK NAME</a>
<a href="LINK" class="small green awesome">LINK NAME</a>
<a href="LINK" class="small red awesome">LINK NAME</a>
<a href="LINK" class="small orange awesome">LINK NAME</a>
<a href="LINK" class="small yellow awesome">LINK NAME</a>
Ask any question in comment and Thank you. If you feel the article is great you can share
Add Stylish Mouse Pointer Effect To Blogger
Mouse Cursor effect
]]></b:skin>
body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;} Tuesday, August 7, 2012
Spinning 3D Social Media Icons
Spinning 3D social Icon
Tuesday, July 10, 2012
Slide Out Open Heart Bookmarking Gadget To Blogger
Open Heart Bookmarking Gadget
Please just view the demo. I am sure you will be pleased after watching demo
</head>
<!-- Start Heart Bookmarking Gadget Code From http://www.edutechnology.net/ -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Heart Bookmarking Gadget Code From http://www.edutechnology.net/ -->
</body>
And copy and paste the following code just before </body>
<!-- Start Heart Share Code From http://www.edutechnology.net/ -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.edutechnology.net/">Technology Blog</a>
<!-- End Heart Share Code From http://www.edutechnology.net/ -->
The widget is generally placed at the bottom right corner of the webpage but you can place it at the TOP right or TOP left corner.
Bottom to Top: If you want to place the heartfall at the Top corner of the page then simple change bottom: 2%; to top: 2%;
Left to Right: If you want to place the button at the Right corner of the page then simple change left: 2% to right: 2%
Enjoyed the article ? Please share if so. Thank for reading
Monday, June 18, 2012
How To Add Animated Scrolling Recent Post Widget In Blogger
Go to Blogger > Design
Now go to Page Element and click on "Add A Widget" > "HTML/Javascript widget" (position does not matter)
Now paste the following code in the widget and save it
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwid1oqIIVjswIe08n5VEy2xlE_KkEuNH4DGMNIVOk8Jge9rSXuhK5PG7XAfL77m71yq8xydD2ScoB9KZDH3USwbwXEzcupUGMgxXpxujOoNVYwvYE4ajuqFlN5OQtvhtf7T6NpePUujdg/s1600/bdlab-blogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.edutechnology.net/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://rafiblog.googlecode.com/svn/autoscrolling.js' type='text/javascript'></script>
</div>
You will have to change the Blog URL replacing your blog URL
If you like this please share this tutorial
Thursday, June 14, 2012
How To Show HTML,Javascript Code In Blogger Posts
.Please read the full tutorial you will understand
Login to your blogger dashboard and go to Design > Edit HTML
Press CTRL+F and find the following code
Now paste the following code after it
pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}
Your work is finished
Now go to type post and provide your code in the following format
that's mean you have to use < pre >HTMl tag
After this you can publish your post with code and see result
Now you can shoe HTML/javascript code like big bloggers



















