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

 

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

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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNfwZXpF0AvI-YtW9xKXVT6ln5dI_BV_SjiTETohuLkxFwoChZDUOrQ_qycBk04nQfTcL_8EbGIEaZBYP9xvcX2fLK97KHuZ6EF-EAx8Xuq5lQfWZSb3UJ0lorncCQ17roVd5K7YdzIfSa/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcYGVV7ESpQdvIhjJAyPrYZJoy1M-VhnEDyq26hWBYfSMlO5RCdosAfNqNr4srFsEPTjyoyzqBQlUFAeu5wPSH7sEE4yxPiUB1yGnaNBTa4o79xfvKWwf5tka-7ZlMibu6TBULVLtDu4/s1600/fb.png) no-repeat 50% center;
background-color: #003366;
}
#social_postauthor .tw {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK4iWLglPUk0SYgzieY3U4tRZkm_zbO76TbDtqQ_5fYwkxMVv2RKqSObycWh1tkShz756izET77TTCHPuw2FhpsohhVMViqVlsbGHwyAIb6x-myBgjzvWEqPUro4c_AAMlji6kAXALhXs/s1600/tw.png) no-repeat 50% center;
background-color: #0ba6f7;
}
#social_postauthor .gl {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHsjRCXZHGCFsst4YW4aW5L9Jr0BjD5AThDtHgIhLn4Pa8cchmPM0UI7OgAVLfAzBu5ItZocF_xFPQzbwZO1kjN3gSxRkTwuPhVqBnXRaa1KmDnooPbEJHJY26ac58GT2LwJOw7devGTs/s1600/g.png) no-repeat 50% center;
background-color: #dc311b;
}

.subspabox {
background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDmo14Tlnais3nP7dqXKv5EdVV0omBYjqhNyyuHdfNZKmVuOC56zbfv23_cis8LWFCxwQ9qnupEXMyHNc43zdzkegGuiA-hcQpT1bGfCzN8_N2CGDJqux45Kgw7D0MbdShQrta7MqQiso/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- ابحث عن :