دسته: آموزش بلاگ بیان

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

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

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

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

افزونه در دو حالت با تصویر و بدون تصویر مطالب مرتبط را نشان می دهد.فولدر 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
راهنما قالب شخصی بلاگ بیان

این مطلب برای راهنما قالب شخصی بلاگ بیان ایجاد شده است.اگر قالب شخصی بلاگ بیان را خریداری کرده اید همراه ما باشید.

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

2019-07-30
استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده

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

نحوه ی شخصی سازی قالب بلاگ بیان برای استایل دهی نظرات مدیریت بلاگ

پیدا کردن باکس نظرات مدیر در یک مطلب یا صفحه

برای اینکار ابتدا وارد پنل مدیریت بلاگ بیان شوید سپس روی بخش قالب و ویرایش ساختار قالب فعلی کلیک کنید تا کدهای ساختار قالب نمایش داده شود.شاید بگید می خواهیم استایل رو ویرایش کنیم چه نیازی به ساختار قالب!؟ برای اینکه کلاس مورد استفاده برای نظر مدیر وبلاگ را پیدا کنیم که بتوانیم بهش استایل بدهیم.

پیدا کردن باکس مربوط به نظر مدیر وبلاگ

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

از پنل مدیریت به قسمت ویرایش استایل قالب فعلی را با کلیک کردن باز می کنیم.
مانند گام 1 در کادر Find کلاس مربوط به باکس نظر مدیر بلاگ را وارد می کنیم (comment-reply) اگر استایل موجود باشد برای شما نشان داده می شود و می توانید کدهاش رو ویرایش کنید.
در غیر اینصورت باید خودمان شروع کنیم،گام بعدی فقط وقتی استایل براش تعریف نشده بود را دنبال کنید.

افزودن استایل برای باکس نظر مدیر

آخر کدهای موجود در این صفحه بروید سپس کلاس باکس نظر مدیر که در گام 1 پیدا کردیم (comment-reply) رو تعریف می کنیم و استایل های موردپسند خودمان را بهش اضافه می کنیم.

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

با توضیحاتی که در تصویر بالا جلوی کدها نوشتم خودتون می تونید طرح مورد نظرتون رو پیاده سازی کنید.

2019-07-14
آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب

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

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

تگ <box:post_list> به بلاگ میگه باکس لیست مطالب ازاینجا شروع می شود واگر این وبلاگ دارای مطلب هست هرچی متن وتگ بین ما هست را نشون بده درغیر اینصورت بخیال من برو برای نمایش بعدی واین باکس هم با تگ </box:post_list> بسته می شود.
(بیشتر…)

2019-03-21
آموزش ساخت قالب بلاگ بیان بخش دوم
آموزش ساخت قالب بلاگ بیان در قسمت اول در مورد ساختار و چارچوب اصلی قالب های سایت و وبلاگ گفتیم که ساختار هر قالب از سه قسمت تشکیل شده است.
- هدر یا سربرگ
  - لوگو
  - منو
  - دیگر اطلاعات از سایت مانند آدرس شرکت ، اطلاعات تماس و …
- بخش اصلی
  - محتوای اصلی
  - ستون کناری
- فوتر : کاربرد اصلی نمایش اطلاعات کپی رایت.
  - همانند هدر میشه از ابزارک های مختلفی در این قسمت استفاده کرد.
برای اطلاعات بیشتر از ساختار و چارچوب قالب وبلاگ و سایت به این صفحه مراجعه کنید.
(بیشتر…)
2019-01-21

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

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

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

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

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

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

آموزش ساخت قالب بلاگ بیان : بخش اول ساختار فایل ها

آموزش ساخت قالب بلاگ بیان : بخش اول ساختار فایل ها

قسمت قبلی : مقدمه

آموزش ساخت قالب بلاگ بیان در این بخش ما از قسمت اصلی و چارچوب قالب مان شروع میکنیم که ساختار قالب نام دارد. همانطور که می دانید برای ساختن هر چیزی طرح و نقشه اولیه لازم هست ، قالب های سایت و وبلاگ هم از این قضیه مستثنی نیستند.

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

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

برای شروع کار یک فولدر در دسکتاپ ویندوز خودتون با نام قالب بلاگ من (My Blog Theme) ایجاد کنید.سپس سه فولدر دیگر با نام های css – js– imgs داخل آن ایجاد کنید. سه تا فایل با نام و فرمت های زیر ایجاد کنید.

Index.html – post.html ، وارد پوشه سی اس اس شوید فایلی با نام و فرمت زیر ایجاد کنید style.css. یک اسکرین شات از طرح قالب را در فولدر imgs اضافه کنید.اسکرین شات مورد نظر در لیست قالب های شخصی بیان نشان داده خواهد شد.

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

ساختار قالب وبلاگ (طرح و دیزاین اولیه ساختار قالبی که می خواهیم درست کنیم).

همانطور که در شکل بالا مشاهده می کنید.ساختار قالب ما از ۳ بخش اصلی تشکیل شده است. هر کدام رو توضیح می دهم.

بخش هدر یا سربرگ

