How to Add Rainbow Color Effect For Your Links In Hover For Blogger

Hi friends! Rainbow color effect will give random colors to your link on hover. This widget works based on simple JavaScript. Once it’s applied, all links on the page exhibit a rainbow effect onmouseover.

How to Display Scripts and Codes in Blogger Posts

How to display the Scripts and Codes in blogger post To show codes in blogger post in special section.Suppose we want to show a simple code like bellow<h1>Related posts </h1>
but it is HTML Code so it will display like bellow

 

Related posts

To avoid this we show codes in special Section amd make it friendly to post

Just follow these steps

1. Login to Blogger dashboard
2. Go to Design Section
3. Then select Edit HTML tab
4. Find  ]]> tag
5. Replace it with Bellow Code of section

.codeview {<br /> margin : 15px 15px 15px 35px;<br /> padding : 10px;<br /> clear : both;<br /> font-family : "Courier New", "MS Sans Serif", sans-serif, serif;<br /> line-height:1.6;<br /> background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDlb-o_jaib93gAP4nuGzv8Rfr6-RZGYpS42HgNudzy1maFnqlaRd7C0fB2mKu1GgmI1rFT6PGLLsQ6KmvT01zEXvTSBAkLkEb7IbFdoKeMOP1RC_wiXgH6U9t4yQKVtTARScCNCocU4p8/s1600/trick+Builder.png') no-repeat scroll bottom right #EFFBF5;<br /> border-top : 1px solid #eeeeee;<br /> border-right : 2px solid #cccccc;<br /> border-bottom : 2px solid #cccccc;<br /> border-left : 1px solid #eeeeee;<br /> }<br /> .codeview li {<br /> line-height : 24px;<br /> color : #333333;<br /> margin : 0;<br /> padding : 0;<br /> }<br /> ]]></b:skin>

   6. Now save your template.

While creating any Post, If you want to show the special Code in post that CSS code or JavaScript code, what ever may be , Go to Edit HTML tab in Post and create Div section and put your code in Div section like bellow and publish Your Post

<div class="codeview"><br /> <!-- Put Your Special code here --><br /> <br /> </div>

Note:- Before Putting code, Make it Friendly to post Using these tools

1. HTML Entities Encoder / Decoder

2. Postable

3. Centricle Encode / Decode HTML Entities

a sample preview

.codeview {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
line-height:1.6;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDlb-o_jaib93gAP4nuGzv8Rfr6-RZGYpS42HgNudzy1maFnqlaRd7C0fB2mKu1GgmI1rFT6PGLLsQ6KmvT01zEXvTSBAkLkEb7IbFdoKeMOP1RC_wiXgH6U9t4yQKVtTARScCNCocU4p8/s1600/trick+Builder.png') no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
line-height : 24px;
color : #333333;
margin : 0;
padding : 0;
}
]]>

Want any Help Ask me comments..

Add Floating Facebook Share & +1 Button Next To Posts in Blogger

Ever wondered to create a Mashable type floating sharing widget for your blogger blogs? There you have it today! We released a sliding, we are releasing yet another version of a floating widget which contains the best social buttons like Facebook Share/like, Twitter and Google +1 button. All in one. I have not used any scripts this time and this widget works purely on CSS and HTML and is fully compatible with all major browsers. You can see this sticky widget to left of my blog post. I have made sure to keep the installation process as easy as possible so be confident to try this one out to better increase your social engagement and thereby your page views.

Adding The Sticky Floating Widget Next To Blogger Posts

1. Go To Blogger > Design
2. Choose a HTML/JavaScript widget
3. Paste the following code inside it, 

<style> /*-------Trick Builder Floating Sharing Widget------------*/ #floatdiv { position:fixed; bottom:15%; margin-left:-70px; z-index:10; float:left; padding-bottom:2px; } #tbsidebar { background:#fff; border-top:1px solid #ddd; border-left:1px solid #ddd; border-bottom:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding-left:5px; width:60px; margin:0 0 0 5px; } .fb_share_count_top {width:52px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style><br /> <br /> <br /> <br /> <br /> <div id="floatdiv"><div id="tbsidebar"> <table cellpadding="1px" cellspacing="0"> <tr> <td style="padding:5px 0px 0px 0;"><br /> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br /> </td> </tr> <tr> <td style="padding:5px 0 2px 0;"><br /> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script><br /> </td> </tr> <tr> <td style=" padding:5px 0px 0px 0px;"><br /> <br /> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script><br /> <br /> <g:plusone size="Tall" expr:href="data:post.url"><br /> </g:plusone></td> </tr> <tr> <td><br /> <p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://trickbuilder.blogspot.com/2012/02/add-floating-facebook-share-1-button.html">Widgets</a></p> </td> </tr> </table></div></div>

 
    4.   Save your widget and drag it just below the post body as shown below,

  
    5.   Now finally Click the save button at the top right corner and you are all done!

View your blog to see it hanging just to the left of your blog post body.

 

Customization

To align the widget more towards the left or right then edit this value margin-left:-70px;  Decreasing this numeric value will shift the widget to the right and increasing the value will shift it to left.
To Change the background colour of the floating widget then change this background:#fff;
Use our color generator or colour chart to select a colour.
If you wish to show the widget only on post pages and not the homepage then follow these steps.
Give this floating widget a temporary title then do this

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Check the Expand Widgets Templates Box
4. Search for the title of the widget
5. The code for the widget will look something similar to this one,

<br /> <br /> <b:widget id='HTML8' locked='false' title='WIDGET-TITLE-HERE' type='HTML'><br /> <br /> <b:includable id='main'><br /> <br /> bla bla bla bla<br /> <br /> </b:includable><br /> </b:widget><br />


Once you find the title then add the following two green bolded codes just below and after the bolded black text. For example if you wish to show a widget at Homepage only then do this,

<b:widget id='HTML8' locked='false' title='WIDGET-TITLE-HERE' type='HTML'><br /> <br /> <b:includable id='main'><br /> <br /> <b:if cond='data:blog.pageType == "item"'><br /> <br /> bla bla bla bla<br /> <br /> </b:if><br /> <br /> </b:includable><br /> </b:widget><br />

Save your template and you have successfully stopped the widget display on homepage and allowed it on all post pages.

AddThis is personalized to increase sharing

 

 nstall AddThis (it's free!)

Paste this code into your site where you would like your sharing tool to appear.



<!-- AddThis Button BEGIN --><br /> <div class="addthis_toolbox addthis_default_style "><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><br /> <a class="addthis_button_tweet"></a><br /> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a><br /> <a class="addthis_counter addthis_pill_style"></a><br /> </div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f3fa65a12459b26"></script><br /> <!-- AddThis Button END --><br />

More >>>