6/20/2016

settings_overscan print announcement
اضافة اداة تعريف الكاتب ومواقع التواصل شكل احترافي

اداة تعريف الكاتب ومواقع التواصل شكل احترافي
طريقة التركيب
اذهب للقالب تحرير HTML
 وابحث عن </head> ثم اضف الكود التالي فوقة مباشر

<style type='text/css'>.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}.authorbox{width:300px;background:url(http://store1.up-00.com/2016-06/1466371674811.jpg) top center no-repeat #fff;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;}h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}.authorbox img{margin:55px auto 0;border-radius:100%;display:block}a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;}a.authorname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}.sosmed-author li,.sosmed-author ul{list-style:none}.sosmed-author ul{margin:0!important;padding:0!important}.sosmed-author{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}.sosmed-author li{display:inline-block;margin-right:10px}.sosmed-author li:last-child{margin-right:0}.sosmed-author li a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s ease-out}.sosmed-author li a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important}a.button-author{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none}a.button-author:hover{background:#357ae8;border:1px solid #2f5bb7}</style>

ثم ابحث عن </body> واضف الكود التالي فوقة مباشرة 

<script>//<![CDATA[var imgDefer = document.getElementsByTagName("img");for (var i = 0; i < imgDefer.length; i++) {    if (imgDefer[i].getAttribute("data-src")) {        imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src"));    }}//]]></script>

ثم اذهب للتخطيط -اضافة اداة - HTML/JavaScript
وضع الكود التالي مع تغيير مايلزم

<div class="authorbox">  <img alt="author" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://store2.up-00.com/2016-06/1466372378441.jpg" width="120" height="120" />  <a class="authorname" href="#" rel="author" target="_blank" title="حلولي">حلولي</a>  <a class="authorname">مدونة تقنية انشر بها مايفيد الزائر والمدون</a>  <div class="sosmed-author">    <ul>          <li><a href="https://www.facebook.com/hlo1y" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>          <li><a href="https://twitter.com/hlo1y" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>          <li><a href="https://plus.google.com/+v518v" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>      <li><a href="//www.youtube.com/c/v518v" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>      <li><a href="" target="_blank" title="LinkedIn" rel="nofollow"></a></li>      <li><a href="https://www.instagram.com/hlo1y" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>    </ul>    <div class="clear"></div>
<a class="button-author" href="http://www.blogger.com/follow-blog.g?blogID=4497666235919215661" target="_blank" title="">انضم لهذه المدونة</a>
<a class="button-author" href="#" rel="nofollow" target="_blank" title="">للمراسلة اضغط هنا <i aria-hidden="true" class="fa fa-paper-plane"></i></a>
  </div></div>


انتهى 

تابعونا للمزيد من الاضافات والدروس

add_comment إرسال تعليق

  1. السلام عليكم اخي وايقونات موقع تواصل اجتماعي ماتظهر

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته أهلاً بك أخي الكريم
      الإضافة تعمل أخي الكريم أضف الأكواد كاملة وبالطريقة الصحيحة التي شرحتها بالأعلى

      حذف