قالب اینستاگرام نسخه حرفه ای و پیشرفته برای وبلاگ های بیان بلاگ + قابلیت ثبت استوری!!

کپی رایت قالب: بنده به هیچ وجه راضی نیستم فوتر و لینک درج شده در این قالب حذف بشه، واسه این قالب بیشتر از چیزی که فکرشو بکنید وقت گذاشتم. لینک داخل فوتر تنها دلخوشی من هست، و دلیل رایگان قرار دادن قالب ها

تمنا میکنم قبل از نصب قالب توضیحات پایین رو بخونید بعد اقدام به نصب قالب کنید!

آخرین بروزرسانی: 00/02/04

_ مشکل مربوط به آیکون های تاریخ و نویسنده در هر دو قالب برطرف شد!
_ مشکل مربوط چپ چین نبودن متن انگلیسی !No Comments has been posted yet برطرف شد!

نسخه انگلیسی(لطفا توضیحات و راهنمایی های پایین رو بخونید بعد سوال بپرسید):

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

<!DOCTYPE html><html lang="fa"><head> <head:meta></head:meta> <head:style></head:style> <head:script></head:script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">   </head> <body>  <header> <div class="hcontainer"> <div class="profile"> <div class="profile-image" style="background-image: url('(*blog_image*)');"></div> <div class="profile-user-settings"> <h1 class="profile-user-name"><a href="(*blog_link*)">(*blog_title*)</a></h1> <a class="cbtn profile-settings-btn"><i class="fa fa-check-circle"></i></a> <a href="https://blog.ir/panel/-/followed_blogs?follow=(*blog_link*)" class="cbtn profile-edit-btn">Follow</a> </div> <box:stat> <div class="profile-stats"> <ul><view:stat> <li><span class="profile-stat-count">(*stat_value*)</span> (*stat_title*)</li> </view:stat></ul> </div> </box:stat> <div class="profile-bio"> <p>(*blog_short_description*)</p> <box:menu> <view:menu><a class="menu_items_hashtags" href="(*menu_item_link*)">#(*menu_item_title*)</a></view:menu> </box:menu> </div> </div>  <box:post_list flag="story" max="100"> <div class="storycontainer"> <view:post_list> <div class="story"><a href="(*post_link*)" title="(*post_title*)"> <check:if post_image> <svg style="background-image:url('(*post_image*)');" viewBox="0 0 82 82"> <circle cx="41" cy="41" r="40"></circle> </svg> </check:if> <check:if not post_image> <svg viewBox="0 0 82 82"> <circle cx="41" cy="41" r="40"></circle> </svg> </check:if> </a> </div> </view:post_list> </div> </box:post_list> </div>  </header>  <main> <div class="section-columns"> <section class="slidem card-columns"> <box:post_list> <view:post_list> <check:if post_image> <div class="cardonhover"> <li class="card"> <a class="hoverlink" style="background-image: url((*post_image*))" href="(*post_link*)"></a> <div> <a href="(*post_link*)"><h2>(*post_title*)</h2></a> <check:if post_date><div class="date">(*post_date format="%y/%m/%d"*)</div></check:if> <check:if post_author><div class="author">(*post_author*)</div></check:if> </div> </li> <div class="features"> <box:post_rating><div class="fitems"><span class="rate-box (*user_rated*)"><span class="rate-button-box rate-up (*user_rated_up*)"><a class="rate-button fa fa-heart-o" href="(*rate_up_link*)" rel="nofollow" title="Like :)"><img alt="Like" src="//blog.ir/media/images/cleardot.gif">(*up_rates*)</a></span></span></div></box:post_rating> <check:if post_has_comments_section><div class="fitems"><a href="(*post_link*)" title="Comments"><i class="fa fa-comment-o"></i> (*post_comment_count*) </a></div></check:if> <div class="fitems showoff"><i class="fa fa-eye"></i> (*post_visits*) </div> </div> </div> </check:if> <check:if not post_image> <div class="cardonhover"> <li class="card"> <a class="hoverlink" href="(*post_link*)"></a> <div> <a href="(*post_link*)"><h2>(*post_title*)</h2></a> <check:if post_date><div class="date">(*post_date format="%y/%m/%d"*)</div></check:if> <check:if post_author><div class="author">(*post_author*)</div></check:if> </div> </li> <div class="features"> <box:post_rating><div class="fitems"><span class="rate-box (*user_rated*)"><span class="rate-button-box rate-up (*user_rated_up*)"><a class="rate-button fa fa-heart-o" href="(*rate_up_link*)" rel="nofollow" title="Like :)"><img alt="Like" src="//blog.ir/media/images/cleardot.gif">(*up_rates*)</a></span></span></div></box:post_rating> <check:if post_has_comments_section><div class="fitems"><a href="(*post_link*)" title="Comments"><i class="fa fa-comment-o"></i> (*post_comment_count*) </a></div></check:if> <div class="fitems showoff"><i class="fa fa-eye"></i> (*post_visits*) </div> </div> </div> </check:if> </view:post_list> </box:post_list> </section> <box:pagination> <div class="pagination"> <check:if page_prev> <a class="pagePrev" href="(*page_prev*)">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*)">Next</a> </check:if> </div> <div class="clear"></div> </box:pagination> </div> <div class="container con-port"> <div class="gallery gal-port"> <box:post_detail> <div class="gallery-item more-desk"> <check:if post_image><a href="(*post_link*)"><img alt="(*post_title*)" src="(*post_image*)" class="gallery-image"></a></check:if> <div class="content-part"><a href="(*post_link*)"><h2>(*post_title*)</h2></a><br>(*post_full_content*)<br><box:post_tags> <div class="box-tags"> <div class="post-tags"> <view:post_tags> <h3><a href="(*tag_link*)">#(*tag_name*)</a></h3> </view:post_tags> </div> </div> </box:post_tags></div> <div class="post_de"> <span class="post_details_more"><check:if post_author><i class="fa fa-user"></i> : (*post_author*) |</check:if><check:if post_date><i class="fa fa-calendar"></i> : (*post_date*)</check:if></span> <box:post_rating><span class="rate-box (*user_rated*)"><span class="rate-button-box rate-up (*user_rated_up*)"><a class="rate-button fa fa-heart-o fa-2x" href="(*rate_up_link*)" rel="nofollow" title="Like :)"><img alt="Like" src="//blog.ir/media/images/cleardot.gif">(*up_rates*)</a></span></span></box:post_rating></div> </div> <div class="view-port">  <box:post_comments> <a name="comments"></a> <div class="align"> <div class="messages"> <div class="cnt"> <h2>Comments <a class="comment_count" href="(*post_link*)#comments"> ((*post_comment_count*))</a></h2> <check:if not post_comment_count> <center>No Comments has been posted yet!</center> </check:if> </div> </div> </div> <view:post_comments> <a name="comment-(*comment_id*)"></a> <div class="post-comments align"> <div class="post-comment"> <div class="comment-details"> <div class="comment-details-right"> <span class="comment-avatar"><img src="(*comment_avatar*)"></span> <span class="comment-name"><a target="_blank" href="(*comment_website*)" title="(*comment_website*)" rel="nofollow">(*comment_fullname*)</a></span> </div> </div> <div class="comment-body"> <a class="comment-date" href="(*comment_link*)"><span>(*comment_date format="%d %B %y Ų %H:%M"*)</span></a> <div class="comment-body-content"> (*comment_body*) </div> </div> </div> <check:if comment_reply> <div class="reply-align"> <div class="comment-reply"> <div class="comment-reply-details"> <span class="comment-name"><span>(*comment_reply_fullname*)</span></span> <span class="comment-avatar"><img src="(*comment_reply_avatar*)"></span> </div> <div class="comment-reply-body"> <div class="comment-reply-date"><span class="left-date">(*comment_reply_date*)</span><span class="reply-name">Reply:</span></div> (*comment_reply*) </div> </div> </div> </check:if> </div> </view:post_comments> </box:post_comments>  <check:if post_has_send_comment> <a name="send_comment"></a> <div class="commentForm"> <div class="align"> <div class="comment_add_form"> (*comment_add_form*) </div> </div> </div> </check:if> </div> </box:post_detail>  <box:page_detail> <div class="gallery-item more-desk" tabindex="0"> <div class="content-part">(*page_content*)</div> </div> <div class="view-port">  <box:page_comments> <a name="comments"></a> <div class="align"> <div class="messages"> <div class="cnt"> <h2>Comments <a class="comment_count" href="(*page_link*)#comments"> ((*page_comment_count*))</a></h2> <check:if not page_comment_count> <center>No Comments has been posted yet!</center> </check:if> </div> </div> </div> <view:page_comments> <a name="comment-(*comment_id*)"></a> <div class="post-comments align"> <div class="post-comment"> <div class="comment-details"> <div class="comment-details-right"> <span class="comment-avatar"><img src="(*comment_avatar*)"></span> <span class="comment-name"><a target="_blank" href="(*comment_website*)" title="(*comment_website*)" rel="nofollow">(*comment_fullname*)</a></span> </div> </div> <div class="comment-body"> <a class="comment-date" href="(*comment_link*)"><span>(*comment_date format="%d %B %y Ų %H:%M"*)</span></a> <div class="comment-body-content"> (*comment_body*) </div> </div> </div> <check:if comment_reply> <div class="reply-align"> <div class="comment-reply"> <div class="comment-reply-details"> <span class="comment-name"><span>(*comment_reply_fullname*)</span></span> <span class="comment-avatar"><img src="(*comment_reply_avatar*)"></span> </div> <div class="comment-reply-body"> <div class="comment-reply-date"><span class="left-date">(*comment_reply_date*)</span><span class="reply-name">Reply:</span></div> (*comment_reply*) </div> </div> </div> </check:if> </div> </view:page_comments> </box:page_comments>  <check:if page_has_send_comment> <a name="send_comment"></a> <div class="commentForm"> <div class="align"> <div class="comment_add_form"> (*comment_add_form*) </div> </div> </div> </check:if> </div> </box:page_detail>  </div> </div>  </main> <footer> <span>Designed With <i class="fa fa-heart"></i> By:<a href="//prowebplus.blog.ir">ProWebPlus</a> @ All Rights Reserved.</span> </footer> </body></html> کد ساختار HTML - قالب اینستاگرام نسخه انگلیسی - برای کپی اون کلیک کنید!

