تـعـريف بـ الكـاتـب لـمدونـات بـلـوجـر بـشـكـل أحـتـرافـي 2014

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

انصح بها بشدة

طريقة تركيب

اذهب الى لوحة تحكم بلوجر / القالب / تحرير القالب
أبحث عن

]]></b:skin>


وضع الكود التالي قبلها مباشرآ

@font-face { font-family: 'JF-Flat-regular'; src: url('https://alinaeliq-cssfile.googlecode...lar.eot'); src: url('https://alinaeliq-cssfile.googlecode...ular.eot?') format('embedded-opentype'), url('https://alinaeliq-cssfile.googlecode...ular.woff') format('woff'), url('https://alinaeliq-cssfile.googlecode...gular.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://2.bp.blogspot.com/-OHcYNHmyqi...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 {
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);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
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://1.bp.blogspot.com/-TAJGG5Ms9D...M/s1600/fb.png) no-repeat 50% center;
background-color: #003366;
}
#social_postauthor .tw {
background: url(http://2.bp.blogspot.com/-Upn2CKa8jz...Y/s1600/tw.png) no-repeat 50% center;
background-color: #0ba6f7;
}
#social_postauthor .gl {
background: url(http://2.bp.blogspot.com/-iZ2UMC49GF...d8/s1600/g.png) no-repeat 50% center;
background-color: #dc311b;
}
.subspabox {
background: #f8f8f8 url(http://4.bp.blogspot.com/-iNt1NmiazT...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;
}

ثم أبحث عن
<div class='post-footer'>

أو

<div class='post-footer-line post-footer-line-1'>

وضع الكود التالي بعدها مباشرآ

<div class='postauthor'>
<img height='80' rel='author' src='https://lh5.googleusercontent.com/--fw4zy0VAcg/AAAAAAAAAAI/AAAAAAAABXU/mBEnA8G6JEI/s120-c/photo.jpg' width='80'/>
<h4>
الكاتب :
<a href='http://t3own.blogspot.com/' 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;);r eturn 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>



انتهينا واتمنى ان الكل استفاد