Browsing "Older Posts"

Home » Slider

How To Add jQuery Featured Post Slider to blogger


















UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........


1.Login to your blogger dashboard--> layout- -> Edit HTML



2.Scroll down to where you see tag .



3.Copy below code and paste it just before the tag .













Note: Please host above images yourself.



4.Now save your template.



5.Go to Layout-->Page Elements and click on "Add a gadget".



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


















Adsense Tips And Secrets



AdSense Tip 1: Find Best keywords for your content
Before serving ads on a web page, check its keyword density. You can find many free keyword analyzer tools in internet searching the word "free keyword analyzer".
AdSense Tip 2: Improve your keywords
Get keyword suggestions from Google AdWords Sandbox. Get new keywords that can help you improve your ad relevance.
AdSense Tip 3: Make content rich websites
This means that content-rich websites of a popular topic should attract a large amount of ads.
AdSense Tip 4: Write a new page/blog post every day
 Read More →







Use Adsense Section Targeting



What is Google Adsense Section targeting? Here is the official information on Adsense Help Center:
Section targeting allows you to suggest sections of your text and HTML content that you'd like us to emphasize or downplay when matching ads to your site's content. By providing us with your suggestions, you can assist us in improving your ad targeting. We recommend that only those familiar with HTML attempt to implement section targeting.
To implement section targeting, you'll need to add a set of special HTML comment tags to your code. These tags will mark the beginning and end of whichever section(s) you'd like to emphasize or de-emphasize for ad targeting.
The HTML tags to emphasize a page section take the following format:
 Read More →







Remove Low paying Adsense Ads



To increase your Adsense Earnings by removing the lowpaying adsense ads from your account,follow the steps below.
1.First go to www.adsblacklist.com .
2.Now Signup for a account.it's free and very simple.
3.Now login to your account.
4.Now Click on My Account.
5.Now click on 'Add New Domain'
6.Submit your URL,TITLE and Keywords.Look at the example below.
6.Now go to Generate Filter List.
7.Drag and drop your domain name into 'Keywords from selected domains:' box.Then you can see keywords,you give in step 4.
 Read More →







Comment Box is made DO FOLLOW



Above Title Means comments on this blog are made do follow and will be spidered.Comments field in blogger are made NOFOLLOW by default.This is done as a measure to reduce spam.To Become comments on your blog are made "do follow",follow the easy steps below.
1.Log in to your dashboard--> layout- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:-
<a expr:href='data:comment.authorUrl' rel='nofollow'>
4.Replace it with below code.
<a expr:href='data:comment.authorUrl'>
5.Click on Save Templates and you are done.
Now you must to make other bloggers know that you are comments are made do follow.For this add below code to your blog... (more...)













Now click Save 
понедельник, 22 июня 2015 г.

Moving jquery image slider for featured content in Blogger















UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........





STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:





]]>

And immediately before it, paste this code:
#myslides{



background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Smo7M1J8mZpn_ehmQ0sSsXjDtnVj4pIZbsAUOgKeSGERnpDhyphenhyphenegd6Drw_DLyo2GdnVj0ADzOp0OwVHbHHKmYMzOuIUFqhccQ7kM8bIIkqorumamaD6DYQje5CMbNFXEVLS0jcLpM-Q/s1600/mslid.jpg) repeat-x;

width: 650px;

height:165px;

margin-bottom:5px;

}



.stepcarousel{

position: relative; /*leave this value alone*/

overflow: scroll; /*leave this value alone*/

width: 554px; /*Width of Carousel Viewer itself*/

height: 160px; /*Height should enough to fit largest content's height*/

margin: 0px 48px 5px 48px;



}



.stepcarousel .belt{

position: absolute; /*leave this value alone*/

left: 0;

top: 0;

}



.stepcarousel .panel{

float: left; /*leave this value alone*/

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 20px 10px ; /*margin around each panel*/

width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */

background:#0e1829;

height:120px;

border:1px solid #1d2c44;



}

.stepcarousel .panel p{

text-align: left; /*leave this value alone*/

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 5px 5px ; /*margin around each panel*/



}



.stepcarousel .panel h2{

text-align: left; /*leave this value alone*/

height:20px;

overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/

margin: 2px 5px ; /*margin around each panel*/

font-size:16px;

font-weight:bold;

text-align:center;

font-family:Georgia,century gothic,Arial,verdana, sans-serif;

}



.stepcarousel .panel img{

float: left; /*leave this value alone*/

background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/

margin: 5px 5px 5px 5px; /*margin around each panel*/

padding:0px 0px;

}





Now find this code in the template:







And immediately before it, paste this code:







Now click Save Template








STEP #2 Log in to Blogger, go to Layout






Add a Gadget of HTML/JavaScript type.



image


Then add this code in to it:





Now click Save 












Simple jQuery Featured Content Slider for Blogger Blog


Instructions To Follow:

STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:
]]>
And immediately before it, paste this code:

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }




STEP #3
Now find (CTRL+F) this code in the template:




And immediately before it, paste this code:






Now click Save Template




Finally go to Page Elements > Add a Gadget > HTML/JAVA Script. And add following code to it.







<-! Slide #1 Starts-->


IMAGE-LINK"/>



TITLE-OF-THE-SLIDE


TEXT-OF-THE-SLIDE






<-! Slide #2 Starts-->


IMAGE-LINK"/>



TITLE-OF-THE-SLIDE


TEXT-OF-THE-SLIDE







<-! Slide #3 Starts-->


IMAGE-LINK"/>



TITLE-OF-THE-SLIDE


TEXT-OF-THE-SLIDE






.
.
.
.




Prev

1
2
3

Next





t's Done.

Customization 

Code 1. You can change the background colors in code 1 to suit your blog.

Code 2. First of all downloadhttp://sites.google.com/site/freeblo...ow.1.2.auto.js and upload it to google sites.

You can change width, height and duration speed.

Code 3. As you look on code 3 there are 3 slide codes. First give the image link, add title and finally add description. Do same with all three codes. You can add more slide by adding the code:





IMAGE-LINK"/>



TITLE-OF-THE-SLIDE


TEXT-OF-THE-SLIDE









Also you have to add



4

after

3

and so on for next slides.