-->
إضافات بلوجر أضف معلومات عن التدوينة في أي مكان في مدونتك

أضف معلومات عن التدوينة في أي مكان في مدونتك

إضافات بلوجر

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

توجه الى القالب ثم تحرير html
ابحث عن </body> وضع فوقه الكود التالي

</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=&#39;10&#39;);
  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;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;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;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out;    text-decoration: none!important;}
.demo:before {content: &#39;\f06e&#39;;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:&#39;\f019&#39;;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;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:background-color 1s 0s ease-out;text-decoration: none!important;}
.download1:before {content:&#39;\f019&#39;;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;}
.ortilex-links {clear: both;margin-bottom: 15px;}
.ortilex-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;}
.ortilex-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;}
.ortilex-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;}
.ortilex-links .download2:hover{background-color: #F54C3E;color:#fff}
.ortilex-links .download2:before {content: &#39;\f0ed&#39;;}
.ortilex-links .download3:hover{background-color: #4399CD;color:#fff}
.ortilex-links .buy:hover{background-color: #F9C83D;color:#fff}
.ortilex-links .link:hover{background-color: #616975;color:#fff}
.ortilex-links .download3:before {content: &#39;\f0ed&#39;;}
.ortilex-links .link:before {content: &#39;\f0c1&#39;;}
.ortilex-links .demo1:before {content: &#39;\f135&#39;;}
.ortilex-links .buy:before {content: &#39;\f09d&#39;;}
.ortilex-links .trial:before {content: &quot;\f20a&quot;;}
.fa-cc:before {content: &quot;\f20a&quot;;}
.ortilex-links a span {white-space: nowrap;overflow: hidden;display: block;}
.ortilex-links a:hover span {display: none;}
.ortilex-links a:hover {background-color: #848181;color: #FFF;}
.ortilex-links a:hover span {color: #FFF;}
.temp-ftr {position: relative;font-family: electrolize,&#39;Droid Arabic Naskh&#39;, serif;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 &gt; div &gt; span.post-tags, .post-info &gt; div &gt; span.post-author, .post-info &gt; div &gt; span.post-timestamp, .post-info &gt; div &gt; span.post-comment-cnt , .post-info &gt; div &gt; span.post-broken,.post-info &gt; div &gt; 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 &gt; div &gt; span.post-tag, .post-inf &gt; div &gt; span.post-autho, .post-inf &gt; div &gt; span.post-timestam, .post-inf &gt; div &gt; span.post-comment-cn , .post-inf &gt; div &gt; span.post-broke {display: block;float: none;clear: both;min-height: 32px;margin-bottom: 4px;background: #EBEBEB;font-size: 13px;}
.post-inf &gt; div a {color: #408696;}
.post-inf &gt; div &gt; 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 &gt; div &gt; span .fa-file-archive-o {background: #E92648;}
.post-inf &gt; div &gt; span .fa-tachometer {background: orange;}
.post-inf &gt; div &gt; span .fa-copyright {background: #12ACE0;}
.post-inf &gt; div &gt; span .fa-toggle-off {background: #514069;}
#old-post-info{display:none}
#HTML4,#HTML7 {clear: both;}
#HTML1,#Followers1 {clear: both; }
.col-tag {display: none;}
.post-info &gt; div a {color: #408696;}
.post-info &gt; div &gt; 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 &gt; div &gt; span .fa-calendar {background: #7F93A2;background: #7F93A2;
    color: white;
    border-radius: 0px;
    padding: 5px 0px 0px 0px;}
span.post-instructions {
    display: block;
    float: none;
    clear: both;
    min-height: 32px;
    margin-bottom: 4px;
    background: rgba(245, 244, 244, 0.7);
    font-size: 13px;
}
.post-info &gt; div &gt; span .fa-comment {background: orange;}
.post-info &gt; div &gt; span .fa-comment-o {background: #4d90fe;}
.post-info &gt; div &gt; span .fa-user {background: #E55048;}
.post-info &gt; div &gt; span .fa-tags {background: #81e058;}
.post-info &gt; div &gt; span .fa-eye {background: #0ebeff;}
.post-info &gt; div &gt; span .fa-link {background: #974EE5;}
.post-info &gt; div &gt; span .fa-chain-broken {background: #fcd000;}
#views-container{
  display: inline-block;
}
.cl-item-page .post-timestamp {
    margin: 0px;
    padding-right: 0px;
}
.post-timestamp {
  margin-right: 0em;
}
.ortilex-links a:hover {
    color: rgba(0, 0, 0, 0) !important;
}
.ortilex-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;
}
.ortilex-links .link:before {
    content: &#39;\f0c1&#39;;
}
.ortilex-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;
}
ortilex-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;}
ortilex-postinfo {max-width: 100%;width:initial;margin-right:0;border: none;border-bottom: 1px solid #F5F5F5;}
</style>



ابحث عن <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-ortilex'>
<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;'>&amp;#1548;</b:if>
</b:loop>
</b:if>
</span>
<span class='post-comment-cnt'><i class='fa fa-eye'/>
المشاهدات : <data:post.numviews/><div id='views-container'>
<span class='views-icon'/>
<div class='views-text'/>
  <span class='mbtloading viewscount' id='postviews'/><a expr:name='data:post.id'/>
</div></span>
<span class='post-broken'><i class='fa fa-chain-broken'>
</i>للإبلاغ عن رابط معطوب <a href='/' 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='/' style='color #F56C27;text-decoration: underline;padding: 3px;font-size: 11px;' target='_blank'>اضغط هنا</a></span>
<span class='post-icons'>
</span>
</div></div>
<span style='color: #999999; font-size: x-small;'><b>احصل على هذة الاداة <a href='http://profmasterissam.blogspot.com/2016/03/post-info-widget.html'>من هنا</a></b></span></div>
</b:if>



ضع الكود التالي فوق اول اداة بالسيدبار في القالب
شاهد الصورة 
ortilex-info

  <b:widget id='HTML10' locked='false' title='معلومات عن التدوينة' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- 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:if>
</b:includable>
  </b:widget>


اي مشكلة واجهتك في التركيب اترك تعليق القادم ـأجمل والسلام عليكم





No comments:

Contact Form

Name

Email *

Message *