سنشرح لكم اليوم طريقة اضافة تعريف الكاتب الى التدوينات على مدونات
البلوجر باحترافية ، هذه الاضافة احترافية تقدم ملخصا عن الكاتب أو الموقع
مرفوقا بالصورة ، بحيث تظهر أسفل كل موضوع . هذه الاضافة احترافية جدا و
تساهم بالشكل كبير للزوار من معرف ملخص عن الكاتب الموضوع أو نبذة للمدونة .
طريقة اضافة تعريف الكاتب لمواضيع في ابلوجر بالشكل احترافي سهلة للغاية لا تحتاج اي خبرة فقط تابع الشرح .
شرح طريقة اضافة تعريف الكاتب الى المواضيع في البلوجر
1. نتوجه الى المدونة
2. قالب
3. تحرير HTML
4. نبحث عن الكود
</head>
5. نضيف كود الثالي فوقه
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='https://asma-rahmouni.googlecode.com/svn/trunk/GESSTwoMediumRegular.css' rel='stylesheet' type='text/css'/>
<link href='https://asma-rahmouni.googlecode.com/svn/trunk/GESSTwoLight.css' rel='stylesheet' type='text/css'/>
<style>
/* Post by box http://belkacembbm.blogspot.com
----------------------------------------------- */
.post_byfix p {
margin:0;
padding:0 5px;
line-height:25px!important;
font:13px "GESSTwoLight", Arial;
text-align:right;
color:#f1f1f1;
}
.post_byfix p a {
text-decoration:none;
color:#f24024;
}
.post_byfix {
float:right;
width:100%;
height:100%;
background: #333;
margin:-10px 0 10px 0;
padding: 12px;
border: 0px solid #f24024;
overflow: hidden;
}
.post_byimz {
display:block;
float:right;
padding-left:20px!important;
margin-top:1px!important;
overflow:hidden
}
.author-name {
color:#fff;
font-family:GESSTwoMediumRegular;
font-weight:400;
font-size:29px;
text-transform:uppercase;
}
.post_byimz img {
width:100%;
height:100%;
max-width:120px;
max-height:120px;
background: #FFFFFF;
float: right;
margin:0 0 0 10px;
padding: 5px;
border: 3px solid #f0f0f0;
border-radius: 100%;
}
.post_by {
width:100%;
float:left;
color:#423119;
width:100%;
font-family:GESSTwoLight;
font-weight:normal;
font-size:13px
}
.post_by ul {
margin:0;
padding:0
}
.post_by li {
list-style:none;
padding:3px 10px!important
}
.tag-widget9{
height:265px;
width:100%;
float:right;
}
.tag-widget16{
width:100%;
float:right;
}
#authorsn {
float:left;
}
.authorsn {
position:relative;
}
.authorsn {
display: inline-block;
position: relative;
cursor: pointer;
width: 24px;
height: 24px;
padding: 0px;
text-decoration: none;
text-align: center;
font-size: 16px;
font-family:FontAwesome;
font-weight: normal;
line-height: 1.7em;
}
/* facebook button class*/
.facebooksn{
background: #4060A5;
}
.facebooksn:before{ /* use :before to add the relevant icons */
font-family: "FontAwesome";
color: #fff;
content: "\f09a"; /* add facebook icon */
}
.facebooksn:hover{
color: #4060A5;
background: #222;
}
/* twitter button class*/
.twittersn{
background: #00ABE3;
}
.twittersn:before{
font-family: "FontAwesome";
color: #fff;
content: "\f099"; /* add twitter icon */
}
.twittersn:hover{
color: #00ABE3;
background: #222;
}
/* google plus button class*/
.googleplussn{
background: #e64522;
}
.googleplussn:before{
font-family: "FontAwesome";
color: #fff;
content: "\f0d5"; /* add googleplus icon */
}
.googleplussn:hover{
color: #e64522;
background: #222;
}
/* linkedin button class*/
.linkedinsn{
background: #0094BC;
}
.linkedinsn:before{
font-family: "FontAwesome";
color: #fff;
content: "\f0e1"; /* add linkedin icon */
}
.linkedinsn:hover{
color: #0094BC;
background: #222;
}
/* pinterest button class*/
.pinterestsn{
background: #cb2027;
}
.pinterestsn:before{
font-family: "FontAwesome";
color: #fff;
content: "\f0d2"; /* add pinterest icon */
}
.pinterestsn:hover{
color: #cb2027;
background: #222;
}
/* tumblr button class*/
.tumblrsn{
background: #3a5876;
}
.tumblrsn:before{
font-family: "FontAwesome";
color: #fff;
content: "\f173"; /* add tumblr icon */
}
.tumblrsn:hover{
color: #3a5876;
background: #222;
}
/* rss button class*/
.rsssn{
background: #ff9900;
}
.rsssn:before{
font-family: "FontAwesome";
color: #fff;
content: "\f09e"; /* add rss icon */
}
.rsssn:hover{
color: #ff9900;
background: #222;
}
</style>
6. نبحث عن الكود الثالي
<div class=’post-footer-line post-footer-line-1′>
- اذا لم تجده فبحث عن
<data:post.body/>
7.ااضف كود الثالي اسف من الكود السابق
<b:if cond='data:blog.pageType == "item"'>
<div class='post_byfix'>
<div class='post_by'>
<div class='post_byimz'>
<span class='author'><a href='ٍGoogle+ Link'><img src='https://lh4.ggpht.com/zz2uNLjPKuEC54ixmUFRI1hXycmgLywaMLdpkloNWge-aG_jXYX511M5dSVNTjggOEg=w300'/></a></span>
</div>
<div class='author-name'>مدونة حكمات</div>
<p>مدونةal mohatrif من المدونات الحديثة المختصة في تطوير المدونات البلوجر أو الووردبريس تهتم بكل ما هوجديد في عالم المعلومتيات والاعلاميات . تضم المدونة مواضيع عديدة حصرية و مفيدة ذات جودة عالية ، انشات في سنة 2014 و لها عدد من المتابعين </p>
<p>الموقع: <a href='http://belkacembbm.blogspot.com/' title='HUKMAT'>حكمات للمعلوميات</a></p>
<div id='authorsn'>
<p><a class='facebookBtn authorsn' href='social-media-profile-url'></a>
<a class='twittersn authorsn' href='social-media-profile-url'></a>
<a class='googleplussn authorsn' href='social-media-profile-url'></a>
<a class='linkedinsn authorsn' href='social-media-profile-url'></a>
<a class='pinterestsn authorsn' href='social-media-profile-url'></a>
<a class='tumblrsn authorsn' href='social-media-profile-url'></a>
<a class='rsssn authorsn' href='social-media-profile-url'></a></p>
</div>
</div>
</div></b:if>
8. قم بتغيير ما يناسبك و اضغط حفظ.
0 التعليقات