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

الخطوة الأولى: الدخول إلى لوحة بلوجر & تحرير القالب & إبحث عن هذا الوسم </style> وضع الكود التالى قبلة مباشرة

/* CSS Syntax Highlighter */
pre {padding:35px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#333;position:relative;max-height:500px;box-shadow:0 0 0 1px #eee;border-radius:3px;}
pre::before {font-size:13px;content:attr(title);position:absolute;top:0;background-color:transparent;padding:6px 10px 7px 10px;left:0;right:0;color:#333;display:block;margin:0 0 15px 0;font-weight:700;box-shadow:0 0 3px #ccc;}
pre::after {content:&quot;إضغط مرتين لتحديد الكل&quot;;padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#888;line-height:20px;transition:all 0.3s ease-in-out;}
pre:hover::after {opacity:0;top:-8px;visibility:visible;}
code {line-height:16px;color:#aaa;background-color:transparent;
padding:1px 2px;font-size:12px;}
pre code {display:block;background:none;border:none;color:#aaa;direction:ltr;
text-align:left;word-spacing:normal;padding:10px;font-weight:bold;}
code .token.punctuation {color:#bbb;}
pre code .token.punctuation {color:#777;}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {color:#aaa;}
code .namespace {opacity:.8;}
code .token.property,code .token.tag,code .token.boolean,code .token.number {color:#d75046;}
code .token.selector,code .token.attr-name,code .token.string {color:#88a9ad;}
pre code .token.selector,pre code .token.attr-name {color:#00a1d6;}
pre code .token.string {color:#6fb401;}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {color:#5ac954;}
code .token.operator {color:#1887dd;}
code .token.atrule,code .token.attr-value {color:#009999;}
pre code .token.atrule,pre code .token.attr-value {color:#1baeb0;}
code .token.keyword {color:#e13200;font-style:italic;}
code .token.comment {font-style:italic;}
code .token.regex {color:#ccc;}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
pre code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
.comments pre {padding:10px 10px 15px 10px;background:#333;border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);text-shadow:0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::before {content:&#39;Code&#39;;font-size:10px;font-weight:700;position:relative;top:0;background-color:#363636;padding:2px 8px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;border:none;border-radius:2px;border:1px solid #2a2a2a;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 20px 20px rgba(255,255,255,0.1);text-shadow: 0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::after {font-size:11px;}
.comments pre code {color:#aaa;}
.comments pre.line-numbers {padding-left:10px;}
pre.line-numbers {position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers &gt; code {position:relative;}
.line-numbers .line-numbers-rows {height:100%;position:absolute;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#444;}
.line-numbers-rows &gt; span {display:block;counter-increment:linenumber;}
.line-numbers-rows &gt; span:before {content:counter(linenumber);color:#aaa;display:block;
padding-right:0.8em;text-align:right;transition:350ms;}

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

<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/pismaa.js' type='text/javascript'/>
<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
</script>

* الآن قم بحفظ القالب ولإستخدام هذا النموذج عند إنشاء موضوع جديد إختار HTML وضع الكود التالى 

<pre title="HTML" data-codetype ="HTMLku">
<code class="language-markup"> ... YOUR HTML CODE HERE ... </code></pre> <pre title="CSS" data-codetype ="CSSku">
<code class="language-css"> ... YOUR CSS CODE HERE ... </code></pre> <pre title="Javascript" data-codetype ="JavaScriptku">
<code class="language-javascript"> ... YOUR JAVASCRIPT CODE HERE ... </code></pre> <pre title="jQuery" data-codetype ="JQueryku">
<code class="language-javascript"> ... YOUR jQuery CODE HERE ... </code></pre>

وضع كل كود فى المكان المخصص له

تابع القراءة

السلام عليكم ورحمة الله وبركاتة

إضافة التسجيل فى القائمة البريدية بطريقة أنيقة عن طريق رسالة منبثقة بتقنية الـ css3&jquery تعطى مظهراً رائعاً فى مدونتك وهذة الإضافة هى هامة فى متابعة زوارك لكل جديد لديك فننصح بتركيبها.

معاينة الإضافة 

شرح التركيب الإضافة:

1.  لوحة التحكم من هنا >> تحرير القالب >> ثم أضف كود css قبل هذا الوسم </style>

#sub-box {
display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {background:#fff;border:8px solid #fff;width:600px;height:250px;position:absolute;top:33%;left:28%;}
#closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}
#closebox:before {content:&quot;إغلاق&quot;;padding:5px 8px;background:#fff;color:#48cb7a;font-weight:normal;font-size:12px;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box {width:600px;height:250px;background-color:#02BA74;}
#subscribe-box p {font-size:18px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;font-family: DroidKufi-Bold;
}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;;width:96.3%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:normal;font-size: 16px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{font-family: DroidKufi-Bold;
background:#fff;color:#444;}

ـــ الآن إحفظ القالب >> إذهب إلى التخطيط وإضافة أداة جديدة HTML&javascript وأضف الكود التالى

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#sub-box').delay(3000).fadeIn('fast');
$('#closebox, #boxclose').click(function(){
$('#sub-box').stop().fadeOut('fast');
});
}
});
</script>
<div id='sub-box'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='subscribe-box'>
                 <center><p>سجل معنا لكى يصلك كل جديد</p></center>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify?uri=hadystore/hmBDo' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=hadystore/hmBDo, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;أدخل إسمك&quot;;}' onfocus='if (this.value == &quot;أدخل إسمك&quot;) {this.value = &quot;&quot;;}' value='أدخل إسمك'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;أدخل بريدك الإلكترونى&quot;;}' onfocus='if (this.value == &quot;أدخل بريدك الإلكترونى&quot;) {this.value = &quot;&quot;;}' value='أدخل بريدك الإلكترونى'/>
<input name='uri' type='hidden' value='hadystore/hmBDo'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='سجل الآن!'/>
              </form>
             </div></div>
</div>
</div> 

 ـــ ثم قم بتغييرهذا الإسم hadystore/hmBDo بإسم موقعك فى feedburner شرح الحصول عليه

إذا إستفدت من هذة التدوينة لا تتردد فى مشاركتها مع زملائك

تابع القراءة

بسم الله الرحمن الرحيم - السلام عليكم ورحمة الله وبركاتة

كيكفم إخوانى / أخواتى الأعزاء شرح بسيط جداً لكيفية تركيب كود قائمة علوية بشكل إحترافى وجزاب العديد يريد أن يكون لدية أكثر من قائمة فى هذة التدونية سنشرح لك طريقة التركيب + قائمة تم تصميمها من مدونة هادى ستور قائمة بسيطة وانيقة أتمنى أن تنال إعجابكم .

معاينة القائمة

1. ستتوجة إلى لوحة التحكم الرئيسية ثم تحرير القالب وستبحث عن هذا الوسم ]]></b:skin> وستضع الكود التالى اعلاة
   
   

مثل ما هو موضح بالصورة أعلاة وستقوم بلصق هذا الكود 

/* Wrap */
#wrap {
    margin: 0px auto;
    width: 900px;
}
/* Head */
#head {
    background-color: #E1EDB9;
    margin: 0px auto;
    padding: 10px;
    color: #FFF;
    font: bold 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#head span {color: #FFF; font: normal 12px tahoma;}
#head span a, #head span a:link, #head span a:visited {color: #D54E21;}
#head span a:active, #head span a:hover {color: #FFF;}
/* Dropdowns Menu */
#pop {
    background: #E1EDB9;
    height:24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#pop li ul {
    margin: 0;
    background: #E1EDB9;
    padding: 0;
    list-style: none;
}
#pop li {
    float: right;
    margin: 0;
    padding: 0;
    position: relative;
}
#pop li li {
    float: right;
    width: 175px;
    margin: 0;
    padding: 0;
}
#pop li a, #pop li a:link, #pop li a:visited {
    font: normal 12px Tahoma;
    color: #414A52;
    text-decoration: none;
    background: #E1EDB9;
    display: block;
    padding: 5px 12px;
}
#pop li a:hover, #pop li a:active {
    color: #FFF;
    display: block;
    background: #FF4242;
    padding: 5px 12px;
}
#pop li li a, #pop li li a:link, #pop li li a:visited {
    background: #E1EDB9;
    color:#414A52;
    width: 175px;
    margin: 0px;
    padding: 5px 12px;
    border-top: 1px solid #F5F9FB;
}
#pop li li a:hover, #pop li li a:active {
    color: #FFF;
    background: #FF4242;
}
#pop li ul {
    position: absolute;
    width: 199px;
    display: none;
    right: 0;
}
#pop li:hover ul {
    display: block;
}

* والخطوة الثانية والأخيرة ستقوم بالبحث عن هذا الكود أو ما شابة ليه 

قم بلصق هذا الكود

<div id="wrap">
  <!-- Header -->   
  <!-- NavBar - hadystore -->
  <ul id="pop">
    <li><a href="http://hadystore.blogspot.com/">الرئيسية</a></li>
    <li><a href="#">قائمة دروس CSS</a>
      <ul>
        <li><a href="#">هل تريد أن تتعلم تقنية CSS ؟</a></li>
        <li><a href="#">تطبيقات ودروس متنوعة</a></li>
        <li><a href="#">خدع CSS وطرق تطبيقها</a></li>
      </ul>
    </li>
    <li><a href="#">وصلة رئيسية أفقية</a>
      <ul>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
      </ul>
    </li>
    <li><a href="#">وصلة رئيسية أفقية</a>
      <ul>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
      </ul>
    </li>
    <li><a href="#">وصلة رئيسية أفقية</a>
      <ul>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
      </ul>
    </li>
    <li><a href="#">وصلة!</a>
      <ul>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
        <li><a href="#">وصلة فرعية رأسية</a></li>
      </ul>
    </li>
  </ul>
</div>

والآن قم بحفظ القالب تم بحمد الله

تابع القراءة

بسم الله الرحمن الرحيم

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

معاينة الإضافة

1. الدخول إلى الصفحة الرئيسية - تحرير القالب
2. إبحث عن هذا الوسم ]]></b:skin> وضع الكود التالى أعلاة / فوقة مباشرة
   

@font-face {
 
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  }
  @font-face {
 
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
  }


  .message_box {
 text-align:right;
    margin:15px 0;
  }

  .note {
    color:#666;
   text-align:right;
    font-size:16px;
    border:1px solid #FDEBA5;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTdRmtZRDGHC92fsIYmV9YzbFD2Y6QugwFUVLHlrKl45LJGT6O6ZIPs-UfHWpV6sVXHEa7YIA9LA8NCVqtwEKCKSIbZ7b62f0dZnHlsjGrdJ3ObR86_6QZOBAcAhhQuS49oDxwM64voesD/s1600/thumb.png) no-repeat scroll 10px center #FEF4C8;
    padding:.5em 1em .5em 3em;
  }

  .announce {
    color:#666;
   text-align:right;
    font-size:16px;
    border:1px solid #BEE5F8;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnTegDj28ZLJtqe1ZK-c7ZxTO-U1KBKec3XQRbP17P2huS5O5w7kYOTRd5fxtwH7JZdijf-c5BL_s12BWNyhE38kfPeyBrHjlDSLEs9Fe8orccCNzfkf9-Li1c_fFoKX0iAH_zztKk9lXu/s1600/speaker.png) no-repeat scroll 10px center #D7EFFB;
    padding:.5em 1em .5em 3em;
  }

  .success {
    color:#666;
   text-align:right;
    font-size:16px;
    border:1px solid #DEF1BF;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBvKUvviz9GuCJyyXK_FDT6hgUWtqQwSmj72vDt2q-6yofxSfKw_f6y1SUjfkFEgFHmBI-T2C3j0BVErM_B8Du3A-gueraWJCyUsQTM8NG6PceaVFlJHQl9EEOLF0TCRrImikbPuTZpm6y/s1600/tick.png) no-repeat scroll 10px center #E8F6D2;
    padding:.5em 1em .5em 3em;
  }

  .warning {
    color:#666;
   text-align:right;
    font-size:16px;
    border:1px solid #FFDBDB;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbi9Mpq_IYt2gfNnltUneV374_-3nb_ZtR_7C1XwrcCxxp6dSU2PoAN6vhhQQiVlpd4TnA7khzz6fwUVj2tde2uz0l4H8xrcYZFACpRJpkJlyrOpge_Xu_DIjRt-vC36GyRQEnXWfY3k_q/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;
    padding:.5em 1em .5em 3em;
  }

* ثم قم بحفظ القالب / ولإستخدام الصناديق إستخدم أحد الأكواد التالية حسب رسالتك

<div class="message_box note">
  Hi, I am Mr.Noter. I'll notify your readers about the news.
</div>
إعلان
<div class="message_box announce">
ضع نصك هنا مكان النص الإفتراضى يمكنك إستبدالة
</div>
رسالة عمل ناجح
<div class="message_box success">
ضع نصك هنا مكان النص الإفتراضى يمكنك إستبدالة
</div>
رسالة تحذير 
<div class="message_box warning">
ضع نصك هنا مكان النص الإفتراضى يمكنك إستبدالة
</div>

تابع القراءة

بسم الله الرحمن الرحيم / السلام عليكم ورحمة الله وبركاتة

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

{مميزات الإضافة}

1. متوفرة بشكلين مختلفين يمكنك إختيار ما تشاء
2. إظهار صورة الموضوع + العنوان بشكل أنيق
3. سهلة الإضافة والتخصيص 
4. يمكنك التعديل عليها بسهولة وتغير أبعاد الصور 
5. ترقيم للتدوينات بشكل جميل

ملحوظة : إذا كان لديك هذة الإضافة من قبل فيجب عليك إزالة كود الـ css وتقوم بإضافة كود هذة الإضافة بدلا منه

1. الدخول إلى حسابك > قالب > تحرير Html 
2. قم بأخذ نسخة إحتياطية من القالب تحسباً لأى أخطاء لا قدر الله
3. ستقوم بالبحث عن هذا الوسم </body> وستقوم بوضع هذا الكود قبلة مباشرة

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>//<![CDATA[

$(document).ready(function() {

  var tbn = 150;

  $('#PopularPosts1').find('img').each(function(n, image){

    var image = $(image);

    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + tbn)});

    image.attr('width',tbn);

    image.attr('height',tbn);

  });

});

