صندوق تعريف الكاتب بشكل جديد وحصري

السلام عليكم ورحمة

الله وبركاته

--

نعود لكم بتدوينة جديدة نقدم لكم فيها صندوق تعريف الكاتب مدمج بصندوق الاعحاب مع اضافات اخرو اكتشفوها بانفسكم

• معاينة

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

1. توجه الى التخطيط ثم اضف اداة html/javascript
2. ضع الكود التالي داخل الاداة

<style>
.authorboxiss {
    background: url(https://wallpaperscraft.com/image/macbook_pro_apple_laptop_headphones_table_98893_2048x2048.jpg);
    background-size: 100%;
}
.authorbox {
   padding: 22px 0 0;
    margin: 0 auto;
    background-size: 100%;
    background-image: linear-gradient( 135deg, #69ff97a6 10%, #00e4ffa6 100%);
}
.authorbox img {
    margin: auto;
    border-radius: 100%;
    display: block;
    box-shadow: 0 5px 5px rgba(0,0,0,0.1);
    border: 7px solid #fff;
    transition: all .6s;
}
.authorbox a.authorname {
background: rgba(0, 0, 0, 0.39);
    font-family: Electrolize,ge_dinar_tworegular;    display: table;
    margin: 20px auto;
    padding: 8px 16px;
    line-height: normal;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    border-radius: 3px;
    letter-spacing: 1px;
}
.sosmed-author {
    margin: auto;
    padding: 15px;
    background: #eef3f6;
}
.sosmed-author, a.authorname, h2.author-title, a.authorname-url {
    display: block;
    text-align: center;
}
.sosmed-author ul {
    margin: 0;
    padding: 0 0 10px 0;
    width: 100%;
}
.sosmed-author li, .sosmed-author ul {
    list-style: none;
}
.sosmed-author li {
    display: inline-block;
    width: 24%;
}
.sosmed-author li a {
    color: #bdc3c7!important;
    transition: all .4s ease-out;
}
.bawahsos {
    width: 100%;
    display: block;
}
.bawahsos a.butt-author, .bawahsos a.butt-contact {
    background: #f39c12;
    color: #fff;
    display: inline-block;
    width: 47.2%;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    transition: all .3s;
font-family: Electrolize,ge_dinar_tworegular;
}
.bawahsos a.butt-author i, .bawahsos a.butt-contact i {
    margin: 0 5px 0 0;
}
.bawahsos a.butt-contact {
    background: #3498db !important;
    color: #fff;
    margin: 0 0 0 8px;
}
.bawahsos a.butt-author, .bawahsos a.butt-contact {
    background: #f39c12;
    color: #fff;
    display: inline-block;
    width: 40%;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    transition: all .3s;
}
</style>
<div class="authorboxiss">
<div class="authorbox">
  <img alt="author" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEj9WvK-efV54dzv_rP2bOe-wVKGDT5m-9afKcxf3yen6MOscP9WqjmZs4cRxOu3v_aX49J0Vw6yL4Al-6ZZLYLK56AteKfEB8St7M4t_pundbaHuSV194-9hcyXPAq_=" width="120" height="120" />
  <a class="authorname" href="https://plus.google.com/+sebissam" rel="author" target="_blank" title="Get in touch">عصام</a>
 <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/ar_AR/sdk.js#xfbml=1&version=v2.11&appId=1648488072087254';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/issamweeb/" data-height="100" data-small-header="false" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true"><blockquote cite="https://www.facebook.com/issamweeb/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/issamweeb/">‏‎Issam Weeb‎‏</a></blockquote></div>
  <div class="sosmed-author">
    <ul>
          <li><a href="https://www.facebook.com/issamweeb/" 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/ortilexissam" 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/+ortilexissam" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="https://www.youtube.com/channel/ortilexissam" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
</ul>
<div class="clear"></div>
<div class="bawahsos">
<a class="butt-author" href="https://www.blogger.com/follow-blog.g?blogID=6543750823958640359" target="_blank" title="انضم الينا"><i aria-hidden="true" class="fa fa-user-circle"></i>انضم الينا</a>
<a class="butt-contact" href="https://issamweeb.blogspot.com/p/contact-form.html" rel="nofollow" target="_blank" title="راسلنا"><i aria-hidden="true" class="fa fa-paper-plane"></i>راسلنا</a>
</div>
</div>
</div></div>
  

1. ان واجهت اي مشكلة بامكانك طرحها في تعليق