*** /*Designed By Prowebplus.blog.ir*/ @import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap'); @font-face { font-family: 'tanha'; src: url('//bayanbox.ir/download/6569803721922940607/Tanha.woff') format('woff'); font-weight: normal; } @font-face { font-family: 'estedad'; font-style:normal; font-weight:400; src: url('//bayanbox.ir/download/3394188548996175807/Estedad-Light.woff') format('woff'); } @font-face { font-family: 'estedad'; font-style:normal; font-weight:bold; src: url('//bayanbox.ir/download/5964064727761107919/Estedad-Bold.woff') format('woff'); } *{font-family:'Balsamiq Sans','estedad','tanha';} ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #010204; border: 2px solid #fffcfc; } ::-webkit-scrollbar-track { background: #ffffff; border: 1px dotted #ffffff; } textarea, input, select{font-family: 'Balsamiq Sans','estedad','tanha'!important;} :root { font-size: 10px; } *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 0; } a{ color: #0061ae; } a:hover{color:#bc0000;} p,font,span,div{color:#000;} a,a:hover,a:before,a:after,a:active,a:visited,a:focus{ text-decoration:none; } audio,video{max-width:100%;} pre{text-align:left;} ul{ margin:0; padding:0; } h1,h2,h3,h4,h5,h6{ font-family: estedad; } body { font-family: tanha; color: #262626; background: #ffffff; font-size: 16px; height: 100vh; transform-style: preserve-3d; perspective: 600px; } img { max-width:100%; height:auto; } .container { max-width: 99%; margin: 2em auto; padding: 0px 1rem; } .btn { display: inline-block; font: inherit; background: none; border: none; color: inherit; padding: 0; cursor: pointer; } .btn:focus { outline: 0.5rem auto #4d90fe; } .maintainbox{ width: 62.66666%; display:inline-block; float:left; } .gallery-item-info a{color:#fff;z-index: 2;position: relative;} .visually-hidden { position: absolute !important; height: 1px; width: 1px; color: #fff; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* Profile Section */ .item_err,.item_warn,.item_success { display: inline-block; } .fa-check{ border-radius:10px; color:#fff; background: #2196F3; border:1px inset #ccc; padding:3px; text-shadow:1px 1px 1px #333; } /* Gallery Section */ .gallery { padding-bottom: 3rem; } .tag-cloud h3 { margin: 0px; font: normal 11px tanha; display: inline-block; * display: inline; * margin: 2px; } .tag-cloud span { display: inline-block; margin: 1px 0px 1px 0px; } .tag-cloud a { font-family: 'Balsamiq Sans','estedad','tanha'; color: #000; background: rgb(249 249 249 / 0%); padding: 3px 7px; display: inline-block; * display: inline-block; margin-left: 1px; /*margin: 2px 0px 2px 0px;*/ } .tag-cloud a:hover { color: #03A9F4; font-weight: 900; } .tag-cloud a.selected { color: #216cf3; font-weight: 900; } .box-tags .post-tags h3{margin: 10px 5px;display: inline-block;} .box-tags .post-tags h3 a{ color: #0064b3;transition:0.4s ease-in-out;} .box-tags .post-tags h3 a:hover{color:#008;transition:0.4s ease-in-out;} .gallery-item { margin: 1rem!important; margin-top: 0!important; } .more-desk{ background: #dadada; } .more-desk .content-part{ text-align:justify; line-height:1.7; margin:10px 0px; word-break: break-word; padding: 15px 15px; outline: none; cursor: default; } .more-desk .post_de{padding: 2px 15px;width: 100%;display: block;text-align: left;direction: ltr;} .post_details_more{ padding: 2px 0pc; font-size: 14px; vertical-align: super; } .more-desk .content-part a h2{color:#000;margin-bottom: 0;} .more-desk .content-part a{color:blue;} .more-desk .content-part a:hover{color:red;} .gallery-item:hover .gallery-item-info, .gallery-item:focus .gallery-item-info { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; border-radius:9px; height: 100%; background-color: #0000004d; } .gallery-item-info { display: none; direction: ltr; } .gallery-item-info a.post-link{z-index: 0;width:100%;height:100%;position:absolute;} .gallery-item-comments{z-index:2} .gallery-item-info li { display: inline-block; font-size: 2rem; font-weight: 600; } .gallery-item-likes { margin-right: 2.2rem; z-index: 2; } .gallery-item-type { position: absolute; top: 1rem; right: 1rem; font-size: 2.5rem; text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1); } .fa-envelope-o{ color:#000; transition: all 1s ease; } .fa-comment-o:before { color: #ffffff; transition: all 1s ease; } .fa-envelope-o:hover:before { content:"\f0e0"; color:#292929; transition: all 1s ease; } .fa-envelope-o:after{ transition: all 1s ease; } .fa-clone, .fa-comment { transform: rotateY(180deg); } .rate-counter{font-family: 'Balsamiq Sans','estedad','tanha';font-weight:600;color: #000;} .more-desk .rate-counter{color:#000;} .gallery-image { width: 100%; height: 100%; border-radius: 5px 5px 0 0; } .view-port{} .comment-port{ width:100%; display:inline-block; float:left; display:inline-block; border-radius: 5px; margin-bottom: 1px; } .more-desk .rate-box{padding: 9px 16px;margin-bottom: 0px;margin-top: -35px;text-align: right;display: block;font-size: 9px;} .fa-heart-o{color: #fff;} .rate-box .fa-heart-o:before { color: #ff0000; transition: all .4s ease; } .more-desk .rate-box .fa-heart-o:before { color: #ff0000; text-shadow:1px 1px 1px #000; transition: all .4s ease; } .rate-box:hover .fa-heart-o:before { content:"\f004"; } .rate-box.rated .fa-heart-o:before { content:"\f004"; color:#ff0000; } .fa-comment-o:before { color: #000; transition: all .4s ease; } .fa-comment-o:hover:before { content:"\f075"; transition: all .4s ease; } .messages h2 { color: #222; font-size: 21px; padding-right:5px; cursor: default; background: #c5c5c5; margin: 0 0 7px; text-align: center; } .messages h2 a.comment_count { color: #333; } .messages h2 a.comment_count:hover { color: #000; cursor: pointer; } .view-port .align .messages{text-align:center;direction: ltr;} /*COMMENT --------------------------------------------- */ .post_comments{ } .cmt_break{ margin-bottom:10px; } .post_comments .title_cmt{ height:20px; width:100%; } .post_comments .body_cmt{ height:auto; line-height:1.9em; /*new*/ padding-top:5px; padding-bottom:8px; background:#383838; border:1px solid #666; border-top:none; border-radius:0px 0px 4px 4px;-moz-border-radius:0px 0px 4px 4px;-webkit-border-radius:0px 0px 4px 4px; } .post_comments .body_cmt .cnt{ color:#ccc; } .post_comments .body_cmt .cnt .cnt_l{ display:inline-block; margin-right:-70px; vertical-align:top; } .post_comments .body_cmt .cnt .cnt_r{ display:inline-block; margin-right:-70px; min-width:50px; height:auto; float:right; } .post_comments .body_cmt .cnt .cnt_r img{ width:30px; height:auto; } .post_comments .body_cmt .cnt a{ color:#ccc; } .post_comments .body_cmt .cnt a:hover{ color:#fff; } .post_comments .body_cmt .cnt{ padding:0 80px 0 20px; } .post_comments .body_cmt .cnt ul{ margin-top:-4px; } .post_comments .body_cmt .cnt ul li{ margin-right:5px; line-height:1.9em; /*new*/ } /*-- Comment Details --*/ .post-comments { font: 14px "tanha","estedad"; } .post-comment { margin-bottom: 0px; border-radius: 5px; } .comment-details { padding: 0; cursor: default; padding-bottom: 5px; } .comment-details a { color: #040404; cursor: pointer; margin-right: 0px; vertical-align: super; -moz-transition-duration: .0s; -webkit-transition-duration: .0s; -o-transition-duration: .0s; -khtml-transition-duration: .0s; padding: 1px 5px; border-radius: 7px; } .comment-details a:hover{color:#03a9f4} .comment-details-left { padding: 4px 0 0 5px; float: left; } .comment-avatar img { width: 50px; height: auto; border-radius: 100%; display: inline-block; } .comment-name { color: #000; cursor: default; vertical-align: sub; padding: 0px 5px; } .comment-body { padding: 10px; background: #333; display: block; border-radius: 18px 9px 18px 18px; margin: auto; width: 90%; } .comment-body-content div,.comment-body-content span,.comment-body-content p,.comment-body-content { color: #ccc; word-break: break-word; } .comment-date { color: #000; display: block; text-align: left; font-size: 10px; float: left; } .comment-date span{ background: #b5b5b5; padding: 2px 8px; border: 1px solid #272727; border-radius: 7px; } .comment-website { background: url(//cdn.bayan.ir/blog/templates/41199/details_ico_cmt.png) center -102px no-repeat; width: 18px; height: 23px; display: inline-block; } .comment-website:hover { background-position: center -125px; cursor: pointer; } .comment-email { background: url(//cdn.bayan.ir/blog/templates/41199/details_ico_cmt.png) center -60px no-repeat; width: 18px; height: 23px; display: inline-block; } .comment-email:hover { background-position: center -79px; cursor: pointer; } /*-- Reply --*/ .reply-align{text-align:left;} .comment-reply { margin: 14px 23px 35px 0px; } .comment-reply .comment-reply-details{ padding: 0; padding-bottom: 5px; } .comment-reply .comment-name{margin-bottom: 0px;display: inline-block;} .comment-reply .comment-name span{color: #000;padding: 2px 7px;border-radius: 7px;} .comment-reply-details { padding: 5px 10px 0; } .comment-reply-date { color: #000; margin-left: 1px; font-size: 10px; margin-bottom: 5px; } .comment-reply-date span{ background: #888; padding: 2px 8px; border: 1px solid #6d6d6d; border-radius: 7px; } .comment-reply-date .left-date{text-align: right;display: inline-block;margin-bottom: 7px;} .comment-reply-date .reply-name{text-align: left;border:0px;font-size:14px;background: none;float: left;direction: ltr;} .comment-reply-name { color: #31ace0; cursor: default; } .comment-reply-body { color: #000000; padding: 10px; word-break: break-word; text-align: right; background: #bbb; margin-bottom: 0px; margin-top: 0px; border: 1px solid #ffffff; box-shadow: 0 3px 5px rgba(117, 100, 100, 0.1); border-radius: 20px 20px 20px 20px; display: block; width: 90%; margin: auto; } .comment_add_form{ color:#CCC; } div.commentForm input.sendbutton{ padding:5px 15px 6px 15px; float: right; background: #777; color: #000; display: block; font-family: 'Balsamiq Sans','estedad','tanha'; cursor:pointer; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } div.commentForm input.sendbutton:hover{ background: #666; } .comment_add_form{ font-family: 'Balsamiq Sans','estedad','tanha'; background: #c0c0c0; border-bottom:1px solid #5f5f5f; border-radius:4px; font-size: 14px; padding: 15px; -moz-border-radius:4px; -webkit-border-radius:4px; } .comment_add_form div.inputFix input.text { font-family: 'Balsamiq Sans','estedad','tanha'!important; } .comment-add-form div.formField2 input.text, select { height: 25px; width: 100%; } div.commentForm iframe {background:#FFF;} /*DB Prowebplus.blog.ir*/ .pagination { cursor: default; display: inline-block; margin: auto; direction: ltr; float: none; text-align: center; margin-bottom: 0; font: 13px "tanha"; } .pagination .left { margin-left: -3px; } .pagination a { padding: 10px 18px 10px; margin-left: 3px; cursor: pointer; float: none; margin-top:15px; font-family:'Balsamiq Sans','estedad','tanha'; display: inline-block; color: #ffffff; border: #302f2f 1px solid; background: #737272; border-radius: 3px; } .pagination a:hover { color: #000000; border: #6d7375 1px solid; background: #b5b5b5; } .pagination a.current { color: #000000; border: #6d7375 1px solid; background: #b5b5b5; } .pagination .spacer { padding: 1px 8px; color: #999; } .pagination { padding-top: 3em; } .pagination .pagesList{display:inline-block;} footer{ display:inline-block; direction: ltr; padding: 0px 10px; text-align: center; width:100%; margin:0px; } footer a{font-weight: 900;transition:0.3s ease-in-out;cursor:pointer;color: #010204;} footer a:hover{color:#ff0000;transition:0.3s ease-in-out;} footer .fa-heart{color: #ff0000;font-size: 18px;font-weight:900;text-shadow:1px 0.5px 0px #000;} /* Media Query */ @media screen and (max-width: 40rem) { .comment-port{background:none;box-shadow:none;} .hideme{display:none;visibility:hidden;opacity:0;} .more-desk{ width: 100%; display:inline-block; margin-right: 0px!important; float:none; } .view-port{ width:100%; position:unset; } .comment-port{ border:0px; width:100%; display:inline-block; float:none; margin-bottom: 8px; height: 100%; overflow: visible; } .maintainbox{ display:none; visibility:hidden; opacity:0; } } /*Designed By Prowebplus.blog.ir*/ .gallery { } .gal-port{margin: auto;width: 75%;} @media (max-width: 40rem) { .gallery-item-info { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; border-radius:9px; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .item_err,.item_warn,.item_success { display: inline-block; } } /*Designed By Prowebplus.blog.ir*/ :root { --color: #3c3163; --transition-time: 0.5s; } .card-columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 0.25rem; -moz-column-gap: 0.25rem; column-gap: 0.25rem; orphans: 1; widows: 1; direction: ltr; } .section-columns { } .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; } .cardonhover{ height: 485px; display:inline-block; padding: 0px 10px 0px 10px; margin-bottom: 1em; } .card { height: 400px; background-color: #000000; font-size: 1.5em; margin-top: 1em; color: white; display: inline-block; margin-bottom: -32px; width: 100%; background-color: #ffff00; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E"); border-radius: 1em; padding: 1em; background-size: cover; background-position: center; box-shadow: 0 0 5px 0em black; transition: all,1s; position: relative; overflow: hidden; border: 10px solid #ccc; text-decoration: none; } .hoverlink:hover{animation: 8s shake ease;animation-delay:2s;} @keyframes shake{ 0%{background-position:50% 50%;} 50%{background-position:100% 100%;} 75%{background-position:0% 0%;} 100%{background-position:50% 50%;} } .card .hoverlink{ position:absolute; width: 100%; right: 0; top: 0; height: 100%; content: ''; z-index: 98; background-size: cover; background-position: center; transition:.5s all; } a.hoverlink:before, a.hoverlink:after { content: ''; transform: scale(1); transform-origin: top left; position: absolute; left: 0%; top: 0%; z-index: 0; transition: all, 1s; transition-timing-function: ease-in-out; } a.hoverlink:after { width: 100%; z-index: 9999; height: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.6) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.6) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#99000000',GradientType=0 ); } .card:hover a.hoverlink:before,.card:hover a.hoverlink:after{ transform: scale(0); border-radius:0% 0% 50% 0%; } .card h2 { margin: 0 0 8px; text-align: center; font-size: 0.9em; top: 1.5em; font-weight: 100; position: relative; color: #ccc; text-shadow: 1px 1px 1px #000; z-index: 98; padding: 15px 7px; /* Fallback for older browsers */ line-height: normal; } .card p { font-size: 0.75em; font-family: 'Open Sans'; margin-top: 0.5em; line-height: 2em; } .features { z-index: 99; width: 100vw; text-align: center; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=90, Direction=0, Color=#000000)";/*IE 8*/ -moz-box-shadow: 0 0 90px 15px rgb(0,0,0) inset;/*FF 3.5+*/ -webkit-box-shadow: 0 0 90px 15px rgb(0,0,0) inset;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/ box-shadow: 0 0 90px 15px rgb(0,0,0) inset;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=90, Direction=135, Color=#000000); /*IE 5.5-7*/ height: 60px; padding: 2em 0em 8px 0em; border-radius: 0px 0px 20px 20px; vertical-align: middle; display: table-cell; } .features .fitems { display: inline-block; font-size: 1em; font-weight: bold; cursor: default; background: #ffffff; box-shadow: 1px 1px 5px 1px inset; border: 1px solid #3c3c3c; border-radius: 0.3rem; padding: 8px 0.5em; margin-right: 0.5em; line-height: 1.5em; transition: all, var(--transition-time); } .features .fitems a{ color:#000; } .card .date { position: absolute; top: 8px; border-radius: 5px; right: 8px; font-size: 14px; background: #fff; padding: 1em; z-index: 99; opacity: .7; cursor: default; line-height: 0; } .card .author { position: absolute; top: 8px; border-radius: 5px; left: 4px; margin-right: 99px; font-size: 14px; background: #fff; padding: 5.4px; cursor: default; z-index: 99; opacity: .7; line-height: 17px; } .card:hover { color: var(--color); } .card:hover:before, .card:hover:after { transform: scale(1); } .card-grid-space .num { font-size: 3em; margin-bottom: 1.2rem; margin-left: 1rem; } header .hcontainer { max-width: 93.5rem; margin: 0 auto; direction: ltr; padding: 0 2rem; } header .cbtn { display: inline-block; font: inherit; background: none; border: none; color: inherit; padding: 0; cursor: pointer; } header .cbtn:focus { outline: 0.5rem auto #4d90fe; } header .profile { padding: 5rem 0; } header .profile::after { content: ""; display: block; clear: both; } header .profile-image { float: left; width: calc(33.333% - 1rem); display: flex; justify-content: center; align-items: center; margin-left: 3rem; } header .profile-image { border-radius: 50%; width: 150px; height: 150px; background-repeat: no-repeat; background-size:cover; background-position:center; } header .profile-user-settings, header .profile-stats, header .profile-bio { float: left; width: calc(66.666% - 2rem); } header .profile-user-settings { margin-top: 1.1rem; } header .profile-user-name { display: inline-block; } header .profile-user-name a{ color: #000; font-size: 3.2rem; } header .profile-edit-btn { font-size: 1.4rem; line-height: 1.8; border: 0.1rem solid #a9a9a9; border-radius: 0.3rem; padding: 0 2.4rem; color: #fff; background: #0490ff; margin-left: 2rem; } header .profile-settings-btn { font-size: 3rem; margin-left: 1rem; color: #0490ff; text-shadow: 1px 1px 0px #666; } header .profile-settings-btn .fa-check-circle{vertical-align:super;} header .profile-stats { margin-top: 2.3rem; } header .profile-stats ul{padding:0px;line-height: 35px;} header .profile-stats li { display: inline-block; font-size: 1.6rem; line-height: 1.5; margin-right: 4rem; cursor: pointer; } header .profile-stats li:last-of-type { margin-right: 0; } header .profile-bio { font-size: 1.6rem; font-weight: 400; line-height: 1.5; margin-top: 2.3rem; } header .profile-stat-count { font-weight: 600; } header .menu_items_hashtags{line-height: 2.5;padding-right: 20px;display: inline-block;} /* Media Query */ @media screen and (max-width: 40rem) { header .profile { display: flex; flex-wrap: wrap; padding: 4rem 0; } header .profile::after { display: none; } header .profile-user-settings, header .profile-bio, header .profile-stats { float: none; width: auto; } header .profile-image { width: 77px; height: 77px; } header .profile-user-name a{font-size:14px} header .profile-user-settings { flex-basis: calc(100% - 10.7rem); display: flex; flex-wrap: wrap; margin-top: 1rem; } header .profile-user-name { font-size: 1.3rem; margin-bottom: 0; } header .profile-edit-btn { order: 1; padding: 0; text-align: center; margin-top: 1rem; } header .profile-edit-btn { margin-left: 0; } header .profile-bio { font-size: 1.4rem; margin-top: 1.5rem; } header .profile-edit-btn, header .profile-bio, header .profile-stats { flex-basis: 100%; } header .profile-stats { order: 1; margin-top: 1.5rem; } header .profile-stats ul { display: flex; text-align: center; padding: 1.2rem 0; border-top: 0.1rem solid #dadada; border-bottom: 0.1rem solid #dadada; } header .profile-stats li { font-size: 1.4rem; flex: 1; margin: 0; } header .profile-stat-count { display: block; } } @supports (display: grid) { header .profile { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: repeat(3, auto); grid-column-gap: 3rem; align-items: center; } header .profile-image { grid-row: 1 / -1; } header #stat_summary_div{display:contents!important;text-align: left;} header .profile-user-settings, header .profile-stats, header .profile-bio { width: auto; margin: 0; } @media (max-width: 40rem) { header .profile { grid-template-columns: auto 1fr; grid-row-gap: 1.5rem; } header .profile-image { grid-row: 2 / 1; } header .profile-user-settings { display: grid; grid-template-columns: auto 1fr; grid-gap: 1rem; } header .profile-edit-btn, header .profile-stats, header .profile-bio { grid-column: 1 / -1; } header .profile-user-settings, header .profile-edit-btn, header .profile-settings-btn, header .profile-bio, header .profile-stats { margin: 0; } } } span#value_VIEW_STAT_TOTAL,span#lang_VIEW_STAT_TOTAL,span#lang_HIT_STAT_TOTAL,span#value_HIT_STAT_TOTAL,span#lang_HIT_STAT_TODAY,span#value_HIT_STAT_TODAY,span#lang_VIEW_STAT_TODAY,span#value_VIEW_STAT_TODAY,span#lang_HIT_STAT_YESTERDAY,span#value_HIT_STAT_YESTERDAY,span#lang_VIEW_STAT_YESTERDAY,span#value_VIEW_STAT_YESTERDAY,span#lang_HIT_STAT_DAY_AVERAGE,span#value_HIT_STAT_DAY_AVERAGE,span#lang_VIEW_STAT_DAY_AVERAGE,span#value_VIEW_STAT_DAY_AVERAGE,span#lang_HIT_STAT_PREVISION,span#value_HIT_STAT_PREVISION,span#lang_VIEW_STAT_PREVISION,span#value_VIEW_STAT_PREVISION,span#lang_VIEW_STAT_COMMENTS_COUNT,span#value_VIEW_STAT_COMMENTS_COUNT,span#lang_VIEW_STAT_BLOG_LIFE_TIME,span#value_VIEW_STAT_BLOG_LIFE_TIME,span#lang_VIEW_STAT_ONLINE_USER,span#value_VIEW_STAT_ONLINE_USER{display:none;position:absolute}span#lang_VIEW_STAT_FOLLWING_COUNT,span#lang_VIEW_STAT_POSTS_COUNT,span#lang_VIEW_STAT_FOLLWER_COUNT{font-size:0}span#lang_VIEW_STAT_FOLLWING_COUNT:before{font-size:1.6rem;content:'Following '}span#lang_VIEW_STAT_FOLLWER_COUNT:before{font-size:1.6rem;content:'Followers '}span#lang_VIEW_STAT_POSTS_COUNT:before{font-size:1.6rem;content:'Posts '} .storycontainer{display: block;text-align: left;white-space: nowrap;overflow-x: scroll;direction: ltr;} .story { width: 100px; height: 100px; margin: 0px 15px; display: inline-block; } .story img { width:70px; border-radius:50%; } .story svg { fill:none; stroke:#8a3ab8; stroke-width: 4px; border-radius: 50%; background-size: cover; background-position: center; stroke-dasharray: 0; background-image: linear-gradient( 89.9deg, rgba(255,18,18,1) -2.8%, rgba(252,246,19,1) 50.8%, rgba(0,159,8,1) 107.9% ); } .story svg:hover{animation: loading 3500ms ease-in-out infinite alternate;} .story svg:active{animation: 8s shake linear;} @keyframes loading { 100% { stroke:#cd476b; stroke-dasharray:10; } } /* MEDIA QUERIES */ @media screen and (max-width: 1285px) { .card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 2.25rem; -moz-column-gap: 2.25rem; column-gap: 2.25rem; } } @media screen and (max-width: 900px) { header .profile-settings-btn .fa-check-circle{vertical-align: top;font-size: 20px;} .card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 8.25rem; -moz-column-gap: 8.25rem; column-gap: 2.25rem; } .info { justify-content: center; } .card-grid-space .num { /margin-left: 0; /text-align: center; } } @media screen and (max-width: 768px){ .gal-port{width: 100%;} .card-columns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 2.25rem; -moz-column-gap: 2.25rem; column-gap: 2.25rem; } .card h2{bottom:2em;} } @media screen and (max-width: 500px) { .card h2{bottom: 2em;} } @media screen and (max-width: 450px) { .card h2{font-size: 0.6em;font-weight: 100;} .card .date{font-size:0.6em;} .info { display: block; text-align: center; } .info h1 { margin: 0; } } کد CSS - قالب اینستاگرام نسخه انگلیسی - برای کپی اون کلیک کنید!

