Latest Movie :

Create JQuery Featured Content Slideshow free for blogger


How To Create JQuery Featured Content Slideshow


How To Create JQuery Featured Content Slideshow


How to Install This Widget on Blogger?

Steps...

A. Adding Script Code

B. Adding HTML Code


Adding Script Code


In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.


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

Step 2:And find the code </head>
Step 3: Now add the following code just before the </head> tag.



<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src='http://safir85.ucoz.com/24work-blogspot/featured-post-s/jquery-1.4.2.min.js' type='text/javascript'></script>

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

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>



And now click Save Template 



Adding HTML Code

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget.Select 'HTML/Javascript' and add the one of code given below.Just copy and paste this code..


<ul class="slideshow">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMJ9b0imartHSkYtDbbr_8s6f7DPqD4CoeLr0k2J4PW5ek30H5fUSMJy9apJvEYZrGTOOPgJq43pyjiC4U-3vBkOBmxdOyXNJx-IHsVN0IP_Y6pT-A9wN4JIJ_tk_PUQ-JZ8K-gxFTkm8/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNPtnaGx3KfRh8Kenv2bukTFtk87_rSrbYuq0CHNrx8cEMkOjaOCBYu35FAPFK3Sasana4I39c7j59pUjS8yyrl9NA0Cqc0m9lceA6lvYWEWxqvN47cx4X-ruM8W-Ox2CpFpZCGCSORE8/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq2B39Pqa70XoZ4JhdSeSpaPuOTsmhEyL4BLqvXpBkhyx5YwWgM3kvM3CNn11mNr67C1p8FLAt7boVJI45_u6Tizb_xppATr4htwUWyeKUMQB8O_K6B0j-sKDKMoXpBjk9es_0-V6lme8/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLATK6314qNTSFVC1nHhO_LyABWR_4xSjq51yqAolACSk2CPyCMriLf3txifgpc7EWlmgrUKzporXzAqdtveiapz-C68p_jn_oxTFuDQ432KLXqOVxY7jfw7wLCxoTCh0HgZxCNKa3V_M/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>

</ul>


And now click Save 

You can add more slides as you like.

Note : Replace images URLs,"This is featured post X title","Replace This Text With Your Featured Post X Description" with your content.

You are done.

We have great collection of Best tricks and tutorials, Bloggingtrainings.blogpsot.com is a Blog Providing with Blogger widgets, help, blogger tips, blogger tricks, hacks, Blogger Gadgets,Plugins and Blogger resources with great skills and templates.practical SEO Tips and all things Blogging,is about Blog tricks & tips, Traffic generation, Backlinks, Search engine optimization, Web designing, E money, Social media, Facebook tricks,Blogging Discussion, Tips & Tricks,logging tips, tricks, how-tos, news, tools and resources, bloggingtrainings.blogspot presented in easy to understand tutorials.Keep visiting us if any links is not working or you want sme more help, then keep looging at bloggingtrainings.blogspot.com.or contact us 0323-7591466.



Share this article :

+ comments + 5 comments

23 September 2018 at 01:42

WordPress içeriklerinizin daha şık ve vitrin görünümünde çıkmasını sağlayarak Featured Content and Slider eklentisi, WP için özel olarak tasarlanmış ara yüzü ile kullanıcılara farklı bir aksam sunuyor. WP tabanlu web siteleri için hizmet sunan bu eklenti sayesinde ziyaretçilerinize görsel açıdan daha harika bir manşet sistemi sunabilirsiniz. Ana sayfada kolonlar halinde karşımıza çıkan bu manşet sisteminde içerik ile ilgili görsel, başlık ve kısa bir açıklama ile birlikte “Detaylı Görünüm” ekleri bulunuyor. Manşet ara yüzünde sağa sola giden ok sekmeleri ile daha fazla konu içeriğinin görüntülenmesi sağlanabiliyor.
https://www.dogushan.com/featured-content-and-slider-eklentisi-manset-ve-kullanimi/
https://www.dogushan.com/

29 December 2018 at 04:41

Thank you for sharing this information, Its has help me to know more about Slideshow Movie Video Maker

11 April 2019 at 06:25

Açılış Organizasyonu Benzeri Yıl Dönümü Kutlamaları

Açılış organizasyonu ve benzeri yıl dönümü kutlamaları firmanız, işletmeniz, kurum ya da kuruluşunuz için hazırladığımız ve organize ettiğimiz hizmetlerden birisidir. İzmir Organizasyon firması olarak ihtiyaç duyabileceğiniz tüm hizmetleri sunuyoruz. Açılış organizasyonu benzeri yıl dönümü kutlamaları ile işletmenizin kuruluş yıl dönümünü, eğlenceli ve ihtişamlı şekilde organize ediyoruz. Satış ve pazarlama, reklam ve tanıtım amacıyla tıpkı açılış organizasyonlarında ki gibi balon süsleme, animasyon gösterisi gibi hizmetler veriyoruz. İzmir Organizasyon deneyimli ekibi ile birlikte açılış organizasyonu, yıl dönümü etkinlikleri ve daha pek çok organizasyonda profesyonel hizmet vermektedir. Firmanız için hazırlanan yıl dönümü etkinliklerinde de organizasyonu ilgi çekici ve farklı kılmak için çalışıyor, sizlere kusursuz bir atmosfer oluşturuyoruz. Yazının devamını okuyarak açılış organizasyonu benzeri yıl dönümü kutlamaları hakkında fikir edinebilir ve ayrıntılı bilgi almak için İzmir Organizasyon müşteri temsilcimize ulaşabilirsiniz.

