اضافة تعريف الكاتب بشكل احترافي لمدونات بلوجر ..

السلام عليكم ورحمة الله وبركاته

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

طريقة تركيب اضافة تعريف الكاتب اسفل الموضوع في مدونتك

1- من لوحة التحكم >> قالب >> تحرير HTML

2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير

3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

4- قم بالبحث عن الكود ]]></b:skin> واضف فوقه مباشراً الكود التالي

 @font-face { font-family: 'JF-Flat-regular'; src: url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.eot'); src: url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.eot?') format('embedded-opentype'), url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.woff') format('woff'), url('https://alinaeliq-cssfile.googlecode.com/svn/trunk/jfflatfont/JF-Flat-regular.ttf') format('truetype');} 
.postauthor {
background: #f8f8f8;
border: 1px solid #3598DB;
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 JF-Flat-regular;
color: #3D5272;
background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0biMow-JeXKhhYdO55W_L9oVnL7bsRPPeY_AKe2v5fhM-opurwpecMueIQGaAStmZXfq4WF1nzanXUiV9GrOk4Gd_0JOAeiW5jq3vewW-C18GtWhURxjHZDaqxqngnBhNdNXGZdYHDkl8/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 13px JF-Flat-regular;
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 JF-Flat-regular;
text-shadow: 0 1px 0 #fff;
padding: 4px 4px 4px 4px;
}
#social_postauthor .txt {
padding: 4px 0;
}
#social_postauthor .fb {
background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwnb8nCc22IT711f8KMO9_eF7VZS3gY6UdDColp666uDicLzCRSz-XckKBDgGMo9sBFHGj0T7ykQhUsm1pvIwG0bDNvOJzkoebL9_QZVfal8zDLl7wur0cWtQxHbs6634-Foz1If9nKuQ/s1600/fb.png) no-repeat 50% center;
background-color: #003366;
}
#social_postauthor .tw {
background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuv_Z_FySu9lLlnYecqBQVu5SlPErUuF9Hqz6I7TwqRPnnLSZGQrWFWbbhl2N8RWwlqOcX8F4RgVLd9Ph3NpEjX9CXjIji8GyVX7tZAgqWRT6A1VMsbuz_mtcuK6Ok90WRYqhFv5COsVQ/s1600/tw.png) no-repeat 50% center;
background-color: #0ba6f7;
}
#social_postauthor .gl {
background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4F43ifpnCn9tKwDYwJfFLZrqkTE_Yu1KQY43YUCh_mionqG7JC1z9cEsw_tuMG_ju_MQVz5J_ZeeOG4r8QefQ5HxYN7rbH06nB8JCdbAeJM5NPANEK8siYzTpZFAgTO2ambw8R2n4CUk/s1600/g.png) no-repeat 50% center;
background-color: #dc311b;
}

.subspabox {
background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf91TE4kl7LnmZKPkBj1XTvyE8VwDgFmVk5xIRgzwU1nKf9onVvRI5STr0rcXBfeUbDc8zr8yG3DjJaCQZDNmI-szsEVUIRxxFiy_PlfY3Y7Km6TCeLToBgxWD-IjT32-lJj_NNUD0N28/s1600/contact-gr.png) no-repeat 98% 50%;
font-family: JF-Flat-regular;
color: #293949;
margin: 0;
width: 62%;
text-align: right;
padding: 4px 25px 6px 0;
border: 1px solid #ddd;
border-radius: 3px;
float: left;
}

5- ابحث عن : <div class='post-footer'> او <div class='post-footer-line post-footer-line-1'>
6- ضع الكود التالي اسفله مباشرة

 <div class='postauthor'>
<img height='80' rel='author' src='صورة للكاتب' width='80'/>
<h4>
الكاتب :
  <a href='#' target='_blank'>
<data:post.author/>
</a>
</h4>
<p>
نبذة قصيرة عن الكاتب
</p>
<div class='rw-js-container'/>

<div id='social_postauthor'>
<ul>
<li class='txt'>
<span>
تواصل معي :
</span>
</li>
<li class='fb'>
<a href='#' rel='nofollow' target='_blank'>
fb
</a>
</li>
<li class='tw'>
<a href='#' rel='nofollow' target='_blank'>
tw
</a>
</li>
<li class='gl'>
<a href='#' 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>

غير المعلومات الى المعلومات الخاصة بك
واضغط على حفظ ومبروك عليك الاضافة

في امان الله

Mohammed Harb

2 تعليقات

اضافات بلوجر, بلوجر, شرح

الأحد، 24 أغسطس 2014

شاركه

أعجبني

G+

غرد

غرد تغريدة

إقرأ أيضًا