^^^

نسخه فارسی(لطفا توضیحات و راهنمایی های پایین رو بخونید بعد سوال بپرسید):

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

<!DOCTYPE html><html lang="fa"><head> <head:meta></head:meta> <head:style></head:style> <head:script></head:script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">   </head> <body>  <header> <div class="hcontainer"> <div class="profile"> <div class="profile-image" style="background-image: url('(*blog_image*)');"></div> <div class="profile-user-settings"> <h1 class="profile-user-name"><a href="(*blog_link*)">(*blog_title*)</a></h1> <a class="cbtn profile-settings-btn"><i class="fa fa-check-circle"></i></a> <a href="https://blog.ir/panel/-/followed_blogs?follow=(*blog_link*)" class="cbtn profile-edit-btn">دنبال کردن</a> </div> <box:stat> <div class="profile-stats"> <ul><view:stat> <li><span class="profile-stat-count">(*stat_value*)</span> (*stat_title*)</li> </view:stat></ul> </div> </box:stat> <div class="profile-bio"> <p>(*blog_short_description*)</p> <box:menu> <view:menu><a class="menu_items_hashtags" href="(*menu_item_link*)">#(*menu_item_title*)</a></view:menu> </box:menu> </div> </div>  <box:post_list flag="story" max="100"> <div class="storycontainer"> <view:post_list> <div class="story"><a href="(*post_link*)" title="(*post_title*)"> <check:if post_image> <svg style="background-image:url('(*post_image*)');" viewBox="0 0 82 82"> <circle cx="41" cy="41" r="40"></circle> </svg> </check:if> <check:if not post_image> <svg viewBox="0 0 82 82"> <circle cx="41" cy="41" r="40"></circle> </svg> </check:if> </a> </div> </view:post_list> </div> </box:post_list> </div>  </header>  <main> <div class="section-columns"> <section class="slidem card-columns"> <box:post_list> <view:post_list> <check:if post_image> <div class="cardonhover"> <li class="card"> <a class="hoverlink" style="background-image: url((*post_image*))" href="(*post_link*)"></a> <div> <a href="(*post_link*)"><h2>(*post_title*)</h2></a> <check:if post_date><div class="date">(*post_date format="%y/%m/%d"*)</div></check:if> <check:if post_author><div class="author">(*post_author*)</div></check:if> </div> </li> <div class="features"> <box:post_rating><div class="fitems"><span class="rate-box (*user_rated*)"><span class="rate-button-box rate-up (*user_rated_up*)"><a class="rate-button fa fa-heart-o" href="(*rate_up_link*)" rel="nofollow" title="لایک :)"><img alt="لایک" src="//blog.ir/media/images/cleardot.gif">(*up_rates*)</a></span></span></div></box:post_rating> <check:if post_has_comments_section><div class="fitems"><a href="(*post_link*)" title="کامنتها"><i class="fa fa-comment-o"></i> (*post_comment_count*) </a></div></check:if> <div class="fitems showoff"><i class="fa fa-eye"></i> (*post_visits*) </div> </div> </div> </check:if> <check:if not post_image> <div class="cardonhover"> <li class="card"> <a class="hoverlink" href="(*post_link*)"></a> <div> <a href="(*post_link*)"><h2>(*post_title*)</h2></a> <check:if post_date><div class="date">(*post_date format="%y/%m/%d"*)</div></check:if> <check:if post_author><div class="author">(*post_author*)</div></check:if> </div> </li> <div class="features"> <box:post_rating><div class="fitems"><span class="rate-box (*user_rated*)"><span class="rate-button-box rate-up (*user_rated_up*)"><a class="rate-button fa fa-heart-o" href="(*rate_up_link*)" rel="nofollow" title="لایک :)"><img alt="لایک" src="//blog.ir/media/images/cleardot.gif">(*up_rates*)</a></span></span></div></box:post_rating> <check:if post_has_comments_section><div class="fitems"><a href="(*post_link*)" title="کامنتها"><i class="fa fa-comment-o"></i> (*post_comment_count*) </a></div></check:if> <div class="fitems showoff"><i class="fa fa-eye"></i> (*post_visits*) </div> </div> </div> </check:if> </view:post_list> </box:post_list> </section> <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> <div class="container con-port"> <div class="gallery gal-port"> <box:post_detail> <div class="gallery-item more-desk"> <check:if post_image><a href="(*post_link*)"><img alt="(*post_title*)" src="(*post_image*)" class="gallery-image"></a></check:if> <div class="content-part"><a href="(*post_link*)"><h2>(*post_title*)</h2></a><br>(*post_full_content*)<br><box:post_tags> <div class="box-tags"> <div class="post-tags"> <view:post_tags> <h3><a href="(*tag_link*)">#(*tag_name*)</a></h3> </view:post_tags> </div> </div> </box:post_tags></div> <div class="post_de"> <span class="post_details_more"><check:if post_author><i class="fa fa-user"></i> : (*post_author*) |</check:if><check:if post_date><i class="fa fa-calendar"></i> : (*post_date*)</check:if></span> <box:post_rating><span class="rate-box (*user_rated*)"><span class="rate-button-box rate-up (*user_rated_up*)"><a class="rate-button fa fa-heart-o fa-2x" href="(*rate_up_link*)" rel="nofollow" title="لایک :)"><img alt="لایک" src="//blog.ir/media/images/cleardot.gif">(*up_rates*)</a></span></span></box:post_rating></div> </div> <div class="view-port">  <box:post_comments> <a name="comments"></a> <div class="align"> <div class="messages"> <div class="cnt"> <h2>نظرات <a class="comment_count" href="(*post_link*)#comments"> ((*post_comment_count*))</a></h2> <check:if not post_comment_count> <center>هیچ نظری هنوز ثبت نشده است</center> </check:if> </div> </div> </div> <view:post_comments> <a name="comment-(*comment_id*)"></a> <div class="post-comments align"> <div class="post-comment"> <div class="comment-details"> <div class="comment-details-right"> <span class="comment-avatar"><img src="(*comment_avatar*)"></span> <span class="comment-name"><a target="_blank" href="(*comment_website*)" title="(*comment_website*)" rel="nofollow">(*comment_fullname*)</a></span> </div> </div> <div class="comment-body"> <a class="comment-date" href="(*comment_link*)"><span>(*comment_date format="%d %B %y ، %H:%M"*)</span></a> <div class="comment-body-content"> (*comment_body*) </div> </div> </div> <check:if comment_reply> <div class="reply-align"> <div class="comment-reply"> <div class="comment-reply-details"> <span class="comment-name"><span>(*comment_reply_fullname*)</span></span> <span class="comment-avatar"><img src="(*comment_reply_avatar*)"></span> </div> <div class="comment-reply-body"> <div class="comment-reply-date"><span class="left-date">(*comment_reply_date*)</span><span class="reply-name">پاسخ:</span></div> (*comment_reply*) </div> </div> </div> </check:if> </div> </view:post_comments> </box:post_comments>  <check:if post_has_send_comment> <a name="send_comment"></a> <div class="commentForm"> <div class="align"> <div class="comment_add_form"> (*comment_add_form*) </div> </div> </div> </check:if> </div> </box:post_detail>  <box:page_detail> <div class="gallery-item more-desk" tabindex="0"> <div class="content-part">(*page_content*)</div> </div> <div class="view-port">  <box:page_comments> <a name="comments"></a> <div class="align"> <div class="messages"> <div class="cnt"> <h2>نظرات <a class="comment_count" href="(*page_link*)#comments"> ((*page_comment_count*))</a></h2> <check:if not page_comment_count> <center>هیچ نظری هنوز ثبت نشده است</center> </check:if> </div> </div> </div> <view:page_comments> <a name="comment-(*comment_id*)"></a> <div class="post-comments align"> <div class="post-comment"> <div class="comment-details"> <div class="comment-details-right"> <span class="comment-avatar"><img src="(*comment_avatar*)"></span> <span class="comment-name"><a target="_blank" href="(*comment_website*)" title="(*comment_website*)" rel="nofollow">(*comment_fullname*)</a></span> </div> </div> <div class="comment-body"> <a class="comment-date" href="(*comment_link*)"><span>(*comment_date format="%d %B %y ، %H:%M"*)</span></a> <div class="comment-body-content"> (*comment_body*) </div> </div> </div> <check:if comment_reply> <div class="reply-align"> <div class="comment-reply"> <div class="comment-reply-details"> <span class="comment-name"><span>(*comment_reply_fullname*)</span></span> <span class="comment-avatar"><img src="(*comment_reply_avatar*)"></span> </div> <div class="comment-reply-body"> <div class="comment-reply-date"><span class="left-date">(*comment_reply_date*)</span><span class="reply-name">پاسخ:</span></div> (*comment_reply*) </div> </div> </div> </check:if> </div> </view:page_comments> </box:page_comments>  <check:if page_has_send_comment> <a name="send_comment"></a> <div class="commentForm"> <div class="align"> <div class="comment_add_form"> (*comment_add_form*) </div> </div> </div> </check:if> </div> </box:page_detail>  </div> </div>  </main> <footer> <span>Designed With <i class="fa fa-heart"></i> By:<a href="//prowebplus.blog.ir">ProWebPlus</a> @ All Rights Reserved.</span> </footer> </body></html> کد ساختار HTML - قالب اینستاگرام نسخه فارسی - برای کپی اون کلیک کنید!