//]]></script>

* الخطوة الرابعة نبحث عن هذا الوسم ]]></b:skin> ونضع الكود التالى قبلة مباشرة




الشكل الأول كما هو موضع بالصورة السابقة




/***** المشاركات الشائعة / الشكل الأول *****/

.sidebar .popular-posts ul {

  counter-reset: popcount;

  margin: 0;

  padding: 0;

  }

.sidebar .popular-posts ul li:first-child {}

.sidebar .popular-posts ul li {

  height: 130px;

  list-style: none !important;

  overflow: hidden;

  padding: 0 !important;

  position: relative;

  margin: 2px;

  border: 0;

  width: 48%;

  float: left;

  }

.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}

.sidebar .PopularPosts ul li img {

  display: block;

  float: left;

  padding: 0;

  width: 100%;

  height: 130px;

  -webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/

  -moz-transition-duration: 1.0s; /*Mozilla Animation duration*/

  -o-transition-duration: 1.0s; /*Opera Animation duration*/

  transition:1.0s;

  }

.sidebar .PopularPosts ul li img:hover {

  -webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/

  -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/

  -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/

  transform:scale(1.06);

  overflow: hidden;

  }

.sidebar .PopularPosts .item-title {

  bottom:0;

  left: 0;

  right: 0;

  padding-bottom: 0;

  position: absolute;

  z-index: 999;

 }

