Auto Scrolling Recent Posts Widget For Blogger / Blogspot

Auto Scrolling Recent Posts Widget For Blogger / Blogspot

 

 

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link..

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. 

Step 3. Select 'HTML/Javascript' and add the one of code given below. 

<!-- Latest/Recent Posts Scrolling Bar By Solution Mirror -->
<style type="text/css">
#exe_latespost_scrolling_bar {background: #000000;width: auto;margin: 0 auto;text-align: center;color: #F40045;border-bottom: 2px solid #000;-webkit-box-shadow: #666666 0px 1px 3px;-moz-box-shadow: #666666 0px 1px 3px;box-shadow: #666666 0px 1px 3px;z-index: 999999;line-height: 1.85em;letter-spacing: 1px;}
#exe_latespost_scrolling_bar li {display:inline;}
#exe_latespost_scrolling_bar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;}
#exe_latespost_scrolling_bar a:hover{text-decoration:underline;}
</style>
<div id='exe_latespost_scrolling_bar'>
<script type="text/javascript">
function latestpostlistbyexeideas(json) {
document.write('<marquee behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" width="95%" scrolldelay="100" direction="left" >');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var EXEentryUrl = "'" + json.feed.entry[i].link[j].href + "'";
var EXEentryTitle = json.feed.entry[i].title.$t;
var item = ">> <li>" + "<a href=" + EXEentryUrl + ' target="_blank">' + EXEentryTitle + "</a> </li>";
document.write(item);
}
document.write('</marquee>');
}
</script>
<script src="http://www.yourbloggeradress.com/feeds/posts/summary?max-results=10&amp;alt=json-in-script&amp;callback=latestpostlistbysolutionmirror"></script>
<noscript>Allow Your JavaScript To View This Awesome Widget. {<a href="http://www.solutionmirror.blogspot.com">+ Grab this Widget</a>}</noscript>
</div>
<!-- Latest/Recent Posts Scrolling Bar By Solution Mirror -->

Replace Red Link to your Blogger Address..

How to Add Background Music to Your Web Page Or Blogger

How to Add Background Music to Your Web Page Or Blogger

With Music Control

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link..

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. 

Step 3. Select 'HTML/Javascript' and add the one of code given below. 

Paste Your Mp3 Link Which Song You Want To Play In Background 

Note - Only This Type Link Is Valid - http://www.wapdelux.com/menu/Download_Menu/Ringtone/Mp3%20Ringtone%20(up)/Daily%20New%20Mp3%20Ringtones/Tuje_Bhula_Diya_Flut.mp3

<audio controls autoplay loop>

<source src="Your Mp3 Link"></source>

</audio>

Add a Professional Author Bio Widget in Blogger

Add a Professional  Author Bio Widget in Blogger 

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link..

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. 

Step 3. Select 'HTML/Javascript' and add the one of code given below. 

<h2 class='title'>Your Name</h2>

<div class='widget-content'>

<!--[if !IE]> -->

<style>

#profilevinay{

border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;

}

#profilevinay:hover {

border:2px solid #ccc;

cursor:pointer;

}

.opacity  {

opacity: 0.5;

margin-left: 50px;

-moz-transition: all 0.5s ease-out; 

-o-transition: all 0.5s ease-out; 

-webkit-transition: all 0.5s ease-out; 

-ms-transition: all 0.5s ease-out; 

transition: all 0.5s ease-out;

-moz-transform: rotate(7deg); 

-o-transform: rotate(7deg); 

-webkit-transform: rotate(7deg); 

-ms-transform: rotate(7deg); 

transform: rotate(7deg); 

filter: progid:DXImageTransform.Microsoft.Matrix(

                M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');

zoom: 1; 

}

.opacity:hover  {

opacity: 1;

margin-left: 0px;

-moz-transform: rotate(0deg); 

-o-transform: rotate(0deg); 

-webkit-transform: rotate(0deg); 

-ms-transform: rotate(0deg); 

transform: rotate(0deg); 

filter: progid:DXImageTransform.Microsoft.Matrix(

                M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');

zoom: 1;

-moz-box-shadow: 1px 1px 4px #000;

-webkit-box-shadow: 1px 1px 4px #000;

box-shadow: 1px 1px 4px #000;

}

</style>

   <![endif]-->

<style>

#profilevinay{

border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;

}

#profilevinay:hover {

border:2px solid #ccc;

cursor:pointer;

}