/*Designed By Prowebplus.blog.ir*/ @import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap'); @font-face { font-family: 'tanha'; src: url('//bayanbox.ir/download/6569803721922940607/Tanha.woff') format('woff'); font-weight: normal; } @font-face { font-family: 'estedad'; font-style:normal; font-weight:400; src: url('//bayanbox.ir/download/3394188548996175807/Estedad-Light.woff') format('woff'); } @font-face { font-family: 'estedad'; font-style:normal; font-weight:bold; src: url('//bayanbox.ir/download/5964064727761107919/Estedad-Bold.woff') format('woff'); } *{font-family:'Balsamiq Sans','estedad','tanha';} ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #010204; border: 2px solid #fffcfc; } ::-webkit-scrollbar-track { background: #ffffff; border: 1px dotted #ffffff; } textarea, input, select{font-family: 'Balsamiq Sans','estedad','tanha'!important;} :root { font-size: 10px; } *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 0; } a{ color: #0061ae; } a:hover{color:#bc0000;} p,font,span,div{color:#000;} a,a:hover,a:before,a:after,a:active,a:visited,a:focus{text-decoration:none;} audio,video{max-width:100%;} pre{text-align:left;} ul{ margin:0; padding:0; } h1,h2,h3,h4,h5,h6{ font-family: estedad; } body { font-family: tanha; color: #262626; background: #ffffff; font-size: 16px; height: 100vh; transform-style: preserve-3d; perspective: 600px; } img { max-width:100%; height:auto; } .container { max-width: 99%; margin: 2em auto; padding: 0px 1rem; } .btn { display: inline-block; font: inherit; background: none; border: none; color: inherit; padding: 0; cursor: pointer; } .btn:focus { outline: 0.5rem auto #4d90fe; } .maintainbox{ width: 62.66666%; display:inline-block; float:left; } .gallery-item-info a{color:#fff;z-index: 2;position: relative;} .visually-hidden { position: absolute !important; height: 1px; width: 1px; color: #fff; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } /* Profile Section */ .item_err,.item_warn,.item_success { display: inline-block; } .fa-check{ border-radius:10px; color:#fff; background: #2196F3; border:1px inset #ccc; padding:3px; text-shadow:1px 1px 1px #333; } /* Gallery Section */ .gallery { padding-bottom: 3rem; } .tag-cloud h3 { margin: 0px; font: normal 11px tanha; display: inline-block; * display: inline; * margin: 2px; } .tag-cloud span { display: inline-block; margin: 1px 0px 1px 0px; } .tag-cloud a { font-family: 'Balsamiq Sans','estedad','tanha'; color: #000; background: rgb(249 249 249 / 0%); padding: 3px 7px; display: inline-block; * display: inline-block; margin-left: 1px; /*margin: 2px 0px 2px 0px;*/ } .tag-cloud a:hover { color: #03A9F4; font-weight: 900; } .tag-cloud a.selected { color: #216cf3; font-weight: 900; } .box-tags .post-tags h3{margin: 10px 5px;display: inline-block;} .box-tags .post-tags h3 a{ color: #0064b3;transition:0.4s ease-in-out;} .box-tags .post-tags h3 a:hover{color:#008;transition:0.4s ease-in-out;} .gallery-item { margin: 1rem!important; margin-top: 0!important; } .more-desk{ background: #dadada; } .more-desk .content-part{ text-align:justify; line-height:1.7; margin:10px 0px; word-break: break-word; padding: 15px 15px; outline: none; cursor: default; } .more-desk .post_de{padding: 2px 15px;width: 100%;display: block;} .post_details_more{ padding: 2px 0pc; font-size: 14px; vertical-align: super; } .more-desk .content-part a h2{color:#000;margin-bottom: 0;} .more-desk .content-part a{color:blue;} .more-desk .content-part a:hover{color:red;} .gallery-item:hover .gallery-item-info, .gallery-item:focus .gallery-item-info { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; border-radius:9px; height: 100%; background-color: #0000004d; } .gallery-item-info { display: none; direction: ltr; } .gallery-item-info a.post-link{z-index: 0;width:100%;height:100%;position:absolute;} .gallery-item-comments{z-index:2} .gallery-item-info li { display: inline-block; font-size: 2rem; font-weight: 600; } .gallery-item-likes { margin-right: 2.2rem; z-index: 2; } .gallery-item-type { position: absolute; top: 1rem; right: 1rem; font-size: 2.5rem; text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1); } .fa-envelope-o{ color:#000; transition: all 1s ease; } .fa-comment-o:before { color: #ffffff; transition: all 1s ease; } .fa-envelope-o:hover:before { content:"\f0e0"; color:#292929; transition: all 1s ease; } .fa-envelope-o:after{ transition: all 1s ease; } .fa-clone, .fa-comment { transform: rotateY(180deg); } .rate-counter{font-family: 'Balsamiq Sans','estedad','tanha';font-weight:600;color: #000;} .more-desk .rate-counter{color:#000;} .gallery-image { width: 100%; height: 100%; border-radius: 5px 5px 0 0; } .view-port{} .comment-port{ width:100%; display:inline-block; float:left; display:inline-block; border-radius: 5px; margin-bottom: 1px; } .more-desk .rate-box{padding: 9px 16px;margin-bottom: 0px;margin-top: -35px;text-align: left;display: block;font-size: 9px;} .fa-heart-o{color: #fff;} .rate-box .fa-heart-o:before { color: #ff0000; transition: all .4s ease; } .more-desk .rate-box .fa-heart-o:before { color: #ff0000; text-shadow:1px 1px 1px #000; transition: all .4s ease; } .rate-box:hover .fa-heart-o:before { content:"\f004"; } .rate-box.rated .fa-heart-o:before { content:"\f004"; color:#ff0000; } .fa-comment-o:before { color: #000; transition: all .4s ease; } .fa-comment-o:hover:before { content:"\f075"; transition: all .4s ease; } .messages h2 { color: #222; font-size: 21px; padding-right:5px; cursor: default; background: #c5c5c5; margin: 0 0 7px; text-align: center; } .messages h2 a.comment_count { color: #333; } .messages h2 a.comment_count:hover { color: #000; cursor: pointer; } .view-port .align .messages{text-align:center;} /*COMMENT --------------------------------------------- */ .post_comments{ } .cmt_break{ margin-bottom:10px; } .post_comments .title_cmt{ height:20px; width:100%; } .post_comments .body_cmt{ height:auto; line-height:1.9em; /*new*/ padding-top:5px; padding-bottom:8px; background:#383838; border:1px solid #666; border-top:none; border-radius:0px 0px 4px 4px;-moz-border-radius:0px 0px 4px 4px;-webkit-border-radius:0px 0px 4px 4px; } .post_comments .body_cmt .cnt{ color:#ccc; } .post_comments .body_cmt .cnt .cnt_l{ display:inline-block; margin-right:-70px; vertical-align:top; } .post_comments .body_cmt .cnt .cnt_r{ display:inline-block; margin-right:-70px; min-width:50px; height:auto; float:right; } .post_comments .body_cmt .cnt .cnt_r img{ width:30px; height:auto; } .post_comments .body_cmt .cnt a{ color:#ccc; } .post_comments .body_cmt .cnt a:hover{ color:#fff; } .post_comments .body_cmt .cnt{ padding:0 80px 0 20px; } .post_comments .body_cmt .cnt ul{ margin-top:-4px; } .post_comments .body_cmt .cnt ul li{ margin-right:5px; line-height:1.9em; /*new*/ } /*-- Comment Details --*/ .post-comments { font: 14px "tanha","estedad"; } .post-comment { margin-bottom: 0px; border-radius: 5px; } .comment-details { padding: 0; cursor: default; padding-bottom: 5px; } .comment-details a { color: #040404; cursor: pointer; margin-right: 0px; vertical-align: super; -moz-transition-duration: .0s; -webkit-transition-duration: .0s; -o-transition-duration: .0s; -khtml-transition-duration: .0s; padding: 1px 5px; border-radius: 7px; } .comment-details a:hover{color:#03a9f4} .comment-details-left { padding: 4px 0 0 5px; float: left; } .comment-avatar img { width: 50px; height: auto; border-radius: 100%; display: inline-block; } .comment-name { color: #000; cursor: default; vertical-align: sub; padding: 0px 5px; } .comment-body { padding: 10px; background: #333; display: block; border-radius: 18px 9px 18px 18px; margin: auto; width: 90%; } .comment-body-content div,.comment-body-content span,.comment-body-content p,.comment-body-content { color: #ccc; word-break: break-word; } .comment-date { color: #000; display: block; text-align: left; font-size: 10px; float: left; } .comment-date span{ background: #b5b5b5; padding: 2px 8px; border: 1px solid #272727; border-radius: 7px; } .comment-website { background: url(//cdn.bayan.ir/blog/templates/41199/details_ico_cmt.png) center -102px no-repeat; width: 18px; height: 23px; display: inline-block; } .comment-website:hover { background-position: center -125px; cursor: pointer; } .comment-email { background: url(//cdn.bayan.ir/blog/templates/41199/details_ico_cmt.png) center -60px no-repeat; width: 18px; height: 23px; display: inline-block; } .comment-email:hover { background-position: center -79px; cursor: pointer; } /*-- Reply --*/ .reply-align{text-align:left;} .comment-reply { margin: 14px 23px 35px 0px; } .comment-reply .comment-reply-details{ padding: 0; padding-bottom: 5px; } .comment-reply .comment-name{text-align: left;margin-bottom: 0px;display: inline-block;} .comment-reply .comment-name span{color: #000;padding: 2px 7px;border-radius: 7px;} .comment-reply-details { padding: 5px 10px 0; } .comment-reply-date { color: #000; margin-left: 1px; font-size: 10px; margin-bottom: 5px; } .comment-reply-date span{ background: #888; padding: 2px 8px; border: 1px solid #6d6d6d; border-radius: 7px; } .comment-reply-date .left-date{text-align:left;float:left;} .comment-reply-date .reply-name{text-align:right;border:0px;font-size:14px;background: none;} .comment-reply-name { color: #31ace0; cursor: default; } .comment-reply-body { color: #000000; padding: 10px; word-break: break-word; text-align: right; background: #bbb; margin-bottom: 0px; margin-top: 0px; border: 1px solid #ffffff; box-shadow: 0 3px 5px rgba(117, 100, 100, 0.1); border-radius: 20px 20px 20px 20px; display: block; width: 90%; margin: auto; } .comment_add_form{ color:#CCC; } div.commentForm input.sendbutton{ padding:5px 15px 6px 15px; float: right; background: #777; color: #000; display: block; font-family: 'Balsamiq Sans','estedad','tanha'; cursor:pointer; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } div.commentForm input.sendbutton:hover{ background: #666; } .comment_add_form{ font-family: 'Balsamiq Sans','estedad','tanha'; background: #c0c0c0; border-bottom:1px solid #5f5f5f; border-radius:4px; font-size: 14px; padding: 15px; -moz-border-radius:4px; -webkit-border-radius:4px; } .comment_add_form div.inputFix input.text { font-family: 'Balsamiq Sans','estedad','tanha'!important; } .comment-add-form div.formField2 input.text, select { height: 25px; width: 100%; } div.commentForm iframe {background:#FFF;} /*DB Prowebplus.blog.ir*/ .pagination { cursor: default; display: inline-block; margin: auto; float: none; text-align: center; margin-bottom: 0; font: 13px "tanha"; } .pagination .left { margin-left: -3px; } .pagination a { padding: 10px 18px 10px; margin-left: 3px; cursor: pointer; float: none; margin-top:15px; font-family:'Balsamiq Sans','estedad','tanha'; display: inline-block; color: #ffffff; border: #302f2f 1px solid; background: #737272; border-radius: 3px; } .pagination a:hover { color: #000000; border: #6d7375 1px solid; background: #b5b5b5; } .pagination a.current { color: #000000; border: #6d7375 1px solid; background: #b5b5b5; } .pagination .spacer { padding: 1px 8px; color: #999; } .pagination { padding-top: 3em; } .pagination .pagesList{display:inline-block;} footer{ display:inline-block; direction: ltr; padding: 0px 10px; text-align: center; width:100%; margin:0px; } footer a{font-weight: 900;transition:0.3s ease-in-out;cursor:pointer;color: #010204;} footer a:hover{color:#ff0000;transition:0.3s ease-in-out;} footer .fa-heart{color: #ff0000;font-size: 18px;font-weight:900;text-shadow:1px 0.5px 0px #000;} /* Media Query */ @media screen and (max-width: 40rem) { .comment-port{background:none;box-shadow:none;} .hideme{display:none;visibility:hidden;opacity:0;} .more-desk{ width: 100%; display:inline-block; margin-right: 0px!important; float:none; } .view-port{ width:100%; position:unset; } .comment-port{ border:0px; width:100%; display:inline-block; float:none; margin-bottom: 8px; height: 100%; overflow: visible; } .maintainbox{ display:none; visibility:hidden; opacity:0; } } /*Designed By Prowebplus.blog.ir*/ .gallery { } .gal-port{margin: auto;width: 75%;} @media (max-width: 40rem) { .gallery-item-info { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 100%; border-radius:9px; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .item_err,.item_warn,.item_success { display: inline-block; } } /*Designed By Prowebplus.blog.ir*/ :root { --color: #3c3163; --transition-time: 0.5s; } .card-columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 0.25rem; -moz-column-gap: 0.25rem; column-gap: 0.25rem; orphans: 1; widows: 1; } .section-columns { } .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; } .cardonhover{ height: 485px; display:inline-block; padding: 0px 10px 0px 10px; margin-bottom: 1em; } .card { height: 400px; background-color: #000000; font-size: 1.5em; margin-top: 1em; color: white; display: inline-block; margin-bottom: -32px; width: 100%; background-color: #ffff00; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E"); border-radius: 1em; padding: 1em; background-size: cover; background-position: center; box-shadow: 0 0 5px 0em black; transition: all,1s; position: relative; overflow: hidden; border: 10px solid #ccc; text-decoration: none; } .hoverlink:hover{animation: 8s shake ease;animation-delay:2s;} @keyframes shake{ 0%{background-position:50% 50%;} 50%{background-position:100% 100%;} 75%{background-position:0% 0%;} 100%{background-position:50% 50%;} } .card .hoverlink{ position:absolute; width: 100%; right: 0; top: 0; height: 100%; content: ''; z-index: 98; background-size: cover; background-position: center; transition:.5s all; } a.hoverlink:before, a.hoverlink:after { content: ''; transform: scale(1); transform-origin: top left; position: absolute; left: 0%; top: 0%; z-index: 0; transition: all, 1s; transition-timing-function: ease-in-out; } a.hoverlink:after { width: 100%; z-index: 9999; height: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.6) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.6) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#99000000',GradientType=0 ); } .card:hover a.hoverlink:before,.card:hover a.hoverlink:after{ transform: scale(0); border-radius:0% 0% 50% 0%; } .card h2 { margin: 0 0 8px; text-align: center; font-size: 0.9em; font-weight: 100; top: 1.5em; position: relative; color: #ccc; text-shadow: 1px 1px 1px #000; z-index: 98; padding: 15px 7px; /* Fallback for older browsers */ line-height: normal; } .card p { font-size: 0.75em; font-family: 'Open Sans'; margin-top: 0.5em; line-height: 2em; } .features { z-index: 99; width: 100vw; text-align: center; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=90, Direction=0, Color=#000000)";/*IE 8*/ -moz-box-shadow: 0 0 90px 15px rgb(0,0,0) inset;/*FF 3.5+*/ -webkit-box-shadow: 0 0 90px 15px rgb(0,0,0) inset;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/ box-shadow: 0 0 90px 15px rgb(0,0,0) inset;/* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=90, Direction=135, Color=#000000); /*IE 5.5-7*/ height: 60px; padding: 2em 0em 8px 0em; border-radius: 0px 0px 20px 20px; vertical-align: middle; display: table-cell; } .features .fitems { display: inline-block; font-size: 1em; font-weight: bold; cursor: default; background: #ffffff; box-shadow: 1px 1px 5px 1px inset; border: 1px solid #3c3c3c; border-radius: 0.3rem; padding: 8px 0.5em; margin-right: 0.5em; line-height: 1.5em; transition: all, var(--transition-time); } .features .fitems a{ color:#000; } .card .date { position: absolute; top: 8px; border-radius: 5px; right: 8px; font-size: 14px; background: #fff; padding: 1em; z-index: 99; opacity: .7; cursor: default; line-height: 0; } .card .author { position: absolute; top: 8px; border-radius: 5px; left: 4px; margin-right: 99px; font-size: 14px; background: #fff; padding: 5.4px; cursor: default; z-index: 99; opacity: .7; line-height: 17px; } .card:hover { color: var(--color); } .card:hover:before, .card:hover:after { transform: scale(1); } .card-grid-space .num { font-size: 3em; margin-bottom: 1.2rem; margin-left: 1rem; } header .hcontainer { max-width: 93.5rem; margin: 0 auto; padding: 0 2rem; } header .cbtn { display: inline-block; font: inherit; background: none; border: none; color: inherit; padding: 0; cursor: pointer; } header .cbtn:focus { outline: 0.5rem auto #4d90fe; } header .profile { padding: 5rem 0; } header .profile::after { content: ""; display: block; clear: both; } header .profile-image { float: left; width: calc(33.333% - 1rem); display: flex; justify-content: center; align-items: center; margin-right: 3rem; } header .profile-image { border-radius: 50%; width: 150px; height: 150px; background-repeat: no-repeat; background-size:cover; background-position:center; } header .profile-user-settings, header .profile-stats, header .profile-bio { float: left; width: calc(66.666% - 2rem); } header .profile-user-settings { margin-top: 1.1rem; } header .profile-user-name { display: inline-block; } header .profile-user-name a{ color: #000; font-size: 3.2rem; } header .profile-edit-btn { font-size: 1.4rem; line-height: 1.8; border: 0.1rem solid #a9a9a9; border-radius: 0.3rem; padding: 0 2.4rem; color: #fff; background: #0490ff; margin-left: 2rem; } header .profile-settings-btn { font-size: 3rem; margin-left: 1rem; color: #0490ff; text-shadow: 1px 1px 0px #666; } header .profile-settings-btn .fa-check-circle{vertical-align:super;} header .profile-stats { margin-top: 2.3rem; } header .profile-stats ul{padding:0px;line-height: 35px;} header .profile-stats li { display: inline-block; font-size: 1.6rem; line-height: 1.5; margin-left: 4rem; cursor: pointer; } header .profile-stats li:last-of-type { margin-right: 0; } header .profile-bio { font-size: 1.6rem; font-weight: 400; line-height: 1.5; margin-top: 2.3rem; } header .profile-stat-count { font-weight: 600; } header .menu_items_hashtags{line-height: 2.5;padding-left: 20px;display: inline-block;} /* Media Query */ @media screen and (max-width: 40rem) { header .profile { display: flex; flex-wrap: wrap; padding: 4rem 0; } header .profile::after { display: none; } header .profile-user-settings, header .profile-bio, header .profile-stats { float: none; width: auto; } header .profile-image { width: 77px; height: 77px; } header .profile-user-name a{font-size:14px} header .profile-user-settings { flex-basis: calc(100% - 10.7rem); display: flex; flex-wrap: wrap; margin-top: 1rem; } header .profile-user-name { font-size: 1.3rem; margin-bottom: 0; } header .profile-edit-btn { order: 1; padding: 0; text-align: center; margin-top: 1rem; } header .profile-edit-btn { margin-left: 0; } header .profile-bio { font-size: 1.4rem; margin-top: 1.5rem; } header .profile-edit-btn, header .profile-bio, header .profile-stats { flex-basis: 100%; } header .profile-stats { order: 1; margin-top: 1.5rem; } header .profile-stats ul { display: flex; text-align: center; padding: 1.2rem 0; border-top: 0.1rem solid #dadada; border-bottom: 0.1rem solid #dadada; } header .profile-stats li { font-size: 1.4rem; flex: 1; margin: 0; } header .profile-stat-count { display: block; } } @supports (display: grid) { header .profile { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: repeat(3, auto); grid-column-gap: 3rem; align-items: center; } header .profile-image { grid-row: 1 / -1; } header #stat_summary_div{display:contents!important;text-align: right;} header .profile-user-settings, header .profile-stats, header .profile-bio { width: auto; margin: 0; } @media (max-width: 40rem) { header .profile { grid-template-columns: auto 1fr; grid-row-gap: 1.5rem; } header .profile-image { grid-row: 2 / 1; } header .profile-user-settings { display: grid; grid-template-columns: auto 1fr; grid-gap: 1rem; } header .profile-edit-btn, header .profile-stats, header .profile-bio { grid-column: 1 / -1; } header .profile-user-settings, header .profile-edit-btn, header .profile-settings-btn, header .profile-bio, header .profile-stats { margin: 0; } } } span#value_VIEW_STAT_TOTAL,span#lang_VIEW_STAT_TOTAL,span#lang_HIT_STAT_TOTAL,span#value_HIT_STAT_TOTAL,span#lang_HIT_STAT_TODAY,span#value_HIT_STAT_TODAY,span#lang_VIEW_STAT_TODAY,span#value_VIEW_STAT_TODAY,span#lang_HIT_STAT_YESTERDAY,span#value_HIT_STAT_YESTERDAY,span#lang_VIEW_STAT_YESTERDAY,span#value_VIEW_STAT_YESTERDAY,span#lang_HIT_STAT_DAY_AVERAGE,span#value_HIT_STAT_DAY_AVERAGE,span#lang_VIEW_STAT_DAY_AVERAGE,span#value_VIEW_STAT_DAY_AVERAGE,span#lang_HIT_STAT_PREVISION,span#value_HIT_STAT_PREVISION,span#lang_VIEW_STAT_PREVISION,span#value_VIEW_STAT_PREVISION,span#lang_VIEW_STAT_COMMENTS_COUNT,span#value_VIEW_STAT_COMMENTS_COUNT,span#lang_VIEW_STAT_BLOG_LIFE_TIME,span#value_VIEW_STAT_BLOG_LIFE_TIME,span#lang_VIEW_STAT_ONLINE_USER,span#value_VIEW_STAT_ONLINE_USER{display:none;position:absolute}span#lang_VIEW_STAT_FOLLWING_COUNT,span#lang_VIEW_STAT_POSTS_COUNT,span#lang_VIEW_STAT_FOLLWER_COUNT{font-size:0}span#lang_VIEW_STAT_FOLLWING_COUNT:before{font-size:1.6rem;content:'دنبال شده '}span#lang_VIEW_STAT_FOLLWER_COUNT:before{font-size:1.6rem;content:'دنبال کننده '}span#lang_VIEW_STAT_POSTS_COUNT:before{font-size:1.6rem;content:'تعداد پست ها '} .storycontainer{display: block;text-align: right;white-space: nowrap;overflow-x: scroll;direction: rtl;} .story { width: 100px; height: 100px; margin: 0px 15px; display: inline-block; } .story img { width:70px; border-radius:50%; } .story svg { fill:none; stroke:#8a3ab8; stroke-width: 4px; border-radius: 50%; background-size: cover; background-position: center; stroke-dasharray: 0; background-image: linear-gradient( 89.9deg, rgba(255,18,18,1) -2.8%, rgba(252,246,19,1) 50.8%, rgba(0,159,8,1) 107.9% ); } .story svg:hover{animation: loading 3500ms ease-in-out infinite alternate;} .story svg:active{animation: 8s shake linear;} @keyframes loading { 100% { stroke:#cd476b; stroke-dasharray:10; } } /* MEDIA QUERIES */ @media screen and (max-width: 1285px) { .card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 2.25rem; -moz-column-gap: 2.25rem; column-gap: 2.25rem; } } @media screen and (max-width: 900px) { header .profile-settings-btn .fa-check-circle{vertical-align: top;font-size: 20px;} .card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 8.25rem; -moz-column-gap: 8.25rem; column-gap: 2.25rem; } .info { justify-content: center; } .card-grid-space .num { /margin-left: 0; /text-align: center; } } @media screen and (max-width: 768px){ .gal-port{width: 100%;} .card-columns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 2.25rem; -moz-column-gap: 2.25rem; column-gap: 2.25rem; } .card h2{bottom:2em;} } @media screen and (max-width: 500px) { .card h2{bottom: 2em;} } @media screen and (max-width: 450px) { .card h2{font-size: 0.6em;font-weight: 100;} .card .date{font-size:0.6em;} .info { display: block; text-align: center; } .info h1 { margin: 0; } }

