| Blogger Tips And Tricks|Latest Tips For Bloggers Blogger Tips And Tricks|Latest Tips For Bloggers Tue, 16 Sep 2025 04:12:53 +0000 en-US hourly 1 How to Add jQuery to Blogger https://www.bloggertipandtrick.net/add-jquery-to-blogger/ https://www.bloggertipandtrick.net/add-jquery-to-blogger/#comments Sun, 24 Aug 2025 03:08:00 +0000 http://www.bloggertipandtrick.net/2009/07/how-to-add-jquery-on-blogger-blogspot-blogs.html Some Blogger templates or gadgets require jQuery to work properly. If your theme does not already load it, you can easily add it by following these steps. Steps Open your Blogger Dashboard and go to Theme. Click Edit HTML to open the code editor. Search for the closing tag </head>. Paste the script below just […]

The post How to Add jQuery to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> How to Add jQuery to Blogger

Some Blogger templates or gadgets require jQuery to work properly. If your theme does not already load it, you can easily add it by following these steps.

Steps

  1. Open your Blogger Dashboard and go to Theme.
  2. Click Edit HTML to open the code editor.
  3. Search for the closing tag </head>.
  4. Paste the script below just before </head>.
  5. Click Save to update your theme.

jQuery Script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Optional: Add jQuery Migrate

If your template or old gadgets stop working after adding the latest jQuery, you can also include jQuery Migrate. Place it immediately after the jQuery script tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.4.1.min.js"></script>

Tip: Only add jQuery Migrate if you notice errors with older scripts. For most modern templates, the main jQuery script is enough.

Final Step

After saving your theme, refresh your blog and check if everything works correctly. If you see errors in the console, consider adding the optional jQuery Migrate script.

The post How to Add jQuery to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> https://www.bloggertipandtrick.net/add-jquery-to-blogger/feed/ 1 How to Add jQuery Easy Tooltip to Blogger https://www.bloggertipandtrick.net/jquery-easy-tooltip-to-blogger/ https://www.bloggertipandtrick.net/jquery-easy-tooltip-to-blogger/#respond Wed, 02 Jul 2025 16:58:00 +0000 http://www.bloggertipandtrick.net/2009/08/how-to-add-jquery-tooltips-effect-to-blogger-links.html This tutorial explains how to add tooltips to the links of your website or blog using "Easy Tooltip" jQuery plugin. A Tooltip is a hint that appears when an user hovers the pointer over an item that contains a brief text message identifying the object. Follow the steps given below to add Easy Tooltip to […]

The post How to Add jQuery Easy Tooltip to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> How to Add jQuery Easy Tooltip to Blogger

This tutorial explains how to add tooltips to the links of your website or blog using "Easy Tooltip" jQuery plugin. A Tooltip is a hint that appears when an user hovers the pointer over an item that contains a brief text message identifying the object. Follow the steps given below to add Easy Tooltip to your website.

1.If you are using Blogger, go to "Edit HTML" of your blog.

2.Add this code just before </head> tag:

<!-- jQuery : remove these 2 lines if jQuery already included -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.1/jquery-migrate.min.js' type='text/javascript'></script>
  
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:45,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>
<!-- end tooltips -->
  
<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {
  $('a.easytooltip').easyTooltip();
});

//]]>
</script>

<style type='text/css'>
#easyTooltip{
padding:5px 10px;
border:1px solid #000;
background: #333;
color:#fff;
}
</style>

3.Save your template.

4.Now when you adding a HTML link, "easytooltip" CSS class and title attribute should add like this:

<a class='easytooltip' title='ENTER-LINK-TITLE-HERE' href='ENTER-LINK-URL-HERE'>ENTER-LINK-NAME-HERE</a>

Look at this example:

<a class='easytooltip' title='How to Create NoFollow Link List Widget in Blogger' href='https://www.bloggertipandtrick.net/nofollow-link-list-widget-blogger/'>Create NoFollow Link List Widget in Blogger</a>

Final result will look like this:

jQuery Easy Tooltip

The post How to Add jQuery Easy Tooltip to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> https://www.bloggertipandtrick.net/jquery-easy-tooltip-to-blogger/feed/ 0 How to Add Christmas Snow Falling Effect For Blogger https://www.bloggertipandtrick.net/christmas-snow-falling-effect-for-blogger-blogspot/ https://www.bloggertipandtrick.net/christmas-snow-falling-effect-for-blogger-blogspot/#respond Mon, 04 Dec 2017 04:01:41 +0000 http://www.bloggertipandtrick.net/?p=5194 Christmas is very near, so you may need to give special feeling about the Christmas to your website visitors. This tutorial tell you how to add jQuery based Christmas snow falling effect for your blogger blog or any other normal website. You can see a DEMO of this snow falling effect. To display snows on […]

The post How to Add Christmas Snow Falling Effect For Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> Christmas is very near, so you may need to give special feeling about the Christmas to your website visitors. This tutorial tell you how to add jQuery based Christmas snow falling effect for your blogger blog or any other normal website.

You can see a DEMO of this snow falling effect.

To display snows on you web page, add below code just before </head> tag of your website. (If you using Blogger, go to "Edit HTML" page to add this code.)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {

    $(document).snowfall({
        flakeCount : 400,
        flakeColor : "#ffffff",
        flakeIndex: 999999,
        minSize : 1,
        maxSize : 4,
        minSpeed : 2,
        maxSpeed : 8,
        round : true,
        shadow : false,
    });

});

//]]>
</script>

Note:

1. If jQuery is already have been added into your theme, remove these 2 lines from the above code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js' type='text/javascript'></script>

