بایگانی آموزش ها

آموزش اضافه کردن هدر به قالب دستخط

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

ویرایش کد قالب دستخط

برای ویرایش کد لازمه از طریق این آدرس پایین برید و عملیات رو شروع کنید. 

از میزکار به این آدرس برید : تنظیمات > قالب های من > قالبی که فعاله و تیک سبز داره (رو اسمش بزنید) > کد قالب 
* برای راحتی کار میتونید روی " تمام صفحه " بزنید تا کامل صفحه کد براتون باز شه..

اولین بخشی که قراره تغییر بدید این بخش مربوط به کد هدر هستش که بجای این کد (بخشی که با خط زرد مشخص شده) :

این کد رو جایگذاری میکنید :
* اگه دوست داشتید میتونید هر کدوم از سه بخش رو به دلخواه با عکس دیگه ای تغییر بدید؛
برای تغییر عکس هدر تو خط اول داخل دابل کوتیشن " " لینک مستقیم عکسی که میخواین رو قرار بدید.
برای تغییر عکس پروفایل وبلاگ (عکس دایره ای) اگه نمیخواین عکس اصلی وبلاگ باشه میتونید در خط دوم بجای <-BlogPhotoLink-> که داخل دابل کوتیشن قرار داره، لینک مستقیم عکسی که میخواین رو قرار بدید.
و در آخر برای تغییر آیکون نشان کنار پروفایل که برگ شبدر گذاشتم، میتونید در خط پنجم داخل دابل کوتیشن " " لینک مستقیم آیکونی که میخواید رو قرار بدید.

<img src="https://s17.uupload.ir/files/iweiu/jpg/screenshot/Untitled-1.jpg" class="header-bg">
          <header> <div class="header-img"> 
            <img src="<-BlogPhotoLink->" alt="Profile" class="mainprofile" alt="<-BlogTitle->"> 
            <a href="<-BlogFollowLink->" target="_blank" >
              <img src="https://iweiu.storage.c2.liara.space/gif/pixel.jungle/31.gif" class="markprofile" id="markbtm">
              </a>
            </div> <div class="header-info"> 
              <h1> 
                <a href="<-BlogUrl->">
                <-BlogTitle->
                  </a> 
                </h1> 
              <p>
              <-BlogDescription->
              </p>
            </div> 
            </header>

* اگه میخواین این نشان کنار پروفایل حذف شه کافیه این کد رو از کد بالا پاک کنید :

<a href="<-BlogFollowLink->" target="_blank" >
              <img src="https://iweiu.storage.c2.liara.space/gif/pixel.jungle/31.gif" class="markprofile" id="markbtm">
              </a>

و بعد از جایگذاری تگ هدر جدید، کد به این شکل تغییر میکنه :

بعد از تغییر تگ های مربوط به هدر، استایل های جدید رو به استایل قالبتون اضافه میکنید یعنی میرید یکم بالاتر و قبل از کد </style> این کد رو قرار میدید :

      
      header {
    display: flex;
    flex-direction: row;
    position: relative;
    top: -29px;
    align-items: flex-start;
    padding: 0 26px;
}
      .header-info {
    margin-top: 30px;
}
      .header-info p {
    font-size: small !important;
}
      .header-img {
    overflow: unset;
    border: none;
}
      img#markbtm {
    bottom: 0;
    right: 0px;
}
      img.markprofile {
    position: absolute;
    width: 20px !important;
    height: 20px !important;
    border-radius: 0 !important;
    object-fit: contain;
}
      img.header-bg {
    border-radius: 15px;
    height: 150px;
    width: 100%;
    object-fit: cover;
}
      img.mainprofile {
    position: relative;
}
         

به اینصورت :

بعد از ایجاد تغییرات مربوطه روی کوچک کردن صفحه کد قالب میزنید تا دکمه ویرایش قالب رو ببینید و با انتخاب این گزینه ویرایش های انجام شده روی قالبتون اعمال میشه  

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