الأحد، 11 أغسطس 2013

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

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

Cool Author Box Widget for Blogger


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

  • أولا تذهب الى مدونتك --> القالب --> تحرير القالب
  • اضغط 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/>أكثر من واحد فأذا وضعت الاكود تحته ولم يشتغل فجرب الاكواد على الاخر وهكذا حتى يشتغل .

MOHAMED TAHSEEN

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

0 التعليقات :

إرسال تعليق

 
: POWERED BY Powered By Blogger Built with jQuery Built with CSS3
Re-Designed by Mohamed Tahseen