قالب گل صورتی بلاگفا
قالب گل صورتی یکی از قالبهای ساده و شکیل با رنگ های روشن سفید و روشن است ، در این قالب از سایدبار کناری هوشمند چسبان استفاده شده ، منوی کشویی که در این قالب استفاده شده باعث شده قالب طرحی مرتب و منظم داشته باشه ، فونت گوگل هم در این قالب برای سرتیتر منو و لیست ها استفاده شده ، اگه به دنبال یک قالب ساده و مرتب هستین این قالب رو از دست ندین
- فونت فارسی ساحل
- منو و لیست کشویی
- ریسپانسیو و واکنشگرا
کپی کد قالب
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> <-BlogAndPostTitle-> </title> <meta http-equiv="content-language" content="fa"> <meta name="description" content="<-BlogMetaDescription->"> <meta name="generator" content="blogfa.com"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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 href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'> <link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/rastikerdar/sahel-font/v3.4.0/dist/font-face.css"> <style> body{background-color:#fde8e3;background-repeat: no-repeat;background-attachment: fixed;font-family:sahel,sans-serif,tahoma,arial;font-size:13px;font-weight:400;color:#2e2928;margin:0;line-height:1.7em;overflow-x:hidden;background-size:cover}header .blackthemeMainBox {color:#fff;}a,button,h1,h2,h3,h4,h5,h6,input,span,ul{padding:0;text-decoration:none;margin:0;list-style:none}video{height:auto;margin:0 auto;border-radius:3px}table{width:100%!important;height:auto}blockquote{border-right:3px solid #ccc5b9;padding-right:10px}a{color:inherit}.post h2,a:hover{color:#ea7986}*{box-sizing:border-box}img,video{max-width:100%}.wrap{max-width:1200px;margin:auto;direction:rtl}.container{padding-right:15px;padding-left:15px}header{background:#ffe4e9 no-repeat center;background-size:cover;min-height:400px}header{background-image: url('http://s6.picofile.com/file/8392484292/flwer.jpg')}header .container{padding-top:70px;padding-bottom:70px;background:0 0;border:0;color:#fff;text-shadow:-1px 1px 1px #2e2928}header .container h1{margin-bottom:45px;font-size:40pt}.blackthemeMainBox{background:#fff;border:1px solid #decdc9;margin:auto;padding:45px}.menu ul,.partLeft .box h6,.partLeft .imgBox .img span,footer .wrap{display:flex;flex-direction:row;align-items:center}.appendMenu ul,.menu ul{font-family:Raleway,sahel,sans-serif,tahoma,arial;text-transform:uppercase}.menu ul{margin:0;position:relative;justify-content:space-around;padding:0 50px}.menu ul::after,.menu ul::before{width:50px}.menu ul::after,.menu ul::before,.post .postComment::before{height:1px;position:absolute;content:"";top:0;bottom:0;background:#decdc9;margin:auto}.menu ul::before{right:0}.menu ul::after,.post .postComment::before{left:0}.menu li{list-style-type:none;letter-spacing:2px;position:relative}.menu li a,.menu li:hover ul,video{display:block}.menu li a{padding:5px 0}.menu li ul{position:absolute;right:50%;transform:translateX(50%);width:200px;border:1px solid #decdc9;top:100%;background:#fff;padding:10px;text-transform:unset;font-family:unset;z-index:1}.menu li ul li{letter-spacing:0;padding:3px 0}.menu li ul li a,body{padding:0}.menu .menuHome{color:#ea7986;display:block}.appendMenu,.appendMenu .iconMenu,.appendMenu .menuHome,.menu .iconMenu,.menu li ul,.menu li ul::after,.menu li ul::before,.menuC{display:none}.appendMenu ul,.menu li{font-weight:600}.appendMenu ul li{color:#ea7986;padding:0;background:#fde8e3;margin:0}.appendMenu ul li a{padding:10px;display:block}.appendMenu ul li ul{padding:10px 0;background:#fff}.appendMenu ul li ul li{color:#2e2928;cursor:default;padding:3px 0;background:0 0}.appendMenu ul li ul li a{padding:0 10px}@media screen and (min-width:768px){.appendMenu{display:none!important}}.partWrap{display:flex;flex-direction:row;align-items:flex-start;padding:45px 0}.partWrap .partRight{width:100%;padding-left:45px}.partWrap .partLeft{min-width:300px;max-width:300px;padding-top:25px;position:sticky;position:-webkit-sticky;top:20px}.partLeft .box{padding:15px;border:1px solid #decdc9;margin-bottom:50px}.partLeft .imgBox{padding:5px;position:relative;user-select:none}.partLeft .imgBox .img::before{content:"";top:0;right:0;width:100%;height:100%;position:absolute;opacity:0;background-image:linear-gradient(-45deg,#ea7986,#fde8e3);background-image:-webkit-linear-gradient(-45deg,#ea7986,#fde8e3);background-image:-moz-linear-gradient(-45deg,#ea7986,#fde8e3);background-image:-ms-linear-gradient(-45deg,#ea7986,#fde8e3);transition:.5s all ease;-webkit-transition:.5s all ease;-moz-transition:.5s all ease;-ms-transition:.5s all ease}.partLeft .imgBox .img span{pointer-events:none;opacity:0;z-index:1;color:#fff;font-size:17px;position:absolute;top:0;left:0;text-align:center;width:100%;height:100%;margin:auto;justify-content:center}.partLeft .imgBox:hover .img span{opacity:1;transition:.3s all ease;transition-delay:.5s}.partLeft .imgBox .img{position:relative;transition:.3s all ease}.partLeft .imgBox img{display:block;width:100%}.partLeft .box h6,footer .wrap{justify-content:space-between}.partLeft .box h6{margin-top:-25px;background:#fff;font-size:13px;font-family:Raleway,sahel,sans-serif,tahoma,arial;text-transform:uppercase;letter-spacing:2px;color:#ea7986;padding:0 25px}.partLeft .box h6 i{font-size:18px}.partLeft .tagCloud li{display:inline-block;margin-left:5px;margin-bottom:5px}.partLeft .tagCloud li a{display:block;background:#ea7986;border-radius:5px;color:#fff;padding:5px 10px}.partLeft .box h6,.post,.postData{margin-bottom:25px}.post h2{font-weight:400;padding:15px 0;font-size:26px}.postData{color:#b0a5a2;font-style:italic}.post .continue,.postcontent{margin-bottom:10px}.post .continue{background:#ea7986;color:#fff;border-radius:5px;height:30px;line-height:30px;padding:0 10px;display:block;width:120px}.nextandprevious a:hover,.partLeft .imgBox:hover .img::before,.partLeft .tagCloud li a:hover,.post .continue:hover{opacity:.8}.nextandprevious a,.post .continue,.post .postComment{text-align:center;font-family:Raleway,sahel,sans-serif,tahoma,arial;text-transform:uppercase;letter-spacing:2px}.post .postComment{margin:25px 0;position:relative;direction:rtl;font-size:14px}.post .postComment::before{width:100%;z-index:0}.post .postComment div a{flex-direction:row;align-items:center;margin:auto;text-align:center;justify-content:center}.post .postComment div a::before{content:"\f004";font-family:FontAwesome;margin-right:10px}.post .postComment div a:hover{color:#2e2928}.post .postComment div{padding:10px 20px;background:#fff;z-index:1;position:relative;display:inline-block;color:#ea7986}.nextandprevious{margin:45px auto;max-width:400px}.nextandprevious a{background:#ea7986;color:#fff;border-radius:5px;height:30px;line-height:30px;padding:0 10px;display:block;width:170px;margin-bottom:10px}.nextandprevious .previouslink{float:right}.nextandprevious .nextlink{float:left}.clear{clear:both}footer{background:#ea7986;direction:rtl}footer .wrap{padding:25px 15px;color:#fff;font-size:14px;word-spacing:1px}footer .wrap span{margin:5px;display:block}footer .wrap a{border-bottom:1px dotted rgba(255,255,255,.5)}@media screen and (max-width:992px){.partWrap{flex-direction:column;justify-content:center;align-items:center}.partWrap .partRight{padding-left:0;padding-right:0}.partWrap .partLeft{min-width:auto;max-width:300px;width:100%;position:relative}}@media screen and (max-width:768px){.blackthemeMainBox,nav{padding:15px;border:0}nav{border:1px solid #decdc9}.appendMenu{border-top:1px solid #ccb2ac;margin-top:15px;padding:15px 0}.menu li,.menu ul::after,.menu ul::before{display:none}.menu .iconMenu{display:block}.menu ul{justify-content:space-between;padding:0}footer .wrap{flex-direction:column;justify-content:center}}@media screen and (max-width:576px){.nextandprevious .nextlink,.nextandprevious .previouslink{float:none;display:block;width:100%!important}} </style> <script src="http://theme.blogfa.com/public/theme.1.2.js" type="text/javascript"></script> <script type="text/javascript"> try { cmt_caption[0] = "cms"; cmt_caption[1] = "cm"; cmt_caption[2] = "1 cm"; cmt_caption[3] = "cm"; cmt_blogid = "<-BlogId->"; } catch (e) { } </script> </head> <body> <div class="wrap"> <header> <div class="blackthemeMainBox container"> <h1><a href="<-BlogUrl->"> <-BlogTitle-> </a></h1> <h2> <-BlogDescription-> </h2> </div> </header> <div class="blackthemeMainBox"> <nav> <div class="menu"> <ul class="ulMenu"> <li class="menuHome"><a href="/">home</a></li> <li><a href="javascript:void(0);">web</a> <ul> <BlogProfileLinkBlock> <li><a href="<-BlogProfileLink->">profile</a></li> </BlogProfileLinkBlock> <BlogEmailBlock> <li><a href="mailto:<-BlogEmail->">email</a></li> </BlogEmailBlock> <li><a href="<-BlogArchiveLink->">archive</a></li> <li><a href="/posts/">titles</a></li> <li><a href="/rss/">rss</a></li> </ul> </li> <BlogLinkDumpBlock> <li><a href="javascript:void(0);">link</a> <ul> <BlogLinkDump> <li><a href="<-LinkUrl->" target="_blank" title="<-LinkDescription->"> <-LinkTitle-> </a></li> </BlogLinkDump> <li><a href="/links" onclick="return openlinks();">Archive</a></li> </ul> </li> </BlogLinkDumpBlock> <BlogCategoriesBlock> <li><a href="javascript:void(0)">category</a> <ul> <BlogCategories> <li><a href="<-CategoryLink->"> <-CategoryName-> </a></li> </BlogCategories> </ul> </li> </BlogCategoriesBlock> <BlogArchiveBlock> <li><a href="javascript:void(0)">archive</a> <ul> <BlogArchive> <li><a href="<-ArchiveLink->"> <-ArchiveTitle-> </a></li> </BlogArchive> </ul> </li> </BlogArchiveBlock> <BlogAuthorsBlock> <li> <li><a href="javascript:void(0)">author</a> <ul> <BlogAuthors> <li><a href="<-AuthorLink->"> <-AuthorName-> </a></li> </BlogAuthors> </ul> </li> </BlogAuthorsBlock> <BlogLinksBlock> <li><a href="javascript:void(0)">friend</a> <ul> <BlogLinks> <li><a href="<-LinkUrl->" target="_blank"> <-LinkTitle-> </a></li> </BlogLinks> </ul> </li> </BlogLinksBlock> <li class="iconMenu"><a href="javascript:void(0)"><span class="menuM">menu</span><span class="menuC">close</span></a> </ul> </div> <div class="appendMenu"> </div> </nav> <div class="partWrap"> <div class="partRight"> <BLOGFA> <article> <div class="post"> <h2><a href="<-PostLink->"> <-PostTitle-> </a></h2> <div class="postData"> <a href="<-PostLink->">+</a> <-PostDate-> | <-PostTime-> | <-PostAuthor-> </div> <div class="postcontent"> <-PostContent-> </div> <BlogExtendedPost><a href="<-PostLink->" class="continue">continue</a> </BlogExtendedPost> <BlogPostTagsBlock> <div> <span class="fa fa-thumb-tack"> </span> <BlogPostTags separator=", "><a href="<-TagLink->"> <-TagName-> </a></BlogPostTags> </div> </BlogPostTagsBlock> <div class="postComment"> <BlogComment> <div> <span dir="rtl" comment-for="<-PostId->"></span> </div> </BlogComment> </div> </div> <!-- end post --> </article> </BLOGFA> <BlogNextAndPreviousBlock> <div class="nextandprevious"> <BlogPreviousPageBlock> <a href="<-BlogPreviousPageLink->" class="previouslink">previous page</a> </BlogPreviousPageBlock> <BlogNextPageBlock> <a href="<-BlogNextPageLink->" class="nextlink">next page</a> </BlogNextPageBlock> <div class="clear"></div> </div> </BlogNextAndPreviousBlock> </div> <div class="partLeft"> <div class="box imgBox"> <div class="img"> <span> <-BlogTitle-> </span> <img src="http://s6.picofile.com/file/8392484292/flwer.jpg" alt=""> </div> </div> <BlogProfile> <div class="box"> <h6>about us <i class="fa fa-info"></i></h6> <BlogPhoto><img src="<-BlogPhotoLink->"><br></BlogPhoto> <-BlogAbout-> </div> </BlogProfile> <BlogTagsBlock> <div class="box"> <h6>tags <i class="fa fa-tag"></i></h6> <ul class="tagCloud"> <BlogTags> <li><a href="<-TagLink->"> <-TagName-> </a></li> </BlogTags> </ul> </div> </BlogTagsBlock> <div class="box"> <h6>code <i class="fa fa-star"></i></h6> <-BlogCustomHtml-> </div> </div> </div> </div> </div> <footer> <div class="wrap"> <span>تمامی محتوای این وبلاگ محفوظ و متعلق به <a href="<-BlogUrl->"> <-BlogTitle-> </a> میباشد</span> <span class="copyright">طراحی شده توسط <a href="http://blacktheme.ir/" title="طراحی قالب و طراحی سایت">بلک تم</a></span> </div> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function () { $('.menu .ulMenu').clone().appendTo('.appendMenu'); $('.iconMenu').click(function () { $('.iconMenu .menuC').toggle(0); $('.iconMenu .menuM').toggle(0); $('.appendMenu').slideToggle(500) }); }); </script> </body> </html>