آموزش اضافه کردن باکس های تبلیغات متنی مثل این سایت

[nabilanil 3]

با سلام میخواستم یه باکس مثل این سایت Tcs.com که زیراسلایدرش هست رو به قالبم اضافه کنم . توی نت زیادگشتم هیچ افزونه ای نبود فقط باید کدش رو دستی بنویسم . لطفا کمکم کنید چجوری این کارو انجام بدم ؟

[pintapin 0]

دوستان منم این مشکلو دارم، اگر کسی راهنمایی کنید ممنون میشم...

[sajjadmp 72]

سلام خوش اومدید به انجمن .

اینا اسلایدر هستن . slick رو دانلود کنید و در پوشه قالبتون قرار بدید .

بعد این کد ها رو بین تگ head قالبتون قرار بدید .

<script type="text/javascript" src="slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

باید حتما به جی کوئری و میگریت (migrate) هم لینک داده باشید .

حالا کد ها برای ایجاد این اسلایدر :

محل مورد نظر :
<div style=border-color:#FF5F5F;class=trail>
<div class="slick-slide">
متن آزمایشی 1
</div>
<div class="slick-slide">
متن آزمایشی 2
</div><div class="slick-slide">
متن آزمایشی 3
</div>
</div><!--trail-->بین تگ head:
<script type="text/javascript">
$(document).ready(function(){
$('.trail').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  vertical:false,
  rtl:true,
  draggable:true,
  infinite:true,
autoplay:true,
autoplaySpeed:2000,
dots:true,
  fade: true,
  cssEase: 'linear'
});
});
</script>

اسلایدر شما حاضره !

[nabilanil 3]

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

(migrate) رو به قالب هم اضافه کنم ؟

ویرایش شده مرداد 94 توسط nabilanil

[sajjadmp 72]

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

(migrate) رو به قالب هم اضافه کنم ؟

بله دقیقا همونه

همونجوری که به جی کوئری لینک دادید ، یا فایلشو دانلود کنید و در پوشه قالبتون قرار بدید و این کد رو بین تگ head بگذارید :

<script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory');?>/js/migrate-1.2.1.min.js"></script>

و یا دانلود نکنید و این کد رو بگذارید :

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

[nabilanil 3]

ممنون ازرهنمای خوب تون من یه قسمت دیگه مشکل دارم فایل که دادی رو آپلودکردم درپوشه قالبم وکدهای مربوط به تگ head روهم فراخوانی کردم فقط الان موندم اون فایل اچ تی ام ال رو چی جوری بذارم زیراسلایدرقالب سایتم . آدرس سایت هم است www.bartar.af لطفا همین قسمت رو هم برام توضیع بدید ممنون میشم

[sajjadmp 72]

ممنون ازرهنمای خوب تون من یه قسمت دیگه مشکل دارم فایل که دادی رو آپلودکردم درپوشه قالبم وکدهای مربوط به تگ head روهم فراخوانی کردم فقط الان موندم اون فایل اچ تی ام ال رو چی جوری بذارم زیراسلایدرقالب سایتم . آدرس سایت هم است www.bartar.af لطفا همین قسمت رو هم برام توضیع بدید ممنون میشم

خواهش میکنم ، منظورتون کدوم فایل اچ تی ام اله ؟

[nabilanil 3]

منظورم این کدهستش .

محل مورد نظر :
<div style=border-color:#FF5F5F;class=trail>
<div class="slick-slide">
متن آزمایشی 1
</div>
<div class="slick-slide">
متن آزمایشی 2
</div><div class="slick-slide">
متن آزمایشی 3
</div>
</div><!--trail-->بین تگ head:
<script type="text/javascript">
$(document).ready(function(){
$('.trail').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  vertical:false,
  rtl:true,
  draggable:true,
  infinite:true,
autoplay:true,
autoplaySpeed:2000,
dots:true,
  fade: true,
  cssEase: 'linear'
});
});
</script>

[sajjadmp 72]

منظورم این کدهستش .

محل مورد نظر :
<div style=border-color:#FF5F5F;class=trail>
<div class="slick-slide">
متن آزمایشی 1
</div>
<div class="slick-slide">
متن آزمایشی 2
</div><div class="slick-slide">
متن آزمایشی 3
</div>
</div><!--trail-->بین تگ head:
<script type="text/javascript">
$(document).ready(function(){
$('.trail').slick({
slidesToShow: 1,
slidesToScroll: 1,
vertical:false,
rtl:true,
draggable:true,
infinite:true,
autoplay:true,
autoplaySpeed:2000,
dots:true,
fade: true,
cssEase: 'linear'
});
});
</script>

هر جایی که مایلید میتونید این کد رو بگذارید ، البته این قسمتو تو تگ هد بگذارید بهتره :

بین تگ head:
<script type="text/javascript">
$(document).ready(function(){
$('.trail').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  vertical:false,
  rtl:true,
  draggable:true,
  infinite:true,
autoplay:true,
autoplaySpeed:2000,
dots:true,
  fade: true,
  cssEase: 'linear'
});
});
</script>

و این قسمت محل مورد نظر :

محل مورد نظر :
<div style=border-color:#FF5F5F;class=trail>
<div class="slick-slide">
متن آزمایشی 1
</div>
<div class="slick-slide">
متن آزمایشی 2
</div><div class="slick-slide">
متن آزمایشی 3
</div>
</div><!--trail-->

که محل مورد نظر شما در قالبتون میشه container سوم