2. You can change pink colored values of above code as you like. But it is optional.

Save your template and refresh your blog/website to see the snow falling effect.

The post How to Add Christmas Snow Falling Effect For Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> https://www.bloggertipandtrick.net/christmas-snow-falling-effect-for-blogger-blogspot/feed/ 0 How To Create Expandable Post Summaries https://www.bloggertipandtrick.net/how-to-create-expandable-post-summaries/ https://www.bloggertipandtrick.net/how-to-create-expandable-post-summaries/#comments Thu, 23 Feb 2017 10:40:00 +0000 http://www.bloggertipandtrick.net/2009/04/how-to-create-expandable-post-summaries.html This tutorial will help you to add expandable post summaries to your blogger blog. After following the steps given here, you can hide (collapse) a portion of each post content and add a "read more" link so that the text can be viewed by the user if he or she wishes. By default, the expanded […]

The post How To Create Expandable Post Summaries appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> This tutorial will help you to add expandable post summaries to your blogger blog. After following the steps given here, you can hide (collapse) a portion of each post content and add a "read more" link so that the text can be viewed by the user if he or she wishes. By default, the expanded content is followed by a "read less" link that the user can click to re-collapse it.

1. Go to "Edit HTML" of your blog.

2. Add this code into the head section of your template. (It is better to add it just after </b:skin> tag)

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "error_page"'>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js' type='text/javascript'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-expander/1.7.0/jquery.expander.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {

$('.post-body').expander({
    slicePoint: 280,
    expandText: 'read more',
    expandPrefix: '&hellip; ',
    userCollapseText: 'read less',
    userCollapsePrefix: ' ',
    summaryClass: 'post-body-summary',
    detailClass: 'post-body-details',
    moreClass: 'post-body-read-more',
    lessClass: 'post-body-read-less',
});
  
});

//]]>
</script>

</b:if>
</b:if>
</b:if>

If you have already added jQuery into your template, you can remove below lines from the above code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js' type='text/javascript'></script>

Note:
slicePoint: the number of characters at which the contents will be sliced into two parts.

3. Now save your template and refresh your site. Final result will look like this:

Expandable Post Summaries for Blogger

The post How To Create Expandable Post Summaries appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> https://www.bloggertipandtrick.net/how-to-create-expandable-post-summaries/feed/ 1 How To Disable Right Click Using jQuery https://www.bloggertipandtrick.net/disable-right-click-using-jquery/ https://www.bloggertipandtrick.net/disable-right-click-using-jquery/#comments Wed, 28 Oct 2015 06:00:00 +0000 http://www.bloggertipandtrick.net/2010/02/how-to-disable-right-click-using-jquery.html This article explains to you how to disable right click function using a simple jQuery code snippet. If you like to add this feature to your site, then follow the steps below. 1.Login to your blogger account and go to "Edit HTML". 2.Scroll down to where you see </head> tag . 3.Copy below code and […]

The post How To Disable Right Click Using jQuery appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> This article explains to you how to disable right click function using a simple jQuery code snippet. If you like to add this feature to your site, then follow the steps below.

1.Login to your blogger account and go to "Edit HTML".

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-migrate-1.2.1.js'></script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {
    $(document).bind("contextmenu", function(e) {
        return false;
    });
});

//]]>
</script>

NOTE : If jQuery is already included into your theme remove these lines from the above code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-migrate-1.2.1.js'></script>

4.Now save the template. Refresh your site and try to right click on your website or blog.

The post How To Disable Right Click Using jQuery appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> https://www.bloggertipandtrick.net/disable-right-click-using-jquery/feed/ 17 How To Add Social Sexy Bookmarks v2 to Blogger https://www.bloggertipandtrick.net/add-social-sexy-bookmarks-v2-to-blogger/ https://www.bloggertipandtrick.net/add-social-sexy-bookmarks-v2-to-blogger/#comments Sun, 18 Oct 2015 06:00:00 +0000 http://www.bloggertipandtrick.net/2010/06/how-to-add-social-sexy-bookmarks-v2-to-blogger.html This is the second version of "Sexy Social Bookmark for Blogger".The creator of Sexy Social Bookmarks is http://www.cssreflex.com/.For second version of sexy social bookmarks, you have to use jQuery. I hosted sexy bookmarks images(2 images) in Blogger. Below I explain how to add this sexy bookmarks v2 for your blogspot blog. If you like to […]

The post How To Add Social Sexy Bookmarks v2 to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> This is the second version of "Sexy Social Bookmark for Blogger".The creator of Sexy Social Bookmarks is http://www.cssreflex.com/.For second version of sexy social bookmarks, you have to use jQuery. I hosted sexy bookmarks images(2 images) in Blogger. Below I explain how to add this sexy bookmarks v2 for your blogspot blog. If you like to add it to your blog then follow the steps given below.

Share and Love - Sexy Bookmarks - Version 2

Tutorial updated: 2015/10/18

1.Log in to your Blogger account and go to "Edit HTML".

2.Scroll down to where you see </head> tag.

