WindTricks: Blogs and Websites

Showing posts with label Blogs and Websites. Show all posts

Saturday, July 6, 2013

How To Add Stylish Star Rating Widget Into Your Blogger Posts

11:54 AM Unknown No comments

Friends, You know, what is star ratting?. This is a term to review your posts by visitors. Now i share ten different type advanced star rating widget for your blog. You can install it easily on your blogger. It make a professional feeling about your blog. This widget also shows voting rate and viewers count. If you want to install it in your blogger. Please follow this post ..

First Log into your Blogger account.

Go to Template option.

Click on Edit Template button.

Find (CTRL+F) </head> tag.

Paste Following Code Just Above </head> tag.

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>

After that Find (CTRL+F) <data:post.body/> Tag. If you see more than one. Find (CTRL+F) below code.

<b:if cond='data:blog.pageType == "item"'><data:post.body/> </b:if>

In case that you need to place rating widget under the post title paste it before <data:post.body/> tag.

Example Like This:

<b:if cond='data:blog.pageType == "item"'> Code Here <data:post.body/> </b:if>

In case that you need to place the rating widget in the end of the post place it after the <data:post.body/> tag.

Example Like This:

<b:if cond='data:blog.pageType == "item"'><data:post.body/>Code Here </b:if>

Paste following Widget code after your Decision.(Select one widget from below list)

NO:1- Ratings + Social Bar

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div class="ffbs_rating_wrapper">
<div expr:id='data:post.id' class='ffbs_rate ffbs_rate_border ffbs_centered' data-label-rating='icon' data-label-views='icon' data-label-votes='icon'>{[['<img src="http://static.graddit.com/img/star_blue.png"/>']]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats ffbs_centered'></div>
<div expr:id='"share_" + data:post.id' class='ffbs_share ffbs_share_border ffbs_centered'></div></div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes&share=ffbs_share_" + data:post.id + ""'></script></b:if>

NO:2- Like

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[['<span style="color: rgb(108, 181, 216);">❤</span>']]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/1/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=1&url=" + data:post.url + "&votes=yes"'></script></b:if>

NO:3- Pictures

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[['<img src="http://static.graddit.com/img/star.png"/>']]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes"'></script></b:if>

NO:4 -Pictures + feedback

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[['<img src="http://img.graddit.com/img/ice_star.png"/>', '<img src="http://img.graddit.com/img/red_star.png"/>']]}</div>
<div expr:id='"feedback_" + data:post.id' class='ffbs_feedback'>{["Useless", "Boring", "Need more details", "Perfect"]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&&feedback=feedback_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_fimg&class_star_set=ffbs_star_fimg&class_star_vote=ffbs_star_fimg&average=yes&views=yes&votes=yes"'></script></b:if>

NO:5- Animated

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[['<img src="http://img.graddit.com/img/gifs/star_1.gif"/>', '<img src="http://img.graddit.com/img/gifs/5stars_1.gif"/>', '<img src="http://img.graddit.com/img/gifs/star_1v.gif"/>'], ['<img src="http://img.graddit.com/img/gifs/star_2.gif"/>', '<img src="http://img.graddit.com/img/gifs/5stars_2.gif"/>', '<img src="http://img.graddit.com/img/gifs/star_2v.gif"/>'], ['<img src="http://img.graddit.com/img/gifs/star_3.gif"/>', '<img src="http://img.graddit.com/img/gifs/5stars_3.gif"/>', '<img src="http://img.graddit.com/img/gifs/star_3v.gif"/>'], ['<img src="http://img.graddit.com/img/gifs/star_4.gif"/>', '<img src="http://img.graddit.com/img/gifs/5stars_4.gif"/>', '<img src="http://img.graddit.com/img/gifs/star_4v.gif"/>'], ['<img src="http://img.graddit.com/img/gifs/star_5.gif"/>', '<img src="http://img.graddit.com/img/gifs/5stars_5.gif"/>', '<img src="http://img.graddit.com/img/gifs/star_5v.gif"/>']]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_aimg&class_star_set=ffbs_star_aimg_set&class_star_vote=ffbs_star_aimg_vote&views=yes&average=yes&votes=yes"'></script></b:if>

NO:6 -Symbols

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[["☆","★"]]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&views=yes&average=yes&votes=yes"'></script></b:if>

NO:7- Sequence

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[["①","❶"],["②","❷"],["③","❸"],["④","❹"],["⑤","❺"]]}</div>
<div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&views=yes&average=yes&votes=yes"'></script></b:if>

