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

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

اولا قبل البدء عليك ان تقوم بربط مدونتك بقوقل بلس ثم تذهب الى التخطيط>>رسائل المدونة الالكترونية>> تحرير >> ثم تضع اشارة صح على خيار إظهار الملف الشخصي للمؤلف أسفل مشاركة كما في الصورة ادناه

الان سنقوم بتركيب صندوق الكاتب بشكله الجديد لمدونتك..فقط اتبع الخطوات
1-خذ نسخة احتياطية لقالبك لتجنب حدوث الاخطاء
2-اذهب الى قالب مدونتك>>قم بتحرير القالب>>ابحث(CTRL+F) عن الوسم التالي
     <div class='post-footer'> ان لم تجده ابحث عن الوسم التالي
     <div class='post-footer-line post-footer-line-'/>  ثم قم بلصق كود الHTML التالي تحته مباشرة

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <br/>
    <!--sweup.com --><div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below'><ul class='ts-fab-list'><li class='ts-fab-bio-link'><a href='#ts-fab-bio-below'>نبذة عني</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below'>تويتر</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below'>فيس بوك</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below'>قوقل+</a></li><li class='ts-fab-latest-posts-link'><a href='#ts-fab-latest-posts-below'>اخر التدوينات</a></li></ul>
<div class='box effect3'>
<div class='ts-fab-tabs'>
    <div class='ts-fab-tab' id='ts-fab-bio-below'>
    <div class='ts-fab-avatar'><img class='avatar avatar-70 photo' expr:src='data:post.authorPhoto.url' height='70px' itemprop='image' width='70px'/></div>
    <div class='ts-fab-text'>
    <div class='ts-fab-header'><h4>كتبت بواسطة <a expr:href='data:post.authorProfileUrl' rel='author' title='Posts by admin'><data:post.author/></a></h4><div class='ts-fab-description'><span>كاتب</span> في <a expr:href='data:blog.homepageUrl' rel='nofollow'><span><data:blog.title/></span></a></div></div><!-- /.ts-fab-header --><div class='ts-fab-content'><p class='description' itemprop='description'><data:post.authorAboutMe/>
</p></div>
    </div>
    </div>
    <div class='ts-fab-tab' id='ts-fab-twitter-below'>
    <div class='ts-fab-avatar'><img class='avatar avatar-70 photo' expr:src='data:post.authorPhoto.url' height='70px' itemprop='image' width='70px'/></div>
    <div class='ts-fab-text'>
    <div class='ts-fab-header'>
    <h4><a href='http://twitter.com/abdallhadagga'>@abdallhadagga</a></h4></div><!-- /.ts-fab-header --><div class='ts-fab-content'><!-- Couldn't fetch latest tweet --></div><div class='ts-fab-follow'><a class='twitter-follow-button' data-lang='en_US' data-show-count='true' href='https://twitter.com/abdallhadagga'>Follow @abdallhadagga</a></div>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
    </div>
    </div><div class='ts-fab-tab' id='ts-fab-facebook-below'>
    <div class='ts-fab-avatar'><img class='avatar avatar-70 photo' expr:src='data:post.authorPhoto.url' height='70px' itemprop='image' width='70px'/></div>
    <div class='ts-fab-text'>
    <div id='fb-root'/>
    <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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
    <div class='fb-like' data-href='http://www.facebook.com/SoftwareEngineering.up' data-layout='standard' data-send='false' data-show-faces='false'/>
  <h4><a href='http://facebook.com/abddallhadagga'>FB/abddallhadagga</a></h4>
