بلاگ تمز-دانلود قالب بلاگ بیان،قالب و افزونه وردپرس
  • صفحه نخست
  • وبلاگ
  • فروشگاه
  • مرکز آموزش
  • حریم خصوصی
  • ورود / عضویت
  • فراموشی گذرواژه

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

  • خانه
  • آموزش بلاگ بیان
  • افزودن اسلایدر به قالب های بلاگ بیان
افزودن اسلایدر به قالب های بلاگ بیان
ج.محمد آذر ۱۶, ۱۳۹۷ آموزش بلاگ بیان، قالب بلاگ بیان، مقالات آموزشی ۱۲ نظرات

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

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

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

مرحله دوم : جای گذاری کدهای 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="https://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('https://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('https://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)دانلود فایل

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

vote
رتبه دهی مطلب
افزودن اسلایدر به قالب های بلاگ بیاندانلود قالبدانلود قالب برای بلاگ بیاندانلود قالب بلاگ بیاندانلود قالب رایگاندانلود قالب رایگان بلاگ بیانقالب بلاگ بیانکد قالب بلاگ بیان
آموزش ساخت قالب بلاگ بیان : بخش اول ساختار فایل هامطلب قبلی
آموزش ساخت قالب بلاگ بیان بخش دوممطلب بعدی
اشتراک
اطلاع از
Please login to comment
12 نظرات
قدیمی ترین
جدیدترین برترین
Inline Feedbacks
View all comments
میثم حیدری
میثم حیدری
2 سالیان پیش

سلام بسیار ممنونم چندتا سوال داشتم و راهنمایی میخواستم
۱ چطوری میتونم رنگ خاکستری اسلایدر رو تغییر بدم؟
۲ اسلایدر اصلا حرکت نمیکنه و فقط۴تا مطلبی که همون اول انتخاب کردم رو نمایش میده؟!
۳ اگه ثانیه شمار داره چطوری میتونم تغییر بدم تا با تایمی که میخوام حرکت کنه؟

تشکر و سپاس

0
محمد جمال زاده
نویسنده
محمد جمال زاده
2 سالیان پیش
Reply to  میثم حیدری

سلام. وقت تون بخیر.
۱ :رنگ مورد نظر را جایگزین کنید.
#SliderWrap{background-color: rang mored nazar shoma;}
2 : حداقل تعداد مطالبش چهارتاس باید بیشتر باشه تا حرکت کنه.
۳: تو فایل جاوا اسکریپت مقدارهای دو متغییر زیر رو تغییر بدهید تا به سرعت مدنظر برسید.
function PAPslider(){Speed = 1000,Duration = 5000;}

0
نجفی
نجفی
2 سالیان پیش

با سلام خدمت شما
میشه روی استایل حرکت عکسها تغیرات ایجاد کرد؟ مثل بقیه اسلایدرها که هم کلید انتقال به عکس دیگه داره و هم حرکت های متنوع در این اسلاید حرکت عکسها خیلی جالب نیست مثلا مثل این بخواهیم درست کنیم

0
محمد جمال زاده
نویسنده
محمد جمال زاده
2 سالیان پیش
Reply to  نجفی

سلام. بله امکانش هست. شما آدرس نسخه آنلاین همین اسلایدر رو بذارید. (بلاگ من فعلا چون تمدید نکردم جاوااسکریپت نمیتونم بذارم). برای حذف خلاصه مطلب تیکه کد رو پاک کنید. (*post_summary*)</pre> برای اضافه کردن آیکون ؛ جای علامت سوال آیکون مدنظرتون رو اضافه کنید. <pre><code class="language-markup><a id="Next" rel="nofollow">????</a>دکمه بعدیدکمه قبلی <a id="Next" rel="nofollow">????</a> برای افکت هاور ؛ وقتی ماوس میاد و عنوان اسلایدر نشون داده میشه هم باید بخش موردنظر رو با سی اس اس کدنویسی کنید.برای این کار هم فقط کافیه ul#SlidesCont li:hover h2` رو به کدهای سی اس اس اسلایدر اضافه کنیم. البته بزودی یه قالب حرفه ای… ادامه مطلب »

0
نجفی
نجفی
2 سالیان پیش
Reply to  محمد جمال زاده

از کد نویسی خیلی سر در نمیارمتاسفانه، چندین بار بعضی قسمت هایش را ویرایش کردم ولی به چیزی که میخواستم نرسیدم.
یک جوری این کدها جا بجا شود که با نشانه گذاری در وبلاگ بیان اسلایدر دلبخواه مثلا از این سایت را در آن قرار داد .
چون اسلاید که در وبلاگ بیان آموزش داده فقط برای هدر است اگر برای پست ثابت وبلاگ یک اسلایدر تعریف کنیم حرکت های آن خیلی جالب نیست.
http://1code.ir/cycleslider/setslider.php

0
محمد جمال زاده
نویسنده
محمد جمال زاده
2 سالیان پیش
Reply to  نجفی

شما می خواهید از اسلایدر در چه قسمتی استفاده کنید ؟

0
نجفی
نجفی
2 سالیان پیش
Reply to  محمد جمال زاده

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

0
محمد جمال زاده
نویسنده
محمد جمال زاده
2 سالیان پیش
Reply to  نجفی

