افزودن اسلایدر به قالب های بلاگ بیان – قالب بلاگ بیان،قالب و افزونه وردپرس|بلاگ تمز

برای افزودن اسلایدر به قالب های بلاگ بیان خودتان کافیست مراحل زیر را دنبال کنید

مرحله اول : فعال کردن جاوا اسکریپت

ابتدا باید از قسمت امکانات اختیاری ،‌ امکان استفاده از جاوا اسکریپت را خریداری کنید . اگر از قبل امکان استفاده از جاوا اسکریپت بلاگ تان فعال است بیخیال این مرحله !

فعال کردن امکان جاوا اسکریپت از بخش امکانات اختیاری

مرحله دوم : جای گذاری کدهای HTML در قالب

از پنل مدیریت ، « بخش قالب » « ویرایش ساختار قالب فعلی » بعد از بخش هدر (یا هر جای که می خواهید اسلایدر نشون داده بشه) ،‌ کدهای HTML زیر را وارد کنید :
* دقت کنید برای اینکه کدهای مربوط به هر قسمت رو کپی کنید بخش مربوط به هر کد دکمه ای در سمت راست وجود دارد ” copy ” روی آن کلیک کنید. در ضمن آخر مطلب می تونید کدهای هر بخش را دانلود کنید.*

<div id="SliderWrap">
	<a id="Next">????</a>
	<div class="SlidesWrap">
		<box:post_list flag="Slider" Max="10">
			<ul id="SlidesCont">
				<view:post_list>
					<li>
						<div class="SlideImg"><img alt="" src="(*post_image*)"></div>
						<div class="slideContent">
							<h2><a href="(*post_link*)">(*post_title*)</a></h2>
							<p>(*post_summary*)</p>
						</div>
					</li>
				</view:post_list>
			</ul>
		</box:post_list >
	</div>
	<a id="Prev">????</a>
</div>

مرحله سوم : افزودن کدهای جاوا اسکریپت

کدهای جاوا اسکریپت مربوط به اسلایدر را در بخش ساختار قالب بین دو تگ «<head></head>» اضافه می کنیم :

<script src="http://blog.ir/media/script/jquery-1.8.2.min.js?1" type="text/javascript"></script>
<script>
	//<![CDATA[
	$(function(){
		$('a.tab').click(function(){
			$('ul.tabs li').removeClass('active');
			$(this).parents('li:first').addClass('active');
			$('#tabs_contain div.tab_cnt').removeClass('tab_cnt_active');
			$($(this).attr('rel')).addClass('tab_cnt_active');
		});
		$('#ModalBG').click(function() {
		$('#Modal').fadeOut();
		});
		function PAPslider() {
			var $Container = $('ul#SlidesCont'),
			$Items = $('ul#SlidesCont').find('li'),
			$Next = $('#Next'),
			$Prev = $('#Prev'),
			Size = $Items.size(),
			PerPage = 4,
			NPages = Math.ceil(Size/(PerPage + 0.001)),
			Cur = 0,
			SlideWidth = 225,
			Speed = 1000,
			Duration = 5000;
			Pointer = 0,
			StandBy = false;
			function moveToSlide(t)
			{
				$Container.animate({
				left: -t*SlideWidth});
				Cur = t;
			}
			function Next() {
				if (Cur >= Size - PerPage)
					return;
				moveToSlide(Cur+1);
			}
			function Prev() {
				if (Cur <= 0)
					return;
				moveToSlide(Cur-1);
			}
			function First() {
				if (Cur <= 0)
					return;
				moveToSlide(0);
			}
			function Slide(){
				StandBy = false;
				window.clearInterval(timer);
				timer = setInterval(Slide, Duration);
				if (Cur >= Size - PerPage)
				First();
				else
				Next();
			}
			var timer;
			$Next.click(function () {
				StandBy = true;
				Next()
				AutoSlider(true);
			});
			$Prev.click(function () {
				StandBy = true;
				Prev()
				AutoSlider(true);
			});
			function AutoSlider(t, m)
			{
				if (typeof(m) === "undefined" || StandBy) 
					m = 1;
				if (t)
				{
					window.clearInterval(timer);
					timer = setInterval(Slide, Duration * m);
				}
				else
				{
					window.clearInterval(timer);
				}
			}
			window.AutoSlider = AutoSlider;
			$('#SliderWrap').hover(function() {
				AutoSlider(false);
				}, function() {
				AutoSlider(true, 0.1);
			});
			AutoSlider(true);
		}//end PAP Slider
		
		PAPslider();
		$('a.rate-button').hover(function() {
			var leftPos = $(this).position().left+24,
			topPos = $(this).position().top-4,
			$tip = $(this).find('div.tip');
			$tip.css({'top':topPos ,'left': leftPos}).stop(true, true).fadeIn();
			}, function() {
			$(this).find('div.tip').stop(true, true).fadeOut();
		});
		
		$('.comments').hover(function() {
			var leftPos = $(this).position().left+24,
			topPos = $(this).position().top,
			$tip = $(this).find('div.tip');
			$tip.css({'top':topPos ,'left': leftPos}).stop(true, true).fadeIn();
			}, function() {
			$(this).find('div.tip').stop(true, true).fadeOut();
		});
		
		$('.SideTitleWrp').click(function() {
			var $target = $(this).parent().find('.cnt');
			if ($target.hasClass('hidden')) {
			$target.removeClass('hidden');
			$(this).removeClass('plus');
			}	else if (!$target.hasClass('hidden') ) {
			$target.addClass('hidden');
			$(this).addClass('plus');
			}
		});
	});
	//]]>
