أزرار التحميل والمعاينة بشكل مميز ومتحرك

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

لتركيب الشكل كل ما عليك هو تحرير القالب والبحث عن وسم  ]]></b:skin>

ثم فوقه ضع الكود التالي :

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

الآن تكون قد ركبت الكود المسؤول عن شكل الأزرار تبقى لديك خطوة واحدة فقط وهي عند كتابة أي موضوع وتريد وضع الازرار في الموضوع اتبع الخطوات التالية :

أولا عند كتابة الموضوع حدد المكان الذي تريد ان تضهر فيه الازرار هل في الاسفل ام في الوسط يكفي فقط ان تكتب كلمة "أزررررررار" مثلا في المكان الذي تريد أن تضع فيه الازرار وبعد ان تنتهي من الموضوع قم بتحويل المحرر من تأليف إلى HTML ثم قم بالبحث عن الكلمة التي كتبتها في البداية وأٌقصد هذه الكلمة "أزررررررار" بعد أن تجدها ضع مكانها الكود التالي :

<div id="wrap">
<a href="رابط المعاينة" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">معاينة</span>
  <span class="title-hover">إضغط هنا</span>
</a>
<a href="رابط التحميل" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">تحميل</span>
  <span class="title-hover2">إضغط هنا</span>
</a>
</div>

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

تغيير شكل التسميات السحابية لشكل جذاب ومميز

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

كما ترون في الصورة الشكل مميز وجذاب ويتميز بـ :

1. ألوان متعددة لكل قسم معين
2. دمج عداد المواضيع في كل قسم بشكل مميز
3. سهلة التركيب ولن تأخد منك أكثر من دقيقة

لتركيب الشكل كل ما عليك فعله هو تحرير القالب ثم البحث عن الوسم التالي :

]]></b:skin>

ثم فوقه ضع هذا الكود :

.cloud-label-widget-content {
 text-align: right;
 }
 .label-size {
 background: #5498C9;
 display: block;
 float: right;
 margin:0 0 3px 3px;
 color: #fff;
 font-size: 11px;
 text-transform: uppercase;
 }
 .label-size:nth-child(1) {
 background: #F53477;
 }
 .label-size:nth-child(2) {
 background: #89C237;
 }
 .label-size:nth-child(3) {
 background: #44CCF2;
 }
 .label-size:nth-child(4) {
 background: #01ACE2;
 }
 .label-size:nth-child(5) {
 background: #94368E;
 }
 .label-size:nth-child(6) {
 background: #A51A5D;
 }
 .label-size:nth-child(7) {
 background: #555;
 }
 .label-size:nth-child(8) {
 background: #f2a261;
 }
 .label-size:nth-child(9) {
 background: #00ff80;
 }
 .label-size:nth-child(10) {
 background: #b8870b;
 }
 .label-size:nth-child(11) {
 background: #99cc33;
 }
 .label-size:nth-child(12) {
 background: #ffff00;
 }
 .label-size:nth-child(13) {
 background: #40dece;
 }
 .label-size:nth-child(14) {
 background: #ff6347;
 }
 .label-size:nth-child(15) {
 background: #f0e68d;
 }
 .label-size:nth-child(16) {
 background: #7fffd2;
 }
 .label-size:nth-child(17) {
 background: #7a68ed;
 }
 .label-size:nth-child(18) {
 background: #ff1491;
 }
 .label-size:nth-child(19) {
 background: #698c23;
 }
 .label-size:nth-child(20) {
 background: #00ff00;
 }
 .label-size a, .label-size span {
 display: inline-block;
 color: #fff !important;
 padding: 4px 10px;
 font-weight: bold;
 }

 .label-count {
 white-space: nowrap;
 padding-left: 3px;
 margin-right: -3px;
 background: #333;
 color: #fff ;
 }

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

الشكل الجديد لأرشيف المدونة الخاص بالصفحة المستقلة

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

معاينة مباشرة للإضافة : هنـــــــــــــــــــــــــــــــــــا

كما ترون في الصورة الشكل مميز جدا ويتميز بـ :

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

والآن حان وقت شرح طريقة التركيب

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

 <div dir="rtl" style="text-align: right;" trbidi="on">