3.Now add below code before </head> tag.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-migrate-1.2.1.js'></script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function() {
	// xhtml 1.0 strict way of using target _blank
	jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
	// this block sets the auto vertical expand when there are more than
	// one row of bookmarks.
	var sexyBaseHeight = jQuery('.sexy-bookmarks').height();
	var sexyFullHeight = jQuery('.sexy-bookmarks ul.socialsbtt').height();
	if (sexyFullHeight > sexyBaseHeight) {
		jQuery('.sexy-bookmarks-expand').hover(
			function() {
				jQuery(this).animate({
					height: sexyFullHeight + 'px'
				}, {
					duration: 400,
					queue: false
				});
			},
			function() {
				jQuery(this).animate({
					height: sexyBaseHeight + 'px'
				}, {
					duration: 400,
					queue: false
				});
			}
		);
	}
	// autocentering
	if (jQuery('.sexy-bookmarks-center')) {
		var sexyFullWidth = jQuery('.sexy-bookmarks').width();
		var sexyBookmarkWidth = jQuery('.sexy-bookmarks:first ul.socialsbtt li').width();
		var sexyBookmarkCount = jQuery('.sexy-bookmarks:first ul.socialsbtt li').length;
		var numPerRow = Math.floor(sexyFullWidth / sexyBookmarkWidth);
		var sexyRowWidth = Math.min(numPerRow, sexyBookmarkCount) * sexyBookmarkWidth;
		var sexyLeftMargin = (sexyFullWidth - sexyRowWidth) / 2;
		jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin + 'px');
	}
});

//]]>
</script>

<style type='text/css'>
div.sexy-bookmarks{margin:20px 0 20px 0; border: 0;outline: none;clear:both !important;-webkit-box-sizing:content-box !important;-moz-box-sizing:content-box !important;box-sizing:content-box !important;}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://2.bp.blogspot.com/-x0M4XT4hAy4/ViMtGjT-51I/AAAAAAAAM-8/_rnU2cOKDI4/s1600/sexytrans.png') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socialsbtt{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socialsbtt li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socialsbtt li:before, div.sexy-bookmarks ul.socialsbtt li:after, div.sexy-bookmarks ul.socialsbtt li a:before, div.sexy-bookmarks ul.socialsbtt li a:after{content:none !important}
div.sexy-bookmarks ul.socialsbtt a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socialsbtt a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://3.bp.blogspot.com/-6HwqVMwZniw/ViMtHInF-AI/AAAAAAAAM_A/TBybj65pIKI/s0/sexy-sprite-new.png') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}
</style>

NOTE :
1. Download Image Files if you need to host images yourself.
2. If jQuery is already included into your theme remove this from above code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/jquery-migrate-1.2.1.js'></script>

4.Scroll down to where you see <data:post.body/> tag.

5.Copy below code and paste it just after <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 20px 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socialsbtt'>
<li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
</b:if>

6.Now save your template and you are done.

Sexy Social Bookmarks Blogger

The post How To Add Social Sexy Bookmarks v2 to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> https://www.bloggertipandtrick.net/add-social-sexy-bookmarks-v2-to-blogger/feed/ 21 How to Add Slidorion Featured Post Slider to Blogger https://www.bloggertipandtrick.net/add-slidorion-slider-to-blogger-website/ https://www.bloggertipandtrick.net/add-slidorion-slider-to-blogger-website/#comments Tue, 09 Dec 2014 04:49:27 +0000 http://www.bloggertipandtrick.net/?p=5171 Slidorion Slider is a combination of an image slider and an accordion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion slider is a great alternative to the traditional jQuery slider. This tutorial explains how to add […]

The post How to Add Slidorion Featured Post Slider to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> Slidorion Slider is a combination of an image slider and an accordion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion slider is a great alternative to the traditional jQuery slider.

This tutorial explains how to add Slidorion jQuery slider to your blogger blog or any other website.

To add this slider, first go to "Edit HTML" of your blogger blog.

Slidorion Slider to Blogger

