قالب موزیک برای بلاگفا نسخه 0.1

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

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

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

نحوهی تغییر موزیک در ادامه مطلب قرار داده شده است

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

*در قسمت درباره وبلاگ ، عکس و توضیحاتی که در مورد خودتان است را می توانید قرار دهید

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

کد باکس زیر را کپی کنید

<!DOCTYPE html>
<html lang="en">

<head>
    <script  language="javascript">
        function GetBC(lngPostid)
         {
             intTimeZone=<-BlogTimeZone->;
             strBlogId="<-BlogId->";
             intCount=-1;
             strResult="";
             try {
            for (i=0;i<BlogComments.length;i+=2)
            {
                 if (BlogComments[i]==lngPostid)
                 intCount=BlogComments[i+1] ;
            }
                 }  catch( e) {
                 }
          if ( intCount==-1)  strResult="آرشیو نظرات";
          if ( intCount==0)  strResult="نظر بدهید";
          if ( intCount==1)  strResult="یک نظر";
          if ( intCount>1)  strResult=intCount + " نظر" ;
        
        strUrl="http://commenting.blogfa.com/?blogid=" +strBlogId + "&postid=" + lngPostid + "&timezone=" + intTimeZone ;
        strResult ="<a href=\"javascript:void(0)\" onclick=\"javascript:window.open('" + strUrl + "','blogfa_comments','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px')\" >" +  strResult + " </a>" ;
      
        document.write ( strResult ) ;
       }
       
      function OpenLD()
      {
        window.open('LinkDump.aspx','blogfa_ld','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px');
        return true;
      }
      </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><-BlogTitle-></title>

</head>

<body>
    <div class="all">
        <div class="menu">
            <div><a href="<-BlogUrl->">خانه</a></div>
            <BlogProfileLinkBlock>
                <div><a target="_blank" href="<-BlogProfileLink->">پروفایل</a></div>
            </BlogProfileLinkBlock>
        </div>
        <div class="head">
            <img src="https://8pic.ir/uploads/Webp-net-resizeimage.png" alt="">
        </div>
        <div class="paper">
            <div class="left">
                <BLOGFA>
                    <div class="post">

<div class="title"><a href="<-PostLink->">
                                <-PostTitle->
                            </a></div>
                        <div class="contentpost">
                            <-PostContent->
                        </div>
                        <div class="info">
                            <div class="writing">نویسنده : <-PostAuthor->
                            </div>
                            <div class="data">تاریخ : <-PostDate->
                            </div>
                            <div class="comment">
                                <BlogComment>
                                    <script type="text/javascript">GetBC(<-PostId->);</script>
                                </BlogComment></div> 
                            </div>
    
                            <BlogExtendedPost>
                                <a href="<-BlogUrl-><-PostLink->">
                                    <div class="more"><button class="btn">ادامه مطلب</button>
                                </a>
                        </div>
                        </BlogExtendedPost>

</div>
                   
                </BLOGFA>
                <div class="NextAndPrevious">
                    <BlogNextAndPreviousBlock>
                        <div style="width:100%">
                        <BlogPreviousPageBlock>
                        <div class="new" style="width:20%;float:right;text-align:center;"><a href="<-BlogPreviousPageLink->">مطالب جدیدتر</a></div>
                        </BlogPreviousPageBlock>
                        <BlogNextPageBlock>
                        <div class="old" style="width:20%;float:left;text-align:center;"><a href="<-BlogNextPageLink->">مطالب قدیمی‌تر</a></div>
                        </BlogNextPageBlock>
                        </div>
                        </BlogNextAndPreviousBlock>
                </div >
            </div>
            
            <div class="right">
            <div class="boxmusic">
                <div class="title">موزیک پیشنهادی:</div>
                <audio controls autoplay loop preload="auto">
                    <source src="لینک موزیک شما" type="audio/mp3" />

مرورگر شما این تگ را ساپورت نمی کند .
                </audio>
            </div>
            <div class="aboutblock">
                <BlogProfile>

<div class="about">
                        <div class="title">درباره وبلاگ</div>
                        <BlogProfile>
                            <BlogPhoto>
                                <img class="imgabout" src="<-BlogPhotoLink->">
                            </BlogPhoto>

</div>

</BlogProfile>
                    </div>
                </BlogProfile>
            </div>
            <div class="catblock">
                <div class="title">موضوع ها</div>
                <BlogCategoriesBlock>
                    <BlogCategories>

</a></div>
                    </BlogCategories>

</BlogCategoriesBlock>
            </div>
            <div class="archiveblock">
                <div class="title">آرشیو </div>
                <BlogArchive maxitems="10">

</a></div>
                </BlogArchive>
            </div>
            <div class="aboutblock" id="link">
                <div class="title">پیوند ها</div>
                <BlogLinksBlock>
                    <BlogLinks>
                        <div class="contentlink"><a target="_blank" href="<-LinkUrl->">
                                <-LinkTitle->