NO:8- Thumb up/down

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[['<img src="http://static.graddit.com/img/thumbup_small.png"/>'],['<img src="http://static.graddit.com/img/thumbdown_small.png"/>']]}</div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/2/" + data:post.id + "?id=" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + ""'></script></b:if>

NO:9 -Up/down arrows

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[["↑"],["↓"]]}</div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/2/" + data:post.id + "?id=" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + ""'></script></b:if>

NO:10- Only Tracker

<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[""]]}</div>
<script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/0/" + data:post.id + "?id=" + data:post.id + "&labels=labels_" + data:post.id + "&url=" + data:post.url + ""'></script></b:if>

Save your Template. enjoy.

Official Website: www.graddit.com

Leave a comment below… Do you like this post….? Enjoy with master hacks..

How To Remove Google Malware Warning From Our Blogger / Website

10:12 PM Unknown No comments

Friends, Now i sharing a valuable post to remove suspicious link and content from our blogger/ Website. My blogger also affected with some links, because Google shows my Blogger is harmful. I cant recognize, what problem affected in my site. I also search on Google Webmasters Tool. But it not shows any warning. Only Google Chrome shows some warning. Because of these reasons my website ranking decease every day. After some days I got a website to find and reveal what problem affected on my site. Now i share how to remove malware content or link from our blogger . Follow this post and enjoy with Master Hacks..

First goto Redleg's Blogspot/Blogger Tool

Paste your URL and hit submit button.

Wait 2-3 seconds. It will redirect another page. It shows what problem affected on your Blogger/Website.

Click on Located here link. Now shows full script of our blog. Red line shows content is harmful.

Find that code from our blogger/website. Please check Page elements OR Templates.

Remove it. Now site is clean .enjoy….

Leave a comment below. about master hacks…..

How To By-Pass SMS Verification Method For Any Website

10:41 AM Unknown No comments

Friends, This is a tricky method to bypass SMS verification from site. Sometime we are confused about SMS Verification method. Because we don’t know any problems behind this question. Here a way to fool all websites from SMS verification process. If you want to know , How is it? Just follow this post. You can receive SMS online for FREE and with NO Registration.

First goto receive-sms-online.com

Select a number from list, 8 options available till now.

Then give that number on mobile number box on that website where it asks for verification.

Once you have sent the SMS on this number. you will instantly receive your verification SMS on that number.

To check your verfication SMS, Just click on that mobile number which you gave and see there will be that SMS.

You will see some list. Find your Verification code from that list.

Now copy the code in verification SMS and provide it on the website.

Thus you can verify easily using this method.

Are you happy…. Follow masterhacks…………………

How To Add Automatic Link Source When Others Copy A content From Our Blog

4:25 AM Unknown No comments

Friends, Now i share a secure system to protect your content. Some peoples try to copy our blog content without permission, You can restrict it with some java code like right click protection, copy protection etc. But some bloggers cant do that, because they provide some codes to peoples. If they apply that scripts visitors cant copy anything from blog. Now i share a trick for some tricky way to restrict copy from blog. This code help to add automatic link source when others copy a content from our Blog.. You can add this lik to your blog. Please follow below instruction… enjoy with Master Hacks

Log in to your Blogger account

Go to Design option--> Edit HTML

Find (CTRL+F) </head> tag.

Copy the below code, and paste it above </head> tag.

<script type='text/javascript'>
function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    var pagelink = "<br/><br/> Original Content from: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright © Techtoones"; // change this if you want
    var copytext = selection + pagelink;
    var newdiv = document.createElement('div');
    newdiv.style.position='absolute';
    newdiv.style.left='-99999px';
    body_element.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function() {
        body_element.removeChild(newdiv);
    },0);
}document.oncopy = addLink;
</script>

Change RED colour with your own words.

Save it..

Enjoy ………………………

Unescape Decoder and Encoder– Online Tool

10:32 PM Unknown No comments