Copy below code and paste it just before </head> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[

/*!
 * Slidorion, An Image Slider and Accordion Combined
 * Intructions: http://www.slidorion.com
 * Created by Ben Holland - http://www.benholland.me
 * Version: 1.2.0
 * Copyright 2013 Ben Holland <hi@benhlland.me>
 */
!function($){"use strict";$.fn.extend({slidorion:function(options){var defaults={autoPlay:!0,controlNav:!1,controlNavClass:"slidorion-nav",easing:"",effect:"random",first:1,interval:5e3,hoverPause:!1,speed:1e3},opts=$.extend(defaults,options),firstSlide=window.location.hash.match(/slidorion/i)?location.hash.split("/")[1]-1:null;return this.each(function(){var current=firstSlide||opts.first-1,effect=(opts.first,opts.effect),interval=opts.interval,controlNav=opts.controlNav,controlNavClass=opts.controlNavClass,zPos=1,intervalPause=!1,active=!1,prevEffect="",obj=$(this),autoPlaying=null,$slider=$(".slider",obj),$accordion=$(".accordion",obj),$slides=$slider.find(".slide"),$linkHeaders=$accordion.find(".header"),$linkContent=$accordion.find(".content"),effects=["fade","slideLeft","slideUp","slideRight","slideDown","overLeft","overRight","overUp","overDown"],slideEffects=["slideLeft","slideUp","slideRight","slideDown"],overEffects=["overLeft","overRight","overUp","overDown"],animationOptions={queue:!0,duration:opts.speed,easing:opts.easingOption},sliderCount=$slides.length,accordionCount=$linkHeaders.length,randomEffectMap={random:effects,slideRandom:slideEffects,overRandom:overEffects},init=function(){sliderCount===accordionCount?(opts.autoPlay===!0&&(autoPlaying=setInterval(function(){playSlider(current,effect)},interval),obj.data("interval",autoPlaying)),opts.hoverPause===!0&&opts.autoPlay===!0&&obj.hover(function(){intervalPause=!0,stopAuto()},function(){intervalPause=!1,restartAuto()}),resetLayers(),$slides.eq(current).css("z-index",zPos),zPos++,$linkContent.hide(),$linkHeaders.eq(current).addClass("active").next().show(),controlNav&&(obj.append('<div class="'+controlNavClass+" "+controlNavClass+'-left"></div><div class="'+controlNavClass+" "+controlNavClass+'-right"></div>'),$("."+controlNavClass+"-left").click(leftNavigation),$("."+controlNavClass+"-right").click(rightNavigation)),$linkHeaders.click(sectionClicked)):console.log("The number of slider images does not match the number of accordion sections.")},getRandomEffect=function(effect,arr){return effect=arr[~~(Math.random()*arr.length)],effect==prevEffect?getRandomEffect(effect,arr):effect},animation=function(current,section,effect){if(!active){active=!0,opts.autoPlay===!0&&opts.intervalPause===!1&&restartAuto();var $current=$slides.eq(current),$new=$slides.eq(section),currentWidth=$current.outerWidth(),currentHeight=$current.outerHeight();randomEffectMap[effect]&&(effect=getRandomEffect(effect,randomEffectMap[effect]));var changeSlideCSS=function($el,settings){var defs={left:"0",top:"0",zIndex:zPos};$el.css($.extend(defs,settings))},animateSlides=function($el,settings){if($el instanceof Array)return $.each($el,function(){animateSlides($(this),settings)}),void 0;var defs={left:"0",top:"0"};$el.animate($.extend(defs,settings),animationOptions)};switch(prevEffect=effect,effect){case"fade":$new.css({"z-index":zPos,top:"0",left:"0",display:"none"}).fadeIn(opts.speed);break;case"slideLeft":changeSlideCSS($new,{left:currentWidth,top:0}),animateSlides([$current,$new],{left:"-="+currentWidth});break;case"slideRight":changeSlideCSS($new,{left:"-"+currentWidth+"px",top:0}),animateSlides([$current,$new],{left:"+="+currentWidth});break;case"slideUp":changeSlideCSS($new,{top:currentHeight,left:0}),animateSlides([$current,$new],{top:"-="+currentHeight});break;case"slideDown":changeSlideCSS($new,{top:"-"+currentHeight+"px",left:0}),animateSlides([$current,$new],{top:"+="+currentHeight});break;case"overLeft":changeSlideCSS($new,{left:currentWidth}),animateSlides($new,{left:"-="+currentWidth});break;case"overRight":changeSlideCSS($new,{left:"-"+currentWidth+"px"}),animateSlides($new,{left:"+="+currentWidth+"px"});break;case"overUp":changeSlideCSS($new,{top:currentHeight}),animateSlides($new,{top:"-="+currentHeight});break;case"overDown":changeSlideCSS($new,{top:"-"+currentHeight+"px"}),animateSlides($new,{top:"+="+currentHeight});break;case"none":$new.css({"z-index":zPos})}setTimeout(function(){active=!1,resetZpos($new)},opts.speed)}},sectionClicked=function(){if(!active){var section=$(this).index()/2;return section===current?!1:($linkHeaders.removeClass("active").next(".content").slideUp(),$linkHeaders.eq(section).addClass("active").next(".content").slideDown(),animation(current,section,effect),zPos++,current=section,!1)}},playSlider=function(current){$linkHeaders.eq(getNextSlide(current)).trigger("click",sectionClicked)},stopAuto=function(){clearInterval(obj.data("interval"))},restartAuto=function(){clearInterval(obj.data("interval")),autoPlaying=setInterval(function(){playSlider(current,effect)},interval),obj.data("interval",autoPlaying)},leftNavigation=function(){$linkHeaders.eq(getNextSlide(current-2)).trigger("click",sectionClicked)},rightNavigation=function(){$linkHeaders.eq(getNextSlide(current)).trigger("click",sectionClicked)},getNextSlide=function(tempSection){return tempSection++,tempSection===sliderCount?0:0>tempSection?accordionCount-1:tempSection},resetZpos=function($el){zPos>3*sliderCount&&(zPos=2,$slides.css("z-index","1"),$el.css("z-index",zPos),zPos++)},resetLayers=function(){for(var i=sliderCount-1;i>0;i--)$slides.eq(i).css("z-index",zPos),zPos++};init()})}})}(jQuery);

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

jQuery(document).ready(function($) {

	$('#slidorion').slidorion({
		autoPlay: true,
		effect: 'fade',
		hoverPause: true,
		interval: 3000,
		speed: 800,
		controlNav: false,
		controlNavClass: 'nav'
	});
	
});

//]]>
</script>
	
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,700);

.slidorion {
	position: relative;
	width: 640px;			/* Set to slidorion width. Is equal to .slider + .accordion width */
	height: 350px;			/* Set to slidorion height. Is equal to .slider and .accordion height */
	background: #CBCBCB;
	padding: 10px;
	border: 1px solid #BBB;
	-webkit-box-shadow: 0 0 34px #bbb;
	-moz-box-shadow: 0 0 34px #bbb;
	box-shadow: 0 0 34px #bbb;
	line-height: 20px;
}

.slider {
	width: 62.5%;
	height: 100%;
	position: relative;
	float: left;
	overflow: hidden;		/* Hides the animations */
}

.slider .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.accordion {
	width: 37.5%;
	height: 100%;
	font-family: Verdana;
	background: #eee;
	box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
	position: relative;
	z-index:999;
	overflow: hidden;
	float: left;
}

