برچسب: template

نحوه ی نمایش آخرین نظرات بلاگ با قالب زیبا

قالب زیبا برای نمایش آخرین نظرات بلاگ ، برای استفاده از این قالب کد اچ تی ام ال (html) را بخش ساختار قالب وبلاگ سپس در قسمت مورد نظرتون بذارید و کد سی اس اس (Css) رو هم بخش استایل قالب مد نظرتون اضافه کنید.

کد اچ تی ام ال (html)

<box:recent_comments>
    <section id="rec-cmt">
      <h3>بلوک آخرین نظرات</h3>
      <ul>
        <view:recent_comments>
          <li>
            <img src="(*comment_avatar*)" alt="(*comment_fullname*)">
            <p class="h">
            <a href="(*comment_link*)" title="(*comment_fullname*)">(*comment_fullname*)</a>
            </p>
            <time>(*comment_date format="%e.%B"*)</time>
            <p class="body">(*comment_body_text max="80"*)</p>
          </li>
        </view:recent_comments>
      </ul>
    </section>
</box:recent_comments>

کد سی اس اس (css)

.clr:after,.clr:before {content: '';display: block;clear: both;}
section#rec-cmt {
width:350px;
margin: 75px auto;
text-align: center;
box-sizing:border-box;
font-size:14px;
font-family: iransans;
}
section#rec-cmt ul,section#rec-cmt li,section#rec-cmt p{
margin:0;
padding:0;
list-style:none;
}
section#rec-cmt a,section#rec-cmt a:hover{
text-decoration:none;
color:inherit;
}
section#rec-cmt li {
float: right;
width: 100%;
margin: 0 0 30px;
position: relative;
}
section#rec-cmt h3 {
margin-bottom: 30px;
position:relative;
color: inherit;
color: black;
}
section#rec-cmt ul {
float: right;
}
section#rec-cmt img {
border-radius: 100%;
width: 20%;
height: 70px;
border: 1px solid white;
padding: 2px;
background-color: white;
float: right;
position: relative;
z-index: 4;
}
section#rec-cmt p.h {
background-color: white;
float: right;
border-radius: 35px;
margin: 0px -52px 0 0;
padding: 5px 52px 5px 15px;
}
section#rec-cmt p.body{
background-color: #9C27B0;
color: white;
text-align: right;
direction: rtl;
border-radius: 35px;
float: right;
margin-right: -47px;
padding: 5px 50px 5px 0;
width: 80%;
height: 42px;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: normal;
font-weight: 100;
box-sizing: border-box;
position: relative;
z-index: 3;
}
section#rec-cmt time {
font-size: 12px;
font-weight: 300;
}
section#rec-cmt p.h a {
color: black;
font-weight: 300;
}

برای راهنمایی بیشتر به این صفحه مراجعه کنید.

2016-02-26

قالب خودتو ریسپانسیو کن !

با سلام خدمت بلاگ نویسان ، از امروز شما میتوانید قالب های بلاگی ( قالب اورجینال بلاگ ) خودتان را به صورت رایگان ریسپانسیو کنید !

و این ویژگی یا قابلیت مهم را به کاربران وبلاگ و سایت خودتان هدیه بدهید ! برای این کار فقط کافیه قسمت نظرات همین مطلب عنوان سایت و قالب مورد استفاده خودتان را ارسال کنید! و کاملا بصورت رایگان تحویل بگیرید ؛ شما می توانید برای کمک به همه وبلاگ نویسان بلاگ برای داشتن قالب ریسپانسیو یه لینک به این مطلب در بلاگ خودتان بدهید به عنوان قالبتو ریسپانسیو کن !

از یه قالب شخصی و اختصاصی استفاده میکنی ؟ نگرانی نداره که ! 🙂 شما هم می توانید با ارسال یک نظر (حتمن آدرس سایت درج کنید) تا 70 درصد تخفیف بگیرید !

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

راستی برای اطلاع از آخرین مطالب از قسمت مدیریت پنل بلاگ —> ارتباط —> وبلاگهای که دنبال میکنم —-> وبلاگ ما رو دنبال کنید.

راهنمای استفاده : در گام اول کد استایل زیر را کپی و در بخش قالب –> فایل css اضافه کنید و تغییرات را ذخیره کنید.

