دسته: قالب بلاگ بیان

آموزش افزودن مطالب مرتبط قالب بلاگ بیان

قبل از اینکه آموزش افزودن مطالب مرتبط قالب بلاگ بیان را شروع کنیم، مطمئن شوید که از نسخه جدید افزونه استفاده می کنید اگر از نسخه قدیمی و قبلی افزونه مطالب مرتبط بلاگ بیان استفاده می کنید. لطفا نسخه جدید را دانلود کنید.

راهنمای گام به گام نصب افزونه مطالب مرتبط

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

افزونه در دو حالت با تصویر و بدون تصویر مطالب مرتبط را نشان می دهد.فولدر withIMG : فایل های نسخه ای هست که مطالب با تصویر نمایش داده می شوند و فولدر Sample نسخه ساده یعنی بدون تصویر هست که شما می توانید به سلیقه خودتان و مناسب قالب هرکدام را انتخاب و نصب کنید.
انتخاب و نصب افزونه
داخل هر فولدر دو فایل وجود دارد که یکی کد اسکریپت هستش و دیگری استایل افزونه برای نمایش در قالب بلاگ فعلی تان.
بعد از انتخاب نسخه مدنظر خود فایل اسکریپت را صندوق بیان خودتان آپلود کنید
افزودن کد اسکریپت به ساختار قالب فعلی بلاگ تان
در مرحله قبل شما کد اسکریپت رو آپلود کردید، لینک همان فایل را مانند تصویر زیر در انتهای کدهای ساختار قالب فعلی؛ قبل از تگ </body> بگذارید مانند تصویر.دقت کنید اگر پلاگین جی کوئری در قالب موجود هست نیاز نیست از آن استفاده کنید فقط کد مربوط به مطالب مرتبط رو بگذارید.
چنانچه فایل جی کوئری در قالب تان وجود ندارد مانند تصویر زیر کدش را در ساختار قالب فعلی ؛ قبل از تگ </head> بگذارید.
<script src=”https://code.jquery.com/jquery-3.4.1.min.js”></script>
هماهنگ سازی قالب با اسکریپت
در ساختار قالب فعلی تگ <box:post_detial> را پیدا کنید.داخل این تگ ، تگ <view:post_tags> را پیدا کنید.مانند تصویر به تگ <a> یک کلاس با نام bt_post-tags اضافه کنید.
مشخص کردن مکان نمایش مطالب مرتبط
در این مرحله شما باید مشخص کنید مطالب مرتبط کجای قالب تان نمایش داده شوند.برای اینکار کافیست کدهای زیر را در هرمکانی که خواستید مطالب مرتبط نمایش داده شوند بگذارید.
<aside id="bt-rel_posts" class="bt_widget bt_box">
<h3 class="bt_widget-title">مطالب مرتبط</h3>
<div id="bt_related-posts" class="bt_widget-cnt restlist"></div>
</aside>

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

استفاده آسان

برای راحتی شما دوستان عزیز و اینکه آموزش افزودن مطالب مرتبط قالب بلاگ بیان کامل و آسان باشد ما فایل های اسکریپت مربوط به هر نسخه را قبلا آپلود کرده ایم کافیست لینک هر کدام را کپی و همانند تصویر در مرحله 3 به ساختار قالب فعلی تان اضافه کنید.فایل help.txt را باز کنید کدهای آماده در اختیار شما هستند.

چنانچه سوال یا درخواستی داشتید قسمت نظرات همین مطلب بفرمایید. موفق باشید.

2020-04-12
قالب مجله ای و خبری ماهتاک بلاگ بیان
نحوه ی استفاده و شخصی سازی قالب مجله ای و خبری ماهتاک بلاگ بیان ، هنوز قالب ماهتاک بلاگ بیان را دانلود نکرده اید ؟
این مطلب همیشه در حال بروزرسانی می باشد…

تنظیمات اولیه وبلاگ برای نصب قالب ماهتاک
1. وارد تنظیمات پیشرفته بلاگ خود شوید
  1. تیک گزینه امکان انتخاب تصویر برای مطالب فعال باشد.
  2. تیک گزینه استفاده از نشانه برای مطلب فعال باشد.
  3. همین صفحه؛قسمت تنظیمات ارسال نظر ؛ ویرایشگر ساده بدون امکان ارسال html را انتخاب کنید.
2. در همین صفحه ؛ دو نشانه برای استفاده از لیست نمایش مطالب با نشانه ایجاد کنید اگر از قبل ایجاد کردید نیازی نیست فقط شناسه لاتین آنها را بخاطر داشته باشید تا جایگزین نشانه های که من پیشفرض گذاشتم بذارید در این مورد پایین بخش فعلی توضیح کامل داده شده است.
3. در همین صفحه بخش تنظیمات خروجی RSS برای مطلب فعال باشد را انتخاب کنید.
4. وارد بخش تنظیمات ساده وبلاگ خود شوید
  1. بخش نمایش کادر جستجو ؛ نمایش کادر جستجو در مکان دلخواه را انتخاب کنید
  2. بخش نمایش جعبه دنبال کنندگان ؛ نمایش کادر جعبه در مکان دلخواه را انتخاب کنید
  3. در آخر هم بخش جعبه های قابل نمایش ؛ جعبه مورد نیاز خود را انتخاب کنید.
نشانه ها در قالب ماهتاک

در قالب مجله ای و خبری بلاگ بیان (ماهتاک) از دو نشانه جهت نمایش مطالب در صفحه نخست استفاده شده است. نشانه اسلایدر (slider) برای نمایش اسلایدر و نشانه دیالوگ های برتر (quotes) که سه مطلب آخر مربوط به نشانه دیالوگ را نشان خواهد داد. آموزش استفاده از نشانه ها رو بخوانید.