.accordion .header {
	padding: 8px 14px;
	font-size: 12px;
	font-weight: bold;
	color: #333;
	background: #ededed;
	background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
	background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	background: linear-gradient(top, #ededed 59%,#dcdcdc 100%);
	border-top: 1px solid #ccc;
}

.accordion .header:first-child {
	border-top: none;
}

.accordion .header:hover {
	background: #EDEDED;
	cursor: pointer;
}

.accordion .header.active {
	border-bottom: none;
	background: #676767 !important;
	color: #FFF;
}

.accordion .content {
	height: 208px;			/* This height needs to be changed as it depends on the accordion height and number of tabs */
	font-weight: normal;
	font-size: 12px;
	line-height: 20px;
	margin: 0;
	padding: 16px;
	border: none;
	background: #d6d6d6;
	background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 10%);
	background: -webkit-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	background: -o-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	background: -ms-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	background: linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
	overflow:auto;
}

.accordion .content p {
	margin-bottom: 10px;
}

.slidorion .slidorion-nav {
    position: absolute;
    top: 200px;
    width: 16px;
    height: 27px;
    z-index: 9999;
    background: url('../img/arrows.png') 0 0 no-repeat;
    cursor: pointer;
}

.slidorion .slidorion-nav-left {
	left: 30px;
}

.slidorion .slidorion-nav-right {
	right: 310px;
	background-position: -16px 0;
}
</style>

Save your blogger template.

Now go to "Layout" and click on "Add a Gadget" from the area you need to display slider.

Click on "HTML/JavaScript" and add below code:

<div id="slidorion" class="slidorion">

	<div class="slider">
	    <!-- slide images -->
		<div class="slide"><a href="ENTER-SLIDE-1-LINK-HERE"><img src="http://3.bp.blogspot.com/-dPr3ZxSx1wI/VIZ3DeaBeCI/AAAAAAAANx4/wF41ObBsZa8/s1600/slide-1.jpg" /></a></div>
		<div class="slide"><a href="ENTER-SLIDE-2-LINK-HERE"><img src="http://1.bp.blogspot.com/-rE5YSN-mShk/VIZ3Bcw9yfI/AAAAAAAANxw/8o0MO5WJEF0/s1600/slide-2.jpg" /></a></div>
		<div class="slide"><a href="ENTER-SLIDE-3-LINK-HERE"><img src="http://1.bp.blogspot.com/-48n-5XgVtc8/VIZ3DVMtryI/AAAAAAAANx8/OPiQRGudiX4/s1600/slide-3.jpg" /></a></div>
		<!-- slide images end -->
	</div>

	<div class="accordion">
	
	    <!-- slide 1 content -->
		<div class="header">Muhammad Ali</div>
		<div class="content">
			<p>Muhammad Ali (born Cassius Marcellus Clay, Jr.) is an American former professional boxer, philanthropist and social activist. Nicknamed "The Greatest", and widely considered the best heavyweight of all-time, Ali was involved in several historic boxing matches.</p>
		</div>
		<!-- slide 1 content end -->
		
		<!-- slide 2 content -->
		<div class="header">Usain Bolt</div>
		<div class="content">
			<p>Usain Bolt is a Jamaican sprinter widely regarded as the fastest person ever. He is the first man to hold both the 100 and 200 metres world records since automatic time measurements became mandatory in 1977.</p>
		</div>
		<!-- slide 2 content end -->
		
		<!-- slide 3 content -->
		<div class="header">Michael Jordan</div>
		<div class="content">
			<p>Michael Jeffrey Jordan (MJ), is an American former professional basketball player, entrepreneur, and majority owner and chairman of the Charlotte Bobcats.</p>
		</div>
		<!-- slide 3 content end -->
		
	</div>
	
</div>

There are 3 slides in slider.
Change each slide image address with your 400px width and 350px height images. (pink colored codes)
Change each slide title with your slide title. (blue colored codes)
Change each slide description with your slide description. (green colored codes)

Click save and refresh your site.

The post How to Add Slidorion Featured Post Slider to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> https://www.bloggertipandtrick.net/add-slidorion-slider-to-blogger-website/feed/ 1 How To Add Featured Post Content Slider to Blogger https://www.bloggertipandtrick.net/featured-post-content-slider-blogger/ https://www.bloggertipandtrick.net/featured-post-content-slider-blogger/#comments Fri, 14 Nov 2014 02:27:00 +0000 http://www.bloggertipandtrick.net/2010/01/how-to-add-featured-post-content-slider-to-blogger.html This is very smart featured post content slider for your blogger blog or any other site.You can easily add or remove slides to this slider. Also it is very easy to configure. To add this content slider to your web site or blogger blog, follow the steps given below. You can see the demo of […]

The post How To Add Featured Post Content Slider to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> This is very smart featured post content slider for your blogger blog or any other site.You can easily add or remove slides to this slider. Also it is very easy to configure. To add this content slider to your web site or blogger blog, follow the steps given below. You can see the demo of this widget HERE.

Tutorial Updated (2014/11/14) : Now slider was updated to scroll automatically.

1.First go to "Edit HTML" of your Blogger blog.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

Featured Post Content Slider

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js' type='text/javascript'></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
//<![CDATA[

/*!
 * jCarouselLite - v1.1 - 2014-09-28
 * http://www.gmarwaha.com/jquery/jcarousellite/
 * Copyright (c) 2014 Ganeshji Marwaha
 * Licensed MIT (https://github.com/ganeshmax/jcarousellite/blob/master/LICENSE)
*/