<style scoped="" type="text/css">
#toc-outer {
  color:black;
  font:normal 11px/15px Arial,Sans-Serif;
  height:auto;
  margin:0 auto;
  overflow:hidden;
  padding:0;
  text-align:right;
}

#loadingscript {
  padding:0px 0px;
  height:37px;
  text-indent:-9999px;
  color:transparent;
  background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%;
}

.itemposts {
    float: right;
    height: auto;
    overflow: hidden;
    width: 47%;
    box-shadow: 1px 1px 5px #C3C3C3;
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #FFF;
    margin: 3px 5px 8px;
    padding: 0px 3px;
}

.itemposts h6 {
    border-bottom: 1px solid #CCC;
    color: #333;
    height: 15px;
    overflow: hidden;
    text-transform: none;
    margin: 0px 0px 5px;
    padding: 2px 6px !important;
    font:bold 13px GE SS two medium;

}

.itemposts h6 a:hover {
  color:#38f;
  text-decoration:none;
}

.itemposts img {
  background-color:#fff;
  border:1px solid #ccc;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  float:right;
  height:65px;
  margin:0 0 5px 7px;
  padding:3px;
  width:65px;
  z-indent:99999px;
}

.itemposts .iteminside {
  font-family: GE SS two medium;
}
   

.itemposts .itemfoot {
    border-top: 1px solid #CCC;
    clear: both;
    overflow: hidden;
    padding: 4px 5px;
    font:12px GE SS two medium;
}

.itemposts .itemfoot a.itemrmore {
  color:#333;
  float:left;
  font-weight:bold;
  text-decoration:none;
}

.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}

#itempager {
  clear:both;
  padding:10px 0;
}

#pagination,

#totalposts {
  color:#000;
  display:block;
  font:12px GE SS two medium;
  margin-bottom:10px;
  text-align:center;
  padding:0;
}

#pagination span, #pagination a {
    color: #FFF;
    display: inline;
    margin: 0px 1px;
    padding: 2px 5px;
    text-indent: 0px;
    background-color: #068BC9;
    background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);
    border: 1px solid #3161C2;
    text-decoration: none;
    border-radius: 10px;
}
#pagination a:hover {background-color:#333}

#pagination span.actual {background-color:black}

#pagination span.hidden {display:none}</style>
<script>
var showPostDate   = false,
    showComments   = false,
    idMode         = false,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "تحميل...",
    totalPostLabel = "عدد المقالاات:",
    jumpPageLabel  = "الصفحة",
    commentsLabel  = "التعليقات",
    rmoreText      = "أكمل المقال",
    prevText       = "السابق",
    nextText       = "التالي",
    siteUrl        = "http://www.arabe-eye.com/",
    postPerPage   = 22,
    numChars       = 150,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="http://yourjavascript.com/1183493241/rifan-pagination.js"></script></div>

بعد ذالك غير رابط مدونتي برابط مدونتك

للتحكم في عدد المواضيع التي تريدها ان تضهر فقط غير القيمة 22 إلى القيمة التي تناسبك

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

إضافة خلفية السحاب المتحرك لمدونات بلوجر

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

مثال مباشر

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

