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

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

طريقة التركيب

اذهب للقالب تحرير 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>

انتهى 

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