قالب ساده بلاگفا
  • فونت فارسی شبنم
  • طرح‌های مختلف برای هر پست
  • سایدبار هوشمند
  • ریسپانسیو و واکنشگرا

قالب ساده بلاگفا

قبلا قالب‌های ساده زیادی رو طراحی کردم ، این سری گفتم برای تنوع هم شده یک سری تغییرات توش انجام بدم اولیش این هست که سایدبار کناری رو حالت چسبان گذاشتم تا در نمایشگرهای بزرگ سمت چپ خالی نباشه و فضا مورد استفاده قرار بگیره ، و اینکه دیدم بعضی از دوستان درباره تغییر شکل و شمایل بعضی از پست‌ها سوال میپرسن که بعضی از پست‌ها استایلشون متفاوت هست به فرض کل پست‌های وبلاگ پس زمینه سفید دارن ولی یکی از این پست‌ها پس زمینه مشکی داره و جلب توجه میکنه ، به همین دلیل گفتم توی این قالب قابلیت تنظیم تم مخصوص هر پست رو اضافه کنم ، من  ۵۲ استایل مختلف ساده رو طراحی کردم و براش صفت theme="..." رو درنظر گرفتم .

روش تغییر طرح پست

برای تغییر پست موقع ارسال پستتون بروی حالت منبع بگذارید و روی یکی از تگ‌ها صفت theme رو اضافه کنید و یکی از دیزاین‌هارو درونش قرار بدین تا css قالبتون متوجه بشه که این پست تم متفاوتی رو به خودش میگیره ، به عکس زیر توجه کنید :

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

در تصویر زیر من اول اومدم نوشته‌م رو آماده کردم و منبع رو زدم ، بعد یک تگ رو انتخاب کردم که اینجا تگ <p ... > .. </p> رو انتخاب کردم و بهش صفت theme="dark-1" رو دادم بعد در همون حالت منبع ارسالش میکنم ( توجه کنید هر سری که میخواید طرح پستتون رو عوض کنید باید اینکارو انجام بدین چون بلاگفا صفت‌ها رو برای ویرایش بعدی نگه نمیداره 🙁 .. )

تکه کد پایین کد تغییر داده شده در تصویر بالا هستش

<p dir="ltr" style="text-align:right">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>

تغییر به 

<p theme="dark-1" dir="ltr" style="text-align:right">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>

نکته : فرقی نمیکنه روی کدوم تگ صفت theme رو بذارید فقط توجه داشته باشید روی بدنه تگ باشه نه داخل تگ !

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

طرح‌های آماده شده

dark-1
dark-2
dark-3
dark-4
dark-5
dark-6
light-1
light-2
light-3
light-4
light-5
light-6
light-7
light-8
yellow
green
wheat
violet
tomato
teal
tan
slateblue
skyblue
silver
sienna
seagreen
sandybrown
salmon
royalblue
rosybrown
rebeccapurple
powderblue
plum
pink
palevioletred
palegreen
orchid
orangered
orange
navy
mediumspringgreen
lightsteelblue
mediumseagreen
lime
khaki
indigo
aqua
cornflowerblue
crimson
darkblue
firebrick
gold

هرکدوم از طرح‌ها رو که دوست داشتین به شیوه گفته شده استفاده کنید

انتخاب یک طرح برای همه پست‌ها

شاید از طرح پیشفرض پست‌ها خوشتون نیاد و دوست داشته باشید همه پست‌ها مثل dark-1 باشن برای اینکار لازمه برید بخش ویرایش قالب وبلاگتون و کد زیر رو پیدا کنید

<div class="blackthemePostBox blackthemePadding">

+برای راحتتر پیدا کردن ctrl+f رو بزنید و این کد رو کپی کنید داخل فیلد تا براتون هایلایت بشه

پس از پیدا کردن کد طرحی که انتخاب کردین رو به اخر کلاس‌های موجود توی این تگ div اضافه کنید به این صورت

<div class="blackthemePostBox blackthemePadding">
تغییر به 
<div class="blackthemePostBox blackthemePadding dark-1">

خب من طرح dark-1 رو اضافه کردم حالا ذخیره رو میزنم و پس از بازسازی وبلاگ میرم تغییرات رو مشاهده میکنم ، به این صورت همه پست‌ها یک طرح رو میگیرن ( اگر پستی رو به صورت تکی تغییر داده باشید همون طرح باقی خواهد موند )

ساختن طرح مخصوص

خب شاید از طرح‌های بالا خوشتون نیاد ( آی ام سو ساری خوش سلیقه نیستم 🙂 ) ، اینجاس که باید آستیناتون رو بالا بزنید و خودتون یک طرح درست کنید و به قالب اضافه کنید