***

کد CSS - قالب اینستاگرام نسخه فارسی - برای کپی اون کلیک کنید!

راهنمای استفاده

این قالب در دو نسخه آماده شده، نسخه فارسی و نسخه انگلیسی

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

ولی اگر فارسی نوشتین ، نسخه فارسی رو استفاده کنید.

پست ها طبق خواسته شما عمل میکنن!

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

نکته مهم!

در نسخه فارسی میتونید اسم نویسنده رو انگلیسی قرار بدید و انگلیسی توضیحات بنویسید، ولی در نسخه انگلیسی فارسی نوشتن ظاهر شلخته و نامنظمی به قالب وبلاگتون میده! پس دقت کنید!

یادتون نره لینک رو قرار بدید!

در هر دو نسخه دکمه آبی رنگ به منزله دنبال کردن وبلاگ قرار داده شده، برای اینکه کاربر ها بتونن وبلاگ شما رو دنبال کنن، باید آدرس وبلاگ خودتون رو در ساختار قالب در قسمتی که در گیف زیر نشون داده شده قرار بدید:

طریقه قرار دادن استوری و گلچین کردن پست ها!

+منظورم از داستان در توضیحات پایین همون : story یا استوری(که داخل اینستاگرام استفاده میشه) هست، اشتباه متوجه نشید:)

بعد از اینکه قالب رو قرار دادین، نوبت میرسه به یادگیری نحوه قرار دادن استوری، این ویژگی به شما این امکان رو میده تا پست های دلخواه وبلاگتون رو گلچین کنید و در معرض دید مخاطب قرار بدید، لطفا با دقت به آموزش نگاه کنید و مراحل رو دنبال:

1.بعد از باز کردن پنل وبلاگ، برید به قسمت تنظیمات>و سپس به تنظیمات پیشرفته

2.در صفحه باز شده از قسمت تنظیمات مطلب، تیک گذینه های:

_ امکان انتخاب تصویر برای مطالب

_استفاده از نشانه برای مطالب

رو بزنید:

3.در پایین صفحه، تنظیمات مربوط به نشانه ها بعد از زدن تیک گذینه"استفاده از نشانه برای مطلب" ظاهر میشه(مرحله 2)، روی نشانه جدید کلیک کنید:

4.پنجره ای باز میشه با دو ورودی، نام و شناسه لاتین، نام رو داستان بزارید و شناسه لاتین رو با حروف کوچیک(همه حروف) کلمه : story

5.بعد از اتمام این کار ، تنظیمات رو ذخیره کنید!

6.از قسمت منوی پنل وبلاگتون به قسمت >انتشار>فهرست مطالب برید و یکی از پست هایی که میخواید به عنوان داستان در قالب قرار بگیره انتخاب کنید، اگر تصویری برای اون انتخاب نکردید، از طریق کادر باز شده در زیر ادرس پست در ویرایشگر مطلب، تصویر رو انتخاب کنید.