در این بخش ؛ عنوان ، شعار ، لوگو و منو سایت قرار داده می شود. ( به طور کلی می توان برای نمایش بخش های دیگری مانند : شماره تماس ، آدرس ما در شبکه های اجتماعی ، بنر تبلیغاتی ، دکمه ورود و عضویت و اسلایدر استفاده کرد).

بخش محتوای اصلی

سایدبار

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

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

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

بخش پانویس سایت یا فوتر

در این قسمت از سایت یا قالب مون ؛ متن کپی رایت ، لینک دسترسی سریع به صفحات و در برخی موارد لیست آخرین مطالب و نظرات ، لینک شبکه های اجتماعی ، فرم تماس با ما و …

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

2018-07-22
آموزش ساختن قالب های حرفه ای برای بلاگ بیان
آموزش ساختن قالب های حرفه ای برای بلاگ بیان

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

برای این که بتوانید قالب بلاگ بیان برای خودتان بسازید به موارد زیر نیاز دارید یا حداقل آشنایی باهاشون داشته باشید.
- آشنایی با تگ های اچ تی ام ال ( زبان نشانه گذازی ابر متن یا HTML: Hyper Text Markup Language)
- آشنایی با سی اس اس (CSS : Cascading Stylesheet )
- ویرایشگر متن یا محیط کدنویسی
- مرورگر وب فقط گوگل کروم ، موزیلا فایرفاکس و اپرا
- توانایی کار با محیط پنل مدیریت بلاگ بیان
- تگ های مخصوص قالب های بلاگ بیان
- طرح برای قالب بلاگ خودتون (طراحی قالب با نرم افزارهای گرافیکی مانند فتوشاپ)؛ حتما نباید خودتون طراحی کنید می توانید از طراحان عزیز بخواهید براتون طراحی کنند یا اینکه تو اینترنت جست جو کنید و از طرح های آماده ایده برداری کنید یا از طرح های رایگان که مناسب برای بلاگ تان هست استفاده کنید.
همه موارد بالا خودش هر کدوم یه بحث جدا هست و نیاز به چندین جلسه آموزش دارد. من فرض می کنم شما حداقل های هر کدام رو می دانید. همچنین از تگ های که استفاده می کنیم سعی میکنم توضیحات کاملی در مورد اون تگ HTML یا CSS خدمت تون عرض کنم.

اچ تی ام ال5 (HTML5) چیست ؟

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

همانطور که در تصویر بالا می بینید ساختار اچ تی ام ال از دو بخش تشکیل شده ، بخش HEAD و BODY یا بدنه کدهای اچ تی ام ال مان. برای اطلاعات بیشتر از ساختار کدهای اچ تی ام ال این لینک را مشاهده کنید.پیشنهاد می کنم اول ساختار نوشتن کدهای اچ تی ام ال رو یاد بگیرید بعد این آموزش رو دنبال کنید.

مقدمه

در این مقدمه به طور خلاصه در مورد ساختار این دوره آموزشی صحبت میکنم و اینکه این دوره برای چه کسانی مناسب هست.

متفاوت از همه جا قالب بسازید به سبک من! قالب های حرفه ای بساز و لذت ببر!

هرگونه سوال ، نظر و یا پیشنهاد خودتان در مورد این دوره یا هریک از بخش های دوره که منتشر خواهد شد را دریغ نکنید.

ساختار دوره آموزشی
- مقدمه
- ساختار فایل های قالب
- کدنویسی ساختار قالب
- انتخاب استایل و رنگ بندی
- کدنویسی استایل قالب
- و…
این دوره مناسب چه کسانی هست ؟

کسانی که با بلاگ بیان آشنا هستند و اصول اولیه HTML و CSS را می دانند.

در این دوره چه مطالبی را یاد می گیرم؟

در این دوره یاد خواهید گرفت چگونه یک قالب برای وبلاگ خودتان بسازید و در آینده آن را توسعه و برای استفاده دیگران قالب بسازید و از آن کسب درآمد کنید.یاد می گیرید که دیگر فقط کدها را کپی نکنید بلکه خودتان آن ها را بنویسید و از کدنویسی لذت ببرید.
2018-07-18

دسته: آموزش بلاگ بیان

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

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

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

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

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

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

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

استفاده آسان

چطور نسخه های متفاوت قالب را نصب کنم ؟

چرا فایل استایل موجود نیست ؟

قالب خریداری شده برای چند وبلاگ قابل استفاده است؟

پیدا کردن باکس نظرات مدیر در یک مطلب یا صفحه

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

افزودن استایل برای باکس نظر مدیر

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

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

مرحله دوم : جای گذاری کدهای HTML در قالب

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

مرحله چهارم : افزودن کدهای استایل اسلایدر

مرحله ی پنجم: تنظیمات مطلب برای نمایش در اسلایدر

مرحله آخر : انتشار مطلب برای نمایش در اسلایدر

کدهای مربوط به هر قسمت رو می تونید در زیر دانلود کنید.

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

آموزش ساخت قالب بلاگ بیان : بخش اول ساختار فایل ها

قسمت قبلی : مقدمه

بخش هدر یا سربرگ

بخش محتوای اصلی

سایدبار

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

بخش پانویس سایت یا فوتر

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

مقدمه