- آیکون‌های شبکه اجماعی
- فونت فارسی ساحل
- منو و لیست کشویی
- ریسپانسیو و واکنشگرا
قالب فروشگاه بلاگفا
یکی از بهترین قالب‌ها در بخش فروش فایل و اجناس ، طراحی ساده و بسیار منظم صورت گرفته ، طرح پیشفرض در این قالب فروش پوشاک درنظر گرفته شده شما میتونید به راحتی تصاویر و محتوا رو تغییر بدین و قالب فروشگاهی حرفه‌ای خودتون رو داشته باشید. در بلاگفا برخلاف سایر وبلاگ‌ها در کدنویسی بخش پست فقط یک حالت درنظر گرفته شده ، یعنی حالت نمایش اصلی و ادامه مطلب به یک صورت هست ، در این قالب در صفحه اصلی ، دسته‌بندی و برچسب‌ها پست‌ها به صورت شبکه‌ای نمایش داده میشن وقتی به ادامه مطلب مراجعه کنند به دلیل اسکریپتی که در قالب قرار داده شده استایل قالب متفاوت و به صورت تمام صفحه نمایش داده خواهد شد که پوینت مثبت این قالب هستش . کار با این قالب بسیار راحت هستش و اینکه توضیحات مربوط به قالب در خود کد به صورت کامنت درج شده قبل از استفاده قالب حتما این کامنت‌ها رو بخونید ، بخش حرفه‌ای دیگه‌ای که برای این قالب درنظر گرفته شده قسمت دسته‌بندی تصویری هستش که بالای محتوا در صفحه اصلی قرار میگیره تا توجه بازدیدکننده رو جلب و راهنمای سریعی باشه . اگر به دنبال قالب سبک و حرفه‌ای و ساده برای فروشگاه هستین قالب فروشگاه بلاگفای بلک تم رو از دست ندین
کپی کد قالب
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><-BlogAndPostTitle-></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-language" content="fa">
<meta name="description" content="<-BlogMetaDescription->">
<meta name="generator" content="blogfa.com">
<meta property="og:title" content="<-AutoPageTitle->">
<meta property="og:site_name" content="<-BlogTitle->">
<meta property="og:description" content="<-BlogMetaDescription->">
<meta name="twitter:title" content="<-AutoPageTitle->">
<meta name="twitter:description" content="<-BlogMetaDescription->">
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/rastikerdar/sahel-font/v3.4.0/dist/font-face.css">
<script src="http://theme.blogfa.com/public/theme.1.2.js" type="text/javascript" ></script>
<script type="text/javascript">
try {
cmt_caption[0]="نظرات";
cmt_caption[1]="نظر بدهید";
cmt_caption[2]="یک نظر";
cmt_caption[3]="نظر";
cmt_blogid="<-BlogId->";
}
catch(e) {}
</script>
<style>
body{line-height:1.8;overflow-x:hidden;font-size:14px}details,main{display:block}h1{font-size:2em}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;max-width:100%}button,optgroup,select{font-family:inherit;margin:0}button,input,optgroup,select,textarea{font-size:100%;line-height:1.15}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}*{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,input,p,span,textarea{font-family:'sahel',sans-serif,tahoma,arial;margin:0;padding:0}body{background-color:#fff;color:#25262a;direction:rtl}.blackthemeContainer{padding-right:15px;padding-left:15px;margin:auto;max-width:100%}@media (min-width:576px){.blackthemeContainer{max-width:540px}}@media (min-width:768px){.blackthemeContainer{max-width:720px}}@media (min-width:992px){.blackthemeContainer{max-width:960px}}@media (min-width:1200px){.blackthemeContainer{max-width:1140px}}header{border-bottom:1px solid #f3f3f4;padding-top:25px;padding-bottom:25px}.blackthemeFlex{display:flex;flex-direction:row;align-items:center;justify-content:space-between}header h1{font-size:25px}header h2{font-size:15px;margin-top:5px;font-weight:500}.blackthemeForm form{background:0 0;position:relative}.blackthemeForm form input{min-width:200px;height:30px;line-height:30px;border:0;outline:0;background:0 0;padding-right:15px}@media screen and (max-width:576px){.blackthemeForm form input{max-width:130px;min-width:130px;width:100%}}@media screen and (max-width:370px){.blackthemeForm form{display:none}}.blackthemeForm form input::placeholder{color:#868995}.blackthemeForm form button{position:absolute;z-index:1;left:10px;top:6px;font-size:16px;background:0 0;outline:0;border:0;padding:0;color:#868995;cursor:pointer}.blackthemeForm .navIcon{font-size:0;display:none;margin-right:10px}.blackthemeForm a i{height:30px;line-height:30px;font-size:16px;display:block;color:#868995}nav,nav>ul{display:block}.navOverlay,nav{will-change:contents}nav{text-align:center;transition:.5s ease left}.navOverlay{position:fixed;top:0;left:0;background-color:rgba(36,37,41,.5);z-index:8;cursor:pointer;height:100%;width:100%;display:none}nav>ul{padding:0;margin:0;font-size:0}nav>ul>li{display:inline-block;list-style:none;position:relative}nav>ul>li>a>i{margin-right:5px;transition:.5s ease transform}nav>ul>li:hover{color:#7971ea}nav>ul>li>a,nav>ul>li>ul>li>a{font-size:14px;display:block;padding:20px 15px}nav>ul>li>ul{position:absolute;right:50%;top:100%;width:200px;text-align:right;background:#fff;padding:0;margin:0;border:1px solid #efefef;border-top:2px solid #7971ea;display:none;transform:translateX(50%);z-index:2}.blackthemeCategory ul li,nav>ul>li>ul>li{display:block;list-style:none}nav>ul>li>ul>li>a{padding:10px;color:#868995}nav>ul>li>ul>li>a:hover{background:#f4f5f9;color:#25262a}nav>ul>.itemActive>a,nav>ul>.itemActive>ul>.itemActive>a{color:#7971ea!important}.blackthemeCategory ul li a,.blackthemeImage{height:500px;background-size:cover;background-position:top center;position:relative}.blackthemeCategory ul li a::before,.blackthemeImage::before{content:'';position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;background-color:rgba(36,37,41,.2)}.navLinkItem{transform:rotate(180deg)}.navSet{left:0}.nextandprevious{width:100%;max-width:768px;margin:25px auto;display:block;padding-right:15px;padding-left:15px}.nextandprevious a{padding:5px 10px;background:#7971ea;color:#fff}.nextandprevious a:hover{background:#3a2ee0}.previouslink{float:right}.nextlink{float:left}.clear{clear:both}@media screen and (min-width:768px){.navOverlay{display:none!important}}@media screen and (max-width:768px){.blackthemeForm .navIcon,nav>ul>li{display:block}nav{position:fixed;left:-260px;width:250px;background-color:#fff;top:0;z-index:9;height:100%;overflow-y:auto;text-align:right;padding:15px}nav>ul>li>a{padding:10px}nav>ul>li>ul{position:relative;top:0;opacity:1;pointer-events:1;right:0;width:100%;border:0;border-right:2px solid #7971ea;display:none;transition:none;transform:none}nav>ul>li>ul>li>a{padding-right:15px}}.blackthemeBorderSection{border-bottom:1px solid #f3f3f4;padding-bottom:40px}.blackthemeCategory ul{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:wrap;padding:0;margin:0}.blackthemeCategory ul li{min-width:33.333333%;padding:15px}.blackthemeCategory ul li a{height:340px;display:flex;flex-direction:row;align-items:flex-end;z-index:1;color:#fff;padding:15px;font-size:20px;font-weight:600}.blackthemeCategory ul li a:hover::before{background-color:rgba(36,37,41,.3)}.blackthemeCategory ul li a::before{background-color:rgba(36,37,41,.1);z-index:-1;transition:.3s all ease}.blackthemeBorderSection h6{padding:50px 0 30px;font-size:20px;text-align:center;font-weight:500;position:relative}.blackthemeBorderSection h6::before{content:'';height:2px;width:50px;background-color:#7971ea;position:absolute;top:40px;left:0;right:0;margin:auto}@media screen and (max-width:1200px){.blackthemeCategory ul li a{height:280px}}@media screen and (max-width:992px){.blackthemeCategory ul li{min-width:50%}.blackthemeCategory ul li a{height:315px}}@media screen and (max-width:768px){.blackthemeCategory ul li a{height:225px}.blackthemeImage{height:350px}}@media screen and (max-width:576px){.blackthemeCategory ul li{min-width:100%}.blackthemeCategory ul li a{height:225px}}.blackthemePost{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:wrap}.blackthemePostSet,.blackthemePostSet article .blackthemePostContent img,.blackthemePostSet article .blackthemePostContent p>img{display:block!important}.blackthemePostSet article{width:100%!important}.blackthemePostSet article .imgPostAppend{display:none!important}.blackthemePost article{width:33.333333%;padding:15px}.blackthemePost article .imgPostAppend{height:300px;background-color:#efefef;background-size:cover;background-position:top center}.blackthemePostSet article .blackthemePostBox{text-align:right!important}.blackthemePost article .blackthemePostBox{overflow:hidden;border-radius:5px;box-shadow:0 0 30px rgba(0,0,0,.1);background-color:#fff;text-align:center}.blackthemePostSet article .blackthemePostContent p{margin:2.5px 0}.blackthemePostSet .postContentMrgin{margin-bottom:25px}.blackthemePost article .blackthemePostContent img,.blackthemePost article .blackthemePostContent p>img{display:none}.blackthemePostSet .blackthemePostTitle{padding:15px 0!important}.blackthemePost .blackthemePostTitle{padding:0 15px}.blackthemePost .blackthemePostTitle a{color:#7971ea}.blackthemePost .blackthemePostTitle a:hover,.footerIcon a:hover,.footerIcon a:hover i{color:#3a2ee0}.blackthemePost .blackthemePostTitle h2{font-weight:600;font-size:20px}.blackthemePost .blackthemePostPadding{padding:20px 15px}.blackthemePostSet .blackthemePostContent{color:#25262a!important}.blackthemePost .blackthemePostContent{color:#868995}.blackthemePost .blackthemePostContent blockquote{padding:3px 15px 0;display:block;margin:0;color:#7971ea;font-weight:600}.blackthemePostSet .blackthemePostContent .postTag,.blackthemePostSet .blackthemePostInfo{display:block!important}.blackthemePost .blackthemePostInfo{color:#868995;display:none}.blackthemePost .blackthemePostInfo i{color:#7971ea;margin-right:15px;margin-left:5px}.blackthemePost .blackthemePostInfo i:first-child{margin-right:0}.blackthemePost .blackthemePostContent .postTag{display:none;margin:10px 0}.blackthemePost .blackthemePostContent .postTag i{margin-left:15px;color:#7971ea}@media screen and (max-width:1200px){.blackthemePost article .imgPostAppend{height:200px}}@media screen and (max-width:992px){.blackthemePost article{width:50%}}@media screen and (max-width:576px){.blackthemePost article{width:100%}}.blackthemeFooter,.footerIcon{display:flex;align-items:flex-start}.blackthemeFooter{flex-direction:row;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}.blackthemeFooter .blackthemeFooterBox{width:33.333333%;padding:20px}@media screen and (max-width:768px){.blackthemeFooter .blackthemeFooterBox{width:50%}}@media screen and (max-width:576px){.blackthemeFooter .blackthemeFooterBox{width:100%}}.footerIcon i{font-size:20px;color:#7971ea;margin-left:10px;width:20px;text-align:center}.footerIcon{flex-direction:column}.footerIcon a{margin-bottom:10px;display:inline-block;color:#868995}.blackthemeFooter .blackthemeFooterBox h6{font-size:18px;font-weight:400;margin-bottom:20px}.copyright{background-color:#7971ea;background-image:linear-gradient(to left,#3a2ee0,#7971ea);color:#fff;padding:30px;text-align:center}.copyright i{margin-right:15px;margin-left:15px}
</style>
</head>
<body>
<header>
<div class="blackthemeContainer blackthemeFlex">
<div>
<h1><a href="<-BlogUrl->"><-BlogTitle-></a></h1>
<h2><-BlogDescription->
</div>
<div class="blackthemeForm blackthemeFlex">
<form target="_new" method="get" action="http://www.google.com/search">
<input name="q" placeholder="جستجو کنید ..." dir="rtl">
<input value="<-BlogUrl->" type="radio" name="sitesearch" style="display: none" checked>
<button class="fa fa-search" type="submit" name="btnG"></button>
</form>
<a href="javascript:void(0);" class="navIcon"><i class="fa fa-navicon"></i></a>
</div>
</div>
</header>
<div class="navOverlay"></div>
<nav>
<ul>
<li class="itemActive"><a href="<-BlogUrl->">صفحه‌اصلی</a></li>
<li><a href="javascript:void(0)" class="blackthemeFlex">درباره وب<i class="fa fa-angle-down"></i></a>
<ul>
<BlogProfileLinkBlock><li><a href="<-BlogProfileLink->">پروفایل مدیر وبلاگ</a></li></BlogProfileLinkBlock>
<BlogEmailBlock><li><a href="mailto:<-BlogEmail->">پست الکترونیک</a></li></BlogEmailBlock>
<li><a href="<-BlogArchiveLink->">آرشیو وبلاگ</a></li>
<li><a href="/posts/">عناوین نوشته‌ها</a></li>
<li><a href="/rss/">نقشه وب</a></li>
</ul>
</li>
<BlogLinkDumpBlock>
<li><a href="javascript:void(0)" class="blackthemeFlex">پیوندها<i class="fa fa-angle-down"></i></a>
<ul>
<BlogLinkDump>
<li><a href="<-LinkUrl->" target="_blank" title="<-LinkDescription->"><-LinkTitle-></a></li>
</BlogLinkDump>
<li><a href="/links" onclick="return openlinks();">آرشیو پیوندهای روزانه</a></li>
</ul>
</li>
</BlogLinkDumpBlock>
<BlogArchiveBlock>
<li><a href="javascript:void(0)" class="blackthemeFlex">آرشیو<i class="fa fa-angle-down"></i></a>
<ul>
<BlogArchive>
<li><a href="<-ArchiveLink->"><-ArchiveTitle-></a></li>
</BlogArchive>
</ul>
</li>
</BlogArchiveBlock>
<BlogCategoriesBlock>
<li><a href="javascript:void(0)" class="blackthemeFlex">دسته‌بندی<i class="fa fa-angle-down"></i></a>
<ul>
<BlogCategories>
<li><a href="<-CategoryLink->"><-CategoryName-></a></li>
</BlogCategories>
</ul>
</li>
</BlogCategoriesBlock>
<BlogTagsBlock>
<li><a href="javascript:void(0)" class="blackthemeFlex">برچسب‌ها<i class="fa fa-angle-down"></i></a>
<ul>
<BlogTags>
<li><a href="<-TagLink->"><-TagName-></a> <i>(<-TagCount->)</i></li>
</BlogTags>
</ul>
</li>
</BlogTagsBlock>
<BlogAuthorsBlock>
<li><a href="javascript:void(0)" class="blackthemeFlex">نویسندگان<i class="fa fa-angle-down"></i></a>
<ul>
<BlogAuthors>
<li><a href="<-AuthorLink->"><-AuthorName-></a></li>
</BlogAuthors>
</ul>
</li>
</BlogAuthorsBlock>
<BlogLinksBlock>
<li><a href="javascript:void(0)" class="blackthemeFlex">دوستان<i class="fa fa-angle-down"></i></a>
<ul>
<BlogLinks>
<li><a href="<-LinkUrl->" target="_blank"><-LinkTitle-></a></li>
</BlogLinks>
</ul>
</li>
</BlogLinksBlock>
</ul>
</nav>
<!--
برای تغییر تصویر اصلی لینک عکس درون
url('')
را تغییر دهید
-->
<div class="blackthemeImage" style="background-image: url('http://s11.picofile.com/file/8396165542/back4.jpg')"></div>
<!--
در قسمت بعدی کد مربوط به دسته بندی مطالب قرار گرفته
برای اضافه کردن دسته بندی جدید کد زیر را کپی و تکرار کنید و قبل از
</ul>
قرار بدهید
<li><a href="#1" style="background-image: url('#2')">#3</a></li>
#۱ : لینک دسته بندی شما
#۲ : لینک تصویر شما
#۳ : عنوان دسته بندی شما
به جای هشتگ ها موارد ذکر شده رو جایگذاری کنید .
و اگر نیاز به این نوع دسته بندی ندارید کل کد را از قسمت شروع تا پایان حذف کنید
-->
<!-- شروع دسته بندی -->
<div class="blackthemeBorderSection categoryRemove">
<h6>دسته‌بندی</h6>
<div class="blackthemeContainer blackthemeCategory ">
<ul>
<li><a href="/category/1" style="background-image: url('http://s11.picofile.com/file/8396167842/img4.jpg')">مردانه</a></li>
<li><a href="/category/2" style="background-image: url('http://s10.picofile.com/file/8396167892/img7.jpg')">زنانه</a></li>
<li><a href="/category/3" style="background-image: url('http://s11.picofile.com/file/8396167876/img5.jpg')">بچگانه</a></li>
</ul>
</div>
</div>
<!-- پایان دسته بندی -->
<div class="blackthemeBorderSection">
<h6>مطالب سایت</h6>
<div class="blackthemeContainer blackthemePost">
<BLOGFA>
<article>
<div class="blackthemePostBox">
<div class="blackthemePostPadding">
<div class="blackthemePostTitle">
<h2><a href="<-PostLink->"><-PostTitle-></a></h2>
</div>
<div class="blackthemePostContent">
<-PostContent->
<div class="postContentMrgin"></div>
<BlogPostTagsBlock>
<div class="postTag">
<i class="fa fa-thumb-tack"></i>
<BlogPostTags separator=", "><a href="<-TagLink->">
<-TagName->
</a></BlogPostTags>
</div>
</BlogPostTagsBlock>
</div>
<div class="blackthemePostInfo">
<i class="fa fa-user-o"></i>
<-PostAuthor->
<i class="fa fa-calendar"></i>
<-PostDate->
<i class="fa fa-clock-o"></i>
<-PostTime->
<BlogComment><i class="fa fa-comment"></i> <span dir="rtl" comment-for="<-PostId->"></span>
</BlogComment>
</div>
</div>
</div>
</article>
</BLOGFA>
</div>
<div class="blackthemeContainer">
<BlogNextAndPreviousBlock>
<div class="nextandprevious">
<BlogPreviousPageBlock>
<a href="<-BlogPreviousPageLink->" class="previouslink">صفحه قبل</a>
</BlogPreviousPageBlock>
<BlogNextPageBlock>
<a href="<-BlogNextPageLink->" class="nextlink">صفحه بعد</a>
</BlogNextPageBlock>
<div class="clear"></div>
</div>
</BlogNextAndPreviousBlock>
</div>
</div>
<footer>
<div class="blackthemeContainer blackthemeFooter">
<div class="blackthemeFooterBox">
<h6>درباره وبلاگ</h6>
<BlogPhoto><img src="<-BlogPhotoLink->" ><br></BlogPhoto>
<-BlogAbout->
</div>
<div class="blackthemeFooterBox footerIcon">
<h6>شبکه‌های اجتماعی</h6>
<a href="#"><i class="fa fa-instagram"></i> اینستاگرام</a>
<a href="#"><i class="fa fa-telegram"></i> تلگرام</a>
<a href="#"><i class="fa fa-whatsapp"></i> واتس‌اپ</a>
<a href="#"><i class="fa fa-facebook"></i> فیسبوک</a>
<a href="#"><i class="fa fa-twitter"></i> تویتر</a>
<a href="#"><i class="fa fa-youtube"></i> یوتیوب</a>
</div>
<div class="blackthemeFooterBox">
<h6>کدهای وبلاگ</h6>
<-BlogCustomHtml->
</div>
</div>
<div class="copyright">
<i class="fa fa-diamond"></i>
طراحی شده توسط
<a href="http://blacktheme.ir/" title="مرجع قالب وبلاگ">بلک تم</a>
<i class="fa fa-diamond"></i>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
getWinUrl = window.location.pathname;
if (getWinUrl.indexOf('post') > -1) {
$('.categoryRemove').remove();
$('.blackthemePost').addClass('blackthemePostSet')
};
$('nav').each(function () {
$(this).find('ul li ul li a[href="' + getWinUrl + '"]').parents('ul>li', 'ul>li>ul>li').addClass('itemActive');
if ($('nav ul li ul li').hasClass('itemActive')) {
$('nav ul li').removeClass('itemActive');
$(this).find('ul li ul li a[href="' + getWinUrl + '"]').parents('ul>li', 'ul>li>ul>li').addClass('itemActive')
}
});
$('.blackthemePostBox').each(function () {
childMooka = $(this).children('.blackthemePostPadding').find('p>img');
if (childMooka.length) {
$(this).prepend('<div class="imgPostAppend"></div>')
};
getSrcPost = $(this).children('.blackthemePostPadding').find('p>img').attr('src');
$(this).children('.imgPostAppend').css({
'background-image': 'url(' + getSrcPost + ')'
})
});
$('.navIcon').click(function () {
$('nav').addClass('navSet');
$('.navOverlay').fadeIn(300)
});
$('.navOverlay').click(function () {
$('nav').removeClass('navSet');
$('.navOverlay').fadeOut(300)
});
$('nav>ul>li>a').click(function () {
$('nav>ul>li>ul').slideUp(500);
$('nav>ul>li>a').children('i').removeClass('navLinkItem');
if ($(this).nextAll('ul').is(':visible')) {
$(this).nextAll('ul').slideUp(500);
$(this).children('i').removeClass('navLinkItem')
} else {
$(this).nextAll('ul').slideDown(500);
$(this).children('i').addClass('navLinkItem')
}
})
</script>
</body>
</html>
من فقط به منو قالب شما نیاز دارم مشکل نداره که بقیه قسمت ها مثل تصاویر و نام بلک تم رو از قالب بردارم
خیر مشکلی نداره