قالب دخترانه بلاگفا نسخه 0.1

ویژگی های این قالب :

ریسپانسیو است و در دستگاه های کوچک تر مثل موبایل به راحتی تغییر سایز می دهد
بک گراند جذاب پست ها
کم حجم است و سریع لود می شود
استفاده از رنگ های متنوع
دارای فونت زیبای وزیر

بعد از ورود به پیش نمایش، صفحه رو کوچک و بزرگ کنید و خاصیت ریسپانسیو آن را ببینید

* در تب پروفایل ، پروفایل شما که شامل اطلاعاتی است که در پروفایل وبلاگ تان وارد می کنید

دریافت کد در ادامه مطلب

کد زیر را کپی کنید :

<div class="all">
    <div class="menu">
        <div><a href="<-BlogUrl->">خانه</a></div>
        
            <div><a target="_blank" href="<-BlogProfileLink->">پروفایل</a></div>
        
        
    </div>
    <img src="https://8pic.ir/uploads/unnamed_df440.jpg">
    <div class="paper">
        <div class="row">
            
            <div class="right">
                
                    <div class="rowpost">
                        <div class="title"></div>
                         
                            <button class="btn"><a href="<-BlogUrl-><-PostLink->">ادامه مطلب</a></button>
                         
                        
                        
                    </div>
                    
                    <div class="contentpost"></div>
                    <div class="bottom">
                        <div class="data">    تاریخ ارسال :   </div>
                        <div class="comment"> 
                            
                                <script type="text/javascript">GetBC(<-PostId->);</script>
                            
                        </div>
                        
                    </div>
                    
                
                
                                  
                                                
                
            </div>
                
                <br><br>
            
             
            <div style="width:100%;display:block; margin: 10px;">
            
            <div style="width:20%;float:right;text-align:center;border: 1px white; background-color: whitesmoke;margin: 10px;border-radius: 5px;"><a style="color: black;" href="<-BlogPreviousPageLink->">مطالب جدیدتر</a></div>
            
            
            <div style="width:20%;float:left;text-align:center;border: 1px white; background-color: whitesmoke;margin: 10px;border-radius: 5px;"><a style="color: black;" href="<-BlogNextPageLink->">مطالب قدیمی‌تر</a></div>
            
            </div>
            
        </div>
       
        <div class="left">
            
                
                    <div class="cat">
                    
                        <div class="title">موضوعات</div>
                           
                        <div class="content"><a href="<-CategoryLink->"></a></div>
                    
                    </div>
                
                
            
            
            
                <div class="archive">
                    <div class="title">آرشیو</div>
                    
                    <div class="content"><a href="<-ArchiveLink->"></a></div>
                </div>
            
            
                <div class="link">
                   
                        <div class="title">پیوندها</div>
                     
                        <div class="content"><a href="<-LinkUrl->"></a></div>
                    
                   
                </div>
            
            
           
        </div>
        
        
    </div>
    <div class="footer">  <a href="http://www.willpc.ir">[ طراح قالب :  willpc.ir ] </a>
</div>
    
</div>
<style>
    .bottom{
        display: flex;
        margin: 10px
        
    }
    .comment{
        flex: 40%;
        
        
    }
    @import url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css');
    body{
        background: #f3d1c7;
    }
    .all{
        display: block;
        margin-left: auto;
        margin-right: auto;
        
        width: 70%;
        
    }
    .paper{
        width: 100%;
        height: auto;
    }
    *{
        box-sizing: border-box;
        font-family: 'vazir';
        direction: rtl;
        text-decoration: none;
    }
.all img{
    display: block;
    margin: auto;
    opacity: .8;
    border-radius: 10px;
    object-fit: cover;
    width: 100%;
    height: 420px;
    border: 100px;
    z-index: 0;
}
.menu{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
    background-color: #67a2b4;
    border-radius: 20px;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 15px;
    
}
.menu div{
    display: inline-block;
    margin: 15px;
    text-align: center;
}
.menu div a{
    color: white;
}
.row{
    width: 70%;
    height: auto;
    background: url('https://8pic.ir/uploads/Girl-3_d9fb6.jpg') repeat-y ;
    background-position: center;
    
    z-index: 1;
    float: right;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    
    
    
}
.right {
    
    background-color: rgba(255, 255, 255, 0.712);
    margin: 10px;
    border-radius: 30px;
    
    
}
.left{
    float: left;
    width: 24%;
    height: fit-content;
    background-color: rgba(77, 197, 212, 0.849);
    margin: 10px;
    border-radius: 30px;
}
@media screen and (max-width:960px ) {
    
    .left , .row{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .right{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    
}
@media screen and (max-width:720px ) {
    .all{
        width: 100%;
    }
    .left , .row{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    
}

.content{
    border: 1px solid ;
    background-color: white;
    padding: 10px;
    text-align: center;
    margin: 5px;
    border: 5px;
    margin-bottom: 20px;
}
.left > div {
    background-color: rgba(255, 255, 255, 0.712);;
    margin: 20px;
    height: 200px;
}
.rowpost{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
.rowpost div{
    margin-top: 20px;
    
}

.btn{
    width: 100px;
    height: 30px;
    margin-top: 20px;
    
}
.contentpost{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    width: 80%;
    height: 70%;
    padding: 10px;
    border: 1px salmon dotted;
    text-align: justify;
    overflow-wrap: break-word;
   
    
}
.data{
    width: 90%;
    margin-right: 10%;
}
.title{
    text-align: center;
}
.right::after{
    content: '';
    clear: both;
}
.footer{
    clear: both;
    text-align: center;
    
    margin-top: 20px;
    padding: 10px;
}
.footer a{
    font-size: 12px;
}
.footer a:hover{
    color: black;
}

</style>

آموزش قرار دادن قالب در بلاگفا : وارد بخش " تنظیمات و دیگر امکانات" وبلاگ خود شوید و روی "ویرایش قالب وبلاگ" کلیک کنید و کد بالا را جایگزین کنید

alireza bagheri

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.