اضافه صندوق تعريف الكاتب تحت كل موضوع

السلام عليكم ورحمه الله وبركاته
اليوم اريد ان اشرككم اداه رائعه جدااا وجذابه وهى وضع نبذه عنك تحت كل موضوع وهل تتخيل انك عندما تضع نبذه عنك تحت كل موضوع ده بيأرشف الموضوع اكثر بأسمك اذا كان موضوع حصرى وأيضا يثبت فى عقل القراء الذين يقرأون مقالاتك ويبحثون عنك اذا كانت مقالاتك مفيده وجذايه وتشد انتباههم وهذه الاداه سهله جداا كل ما عليك هو وضع اكواد بسيطه جداا ولا توجد فيها تعقيد كل ما عليك هو اتباع الخطوات وستركبها بشكل صحيح وأتمنى ان تعجبكم :] .

نبدأ فى تركيب صندوق تعريف الكاتب

• أولا تذهب الى مدونتك --> القالب --> تحرير القالب
• اضغط CTRL + Fداخل المربع الذى يوجد به الاكواد.
• ابحث عن هذا الكود ]]></b:skin>
• ضع هذا الكود فوق ]]></b:skin> مباشره.

.about-author {
    width: 100%;
}
.authorbox {
    overflow: hidden;
    padding: 0;
    background: #333;
    color: #ccc;
}
.authorbox .authorinfo {
    color: #ccc;
}
.authorbox .authorsocial {
    float: left;
}
.authorbox .authorsocial li {
    list-style: none;
    margin: 0;
    position: relative;
}
.authorbox .authorsocial li a {
    width: 32px;
    display: block;
    background: url("http://softglad.at.ua/images/social-logo32.png");
    height: 32px;
    margin: 0;
}
.authorbox .authorinfo img {
    float: left;
    margin: 4px 10px 4px 5px;
    border-radius: 100%;
    width: 17%;
    background: #fff;
    padding: 5px;
}
.authorbox .authorinfo p {
    margin: 0;
    font-size: 18px;
    padding: 0 5px;
    line-height: 25px!important;
    font: 15px "Armata", Arial;
    text-align: left;
}
.authorinfo p a {
    text-decoration:none;
    color:#fff;
}
.authorbox h3 {
    margin: 0;
    display: inline-block;
    background: #333;
    color: #fff;
    font: bold 20px Arial;
    padding: 5px 10px;
}
h3.boxtitle {
    background: #333;
    color: #fff;
    margin: 0 auto;
    width: 25%;
    padding: 2px 10px;
    font: bold 16px "Armata", Arial
}
.authorbox .authorsocial li .fb {
    background-position: 0px 0px;
}
.authorbox .authorsocial li .twitter {
    background-position: 0px -32px;
}
.authorbox .authorsocial li .google {
    background-position: 0px -64px;
}
.authorbox .authorsocial li .in {
    background-position: 0px -96px;
}
.authorbox .authorsocial li .in:hover {
    background-position: -32px -96px;
}
.authorbox .authorsocial li .google:hover {
    background-position: -32px -64px;
}
.authorbox .authorsocial li .twitter:hover {
    background-position: -32px -32px;
}
.authorbox .authorsocial li .fb:hover {
    background-position: -32px 0px;
}
.authorbox:hover img {
    background: #1BC3F8;
}
.authorbox .authorinfo img, .authorbox .authorsocial li a {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
@font-face {
    font-family: 'Armata';
    font-style: normal;
    font-weight: 400;
    src: local('Armata'), local('Armata-Regular'),
url(http://themes.googleusercontent.com/static/fonts/armata/v3/FG9R9aX-RIX_AvJI8USOWg.woff) format('woff');
} 

• ثم ابحث عن هذا الكود <data:post.body/>
• ثم ضع هذا الكود بعده او تحته مباشرة.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="about-author">
<h3 class="boxtitle">عن الكاتب</h3>
<div class="authorbox">
<div class="authorsocial">
  <li><a class="fb" href="http://facebook.com/waseeela" rel="nofollow"></a></li>
  <li><a class="twitter" href="http://twitter.com/mohamedtahsen" rel="nofollow"></a></li>
  <li><a class="google" href="#" rel="author"></a></li>
  <li><a class="in" href="#" rel="nofollow"></a></li>
</div>
  <div class="authorinfo">
<img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-frc1/q77/s720x720/400885_656839050996110_1742575482_n.jpg" />
<p>محمد تحسين طالب فى كليه تجاره. أهتم بعالم المعرفه والتكنولوجيا الحديثه والمتطوره وأمل ان اكون ذات يوما من المبرمجين والمسوقين الالكترونين فى مجال الانترنت ونحاول جاهدين فى مدونه وسيله ان نقدم كل ما يخص المعرفه والتكنولوجيا فتابعونا على المواقع الاجتماعيه ليصلكم كل تحديثاتنا
 <a href="#">اقرأ المزيد</a></p>
</div>
</div>
</div>
</b:if>

• احفظ قالبك وكده تكون انتهيت :] .

ملحوظه : يوجد مثل هذا الكود <data:post.body/>أكثر من واحد فأذا وضعت الاكود تحته ولم يشتغل فجرب الاكواد على الاخر وهكذا حتى يشتغل .

شاركه على فيسبوك شاركه على تويتر شاركه على جوجل بلس

عن Unknown