Friends, This is a secret tool to hide your content from strangers. It protect your content without loss any data. You can convert text,HTML,JavaScript etc, in to Un escape format. Also you can decode your content with this tool. Just paste your Text,HTML,JavaScript on first box then hit Encode button. Your text will encode like %3C%73%63%72%69%70%74% format. You can decode it easily, Just copy this encoded code second box. then hit on Decode button. Are you happy now enjoy…..

Leave a comment below about this encoder/decoder......

Social Share Widget With Counters For Blogger

2:03 AM Unknown No comments

The Social networking sites growing traffic is indirectly to webmasters themselves. the more they receive traffic the more visitors we receive when people share you content with friends and colleagues. The widget today consists of Facebook, Twitter, StumbleUpon box counters along with Addthis Counter which makes it a complete package of social media sharing buttons.

Go To Blogger > Design > Edit HTML

Backup your template

Check the "Expand Widgets Templates" Box

Find (CTRL+F) <data:post.body>

Just above it paste the code below.

<b:if cond='data:blog.pageType == "item"'>
<div align='right'><table border='0' cellpadding='2' cellspacing='0' width='150'><tbody>
    <tr>
      <td valign='top'>    <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</td>
      <td valign='top'>   <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>
    </tr>
    <tr>
      <td valign='top'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </td>
      <td valign='top'>

<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de39fde7c998f6e' type='text/javascript'/>

</td>
    </tr>
</tbody></table></div></b:if>

If you wish to align the widget to left then replace right with left

Hit Save and you are done!

Leave a comment betow…………………..

Simple And Stylish 3d Button For Blogger

12:47 AM Unknown No comments

Friends, This is a simple post to make a simple 3D button in blogger. It shows blue color outline and white rectangle space inside. You can change or edit inside text with your own . It is mainly used for some special notification in your post OR for live demo OR for new kind of special text OR also can use it for intention. It is very easy to install into your blogger. Keep follow below instruction and install it.

LIVE DEMO

Thank You

Go to Posting option.

Click on Edit HTML.

Paste below codes in Edit HTML area where you write your post.

<div style="background-color: white" align="center"><b><span style="background-color: white"><span style="font-family: verdana,sans-serif"><span style="border-bottom: rgb(11,83,148) 10px solid; border-left: rgb(72,161,250) 10px solid; padding-bottom: 6px; padding-left: 6px; padding-right: 6px; border-top: rgb(11,83,148) 10px solid; border-right: rgb(72,161,250) 10px solid; padding-top: 6px"><b><span style="font-family: verdana,sans-serif"><span style="font-size: large"><span style="color: blue"><span style="font-size: small"> YOUR-TEXT-HERE</span> </span></span></span></b></span></span></span></b></div>

Change RED color with your text. Also you can change text size ,family, alignment etc.

Publish your post or Preview .

Leave a comment below about this button…………………………

3D Cube Popular Post Widget With Rotating Effect

9:33 AM Unknown No comments

Hi, Everyone now i share a beautiful popular post cube widget with 3D rotating effect. This widget work with all blogger template. You can add this on your blogger. Just follow below instruction.. Then try it to add your template…

Login to Blogger Dashboard

Select Layout option from dashboard side menu.

Click “Add Gadget” .

Choose “Popular Posts” from given list (If you already have this gadget skip this step).

After that hit again on “Add Gadget” and select “HTML/Javascript” option from list.

Copy below code and paste it on HTML/Javascript box.

<style type="text/css"> .cube { width: 200px; height: 200px;} a img { border: none; } #linksCube img { width: 100%; height: 100%; } </style><br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script><br /> <script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"></script><br /> <script type="text/javascript" charset="utf-8"> $(function () { $('.popular-posts ul').abupopularcube(); }); </script><br /> <script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/popularcube.js"></script>

Save it and preview.

Leave a comment…… below…………………. If this widget is not working………..

Mouse Hover Zoom Effect For Your Blogger Images - jQuery

8:30 PM Unknown No comments

Friends, This post contain a trick to zoom your blogger images with out clarity loss. If you want to insert this effect to your blogger, Follow this post.

Click on Templates.

Hit on Edit Html button and proceed.

