‏إظهار الرسائل ذات التسميات اضافة بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات اضافة بلوجر. إظهار كافة الرسائل

الجمعة، 6 مايو 2016

شريط آخر الأخبار المتحرك مع الإعداد والتنسيق

News Bar Blogger Widget
طبعا لا تستغني المواقع الإخبارية او المواقع ذات النشر المكثف عن مثل هذا الشريط , الشريط يقوم بعرض عناوين آخر المواضيع بشكل متحرك ولافت للانظار مما يجعل الزائر يقبل على الضغط وزيارة الموضوع قبل ان ندخل في طرق التركيب والتنسيق يمكنك القاء نظرة على الشريط وتجربته من المعاينة التالية
طريقة التركيب أضف الكود التالي داخل آداة HTML/JavaScript
<style>
#cnmunewasbar {
  background: #fff;
  box-shadow: 0 0 1px #777;
  height: 30px;
  width: 100%;
}
.cnmunbtile {
  background:#008EFA;
  color: #fff;
  display: inline-block;
  float: right;
  font: bold 14px/30px tahoma;
  height: 100%;
  margin-left: -112px;
  text-align: center;
  width: 110px;
}
.cnmu-newsb-srp {
  float: right;
  font: 14px/28px tahoma !important;
  margin-right: 112px;
}
</style>
<script type="text/javascript">
    var cnmuWidth= 100;
    var cnmuScrollAmount=0;
    var cnmuScrollDelay=80;
    var cnmuDirection="right";
    var cnmutargetlink="yes";
    var cnmunumPosts=10;
    var cnmuBulletchar =">>>";
    var cnmuimagebullet="yes";
    var cnmuimgurl="https://lh6.googleusercontent.com/-YHYwSfOe3XY/VEIv0ZeiOZI/AAAAAAAAE40/3ZHADkTW5Io/s35/jaded.gif";
    var cnmufontsize=16;
    var cnmubgcolor="transparent";
    var cnmulinkcolor="008EFA";
    var cnmulinkhovercolor="CD0317";
</script>
<div id="cnmunewasbar">
<span class="cnmunbtile">آخر الأخبار</span>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/newsbar.js' type='text/javascript'></script>
<script type="text/javascript" src="http://cnmu.blogspot.com/feeds/posts/default?alt=json-in-script&callback=cnmuAdvRecentPostsScrollerv3&max-results=50" ></script>
<div style='clear: both;'></div>
</div>

أهم الإعدادات

استبدل http://cnmu.blogspot.com برابط مدونتك
الرقم 80 هو سرعة الشريط كلما قل كلما كان اسرع كلما زاد اصبح بطئ
ان اردت فتح الروابط في نفس الصفحة استبدل هذه الكلمة yes بهذه no
هذا 10 هو عدد الموضوعات

أهم التنسيقات

هذا #fff لون خلفية الشريط البيضاء
هذا #008EFA لون خلفية كلمة آخر الأخبار والتي يمكنك تغييرها هي الأخرى
وهذا #fff هو لون خط كلمة آخر الأخبار
الرابط الزهري هو صورة جديد يمكنك استبداله برابط صورة أخرى
هذا 008EFA هو لون الروابط ملحوظة لا نضيف للون هنا رمز #
هذا CD0317 هو لون الروابط عند تمرير الماوس وايضاً لا نضيف له الرمز #
هذا tahoma هو نوع الخط يمكنك استبداله بخط آخر مخصص
الرقم 14 هو حجم الخط الاول خاص بكلمة آخر الأخبار والثاني خاص بالروابط
هذا 30 هو بعد الخط من الاعلى للكملة وهذا 28 للروابط

هام : في حالة اردت عرض الأخبار من قسم معين

استبدل كلمة default بهذه الكلمة default/-/# مع تعديل رمز الـ # بإسم القسم الذي تريد
هذه هي اهم الإعدادات والتنسيقات وتجربه موفقة بإذن الله

الثلاثاء، 19 مايو 2015

اضافة شاحنة صفحة الفيسبوك إلى المدونه

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

Add Truck Facebook page to code

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

نبدء بدون اطالة
طريقة اضافة الاداة 
  1. ادهب الى 
  2.  لوحة التحكم
  3.  التخطيط
  4.  إضافة أداة
  5. Html/javascript


مع استبدال 
https://www.facebook.com/omar442000
برابط صفحتك


مبروك عليك 

الأربعاء، 13 مايو 2015

اضافة اداه المتواجدين الان والزوار الي المدونة

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

