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

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

اسلایدر ابزاری است که کمتر وبلاگ نویسی یافت می شود که با آن آشنایی ندشته باشد .ما امروز در وبلاگ بروزیها ابزار اسلایدر بدون نیاز به درج جاوا اسکریپت را برای شما وبلاگ نویسان عزیز آماده کرده ایم آماده کرده ایم .این ابزار بسیار شیک، کاربردی و جذاب طراحی شده و امکان درج لینک برای هر تصویر را دارا می باشد.

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

 

(پیشنمایش پایین در برخی از موبایل ها یا کامپیوتر ها به درستی اجرا نمی شود پیشنهاد می کنم حتما تصویر پیشنمایش را ببینید)

 

تصویر پیشنمایش

 

اسلایدر

 

 

 

 

 

از ویژگی های اسلایدر میتوان به :

واکنشگرا بودن

زیبایی

راحتی کار با این اسلایدر

هدایت کاربر به لینک مورد نظر

عدم ا

ستفاده از جاوا اسکریپت 

و..

اشاره کرد.

 

خوب توضیحات و پیشنمایش این اسلایدر رو مشاهده کردید

حالا وقت استفاده از این ابزار رسیده...

 

کد های زیر رو در جایی که دوست دارید اسلایدر به نمایش دربیاد ذخیره کنید ، سپس لینک تصاویر خود را جایگزین تصاویر فعلی موجود در اسلایدر کنید. اگر خواستید میتونید در بخش "لینک پست ، لینک پست مورد نظر خودرا جایگزین کنید"

<meta name="viewport" content="width=device-width, initial-scale=1"><style type="text/css">.broziha-box {
	background: #1389;
	padding: 10px;
	margin-bottom: 25px;
	border-radius: 10px;
	box-shadow: 0px 3px 13px 0px rgba(0, 0, 0, 0.09);
}
.broziha {
	width: auto;
	margin: 10px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	overflow-x: auto;
	text-align: center;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	
}
.broziha img {
	margin: 10px;
	height: 150px;
	
	width: auto;
	
	border-radius: 10px;
}
.broziha h3 {
	display: inline-block;
	text-align: right;
}
.broziha-title {
	/* background: #3470db; */
	/* background-image: linear-gradient(45deg, #34c1db 0%, #3470db 100%); */
	border-radius: 100px;
	padding-right: 5px;
	color: #000;
}
.broziha a {
	color: #fff;
}
.broziha a:hover {
	-webkit-filter:opacity(50%);
	filter:opacity(50%);
}</style><p> <div class="broziha-box"><div class="broziha-title"><h2>اسلایدر</h2></div><div class="broziha"><div class="lgs-image"><a href="لینک پست"><img src="http://uupload.ir/files/8j8m_tqcrliaxte.jpg" /></a></div><div class="lgs-image"><a href="لینک پست"><img src="http://bayanbox.ir/view/8788536054703985963/5g-graphic.jpg" /></a></div><div class="lgs-image"><a href="لینک پست"><img src="http://bayanbox.ir/view/8788536054703985963/5g-graphic.jpg" /></a></div><div class="lgs-image"><a href="لینک پست"><img src="http://bayanbox.ir/view/2202388099905415576/space-1586231007082-6113.jpg" /></a></div><div class="lgs-image"><a href="لینک پست"><img src="http://bayanbox.ir/view/2202388099905415576/space-1586231007082-6113.jpg" /></a></div></div><p> </p></div></p><p>&nbsp;</p><p><span style="font-size:16px;"><strong><span style="color:#c0392b;">

/توضیح ساده تر/

تصاویر خود را جایگزین این لینک ها کنید:

http://bayanbox.ir/view/8788536054703985963/5g-graphic.jpg

http://bayanbox.ir/view/2202388099905415576/space-1586231007082-6113.jpg

http://uupload.ir/files/8j8m_tqcrliaxte.jpg

۵ ۱ ۲ دیدگاه

دیدگاه‌ها (۲)

محمد صدرا عبدالعلی زاده

۰۸ ارديبهشت ۹۹ ، ۲۲:۳۲

عالی بود

ولی اینجوری برای اضافه کردن هر پست کدنویسی نیازه

البته کدنویسی زیادی نه :|

ولی اگه بتونید اینو به نشانه های بیان وصل کنید اونوقت عـــــــالـــــــی میشه

این وبم رو ببینید:

vira-q.blog.ir

(برای تبلیغ نگفتم ها...مییتونید نقطه چین کنید)

پاسخ:

۸ ارديبهشت ۹۹، ۲۳:۰۵
سلام.
کد نویسی مجدد برای هر پست لازم نیست که!! 
خیلی ها رو دیدم که بدون مشکل از این ابزار استفاده می کنند.
برای نمایش ابزاد در وبلاگ تنها کافیه کد رو به قسمت body ویرایش ساختار کپی کنید... 
درمورد وبلاگتون هم باید بگم واقعا عالیه...
خیلی خوبه که دارین قالب های ویرایش و زیبا سازی شده بیان رو در اختیار مخاطب میزارین.

محمد صدرا عبدالعلی زاده

۰۹ ارديبهشت ۹۹ ، ۰۰:۰۳

ببخشید من منظور رو بد رسوندم

منظورم اینه اگه بخوایم یه پست جدید رو با تصویرش به اسلایدر اضافه کنیم

باید بریم کد ها رو یکوچولو ویرایش کنیم

شاید الان راحت باشه ولی برای تازه وارد ها ازاردهنده هستش

پس یه نشانه براش بزنید تا کار راحت بشه

بارمممنون :)

پاسخ:

۹ ارديبهشت ۹۹، ۰۰:۵۰
آهااا . از این لحاظ می فرمایید...
بله ، حرف شما کاملا صحیحه . برای کسانی که هنوز با css وhtml آشنایی کافی نداشته باشن شاید یکم گیج کننده باشه.
خیلی ممنون بابت تذکر. اگر فرصت شد انشالله درستش می کنم...
موفق و پیروز باشید(:

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی

تبلیغات
Blog.ir بلاگ، رسانه متخصصین و اهل قلم، استفاده آسان از امکانات وبلاگ نویسی حرفه‌ای، در محیطی نوین، امن و پایدار
bayanbox.ir صندوق بیان - تجربه‌ای متفاوت در نشر و نگهداری فایل‌ها، ۳ گیگا بایت فضای پیشرفته رایگان
Bayan.ir - بیان، پیشرو در فناوری‌های فضای مجازی ایران
پربیننده ترین مطالب
محبوب ترین مطالب
نویسندگان
پیوندها
بایگانی