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

 

 

 

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

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

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

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 == &quot;item&quot;'>
<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. قم بتغيير ما يناسبك و اضغط حفظ.

11:13 ص