أنسخ هذا الكود الى نافذه جافا سكريب :
1
2
3
4
5
<script id="_waus13">var _wau = _wau || []; _wau.push(["classic", "qk5io6ejywya", "s13"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>


الاثنين، 11 مايو 2015

حصرياً اضافة ارشيف لمدونات بلوجر بثلاثه الوان

حصرياً اضافة ارشيف لمدونات بلوجر بثلاثه الوان احترافيه

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




  • ۞ معاينة الاضافه▼

  • كيفية اضافة هذا الارشيف لمدوناتكم

    1-من لوحة التحكم >>> الصفحات
    2-  اضغط على صفحة جديدة واختر صفحة فارغة
    3-  الان قم بالتحويل الى HTML والصق احد الاكواد التاليه داخل المستطيع الخاص ب HTML

    اللون الاحمر


    <style type="text/css">
    #bp_toc {
    margin-bottom: 10px;margin-top: 28px;text-align: right;width: 100%;}#bp_toc a {text-decoration: none;}
    .toc-note {
    padding: 5px 10px;
    position: relative;
    top: -13px;
    }.toc-header-col1, .toc-header-col2, .toc-header-col3 {
    background: #eee;
    border: 1px solid #ddd;
    color: #666;
    padding: 2px 5px;
    font-weight: bold;}
    /*------عناوين المواضيع------*/
    .toc-header-col1 { width:58%;}
    .toc-entry-col1 {
    background: #FFFFFF;
    border: 1px solid #ddd;
    padding-right: 8px;
    line-height: 30px;
    font-size: 14px;}
    .toc-entry-col1 a {
    color: #E75139;}
    /*------التاريخ------*/
    .toc-header-col2 {width: 11%;text-align: center; }
    .toc-entry-col2 {
    background: #222;border: 1px solid #111;color: #fff;
    text-align: center;font-size: 14px;}
    /*------الأقسام-------*/
    .toc-header-col3 {width:31%;}
    .toc-entry-col3 {background: #E75139;border: 1px solid #B43A27;
    color: #fff;padding-right: 8px;
    font-size: 14px;}.toc-entry-col3 a { color: #fff; }
    .post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
    .post-body {border-bottom: 20px ridge #E4E4E4;}</style><br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>
    <script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
    <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>
    </div>
    

    اللون الازرق

    <style type="text/css">
    #bp_toc {
    margin-bottom: 10px;margin-top: 28px;
    text-align: right;width: 100%;}
    #bp_toc a {text-decoration: none;}
    .toc-note {padding: 5px 10px;
    position: relative;top: -13px;
    }.toc-header-col1, .toc-header-col2, .toc-header-col3 {
    background: #eee;border: 1px solid #ddd;
    color: #006BFF;padding: 2px 5px;
    font-weight: bold;}
    /*------عناوين المواضيع------*/
    .toc-header-col1 { width:58%;}
    .toc-entry-col1 {
    background: #FFFFFF;border: 1px solid #ddd;
    padding-right: 8px;line-height: 30px;font-size: 14px;}
    .toc-entry-col1 a {color: #018EC5;
    }
    /*------التاريخ------*/
    .toc-header-col2 {width: 11%;text-align: center; }
    .toc-entry-col2 {
    background: #222;
    border: 1px solid #111;
    color: #fff;text-align: center;font-size: 14px;}
    /*------الأقسام-------*/
    .toc-header-col3 {width:31%;}
    .toc-entry-col3 {
    background: #018EC5;
    border: 1px solid #0086B7;color: #fff;
    padding-right: 8px;
    font-size: 14px;}
    .toc-entry-col3 a { color: #fff; }.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
    .post-body {border-bottom: 20px ridge #E4E4E4;}</style>
    <br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>
    <script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
    <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>
    
    </div>
    

    اللون الرمادي



    <style type="text/css">
    #bp_toc {border: 0px solid #000;
    background: none repeat scroll 0% 0% #FFF;
    padding: 5px;margin-top: 10px;width: 100%;}
    .toc-note {padding: 5px 10px;position: relative;top: -13px;}
    .toc-header-col1, .toc-header-col2, .toc-header-col3 {
    text-align: center;
    background: none repeat scroll 0% 0% #E6E6E6;
    box-shadow: 2px 2px 5px 5px #CCC inset;
    color: #000;
    padding-left: 2px;width: 58%;}
    .toc-header-col2 {width: 11%;}.toc-entry-col2 {text-align: center;}
    .toc-header-col3 {width: 31%;}
    .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:80%;text-decoration:none;}
    .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {font-size:70%;text-decoration:underline;}
    .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
    padding-left: 5px;font-size:70%;
    border: 2px solid white !important;background: #F6F6F6;
    white-space:nowrap;}</style><br />
    <div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div><script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script><script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>
    </div>
    


    وبالاخير قم بنشر الصفحه ومعاينتها ,,,,,,,,  هذا كل شئ .... بالتوفيق للجميع

    افضل أزرار بلوجر


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






  • معاينة

  • قبل كل شيئ أضف الكوديين التاليين خاصيين بالأيقونات فوق </head> إذا كنت تتوفر عليهما فلا داعي لإضافتهما


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

    لتغيير الأيقونات تابع التدوينة التالية هنا


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



    1 . توجه لقالب >> تحرير 

    2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>

    * أيضا يمكنك وضع الأكواد فوق </head> تكون أفضل بإستعمال الوسم <style> الكود بينهما </style>


    كود الأزرار الأولى


    /* CSS Button Style Simple*/
    .button{float:right;list-style:none;text-align:center;width:95%;margin:10px;
    padding:2px;font-size:14px;clear:both;}
    .button ul {margin:0;padding:0}
    .button li{display:inline;margin:0;padding:0}
    .demo {opacity:1;padding:7px 14px!important;background:#9eb2c0;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .download {opacity:1;padding:7px 14px!important;background:#fe4e3f;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .download2:hover,.demo2:hover,.demo1:hover,.demo:hover,.download1:hover,.download:hover {opacity:0.9;transition:opacity .4s ease-in-out;}
    .demo:before {content:&#39;\f06e&#39;;display:inline-block;;margin-left:10px;
    width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out; }
    .download:before {content:&#39;\f019&#39;;display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
    .download1 {opacity:1;padding:7px 14px!important;background:#FEC93F;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .download1:before {content:&#39;\f07b&#39;;display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
    .demo1 {opacity:1;padding:7px 14px!important;background:#FE843F;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .demo1:before {content:&#39;\f013&#39;;display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
    .demo2 {opacity:1;padding:7px 14px!important;background:#FE3F9B;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .demo2:before {content:&#39;\f0ee&#39;;display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}
    .download2 {opacity:1;padding:7px 14px!important;background:#3FA2FE;color:#fff!important;font-weight:400;font-size:14px;font-family:Electrolize,&#39;ge_ss_tvbold&#39;;text-align:center;text-transform:uppercase;transition:opacity 0.4s ease-in-out;}
    .download2:before {content:&#39;\f0c1&#39;;display:inline-block;margin-left:10px;width:16px;height:16px;line-height:24px;color:#fff;font-family:fontawesome;transition:all 0.5s ease-in-out;}

    كود الأزرار الثانية

    /* CSS Button Style Flat */
    .buttonhm{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
    .buttonhm li{display:inline;margin:0;padding:0;}
    .buttonhm li a{background:#3498db;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}
    .buttonhm li a:hover{background:#2980b9;}
    .buttonhm1 li a:hover{background:#C22D2D;}
    .buttonhm1{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
    .buttonhm1 li{display:inline;margin:0;padding:0;}
    .buttonhm1 li a{background:#DB3434;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}

    كود الأزرار الثالثة

    /* CSS Button Style Ar1web */
    .buttonar1web{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
    .buttonar1web li{display:inline;margin:0;padding:0;}
    .buttonar1web li a{padding:7px 20px;margin:auto 5px;font-size:13px;font-weight:bold;cursor:pointer;border-radius:2px;border:1px solid #ccc;text-shadow:1px 1px 0 #fff;color:#555 !important;background:#fff;background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f2f2f2));background:-webkit-linear-gradient(top, #fff, #f2f2f2);background:-moz-linear-gradient(top, #fff, #f2f2f2);background:-ms-linear-gradient(top, #fff, #f2f2f2);background:-o-linear-gradient(top, #fff, #f2f2f2);box-shadow:0 1px 2px #ddd;font-family: electrolize;}
    .buttonar1web li a:hover{border-color:#bbb;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);color:#111 !important;}

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

    1. إذا اردت إستخدام زر واحد إختر الكود من <a  إلى  <a/

    2. احذف الزر الذي لا تريده من <li> إلى </li>

    3. ضع بدل # الرابط

    4. المحدد باللون الأصفر هو كود لبداية كل زر ونهايته  </ul>


    كود الأزرار الأولى
    <div style='text-align: center;'>
    <ul class='button'>
    <li><a class='demo' href='#'>معاينة</a></li>
    <li><a class='demo1' href='#'>تخصيص</a></li>
    <li><a class='demo2' href='#'>رفع مباشر</a></li>
    <li><a class='download' href='#'>تحميل مباشر</a></li>
    <li><a class='download1' href='#'>تحميل الملف</a></li>
    <li><a class='download2' href='#'>الرابط مرفق</a></li>
    </ul>
    <div class='clear'/>
    كود الأزرار الثانية
    <div style='text-align: center'>
    <ul class='buttonhm'>
    <li><a href='#' target='_blank'>Live Demo</a></li>
    <li><a href='#' target='_blank'>Download</a></li>
    </ul>
    <ul class='buttonhm1'>
    <li><a href='#' target='_blank'>Live Demo</a></li>
    <li><a href='#' target='_blank'>Download</a></li>
    </ul>
    </div>
    <div class='clear'/>
    كود الأزرار الثالثة

    <div style='text-align: center'>
    <ul class='buttonar1web'>
    <li><a href='#' target='_blank'><i class='icon-eye-open'/> Live Demo</a></li>
    <li><a href='#' target='_blank'><i class='icon-link'/> Download</a></li>
    </ul>
    </div>
    <div class='clear'/>