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

0
قالب اخضر واسود مميز وخفيف مع خصائص مميزة


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

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

ملاحظة:
للتعديل على القالب:
يمكنك الذهاب الى رابط الموقع التالي لمشاهدة شرح التعديل كامل مدونة الفوتوشوب للعرب

الموضوع: منقول من المصدر اعلاه .

5
عمـل تبـادل إعـلاني مـع مـدونة الـكوفي العراقيـة

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

الكل يعلم أهمية التبادل الإعلاني سواء كان بشكل صوري أو نصي حيث أنه يساعد على جلب الزوار إلى مدونتك ولذلك فكل من لديه مدونة تتوفر فيها الشروط المذكورة ادناه ويرغب بالتبادل الاعلاني معنا يمكنه  قراءة الموضوع ووضع التفاصيل المطلوبة .
شروط التبادل الاعلاني
  1. يجب أن لا تكون مدونتك ضد للإسلام أو للمذهبية والطائفية .
  2. أن لا تحتوي على ملفات ضارة أو برامج لها حقوق الملكية لغيرك .
  3. أن تكون المدونة هادفة وذو فائدة و ذات تصميم جميل.
  4. أن يكون بنر المدونة ذو تصميم يدل على محتوى المدونة وبامتداد Gif, Png,Jpeg.
  5. أن يكون مقاس البنر 125X125 بالنسبة للتبادل الصوري.
بنر المدونة ضعه في مدونتك لطفاً
اذا توفرت الشروط السابقة ضع تعليقاً لطفاً بالمعلومات التالية :
  1. اســـم المدونة .
  2. رابط المدونة .
  3. رابط صورة البنر الخاص بالمدونة .
  4. وضع البريد الالكتروني .. استخدام النموذج ادناه اذ لاتريد اظهار بريدك .    
يمكنك استخدام هذا النموذج لطلب التبادل الاعلاني إضغط هنا 

سيتم الرد على طلبكم خلال اقصى مدة 3 ايام ان شاء الله
رابط البنر الخاص بمدونتي موجود في يسار الصفحة 

0
افحص مدونتك اذا كانت مرفوضة لوضع اعلانات جوجل ادسنس


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

حياكم الله اخواني الكرام واهلا وسهلا بكم في مدونة الكوفي العراقية ...

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

فكل ما عليك هو اتباع التالي :  ادخل على رابط موقع bannedcheck
ثم ضع رابط مدونتك بالكامل في الحق بالاسفل كما في الصورة
بعد اضغ على submit لفحص المدونة . وان شاء الله سيظهر لك هذا الشكل ..












0
اداة توليد اضافة ودجيت الى بلوجر يمكنك اختصار الاكواد بصورة صغيرة add widgets to blogger

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


حياكم الله اخواني الكرام واهلا وسهلا بكم في مدونة الكوفي العراقية ... 

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

Form generator for "Add to Blogger" button by aliraqia.blogspot.com




أداة مولد اضافة الى البلوجر Generate Add to Blogger

الضبط | Settings




Copyright © aliraQia_2012


وعلى سبيل المثال اضغط ادناه لاضافة بنر مدونتي في مدونتك مباشرة

0
طريقة اختصار الاكود لاضافتها على شكل ودجيت للبلوجر Add widgets to blogger


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

حياكم الله اخواني الكرام واهلا وسهلا بكم في مدونة الكوفي العراقية ... 

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

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

استبدل ما هو باللون الاحمر الى متطلبات الاضافة:
1-اكتب اسم الاضافة على سبيل المثال آخر التعليقات .
2- اضف الكود كاملا .
3- اكتب رابط مدونتك .
4- اكتب رابط اللوغو او اللوجو الذي سيظهر اثناء الموافقة فقط .

اكواد الاداة:
<form action="http://www.blogger.com/add-widget" method="POST"><input type="hidden" name="widget.title" value="أسم الودجيت او الاضافة"/><input name="widget.content" type="hidden" value="اضف كود الاضافة هنا" /><input name="widget.template" type="hidden" value="&lt;data:content/&gt;" /><input type="hidden" name="infoUrl" value="رابط مدونتك هنا"/><input type="hidden" name="logoUrl" value="رابط اللوجو هنا"/><input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" /></form>

الى هنا انتهى الشرح اتنمى انكم استفدتم من الموضوع ...





0
اضافة شريط تسلسل الموضوع - اين انت تقرأ الان بلوجر


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

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


للحصول على هذه الاضافة اتبع التالي :-
 لوحة تحكم مدونتك من هنا >> قالب >تحرير HTML >> متابعة >توسيع القالب :


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

.breadcrumbs{ 
padding:5px 0px 5px 5px; 
margin:0;font-size:95%; 
line-height:1.4em; 
border-bottom:4px double #cadaef; 
}

ثم ابحث عن الوسم التالي:  <div class='post hentry uncustomized-post-template'>
وانسخ الكود التالي بعدها مباشرة :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
انت تقرأ .. &#187; <a expr:href='data:blog.homepageUrl'>الرئيسية</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

احفظ القالب ومبروك عليك الاضافة






0
اضافة صندوق اشتراك عبر البريد الالكتروني بثلاث اشكال جميلة

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

اخواني اقدكم لكم هذه الاضافات وجدتها في موقع وحبيت انقلها لكم وهي اضافة صندوق للاشتراك عبر البريد الالكتروني بثلاث اشكال جميلة . هذه الصورة هي مجموع الثلاث اذا عجبتك واحده منها اتبع التالي :-

للحصول على هذا الكود يجب عليك 
اولا : قم بالدخول الى لوحة التحكم لمدونتك مـــن هنـــا 
ثانيا:  ادخل على التخطيط ثـــــــم اضافة أداة  HTML/JavaScript
ثم قم بنسخ الكود التالي وضعه فيها واحفظها. 
 ولا تنسى تبديل اسم مدونتي aliraqia باسم مدونتك


الاضافة الاولى : الشكل الاول
<style type="text/css">
#latesthack-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZpHTKfyJa_S-6mvUZRo-_dyyzDz2Ye2aXVqu0EVnsFyCJH0FNPSfZE4Xhov1keXk07pS-a3Bur0dmwn30OXnpGtKqw9UaILi17ko6iaY_tqnXALz9WTEGmG_dBbgd2BVcxEZ1LIqBBan/s1600/latesthack.com-red.png) no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}
form#latesthack-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}
form#latesthack-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}
form#latesthack-searchform #sbutton{margin:-7px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="latesthack-searchbox">
<form id="latesthack-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=aliraqia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input type="hidden" value="aliraqia" name="uri" /> <input type="hidden" name="loc" value="AR_ar" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" id="s" />
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
الاضافة الثانية: الشكل الثاني
<style type="text/css">
#latesthack-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXk9tbit-j-gqaX6EuCZvlvUQt1ULMdkBjchHpRQ9Fxqk5R-H3bPdb6nvhyphenhyphenk5ZElroggDusHYvlbcQ_uuCmooDMYxSpjDZbc7FapkFbGLIv-Vx2-uRhB1CcW2aiUASPhUBtpoOZplAJAMk/s1600/latesthack.com-silver.png) no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}
form#latesthack-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}
form#latesthack-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}
form#latesthack-searchform #sbutton{margin:-7px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="latesthack-searchbox">
<form id="latesthack-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=aliraqia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input type="hidden" value="aliraqia" name="uri" /> <input type="hidden" name="loc" value="AR_ar" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" id="s" />
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
الاضافة الثالثة: الشكل الثالث

<style type="text/css">
#latesthack-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4CqZlkKle3JnoN5_7TbcU-pdKBw2ZiNXBPT-1M3PbTI2pRHM51Gy0pXdhlFk0CBCH8hQZ-uvm9t-OexYnXD7N1_zoDntq3wPgqUCXibho76djIfZpGwepSeuLTn6ewwOGgsrdmIa1nPew/s1600/latesthack.com-blue.png) no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}
form#latesthack-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}
form#latesthack-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}
form#latesthack-searchform #sbutton{margin:-7px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="latesthack-searchbox">
<form id="latesthack-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=aliraqia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input type="hidden" value="aliraqia" name="uri" /> <input type="hidden" name="loc" value="AR_ar" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" id="s" />
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>












3
طريقة اضافة تعليقات الفيسبوك Facebook لمدونة بلوجر

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

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


حيث سيكون شكل التعليقات كما في الصورة ادناه
أولا: انشاء تطبيق على الفيسبوك:-

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

