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

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

سنشرح لكم اليوم طريقة اضافة تعريف الكاتب الى التدوينات على مدونات البلوجر باحترافية ، هذه الاضافة احترافية تقدم ملخصا عن الكاتب أو الموقع مرفوقا بالصورة ، بحيث تظهر أسفل كل موضوع . هذه الاضافة احترافية جدا و تساهم بالشكل كبير للزوار من معرف ملخص عن الكاتب الموضوع أو نبذة للمدونة .

طريقة اضافة تعريف الكاتب لمواضيع في ابلوجر بالشكل احترافي سهلة للغاية لا تحتاج اي خبرة فقط تابع الشرح .

شرح طريقة اضافة تعريف الكاتب الى المواضيع في البلوجر

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://hukmat.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>مدونة حكمات من المدونات الحديثة المختصة في تطوير المدونات سواءا البلوجر أو الووردبريس. تصم المدونة مواضيع عديدة حصرية و مفيدة ذات جودة عالية ، انشئة في سنة 2013 و لها عدد من المتابغين</p>
<p>الموقع: <a href='http://hukmat.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. قم بتغيير ما يناسبك و اضغط حفظ.

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

مقالات ذات صلة

3 التعليقات