.opacity  {

opacity: 0.5;

-moz-transition: all 0.5s ease-out; 

-o-transition: all 0.5s ease-out; 

-webkit-transition: all 0.5s ease-out; 

-ms-transition: all 0.5s ease-out; 

transition: all 0.5s ease-out;

zoom: 1; 

}

.opacity:hover  {

opacity: 1;

zoom: 1;

-moz-box-shadow: 1px 1px 4px #000;

-webkit-box-shadow: 1px 1px 4px #000;

box-shadow: 1px 1px 4px #000;

}

</style>

<img class="opacity" id="profilevinay" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx1yBMxjv797jTgoZG-CdiLrvYp1kPAog9_-p9KPvNDDUXqnAtcqZ3H7s25alw2GMEL7O6Lh0MozDrKLJhDDjJLlGfpQXO8NeOtKvXxg4npN1kbawvn5iXwadX8WYszHzYKLAFqfJlYAY/h120/IMG_20150228_111848+%25282%2529.jpg"  width="60px" height="60px" align="left"/>

Tell About Your Self<a href="Your Any Account Link">Continue Reading</a>  <br/> </![endif]-->

</div>

Social icons Widget with Exclusive effect for Blogger

This is an easiest way to promote your social media links with your targeted users. If you make widget in top with these social icons, then a user see these social icons easily. If you can connect your targeted users with your social links, like: Facebook, Twitter, Google plus then you should easily increase your visitors.
 Facebook
Twitter
Google Plus 

Now lets start this tutorial. Before starting this tutorial take a backup of your template.
Now Go to Blogger Dashboard > Template > Edit HTML and past the below CSS Code before </style>
 
CSS 

 .icon { display: inline-block; vertical-align: top; overflow: hidden; margin: 4px; width: 92px; height: 96px; font-size: 0; text-indent: -9999px; background-color: #404040; } .icon-border { position: relative; } .icon-border::before, .icon-border::after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: &quot;&quot;; } .icon-border::before { z-index: 1; -webkit-transition: box-shadow 0.3s; transition: box-shadow 0.3s; } .icon-border::after { z-index: 2; background: url(&quot;http://i.imgur.com/gOZiqfy.png&quot;); background-image: url(&quot;http://callmenick.com/_development/icons-css3-transitions/img/icons4.svg&quot;), none; } /* facebook */ .icon-border.facebook::before { box-shadow: inset 0 0 0 48px #3b5998; } .icon-border.facebook:hover::before { box-shadow: inset 0 0 0 4px #3b5998; } .icon-border.facebook::after { background-position: 0 0; } /* twitter */ .icon-border.twitter::before { box-shadow: inset 0 0 0 48px #4099ff; } .icon-border.twitter:hover::before { box-shadow: inset 0 0 0 4px #4099ff; } .icon-border.twitter::after { background-position: -96px 0; } /* google plus */ .icon-border.googleplus::before { box-shadow: inset 0 0 0 48px #d34836; } .icon-border.googleplus:hover::before { box-shadow: inset 0 0 0 4px #d34836; } .icon-border.googleplus::after { background-position: -192px 0; }

Now Save Template.

After that, Go to Layout> Add a gadget > HTML/Javascript past below code and edit all # tag with your social links
HTML

 <a href="#" class="icon icon-border facebook">facebook</a> <a href="#" class="icon icon-border twitter">twitter</a> <a href="#" class="icon icon-border googleplus">google+</a>

Done, Enjoy
Liked Share It