أول شيئ إبحث عن كلمة body{ أو body {

إن لم تجدها إبحت فقط عن كلمة body  التي توجد وسط وسم <b:skin></b:skin>

وذالك لتغيير الخلفية الحالية للمدونة بالخلفية الجديدة المهم بعد ان تجده غير كود الخلفية والذي يكون على هذا الشكل مثلا background:#c1deee هذا لو كان لون ويمكن أن يكون هكذا

background:#c1deee url(http://i.imgur.com/JD8mWs7.png);

هذا لو كانت الخلفية عبارة عن صورة

المهم سواءا كان لونا فقط أو خلفية غيره بالكود التالي الخاص بالخلفية الجديدة

background:#c1deee url(http://i.imgur.com/JD8mWs7.png) repeat-x scroll top left;

بعذ ذالك آخر خطوة هي البحث عن الوسم </head> ثمو فوقه ضع الكود التالي :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/><script charset='utf-8' type='text/javascript'>var scrollSpeed=70;var step=1;var current=0;var imageWidth=2247;var headerWidth=800;var restartPosition=-(imageWidth - headerWidth);function scrollBg(){current -=step;if (current==restartPosition){current=0;}$(&#39;body&#39;).css(&quot;background-position&quot;,current+&quot;px 0&quot;);}var init=setInterval(&quot;scrollBg()&quot;, scrollSpeed)</script>

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

وإن كان لديك استفسار ىخر خارج الموضوع يمكنك زيارة صفحة الدعم الفني

وفقنا الله وإياكم لما يحب ويرضى

خاصية الرجوع لأعلى الصفحة لمدونات بلوجر بشكلين

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

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

ساتركك تكتشف تأثير كل واحد بنفسك

لتركيب خاصية الصعود لأعلى الصفحة قم بعمل الخطوات التالية :

أولا إضافة مكتبة الخطوط المميزة وستفيدك في أشياء اخرى إن شاء الله

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

ضعها فوق وسم </head>

تانيا قم بنسخ الكود التالي :

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

ثم ضعه فوق وسم ]]></b:skin>

بعد ذالك ناتي لإختيار الشكل الذي يناسب ولانه ليس لدي الوقت لعمل معاينة حية يمكنك تجريب كل واحد على حدا وإختيار الشكل الذي يناسبك

الشكل الاول

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

الشكل التاني

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

بعد ان تختار الشكل ضعه مباشرة فوق وسم </body>

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

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

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

توجد ثلاثة أشكال للإضافة يمكنك ان تختار الشكل الذي تريد ويناسب مدونتك

الشكل الاول:

الشكل التاني:

الشكل الثالث:

من مميزات الإضافة :

1. شكل مميز وجداب والوان جميلة
2. مؤقت لكم تبقى للصلاة القادمة كي تجهز نفسك للذهب للمسجد
3. ما إن يحين وقت الآدان حتى تسمع المؤدن يؤدن للصلاة حتى لو غفلت عن الوقت يتم تذكيرك

بالنسبة لطريقة التركيب فأول شيئ تفضل بالدخول للموقع التالي

بعد ذالك إتبع الشرح الموجود في الصورة التالية :

شرح طريقة التركيب

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

أرشيف المدونة بشكل مميز وخصائص جديدة

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

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

على سبيل المثال :

1. إمكانية تحديد القسم الذي ترغب في البحث فيه
2. إمكانية تحديد المواضيع الجديدة او المحدثة
3. نتائج بصور مصغرة وملخص من الموضوع
4. زر تحميل المزيد دون غعادة تحميل الصفحة

ماذا تريد بعد ^_^

الآن طريقة التركيب هي كالتالي قم بإضافة صفحة جديدة ثم اعطها إسما مناسبا فليكن 'أرشيف المدونة' مثلا ثم بعد ذالك قم بتعيير المحرر من تأليف إلى HTML وبعدها ضع الكود التالي :

<div dir="rtl" style="text-align: right;" trbidi="on">
<style type="text/css">
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #31353e;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#D64D52;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #3d464f;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#3d464f;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #3d464f;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#5687B8;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:#eee;
}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#222;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#111;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#777;
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
 url: "http://www.arabe-eye.com/",
 feedNum: 5,
 labelName: false,
 numChars: 100,
 thumbWidth: 40,
 navText: "المزيد &#9660;",
 frontText: "الى أعلى &uArr;",
 resetToc: "Reset",
 noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifC6Yz1kaHgFa1eTthBpHO_KMkkAuQ2Ucgg7mZiGpDJIFzUAzdVH9H5IWioi8Ccqm293xGCCJS0Gpvtyn30cMu2UWvPWTfdPoUkgCxAr1tiA13s_2FZjh5w9ybSB3UCha8ONUIspbzmz8/s1600/no+images+Variasi+Blogger.jpeg",
 loading: "<span>تحميل...</span>",
 searching: "<span>تحميل...</span>",
 noResult: "غير موجود !!"
};
//]]>
</script>

<br />
<div id="table-outer">
&nbsp; <br />
<table border="1" style="text-align: left;">
        <tbody>
<tr>
                <td><label for="orderFeedBy">تصنيف المشاركات:</label>
                </td>
                <td><select id="orderFeedBy">
                        <option selected="" value="published">التدوينات الجديدة</option>
                        <option value="updated">التدوينات المحذتة</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="labelSorterSelect">تصنيف المشاركات حسب الاقسام:</label>
                </td>
                <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">تحميل...</option></select></span>
                </td>
            </tr>
<tr>
                <td><label for="feed-q-box">البحث المباشر:</label>
                </td>
                <td><form id="postSearcher">
<input id="feed-q-box" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<div style="text-align: left;">
<br /></div>
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script type="text/javascript">

// This is the container template that will be used to insert post template, pagination and the posts count

function getID(a) {
 return document.getElementById(a);
}

var head = document.getElementsByTagName('head')[0],
 tocContainer = getID('feedContainer'),
 feedNav = getID('feedNav'),
 orderByer = getID('orderFeedBy'),
 labelSorter = getID('labelSorter'),
 input = getID('postSearcher').getElementsByTagName('input')[0],
 resultDesc = getID('resultDesc'),
 nextPage, feedArchive, startPage = 0, filter = 0;

function showLabels(json) {
 var cat = json.feed.category, skeleton = "<select id='labelSorter' onchange='changeSort(this.value);'><option value='' selected disabled>الأقسام...</option>";
 for (var i = 0, cen = cat.length; i < cen; i++) {
  skeleton += "<option value='" + decodeURIComponent(cat[i].term) + "'>" + cat[i].term.toUpperCase() + "</option>";
 }
 skeleton += "</select>";
 labelSorter.innerHTML = skeleton;
}

function showFeedList(json) {
 var entries = json.feed.entry, postTitle, postUrl, postImage, postContent, commentNum, skeleton = "";
 if (json.feed.entry) {
  for (var i = 0; i < tocConfig.feedNum; i++) {
   if (i == json.feed.entry.length) {
    break;
   }
   postTitle = entries[i].title.$t;
   for (var j = 0, jen = entries[i].link.length; j < jen; j++) {
    if (entries[i].link[j].rel == 'alternate') {
     postUrl = entries[i].link[j].href;
     break;
    }
   }
   for (var k = 0, ken = json.feed.link.length; k < ken; k++) {
    if (json.feed.link[k].rel == 'next') {
     nextPage = json.feed.link[k].href;
    }
   }
   for (var l = 0, len = entries[i].link.length; l < len; l++) {
    if (entries[i].link[l].rel == 'replies' && entries[i].link[l].type == 'text/html') {
     commentNum = entries[i].link[l].title;
     break;
    }
   }
   postContent = ("summary" in entries[i]) ? entries[i].summary.$t.replace(/<br ?\/?>/ig," ").replace(/<(.*?)>/g,"").replace(/<iframe/ig,"").substring(0,tocConfig.numChars) : "";
   postImage = ("media$thumbnail" in entries[i]) ? entries[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "\/s" + tocConfig.thumbWidth + "-c") : tocConfig.noImage.replace(/\/s[0-9]+\-c/, "\/s" + tocConfig.thumbWidth + "-c");
   skeleton += "
<li><div class='inner'>
" +
   "<a href='" + postUrl + "' target='_blank'><img style='width:" + tocConfig.thumbWidth + "px;height:" + tocConfig.thumbWidth + "px;' src='" + postImage + "' alt='" + postTitle + "' /></a>" +
   "<a class='toc-title' href='" + postUrl + "' target='_blank'>" + postTitle + "</a><strong> - (" + commentNum + ")</strong><br>" +
   "<div class='news-text'>
" + postContent + "&hellip;<br style='clear:both;'></div>
" +
   "</div>
</li>
";
  }
  resultDesc.innerHTML = (input.value !== '' && filter == 'search') ? "<span>Hasil penelusuran untuk kata kunci <strong>&#8220;" + input.value + "&#8221;</strong> (" + json.feed.openSearch$totalResults.$t + " Temuan)</span>" : "Total: " + json.feed.openSearch$totalResults.$t + " Artikel";;
  feedContainer.innerHTML += (nextPage) ? skeleton : "";
  if (nextPage && filter != 'search') {
   skeleton = (filter !== 0) ? "<a href='javascript:initResult(2);' class='next'>" + tocConfig.navText + "</a>" : "<a href='javascript:initResult(1);' class='next'>" + tocConfig.navText + "</a>";
  } else {
   skeleton = "<a href='#top' class='front'>" + tocConfig.frontText + "</a>";
  }
  feedNav.innerHTML = skeleton;
  input.value = '';
  labelSorter.getElementsByTagName('select')[0].removeAttribute('disabled');
  orderByer.removeAttribute('disabled');
 } else {
  if (filter == 'search') {
   feedContainer.innerHTML = "";
   resultDesc.innerHTML = "";
   alert(tocConfig.noResult);
  }
  feedNav.innerHTML = "<a href='#top' class='front'>" + tocConfig.frontText + "</a>";
 }
}