Bazı geleneklere mutlaka önem verin

Günümüzde kadınlar ne kadar modern görünseler de, duygusal beklentileri her çağdaki kadınlardan daha farklı değil. Ailesine saygı gösteren ve evlilik için onların rızasını alan bir erkek bütün kadınların hoşuna gider. Bu planladığınız organizasyon ister İzmir evlilik teklifi isterse İstanbul evlenme teklifi, ister bir sahil kasabası mesela Bodrum evlilik teklifi olsun olmazsa olmazları unutmayın. Bir demet çiçek, baş başa yenilen bir yemek ya da başına takacağınız masum bir taç çok klasik gibi görünse de birçok bayan için gerçekten çok etkilidir.

Düğün Organizasyon Hizmeti Nasıl Alabilirim?

Düğün, Nişan ve Kına Organizasyonlarınız için Professional Çekim Hizmetiİzmir organizasyon düğün organizasyon çiftlerin istekleri doğrultusunda hizmet planı oluşturur. Örneğin siz sade ama şık bir düğün ya da nişan düzenlemek istiyorsunuz. Size en uygun düğün mekanı, müzik, müzisyen seçimi ya da masa süslemeleri gibi farklı konseptleri bir araya getirirken bir kitap yada bir filmden ya da bir anınızdan faydalanabilirler. Seçmiş olduğunuz düğün paketi onaylandıktan sonra seçmiş olduğunuz tarihe randevu için kaparo alınmaktadır. Siz de mutlu müşteriler portföyümüze katılmak isterseniz http://www.dugunorganizasyonu.com.tr/ adresini ziyaret edebilir, size en uygun düğün paketleri için fiyat iletişime geçebilirsiniz.

İzmir Tekne Kiralama
İzmir’de gerçekleştireceğiniz çeşitli etkinlik ve aktivitelerinizi İzmir tekne kiralama ile teknede geçirebilir, tekne turlarıyla eğlenceli ve keyifli bir gün geçirebilirsiniz.

7 June 2019 at 04:58

Neler yapabiliriz?

Öncelikle İzmir Ajans olarak 2004 yılında kurulmuş ve hizmetlerine devam etmekte olan bir firma olduğumuzu, dolayısıyla deneme yanılma değil tecrübeyle hareket eden köklü bir firma olduğumuzu belirtmek isteriz. Genel olarak ürün, hizmet marka ve tantım konularında özellikle sosyal medya, video prodüksiyon ve internet bilişim alanında ve ayrıca fotoğraf çekiminde de tecrübeliyiz. Hizmetlerimize başlamadan önce sizlerin firkirlerini dinliyor, kendi tecrübemiz ve sizin hayalinizdekileri harmanlayıp, fikir alışverişlerinin ardından yol haritamizi belirleyip vaad edilen süre zarfında hizmetinizi gerçekleştiriyoruz. Yaptığımız hizmet ne olursa olsun, ihtiyacınız olanı sağlayacağımızdan emin olabilirsiniz. Yol haritasını çizerken isteklerinizi ve tasarrufunuzu ilk sıraya alıyoruz. Ömür boyu profesyonel iş ortağınız olacağız.

Video Montaj ve Prodüksiyon

Her firmanın tanıtımının yapılacağı bir hikayesi vardır. Bir firmayı kurmak, geliştirmek ve popülerleştirmekten geçen ilk yol tanıtım filmi çekiminden geçmektedir. Firmanızı popülerleştirmek ve yayıngınlaşmasını sağlamak için harika fikirlerimiz var. Siz hayallerinizi anlatırken biz ihtiyacınız olanı tespit edip, onu hayata geçirmek için elimizden gelene yapacağımızdan kuşkunuz olmasın. Sosyal medya ve internet hizmetleriyle video prodüksiyonü harmanyalıp ortaya çıkan en fes hizmetin keyfini çıkarmanız için sizi bekliyor olacağız.

5 April 2020 at 09:04

çok iyi bir makale uzun suredir sizleri takip etmekteyim sektorde sizden iyisini goremedim yapmiş oldugunuz çalişmadan dolayi sunnet organizasyonu çok iyi bir bir puroje teşekkurler

Post a Comment

PLEASE DON'T PLACE BULK MESSAGE , FOR ADVERTISING!

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Blogging Trainings - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger