اضافة تعريف الكاتب بشكلها الجديد

أهلا وسهلا أعزائي المتابعين والزوار ، أظن أن إضافات بلوجر لا تنتهي كثيرة هي :) ، ومع اضافة في منتهى الأهمية أيضا تبقى إختيارية لوضعها ولكن أغلب المدونين حتى  أصحاب المواقع الكبيرة من الأجانب إلى العرب ، يظعون اضافة تعريف الكاتب أو نبذة عنه .. اسفل الموضوع .. تتميز إضافتنا بتنسيق جميل متكونة من صورة للكاتب و النشرة البريدية زائد أزرار المواقع الإجتماعية بتأثير جميل ، ويمكنك المعاينة بالنزول قليلا في هاته الصفحة وشاهد الإضافة
* عندما ستضيف الأكواد ستحصل على خط مثل الذي تشاهده الأن مرفق مع الأكواد

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

1 . نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  <b:skin/><[[

3. ضع الكود التالي قبله [ فوقه ]

@font-face {
font-family: 'GESSTwoMediumRegular';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype'); 
}
.postauthor {
background: #f8f8f8;
border: 4px solid #4E9E6B;
padding: 10px;
overflow: hidden;
margin: 4px 0px -7px 0px;
}
.postauthor img {
float: right;
background: #fff;
margin: 0 0 0 8px;
padding: 4px;
border: 1px solid #E0E0E0;
border-radius: 3px;
}
.postauthor h4 {
font: normal 14px 'GESSTwoMediumRegular', tahoma;
color: #3D5272;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjofeR0O1HxwKGMHbYGGLglrLzYue52FtvB-PN3jbpZQyL7Xj-JqhFg_vnuEGbuZUx2teV8QZJvkkXSn6XSplxgRUPymMpPkmDSbScoRrW6quG5k42tjs6gsDfqgTmEloR7iEQnqe7tPDiy/s1600/user.png) no-repeat 84% 50%;
padding: 0 125px 0;
}
.postauthor a {
color: #5DA86C;
font-size: 14px;
padding-right: 2px;
}
.postauthor p {
font: normal 11px 'GESSTwoMediumRegular';
color: #34495e;
line-height: 2em;
text-shadow: 0 1px 0 #fff;
}
/*----------social postauthor------------*/
#social_postauthor {
margin: 16px 0 0;
overflow: hidden;
background: #fff;
padding: 4px;
border-radius: 3px;
border: 1px solid #ddd;
}
#social_postauthor ul{margin:0;padding:0;overflow:hidden;}
#social_postauthor ul li {
float: right;
padding: 0;
margin: 3px 2px;
border-radius: 2px;
transition: 0.5s;
}
#social_postauthor ul li a{
display: inline-block;
float: right;
font-size: 0;
height: 30px;
line-height: 0;
text-indent: -9999em;
width: 30px;
transition:0.5s;
}
#social_postauthor ul li:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg); /* Safari and Chrome */
-moz-transform:rotate(360deg); /* Safari and Chrome */
-o-transform:rotate(360deg); /* Safari and Chrome */
transition:0.5s;
}
#social_postauthor ul li span{
font: normal 13px 'GESSTwoMediumRegular';
text-shadow: 0 1px 0 #fff;
padding: 4px 4px 4px 4px;
}
#social_postauthor .txt {
padding: 4px 0;
}
#social_postauthor .fb {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEnkhsNgsFsAsjBX1sZhgiUksGy3pbr8xqZFZeZDMD_S8Dyc7gM2UWFdalX4UrpuVUspu8sDQR8UhnP76MjI8LFNiPgrF618-hjR3mGvZtyFvur1FjTiZdFoG9jTy6L2iysO_3NZGTS4/s1600/fb.png) no-repeat 50% center;
background-color: #003366;
}
#social_postauthor .tw {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKwRR-p89TTK6wR57EdghQ0By6sjExSYwCnJyf_SZPegcfLWmXy-OSpfLhHp_EIoQu5XDOo2hdupccNBRMHlN_Szn71lVj5Z64GNJFgGYu1NKcgJkAZRslRZp5SVbvhg6aHSdq198vrM/s1600/tw.png) no-repeat 50% center;
background-color: #0ba6f7;
}
#social_postauthor .gl {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkkkkvPyHdUbgZtiu5n2iHTZjdoCYd-1b9hL3kY9tG-hVFR6zmMq0FDyx0TvLXi4_3fcFVrQP4lsuqV8ArFQW1ncRxQ8lUv30_4mwgFzFom6DJG1rPajofsQnaenpC91kqN-fXRPiNQnk/s1600/g.png) no-repeat 50% center;
background-color: #dc311b;
}

