از اینجا به صورت زیپ شده هم html و هم css رو با هم میتونید دانلود کنید:
دانلود قالب والینور
فقط ۲ تا نکته داره.
نکته اول اینه که کلی چیز که لازم نداشتم رو حذف کردم که وبلاگ سبک تر شه. احتمالا بخواید دستی اضافه کنی، و شاید بگید خب اوکیه دیگه؟ ولی نه احتمالا. چون اونا رو دیزاین نکردم. ممکنه قالب رو یکم بهم ریخته کنه.
نکته دوم اینه که یکوچولو دنگ و فنگ داره برای استفاده قالب توی وبلاگ خودتون.
دنگ و فنگ هاش :
توی فایل html کد قالب
این خط رو پیدا کنید:
href="https://bayanbox.ir/view/5533100252379171071/VAELITHMORNAEL.png"
و آدرس عکسی که میخواید به عنوان آیکون سایتتون توی قسمت تب بار مرورگر نشون داده بشه رو ست کنید بجاش (توی "")
در خط بعدیش هم :
alt="Valinor's icon (VAELITH MORNAEL)"
متن دلخواه خودتون رو به عنوان توضیح اون عکس وارد کنید
مرحله بعدی
خط
<span class="comment-name bb">Vaelith Mornael</span>
رو پیدا کنید و بجای Vaelith Mornael اسمی رو وارد کنید که میخواید با اون اسم به کامنت ها پاسخ بدید
بعدی
لینک های توی صفحه اول بالای صفحه(nav bar)
خط های :
<div class="nav-links">
<a class="nav-link" href="/">خونه</a>
<a class="nav-link" href="/page/about-me">درباره من</a>
</div>
رو پیدا کنین و متن و لینک های دلخواه خودتون رو همونطور که اد کردم اد کنین (توی href آدرس بنویسین و بین {>اینجا<} متن لینک ها رو بنویسین )
و تمام.
عا راستی
اگه دوست دارید کد رو ببینین و بخشی ازش رو که دوست دارید کپی کنید، بفرمایید کد:
کد HTML قالب:
<!DOCTYPE html>
<html lang="fa">
<head>
<head:meta></head:meta>
<head:script></head:script>
<head:style></head:style>
<link
href="https://bayanbox.ir/view/5533100252379171071/VAELITHMORNAEL.png"
alt="Valinor's icon (VAELITH MORNAEL)"
rel="SHORTCUT ICON"
/>
</head>
<body>
<div class="container my-content">
<div class="header my-header">
<h1 class="blog-title"><a href="(*blog_link*)">(*blog_title*)</a></h1>
<h2 class="blog-short-description">(*blog_short_description*)</h2>
</div>
<div class="content-wrp">
<div class="block-content">
<div class="block-content-view">
<!----------------- -->
<!-- خود پست - شروع شرح مطلب -->
<box:post_detail>
<div class="post post_detail">
<div class="post post_list">
<a href="(*post_link*)">
<div class="post-title">
<h1>(*post_title*)</h1>
<div class="post-details-middle-dot"></div>
</div>
<div class="post-details bottom">
<div class="post-details-middle-dot"></div>
<div class="post-details-left">
<span class="post-details-date"
>(*post_date format="%Y٫%m٫%d"*)</span
>
</div>
<div class="clear"></div>
</div>
</a>
<div class="post-details-left post-author-name">
<span class="post-details-date">(*post_author*)</span>
</div>
</div>
<!-- /post -->
<div class="post-content">(*post_full_content*)</div>
<box:post_comments>
<a name="comments"></a>
<div class="all-comments">
<view:post_comments>
<a name="comment-(*comment_id*)"></a>
<div class="comment post-comments align">
<div class="post-comment custom-comment">
<div class="comment-details">
<div class="comment-details comment-name-s">
<span class="comment-name bb"
>(*comment_fullname*)</span
>
<check:if comment_website>
<a
class="comment-website"
href="(*comment_website*)"
rel="nofollow"
target="_blank"
title="(*comment_website*)"
></a>
</check:if>
</div>
</div>
<div class="comment-body">
<div class="comment-body-content">
(*comment_body*)
</div>
</div>
<div class="comment-date-section">
<a
class="comment-date comment-date-ss"
href="(*comment_link*)"
>
<span>(*comment_date format="%H:%M"*)</span>
<span>(*comment_date format="%Y٫%m٫%d"*)</span>
</a>
</div>
</div>
<check:if comment_reply>
<div class="comment-reply custom-comment">
<div
class="comment-details comment-reply-name-s comment-name-s"
>
<span class="comment-name bb">Vaelith Mornael</span>
</div>
<div
class="comment-reply-body comment-body-content"
>
(*comment_reply*)
</div>
<div class="comment-date-section">
<div class="comment-reply-date comment-date-ss">
<span
>(*comment_reply_date format="%H:%M"*)</span
>
<span
>(*comment_reply_date format="%Y٫%m٫%d"*)</span
>
</div>
</div>
</div>
</check:if>
</div>
</view:post_comments>
</div>
</box:post_comments>
<check:if post_has_send_comment>
<a name="send_comment"></a>
<div class="align new-comment-section">
<div class="comment-add-form">(*comment_add_form*)</div>
</div>
<!-- align -->
</check:if>
</div>
<!-- /post -->
</box:post_detail>
<!-- پایان شرح مطلب -->
<!-- خود page ها - شروع شرح page -->
<box:page_detail>
<div class="nav-shits">
<div class="nav-links">
<a class="nav-link" href="/">خونه</a>
<a class="nav-link" href="/page/about-me">درباره من</a>
</div>
</div>
<div class="post post_detail">
<div class="page_title post post_list">
<a href="(*page_link*)">
<div class="post-title">
<h1>(*page_title*)</h1>
<div class="post-details-middle-dot"></div>
</div>
<div class="post-details bottom">
<div class="clear"></div>
</div>
</a>
</div>
<!-- /post -->
<div class="post-content">(*page_content*)</div>
<div class="post-details bottom">
<div class="post-details-left"></div>
<div class="clear"></div>
</div>
<box:page_comments>
<a name="comments"></a>
<div class="all-comments">
<view:page_comments>
<a name="comment-(*comment_id*)"></a>
<div class="comment post-comments align">
<div class="post-comment custom-comment">
<div class="comment-details">
<div class="comment-details comment-name-s">
<span class="comment-name bb"
>(*comment_fullname*)</span
>
<check:if comment_website>
<a
class="comment-website"
href="(*comment_website*)"
rel="nofollow"
target="_blank"
title="(*comment_website*)"
></a>
</check:if>
</div>
</div>
<div class="comment-body">
<div class="comment-body-content">
(*comment_body*)
</div>
</div>
<div class="comment-date-section">
<a
class="comment-date comment-date-ss"
href="(*comment_link*)"
>
<span>(*comment_date format="%H:%M"*)</span>
<span>(*comment_date format="%Y٫%m٫%d"*)</span>
</a>
</div>
</div>
<check:if comment_reply>
<div class="comment-reply custom-comment">
<div
class="comment-details comment-reply-name-s comment-name-s"
>
<span class="comment-name bb">Vaelith Mornael</span>
</div>
<div
class="comment-reply-body comment-body-content"
>
(*comment_reply*)
</div>
<div class="comment-date-section">
<div class="comment-reply-date comment-date-ss">
<span
>(*comment_reply_date format="%H:%M"*)</span
>
<span
>(*comment_reply_date format="%Y٫%m٫%d"*)</span
>
</div>
</div>
</div>
</check:if>
</div>
</view:page_comments>
</div>
</box:page_comments>
<check:if page_has_send_comment>
<a name="send_comment"></a>
<div class="align new-comment-section">
<div class="comment-add-form">(*comment_add_form*)</div>
</div>
<!-- align -->
</check:if>
</div>
<!-- /page -->
</box:page_detail>
<!-- پایان شرح page -->
<!-- شروع خلاصه مطلب - لیست پست ها -->
<box:post_list>
<div class="nav-shits">
<div class="nav-links">
<a class="nav-link" href="/">خونه</a>
<a class="nav-link" href="/page/about-me">درباره من</a>
</div>
</div>
<view:post_list>
<div class="post post_list">
<a href="(*post_link*)">
<div class="post-title">
<h2>(*post_title*)</h2>
<div class="post-details-middle-dot"></div>
</div>
<div class="post-details bottom">
<div class="post-details-middle-dot"></div>
<div class="post-details-left">
<span class="post-details-date"
>(*post_date format="%Y٫%m٫%d"*)</span
>
</div>
<div class="clear"></div>
</div>
</a>
</div>
<!-- /post -->
</view:post_list>
</box:post_list>
<!-- پایان خلاصه مطلب -->
<!--TODO: DESIGN THIS -->
<box:pagination>
<div class="pagination">
<check:if page_prev>
<a class="pagePrev" href="(*page_prev*)">قبلی</a>
</check:if>
<div class="pagesList">
<view:pages spec="5,2,4,2,3,2">
<check:if page_num>
<a class="(*page_current*)" href="(*page_link*)"
>(*page_num*)</a
>
</check:if>
<check:if not page_num>
<span class="spacer">. . .</span>
</check:if>
</view:pages>
</div>
<check:if page_next>
<a class="pageNext" href="(*page_next*)">بعدی</a>
</check:if>
</div>
<div class="clear"></div>
</box:pagination>
<!----------------- -->
</div>
<!-- /block-content-view -->
<div class="clear"></div>
</div>
<!-- /block-content -->
<div class="clear"></div>
</div>
<!-- /content-wrp -->
<div class="footer container my-container">
<h3 class="footer-text">;</h3>
</div>
</div>
</body>
</html>
کد CSS قالب:
@charset "utf-8";
/* CSS Document - v3.5.0 */
*, * *{
padding:0;
margin:0;
box-sizing:border-box;
direction: rtl;
transition: all eas-in-out;
transition-duration: 0.4s;
}
body,html{
overflow-x:hidden;
width: 100vw;
}
body{
font-size:1.4rem;
padding:0 10px;
line-height:normal;
}
.my-content{
padding-left:10px;
padding-right:10px;
}
.post_list a{
flex-wrap: nowrap;
}
.post_list a, .post-title>a{
flex-wrap: nowrap;
}
.container {max-width:900px;}
/* -------------------------------------------------- */
/* -------------------------------------------------- */
@font-face {
font-family: 'vazirmatn';
src: url("https://bayanbox.ir/download/5184086568889432624/Vazirmatn-Regular.ttf");
}
@font-face {
font-family: 'Droid Sans Mono';
src: url("https://bayanbox.ir/download/5718957455840366440/DroidSansMono.ttf");
}
*, * *{
font-family: "vazirmatn";
}
body{
font-family: "vazirmatn,sans-serif";
background:#101010;
color:#ffffff;
}
p{
color:white;
}
a{
text-decoration:none;
text-shadow: 0px 0px 20px #ffffff42;
color: #ffffff;
opacity: 90%
}
a:hover{
text-shadow: 0px 0px 14px #d4d4d4;
opacity:100%;
}
.my-content{
margin-left: auto;
margin-right: auto;
}
.content-wrp{
min-height:80vh;
}
/* -------------------------------------------------- */
/* header */
.header {
max-width:900px;
margin: 80px 0 30px 0;
}
.header .blog-short-description{
padding-inline-start:4px;
padding-top:5px;
color:#9f9f9f;
}
.header a{
text-shadow: 0px 0px 8px #d3d3d3;
}
/* END header */
/* -------------------------------------------------- */
/* Nav */
.nav-links{
display: flex;
flex-wrap: nowrap;
padding-right: 5px;
}
.nav-links .nav-link{
display: block;
margin-left: 20px;
padding-left: 5px;
padding-right: 5px;
}
/* END Nav */
/* -------------------------------------------------- */
/* Posts List */
.post_list a{
display: flex;
justify-content: space-between;
align-items: center;
max-width:760px;
margin-left: auto;
margin-right: auto;
margin-bottom:15px;
margin-top:20px;
}
.post_list a
.post-details-date{
position:relative;
opacity:85%;
}
.post-details-middle-dot{
box-shadow: 0px 0px 0px #d3d3d3;
display: block;
width: 5px; height:5px;
background: #ffffff;
border-radius:999999%;
opacity:100%;
margin-left: 10px;
margin-right: 10px;
scale:0;
transition: all ease-in-out;
transition-duration: 0.3s;
}
.post_list:hover .post-details-middle-dot{
box-shadow: 0px 0px 18px #f3f3f3;
scale:1;
}
.post-details.bottom, .post_list .post-title{
display: flex;
flex-wrap:nowrap;
align-items:center;
}
/* END Posts List */
/* -------------------------------------------------- */
/* Post */
.block-content-view .post_list, .block-content-view .post_list a{
max-width:900px;
}
.block-content-view .post_detail .post_list>a{
margin-bottom:0;
}
.post-author-name{
direction:ltr;
opacity: 70%;
margin-bottom:38px;
}
.post-author-name span{
scale:0.8;
text-shadow: 0px 0px 15px #ffffff62;
}
/* END Post */
/* -------------------------------------------------- */
/* footer */
.footer{
padding-top: 200px;
padding-bottom:200px;
text-align:center;
}
.footer-text{
text-align:center;
font-size;220px !important;
scale:3;
text-shadow: 0px 0px 14px #d4d4d4;
width:fit-content;
margin-left:auto;
margin-right:auto;
transition-duration: 4s;
}
.footer:hover .footer-text{
rotate:720deg;
scale:0;
text-shadow: 0px 0px 12px #ffffff;
}
/* END footer */
/* -------------------------------------------------- */
/* <pre> */
.prettyprint{
font-family: "Droid Sans Mono", monospace !important;
white-space:pre-wrap;
background: #d9d9d9;
padding:8px 12px !important;
filter:invert();
border:0px solid rgba(0,0,0,0) !important;
outline:0px solid rgba(0,0,0,0) !important;
border-radius:8px;
font-size:1.1rem;
text-align:ltr;
}
/* -------------------------------------------------- */
/* Custom classes */
.hidden{
visibility:hidden;
}
.bb{
font-weight:bold;
}
/* END Custom classes */
/* -------------------------------------------------- */
/* Custom Comment section */
.new-comment-section{
padding-top:40px;
}
.formField2{
max-width:700px;
display: block !important;
padding:0 !important;
margin-bottom: 4px !important;
margin-left:auto;;
margin-right:auto;
}
.formField2 input,
.formField2 select{
font-weight:bold;
}
.formField2 input,
.formField2 textarea,
.formField2 select{
background:#e0e0e0aa ;
border-radius: 8px;
width:100%;
padding:3px;
outline: 0;
border:0;
}
.formField2 input:focus-visible,.formField2 input:hover,
.formField2 textarea:focus-visible,.formField2 textarea:hover,
.formField2 select:focus-visible,.formField2 select:hover{
background:#e0e0e0ff !important;
box-shadow: 0 0 14px #ffffff88;
outline: 0;
border:0;
}
.formField2 textarea{
padding:5px !important;
}
.formField2>.fldcontent,
.formField2>.fldcontent>div{
margin:0 !important;
padding:0 !important;
width:100% !important;
}
.formField2 label{
margin:0 !important;
padding:0 !important;
text-align:right !important;
width:100%;
font-size:1.24rem;
}
#frm_isprivate,#frm_anon{
width:fit-content;
slace:1.5 !important;
width:20px; height:20px;
}
.anon-hide.hasComment{
margin:0 !important;
padding:0 !important;
width:100% !important;
}
.fldcontent>textarea{
width:100%;
min-width: 100% !important;
max-width: 100% !important;
min-height: 150px !important;
max-height:220px !important;
}
#bComFormElem{
position:relative;
}
.comment-add-form{
line-height:normal !important;
}
.comment-add-form > div{
line-height:normal !important;
}
.comment-add-form a{
border-radius:8px !important;
}
/*list comments*/
.all-comments{
color:#101010;
padding-top:100px;
padding-left:28px;
padding-right:28px;
}
.custom-comment{
padding:4px;
background:#ffffffa0;
margin-bottom:20px;
max-width:650px;
position:relative;
}
.custom-comment:after{
content:"";
display:block;
position:absolute;
bottom:0;
border-top:10px solid transparent;
}
.post-comment:after{
left:100%;
border-bottom:10px solid #ffffffa0;
border-left:10px solid #ffffffa0;
border-right:10px solid transparent;
}
.comment-reply:after{
right:100%;
border-bottom:10px solid #ffffffcf;
border-right:10px solid #ffffffcf;
border-left:10px solid transparent;
}
.post-comment{
border-radius: 10px 10px 0 10px;
}
.comment-reply{
background:#ffffffcf;
border-radius: 10px 10px 10px 0;
margin-right:auto;
}
.comment-name-s{
display:flex;
flex-wrap:nowrap;
justify-content: space-between;
align-items: center;
opacity:70%;
}
.comment-name{
font-size:1.2rem;
}
.comment-body-content{
padding:15px 8px;
}
.custom-comment a{
color:#101010;
text-shadow:none !important;
}
.comment-reply-body{
text-align:left;
}
.comment-body-content a{
color: #101010 !important;
text-shadow: 0 0 10px #101010ff !important;
}
.comment-body-content a:hover{
color:#000000 !important;
text-shadow: 0 0 7px #000000ff !important;
}
.comment-website{
position:relative;
display: block !important;
width:18px !important;
height:18px !important;
border-radius:9999px !important;
background:#000000 !important;
box-shadow: 0 0 14px #000000aa;
text-shadow:none !important;
margin-left:18px;
}
.comment-website:after,.comment-website:before{
content:"" !important;
display:block !important;
position:absolute !important;
width: 60% !important;
height: 60% !important;
top:50% !important;
border-radius:9999px !important;
background-color:#101010 !important;
transform:translateY(-51%) !important;
z-index:999;
box-shadow: 0px 0px 14px #101010 !important;
transition: all ease-in-out !important;
transition-duration:0.3s !important;
}
.comment-website:after{
right:110%;
}
.comment-website:before{
left:110%;;
}
.custom-comment comment-website:hover{
background:#000000;
box-shadow:0 0 7px #000000ff !important;
}
.comment-date-ss{
padding-left:2px;
padding-right:2px;
display: flex;
justify-content: space-between;
}
.comment-date-section{
padding: 2px 4px;
text-align: left;
}.comment-date-section span{
opacity:80%;
}
.comment-reply-date{
text-align: right;
}
.comment-reply-name-s{
display:flex;
justify-content: left;
}
.comment-name{
padding:0 8px;
}
.comment-date-section{
font-size:1.1rem;
opacity: 70%;
}
/* END Custom Comment section */
/* -------------------------------------------------- */
/* show email? not need anymore*/
.formField2.anon-hide{
visibility: hidden !important;
display:none !important;
}
.smalltip#frmPrivateNotice{
visibility:hidden !important;
display:none !important;
}
/* -------------------------------------------------- */
/* DISABLE: comment avatar */
/* قابلیت انتخاب عکس برای کامنت غیر فعال چون نیازی نداریم فعلا بهش. عکس کمتر، زندگی بهتر */
.commentAvatar{
visibility: hidden;
display:none !important;
}
/* Send comment msg btn */
.sendbutton{
display: block !important;
font-size:1.3rem !important;
color:#101010 !important;
background: #ffffffbb !important;
box-shadow: 0px 0px 14px #d4d4d4 !important;
border: 0px solid #000000 !important;
outline: 0px !important;
padding: 2px 4px !important;
border-radius:8px;
cursor: pointer;
margin:0 0 15px 0 !important;
}
.sendbutton:hover{
background: #ffffff !important;
box-shadow: 0px 0px 6px #f1f1f1 !important;
}
/* END send comment msg btn */
/* -------------------------------------------------- */
/* DISABLED: error and warning msgs */
.item_wrn, .item_err{
display:none !important;
visibility:hidden !important;
}
/* -------------------------------------------------- */
/* success msg */
.item_success{
color: #ffffffcc !important;
background:none !important;
background-color:none !important;
border:0 !important;
outline:0 !important;
}
.item_success .icon{
display:none;
visibility: hidde;
text-shadow: 0px 0px 8px #ffffffee, 0px 0px 14px #ffffffaa;
}
/* END success msg */
/* -------------------------------------------------- */
/* Nex and Prev post btns */
.post-nav-links a{
display:block !important;
position:relative !important;
border-radius:9999px !important;
width: 50px !important;
height: 50px !important;
}
.post-nav-links{
display:flex !important;
position:relative !important;
flex-wrap:nowrap !important;
justify-content: space-between !important;
width:100% !important;
}
.post-nav-links .post-nav-next:after,
.post-nav-links .post-nav-prev:after,
.post-nav-links .post-nav-next:before,
.post-nav-links .post-nav-prev:before{
content:"" !important;
display:block !important;
position:absolute !important;
width: 60% !important;
height: 60% !important;
top:50% !important;
border-radius:9999px !important;
background-color:#d3d3d3 !important;
transform:translateY(-50%) !important;
box-shadow: 0px 0px 14px #d4d4d4 !important;
transition: all ease-in-out !important;
transition-duration:0.3s !important;
}
.post-nav-links .post-nav-next:hover:after,
.post-nav-links .post-nav-prev:hover:after,
.post-nav-links .post-nav-next:hover:before,
.post-nav-links .post-nav-prev:hover:before{
background-color:#ffffff !important;
box-shadow: 0px 0px 5px #ffffff !important;
}
.post-nav-links .post-nav-next:before, .post-nav-links .post-nav-prev:after{
left:0 !important;
}
.post-nav-links .post-nav-prev:before, .post-nav-links .post-nav-next:after{
right:0 !important;
}
.post-nav-links .post-nav-next:after, .post-nav-links .post-nav-prev:after{
width: 35% !important;
height: 35% !important;
}
.post-nav-links.post-nav-links-top{
margin-bottom:50px !important;
}
.post-nav-links.post-nav-links-bottom{
margin-top:50px !important;
margin-bottom:80px !important;
}
/* END Next and Prev post btns */
همینطوری الکی :)