<div class='fb-like'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/follow?href=https%3A%2F%2Fwww.facebook.com%2Fabdallhadagga&amp;layout=standard&amp;show_faces=true&amp;colorscheme=light&amp;width=450&amp;height=80' style='border:none; overflow:hidden; width:450px; height:20px;'/>
      </div>
    </div>
    </div>
    <div class='ts-fab-tab' id='ts-fab-googleplus-below'>
    <div class='ts-fab-avatar'><img class='avatar avatar-70 photo' expr:src='data:post.authorPhoto.url' height='70px' itemprop='image' width='70px'/></div>
    <div class='ts-fab-text'>
    <div class='ts-fab-header'>
    <h4><a expr:href='data:post.authorProfileUrl' rel='author' title='Posts by admin'><data:post.author/></a></h4>
    </div><!-- /.ts-fab-header -->
    <g:plus data-layout='landscape' data-showcoverphoto='false' data-width='320' expr:href='data:post.authorProfileUrl' rel='author'/>
    </div>
    </div>
    <div class='ts-fab-tab' id='ts-fab-latest-posts-below'>
    <div class='ts-fab-avatar'><img class='avatar avatar-70 photo' expr:src='data:post.authorPhoto.url' height='70px' itemprop='image' width='70px'/></div>
    <div class='ts-fab-text'>
    <div class='ts-fab-header'>
    <h4>اخر التدوينات بواسطة <data:post.author/> <span class='latest-see-all'>(<a href='http://www.sweup.com/'>شاهد كل التدوينات</a>)</span></h4>
    </div>
    <script src='https://sweupbox.googlecode.com/svn/recent-posts-with-snippets'>
    </script>
    <script>
    var numposts = 3;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;
    </script>
    <script src='http://www.sweup.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'>
    </script></div>
    </div>
    </div></div>
    </div>
    </b:if>
 

قم بتغيير الروابط الخاصة بي بالروابط الخاصة بك
رابط تويتر <h4><a href='http://twitter.com/abdallhadagga'>@abdallhadagga</a></h4>
رابط الفيس بوك<h4><a href='http://facebook.com/abddallhadagga'>FB/abddallhadagga</a></h4>
رابط مدونتك لجل اخر التدوينات   <script src='http://www.sweup.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'>
    </script>
3- نقوم بالبحث(CTRL+F) عن الوسم التالي  </body> ونلصق اكواد الجكويري التالية فوقه مباشرة

  <div dir='ltr' style='text-align: right;' trbidi='on'/>