!function(a){a.jCarouselLite={version:"1.1"},a.fn.jCarouselLite=function(b){return b=a.extend({},a.fn.jCarouselLite.options,b||{}),this.each(function(){function c(a){return n||(clearTimeout(A),z=a,b.beforeStart&&b.beforeStart.call(this,i()),b.circular?j(a):k(a),m({start:function(){n=!0},done:function(){b.afterEnd&&b.afterEnd.call(this,i()),b.auto&&h(),n=!1}}),b.circular||l()),!1}function d(){if(n=!1,o=b.vertical?"top":"left",p=b.vertical?"height":"width",q=B.find(">ul"),r=q.find(">li"),x=r.size(),w=x<b.visible?x:b.visible,b.circular){var c=r.slice(x-w).clone(),d=r.slice(0,w).clone();q.prepend(c).append(d),b.start+=w}s=a("li",q),y=s.size(),z=b.start}function e(){B.css("visibility","visible"),s.css({overflow:"hidden","float":b.vertical?"none":"left"}),q.css({margin:"0",padding:"0",position:"relative","list-style":"none","z-index":"1"}),B.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"}),!b.circular&&b.btnPrev&&0==b.start&&a(b.btnPrev).addClass("disabled")}function f(){t=b.vertical?s.outerHeight(!0):s.outerWidth(!0),u=t*y,v=t*w,s.css({width:s.width(),height:s.height()}),q.css(p,u+"px").css(o,-(z*t)),B.css(p,v+"px")}function g(){b.btnPrev&&a(b.btnPrev).click(function(){return c(z-b.scroll)}),b.btnNext&&a(b.btnNext).click(function(){return c(z+b.scroll)}),b.btnGo&&a.each(b.btnGo,function(d,e){a(e).click(function(){return c(b.circular?w+d:d)})}),b.mouseWheel&&B.mousewheel&&B.mousewheel(function(a,d){return c(d>0?z-b.scroll:z+b.scroll)}),b.auto&&h()}function h(){A=setTimeout(function(){c(z+b.scroll)},b.auto)}function i(){return s.slice(z).slice(0,w)}function j(a){var c;a<=b.start-w-1?(c=a+x+b.scroll,q.css(o,-(c*t)+"px"),z=c-b.scroll):a>=y-w+1&&(c=a-x-b.scroll,q.css(o,-(c*t)+"px"),z=c+b.scroll)}function k(a){0>a?z=0:a>y-w&&(z=y-w)}function l(){a(b.btnPrev+","+b.btnNext).removeClass("disabled"),a(z-b.scroll<0&&b.btnPrev||z+b.scroll>y-w&&b.btnNext||[]).addClass("disabled")}function m(c){n=!0,q.animate("left"==o?{left:-(z*t)}:{top:-(z*t)},a.extend({duration:b.speed,easing:b.easing},c))}var n,o,p,q,r,s,t,u,v,w,x,y,z,A,B=a(this);d(),e(),f(),g()})},a.fn.jCarouselLite.options={btnPrev:null,btnNext:null,btnGo:null,mouseWheel:!1,auto:null,speed:200,easing:null,vertical:!1,circular:!0,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null}}(jQuery);

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

/*!
 * Featured Post Content Slider to Blogger
 * http://www.bloggertipandtrick.net/featured-post-content-slider-blogger/
*/
jQuery(document).ready(function ($) {

$(".btt-slider").jCarouselLite({
	
	btnPrev: ".btt-next",       // CSS Selector for the previous button
	btnNext: ".btt-prev",       // CSS Selector for the next button
	btnGo: null,                // CSS Selector for the go button
	mouseWheel: true,           // Set "true" if you want the carousel scrolled using mouse wheel
	auto: 2000,                 // Set to a numeric value (800) in millis. Time period between auto scrolls

	speed: 1000,                // Set to a numeric value in millis. Speed of scroll
	easing: "easeOutBounce",               // Set to easing (bounceout) to specify the animation easing

	vertical: false,            // Set to "true" to make the carousel scroll vertically
	circular: true,             // Set to "true" to make it an infinite carousel
	visible: 1,                 // Set to a numeric value to specify the number of visible elements at a time
	start: 0,                   // Set to a numeric value to specify which item to start from
	scroll: 1,                  // Set to a numeric value to specify how many items to scroll for one scroll event

	beforeStart: null,          // Set to a function to receive a callback before every scroll start
	afterEnd: null              // Set to a function to receive a callback after every scroll end	
	
});
  
});

//]]>
</script>

<style type='text/css'>
#btt-slidearea {
  width: 680px;
  height: 230px;
  background: #242424;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

#btt-slidercover {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.btt-slider {
  overflow: hidden;
  position: relative;
}

.btt-slidecontent {
  position: relative;
  margin: 0px 0px;
  height: 200px;
  width: 680px;
  float: left;
  display: inline;
  color: #ccc;
  font: 13px/18px 'Roboto',Georgia,century gothic,Verdana, sans-serif;
}

.btt-slidecontent img {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px;
  background: #000000;
  border: 1px solid #383838;
  width: 270px;
  height: 170px;
}

.btt-slidecontent ul {
  list-style-type:none;
  list-style:none;
  margin:0px;
  padding:0px;
}

.btt-slidecontent ul li {
  list-style-type:none;
  list-style:none;
  margin:0px;
  padding:0px;
  height: 200px;
}

.btt-slidecontent a:link, .btt-slidecontent  a:visited {
  color: #fff;
}

.btt-slidecontent h2 {
  font: 18px/22px Georgia,century gothic,Verdana, sans-serif;
  margin: 15px 0px 5px 305px;
  padding: 0;
  font-weight: normal;
  width: 350px;
  height: 24px;
  overflow: hidden;
}

.btt-slidecontent h2 a {
  color: #fff;
  text-decoration: none;
}

.btt-slidecontent h2 a:hover {
  color: #eee;
  text-decoration: none;
}

.btt-slidecontent p {
  width: 350px;
  margin: 0px 0px 5px 305px;
  padding: 0;
  max-height: 130px;
  overflow: hidden;
}

.btt-slnav {
  padding: 3px 0px;
  background: #000;
}

.btt-prev {
  float: left;
  width: 24px;
  height: 24px;
  z-index: 200;
  margin-left: 5px;
  background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/S2FVY1DGRHI/AAAAAAAAAtc/BZkCromQU-I/prev.png);
}

.btt-next {
  float: right;
  width: 24px;
  height: 24px;
  z-index: 200;
  background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/S2FVWGJQahI/AAAAAAAAAtU/l-hiX3uOqBo/nxt.png);
  display: block;
}

.clear{
  clear:both;
}
</style>

Note : If you need, Host prev.png and nxt.png images yourself.

4.Now go to "Layout" page and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div id="btt-slidearea">
<div id="btt-slidercover">
<div class="btt-slider">
<ul>

<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-1" title="#">Title-of-Post-1</a></h2>
<p>Slide 1 Description [...]</p>
<img src="Slide-1-Image-Address" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-2" title="#">Title-of-Post-2</a></h2>
<p>Slide 2 Description [...]</p>
<img src="Slide-2-Image-Address" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-3" title="#">Title-of-Post-3</a></h2>
<p>Slide 3 Description [...]</p>
<img src="Slide-3-Image-Address" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-4" title="#">Title-of-Post-4</a></h2>
<p>Slide 4 Description [...]</p>
<img src="Slide-4-Image-Address" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="URL-of-Post-5" title="#">Title-of-Post-5</a></h2>
<p>Slide 5 Description [...]</p>
<img src="Slide-5-Image-Address" alt="" />
</div>
</li>

</ul>
<div class="clear"></div>
</div>
</div>
<div class="btt-slnav"><a href="#" class="btt-prev"></a><a href="#" class="btt-next"></a><div class="clear"></div></div>
</div>

Note : Replace URL-of-Post-X , Title-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.

Use width=270px and height=170px images for your slides.

And also you can add more slide to this slider.

For examplelook at the code below:

<div id="btt-slidearea">
<div id="btt-slidercover">
<div class="btt-slider">
<ul>

<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">Avatar (2009 film)</a></h2>
<p>James Cameron's epic motion picture, Avatar - in cinemas December 18th worldwide. In the epic action adventure AVATAR, James Cameron, the director of "Titanic," takes us to a spectacular new world beyond our imagination. On the distant moon Pandora, a reluctant hero embarks on a journey of redemption and discovery as he leads a heroic battle to save a civilization. [...]</p>
<img src="http://1.bp.blogspot.com/_4HKUHirY_2U/S2FWzuNvBBI/AAAAAAAAAts/ijNwX4Ei-O4/avatar.jpg" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">2012 Movie</a></h2>
<p>The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement[...]</p>
<img src="http://3.bp.blogspot.com/_4HKUHirY_2U/S2FYyPWHTJI/AAAAAAAAAt0/kNXA5auZ65k/2012+movie.jpg" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">I am Legend Movie</a></h2>
<p>The film briefly references Mayanism, the Mesoamerican Long Count calendar, and the 2012 phenomenon in its portrayal of cataclysmic events unfolding in the year 2012. Because of solar flare bombardment the Earth's core begins heating up at an unprecedented rate, eventually causing crustal displacement[...]</p>
<img src="http://1.bp.blogspot.com/_4HKUHirY_2U/S2FdlLmVmsI/AAAAAAAAAt8/ERw6PcL-tsE/iamlegend1.jpg" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">Transformer Movie</a></h2>
<p>Transformers is a 2007 live-action-thriller film adaptation of the Transformers franchise, directed by Michael Bay and written by John Rogers, Roberto Orci and Alex Kurtzman. It stars Shia LaBeouf as Sam Witwicky, a teenager involved in a war between the heroic Autobots and the evil Decepticons[...]</p>
<img src="http://4.bp.blogspot.com/_4HKUHirY_2U/S2Fdo2TdCpI/AAAAAAAAAuE/txvdowislx8/transformer11.jpg" alt="" />
</div>
</li>

<li>
<div class="btt-slidecontent">
<h2><a href="#" title="#">Max Payne Game</a></h2>
<p>Max Payne is a BAFTA award winning[1] third-person shooter video game developed by Finnish Remedy Entertainment, produced by 3D Realms and published by Gathering of Developers in July 2001 for Windows. Ports later in the year for the Xbox, PlayStation 2 and the GameBoy Advance were published by Rockstar Games[...]</p>
<img src="http://4.bp.blogspot.com/_4HKUHirY_2U/S2FfKKAoNMI/AAAAAAAAAuM/bzIRya9LZBI/Max_Payne1.jpg" alt="" />
</div>
</li>

</ul>
<div class="clear"></div>
</div>
</div>
<div class="btt-slnav"><a href="#" class="btt-prev"></a><a href="#" class="btt-next"></a><div class="clear"></div></div>
</div>

Now you are done.

The post How To Add Featured Post Content Slider to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> https://www.bloggertipandtrick.net/featured-post-content-slider-blogger/feed/ 83 Top 10 Web Development Books For Beginners https://www.bloggertipandtrick.net/top-10-web-development-books-beginners/ https://www.bloggertipandtrick.net/top-10-web-development-books-beginners/#respond Thu, 07 Aug 2014 14:15:45 +0000 http://www.bloggertipandtrick.net/?p=4715 Web development is the very popular subject in these days. More and more people are trying to learn web development. Lot of books wrote about it in different different title. It is not only about codes but also very powerful media. Now, billions of websites running on internet. Further, The number of websites are increasing […]

The post Top 10 Web Development Books For Beginners appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> Web development is the very popular subject in these days. More and more people are trying to learn web development. Lot of books wrote about it in different different title. It is not only about codes but also very powerful media. Now, billions of websites running on internet. Further, The number of websites are increasing everyday. So, It is very important to learn about web development. I listed very popular and best selling web development books in here. I am sure, this is very helpful to you learn about web development.

#1: Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics

Are you beginner of web development? or you have zero knowledge about it. Don't worry, this is the excellent book for beginners who love to learn web development. This friendly book is perfect place to start web development. You can learn step by step, how web pages build and create perfect web site.

Also, Using this book you can Learn how to use the latest techniques, best practices, and current web standards—including HTML5 and CSS3. Each chapter provides exercises to help you to learn various techniques, and short quizzes to make sure you understand key concepts.

This is ideal book for beginners, student as well as professionals.

  • Build HTML pages with text, links, images, tables, and forms
  • Use style sheets (CSS) for colors, backgrounds, formatting text, page layout, and even simple animation effects
  • Learn about the new HTML5 elements, APIs, and CSS3 properties that are changing what you can do with web pages
  • Make your pages display well on mobile devices by creating a responsive web design
  • Learn how JavaScript works—and why the language is so important in web design
  • Create and optimize web graphics so they’ll download as quickly as possible

Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics

Buy it Now

#2: JavaScript and JQuery: Interactive Front-End Web Development

This book was written for anyone who wants to use JavaScript to make their websites a little more interesting, engaging, interactive, or usable. In particular, it is aimed at people who do not have a degree in computer science. If you have ever struggled to get a script working on your web pages, want a better idea of how to customize scripts, or want to write your own scripts from scratch, this book was written for you.

JavaScript and JQuery: Interactive Front-End Web Development

Buy it Now

#3: HTML and CSS: Design and Build Websites

Now a days, Many peoples interest to learn about  HTML and CSS. Because, it is very important to modify their  web sites. Lot of books teach HTML ans CSS. But, I found this book, It help you to understand HTML and CSS very easily.

HTML and CSS: Design and Build Websites

Buy it Now

#4:PHP and MySQL Web Development (4th Edition)

PHP and MySQL are popular open-source technologies that are ideal for quickly developing database-driven Web applications. PHP is a powerful scripting language designed to enable developers to create highly featured Web applications quickly, and MySQL is a fast, reliable database that integrates well with PHP and is suited for dynamic Internet-based applications.

This book shows, how to use these tools together to produce effective, interactive Web applications. It clearly describes the basics of the PHP language, explains how to set up and work with a MySQL database, and then shows how to use PHP to interact with the database and the server.

PHP and MySQL Web Development (4th Edition)

Buy it Now

#5:Learning PHP, MySQL, JavaScript, CSS & HTML5: A Step-by-Step Guide to Creating Dynamic Websites

If you don't have any previous programming experience, This will help you to learn how to build interactive, data-driven websites. If you know how to build static sites with HTML, this popular guide will help you tackle dynamic web programming. You can learn:  PHP, MySQL, JavaScript, CSS, and now HTML5.

Learning PHP, MySQL, JavaScript, CSS & HTML5: A Step-by-Step Guide to Creating Dynamic Websites

Buy it Now

#6:Web Development and Design Foundations with HTML5 (6th Edition)

Web Development and Design Foundations with HTML5 (6th Edition)

Buy it Now

#7:A Smarter Way to Learn JavaScript: The new approach that uses technology to cut your effort in half

A Smarter Way to Learn JavaScript: The new approach that uses technology to cut your effort in half

Buy it Now

#8: Web Development Recipes

Web Development Recipes

Buy it Now

#9:Fundamentals of Web Development

Fundamentals of Web Development

Buy it Now

#10:The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript

The Modern Web: Multi-Device Web Development with HTML5, CSS3, and JavaScript

Buy it Now

The post Top 10 Web Development Books For Beginners appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> https://www.bloggertipandtrick.net/top-10-web-development-books-beginners/feed/ 0 How To Host jQuery in Blogger https://www.bloggertipandtrick.net/how-to-host-jquery-in-blogger-blogspot/ https://www.bloggertipandtrick.net/how-to-host-jquery-in-blogger-blogspot/#comments Sat, 21 Jun 2014 01:28:00 +0000 http://www.bloggertipandtrick.net/2009/09/how-to-host-jquery-in-blogger-blogspot.html jQuery is the most popular JavaScript library available today. With its features, jQuery has changed the way that millions of people write JavaScript. To use jquery, we need to host "jquery.min.js" file in our server or we can use a CDN like Google Hosted Libraries. But if you do not need to host jQuery as […]

The post How To Host jQuery in Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> jQuery is the most popular JavaScript library available today. With its features, jQuery has changed the way that millions of people write JavaScript. To use jquery, we need to host "jquery.min.js" file in our server or we can use a CDN like Google Hosted Libraries. But if you do not need to host jQuery as a external file, follow the steps below:

1.Login to your Blogger account and go to "Edit HTML" of your blog.

2.Scroll down to where you see this (or use Ctrl+F to find that code):

</b:skin>

3.Copy this code and paste it just after the </b:skin> tag .

4.Now save your template.

The post How To Host jQuery in Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.

]]> https://www.bloggertipandtrick.net/how-to-host-jquery-in-blogger-blogspot/feed/ 1