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

<div><div align="center">


http://www.traidnt.net/vb/images/img...014/08/579.png



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

انصح بها بشدة

طريقة تركيب

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

]]>


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

@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------------*/
#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://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'>




أو



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


https://lh5.googleusercontent.com/--...20-c/photo.jpg

الكاتب :







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

• 
  
  تواصل معي :
  
• 
  
  fb
  
• 
  
  tw
  
• 
  
  gl
  
  
  
  

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

المصدر دريم نت

تعريف بكاتب بشكل احترافي جدآ مع اشتراك ببريد لمدونات بلوجر وبتركيب سهل ~ دريم نت | لخدمات الويب