بعد از منوی سمت چپ قسمت نشانه ها تیک گذینه داستان رو بزنید و پست رو ذخیره کنید!

شما میتونید برای پست جدید هم این کار رو انجام بدید، نیازی نیست حتما پست های قبل باشه!

نکات مهم در مورد قرار دادن استوری:

1. حداکثر تعداد استوری 100 پست هست

2.برای برداشتن استوری کافیه بعد از کلیک بر روی ویرایش پست مورد نظر، تیک گذینه داستان رو از قسمت نشانه ها بردارید.

3.اگر تعداد استوری هایی که اضافه کردید زیاد هست و حوصله برداشتن تیک داستان رو از تک تک پست ها ندارید، کافیه به قسمت تنظیمات>تنظیمات پیشرفته برید و نشانه داستان رو حذف و دوباره اضافه کنید، این کار باعث میشه تمامی داستان های شما حذف بشه و نیازی به تک تک برداشتن داستان ها نباشه!

4.پیشنهاد من قرار دادن 10 استوری هست، ولی اگر دوست داشتین میتونید 100 تا هم قرار بدید، هیچ محدودیتی نداره و قالب شما به هم نمیریزه. ولی وبلاگ شما دیرتر بالا میاد!(بخاطر حجم زیاد تصویر!)

