اضافة اداة معلومات عن التدوينة في السيدبار حصريا

السلام عليكم ورحمة

الله وبركاته

نعود لكم مجددا وكالعادة بتدوينة حصرية نقدم لكم فيها اضافة اداة معلومات عن التدوينة بالسيدبار الاضافة التي يبحث عنها

الكثيرون

ويمكنك معاينتها من خلال التدوينة

-----------------------------------------------

طريقة التركيب:

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

<script>
$(document).ready(function(){
        $(&quot;div.post-info2&quot;).replaceWith($(&quot;div.post-info&quot;));
        $(&quot;div.ortilex-links2&quot;).replaceWith($(&quot;div.ortilex-links&quot;));
});
</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>

ضع الكود التالي فوق اول اداة بالسيدبار في القالب

  <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>

لمغوش للمعلوميات

اضافة اداة معلومات عن التدوينة في السيدبار حصريا

mohamed maestro

ليست هناك تعليقات:

بخصوص القالب

المشاركات الشائعة

القناة الرسمية

الصفحة الرسمية

التسميات

اشترك في قائمتنا البريدية

اتصل بنا لحل جميع مشاكلك