ثانيا: اضافة الاكواد :- لاتنسى اخذ نسخة احتياطية من القالب قبل عمل اي شئ 

ادخل الى لوحة تحكم مدونتك مــن هنــا
ثم الى قالب ثم تحرير html ولا تنسخ ان تضع علامة على توسيع القالب.
ابحث عن الكود التالي :
<html
ثم ضع هذا الكود بعده مباشرة (يعني تضع مسافة واحدة بينه وبين الكود الجديد التالي:-
xmlns:fb='http://www.facebook.com/2008/fbml'

 ملاحظة السهم بالاسفل هو يكون في البداية وليس كما بالكود السبب من المدونة يتجعله بالنهاية لكنه الان صحيح وجرب نسخه الى مفكرة في جهازك 
ليصبح بهذا الشكل
<html xmlns:fb='http://www.facebook.com/2008/fbml'

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

<body>

ملاحظة: بالنسبة للقوالب الجديدة يكون بهذا الشكل :-

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

ضع الكود التالي أسفل احد الكودين حسب ماموجود عندك :-
<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;ضع رقم التطبيق هنا&#39;,
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };
    (function() {
    var e = document.createElement(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/ar_AR/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script> 
ضع رقم التطبيق الذي انشأناه سابقا بدل عبارة (ضع رقم التطبيق هنا) .
 الان ابحث عن </head>                 وضع الكود التالي فوقه مباشرة 
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='مدونة الكوفي العراقية' property='og:site_name'/>
<meta content='رابط  صورة  اللوغو الخاص بالمدونة' property='og:image'/>
<meta content='رقم التطبيق' property='fb:app_id'/>
<meta content='http://www.facebook.com/amir.al3raQi' property='fb:admins'/>
<meta content='article' property='og:type'/>


1- غير (مدونة الكوفي العراقية)  باسم مدونتك
2- غير  رابط اللوغو الخاص بمدونتك  بحيث ستضهر هذه الصورة بجانب عنوان موضوعك
     على بروفيلات الزوار ويفضل أن تكون بحجم 40px * 40 px .
3- بدل  رقم التطبيق برقم التطبيق الدي أنشأناه بالبداية
4- غير اسمي amir.al3raQi برابط بوفيلك وليس صفحتك



    ثالثاً: الخطوة الاخيرة :-
    ابحث عن الكود التالي :-
    <b:includable id='comment-form' var='post'>
     ثم ضع تحته مباشرة الكود:-
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
    <div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
    </div>
    </b:if>

    يمكنك تغير مايلي حسب شكل ولون مدونتك .

    1- اللغة  ar_AR   تجعل  الاداة باللغة العربية  ويمكن ارجاعها بالانجليزية  بوضع en_US .-
    2- اللون light  تعني لون الصندوق الطبيعي وهي الأبيض  ويمكنك ارجاعه أسود وضع مكانها DARK .
    3- القياس 520  تعني عرض الصندوق ويمكنك التعديل عليه  الى مايناسبك بتغيير الرقم .


    احفظ القالب ومبرروك عليك الاضافة 

    0
    كود لوضع رابط مصدر مدونتك تلقائيا عند النسخ من مواضيعك




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

    للحصول على هذا الكود يجب عليك ... لاتنسى اخذ نسخة احتياطية من القالب قبل عمل اي شئ 
    ادخل لوحة تحكم مدونتك من هنا >> قالب >> تحرير HTML >> متابعة >> توسيع القالب :


    ابحث عن الوسم التالي : 
    <data:post.body/> 

    ملاحظة: اذا وجت اثنين منها فالمقصود هو الثاني.


    ثم ضع هذا الكود مباشرة بعدها .
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><b:if cond='data:blog.pageType == &quot;item&quot;'><div style="text-align: center;"><span>
    <span style='margin:0px;padding:10px 10px 10px 10px;font-family:Arial;font-size: 15px;line-height: 20px;'>رابط الموضوع: <a expr:href='data:post.url'><data:post.title/></a></span><span style='margin:0px;padding:10px 10px 10px 10px;font-family:Arial;font-size: 15px;line-height: 20px;'>المصدر: <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></span>
    </span></div></b:if>


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

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

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

    ادخل على لوحة التحكم من هنا 
    ثم ادخل على قالب ثم تحرير HTML وضع علامة في خانة توسيع القالب .

    بعدها ابحث عن الوسم التالي ومباشرة ضع الاكواد التي سأدرجا بعده :-
    <p><data:blogCommentMessage/></p>

    ضع كود الصورة مع رابلكي يكون بهذا الشكل:-
    <p><data:blogCommentMessage/></p>
    <img src="رابط الصورة" border="0" />

    اذا كانت لديك صورة معينة خير على خير واذا تملك فيمكنك استخدام هذه الصورة.
    وهذا رابط الصورة يمكنك استخدامه.
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDk6debnr99s_VLb0LMxMkRp1lhx-M_cb4V0P9tCeDDDKiphP0U-dNLlUlciyzqaqn7pIB3-ZxkCauNzMHfVPwaV-oeayDYwhknaSl-SnLC_op_3loN0KPv4zVuy4lZqYVhBE6cxxmOB6/s1600/warnning.png

    واما اذا كنت تريد ان تضع جملة معينة فيمكنك ان تضع الكود التالي تحت الوسم الذي ذكرناه سابقاً :-
    الرجاء تجنب استعمال التعليقات الزائفة والتي فيها روابط اعلانية للمواقع.
    يمكنك استخدام اكود الهتمل ألخ.
    <div class="warning" style="background: #F3F9FB url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfTAYki-daSYnYdqcNJeWLeoeFKu4NYkHcGa2o0Ea-YLLK5mw4J7Mv5TR27ce2zFK3i5x__WC-L9YiLnnEYu2b5tf3ChWrblwD5LSFR8eyhY2x_RxBzyrU0b2r3upP6X2jL81GbKP4MQaB/s1600/comment_user_warning.png) 8px 6px no-repeat; border: #A8D1E6 1px solid; padding: 5px 5px 5px 40px;">
    الرجاء تجنب استعمال التعليقات الزائفة والتي فيها روابط اعلانية للمواقع.
    يمكنك استخدام اكود الهتمل ألخ</div>



    3
    إضافة سلايدر Slidershow لعرض الصور لمدونة بلوجر

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

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

    للحصول على هذه الاضافة يجب عليك ...
    اولا : قم بالدخول الى لوحة التحكم لمدونتك مـــن هنـــا
    ثانيا: توجه إلى صفحة التصميم ثم تحرير HTML.
    الآن ابحث عن <head> و بعده مباشرة ضع الأكواد الآتية :
    <script src='http://aliraqia-blog.googlecode.com/files/jquery.Slider.js' type='text/javascript'/>
    <script src='http://aliraqia-blog.googlecode.com/files/coin-slider.min.js' type='text/javascript'/>
    ثانيا
     ابحث عن الوسم  ]]></b:skin>  و ضع مباشرة فوقها هذه الأكواد الآتية:
    /* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { text-align:right; width: 590px; padding:10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
    العدد الملون بالأحمر (590pxهو قياس عرض السلايدر واذا اردت تغييره يجب قرأءة الموضوع للنهاية بعد إجراء هذه التعديل 
    احفظ القالب

    إضافة أداة السلايدر إلى تصميم المدونة

    1- اذهب إلى عناصر الصفحة ثم اضغط على إضافة أداة 
    2- ثم اختر أداة HTML/JavaScript  
    3- اترك حقل العنوان فارغ وضع الكود في حقل المحتوى مع تعديل التسميات وروابط الصورة وتغيير عنوان الموضوع 
    <div id='coin-slider'>
     <a href="رابط الموضوع الاول">
      <img src="رابط صورة الموضوع الاول" />
      <span>عنوان الموضوع الاول</span>
     </a>
     <a href="رابط الموضوع الثاني">
      <img src="رابط صورة الموضوع الثاني" />
      <span>عنوان الموضوع الثاني</span>
     </a>
     <a href="رابط الموضوع الثالث">
      <img src="رابط صورة الموضوع الثالث" />
      <span>عنوان الموضوع الثالث</span>
     </a>
     <a href="رابط الموضوع الرابع">
      <img src="رابط صورة الموضوع الرابع" />
      <span>عنوان الموضوع الرابع</span>
     </a>
    </div>
    <script type="text/javascript">
     $(document).ready(function() {
      $('#coin-slider').coinslider({ width: 590, height: 250, navigation: true, delay: 5000 });
     });
    </script>
    يجب وضع السلايدر بهذا الشكل 

    = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

    1- رابط الموضوع الذي ينتقل إليه الزائر عند الضغط على الصورة.
    2- رابط الصورة الموضوع التي تظهر في السلايدر و يجب أن تكون بنفس قياسات السلايدر (عرض و طول).
    3- عنوان الموضوع أو وصف مقتضب له.
    يمكنك اضافة اكثر من موضوع فما عليك الا تكرار الاكواد من التالية

    <a href="رابط الموضوع الجديد">
      <img src="رابط صورة الموضوع الجديد" />
      <span>عنوان الموضوع الجديد</span>
    </a>

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

    <b:widget id='HTML2' locked='false' title='سلايدر' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>
      <b:include name='quickedit'/>
    </b:if> 
    </b:includable>
    </b:widget>


    احفظ القالب وارجع لعناصر الصفحة و احذف عنوان أداة السلايدر .


    0
    كود زر الذهاب الى اعلى الصفحة بتقنية J-Query المميز scroll to top

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


    اخواني الكرام اهلا وسهلا بكم في مدونة الكوفي العراقية ذو النكهة العربية موضوعنا لهذه التدوينة هو  زر الذهاب الى اعلى الصفحة بتقنية J-Query جميل جدا حيث عندما تصل الى اعلى الصفحة يختفي ويعاود الظهور عند انزل الصفحة قليلا ويمكنك مشاهدة ذلك عبر مدونتي . 

    نأتي الى المفيد : للحصول عليه 
    اولا : قم بالدخول الى لوحة التحكم لمدونتك مـــن هنـــا 
    ثانيا:  ادخل على تصميم ثـــــــم اضافة أداة  HTML/JavaScript  
    ثم قم بنسخ الكود التالي وضعه فيها واحفظها
    <script type="text/javascript" src="http://aliraqia-blog.googlecode.com/files/jquery.min.js"></script>
    <script type="text/javascript" >
    var scrolltotop={ 
        //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control 
        //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). 
        setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
        controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6mofCwNubxVvDJuld0kB1yV-TWX2pn4SzZLdJ9r_oIuhqz4FP3EzV5Ov2ArCSn-MPWi0VL4SOgbi_16JlAxSNHjo1k-4apDytf4Dcuec0QShnPxYaGTOc-cf15vHJaadn5PCYAkkdrDth/s1600/to+top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" 
        controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner 
        anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
        state: {isvisible:false, shouldvisible:false},
        scrollup:function(){ 
            if (!this.cssfixedsupport) //if control is positioned using JavaScript 
                this.$control.css({opacity:0}) //hide control immediately after clicking it 
            var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) 
            if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists 
                dest=jQuery('#'+dest).offset().top 
            else 
                dest=0 
            this.$body.animate({scrollTop: dest}, this.setting.scrollduration); 
        },
        keepfixed:function(){ 
            var $window=jQuery(window) 
            var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx 
            var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety 
            this.$control.css({left:controlx+'px', top:controly+'px'}) 
        },
        togglecontrol:function(){ 
            var scrolltop=jQuery(window).scrollTop() 
            if (!this.cssfixedsupport) 
                this.keepfixed() 
            this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false 
            if (this.state.shouldvisible && !this.state.isvisible){ 
                this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) 
                this.state.isvisible=true 
            } 
            else if (this.state.shouldvisible==false && this.state.isvisible){ 
                this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) 
                this.state.isvisible=false 
            } 
        }, 
        
        init:function(){ 
            jQuery(document).ready(function($){ 
                var mainobj=scrolltotop 
                var iebrws=document.all 
                mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode 
                mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') 
                mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') 
                    .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) 
                    .attr({title:'الرجوع للأعلى'}) 
                    .click(function(){mainobj.scrollup(); return false}) 
                    .appendTo('body') 
                if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text 
                    mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text 
                mainobj.togglecontrol() 
                $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ 
                    mainobj.scrollup() 
                    return false 
                }) 
                $(window).bind('scroll resize', function(e){ 
                    mainobj.togglecontrol() 
                }) 
            }) 
        } 
    }
    scrolltotop.init()
    </script>
    يمكنك تبديل الصورة من خلال تبديل الرابط الموجود بالكود اعلاه .

     
    جميع حقوق النشر محفوظة : تحياتي إدارة مدونة الكوفي العراقيـة 2012