لطفا کدهای دریافتی را در یک فایل بفرستید.
۱ = می خواهید از اسلایدر در چه قسمتی استفاده کنید؟
۲ = میخواهید با چه روشی مطالب اسلایدر اضافه بشن خودکار؟ (براساس نشانه ، موضوع ، تگ)

0
نجفی
نجفی
2 سالیان پیش
Reply to  محمد جمال زاده

بر اساس نشانه
کد را فرستاده بودم یا ارسال نشده یا ویرایش کردید.

0
محمد جمال زاده
نویسنده
محمد جمال زاده
2 سالیان پیش
Reply to  نجفی

ارسال شده من پاک کردم؛ ولی هر بخش را در یک فایل جدا بذارید. در آخر هم در یک فایل فشرده (زیپ) بفرستید.
نوت پد را باز کنید ؛ کدهای مربوط به جاوااسکریپت را در یک فایل با نامش بذارید. بعد کدهای مربوط به استایل را در یک فایل جدا و فایل اچ تی ام ال (ساختار اسلایدر) را در فایل جدا؛ موفق باشید.

0
acabook
acabook
1 سال پیش

سلام وقت بخیر
چطور میشه از نشانه ها برای ایجاد بخش های متنوع دیگر استفاده کرد؟ به چه مقدار کدنویسی نیاز دارند؟ (مثلا اگر بخواهیم بخش اخبار سایت، مطالب مفید و… رو از طریق نشانه ها مدیریت کنیم چطور باید عمل کرد؟)

0
محمد جمال زاده
نویسنده
محمد جمال زاده
1 سال پیش
Reply to  acabook

با سلام.
باید از تگ لیست مطالب با نشانه استفاده کنید و هنگام انتشار مطلب نشانه مطلب را از پنل مدیریت انتخاب کنید.


<box:post_list flag="news" Max="10">
box:post_list >

<box:post_list flag="in-posts" Max="4">
box:post_list >

همچنین با ویژگی max=”” می توانید مقدار مطالب را که می خواهید نشان داده بشه را کنترل کنید.

0

خوب است بدانید

  • چطور تصویر پروفایل در هدر قالب را تغییر دهم ؟
  • انتشار مطلب در بلاگ بیان
  • قالب های بلاگ بیان نیازمند فعالسازی جاوااسکریپت می باشد
  • نحوه ی نصب قالب های بلاگ بیان
  • نحوه ی استفاده از نشانه ها در بلاگ بیان

آخرین محصولات مارکت

  • قالب ریسپانسیو زمستان بلاگ بیان

    دانلود قالب ریسپانسیو زمستان بلاگ بیان

    ۳۹,۰۰۰ تومان
  • مطالب مرتبط بلاگ بیان

    مطالب مرتبط بلاگ بیان

    ۱۵,۰۰۰ تومان
  • قالب نوشتار بلاگ بیان

    قالب نوشتار بلاگ بیان

    ۳۰,۰۰۰ تومان
  • قالب مجله و خبری بلاگ بیان

    قالب مجله و خبری بلاگ بیان ماهتاک

    ۴۷,۰۰۰ تومان
  • قالب انحنای بلاگ بیان

    قالب انحنا بلاگ بیان

    امتیاز 5.00 از 5
    ۴۵,۰۰۰ تومان

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان فروردین ۲۴, ۱۳۹۹
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل مرداد ۲۲, ۱۳۹۸
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان مرداد ۸, ۱۳۹۸
  • استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده
    استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده تیر ۲۳, ۱۳۹۸
  • قالب مجله ای و خبری ماهتاک بلاگ بیان
    قالب مجله ای و خبری ماهتاک بلاگ بیان تیر ۱۷, ۱۳۹۸
  • قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان
    قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان تیر ۷, ۱۳۹۸
  • راهنمای قالب انحنا بلاگ بیان
    راهنمای قالب انحنا بلاگ بیان تیر ۱, ۱۳۹۸
  • افزونه نمایش استوری بلاگ بیان
    افزونه نمایش استوری بلاگ بیان اردیبهشت ۴, ۱۳۹۸
  • آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب
    آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب فروردین ۱, ۱۳۹۸
  • دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو
    دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو بهمن ۳, ۱۳۹۷

دسته های محصولات

  • اسکریپت
  • افزونه بلاگ بیان
  • افزونه وردپرس
  • پروژه کامپیوتر
  • دسته بندی نشده
  • سئو
  • سورس نرم افزار آندروید
  • شرکتی
  • قالب HTML
  • قالب بلاگ بیان
  • قالب وردپرس
  • ووکامرس

سوالات متداول

  • چطور تصویر پروفایل در هدر قالب را تغییر دهم ؟
  • انتشار مطلب در بلاگ بیان
  • قالب های بلاگ بیان نیازمند فعالسازی جاوااسکریپت می باشد
  • نحوه ی نصب قالب های بلاگ بیان
  • نحوه ی استفاده از نشانه ها در بلاگ بیان

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان
  • نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
    نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان
©۱۳۹۷ بلاگ تمز ساخته شده با ♥؛ توسط تیم ماکاوب با استفاده از وردپرس و ووکامرس.
12
0
Would love your thoughts, please comment.x
()
x
| Reply