إضافة أداة المشاركات الشائعة جديد 2013

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

 

 

                                                 

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

]]></b:skin>

بعد أن تجده قم بوضع هذا الكود قبله مباشرة
      

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

قم بحفظ التغييرات ومبروك عليك الإضافة الجميلة

.. Résumé bloggeradsenseo

إضافة أداتين "إضافة أداة" فوق / أسفل صندوق رسائل المدونة في مدونات بلوجر

                 

في أغلب الأحيان، و في أغلب قوالب بلوجر سواءا الرسمية أو التي يتم تحميلها من شبكة الأنترنيت تكون ذات مقسمة بطريقة قد يريد المستخدم إضافة أو حذف جزء معين منه.
لذلك أود اليوم  أن أقوم بشرح سهل و بسيط عن كيفية إضافة عمودين أو أداتين Sections "إضافة أداة" فوق صندوق رسائل المدونة و / أو تحته. بعد ذلك يمكنك إضافة ادوات جافا سكريبت HTML/Javascript كما تشاء.
بالضبط كما في الصورة التالية:

كما ترون سوف نقوم بإضافة أداتين فوق رسائل المدونة / تحت رسائل المدونة.

كالعادة و قبل أن نبدأ يجب علينا أخذ نسخة إحتياطية من القالب لتجنب أي خطأ قد يحصل

نذهب إلى قالب --> تحرير HTML --> متابعة و لا نقم بتوسيع قوالب عناصر واجهة  المستخدم.

باستعمال F3 أو ctrl+F نبحث عن الكود التالي:


<b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='false' title='Post sul blog' type='Blog'/> </b:section>


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


<div id='Widget1A' style='width: 47%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-1a' preferred='yes' style='float:left;'/> </div> <div id='Widget1B' style='width: 47%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-1b' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>


لإضافة عمودين / أداتي "إضافة أداة" تحت / أسفل صندوق رسائل المدونة نضع الكود التالي تحت / أسفل الكود الذي قمنا بالبحث عنه في الخطوة السابقة.


<div id='Widget2A' style='width: 47%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/> </div> <div id='Widget2B' style='width: 47%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2b' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>


النسبة المائوية لعرض الأدواة يمكن أن يكون بأي نسبة تريدون أي بالقياسات التي تريدونها، المهم أن يكون مجموعهما أقل من 100%. 

إذا ظهرت الأداتان فوق بعض فقم بتنقيص أو تصغير النسب المائوية / قياسات الأداتين حتى يظهرا جنبا إلى جنب.

أما إذا أردتم إضافة 3 أدوات "أضافة أداة" فيمكنكم الإعتماد على الكود التالي.



<div id='Widget2A' style='width: 31%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/> </div> <div id='Widget2B' style='width: 31%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2b' preferred='yes' style='float:left;'/> </div> <div id='Widget2C' style='width: 31%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2c' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>


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

.. Résumé bloggeradsenseo

اسهل طريقه لاضافة سلايد شو احترافي لمدونات بلوجر

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

 

كيفية اضافة هذه الاداه الى مدوناتكم

 انتقل إلى لوحة تحكم مدونتك

     HTML/Javascript   إختر "تخطيط" ثم إضافة أداة ثم اختر

   والآن الصق داخل المستطيل الكود التالي

<style type="text/css">
/* alb33dani.blogspot.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
   
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="رابط الصوره الاولى" alt="عنوان الموضوع الاول" /></a>
<a href="#"><img src="رابط الصوره الثانيه" alt="عنوان الموضوع الثاني" /></a>
<a href="#"><img src="رابط الصوره الثالثه"alt="عنوان الموضوع الثالث" /></a>
<a href="#"><img src="رابط الصوره الرابعه"alt="عنوالن الموضوع الرابع" /></a>
<a href="#"><img src="رابط الصوره الخامسه" alt="عنوان الموضوع الخامس"/></a>
</div>
</div>

• 
  
  
  
  عنوان الموضوع : استبدلها بعنوان الموضوع المراد عرضه في السلايد شو.
• رابط صورة الموضوع : استبدلها برابط صورة الموضوع المراد عرضه بالسلايد شو.
  # : استبدلها برابط الموضوع المراد عرضه بالسلايد شو. 
  700px : لتغيير عرض السلايد شو .
  306px:لتغيير ارتفاع السلايدشو.
  
  
   وبالاخير قم بحفظ الاداه ومبروك عليك السلايدشو
   اذا كان عندكم اي استفسارات يمكنكم كتابة تعليق  وسيتم الرد عليه انشاء الله

.. Résumé bloggeradsenseo

تنسيق تعليقات مدونة بلوجر بشكل مميز (وتميز تعليق المدير) 2013

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

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

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

انا قبل شرح الاضافة اتمنى ان تشاهدوا الصورة

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

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

من هنا

بعد ذلك ادخل الى تصميم او القالب في الواجهات الجديد  ثم تحرير HTMIL  ثم احفظ نسخة احتياطية من قالبك ثم توسيع القوالب 

ثم ابحث عن الكود التالي

                                                                                                                            

 ]]></b:skin>

ثم اضف الكود التالي قبل الكود السابق

      

    /* Start Comment Style Code http://www.iraqshop1.blogspot.com */

    .comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}

    .comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}

    .comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}

    .comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}

    .comments .comments-content .inline-thread{padding:0}

    .comments .comments-content .comment-thread{margin:8px 0}

    .comments .comments-content .comment-thread:empty{display:none}

    .comment-replies{margin-top:1em;margin-left:40px;background:#fff}

    .comments .comments-content .comment{margin-bottom:0;padding-bottom:0}

    .comments .comments-content .comment:first-child{padding-top:16px}

    .comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}

    .comments .comments-content .comment-body{position:relative}

    .comments .comments-content .user{font-style:normal;font-weight:normal}

    .comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}

    .comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}

    .comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}

    .comment-content{margin:0 0 8px;padding:0 5px}

    .comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}

    .comments .comments-content .owner-actions{position:absolute;right:0;top:0}

    .comments .comments-replybox{border:none;height:230px;width:100%}

    .comments .comment-replybox-thread{margin-top:0}

    .comments .comment-replybox-single{margin-top:5px;margin-left:48px}

    .comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}

    .comments .thread-toggle{cursor:pointer;display:inline-block}

    .comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}

    .comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}

    .comments .thread-chrome.thread-collapsed{display:none}

    .comments .thread-toggle{display:inline-block}

    .comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}

    .comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}

    .comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}

    .avatar-image-container{background:url(https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}

    .comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}

    .comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}

    @media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

    /* End Comment Style Code http://www.iraqshop1.blogspot.com */

ثم احفظ القالب

انتهى الشرح اتمنى ان ينال رضاكم اي استفسار يرجى ترك تعليق للاجابة عليه

.. Résumé bloggeradsenseo