.sidebar .PopularPosts .item-title a {

  background: rgba(32, 32, 32, 0.77);

  color: #FFFFFF;

  display: block;

  font-size: 12px;

  line-height: normal;

  padding: 5px 0px 2px 5px;

  text-transform: capitalize;

  transition: all .4s ease-in-out;

  }

.sidebar .popular-posts ul li:hover .item-title a {

  color: rgba(255, 255, 255, 1);

  background: rgba(231, 76, 60, 0.88);

  text-decoration: none;

  }

.sidebar .popular-posts ul li:before {

  background: rgba(255, 252, 8, 1);

  color: #000;

  content: counter(popcount, decimal);

  counter-increment: popcount;

  float: left;

  font-size: 14px;

  line-height: 20px;

  list-style-type: none;

  padding: 0px 8px 1px 1px;

  border-radius: 0px 0px 10px 0px;

  position: absolute;

  top: 0;

  z-index: 4;

  border: solid #FFF;

  border-width: 0px 2px 2px 0px;

  }

الشكل الثانى

/***** المشاركات الشائعة / الشكل الثانى *****/

.sidebar .popular-posts ul {

  counter-reset: popcount;

  margin: 0;

  padding: 0;

  }

.sidebar .popular-posts ul li:first-child {}

.sidebar .popular-posts ul li {

  height: 130px;

  font-weight: bold;

  list-style: none !important;

  overflow: hidden;

  padding: 0px !important;

  position: relative;

  margin: 2px;

  border: 0;

  width: 100%;

  float: left;

}

.sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;}

.sidebar .PopularPosts ul li img {

  display: block;

  float: left;

  padding: 0;

  width: 100%;

  height: 130px;

  -webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/

  -moz-transition-duration: 1.0s; /*Mozilla Animation duration*/

  -o-transition-duration: 1.0s; /*Opera Animation duration*/

  transition:1.0s;

  }

.sidebar .PopularPosts ul li img:hover {

  -webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/

  -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/

  -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/

  transform:scale(1.06);

  overflow: hidden;

  }

.sidebar .PopularPosts .item-title {

  bottom:0;

  left: 0;

  right: 0;

  padding-bottom: 0;

  position: absolute;

  z-index: 999;

 }

.sidebar .PopularPosts .item-title a {

  background: rgba(32, 32, 32, 0.77);

  color: #FFFFFF;

  display: block;

  font-size: 16px;

  font-weight: bold;

  line-height: normal;

  padding: 10px 0px 5px 10px;

  text-transform: capitalize;

  transition: all .4s ease-in-out;

}

.sidebar .popular-posts ul li:hover .item-title a {

  color: rgba(255, 255, 255, 1);

  background: rgba(231, 76, 60, 0.88);

  text-decoration: none;

  }

.sidebar .popular-posts ul li:before {

  background: rgba(255, 252, 8, 1);

  color: #000;

  content: counter(popcount, decimal);

  counter-increment: popcount;

  float: left;

  font-size: 14px;

  line-height: 20px;

  list-style-type: none;

  padding: 0px 8px 1px 1px;

  border-radius: 0px 0px 10px 0px;

  position: absolute;

  top: 0;

  z-index: 4;

  border: solid #FFF;

  border-width: 0px 2px 2px 0px;

  }

* تخصيص الإعدادات حتى تعمل بالشكل الصحيح معك :

يجب عليك تخصيص الإعدادات حتى تعمل معاك بالشكل المطلوب كما هو موضح بالصورة التالية  

         تم بحمد الله أى إستفسار حاضر بإذن الله       

تابع القراءة

بسم الله الرحمن الرحيم

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

معاينة الإضافة

شرح تركيب الإضافة:

1. تسجيل الدخول إلى الصفحة الرئيسية 
2. التخطيط > إضافة أداة جديدة
3. إختار أداة جافاسكريبت وضع بها الكود التالى

<div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-size:14px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=10;
var homePage="hadystore.blogspot.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script>

تخصيص الإضافة:

لتخصيص رابط مدونتك إستبدلة بهذا الكود "hadystore.blogspot.com"

وهذا الرقم "10" هو لتغيير عدد عرض المواضيع

والآن تم بحمد الله قم بحفظ الأداة

تابع القراءة

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

معاينة الإضافة

1. الدخول إلى حسابك فى بلوجر
2. تحرير القالب
3. ننصح بأخذ نسخة إحتياطية قبل التعديل على القالب
4. ثم نبحث عن هذا الكود ]]></b:skin> ونضع الكود التالى قبلة مباشرة / أعلاة

#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}

بعد ذلك تبحث عن عن هذا الوسم </head> وتضع الكود التالى بعدة مباشرة وتاكد أنك وضع الكود بين </head> و <body>

<div id='scroll'></div>