function initResult(archive) {
 var p, param;
 if (archive == 1) {
  p = nextPage.indexOf("?");
  param = nextPage.substring(p);
 } else if (archive == 2) {
  p = nextPage.indexOf("?");
  param = nextPage.substring(p).replace(/\?/, '/-/' + filter + '?');
 } else {
  param = "?start-index=1&max-results=" + tocConfig.feedNum + "&orderby=" + orderByer.value + "&alt=json-in-script";
 }
 param += "&callback=showFeedList";
 updateScript(param);
}

function removeScript() {
 var old = getID('temporer-script');
 old.parentNode.removeChild(old);
}

function buildLabels() {
 var s = document.createElement('script');
  s.type = "text/javascript";
  s.src = tocConfig.url + "/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels";
 head.appendChild(s);
}

function updateScript(tail) {
 if (startPage == 1) {
  removeScript();
  startPage = 1;
 }
 feedNav.innerHTML = tocConfig.loading;
 feedArchive = (tocConfig.labelName !== false) ? tocConfig.url + "/feeds/posts/summary/-/" + tocConfig.labelName + tail : feedArchive = tocConfig.url + "/feeds/posts/summary" + tail;
 var toc_script = document.createElement('script');
  toc_script.type = 'text/javascript';
  toc_script.src = feedArchive;
  toc_script.id = 'temporer-script';
 head.appendChild(toc_script);
}

function changeSort(label) {
 removeScript();
 tocContainer.innerHTML = "";
 resultDesc.innerHTML = "Menghitung artikel&hellip;";
 feedNav.innerHTML = tocConfig.loading;
 var newScript = document.createElement('script'),
  labSorter = labelSorter.getElementsByTagName('select')[0],
  l = (label !== 0) ? '/-/' + label : "";
 newScript.type = 'text/javascript';
 newScript.id = 'temporer-script';
 newScript.src = tocConfig.url + '/feeds/posts/summary' + l + '?alt=json-in-script&max-results=' + tocConfig.feedNum + '&orderby=' + orderByer.value + '&callback=showFeedList';
 head.appendChild(newScript);
 labSorter.disabled = true;
 orderByer.disabled = true;
 filter = label;
}

function searchPost() {
 removeScript();
 tocContainer.innerHTML = "";
 resultDesc.innerHTML = "";
 feedNav.innerHTML = tocConfig.searching;
 var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.id = 'temporer-script';
  newScript.src = tocConfig.url + '/feeds/posts/summary?alt=json-in-script&orderby=published&q=' + input.value + '&max-results=9999&callback=showFeedList';
 head.appendChild(newScript);
 filter = 'search';
 return false;
}

getID('postSearcher').onsubmit =  searchPost;

orderByer.onchange = function() {
 changeSort(0);
}
initResult(0);
buildLabels();
</script></div>

ثم قم بتغيير رابط مدونتي برابط مدونتك

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

هذا كل شيئ إخواني بالتوفيق للجميع

سلايد شو إحترافي ذاتي التشغيل لمدونات بلوجر (سهل التركيب)

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

من مميزات السلايد شو :

1. سلايد شو ذاتي التشغيل أي يعمل تلقائيا
2. سلايد شو متجاوب يتغير حسب عرض المكان الذي وضع فيه
3. سلايد شو سهل التركيب
4. جميل وأنيق وخفيف لا يثقل المدونة

حسنا بعد رؤية مميزات السلايد شو حان وقت التركيب

كل ما عليك فعله هو إنشاء إضافة جديدة ثم ضع فيها الكود التالي :

