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

السلام عليكم .... �� , معنا أضافه مميزة ⭐ لمدونات بلوجر , أضافة معلومات عن التدوينة في السايد بار لقوالب بلوجر , هذه الاضافة طالبني بها الكثير من متابعينا الاعزاء واليوم اقدمها بين ايدكم , تجعل هذه الاضافه مدونتك اكثر احترافية , لانها تتوفر على عدد التعليقات بشكل جميل وايضا كاتب الموضوع والوقت والاقسام وعدد مشاهدات الموضوع والكثير سوف تشاهدونة �� باذن الله , كي لا اطيل ⌚ عليكم ننتقل الى طريقة التركيب .


شرح طريقة التركيب
ادخل للمدونة » القالب » تحرير html » إبحث عن </body>
» ثم ضف الكود التالى فوقها

الكود

<script>
$(document).ready(function(){
        $("div.post-info2").replaceWith($("div.post-info"));
        $("div.blo1web-links2").replaceWith($("div.blo1web-links"));
});
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script>
<script>
$.each($('a[name]'), function(i, e) {
 var elem = $(e).parent().find('#postviews,#blo1webviews').addClass('mbtloading');
 var blogStats = new Firebase("https://blo1web.firebaseio.com/pages/id/" + $(e).attr('name'));
 blogStats.once('value', function(snapshot) {
  var data = snapshot.val();
  var isnew = false;
  if (data == null) {
   data = {};
   data.value = 0;
   data.url = window.location.href;
   data.id = $(e).attr('name');
   isnew = true;
  }
  elem.removeClass('mbtloading').text(data.value);
  data.value++;
  if (window.location.pathname != '/') {
   if (isnew) {blogStats.set(data);}
   else
            blogStats.child('value').set(data.value);
  }
 });
});
</script>
<style>
#post_media_permalink_container {
  margin: -70px -10px 0px 0px;
  padding: 0;
  position: relative;
  width: 102%;
  height: 599px;
  background: #F9F9F9;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
}
.post_media_permalink {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover !important;
  opacity: 1;
  background-position: 0px 0px;
  background-repeat: no-repeat;
  position: relative;
}
.post_media_permalink img {
  filter: blur(10px);
  -webkit-filter: blur(6px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: url(https://googledrive.com/host/0BzhmjN6UOoj5MTV3d0NwaUJHVHc?dl=1#blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
  background-repeat: no-repeat;
}
.demo:hover,.download1:hover,.download:hover {background:rgba(0, 0, 0, 0.6);text-shadow:0 0 1px #222;color:#fff;}
.button{float:right;list-style:none;text-align:center;width:95%;margin:10px;
padding:2px;font-size:14px;clear:both;-webkit-box-reflect:below -3px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4)))}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {opacity:1;padding:5px 14px!important;background:#9eb2c0;color:#fff!important;font-weight:400;font-size:14px;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out;text-decoration: none!important;}
.download {opacity:1;padding:5px 14px!important;background:#fe4e3f;color:#fff!important;font-weight:400;font-size:14px;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out;    text-decoration: none!important;}
.demo:before {content: '\f06e';display: inline-block;margin-left: 5px;width: 16px;height: 31px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -14px;padding-bottom: 8px;padding-left: 20px;padding-right: 7px;}
.download:before {content:'\f019';display: inline-block;margin-left: 5px;width: 16px;height: 31px;line-height: 24px;color: #fff;font-family: fontawesome;transition: all 0.5s ease-in-out;padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -14px;padding-bottom: 8px;padding-left: 20px;padding-right: 7px;}
.download1 {opacity:1;padding:5px 14px!important;background:#3FA2FE;color:#fff!important;font-weight:400;font-size:14px;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out;text-decoration: none!important;}
.download1:before {content:'\f019';display:inline-block;margin-left:5px;width:16px;height:31px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;padding:3px;background:rgba(0, 0, 0, 0.2)padding: 3px;background: rgba(0, 0, 0, 0.2);margin-right: -14px;padding-bottom: 8px;padding-left: 20px;padding-right: 7px;}
.blo1web-links {clear: both;margin-bottom: 15px;}
.blo1web-links a {display: block;overflow: hidden;margin-bottom: -15px;white-space: nowrap;text-align: center;position: relative;height: 60px;
line-height: 60px;padding: 0 30px;color: #fff;    text-transform: uppercase;font-weight: bold;text-decoration: none!important;border-radius: 2px!important;}
.blo1web-links a:before {display: inline;font: normal normal normal 14px/1 FontAwesome;vertical-align: middle;position: absolute;left: 50%;width: 20px;height: 20px;
margin-left: -10px;top: 50%;margin-top: -10px;opacity: 0;-webkit-transform: scale(10);-moz-transform: scale(10);-o-transform: scale(10);-ms-transform: scale(10);
color: #FFF;font-size: 20px;}
.blo1web-links a:hover:before {opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transition: all .2s ease;-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;-ms-transition: all .2s ease;}
a.download2 {background-color: #fe4e3f;}a.download3 {background-color:#3FA2FE;}a.demo1 {background-color: #9A9898;}a.buy {background-color: #FFCD3F;}a.link {
background-color: #6E7784;}
.blo1web-links .download2:hover{background-color: #F54C3E;color:#fff}
.blo1web-links .download2:before {content: '\f0ed';}
.blo1web-links .download3:hover{background-color: #4399CD;color:#fff}
.blo1web-links .buy:hover{background-color: #F9C83D;color:#fff}
.blo1web-links .link:hover{background-color: #616975;color:#fff}
.blo1web-links .download3:before {content: '\f0ed';}
.blo1web-links .link:before {content: '\f0c1';}
.blo1web-links .demo1:before {content: '\f135';}
.blo1web-links .buy:before {content: '\f09d';}
.blo1web-links .trial:before {content: "\f20a";}
.fa-cc:before {content: "\f20a";}
.blo1web-links a span {white-space: nowrap;overflow: hidden;display: block;}
.blo1web-links a:hover span {display: none;}
.blo1web-links a:hover {background-color: #848181;color: #FFF;}
.blo1web-links a:hover span {color: #FFF;}
.temp-ftr {position: relative;font-size: 13.5px;}
.temp-ftr ul{list-style:none;}.temp-ftr li{    white-space: nowrap;border: 1px solid #EAE9E9;padding: 10px;margin: 0;    border-bottom: none;}.temp-ftr li:last-child{border-top: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF;}.temp-ftr li i{border-left: 1px solid #ddd;padding-left: 7px;margin-left: 5px;color: #ddd;width: 21px;text-align: center;}.temp-ftr li:hover{cursor:pointer;}.temp-ftr li:nth-child(2n+2){background-color:#f9f9f9;    border-bottom: none;}.temp-ftr li:hover .fa-check{color:#61a136;}.temp-ftr li:hover .fa-tasks{color:#e84c4a;}.temp-ftr a{line-height: 0!important;background: none!important;color: #448AFF;overflow: visible!important;padding: 0!important;margin: 0!important;text-align: initial;height: 0!important;font-weight: normal;display: inline-table;font-family: tahoma;}.temp-ftr li:hover .fa-copyright,.temp-ftr li:hover .fa-cc,.temp-ftr li:hover .fa-file-image-o,.temp-ftr li:hover .fa-folder-o {color: #ddd;}
.temp-ftr a:hover,.temp-ftr li:hover .fa-file-archive-o{color: #3F80EC;}
.post-info > div > span.post-tags, .post-info > div > span.post-author, .post-info > div > span.post-timestamp, .post-info > div > span.post-comment-cnt , .post-info > div > span.post-broken,.post-info > div > span.post-disqus-cnt{display: block;float: none;clear: both;min-height: 32px;margin-bottom: 4px;background: rgba(245, 244, 244, 0.7);font-size: 13px;}
.post-inf > div > span.post-tag, .post-inf > div > span.post-autho, .post-inf > div > span.post-timestam, .post-inf > div > span.post-comment-cn , .post-inf > div > span.post-broke {display: block;float: none;clear: both;min-height: 32px;margin-bottom: 4px;background: #EBEBEB;font-size: 13px;}
.post-inf > div a {color: #408696;}
.post-inf > div > span .fa {width: 32px;height: 32px;color: #FFF;text-align: center;font-size: 22px;margin-left: 10px;padding-top: 5px;vertical-align: middle;}
.post-inf > div > span .fa-file-archive-o {background: #E92648;}
.post-inf > div > span .fa-tachometer {background: orange;}
.post-inf > div > span .fa-copyright {background: #12ACE0;}
.post-inf > div > span .fa-toggle-off {background: #514069;}
.col-tag {display: none;}
.post-info > div a {color: #408696;}
.post-info > div > span .fa {width: 32px;height: 32px;color: #FFF;text-align: center;font-size: 22px;margin-left: 10px;padding-top: 5px;vertical-align: middle;}
.post-info > div > span .fa-calendar {background: #7F93A2;}
.post-info > div > span .fa-comment {background: orange;}
.post-info > div > span .fa-comment-o {background: #4d90fe;}
.post-info > div > span .fa-user {background: #E55048;}
.post-info > div > span .fa-tags {background: #81e058;}
.post-info > div > span .fa-eye {background: #0ebeff;}
.post-info > div > span .fa-link {background: #974EE5;}
.post-info > div > span .fa-chain-broken {background: #fcd000;}
#views-container{
  display: inline-block;
}
.post-timestamp {
  margin-right: 0em;
}
.blo1web-links a:hover {
    color: rgba(0, 0, 0, 0) !important;
}
.blo1web-links a:hover:before {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -ms-transition: all .2s ease;
}
.blo1web-links .link:before {
    content: '\f0c1';
}
.blo1web-links a:before {
    display: inline;
    font: normal normal normal 14px/1 FontAwesome;
    vertical-align: middle;
    position: absolute;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    top: 50%;
    margin-top: -10px;
    opacity: 0;
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -o-transform: scale(10);
    -ms-transform: scale(10);
    color: #FFF;
    font-size: 20px;
}
blo1web-postinfo{background: #FFF;border: 1px solid #E7E7E7;color: #555;display: block;max-width: 47%;text-align: right;height: 250px;margin-top: 20px;margin-right: 7px;}
blo1web-postinfo {max-width: 100%;width:initial;margin-right:0;border: none;border-bottom: 1px solid #F5F5F5;}
</style>
الان ابحث عن كود السايد بار غالبا ما يكون بهذا الشكل <div id='sidebar-wrapper'>
واضف الكود التالى بعدة مباشرةً

الكود

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:section class='sideinfo' id='sideinfo' showaddelement='yes'>
    <b:widget id='HTML998' locked='false' title='post info' type='HTML'>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div class='post-info2'/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
    <b:widget id='HTML997' locked='false' title='post tools' type='HTML'>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <div class='widget-content'>
    <div class='blo1web-links2'/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
  </b:section>
    </b:if>
الان ابحث عن <div class='post-header'>
واضف الكود التالى بعدة مباشرةً

الكود

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="display:none;">
<div class='post-info' id='new-post-info'>
<div class='cl-item-page' id='fixe-blo1web'>
<span class='post-comment-cnt vcard'><i class='fa fa-comment'>
</i>التعليقات : <data:post.numComments/></span>
<span class='post-author vcard'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<i class='fa fa-user'>
</i>الكاتب : 
<span itemprop='name'><data:post.author/></span>
</span>
</span>
<span class='post-timestamp'>
<i class='fa fa-calendar'>
</i>
<data:post.timestamp/>
</span>
<span class='post-comment-link'>
</span>
<span class='post-tags'>
<i class='fa fa-tags'>
</i>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a class='first' expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>&#1548;</b:if>
</b:loop>
</b:if>
</span>
<span class='post-comment-cnt'><i class='fa fa-eye'/>
عدد المشاهدات : <div id='views-container'>
<span class='views-icon'/>
<div class='views-text'/>
  <span class='mbt-loading viewscount' id='postviews'/>
</div></span>
<span class='post-broken'><i class='fa fa-chain-broken'>
</i>قم بالابلاغ عن رابط معطوب<a href='http://en.blo1web.com/p/broken-link.html' style='color #F56C27;text-decoration: underline;padding: 3px;font-size: 11px;' target='_blank'>هنا</a></span>
<span class='post-instructions'><i class='fa fa-link'>
</i>سياسة الخصوصية <a href='http://en.blo1web.com/p/privacy-policy.html' style='color #F56C27;text-decoration: underline;padding: 3px;font-size: 11px;' target='_blank'>هنا</a></span>
<span class='post-icons'>
</span>
  </div></div></div>
</b:if>

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق

7 التعليقات

avatar

شكراااااااااااااااااااااا

avatar

العفو اخي الغالي (y)

avatar

الإضافة رائعة جدا ، فقط أريد فقط أخي كريم أن تعطينا كود صناديق أكواد الاكواد في تدوينة ما

avatar

الاروع مرورك اخي الغالي , بالنسبه للصناديق فسيتم نشرها لكم في الايام المقبله

avatar

مشكور يا غالي تعرف تقريبا منذ شهرين و أنا أبحث عنها

avatar

حمدا لله انك وجدتها (y)

avatar

كيف اضيف عدد تعليقات صندوق Disqus
و شكرا

الإبتساماتالإبتسامات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة