اضافة هيدر داخل المواضيع لمعلومات عن التدوينة كتبها: المدون التقني

اضافة هيدر داخل المواضيع لمعلومات عن التدوينة كتبها: المدون التقني - الخبير عامر بشير

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

قم بالبحث عن الوسم ]]> ثم قم بوضع فوقه الكود التالى ( قبله )

 * معلومات عن الموضوع داخل التدوينة 
 * ------------------------------ */
#cover-post{width:1170px;margin-top:70px}
.post-thumb div{height:380px}
.title-cover .post-thumb{height:250px;overflow:hidden;background-color:rgba(28,28,28,0);box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 5px 0 rgba(0,0,0,.23);border-radius:10px}
.title-cover .post-thumb img{position:absolute;width:100%;height:250px;background-attachment:fixed;-webkit-filter:blur(2px);background-size:75%;background-position:50% -35%}
.commenterr::before{color:#fff;display:-webkit-inline-box;content:"\f086";font-family:fontawesome;margin:0 0 0 5px;font-size:35px}
.commenterr{text-align:center;color:#fff;font-family:'Mahdi-font';margin:0 0 0 10px}
.timer::before{color:#fff;display:-webkit-inline-box;content:"\f073";font-family:fontawesome;margin:0 0 0 5px;font-size:35px}
.timer{text-align:center;color:#fff;margin:0 0 0 8px}
.writer{margin-bottom:5px;text-align:center;color:#fff;font-size:15px;font-family:'Mahdi-font'}
.writer::before{color:#fff;display:-webkit-inline-box;content:"\f007";font-family:fontawesome;margin:-1px 17px 0 5px;font-size:35px}
.info-imgg{width:100%;position:absolute;text-align:center;margin:0 auto;right:0;left:0;top:0%;height:380px;padding-top:50px;background:rgba(61,74,96,0.57)}
.title-cover{position:relative}
.author-pic{height:70px;width:70px;border-radius:10%;border:3px solid #4b3685;margin:-8px 8px 0 0;float:right}
.c-posts-info a{margin-left:10px;font-size:15px;font-family:'Mahdi-font';color:#fff}
.c-posts-info{margin-bottom:25px}
.breadcrumbs span{color:#fff;font-size:14px;font-family:'Mahdi-font'}
i.fa.fa-angle-left{color:#fff;margin:5px}
.title-cover h3.post-title.entry-title{display:block;color:#ffffff;font-size:23px;font-weight:100;padding:15px 5px;margin:0;margin-bottom:30px;font-family:'Mahdi-font';text-shadow:2px 1px 0 #3d4a60}
.fa-tag:before{color:#fff;font-size:35px}
.fa-file-text-o:before{content:"\f0f6";color:#1DA1F2}
@media screen and (max-width:1280px){/* CSS CODE HERE FOR DESKTOP ---*/}@media screen and (max-width:1024px){/* CSS CODE HERE FOR TABLETS ---*/.title-cover .post-thumb{height:320px}.post-thumb:before{width:100%;height:500px}.title-cover .post-thumb img{width:100%;height:500px}}
@media screen and (max-width:768px){/* CSS CODE HERE FOR SMALL TABLETS ---*/.title-cover .post-thumb{height:320px}.post-thumb:before{width:100%;height:500px}.title-cover .post-thumb img{width:100%;height:500px}}
@media screen and (max-width:640px){/* CSS CODE HERE FOR IPHONE ---*/.title-cover .post-thumb{height:320px}.post-thumb:before{width:100%;height:500px}.title-cover .post-thumb img{width:100%;height:500px}}
@media screen and (max-width:480px){/* CSS CODE HERE FOR SMARTPHONES ---*/.title-cover .post-thumb{height:320px}.post-thumb:before{width:100%;height:500px}.title-cover .post-thumb img{width:100%;height:500px}}
@media screen and (max-width:320px){/* CSS CODE HERE FOR SMALL MOBILES ---*/.title-cover .post-thumb{height:320px}.title-cover .post-thumb img{width:100%;height:500px}.post-thumb:before{width:100%;height:500px}}
div#abdou523{margin-top:40%;animation:bounceIn .8s 1}
@media screen and (max-width:1200px){#cover-post{width:100%}}
@media screen and (max-width:1150px){#cover-post{width:100%}}
@media screen and (max-width:1024px){}@media screen and (max-width:1000px){.post-title{line-height:40px}.post-title a{font-size:15px}#cover-post{width:100%}.c-posts-info{padding:10px}.title-cover .post-thumb{height:500px}}
@media screen and (max-width:900px){.post-body img{width:100%}.post-title{line-height:40px}.post-title a{font-size:15px}#cover-post{width:100%}}
@media screen and (max-width:800px){.post-title{line-height:40px}.post-title a{font-size:12px}#cover-post{width:100%}}
@media screen and (max-width:700px){.posts-thumb{width:100%;float:none;margin-bottom:10px}.posts-thumb img{width:100%}#cover-post{width:100%}}

قم بالحث عن الوسم ثم قم بوضع الكود التالى تحته

<b:if cond='data:blog.pageType == "static_page"'><div id='cover-post'>             <b:if cond='data:blog.pageType == "static_page"'>                  <div class='title-cover'>                     <a expr:href='data:post.url'>                      <div class='post-thumb'> <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>                        </div></a>                     <div class='info-imgg'>                    <b:if cond='data:blog.pageType == "static_page"'>                        <b:if cond='data:post.title'>                          <h3 class='post-title entry-title' itemprop='name'>                            <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>                              <a expr:href='data:post.link ? data:post.link : data:post.url'>                                <data:post.title/>                              </a>                              <b:else/>                              <data:post.title/>                            </b:if>                          </h3></b:if>                      </b:if>                      <div class='c-posts-info'>                        <a class='writer' target='_blank'>                          الكاتب  :                          </a>                            <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='الكاتب'>                              <span itemprop='name'>                                <data:post.author/>                              </span>                            </a>                         <a class='timer' expr:href='data:post.link ? data:post.link : data:post.url'>                          التاريخ  :                            <data:post.date/>                        </a>                        <a class='commenterr' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>                          التعليقات  :                            <data:post.numComments/>                        </a>                      </div></div></div></b:if>              </div></b:if>     <b:if cond='data:blog.pageType in {"static_page","item"}'><div id='cover-post'>                <b:if cond='data:blog.pageType == "item"'>                  <div class='title-cover'>                     <a expr:href='data:post.url'>                      <div class='post-thumb'> <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>                        </div></a>                     <div class='info-imgg'>                      <b:if cond='data:blog.pageType == "item"'>                        <b:if cond='data:post.title'>                          <h3 class='post-title entry-title' itemprop='name'>                            <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>                              <a expr:href='data:post.link ? data:post.link : data:post.url'>                                <data:post.title/>                              </a>                              <b:else/>                              <data:post.title/>                            </b:if>                          </h3></b:if>                      </b:if>                      <div class='c-posts-info'>                        <a class='writer' target='_blank'>                          الكاتب  :                          </a>                            <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='الكاتب'>                              <span itemprop='name'>                                <data:post.author/>                              </span>                            </a>                         <a class='timer' expr:href='data:post.link ? data:post.link : data:post.url'>                          التاريخ  :                            <data:post.date/>                        </a>                        <a class='commenterr' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>                          التعليقات  :                            <data:post.numComments/>                        </a>                                                    <b:loop values='data:post.labels' var='label'>                          <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>                            <a expr:href='data:label.url + "?&max-results=6"' itemprop='url'>                              <span itemprop='title'>                                <i class='fa fa-tag'/>                                  التسمية  :                                  <data:label.name/>                              </span>                            </a>                          </span>                        </b:loop>                      </div></div></div></b:if>              </div></b:if>

الكلمات المفتاحية : اضافات بلوجر بلوجر

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2017/06/blog-post_3.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2017/06/blog-post_3.html">اضافة هيدر داخل المواضيع لمعلومات عن التدوينة كتبها: المدون التقني  - الخبير عامر بشير</a>

الموضوع من قسم:

تنويه : الصور والفيديوهات في هذا الموضوع على هذا الموقع مستمده أحيانا من مجموعة متنوعة من المصادر الإعلامية الأخرى. حقوق الطبع محفوظة بالكامل من قبل المصدر. إذا كان هناك مشكلة في هذا الصدد، يمكنك الاتصال بنا من هنا.

عن المدونة

مدونة الخبير عامر بشير للمعلوميات مختصة في مجال التكنلوجيا و التقنيات و كل ما يخص الهواتف الذكية و الحواسيب ، و هدفنا هو تصحيح االأفكار و الدروس الخاطئة في المحتوى العربي عن طريق دروس و حلقات في قناتنا على اليوتيوب ، و يسهر على إشراف و سير الموقع الشاب الجزائري ' عامر بشير' الذي يحيكم و يشجعكم على الزيارة الدائمة و الإشتراك في موقعنا لتتوصل بكل جديد منا .