برچسب: دانلود قالب

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

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

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

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

2019-03-21
دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو

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

2019-01-23

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

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

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

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

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

مرحله دوم : جای گذاری کدهای 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
دانلود قالب رایگان هیولا برای بلاگ بیان
به در خواست یکی از کاربران بلاگ ، قالب مورد نظرشان ( قالب رایگان بلاگ بیان هیولا ) را با کسب اجازه از طراح قالب اصلی که برای دیگر سرویس ها بود را برای سرویس بلاگ بیان ترجمه کردم و همه دوستان می توانند از این قالب استفاده کنند.چنانچه دوستانی با اعمال تغییرات جزئی در قالب مورد نظر خواستن ازش استفاده بکنن می توانند تغییرات مد نظرشون قسمت نظرات همین مطلب ارسال نمایند تا آموزش های لازم برای ویرایش قالب ارسال شود.موفق باشید.

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

حجم ۲۲۹ کیلوبایت

رمز قالب : www.1coder.blog.ir
2016-11-28
دانلود رایگان مجموعه ۱۳ آیکون ورزشی (فوتبالی)

در این مطلب در خدمتون هستم با مجموعه آیکون ورزشی ( فوتبالی ) ؛ شاید از فوتبال خوشتون نیاید ولی این آیکون ها می توانند براتون مفید باشند. همچنین برای کسانی که عشق فوتبال هستن و مطالب فوتبالی دارند می تونند برای شان کاربردی باشه.شما می توانید این مجموعه آیکون ها را در فرمت های (ai-eps-svg-png) دانلود کنید.

_{منبع : smashingmagazine}

2016-06-14
دانلود رایگان طرح لایه باز پروفایل کاربر
سلام ، خدمت دوستان ! خداروشکر این روزا خیلی سرم شلوغه ! کلی کار نیمه کار برا بلاگ دارم که کم کم میذارم! امروز فایل پی اس دی یا طرح لایه باز باکس پروفایل کاربر رو براتون آماده کردم. نسخه ی کد شده ی این طرح را هم اوکی کردم فقط مونده برای کاربران بلاگی آماده کنم بعد منتشر میکنم تا بیشتر براتون کاربردی باشه ! یه آموزش هم برا ویرایش تصاویر و بک گراند و … میذارم تا همه ی دوستان بتونند استفاده کنند. موفق باشید.

باکس های زیر رو دارم آماده می کنم :
1. باکس آخرین مطالب ( موضوع ، نشانه ) به صورت ریسپانسیو با تصویر برای هر موضوع یا نشانه! ( فقط ریسپانسیو مونده + نمایش دمو)
2. باکس سخنان برتر با استفاده از نشانه ( نمایش به صورت اسلایدشو )
3. پربازدید ترین مطلب به صورت ریسپانسیو + اسلایدر
4. باکس دنبال کننده ها
5. دکمه های زیبا برای دنبال کردن بلاگ و بالا رفتن ( بدون جاوا اسکریپت)
6. اسلایدر مطالب یک دسته بندی خاص بدون جاوا اسکریپت
7. …
حجم 89.4 کیلوبایت

پسورد : 1coder.blog.ir
2015-12-09
ترجمه رایگان قالب جدید بلاگفا به بلاگ – درخواستی کاربر

در این ساعت در خدمتون هستم با مطلب ترجمه رایگان قالب جدید بلاگفا به بلاگ – درخواستی کاربر : شمیم زندگی

این قالب چهارمین قالب ترجمه شده به صورت رایگان برای بلاگ هست که تقدیم همه بلاگ نویسان !

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

مسیر ویرایش قالب –> پنل مدیریت —> قالب –> ویرایش ساختار قالب فعلی ؛ برای کد ساختار قالب | ویرایش Css قالب فعلی ؛ برای کد استایل قالب

مسیر ایجاد قالب –> پنل مدیریت —> قالب –>انتخاب قالب جدید –> ایجاد قالب جدید –> ساختار قالب ؛ برای کد ساختار قالب | ویرایش Css قالب ؛ برای کد استایل قالب

پیشنمایش قالب

فایل ساختار قالب

کدها را با کد ساختار قالبتون جایگزین یا در بخش کد ساختار قالب جدید بگذارید

فایل استایل قالب CSS

کدها را با کد استایل(CSS) قالبتون جایگزین یا در بخش فایل استایل (CSS) قالب جدید بگذارید

تبدیل رایگان قالب شما به بلاگ

ریسپانسیو سازی قالب شما

تبدیل قالب طراحی شده به کد (PSD TO HTML)

2015-09-07
نسخه رایگان قالب ریسپانسیو Hueman برای بلاگ

با سلام خدمت دوستان بلاگی عزیز ، امروز براتون قالب زیبا ، ریسپانسیو و پرکاربرد hueman را به بلاگ تبدیل کردم.

این قالب در دو نسخه رایگان و پولی ( یه کاپوچینو ) تبدیل کردم که نسخه پولی در پست آتی میگذارم.

ویژگی های قالب :

مناسب برای وبلاگ های شخصی و خبری

سه ستونه و کاملا ریسپانسیو ( نسخه کاپوچینو سه استایل متفاوت داره 🙂 )

استفاده از فونت یکان بهینه شده برای وب

و …

بهتر است خودتان تجربه کنید… 🙂

اسکرین شات

نسخه پولی ( با کلی امکانات) ” بزودی …”

دانلود ساختار قالب

دانلود استایل قالب

تبدیل قالب مورد علاقه شما به بلاگ

ریسپانسیو کردن قالب شما

2015-08-20
نسخه واکنش گرا ( responsive ) قالب ستون بلاگ

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

برای استفاده بهتر و کامل از این قالب یک نشانه از قسمت تنظیمات پیشرقته با نام portfolio ایجاد کنید ، چنان از قبل برای مطالب خود نشانه ایجاد کرده اید قسمت ویرایش قالب ؛ ساختار قالب را ویرایش کنید ، کدهای زیر را پیدا کنید و نام نشانه خود را جایگزین کنید.

<box:post_list flag=”portfolio” max=”3″>

portfolio را با نام نشانه خود جایگزین کنید.

فایل ساختار قالب

فایل استایل قالب

2015-08-08
نسخه واکنش گرا ( ریسپانسیو ) قالب امید بلاگ

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

برای استفاده بهتر و کامل از این قالب یک نشانه از قسمت تنظیمات پیشرقته با نام portfolio ایجاد کنید ، چنان از قبل برای مطالب خود نشانه ایجاد کرده اید قسمت ویرایش قالب ؛ ساختار قالب را ویرایش کنید ، کدهای زیر را پیدا کنید و نام نشانه خود را جایگزین کنید. خط 32 ساختار قالب.

<box:post_list flag=”portfolio” max=”3″>

portfolio را با نام نشانه خود جایگزین کنید.

فایل ساختار قالب

فایل استایل قالب

2015-08-07
نسخه واکنش گرا ( ریسپانسیو ) قالب امیدوار بلاگ

سلام خدمت بلاگ نویسان عزیز 🙂

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

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

پیش نمایش قالب

دانلود ساختار قالب

دانلود استایل قالب

اسکرین شات تست گوگل

2015-08-07