• هذة هى الخطوة الأخيرة كود الجافا الذى سيظهر النسبة المئوية بشكل دقيق إبحث عن هذا الكود </body> وضع الكود التالى قبلة مباشرة / أعلاة
  

<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script> 

إحفظ القالب الآن أصبح لديك النسبة المئوية لشريط التمرير إذا كان لديك أى إقتراح تفضل ضعه وشكراً لك 

تابع القراءة

السلام عليكم ورحمة الله وبركاتة

متابعين مدونة هادى ستور الكرام سنشرح لكم اليوم إضافة تدوينات ذات صلة اسفل المواضيع بشكل جديد وجذاب مع إضافة صورة مصغرة للمواضيع وهذة الإضافة مهمة ومفيدة جداً للزائر لانها تعرض التدوينات المرتبطة بنفس القسم والآن مع شرح تركيب الإضافة ومعاينتها .

معاينة الإضافة

 

1. ننصح بأخذ نسخة إحتياطية للقالب قبل أى تعديل
2. إضغط على تحرير HTML 
3. إبحث عن ]]></b:skin>  وضع الكود التالى قبلة مباشرة

        /* hadystore Thumbnail Related Posts With ToolTips --- */
        .related-post .post-thumbnail {
         z-index: 1;
         position: relative;
         width: 98px;
         height: 98px;
         margin: 0;
         display: block;
         border-right: 1px solid #fff;
         border-bottom: 1px solid #fff;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
         -webkit-box-shadow: inset 2px 2px 5px #444;
         -moz-box-shadow: inset 2px 2px 5px #444;
         box-shadow: inset 2px 2px 5px #555;
        }
        .related-post {
         float: left;
         position: relative;
         width: 98px;
         height: 98px;
         margin: 0 10px 10px 0;
         background: #F6F6F6;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
         }
        .related-post .related-post-title {
         display: none;
         float: left;
         background: #000;
         color: #fff;
         text-shadow: none;
         font-weight: bold;
         padding: 10px;
         position: absolute;
         top: -20px;
         left: 40px;
         z-index: 2;
         width: 200px;
         -webkit-box-shadow: 0 0 2px #444;
         -moz-box-shadow: 0 0 2px #444;
         box-shadow: 0 0 2px #444;
        }
        .related-post:hover .related-post-title {display: block;}

ثم نبحث عن سطر واحد فقط من الأسطر الآتية هذة مختلفة من قالب لآخر

<div class='post-footer-line post-footer-line-1'/>
      <div class='post-footer-line post-footer-line-2'/>
      <div class='post-footer-line post-footer-line-3'/>

بعد إيجاد السطر الصحيح فى قالبك ضع الكود التالى أسفلة مباشرة

    <div id='related-posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>ذات صلة</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;لا توجد تدويناتavailable</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiytKgK-Lh8ykm4-hMhFeh6JrmlhptuYLBruH3-XE4wS1vzwELsaj_wt0w-xK8PVSbJAvVm3k1khhSUNBZQ7e7a4lFCA55DuOiMaKy0DhNm0Y0FrGMe2K9UaKw2Q1KeWmVDGzemZnke_E0E/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]></script>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </b:if>
    </div>
    <div class='clear'/>

التخصيص:

1. اللون         خاص بطول وعرض الإضافة 
2. اللون         خاص بعدد عرض التدوينات

تم بحمد الله تعالى

تابع القراءة

السلام عليكم ورحمة الله وبركاتة

مدونة هادى ستورتقدم لكم إضافة رائعة جداً لتغذية RSS لتدويناتك يمكنك إضافتها بالسيد بار أو أى مكان آخر فى المدونة أضفة أينما شئت حيث توفر لك الإضافة عرض جميع المشاركات بشكل جميل وجذاب والآن مع شرح تركيب الإضافة ومشاهدة الإضافة
.

معاينة الإضافة

1.  اولاً ننصح بأخذ نسخة إحتياطية 
2. ادخل على تحرير القالب HTML
3. ونبدا البحث عن هذا الكود بإستخدام Ctrl+f ونبحث عن ]]></b:skin> ونضع الكود التالى قبلة

.MBL-container-header h1{font-weight:300; font-size:48px; text-align:center;}
 .MBL-container-header h2{font-size:30px; text-align:center;}     
  #MBLnewsticker1 ul { padding: 0px; }