در گام بعدی هم کد باکس مورد نظر را انتخاب و کپی کنید وارد بخش ساختار قالب وبلاگتون شوید و کد صفحات رو بعد از تگ <box:post_list/> قرار بدهید. (کد باکس صفحات را بعد از پایان کدهای نمایش پست بلاگ تان قرار بدهید)

کد استایل باکس صفحات
```
/* -------------------------------- 

style asli : http://1coder.blog.ir

-------------------------------- */
nav[role="navigation"] {
  text-align: center;
}

.cd-pagination {
  width: 90%;
  max-width: 720px;
  margin: 2em auto 4em;
  text-align: center;
}
.cd-pagination li {
  display: none;
  margin: 0 .2em;
}
.cd-pagination li.button { display: inline-block;}
.cd-pagination a, .cd-pagination span {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none; -ms-user-select: none;user-select: none;
  padding: .6em .8em;
font-size: 15px;
}
.cd-pagination a {
  color: #2E4057;
  text-decoration: none;
  border: 1px solid #e6e6e6;
  border-radius: 0.25em;
}
.no-touch .cd-pagination a:hover {
  background-color: #f2f2f2;
}
.cd-pagination a:active {
  /* click effect */
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
.cd-pagination a.disabled {
  /* button disabled */
  color: rgba(46, 64, 87, 0.4);
  pointer-events: none;
}
.cd-pagination a.disabled::before, .cd-pagination a.disabled::after {opacity: .4;}
.cd-pagination .current {background-color: #64a281;
border-color: #64a281;color: #ffffff;pointer-events: none;}
@media only screen and (min-width: 768px) {.cd-pagination li {display: inline-block;}}
@media only screen and (min-width: 1170px) {.cd-pagination {margin: 4em auto 8em;}}
/* -------------------------------- 
2:http://1coder.blog.ir
-------------------------------- */
.cd-pagination.no-space {width: auto;max-width: none;
display: inline-block;border-radius: 0.25em;
border: 1px solid #e6e6e6;padding: 0;
}
.cd-pagination.no-space:after {content: "";display: table;clear: both;}
.cd-pagination.no-space li {margin: 0;float: right;border-right: none;
}
.cd-pagination.no-space li:last-of-type {
  border-right: 1px solid #e6e6e6;
  float: left;
}
.cd-pagination.no-space a, .cd-pagination.no-space span {
  float: none;
  border-radius: 0;
  padding: .8em 1em;
  border: none;
}
.cd-pagination.no-space li:first-of-type a {
  border-left: 1px solid #e6e6e6;
}
.cd-pagination.no-space li:last-of-type a {
  border-radius: 0 0.25em 0.25em 0;
}

/* -------------------------------- 

3: http://1coder.blog.ir

-------------------------------- */
.cd-pagination.move-buttons:after {
  content: "";
  display: table;
  clear: both;
}
.cd-pagination.move-buttons .button:first-of-type {
  float: right;
}
.cd-pagination.move-buttons .button:last-of-type {
  float: left;
}
```
کد ساختار باکس صفحات

– 1 –

قبلی

1

2

3

4

…

20

بعدی

<box:pagination>
<nav role="navigation">
<ul class="cd-pagination"> <check:if page_prev="">
<li class="button">
<a href="(*page_prev*)" data-mce-href="(*page_prev*)">قبلی</a>
</li> </check:if> <view:pages spec="5,2,4,2,3,2">
<check:if page_num><li>
<a class="(*page_current*)" href="(*page_link*)">(*page_num*)</a>
</li></check:if>
<check:if not page_num><li>
<a href="/" class="disabled"> ... </a>
</check:if></li> </view:pages> <check:if page_next="">
<li class="button">
<a href="(*page_next*)" data-mce-href="(*page_next*)">بعدی</a>
</li> </check:if> </ul> </nav> </box:pagination>
– 2 –

قبلی

1

2

3

4

…

20

بعدی

