Smooth Jquery featured content slider for blogger
Follow simple and easy step to adding this slider to your blog ---->>>>
* First go to your blogger Dashboard
* Now click in design tab and edit HTML.
* Click in Small box to expand your blogger Template.
* Now find this code ]] by CTRL+F key.
* Copy below code and paste before ]]
#myGallery,#myGallerySet,#flickrGallery{width:610px;height:320px;z-index:5;margin-bottom:20px;margin-top:5px;overflow:hidden;}
.jdGallery a{outline:0}
#flickrGallery{width:500px;height:334px}
#myGallery img.thumbnail,#myGallerySet img.thumbnail{display:none}
.jdGallery{overflow:hidden;position:relative}
.jdGallery img{border:0;margin:0}
.jdGallery .slideElement{width:100%;height:100%;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil144aaZA7uoAHNICR0VFD8tjTfXBXuz-2zMMBw33SLwhDE7EJd0ri-5OUcVUYs1w2-Nt2VkVI-7t_ojvfKTxsmgRunebQ12aOa8jZ0vy8z-pJ_5_nLWQEVf9E385Ys5qAQ9klDrIw8fI/s1600/loading-bar-black.gif')}
.jdGallery .loadingElement{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil144aaZA7uoAHNICR0VFD8tjTfXBXuz-2zMMBw33SLwhDE7EJd0ri-5OUcVUYs1w2-Nt2VkVI-7t_ojvfKTxsmgRunebQ12aOa8jZ0vy8z-pJ_5_nLWQEVf9E385Ys5qAQ9klDrIw8fI/s1600/loading-bar-black.gif')}
.jdGallery .slideInfoZone{position:absolute;z-index:10;width:100%;margin:0;left:0;bottom:0;height:120px;background:#0A0A0A;color:#fff;text-indent:0;overflow:hidden}
* html .jdGallery .slideInfoZone{bottom:-1px}
.jdGallery .slideInfoZone h2{padding:0;margin:0;margin:2px 5px;font-size:14px;font-weight:bold;color:#fff !important}
.jdGallery .slideInfoZone p{padding:0;font-size:12px;margin:2px 5px;color:#eee}
.jdGallery div.carouselContainer{position:absolute;height:135px;width:100%;z-index:10;margin:0;left:0;top:0}
.jdGallery a.carouselBtn{position:absolute;bottom:0;right:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer}
.jdGallery .carousel{position:absolute;width:100%;margin:0;left:0;top:0;height:115px;background:#333;color:#fff;text-indent:0;overflow:hidden}
.jdExtCarousel{overflow:hidden;position:relative}
.jdGallery .carousel .carouselWrapper,.jdExtCarousel .carouselWrapper{position:absolute;width:100%;height:78px;top:10px;left:0;overflow:hidden}
.jdGallery .carousel .carouselInner,.jdExtCarousel .carouselInner{position:relative}
.jdGallery .carousel .carouselInner .thumbnail,.jdExtCarousel .carouselInner .thumbnail{cursor:pointer;background:#000;background-position:center center;float:left;border:solid 1px #fff}
.jdGallery .wall .thumbnail,.jdExtCarousel .wall .thumbnail{margin-bottom:10px}
.jdGallery .carousel .label,.jdExtCarousel .label{font-size:13px;position:absolute;bottom:5px;left:10px;padding:0;margin:0}
.jdGallery .carousel .wallButton,.jdExtCarousel .wallButton{font-size:10px;position:absolute;bottom:5px;right:10px;padding:1px 2px;margin:0;background:#222;border:1px solid #888;cursor:pointer}
.jdGallery .carousel .label .number,.jdExtCarousel .label .number{color:#b5b5b5}
.jdGallery a{font-size:100%;text-decoration:none;color:#fff}
.jdGallery a.right,.jdGallery a.left{position:absolute;height:99%;width:25%;cursor:pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2}
* html .jdGallery a.right,* html .jdGallery a.left{filter:alpha(opacity=50)}
.jdGallery a.right:hover,.jdGallery a.left:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.jdGallery a.left{left:0;top:0;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEFpDu9CbnHTIoWWCypWn3KMnIl39PribHxwOguAiNu0HGD_dGa9l4JDPy53WeKNIdS4kh6Xc3kSUZgaXt_sxY9_hu-h72boIz7D3MS-qkANH8ix8Gv63fbRP7aGrdMMauOqTyHv-CvP0/s1600/fleche1.png') no-repeat center left}
* html .jdGallery a.left{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgls8686a0zzsTuCvK4Al6PZtiQvIyt7jEvOdWEHp_ujWoWSJ-HLGAlUPDJKu39HSR7EjsUfu4dHE4JariVC786B10yuRehtSKpQPiqp8NCOc9Aks7pxkd6TNKiF1ITnS7b0iQh0UTb8gM/s1600/fleche1.gif') no-repeat center left}
.jdGallery a.right{right:0;top:0;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiWSjTKKagrjDgvN0flrJa6A98l_7NvfUwgCZoejqBxdCaBw1P1BbiLh3Ak3BItpLR2YU-D-iKH5tBcvmliUORy2otrqa3i1ZZusYyAcqtO-LOzs3-2mab2xcd_aIC3FakKK_c8RdqytM/s1600/fleche2.png') no-repeat center right}
* html .jdGallery a.right{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJsx4O-TzURTKzm3d1u3Pe-coXum_yLqJkNYT3-qcuTmtlrrCc41AP_pKGHpH2P7JWTLpXZXrtAqeKt8lvzuk21sIxgKvziJMMnCz7ZrveOF2xflyexwQRvNwHWy6WAyAsHnhvFU6Rctw/s1600/fleche2.gif') no-repeat center right}
.jdGallery a.open{left:0;top:0;width:100%;height:100%}
.withArrows a.open{position:absolute;top:0;left:25%;height:99%;width:50%;cursor:pointer;z-index:10;background:none;-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.withArrows a.open:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIuULThNAVfI_i924O6XeeEpniZxKYGFkAwzK2w54jl0OieJfx0flhrG0W2YNnGFwq-GlUi2MQjC8jmzxQTnME2l1JJVyX49_ieD0HdQJ16lP666MHY_vwwNTkdNRlnwoUJK5Y9dswBq8/s1600/open.png') no-repeat center center}
* html .withArrows a.open:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEyrkLmQNNd1K_YC8cXMwfvdRprCa1_SD3VB3NMuE3XvZxveECru50L9lPgMksj9lhgsIUqrX3O5s2GNSlc8RTtqzEtukHIAg43B0_KPoorFe_yNMDZ04pt5yjAWOoAzxDrQiD44Gvhqk/s1600/open.gif') no-repeat center center;filter:alpha(opacity=80)}
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn{z-index:15;position:absolute;top:0;left:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer;opacity:.4;-moz-opacity:.4;-khtml-opacity:0.4;filter:alpha(opacity=40)}
.jdGallery .gallerySelector{z-index:20;width:100%;height:100%;position:absolute;top:0;left:0;background:#000}
.jdGallery .gallerySelector h2{margin:0;padding:10px 20px 10px 20px;font-size:20px;line-height:30px;color:#fff !important}
.jdGallery .gallerySelector .gallerySelectorWrapper{overflow:hidden}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton{margin-left:10px;margin-top:10px;border:1px solid #888;padding:5px;height:40px;color:#fff;cursor:pointer;float:left}
.jdGallery .gallerySelector .gallerySelectorInner div.hover{background:#333}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview{background:#000;background-position:center center;float:left;border:none;width:40px;height:40px;margin-right:5px}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff !important}
* Now again find this code by CTRL+ F key
* Copy below code and paste before
* Now click to save your blogger Template.
* Again go to your blogger Dashboard and click in design tab.
* Now you Are here --->>> Page Element.
* Click in Add Gadget which is at your blogger sidebar.
* When open new window click in HTML/javascript from list.
* When open new blank box copy below code and paste in blank box.
NOTE:- Remove Highlighted text from above code with your own ok.
* Now click to save your HTML/javascript and after saving this element drag and drop below blogger header and again click to save button and now you are done... CHEERS.
0 comments:
Post a Comment