.subspabox {
background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8jRiZvy0CNkuLbgZSZ_z5dIboIonXd1kqgGuhpnKWGgfs6YEWHtTZDr-j52bikyvbZNw2uzCglBbAa6FEpaaMZrE3bUSSJAHoFTOQPFQvxBnOJ2e31d299ldFW1Zyt-C-Oi3y7uDF850/s1600/contact-gr.png) no-repeat 98% 50%;
font-family: 'GESSTwoMediumRegular';
color: #293949;
margin: 4px;
width: 62%;
text-align: right;
padding: 6px 35px 6px 0;
border: 1px solid #ddd;
border-radius: 3px;
float: left;
}

4. ابحث عن : <div class='post-footer'> 

* قد تجد الكود متكرر 4 مرات أو أقل الكود الأخير هو المقصود

5. ضع الكود التالي أسفله

<div class='postauthor'>
<img height='80' rel='author' src='http://im77.gulfup.com/YkII2b.jpg' width='80'/>
<h4>
الكاتب :
  <a href='http://www.ar1web.com' target='_blank'>
<data:post.author/>
</a>
</h4>
<p>
حسام مدون مغربي الجنسية &#1644; مصمم ومبرمج قوالب بلوجر حر ..  مهوس ألعاب ذو عدة مدونات &#1644; لكن مع كثرة العمل قررت الإقتصار على مدونة واحدة وهي مدونة عرب ويب التي تأسست بتاريخ 2014/04/01 تم تغيير المحتوى لما يحبه المدون ولكي أساعد كل شخص ولو بشيئ بسيط  أحب الجميع ولا أكره أحد .
</p>
<div class='rw-js-container'/>

<div id='social_postauthor'>
<ul>
<li class='txt'>
<span>
تواصل معي :
</span>
</li>
<li class='fb'>
<a href='https://www.facebook.com/ihussam.hm.1' rel='nofollow' target='_blank'>
fb
</a>
</li>
<li class='tw'>
<a href='#' rel='nofollow' target='_blank'>
tw
</a>
</li>
<li class='gl'>
<a href='https://plus.google.com/u/0/+iHussam' rel='nofollow' target='_blank'>
gl
</a>
</li>

<form action='http://feeds.feedburner.com/ar1web/TFDh' id='subspa' method='post' onsubmit='window.open(&apos;http://feeds.feedburner.com/ar1web/TFDh;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input class='subspabox' onblur='if (this.value == &quot;&quot;) {this.value = &quot;توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...&quot;;}' onfocus='if (this.value == &quot;توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...&quot;) {this.value = &quot;&quot;;}' type='text' value='توصل بجديد المدونة عبر الإشتراك ببريدك الإلكتروني...'/>
</form>
</ul>
</div>
</div>

6.غير كل ما لونه بالأصفر بما يناسب

7. لتغيير الصورة فهي محددة باللون الأخضر

إضافة زر الصعود للأعلى

دائما ما نبحث عن إضافات جديدة لموقعنا حتى إن تواجدت فلا بد أنك تفكر بتغييرها لتحديث أجمل وأفضل ، وهذا ما سنتطرق إليه في هذه التدوينة ، في إضافة زر صعود للأعلى وهو زر لا غنى عنه يسهل على المتصفح العودة لأعلى الصفحة بسهولة وسرعة تامة بشكل جميل 

* ملاحظة إذا كنت تتوفر على زر الصعود فلابد من حذفه أولا

معاينة

شرح طريقة تركيب الإضافة

1. توجه لقالب >> تحرير 

2. ابحث بإستعمال Ctrl+F عن <head/>

3. ضع الكود التالي فوقه

* الكود هو فقط لإظهار الأيقونة إذا كنت تتوفر عليه فلا داعي لإضافته

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

4. ابحث عن ]]></b:skin 

5.  ضع الكود التالي فوقه 

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

6. ابحث عن <body/>

7.  ضع الكود التالي فوقه

<div class="smoothscroll-top">

<span class="scroll-top-inner">

<i class="fa fa-2x fa-arrow-circle-up"></i>

</span>

</div>

<script type='text/javascript'>

//<![CDATA[

$(function(){ 

$(document).on( 'scroll', function(){

if ($(window).scrollTop() > 100) {

$('.smoothscroll-top').addClass('show');

} else {

$('.smoothscroll-top').removeClass('show');

}

}); 

$('.smoothscroll-top').on('click', scrollToTop);

}); 

function scrollToTop() {

verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;

element = $('body');

offset = element.offset();

offsetTop = offset.top;

$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');

}

//]]>

</script>

8. بإمكانك حفظ العمل ومعاينة ما أضفته :) .. نلتقي في التدوينة القادمة بإذن الله تعالى