نکته خیلی خیلی مهم در خصوص قسمت خلاصه آمار!

وارد پنل وبلاگتون بشید و برید به قسمت ، تنظیمات>تنظیمات ساده ، و در صفحه باز شده قسمت "تنظیمات آمار" فقط سه گذینه زیر رو تیک بزنید برای نمایش آمار:

1.مجموع مطالب

2.تعداد دنبال‌کنندگان

3.تعداد وبلاگ‌هایی که مدیر سایت دنبال می‌کند

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

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

تیک بقیه گذینه های تنظیمات آمار رو بردارید، وگرنه ظاهر قالبتون به هم میریزه!!!!!!!

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

1.تعداد پست ها رو به 6 پست در صفحه اصلی و 6 پست در بقیه صفحات قرار بدید تا سرعت بارگزاری وبلاگتون کم نشه!

2.اگر تعداد زیادی از پست های وبلاگتون تصویر ندارن، نگران نباشید، بجای تصویر ، تصویر زمینه پیشفرض اعمال میشه!

3.قبل از انتشار مطلب ، حجم تصویرتون رو نزدیک به 100 کیلوبایت(KB) یا کمتر کنید تا مخاطب های شما برای مشاهده تصاویر وقتشون گرفته نشه!

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

+تمنا میکنم قبل از پرسیدن سوال راجب قالب مطمئن بشین که جواب سوالتون در توضیحات بالا نیست!

۳۱ فروردين ۱۴۰۰

نویسنده آشنا

۳۳

ارسال نظر

نظر دادن تنها برای اعضای بیان ممکن است.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.

میــ ــم

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

۲۶ مهر ۱۴۰۱

میــ ــم

عذرخواهی میکنم ، من وقت ندارم، کامپیوتر همرام نیست

پست اخرم اگر خونده باشین ، نوشته بودم که با گوشی تایپ کردم، البته با کیبورد

با این حال وقت ویرایش و کمک ندارم، لطفاً از وبلاگ اسمان من یا بچه های دیگه کمک بگیرید. لینک هم نکردید خبری نیست فقط لینک داخل فوتر حذف نکنید که من راضی نیستم داخل قوانین وبلاگ هم گفتم.

شب بخیر

۲۶ مهر ۱۴۰۱

میــ ــم

بخش‌هایی از این نظر که با * مشخص شده، توسط مدیر سایت حذف شده است

درستش گزینه هست. نه گذینه ((*

۸ مهر ۱۴۰۱

میــ ــم

بخش‌هایی از این نظر که با * مشخص شده، توسط مدیر سایت حذف شده است

درستش گزینه هست. نه گذینه ((*

ممنون ، در جریان هستم، این پست برای خیلی وقت پیش هست

و قبل از شما خیلی ها خصوصی و عمومی تذکر دادن توی پست های مختلف.

۹ مهر ۱۴۰۱

میــ ــم

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

۸ مهر ۱۴۰۱

میــ ــم

سلیقه شخصی و سفارشی‌سازی ، اینا کار استفاده کننده اس

هر موقع کسی رو دیدید که استفاده میکنه و بلده ویرایش، بهش بگید.

۹ مهر ۱۴۰۱

میــ ــم

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

۶ مرداد ۱۴۰۱

میــ ــم

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

۶ مرداد ۱۴۰۱

ali rabbani

عالییی

۳ ارديبهشت ۱۴۰۰

ali rabbani

عالییی

ممنون:)🌹

۳ ارديبهشت ۱۴۰۰

فآطم ..

ایده خیلییی خلاقی بود :)))

۲ ارديبهشت ۱۴۰۰

فآطم ..

ایده خیلییی خلاقی بود :)))

ممنون لطف دارین😄🙏🌹🌹

۲ ارديبهشت ۱۴۰۰

فآطم ..

وای چقدر جالبه این مدلی 😶

۲ ارديبهشت ۱۴۰۰

فآطم ..

وای چقدر جالبه این مدلی 😶

بله، اینستاگرام کی باشه کسی بهش نه بگه😄😂

۲ ارديبهشت ۱۴۰۰

Mr Ghost32

۲.۵ اکانت دارم 😂😂

۱ ارديبهشت ۱۴۰۰

Mr Ghost32

۲.۵ اکانت دارم 😂😂

خدا زیادش کنه واست😜😂

۱ ارديبهشت ۱۴۰۰

Mr Ghost32

کاش ۱۰ ۲۰ تا حساب داشتم میومدم این پستو لایک میکردم خیلی خفنه
😂👏👏👌👌😀😀😱😱😮

۱ ارديبهشت ۱۴۰۰

Mr Ghost32

کاش ۱۰ ۲۰ تا حساب داشتم میومدم این پستو لایک میکردم خیلی خفنه
😂👏👏👌👌😀😀😱😱😮

آرام باش فرزندم😄

مطمئنم که 10 تا رو داری😂،ولی همون یه دونش کفایت میکنه👌😄

ممنون🌹

۱ ارديبهشت ۱۴۰۰

bahar ....

بله
نه اصلا، جدی نمیگیرم
منم شوخی گفتم😂

۳۱ فروردين ۱۴۰۰

bahar ....

بله
نه اصلا، جدی نمیگیرم
منم شوخی گفتم😂

خوبه🌹😅🙏 ممنون از شما

۳۱ فروردين ۱۴۰۰

پســر زمسـتان ッ

چه قشنگ و فانتزی شده رفیق
عالیه 🤩✌️
آموزش قرآن هم کار خیلی خوبیه انشالله با توکل به خدا و‌ تلاشت به آرزوهات برسی

۳۱ فروردين ۱۴۰۰

پســر زمسـتان ッ

اره، 3 ماه منتظر بودم خودم که انتشارش بدم، بلاخره وقتش رسید:)

ممنون🌹

انشالله🙏ممنون ، همچنین رفیق:)

۳۱ فروردين ۱۴۰۰

.ک. .ن.

چقدر خفنه :)
ماشالله

۳۱ فروردين ۱۴۰۰

.ک. .ن.

چقدر خفنه :)
ماشالله

خفنی از خودته عزیز🌹🙏

هزار ماشالله😅🙏

۳۱ فروردين ۱۴۰۰

فرناز فرزان

سلام
بسیار عالی

۳۱ فروردين ۱۴۰۰

فرناز فرزان

سلام
بسیار عالی

سلام

🙏🌹ممنون لطف دارین

۳۱ فروردين ۱۴۰۰

bahar ....

نویسنده آشنا شما خیلی ریز به من طعنه زدین 😂😂😂

۳۱ فروردين ۱۴۰۰

bahar ....

نویسنده آشنا شما خیلی ریز به من طعنه زدین 😂😂😂

هرچی گفتم از روی شوخی بوده و خنده😅 جدی نگیرین:)

۳۱ فروردين ۱۴۰۰

bahar ....

سلام
بالاخره موفق شدین :))

۳۱ فروردين ۱۴۰۰

bahar ....

سلام
بالاخره موفق شدین :))

سلام

قالب هایی که الان میزارم پارسال درست کردم :) امسال فقط تست و عیب یابی کردم.

قرار دادن همچین قالب هایی مطمئنن رایگان نیست داخل اینترنت، بخاطر همین هست که تا الان نزاشتم

والا شما هر چیزی که فکرشو بکنید میتونم طراحی و خدمتتون تقدیم کنم🌹

+این اولین نظر شما داخل وبلاگ منه، خدا بده برکت😅

۳۱ فروردين ۱۴۰۰

elaheh solimani

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

۳۱ فروردين ۱۴۰۰

elaheh solimani

سلام، خواهش میکنم🌹🌹، به قسمت تنظیمات > تنظیمات ساده برید و از قسمت تنظیمات آمار، فقط تیک

1.مجموع مطالب

2.تعداد دنبال‌کنندگان

3.تعداد وبلاگ‌هایی که مدیر سایت دنبال می‌کند

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

تیک بقیه گذینه ها رو بردارید!!

۳۱ فروردين ۱۴۰۰

niloo niki

واو عالیه

۳۱ فروردين ۱۴۰۰

niloo niki

واو عالیه

قابل شما رو نداره🌹🌹:)

۳۱ فروردين ۱۴۰۰

‌‌ Mobina

سلام
خسته نباشید، خداقوت 🌹
چقدرهم خوشگلن اینا 😍

۳۱ فروردين ۱۴۰۰

‌‌ Mobina

سلام
خسته نباشید، خداقوت 🌹
چقدرهم خوشگلن اینا 😍

سلام

سلامت باشین، ممنون😅🌹

عکس های داخل پوستر رو یهویی انتخاب کردم، خوشبختانه جالب شد!

۳۱ فروردين ۱۴۰۰