Find (Ctrl+F) ]]></b:skin> tag.

Copy and paste below code before ]]></b:skin> tag.

/*------- Master Hacks ZOOM-OUT ZOOM-IN -------*/
.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mbtzoom:hover {
zoom: 2;
text-enlarge: 2;
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}

You wish to apply the zoom effect to any image you want simply use this code.

<a href="URL OF PAGE" class="mbtzoom"><img width="60px" height="60px" src="IMAGE LINK" alt="back to top" /></a>

Change Red color with your Page link and Image link.

*Make sure to Keep width and height equal to half the size of original image. For example if the image size is 100px by 100px then set width="50px" and height="50px".

……………………………..END…………………………………….

How To Add jQuery Popup Boxes To Blogger

2:07 AM Unknown No comments

Friends now i share a simple trick to make a jQuery popup box in your blogger. After add this code to your Blogger, button appear. When we hit on that button, a box will popup in your site .Try it now..

Go to templates, click on Edit HTML option and Proceed.

Find (Ctrl+F) </head> tag.

Paste the below code before </head> tag and save the template.

<span id="preserve822ccda38c6941ad85c68878a85f603b" class="wlWriterPreserve"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ /***************************/ //@Author: Adrian "yEnS" Mato Gondelle //@website: www.yensdesign.com //@email: yensamg@gmail.com //@license: Feel free to use it, but keep this credits please! /***************************/ //SETTING UP OUR POPUP //0 means disabled; 1 means enabled; var popupStatus = 0; //loading popup with jQuery magic! function loadPopup(){ //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //centering popup function centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //centering $("#popupContact").css({ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){ //LOADING POPUP //Click the button event! $("#button").click(function(){ //centering with css centerPopup(); //load popup loadPopup(); }); //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); }); //Click out event! $("#backgroundPopup").click(function(){ disablePopup(); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); } }); }); //]]> </script></span> <style type='text/css'> #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background:#000000; border:1px solid #cecece; z-index:1; } #popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:200px; width:350px; background:#FFFFFF; border:2px solid #cecece; z-index:2; padding:12px; font-size:13px; } #popupContact h1{ text-align:left; color:#6FA5FD; font-size:22px; font-weight:700; border-bottom:1px dotted #D3D3D3; padding-bottom:2px; margin-bottom:20px; } #popupContactClose{ font-size:14px; line-height:14px; right:6px; top:4px; position:absolute; color:#6fa5fd; font-weight:700; display:block; } #button{ text-align:center; margin:100px; } </style>

Find (CTRL+F) height:200px; width:350px; Change box width and height.

Save template.

After that go to Layout.

click on “ADD A GAGDET".

Select HTML/Java Scripts.

Copy and paste below code.

Replace Your-Popup-Button-Name, Enter-Popup-Title-Here, Enter-Your-Popup-Content-Here with your data.

Save It and click preview.

Leave a comment…………………….

Auto Scrolling Image (With Link) Widget for blogger

8:41 AM Unknown No comments

Friends, This is a advanced widget for all bloggers. How to scroll images on your blogger?. This is a solution to your question. You can scroll images on your blogger post with out any effort. Just copy and paste below code and insert it where you want to place this code. add it and enjoy…

LIVE DEMO

Copy below code and paste where you want to place this widget.

<marquee behavior="scroll" direction="Left">
<img src="YOUR-IMAGE-LINK" alt="Label of image" height=" IMAGE-HEIGHT " width=" IMAGE-WIDTH" />
<img src="YOUR-IMAGE-LINK" alt="Label of image" height=" IMAGE-HEIGHT "
width=" IMAGE-WIDTH " />
</marquee>

Replace Red color with your image link, Direction and change height and width.

Save it

TIPS :

To change the direction of scrolling replace “ left “ with “ up” for scrolling upwards, “down “ for scrolling downwards and “right” for scrolling to the right

You can change the Height and Width of the image to suit your blog or website layout.
Replace the Height= “ IMAGE-HEIGHT ”
Replace the Width= “ IMAGE-WIDTH ” ( The scrolling image you see has a height = “250” and width = “250”)
Edit the “ YOUR-IMAGE-LINK ” and paste the link to your desired image !

Leave a comment…………… if it is not working………….