</script>

مرحله چهارم : افزودن کدهای استایل اسلایدر

از پنل مدیریت بلاگ در بخش « ویرایش CSS قالب فعلی » به انتهای صفحه بیایید. کدهای CSS زیر را در انتهای کدهای موجود در این بخش بذارید:

/* Slider ----*/
#SliderWrap {
	background-color: #404040;
	
	margin: 0 auto 5px;
	overflow: hidden;
	
	position: relative;
	width: 980px;
	
}
.SlidesWrap {
	width: 900px;
	margin-left: 40px;
	float: left;
	overflow: hidden;
	position: relative;
}
ul#SlidesCont {
	width: 10000px;
	position: relative;
	float: left;
	padding: 0;
}

ul#SlidesCont li {
	width: 220px;
	float: left;
	position: relative;
	list-style: none;
	direction: rtl;
	margin-left: 5px ;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
}
ul#SlidesCont li:hover {
	background-color: #ddd;
	box-shadow: 0 0 5px #222;
	-moz-box-shadow: 0 0 5px #222;
	-webkit-box-shadow: 0 0 5px #222;
}
ul#SlidesCont li:hover .slideContent {
	color: #333;
}
ul#SlidesCont li:hover h2 a {
	color: #2474e0;
}
ul#SlidesCont li .SlideImg {
        background-color: #c7c7c7;
        border: 4px solid #fff;
        height: 100px;
        margin: 10px 12px 5px;
        overflow: hidden;
        width: 188px;
}
ul#SlidesCont li:hover .SlideImg {
	border-color: #888;
}
ul#SlidesCont li h2 a {
        color: #ddd;
        font-size: 16px;
        margin: 0 3px;
	display:inline-block;
	text-decoration: none;
	font-family: "BTraffic","Times New Roman",Arial,Helvetica;
}
ul#SlidesCont li .slideContent {
        color: #ccc;
        margin: 5px 10px 10px;
        text-align: right;
        clear: both;
        font: 12px/20px tahoma;
}
#Prev, #Next  {
        bottom: 0;
        cursor: pointer;
        height: 100%;
        position: absolute;
        width: 25px;
        text-indent: -9999px;
        z-index: 10;
        text-align:center;
        font: 11px/25px tahoma;
}
#Next {
        right: 0;   
	background: url('http://bayanbox.ir/blog/pap/templates/next.png') no-repeat center right #999;
}
#Next:hover {
	background-color: red; 
        color:#fff; 
	background-position: center left;
}
#Prev {
        left: 0px;
	background: url('http://bayanbox.ir/blog/pap/templates/prev.png') no-repeat center left #999;
}
#Prev:hover{
        background-color: red; 
        color:#fff; 
	background-position: center right;    
}

مرحله ی پنجم: تنظیمات مطلب برای نمایش در اسلایدر

برای اینکه اسلایدر بدون مشکل در قالب بلاگ بیان نشان داده شود تنظیمات زیر را همانند تصاویر راهنما انجام دهید.
از پنل مدیریت بخش « تنظیمات » – « تنظیمات پیشرفته » را کلیک کنید در پنجره باز شده مانند تصویر دو گزینه را تیک بزنید و تغییرات را ذخیره کنید.

در همین پنجره سپس گزینه ی « نشانه جدید » را کلیک کنید و یک نشانه ی جدید (به صورت زیر ) ایجاد کنید .

مرحله آخر : انتشار مطلب برای نمایش در اسلایدر

به بخش «انتشار » می رویم سپس « ارسال مطلب جدید » برای مطلب خود تصویر انتخاب می کنیم . برای این کار باید روی گزینه ی « انتخاب تصویر » کلیک نموده ، تصویر مورد نظر خود را انتخاب کنیم . توجه داشته باشید : تصویری که در این مرحله انتخاب می کنید ،‌ همان تصویری است که در اسلایدر نمایش داده خواهد شد .

سپس در ستون سمت چپ ، در قسمت نشانه ها ،‌ نشانه (flag) ی جدیدی که ایجاد کردیم ( اسلایدر ) را تیک می زنیم .به این ترتیب ما یک اسلایدر داریم که می توانیم از طریق پنل مدیریت بلاگ ،‌ آن را مدیریت کنیم .

کدهای مربوط به هر قسمت رو می تونید در زیر دانلود کنید.

کدهای ساختار اسلایدر (HTML)دانلود فایل

کدهای جاوا اسکریپت مربوط به اسلایدر دانلود فایل

کدهای استایل اسلایدر (CSS)دانلود فایل

اگر این مطلب برایتان مفید بود با دیگران به اشتراک بگذارید ، چنانچه مشکلی یا درخواستی در مورد این اسلایدر داشتید قسمت نظرات همین مطلب با من در میان بگذارید. اگر راهنمایی ، سوال یا درخواستی داشتید می توانید از طریق این صفحه ارسال نمایید. موفق باشید.

اسلایدر حرفه ای بلاگ بیان

اکنون خرید کنید

0 0 votes

رتبه دهی مطلب

افزودن اسلایدر به قالب های بلاگ بیان دانلود قالب دانلود قالب برای بلاگ بیان دانلود قالب بلاگ بیان دانلود قالب رایگان دانلود قالب رایگان بلاگ بیان قالب بلاگ بیان کد قالب بلاگ بیان

اشتراک

0 نظرات

قدیمی ترین

جدیدترین برترین

Inline Feedbacks

View all comments