
- آیکونهای شبکه اجماعی
- فونت فارسی ساحل
- منو و لیست کشویی
- ریسپانسیو و واکنشگرا
قالب فروشگاه بلاگفا
یکی از بهترین قالبها در بخش فروش فایل و اجناس ، طراحی ساده و بسیار منظم صورت گرفته ، طرح پیشفرض در این قالب فروش پوشاک درنظر گرفته شده شما میتونید به راحتی تصاویر و محتوا رو تغییر بدین و قالب فروشگاهی حرفهای خودتون رو داشته باشید. در بلاگفا برخلاف سایر وبلاگها در کدنویسی بخش پست فقط یک حالت درنظر گرفته شده ، یعنی حالت نمایش اصلی و ادامه مطلب به یک صورت هست ، در این قالب در صفحه اصلی ، دستهبندی و برچسبها پستها به صورت شبکهای نمایش داده میشن وقتی به ادامه مطلب مراجعه کنند به دلیل اسکریپتی که در قالب قرار داده شده استایل قالب متفاوت و به صورت تمام صفحه نمایش داده خواهد شد که پوینت مثبت این قالب هستش . کار با این قالب بسیار راحت هستش و اینکه توضیحات مربوط به قالب در خود کد به صورت کامنت درج شده قبل از استفاده قالب حتما این کامنتها رو بخونید ، بخش حرفهای دیگهای که برای این قالب درنظر گرفته شده قسمت دستهبندی تصویری هستش که بالای محتوا در صفحه اصلی قرار میگیره تا توجه بازدیدکننده رو جلب و راهنمای سریعی باشه . اگر به دنبال قالب سبک و حرفهای و ساده برای فروشگاه هستین قالب فروشگاه بلاگفای بلک تم رو از دست ندین
کپی کد قالب
<!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>
من فقط به منو قالب شما نیاز دارم مشکل نداره که بقیه قسمت ها مثل تصاویر و نام بلک تم رو از قالب بردارم
خیر مشکلی نداره
سلام میشه یکم بیشتر درباره ی گذاشتن لینک در تصویر صحبت کنید.
کد و اطلاعات مورد نظر رو در صورت امکان بهم بگین. در ضمن قالب طراحی شده تون خیلی خوبِ
سلام ، لینک در تصویر ؟ متوجه نشدم منظورتون رو اگر بخش دسته بندی منظورتونه که در خود قالب توضیح داده شده کدش رو چک کنید.
سلام
چطور باید اون عکس لباس که اول سایت است را عوض کنیم ؟
و اینکه چطور قسمت دسته بندی را تغییر دهیم ؟
سلام دوست عزیز در کد قالب توضیحات لازم قرار داده شده .
سلام چرا عکس مطالب نمیاد؟؟ منظورم زیر دسته بندی هستش