<box:pagination>
<nav role="navigation">
<ul class="cd-pagination no-space"> <check:if page_prev="">
<li class="button">
<a href="(*page_prev*)" data-mce-href="(*page_prev*)">قبلی</a>
</li> </check:if> <view:pages spec="5,2,4,2,3,2">
<check:if page_num><li>
<a class="(*page_current*)" href="(*page_link*)">(*page_num*)</a>
</li></check:if>
<check:if not page_num>
<li><a href="/" class="disabled"> ... </a></li>
</check:if> </view:pages> <check:if page_next="">
<li class="button">
<a href="(*page_next*)" data-mce-href="(*page_next*)">بعدی</a>
</li> </check:if> </ul> </nav> </box:pagination>
– 3 –

قبلی

1

2

3

4

…

20

بعدی

<box:pagination>
<nav role="navigation">
<ul class="cd-pagination move-buttons custom-icons">
<li class="button">
<a class="disabled" href="(*page_prev*)" data-mce-href="(*page_prev*)">قبلی</a>
</li> <view:pages spec="5,2,4,2,3,2">
<check:if page_num><li>
<a class="(*page_current*)" href="(*page_link*)">(*page_num*)</a>
</li></check:if>
<check:if not page_num>
<li><a href="/" class="disabled"> ... </a></li>
</check:if> </view:pages>
<li class="button">
<a href="(*page_next*)" data-mce-href="(*page_next*)">بعدی</a>
</li> </ul> </nav>
</box:pagination>
2015-09-11
ترجمه رایگان قالب جدید بلاگفا به بلاگ – درخواستی کاربر

در این ساعت در خدمتون هستم با مطلب ترجمه رایگان قالب جدید بلاگفا به بلاگ – درخواستی کاربر : شمیم زندگی

این قالب چهارمین قالب ترجمه شده به صورت رایگان برای بلاگ هست که تقدیم همه بلاگ نویسان !

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

مسیر ویرایش قالب –> پنل مدیریت —> قالب –> ویرایش ساختار قالب فعلی ؛ برای کد ساختار قالب | ویرایش Css قالب فعلی ؛ برای کد استایل قالب

مسیر ایجاد قالب –> پنل مدیریت —> قالب –>انتخاب قالب جدید –> ایجاد قالب جدید –> ساختار قالب ؛ برای کد ساختار قالب | ویرایش Css قالب ؛ برای کد استایل قالب

پیشنمایش قالب

فایل ساختار قالب

کدها را با کد ساختار قالبتون جایگزین یا در بخش کد ساختار قالب جدید بگذارید

فایل استایل قالب CSS

کدها را با کد استایل(CSS) قالبتون جایگزین یا در بخش فایل استایل (CSS) قالب جدید بگذارید

تبدیل رایگان قالب شما به بلاگ

ریسپانسیو سازی قالب شما

تبدیل قالب طراحی شده به کد (PSD TO HTML)

2015-09-07
قالب شخصی و مینیمال برای بلاگ
قالب شخصی و مینیمال برای بلاگ

ویژگی ها :
- ریسپانسیو (واکنش گرا)
- پشتیبانی تصاویر شاخص مطلب
- سرعت لود بالا
- html5 و css3
- کدنویسی استاندارد
- رایگان (برای استفاده شخصی)
تست gtmetrix.com

نکته ی مهم : این قالب بصورت مرتب اپدیت میشه ، امکانات جدیدی بهش اضافه میشه! برای دریافت آپدیت های (رایگان) در خبرنامه سایت عضو شوید، تا آپدیت ها را بدون چک کردن مرتب سایت در ایمیل خود دریافت کنید.

کاربرانی که این قالب را برای دیگر سرویس های وبلاگدهی میخوان در قسمت نطرات پیام خود را ارسال کنند.

مشکلات و سوالات خود در مورد این قالب را فقط در همین قسمت ارسال نمایید.

پیشنمایش قالب

دانلود قالب

دریافت هدر جدید
2015-05-01

برچسب: template

نحوه ی نمایش آخرین نظرات بلاگ با قالب زیبا

قالب خودتو ریسپانسیو کن !

باکس صفحات بلاگ با استایل

کد ساختار باکس صفحات

– 1 –

– 2 –

– 3 –

ترجمه رایگان قالب جدید بلاگفا به بلاگ – درخواستی کاربر

قالب شخصی و مینیمال برای بلاگ