نحوه ی نصب قالب ماهتاک
بعد از خارج کردن فایل از حالت فشرده، فایل blogir.html را با نوت پد باز کنید کدهای داخل فایل را کپی و در بخش ساختار قالب خود بگذارید.دقت کنید نیازی به فایل استایل نیست ، فایل استایل در سرور ما نگهداری می شود تا بروزرسانی های استایل بعد بصورت خودکار اعمال گردد و کاربران بدون مشکل از آن استفاده کنند.چنانچه فایل استایل را خواستید از طریق تیکت اقدام کنید.بقیه فایل های موجود در فولدرها در سرور ما نیز هستند ولی بخاطر اینکه شما به آنها دسترسی داشته باشید در فولدر قرارداده شده اند.
چطور متن ” وبلاگ ، چه خبر؟ ” را ویرایش کنم؟
۱ – وارد بخش ساختار قالب فعلی شوید، کد خط ۱۱۱ را بیاورید. متن مورد نظر را ویرایش کنید.۲ – در بخش ساختار قالب فعلی قسمتی که در تصویر می بینید رو بیارید.کادر Find داخلش بنویسید “چه خبر” سپس روی Find کلیک کنید، صفحه خودکار به بخش مربوطه اسکرول خواهد شد.
چطور بخش لیست مطالب را دو ستونه یا تک ستونه کنیم؟
برای این کار وارد بخش ساختار قالب فعلی از پنل مدیریت بلاگ بیان شوید. باید کلاس (class) تگ بادی را ویرایش کنید.در کادر Find این کلمه را وارد کنید col-3cl ؛ اگر می خواهید بخش لیست مطالب دو ستونه باشه 3 رو بکنید 2 و اگر می خواهید تک ستونه باشه 3 رو بکنید 1 سپس ذخیره.اگر می خواهید ستون های کناری در این حالت که به پایین لیست مطالب رفتند می خواهید مدیریت کنید.دو راه وجود داره : ۱ – کلا ستون های کناری را حذف کنید ۲ – از پنل مدیریت بلاگ فقط ابزارک های (مثلا: آرشیو مطالب،لینک ها و …) مورد نیاز خود را فعال کنید تا نشون داده شوند.
2019-07-08
قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان

قالب ساز آنلاین بلاگ تمز – ماکاوب برای قالب های منتشر شده در وب سایت بلاگ تمز ، فعلا فقط قسمت شخصی سازی قالب ساز بلاگ تمز برای قالب انحنا این امکان ایجاد شده که بزودی بقیه قالب ها رو همگام سازی می کنم.تخفیف های ویژه ای برای قسمت قالبسازی آنلاین بدون نیاز به کدنویسی هم برای خریداران قالب های بلاگ تمز در نظر گرفته شده که با انتشار نسخه قالب ساز منتشر خواهد شد.

2019-06-28
راهنمای قالب انحنا بلاگ بیان

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

2019-06-22
افزونه نمایش استوری بلاگ بیان

فیلم معرفی افزونه استوری برای بلاگ بیان ، این افزونه با همه قالب های بلاگ بیان سازگار می باشد.بزودی قالب تحت عنوان استوری برای بلاگ بیان منتشر خواهد شد که بصورت پیشفرض دارای افزونه می باشد. (افزونه در حال بروزرسانی می باشد…)

2019-04-24

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

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

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

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

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

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

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

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

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

2018-12-07

دانلود قالب سه ستونه رایگان بلاگ بیان
چند وقته که بلاگ دیگه قالب منتشر نمیکنه ! شاید دارن یه کارهایی میکنن! :/ و میخواهند چند تا رو با هم منتشر کنند!

با این اوضاع رفتم سراغ سریع ترین راه برای انتشار قالب برا بلاگ بیان! آره ترجمه قالب از دیگر سرویس های به بلاگ بیان ، قالب های که دیگر دوستان با خلاقیت و ایده خودشون ایجاد کرده اند با گرفتن مجوز ازشون ، قالب ها رو به بلاگ تبدیل کردم. امروز میخوام قالب سه ستونه از بلاگ اسکین رو براتون منتشر کنم که طراحی خیلی خوب و جذابی داره ، شما می توانید برای انواع وبلاگ های خبری و شخصی ازش استفاده کنید و لذت ببرید. همچنین این قالب به طور منظم آپدیت میشه شاید براتون سوال باشه که چطوری ؟

تو این ورژن فقط من به بلاگ تبدیل کردم ، در بروز رسانی های بعدی بخش های مانند نظرات قالب و هدر رو خودم دوباره کدنویسی میکنم.

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

اگر دوستان مشکلی یا ویرایشی برا این قالب مد نظرشون بود فقط قسمت نظرات همین مطلب ارسال نمایید. ممنون موفق باشید.
توضیحات : دانلود قالب سه ستونه رایگان بلاگ بیان مناسب برای وبلاگ شخصی

حجم : ۳.۸۹ کیلوبایت

پسورد : 1CODER.BLOG.IR

نکته : پسورد را با حروف کوچک بنویسید
2017-01-25

دسته: قالب بلاگ بیان

راهنمای گام به گام نصب افزونه مطالب مرتبط

دانلود و بررسی محتوای داخل فولدر

انتخاب و نصب افزونه

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

هماهنگ سازی قالب با اسکریپت

مشخص کردن مکان نمایش مطالب مرتبط

افزودن استایل به استایل قالب فعلی

استفاده آسان

تنظیمات اولیه وبلاگ برای نصب قالب ماهتاک

نشانه ها در قالب ماهتاک

نحوه ی نصب قالب ماهتاک

چطور متن ” وبلاگ ، چه خبر؟ ” را ویرایش کنم؟

چطور بخش لیست مطالب را دو ستونه یا تک ستونه کنیم؟