</a></div>
                    </BlogLinks>

</BlogLinksBlock>

</div>
        </div>

</div>
        
    </div>
    <div class="footer"><a target="_blank" href="http://www.willpc.ir"> [ طراح قالب : willpc] </a></div>
    </div>
    <style>
        body {
            width: 100%;
            height: 100%;
            background-color: rgb(190, 175, 157);
        }

.btn {
            border-radius: 10px;
        }

.more {
            font-size: 15px;
            padding: 5px;
            text-shadow: chartreuse;
        }

.footer {
            text-align: center;
            clear: both;
            font-size: 12px;

}

.footer a {
            color: black;

}

a {
            text-decoration: none;
        }

a:hover {
            color: red;
        }

.info div {

direction: rtl;
        }

.menu {

width: 100%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            height: auto;
            background: rgba(177, 117, 27, 0.781);
            margin-bottom: 10px;
            border-radius: 0 0 20px 20px;

}

.menu div {

display: inline-block;
            margin: 20px;
            color: white;

}

@media screen and (max-width: 1000px) {
            .menu div {
                display: block;

border-radius: 0 0 20px 20px;
                width: inherit;
                height: auto;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                margin-top: 10px;
                margin-bottom: 10px;

padding: 5px;

}

.contentabout {
            text-align: center;
            margin: 10px;
            border: 1px solid greenyellow;
            border-radius: 20px;
            padding: 10px;
        }

.imgabout {
            display: block;
            margin-left: auto;
            margin-right: auto;
            height: auto;
            width: 80%;
            border-radius: 20px;
        }

.contentlink,
        .archive,
        .contentcat {
            text-align: center;
            border: 1px solid greenyellow;
            padding: 10px;
            height: auto;
            overflow: hidden;
            margin: 10px;
            border-radius: 20px;
        }

.all {
            width: 100%;
            height: 100%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

.head img {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: 500px;
            border-radius: 100px;
        }

.paper {
            width: 100%;
            height: auto;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

.left {
            width: 67%;
            height: auto;

float: left;
            margin: 10px;
            
            border-radius: 20px;

}

.right {
            width: 30%;
            height: auto;
            background-color: yellow;
            float: left;
            margin: 10px;
            background: url('https://i.stack.imgur.com/MtKUX.jpg');
            border-radius: 20px;
        }

@media screen and (max-width : 1200px) {

.left,
            .right {
                width: 100%;

}
        }

* {
            direction: rtl;
            font-family: 'Vazir';
            box-sizing: border-box;

}

.title {
            background: url('https://i1.pngguru.com/preview/989/591/761/iconlab-itunes-itunes-glow-music-icon.jpg') right no-repeat;
            background-size: 45px;
            text-align: center;
            font-size: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
            background-color: rgb(255, 255, 255);

width: 98%;
            height: auto;
            margin: 10px;
            border: 1px red solid;
            border-radius: 100px;
            display: block;
            margin-left: auto;
            margin-right: auto;

}

.post {
            display: block;
            margin: auto;
            width: 98%;
            height: auto;
            margin-top: 20px;
            margin-bottom: 20px;
            background: url('https://i.stack.imgur.com/MtKUX.jpg');
            border-radius: 20px;

}

.boxmusic {
            width: 98%;
            height: auto;

display: block;
            margin: auto;
            margin-top: 10px;
            margin-bottom: 20px;
            border-radius: 20px;

}

.boxmusic audio {
            display: block;
            margin: auto;
            width: inherit;
        }

.contentpost {
            text-align: justify;
            margin: 10px;
            padding: 30px;
            font-size: 15px;
            border: greenyellow 1px solid;

background-position: center;
            border-radius: 20px;
            width: 98%;
            height: auto;
            color: black;

}

.info {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            width: 96%;
            padding: 10px;
            height: auto;
            margin: 10px;
            margin-top: 30px;
            margin-bottom: 20px;
            
            border-radius: 20px;
        }
    </style>

</body>

</html>

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

* برای تغییر موزیک، لینک دانلود مستقیم موزیک خود را از هر سایتی که دارید کپی کنید و سپس در قالب، boxmusic را پیدا کرده (با سرچ ) و لینک دانلود را در src جای لینک موزیک شما قرار دهید:

درصورتی که بخواهید موزیک بلافاصله بعد از ورود به وبلاگ پخش نشود autoplay را که در بالا می بینید حذف کنید
درصورتی که بخواهید موزیک تکرار نشود loop را حذف کنید
درصورتی که بخواهید کنترل های موزیک مثل کم و زیاد شدن صدا حذف شوند controls را حذف کنید

درصورت داشتن سوال، در قسمت نظرات بیان فرمایید