مرحله اول : فعال کردن جاوا اسکریپت
ابتدا باید از قسمت امکانات اختیاری ، امکان استفاده از جاوا اسکریپت را خریداری کنید . اگر از قبل امکان استفاده از جاوا اسکریپت بلاگ تان فعال است بیخیال این مرحله !
مرحله دوم : جای گذاری کدهای 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) ی جدیدی که ایجاد کردیم ( اسلایدر ) را تیک می زنیم .به این ترتیب ما یک اسلایدر داریم که می توانیم از طریق پنل مدیریت بلاگ ، آن را مدیریت کنیم .
کدهای مربوط به هر قسمت رو می تونید در زیر دانلود کنید.
اگر این مطلب برایتان مفید بود با دیگران به اشتراک بگذارید ، چنانچه مشکلی یا درخواستی در مورد این اسلایدر داشتید قسمت نظرات همین مطلب با من در میان بگذارید. اگر راهنمایی ، سوال یا درخواستی داشتید می توانید از طریق این صفحه ارسال نمایید. موفق باشید.
سلام بسیار ممنونم چندتا سوال داشتم و راهنمایی میخواستم
۱ چطوری میتونم رنگ خاکستری اسلایدر رو تغییر بدم؟
۲ اسلایدر اصلا حرکت نمیکنه و فقط۴تا مطلبی که همون اول انتخاب کردم رو نمایش میده؟!
۳ اگه ثانیه شمار داره چطوری میتونم تغییر بدم تا با تایمی که میخوام حرکت کنه؟
تشکر و سپاس
سلام. وقت تون بخیر.
۱ :رنگ مورد نظر را جایگزین کنید.
#SliderWrap{background-color: rang mored nazar shoma;}2 : حداقل تعداد مطالبش چهارتاس باید بیشتر باشه تا حرکت کنه.
۳: تو فایل جاوا اسکریپت مقدارهای دو متغییر زیر رو تغییر بدهید تا به سرعت مدنظر برسید.
function PAPslider(){Speed = 1000,Duration = 5000;}با سلام خدمت شما
میشه روی استایل حرکت عکسها تغیرات ایجاد کرد؟ مثل بقیه اسلایدرها که هم کلید انتقال به عکس دیگه داره و هم حرکت های متنوع در این اسلاید حرکت عکسها خیلی جالب نیست مثلا مثل این بخواهیم درست کنیم
سلام. بله امکانش هست. شما آدرس نسخه آنلاین همین اسلایدر رو بذارید. (بلاگ من فعلا چون تمدید نکردم جاوااسکریپت نمیتونم بذارم). برای حذف خلاصه مطلب تیکه کد رو پاک کنید. (*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` رو به کدهای سی اس اس اسلایدر اضافه کنیم. البته بزودی یه قالب حرفه ای… ادامه مطلب »
از کد نویسی خیلی سر در نمیارمتاسفانه، چندین بار بعضی قسمت هایش را ویرایش کردم ولی به چیزی که میخواستم نرسیدم.
یک جوری این کدها جا بجا شود که با نشانه گذاری در وبلاگ بیان اسلایدر دلبخواه مثلا از این سایت را در آن قرار داد .
چون اسلاید که در وبلاگ بیان آموزش داده فقط برای هدر است اگر برای پست ثابت وبلاگ یک اسلایدر تعریف کنیم حرکت های آن خیلی جالب نیست.
http://1code.ir/cycleslider/setslider.php
شما می خواهید از اسلایدر در چه قسمتی استفاده کنید ؟
تقریبا این شکلی
کد که سایت یک کد ساخته
چون این اسلایدر برای جا بجای عکس هایش باید قالب را ویرایش کنیم اگر در قالب اسلایدر وبلاگ بیان طراحی شود که با نشانه ها بتوان عکس اضافه کرد لازم نباشه برای تبدیل عکس قالب ویرایش بشه.
عذر خواهی می کنم که با سوالاتم وقت شمارا گرفتم.
لطفا کدهای دریافتی را در یک فایل بفرستید.
۱ = می خواهید از اسلایدر در چه قسمتی استفاده کنید؟
۲ = میخواهید با چه روشی مطالب اسلایدر اضافه بشن خودکار؟ (براساس نشانه ، موضوع ، تگ)
بر اساس نشانه
کد را فرستاده بودم یا ارسال نشده یا ویرایش کردید.
ارسال شده من پاک کردم؛ ولی هر بخش را در یک فایل جدا بذارید. در آخر هم در یک فایل فشرده (زیپ) بفرستید.
نوت پد را باز کنید ؛ کدهای مربوط به جاوااسکریپت را در یک فایل با نامش بذارید. بعد کدهای مربوط به استایل را در یک فایل جدا و فایل اچ تی ام ال (ساختار اسلایدر) را در فایل جدا؛ موفق باشید.
سلام وقت بخیر
چطور میشه از نشانه ها برای ایجاد بخش های متنوع دیگر استفاده کرد؟ به چه مقدار کدنویسی نیاز دارند؟ (مثلا اگر بخواهیم بخش اخبار سایت، مطالب مفید و… رو از طریق نشانه ها مدیریت کنیم چطور باید عمل کرد؟)
با سلام.
باید از تگ لیست مطالب با نشانه استفاده کنید و هنگام انتشار مطلب نشانه مطلب را از پنل مدیریت انتخاب کنید.
همچنین با ویژگی max=”” می توانید مقدار مطالب را که می خواهید نشان داده بشه را کنترل کنید.