.MBLnewsticker {
    width: 100%;
    overflow: hidden;
    height: 440px;
    position: relative;
    padding: 0 5px;
    box-sizing: border-box;
    margin: 0 auto;
    text-align:center;
}
.MBLnewsticker>ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
}
.MBLnewsticker>ul>li {
    display: none;
    width: 100%;
    height: 100px;
    background: #FFF;
    position: absolute;
    overflow: hidden
}
.MBLnewsticker>ul>li>.MBL-content {
    position: absolute;
    top: 0;
    bottom: 30px;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 5%;
    overflow: hidden;
}
.MBLnewsticker>ul>li>.MBL-content a {
    text-decoration: none;
}
.MBLnewsticker>ul>li>.MBL-content a:hover {
    text-decoration: underline;
}
.MBLnewsticker>ul>li>.MBL-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    padding: 5px;
    border-top: solid 1px #DDD;
}
.MBLnewsticker>ul>li>.MBL-info a {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #0F0;
    opacity: 0.2;
    cursor: pointer;
}
.MBLnewsticker>ul>li>.MBL-info a:hover {
    opacity: 1;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBHuhdQoYYyDPMYAsJ0eGtmW1PoJjrFIXhqLSSgL0jUB7hQnDbBaelrn6kkCMuMXCUxMUIDVew7dC_Gxi4Iy2XHxiTzfTB0zlAZT0otgcmaZz9HP3evlWGF1O9-3goBS4h01YvcBLhSYV/s1600/buttons-black.png) 0 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBHuhdQoYYyDPMYAsJ0eGtmW1PoJjrFIXhqLSSgL0jUB7hQnDbBaelrn6kkCMuMXCUxMUIDVew7dC_Gxi4Iy2XHxiTzfTB0zlAZT0otgcmaZz9HP3evlWGF1O9-3goBS4h01YvcBLhSYV/s1600/buttons-black.png) -20px 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBHuhdQoYYyDPMYAsJ0eGtmW1PoJjrFIXhqLSSgL0jUB7hQnDbBaelrn6kkCMuMXCUxMUIDVew7dC_Gxi4Iy2XHxiTzfTB0zlAZT0otgcmaZz9HP3evlWGF1O9-3goBS4h01YvcBLhSYV/s1600/buttons-black.png) -40px 0 no-repeat;
    float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglBHuhdQoYYyDPMYAsJ0eGtmW1PoJjrFIXhqLSSgL0jUB7hQnDbBaelrn6kkCMuMXCUxMUIDVew7dC_Gxi4Iy2XHxiTzfTB0zlAZT0otgcmaZz9HP3evlWGF1O9-3goBS4h01YvcBLhSYV/s1600/buttons-black.png) -60px 0 no-repeat;
    float: right;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgupe6bbrZOQ14ps3bDs4JV1QAkanb78dtDZ4oc2pRquYi1ooBA8ruIiufgBAKDDbse9PVwviKFA5VnsyFmizeafocs3NY8C69AGMmW0RzbfTgJ9euJ1lHta7hmjpNjdrR5g-4ChDGODY9x/s1600/buttons-white.png) 0 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgupe6bbrZOQ14ps3bDs4JV1QAkanb78dtDZ4oc2pRquYi1ooBA8ruIiufgBAKDDbse9PVwviKFA5VnsyFmizeafocs3NY8C69AGMmW0RzbfTgJ9euJ1lHta7hmjpNjdrR5g-4ChDGODY9x/s1600/buttons-white.png) -20px 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgupe6bbrZOQ14ps3bDs4JV1QAkanb78dtDZ4oc2pRquYi1ooBA8ruIiufgBAKDDbse9PVwviKFA5VnsyFmizeafocs3NY8C69AGMmW0RzbfTgJ9euJ1lHta7hmjpNjdrR5g-4ChDGODY9x/s1600/buttons-white.png) -40px 0 no-repeat;
    float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgupe6bbrZOQ14ps3bDs4JV1QAkanb78dtDZ4oc2pRquYi1ooBA8ruIiufgBAKDDbse9PVwviKFA5VnsyFmizeafocs3NY8C69AGMmW0RzbfTgJ9euJ1lHta7hmjpNjdrR5g-4ChDGODY9x/s1600/buttons-white.png) -60px 0 no-repeat;
    float: right;
}
.MBLnewsticker>ul>li>.MBL-info span {
    position: absolute;
    left: 80px;
    right: 30px;
    text-align: center;
    opacity: 0.4;
    z-index: 0;
    font-size: 13px;
    cursor: default;
}
.MBLnewsticker>div {
    width: 50px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    opacity: 0.3;
}
.MBLnewsticker>div:hover {
    opacity: 1;
}
.MBLnewsticker>div.MBL-top-arrow {
    top: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIPKgN-lt4QhpxnGudwzN5Hikas27nUwdFCIph1OQdT3TOpBxKI-Ceg83afGPDsVPfh-PWAhPmie0dTRVwdidVe2rgGig3Rx6m0znxyqYfBaVu52yQnThsafDr7UXnPmBi9O2BIdUN_pKA/s1600/arrows-black.png) top no-repeat;
}
.MBLnewsticker>div.MBL-bottom-arrow {
    bottom: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIPKgN-lt4QhpxnGudwzN5Hikas27nUwdFCIph1OQdT3TOpBxKI-Ceg83afGPDsVPfh-PWAhPmie0dTRVwdidVe2rgGig3Rx6m0znxyqYfBaVu52yQnThsafDr7UXnPmBi9O2BIdUN_pKA/s1600/arrows-black.png) bottom no-repeat;
}
.MBLnewsticker .MBL-top0 {
    -ms-transform: scale(0.80);
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.85;
    top: 0;
    z-index: 1;
    display: block;
}
.MBLnewsticker .MBL-top1 {
    -ms-transform: scale(0.87);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.9;
    top: 20px;
    z-index: 2;
    display: block;
}
.MBLnewsticker .MBL-top2 {
    -ms-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0.95;
    top: 45px;
    z-index: 3;
    display: block;
}
.MBLnewsticker .MBL-active {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    top: 75px;
    z-index: 10;
    display: block;
}
.MBLnewsticker .MBL-bottom2 {
    -ms-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0.95;
    top: 105px;
    z-index: 6;
    display: block;
}
.MBLnewsticker .MBL-bottom1 {
    -ms-transform: scale(0.87);
    -webkit-transform: scale(0.90);
    transform: scale(0.90);
    opacity: 0.9;
    top: 130px;
    z-index: 5;
    display: block;
}
.MBLnewsticker .MBL-bottom0 {
    -ms-transform: scale(0.80);
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.85;
    top: 150px;
    z-index: 4;
    display: block;
}
.MBL-easing2 {
    transition: .25s linear;
    -moz-transition: .25s linear;
    -webkit-transition: .25s linear;
}
.MBL-easing li {
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
}
.MBL-radius li {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.MBL-radius2 li {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.MBL-shadow li {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
    -moz-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
    box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
}
.MBL-shadow-big {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
} 

•   والآن نبحث عن هذا الكود </head> ونضع الكود التالى قبلة مباشرة

<script type='text/javascript'>
/*<![CDATA[*/
(function(e) {
    $.fn.MBLnewsticker = function(e) {
        var t = {
            width: "100%",
            modulid: "MBLnewsticker",
            autoplay: true,
            timer: 3e3,
            itemheight: 130,
            infobarvisible: true,
            btnfacebook: true,
            btntwitter: true,
            btngoogleplus: true,
            btnlinkbutton: true,
            btnlinktarget: "_blank",
            pagecountvisible: true,
            buttonstyle: "black",
            pagenavi: true,
            pagenavistyle: "black",
            feed: false,
            feedcount: 100
        };

        var e = $.extend(t, e);
        return this.each(function() {
            function o() {
                function o() {
                    $(e.modulid + ">div").css({
                        left: ($(e.modulid).width() - 30) / 2
                    })
                }
                function u() {
                    $(e.modulid + " ul li").eq(r[0]).addClass("MBL-top0");
                    $(e.modulid + " ul li").eq(r[1]).addClass("MBL-top1");
                    $(e.modulid + " ul li").eq(r[2]).addClass("MBL-top2");
                    $(e.modulid + " ul li").eq(r[3]).addClass("MBL-active");
                    $(e.modulid + " ul li").eq(r[4]).addClass("MBL-bottom2");
                    $(e.modulid + " ul li").eq(r[5]).addClass("MBL-bottom1");
                    $(e.modulid + " ul li").eq(r[6]).addClass("MBL-bottom0")
                }
                function a() {
                    t--;
                    if (t < 0) t = n;
                    l()
                }
                function f() {
                    t++;
                    if (t == n + 1) t = 0;
                    l()
                }
                function l() {
                    $(e.modulid + " ul li").attr("class", "");
                    if (t == 0) {
                        r[0] = n - 2;
                        r[1] = n - 1;
                        r[2] = n;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    } else if (t == 1) {
                        r[0] = n - 1;
                        r[1] = n;
                        r[2] = t - 1;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    } else if (t == 2) {
                        r[0] = n;
                        r[1] = t - 2;
                        r[2] = t - 1;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    } else if (t == n) {
                        r[0] = n - 3;
                        r[1] = n - 2;
                        r[2] = n - 1;
                        r[3] = t;
                        r[4] = 0;
                        r[5] = 1;
                        r[6] = 2
                    } else if (t == n - 1) {
                        r[0] = n - 4;
                        r[1] = n - 3;
                        r[2] = n - 2;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = 0;
                        r[6] = 1
                    } else if (t == n - 2) {
                        r[0] = n - 5;
                        r[1] = n - 4;
                        r[2] = n - 3;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = 0
                    } else {
                        r[0] = t - 3;
                        r[1] = t - 2;
                        r[2] = t - 1;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    }
                    u()
                }
                $(e.modulid + " ul li").css({
                    height: e.itemheight,
                    background: e.itembgcolor,
                    border: "solid 1px " + e.bordercolor,
                    color: e.titlecolor,
                    "font-size": e.titlefontsize
                });
                $(e.modulid + " ul li").each(function(t, r) {
                    if (e.infobarvisible) {
                        i = '<div class="MBL-info" style="background:' + e.infobgcolor + "; border-color:" + e.bordercolor + ';">';
                        if (e.btnfacebook) i = i + '<a data-type="facebook" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-facebook-' + e.buttonstyle + '"></a>';
                        if (e.btntwitter) i = i + '<a data-type="twitter" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-twitter-' + e.buttonstyle + '"></a>';
                        if (e.btngoogleplus) i = i + '<a data-type="google" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-google-' + e.buttonstyle + '"></a>';
                        if (e.pagecountvisible) i = i + "<span>" + ($(this).index() + 1) + " / " + (n + 1) + "</span>";
                        if (e.btnlinkbutton) i = i + '<a href="' + $(this).find(".MBL-content").attr("data-link") + '" class="MBL-easing2 MBL-link-' + e.buttonstyle + '" target="' + e.btnlinktarget + '"></a>';
                        i = i + "</div>"
                    }
                    $(this).append(i)
                });
                $(e.modulid + " ul li .MBL-content").find("a").css({
                    color: e.contentlinkcolor
                });
                $(e.modulid + " ul li").find(".MBL-info").find("a").click(function(e) {
                    if ($(this).attr("data-type") == "facebook") {
                        window.open("http://www.facebook.com/sharer.php?u=" + encodeURIComponent($(this).attr("data-url")) + "&t=" + encodeURIComponent($(this).attr("data-text")), "sharer", "toolbar=0,status=0,width=626,height=436");
                        return false
                    } else if ($(this).attr("data-type") == "twitter") {
                        window.open("http://twitter.com/share?text=" + $(this).attr("data-text") + "&url=" + $(this).attr("data-url"), "sharer", "toolbar=0,status=0,width=626,height=436");
                        return false
                    } else if ($(this).attr("data-type") == "google") {
                        window.open("https://plus.google.com/share?url=" + $(this).attr("data-url") + "&title=" + $(this).attr("data-text"), "sharer", "height=550,width=525,left=100,top=100,menubar=0");
                        return false
                    }
                });
                $(e.modulid + " ul li").click(function(e) {
                    t = $(this).index();
                    l()
                });
                if (e.pagenavi) {
                    $(e.modulid).append('<div class="MBL-top-arrow"></div><div class="MBL-bottom-arrow"></div>');
                    $(e.modulid).css({
                        height: e.itemheight + 200,
                        padding: "20px 10px",
                        width: e.width
                    })
                } else {
                    $(e.modulid).css({
                        height: e.itemheight + 160,
                        padding: "0px 10px",
                        width: e.width
                    })
                }
                o();
                $(window).resize(function(e) {
                    o()
                });
                u();
                $(e.modulid + ">div").click(function(e) {
                    if ($(this).attr("class") == "MBL-top-arrow") a();
                    else f()
                });
                if (e.autoplay) {
                    s = setInterval(function() {
                        f()
                    }, e.timer);
                    $(e.modulid).hover(function() {
                        clearInterval(s)
                    }, function() {
                        s = setInterval(function() {
                            f()
                        }, e.timer)
                    })
                }
            }
            function u() {
                $.ajax({
                    type: "GET",
                    url: document.location.protocol + "//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + e.feedcount + "&callback=?&q=" + encodeURIComponent(e.feed),
                    dataType: "json",
                    async: false,
                    success: function(i) {
                        veri = i.responseData.feed.entries;
                        news = "";
                        $(veri).each(function(e, t) {
                            if (e == 0) news = news + '<li class="MBL-active"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == 1) news = news + '<li class="MBL-bottom2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == 2) news = news + '<li class="MBL-bottom1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == 3) news = news + '<li class="MBL-bottom0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == veri.length - 1) news = news + '<li class="MBL-top2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == veri.length - 2) news = news + '<li class="MBL-top1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else if (e == veri.length - 3) news = news + '<li class="MBL-top0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
                            else news = news + '<li><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"
                        });
                        $(e.modulid + " ul").html("");
                        $(e.modulid + " ul").append(news);
                        n = veri.length - 1;
                        r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];
                        o()
                    },
                    error: function() {
                        $(e.modulid + " ul").html('<li class="MBL-active"><div class="MBL-content">خطأ رجاء أعد المحاولة فى وقت لاحق</div></li>')
                    }
                })
            }
            e.modulid = "#" + $(this).attr("id");
            var t = 0;
            var n = $(e.modulid + " ul li").length - 1;
            var r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];
            var i = "";
            var s = e.modulid;
            if (e.feed != false) {
                $(e.modulid + " ul").html("");
                $(e.modulid + " ul").append('<li class="MBL-active"><div class="MBL-content">إنتظر تحميل التغذية ...</div></li>');
                u()
            } else {
                o()
            }
        })
    }
})(jQuery)
/*]]>*/
</script>

•  والآن مع الخطوة الأخيرة سنقوم بالضغط على تخطيط من لوحة التحكم وإضافة اداة javascript وضع بها الكود التالى

<div class="MBLnewsticker MBL-radius MBL-shadow MBL-easing" id="MBLnewsticker1">
<ul> <li>
 <div class="MBL-content" data-link="http://hadystore.blogspot.com/">Powered by hady store (Don't remove or Widget will not work).</div>
</li></ul>
 </div>  
<script>
 $(document).ready(function(){
  $("#MBLnewsticker1").MBLnewsticker({
feed:"http://feeds.feedburner.com/hadystore/hmBDo",
width:"100%",
contentlinkcolor: "#766D6D",
timer:5000,
titlecolor: "#333",
titlefontsize: "16px",
itembgcolor: "#FFF",
contentlinkcolor: "#766D6D",
infobgcolor: "#f2f2f2",
bordercolor: "#DDD"
});
  });
</script>

تخصيص الإضافة

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

بعد ذلك إضغط (حفظ) انت الآن تتمتع بالإضافة نتمنى ان نكون إستفدت من الشرح شارك التدوينة عن طريق الأزرار أسفل التدوينة وشكراً لك . 

تابع القراءة