<style>
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:21px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:right;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:droid arabic kufi;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:Electrolize,ge_ss_threeregular;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:Electrolize,ge_ss_threeregular;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.arabe-eye.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false

});
});
//]]>
</script>

ثم قم بتغيير رابط مدونتي برابط مدونتك وتكون قد إنتهيت من تركيب السلايد شو في مدونتك هذا كل شيئ خطوة بسيطة وسهلة يستطيع الجميع تطبيقها

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

طريقة إنشاء بادج خاص بحسابك في جوجل بلس

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

والجميل أيضا هو سهولة تغيير شكلها والتحكم في حجمها لكي تتناسب مع موقعك وتضهر بشكل لائق وجداب

يوجد شكلين لهذه الأضافة الشكل الكبير والشكل الصغير ويمكنك التحكم بعرض كل شكل بكل سهولة أولا صورة من الشكل الأول :

 

الشكل التاني النسخة المصغرة

 

وكما قلت في السابق يمكنك إنشاء واحدة سواءا بحسابك الشخصي او خاصة بموقعك فمثلا يمكن لأصحاب المدونات الشخصية ان يصمم واحدة خاصة بحسابه الشخصي ويمكن لأصحاب المدونات التقنية ان يصمم واحدة خاصة بمدونتك للحصول على متابعين ^_^

للحصول على هذه الإضافة المميزة أدخل للرابط التالي :

Web Badge

ثم اتبع الخطوات التالية :

بعد ان تنتهي من شكل الإضافة فقط قم بنسخ الكود الذي يضهر أسفل الإضافة وضعه في أداة HTML/JavaScript جديدة من التخطيط وتكون قد انتهيت

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

أخبر زوارك ما تريد بهذه الإضافة المميزة

أخبر زوارك ما تريد بهذه الإضافة المميزة

قد ترغب في بعض الاحيان كتابة رسالة موجهة لزوار مدونتك أو تريد ان تهنئهم بمناسبة ما أو تطلب مساعدتهم في شيئ ما

هذه الإضافة أفضل حل لفعل ذالك وإخبار زوارك بما تريد من مميزات الإضافة :

-ضاهرة وتابثة للزائر لكنها غير مزعجة ^_^

-شكل أنيق وألوان هادئة

-كتابة متحركة لشد إنتباه الزائر لقرائة ما كتبت

ماذا تريد أكثر من هذا وتركيبها سهل للغاية فقط إتبع الخطوات التالية :

أدخل للتخطيط ثم أظف أداة HTML/JavaScript ثم ضع فيه الكود التالي :

<style type="text/css">div.notice-banner{_position:absolute;position:fixed;text-align:center;z-index:99000}div.notice-banner-inner{-moz-transform:rotate(-45deg);-moz-transform-origin:50% 0;-ms-transform:rotate(-45deg);-ms-transform-origin:50% 0;-o-transform:rotate(-45deg);-o-transform-origin:50% 0;-webkit-transform:rotate(-45deg);-webkit-transform-origin:50% 0;_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );background: #f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));border:1px solid #aaa;color:#fff;font-family:'trebuchet ms',verdana,arial,sans-serif;font-size:16px;height:30px;left:-190px;opacity:0.9;padding:10px;text-align:center;top:110px;transform:rotate(-45deg);transform-origin:50% 0;width:600px;-moz-box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;box-shadow: 0 5px 5px -5px #999;}.notice-banner-text{-moz-border-radius:8px;-webkit-border-radius:8px;background-color:#fff;border:1px solid #aaa;border-radius:8px;height:28px;margin-right:15px;padding-left:10px;padding-right:10px;width:290px}</style><div class="notice-banner notice-banner-inner"><center><div class='notice-banner-text'><marquee onmouseover="this.stop();" onmouseout="this.start();" style="line-height:28px;color:#000;">أكتب رسالتك هنا</marquee></div></center></div>

ما يمكن تغييره في الكود واضخ وهو الرسالة التي تريد إضهارها في الإضافة

يمكنك كتابة أي رسالة ويمكن للرسالة ان تحتوي على رابط موقع او موضوع المهم غيره بما يناسبك

هذا كل شيئ اتمنى ان تعجبكم الاداة لا تنسوا مشاركة الموضوع وشكرا