<script>jQuery(document).ready(function(a){a(&quot;.ts-fab-tabs &gt; div&quot;).hide();a(&quot;.ts-fab-tabs &gt; div:first-child&quot;).show();a(&quot;.ts-fab-list li:first-child&quot;).addClass(&quot;active&quot;);a(&quot;.ts-fab-list li a&quot;).click(function(){a(this).closest(&quot;.ts-fab-wrapper&quot;).find(&quot;li&quot;).removeClass(&quot;active&quot;);a(this).parent().addClass(&quot;active&quot;);var b=a(this).attr(&quot;href&quot;);if(b.indexOf(&quot;#&quot;)!=-1){currentTabExp=b.split(&quot;#&quot;);b=&quot;#&quot;+currentTabExp[1]}a(this).closest(&quot;.ts-fab-wrapper&quot;).find(&quot;.ts-fab-tabs &gt; div&quot;).hide();a(b).show();return false})});</script> 

4-نقوم بالبحث عن الوسم التالي </head>  ونلصق اكواد الcss التالية فوقه مباشرة

 <style>.ts-fab-wrapper{margin:0 0 2em;clear:both}.ts-fab-wrapper a{text-decoration:none!important}.ts-fab-wrapper img{border:none!important}.ts-fab-list{overflow:hidden;padding:0 0 0px 0px!important;margin:0!important}.ts-fab-list li{display:block;float:right;list-style:none;margin:0 5px 0 0!important}.ts-fab-list li a{display:block;line-height:16px;height:16px;padding:8px 12px;background-color:#e9e9e9;border:1px solid #e9e9e9;border-bottom:none!important;text-decoration:none;font-size:13px;color:#333;font-weight:bold;outline:0;text-shadow:none!important;border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0}.ts-fab-list li a:hover{color:#333}.ts-fab-list li.active a{background-color:#333;color:#fff;border-color:#333}.ts-fab-list li a{background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKz3-5QDiJueWv0sQweO22MWOqh8ntOMiWOasTYYXcTMdsAa0BwAHs8IzmuW0HgtQYhKkFHiwRHAfIuh_yIOw73hLlIpVT5kU50ydMXJ8Hnvy9c5o5vSuasBBlNhzesN7P3Gx-Lhh3NCc/s1600/fab_tab_icons.png&#39;)}.ts-fab-list li.ts-fab-bio-link a{background-position:8px 8px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-bio-link.active a{background-position:-280px 8px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-twitter-link a{background-position:8px -42px;background-repeat:no-repeat;padding-left:35px}.ts-fab-list li.ts-fab-twitter-link.active a{background-position:-270px -42px;background-repeat:no-repeat;padding-left:35px}.ts-fab-list li.ts-fab-facebook-link a{background-position:8px -92px;background-repeat:no-repeat;padding-left:23px}.ts-fab-list li.ts-fab-facebook-link.active a{background-position:-284px -92px;background-repeat:no-repeat;padding-left:23px}.ts-fab-list li.ts-fab-googleplus-link a{background-position:8px -142px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-googleplus-link.active a{background-position:-276px -142px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-linkedin-link a{background-position:8px -242px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-linkedin-link.active a{background-position:-276px -242px;background-repeat:no-repeat;padding-left:30px}.ts-fab-list li.ts-fab-latest-posts-link a{background-position:8px -192px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-latest-posts-link.active a{background-position:-280px -192px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-custom-link a,.ts-fab-list li.ts-fab-additional-link a{background-image:none!important}.ts-fab-widget .ts-fab-list li a,.ts-fab-icons-only .ts-fab-list li a{text-indent:-9999em;padding:8px 12px!important}.ts-fab-widget .ts-fab-list li.ts-fab-bio-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-bio-link a{width:4px}.ts-fab-widget .ts-fab-list li.ts-fab-twitter-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-twitter-link a{width:12px}.ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-googleplus-link a{width:8px}.ts-fab-widget .ts-fab-list li.ts-fab-linkedin-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-linkedin-link a{width:8px}.ts-fab-widget .ts-fab-list li.ts-fab-facebook-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-facebook-link a{width:0}.ts-fab-widget .ts-fab-list li.ts-fab-latest-posts-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-latest-posts-link a{width:4px}.ts-fab-widget .ts-fab-list li.ts-fab-custom-link a,.ts-fab-icons-only .ts-fab-list li.ts-fab-custom-link a{text-indent:0!important}.ts-fab-tab{border-radius: 15px 0px 15px 30px;display:none;border:2px solid #333;padding:12px;background:#fff;min-height:80px}.ts-fab-tab:after{content:&#39;&#39;;display:table;clear:both}.ts-fab-tab:first-child{display:block}.ts-fab-widget .ts-fab-tab{padding:8px}.ts-fab-avatar{display:block;float:right;width:64px;height:64px;margin-right: 15px}.ts-fab-no-float .ts-fab-avatar{float:none;margin:0 0 12px}.ts-fab-avatar img{display:block;box-shadow: 0px 0px 2px 0px #000;border: 3px solid rgba(231, 217, 217, 1);border-radius: 50%;}.ts-fab-text{margin-right:104px;line-height:1.5}.ts-fab-no-float .ts-fab-text{margin-right:0}.ts-fab-header{margin-bottom:10px}.ts-fab-text h4{clear:none;font-size:18px;line-height:1!important;font-weight:bold;margin:0 0 .2em!important;line-height:1;padding:0}.ts-fab-description{font-size:12px}.ts-fab-follow{margin-top:10px}.ts-fab-latest{margin:0!important;padding:0!important}.ts-fab-latest li{list-style:none!important;line-height:1.1;margin:0 0 .6em!important}.ts-fab-latest li span,.ts-fab-twitter-time{font-size:12px}.latest-see-all{font-weight:normal}.ts-fab-wrapper iframe{margin-bottom:0!important}body.ltr .ts-fab-avatar{float:left}body.ltr .ts-fab-text{margin-right:0;margin-left:76px}body.ltr .ts-fab-list{padding:0 5px 0 0!important}body.ltr .ts-fab-list li{float:left;margin:0 0 0 5px!important}.fb_iframe_widget&gt;span,.fb_iframe_widget&gt;span iframe{min-height:64px!important}
    </style>