اول میایم یک کلاس تعریف میکنیم ( فقط کلاس باشه چون کد اسکریپت نوشته شده براساس کلاس تنظیم شده ) ، بعد کلاس رو داخل تگ استایل موجود در قالب اصلی میذاریم یا اگر براتون گیج کننده‌اس کد رو داخل یک تگ استایل قرار بدین و توی کدها و جاوا اسکریپتهای اختصاصی کاربر اضافه کنید ، و بعدش مثل روش‌های بالا که که میرفتیم بصورت تکی یا دسته جمعی طرح پست‌هارو تغییر میدادیم کلاسی که خودتون ساختین رو قرار میدین داخل theme به صورت زیر

<style>
    .myTheme {
        background:blue;
        color:#fff;
        font-size:20pt;
        border:none;
        word-spacing:5px;
    }
</style>

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

theme="myTheme"

 

سوالی بود درخدمتم ، امیدوارم ازین قالب خوشتون اومده باشه 🙂

کپی کد قالب

<!DOCTYPE html>
<html>
<!-- theme designed by https://blacktheme.ir  | Weblog Themes & code for Weblog -->
<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 type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/shabnam-font@v5.0.1/dist/font-face.css">
<style>html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}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}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}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}img{max-width:100%}*{box-sizing:border-box}body{background-color:#f2f2f2;line-height:1.8;padding:0;margin:0;direction:rtl;font-size:11pt;color:#111}body,button,input,textarea{font-family:Shabnam,sans-serif,tahoma,arial}a{text-decoration:none;color:inherit}.blackthemeBox{background-color:#fff;max-width:992px;min-height:400px;box-shadow:0 0 30px hsla(0,0%,87%,.15);position:relative;margin:30px auto;border-radius:10px;}.blackthemePadding{padding:20px}header .blackthemePadding{display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;flex-wrap:wrap}header{background-color:#093939;color:#fff;border-radius: 10px 10px 0 0;}header h1{margin:0;padding:0;font-size:20pt}header nav ul{padding:0;margin:0;list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;font-weight:700}header nav ul li{margin-left:20px}.blackthemePartition{display:flex;flex-direction:row;align-items:stretch}.blackthemePartContent{width:100%;padding-left:40px}.blackthemePartSide{min-width:250px;width:100%;max-width:250px;position:relative;border:2px solid #f2f2f2;border-radius:5px}.blackthemeSidebar{position: -webkit-sticky;position:sticky;top:10px;}.blackthemeSidebarBox{margin-bottom:50px}.blackthemeSidebarBox h6{padding:0;margin:0;font-size:11pt;position:relative;padding-bottom:10px;margin-bottom:20px;color:#093939}.blackthemeSidebarBox h6::before{content:'';height:2px;width:33px;background-color:#093939;position:absolute;right:0;bottom:0}.blackthemeSidebarBox ul{margin:0;padding:0;list-style:none}.blackthemeSidebarBox ul li:hover{background-color:#f5f5f5}.blackthemePostBox{border:2px solid #f2f2f2;border-radius:5px;margin-bottom:40px}.blackthemePostTitle{padding:0;margin:10px 0 20px 0}.blackthemeClear{clear:both}.blackthemePostInfo{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding-top:20px;opacity:.85;font-size:10pt}.blackthemePostComment,.blackthemePostDetail{display:flex;flex-direction:row;align-items:center}.blackthemeDetailShape{display:flex;flex-wrap:wrap;flex-direction:column}.blackthemePostInfo svg{display:block;height:26px;width:26px;margin-left:10px}.blackthemePagination{border:2px solid #f2f2f2;border-radius:5px}.blackthemePrevious{float:right}.blackthemeNext{float:left}footer{background-color:#093939;color:#fff;border-radius: 0 0 10px 10px;text-align:center}footer h2{font-size:11pt;font-weight:400;margin:0;padding:0}.dark-1{background-color:#1d1b1b;color:#fff;border-color:#1d1b1b}.dark-2{background-color:#093939;color:#f5f5f5}.dark-3{background-color:#252525;color:#ccc}.dark-4{background-color:#000;color:#00ff15;border-right:5px solid #00ff15;font-family:monospace;border-radius:0}.dark-5{background-color:#333;color:gold}.dark-6{background-color:#363636;color:#d8d8d8}.light-1{background-color:#f2f2f2;color:#000}.light-2{background-color:#ccc;color:#333;border-color:#ccc}.light-3{background-color:#fff9ec;color:#979186;border-color:#979186}.light-4{background-color:#f3eeea;color:#575350;border-color:#f3eeea}.light-5{background-color:#a56c94;color:#111;border-color:#120a0f;border-width:6px}.light-6{background-color:#fff;color:#736763;border-color:#403f3e;border-width:10px;border-style:double}.light-7{background-color:#282057;color:#adad65;border-color:#282057}.light-8{background-color:#fff;color:#555;border-color:#b8dbd8}.yellow{background-color:#ff0;border-color:#ff0;color:#111}.green{background-color:green;border-color:green;color:#fff}.wheat{background-color:wheat;border-color:wheat;color:#111}.violet{background-color:violet;border-color:violet;color:#111}.tomato{background-color:tomato;border-color:tomato;color:#111}.teal{background-color:teal;border-color:teal;color:#fff}.tan{background-color:tan;border-color:tan;color:#111}.slateblue{background-color:#6a5acd;border-color:#6a5acd;color:#fff}.skyblue{background-color:#87ceeb;border-color:#87ceeb;color:#111}.silver{background-color:silver;border-color:silver;color:#111}.sienna{background-color:sienna;border-color:sienna;color:#fff}.seagreen{background-color:#2e8b57;border-color:#2e8b57;color:#fff}.sandybrown{background-color:#f4a460;border-color:#f4a460;color:#111}.salmon{background-color:salmon;border-color:salmon;color:#111}.royalblue{background-color:#4169e1;border-color:#4169e1;color:#fff}.rosybrown{background-color:#bc8f8f;border-color:#bc8f8f;color:#111}.rebeccapurple{background-color:#663399;border-color:#663399;color:#fff}.powderblue{background-color:#b0e0e6;border-color:#b0e0e6;color:#111}.plum{background-color:plum;border-color:plum;color:#111}.pink{background-color:pink;border-color:pink;color:#111}.palevioletred{background-color:#db7093;border-color:#db7093;color:#111}.palegreen{background-color:#98fb98;border-color:#98fb98;color:#111}.orchid{background-color:orchid;border-color:orchid;color:#111}.orangered{background-color:#ff4500;border-color:#ff4500;color:#111}.orange{background-color:orange;border-color:orange;color:#111}.navy{background-color:navy;border-color:navy;color:#fff}.mediumspringgreen{background-color:#00fa9a;border-color:#00fa9a;color:#111}.lightsteelblue{background-color:#b0c4de;border-color:#b0c4de;color:#111}.mediumseagreen{background-color:#3cb371;border-color:#3cb371;color:#fff}.lime{background-color:#0f0;border-color:#0f0;color:#111}.khaki{background-color:khaki;border-color:khaki;color:#111}.indigo{background-color:indigo;border-color:indigo;color:#fff}.aqua{background-color:#0ff;border-color:#0ff;color:#111}.cornflowerblue{background-color:#6495ed;border-color:#6495ed;color:#111}.crimson{background-color:#dc143c;border-color:#dc143c;color:#111}.darkblue{background-color:#00008b;border-color:#00008b;color:#fff}.firebrick{background-color:#b22222;border-color:#b22222;color:#fff}.gold{background-color:gold;border-color:gold;color:#111}@media screen and (max-width:992px){.blackthemeBox{margin:0 auto;}footer,header{border-radius:0}}@media screen and (max-width:768px){.blackthemePartition{flex-direction:column}.blackthemePartContent{padding-left:0;margin-bottom:40px}.blackthemePartSide{width:100%;max-width:100%;min-width:100%}header .blackthemePadding{flex-direction:column}nav{margin-bottom:20px}}</style>
<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>
</head>
<body>

  <div class="blackthemeBox">
    <header>
      <div class="blackthemePadding">
        <nav>
          <ul>
            <li><a href="/">خانه</a></li>
            <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>
          </ul>
        </nav>
        <div class="blackthemeBlogInfo">
          <h1><a href="<-BlogUrl->"><-BlogTitle-></a></h1>
        </div>
      </div>
    </header>

    <div class="blackthemePadding">
      <div class="blackthemePartition">
        <div class="blackthemePartContent">
          <BLOGFA>
            <div class="blackthemePostBox blackthemePadding">
              <h2 class="blackthemePostTitle"><a href="<-PostLink->">
                  <-PostTitle->
                </a></h2>
              <div class="blackthemePostContent">
                <-PostContent->
                  <div class="blackthemeClear"></div>
                  <BlogExtendedPost><a href="<-PostLink->">ادامه نوشته</a></BlogExtendedPost>
          
                  <BlogPostTagsBlock>
                    <div class="blackthemePostTag">
                      <span>برچسب‌ها: </span>
                      <BlogPostTags separator=", "><a href="<-TagLink->">
                          <-TagName->
                        </a></BlogPostTags>
                    </div>
                  </BlogPostTagsBlock>
              </div>
          
              <div class="blackthemePostInfo">
                <div class="blackthemePostDetail">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-user">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                  </svg>
                  <div class="blackthemeDetailShape">
                    <span>
                      <-PostAuthor->
                    </span>
                    <span>
                      <-PostDate-> &nbsp;|&nbsp; <-PostTime->
                    </span>
                  </div>
                </div>
                <BlogComment>
                  <div class="blackthemePostComment">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square">
                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                    </svg>
                    <span dir="rtl" comment-for="<-PostId->"></span>
                  </div>
                </BlogComment>
              </div>
          
            </div>
          </BLOGFA>
          <BlogNextAndPreviousBlock>
            <div class="blackthemePagination blackthemePadding">
              <BlogPreviousPageBlock>
                <a href="<-BlogPreviousPageLink->" class="blackthemePrevious">صفحه قبل</a>
              </BlogPreviousPageBlock>
              <BlogNextPageBlock>
                <a href="<-BlogNextPageLink->" class="blackthemeNext">صفحه بعد</a>
              </BlogNextPageBlock>
              <div class="blackthemeClear"></div>
            </div>
          </BlogNextAndPreviousBlock>
          <!-- content -->
        </div>

        <div class="blackthemePartSide blackthemePadding">
          <div class="blackthemeSidebar">
      
            <BlogProfile>
              <div class="blackthemeSidebarBox">
                <h6>بیوگرافی</h6>
                <BlogPhoto><img src="<-BlogPhotoLink->"><br></BlogPhoto>
                <-BlogAbout->
              </div>
            </BlogProfile>
        
            <BlogLinkDumpBlock>
              <div class="blackthemeSidebarBox">
                <h6>پیوندهای روزانه</h6>
                <ul>
                  <BlogLinkDump>
                    <li><a href="<-LinkUrl->" target="_blank" title="<-LinkDescription->">
                        <-LinkTitle->
                      </a></li>
                  </BlogLinkDump>
                  <li><a href="/links" onclick="return openlinks();">آرشیو پیوندهای روزانه</a></li>
                </ul>
              </div>
            </BlogLinkDumpBlock>
        
        
        
            <BlogArchiveBlock>
              <div class="blackthemeSidebarBox">
                <h6>نوشته‌های پیشین</h6>
                <ul>
                  <BlogArchive>
                    <li><a href="<-ArchiveLink->">
                        <-ArchiveTitle->
                      </a></li>
                  </BlogArchive>
                </ul>
              </div>
            </BlogArchiveBlock>
        
        
        
            <BlogCategoriesBlock>
              <div class="blackthemeSidebarBox">
                <h6>آرشیو موضوعی</h6>
                <ul>
                  <BlogCategories>
                    <li><a href="<-CategoryLink->">
                        <-CategoryName->
                      </a></li>
                  </BlogCategories>
                </ul>
              </div>
            </BlogCategoriesBlock>
        
        
            <BlogTagsBlock>
              <div class="blackthemeSidebarBox">
                <h6>برچسب‌ها</h6>
                <ul>
                  <BlogTags>
                    <li><a href="<-TagLink->">
                        <-TagName->
                      </a> <span> (<-TagCount->)</span></li>
                  </BlogTags>
                </ul>
              </div>
            </BlogTagsBlock>
        
        
        
            <BlogAuthorsBlock>
              <div class="blackthemeSidebarBox">
                <h6>نویسندگان</h6>
                <ul>
                  <BlogAuthors>
                    <li><a href="<-AuthorLink->">
                        <-AuthorName->
                      </a></li>
                  </BlogAuthors>
                </ul>
              </div>
            </BlogAuthorsBlock>
        
        
        
            <BlogLinksBlock>
              <div class="blackthemeSidebarBox">
                <h6>پیوندها</h6>
                <ul>
                  <BlogLinks>
                    <li><a href="<-LinkUrl->" target="_blank">
                        <-LinkTitle->
                      </a></li>
                  </BlogLinks>
                </ul>
              </div>
            </BlogLinksBlock>
        
        
        
            <div class="blackthemeSidebarBox">
              <h6>کدوبلاگ</h6>
              <-BlogCustomHtml->
              <div class="blackthemeClear"></div>
            </div>
      
        
          </div>
        </div>
      </div>
    </div>

    <footer class="blackthemePadding">
      <h2>
        قالب طراحی شده توسط <a href="https://blacktheme.ir" target="_blank" title="قالب وبلاگ و کد وبلاگ">بلک تم</a>
      </h2>
    </footer>
    <!-- box -->
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>$(".blackthemePostBox").each((function(){if($(this).find("*[theme]").length){var getTypeTheme=$(this).find("*[theme]").attr("theme");$(this).addClass(getTypeTheme)}}));</script>


</html>

 

قالب بلاگفا

دانلود قالب وبلاگطراحی قالب وبلاگقالب بلاگفاقالب ساده بلاگفاقالب ساده وبلاگ بلاگفاقالب شیک بلاگفاقالب طرح ساده بلاگفاقالب وبلاگقالب وبلاگ ساده

۴ دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *