صندوق التنبيهات أو للإعلان

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

, ,

جميع اختصارات واجهة تحرير قوالب بلوجر الجديدة

تعليق واحد6:43 ص, مرسلة بواسطة Hady store
اليوم وفى موضوع جديد وحصرى من مدونة ابداعاتى أقدم لكم موضوع بعنوان ( اختصارات واجهة تحرير قوالب بلوجر الجديدة ) بناء على طلب متتبع المدونة الكريم الأخ +peter hany الذى طلب منى شرح مفصل لذلك ، فاليوم هأنذا ألبى طلبه ، ولكى لا أطيل عليكم متتبعينا الكرام فهيا بنا للشروع فى الدرس داعين المولى عز وجل أن ينال اعجاب الجميع ويكون فى ميزان حسناتنا ان شاء الله 
منذة فترة صغيرة تقرب على العام أطلقت منصة بلوجر شكلا جديدا لها ، والكثير منا لا يتقن التعامل معها كما كان فى الشكل القديم ، لأن الشكل الجديد لبلوجر جاء مختلفا على سابقه فى العديد من الأشياء منها اختلاف واجهة المشاركات والتخطيط و القالب و الكثير ، وكان لابد من اختصارات تسهل التعامل مع القالب فى بلوجر بوجه خاص لذلك كان هذا الدرس 

أدعوك لتكون أحد  أعضاء المدونة >> من هنا  للتوصل بالجديد والحصرى 
♦ اختصارات واجهة تحرير قوالب بلوجر الجديدة ♦
 أولا :  البحث عن أجزاء محددة فى القالب 
الطريقة 
اضغط من لوحة المفاتيح على CTRL + F 
سيظهر لك مستطيل ضع فيه الجزء المراد البحث عنه 
ثم قم بالضغط على Enter 
 ثانيا : البحث عن الأجزاء واستبدالها 
وذلك بالضغط على CTRL + SHIFT + F 
سيظهر لك مستطيل اكتب به الجزء المراد البحث عنه واستبداله 
ثم اضغط على Enter 
سيظهر مستطيل آخر اكتب به الجزء المراد وضعه كبديل للجزء الذى بحثت عنه 
ثم اضغط Enter لاكمال الاستبدال 
بعدها سيظهر لك مستطيل الموافقة والرفض على الاستبدال 
ثالثا : حل مشكلة صعوبة تحديد بعض الكلمات باللغة العربية فى القالب بالماوس 
الأمر بسيط جدا 
فقط قم بالضغط فى بداية أو ناية  الكلمة ثم استمر فى الضغط على مفتاح SHIFT 
والتحرك بالمفتاح الأيمن → أو الأيسر ← من لوحة المفاتيح 
وستلاحظ تحديد حرف من الكلمة مع كل ضغطه على الاتجاه الأيمن أو الأيسر 
 رابعا : اختصارات شائعة ومعروفة للأغلبية 
تحديد الكـــــل  >> الضغط على  CTRL  +  A 
نســـخ الجزء المحدد >> الضغط على  CTRL + C 
قص الجـــزء المحدد  >> الضغط على  CTRL + X 
التراجع عن تعديل  >> الضغط على CTRL + Z 
اعادة تعديل معين >> الضغط على CTRL + Y 
♦ مواضيع مميزة فى مدونة ابداعاتى ♦ 

أستودعكم اللـه الذى لا تضيع ودائعـــــه متتبعينا الكرام 


إقرأ المزيد... Résumé3efrit blogger
,

اضافة النسبة المئوية بجانب شريط تمرير مدونتك

تعليقان1:12 ص, مرسلة بواسطة Hady store
اليوم وفى موضوع جديد وحصرى كالعادة من مدونة مدون أقدم لكم تأثير جميل جدا بجوار شريط التمرير فى مدونات البلوجر وهو عبارة عن اضافة النسبة المئوية بجانب شريط التمرير ، وهذا يضفى على المدونة بعض من الرونق والجمال ، وهذا الموضوع لم تتناوله المدونات العربية لذلك قررت تناول الموضوع بعين من الرعاية وقررت تقديمه لكم فى هذه التدوينة ، ولكى لا أطيل عليكم فهيا بنا للمعاينة والشرح 
 قبل أى شيء أريد أن أقول لك  
اذا كانت هذه أول زيارة لك لمدونة مدون >> فتفضل بالضغط هنا
شاهد المعاينة الحية ♦ 
شرح التركيب 
اذهب للوحة التحكم >> القالب >> تحرير HTML 

 أولا : ابحث عن ]]></b:skin>  وضع فوقه هذا الكود 
#scroll {
display: none;
position: fixed;
top: 0;
left: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
left: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}
 لتجعل النسبة المئوية على يمين المدونة غير كلمة left  بـــ right 

ثانيا : ابحث عن  </head>  وضع اسفله هذا الكود
<div id='scroll'></div>

ثالثا : ابحث عن </body> وضع فوقه هذا الكود 
<script type='text/javascript'>
/*<![CDATA[*/
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>

ثم قم بحفظ القالب ومبروك عليك الاضافة 
إقرأ المزيد... Résumé3efrit blogger

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

11 تعليق6:09 ص, مرسلة بواسطة Hady store
السلام عليكم ورحمة الله وبركاتة 
يوجد الكثير يريد تركيب صندوق تعليقات (الفيس بوك) ولكن بعض الشرح الذى يتوفر على الإنترنت يظهر بعض الأخطاء فى أو يتم تركيب الصندوق وتظهر أخطاء ما لان إدارة (الفيس بوك) قامت بتطوير صندوق التعليقات لذلك أتيت لكم بشرح على النظام الجديد ولن تظهر أى أخطاء بإذن الله شرح وافى خطوة بخطوة .
أول خطوة وهى إنشاء تطبيق على الفيس بوك يتيح لك التحكم بـ التعليقات أنا أنشأت واحداً سابقاً ولكن قمت بعمل تطبيق جديد لكى أشرح لكم والآن إفتح هذا الرابط 
https://developers.facebook.com/apps
بعد الدخول إلى هذا الرابط ستجد مثل الصورة التالية 
ستقوم بإنشاء تطبيق جديد مع كتابة المعلومات المطلوبة بسيطة جداً مثل الآتى 
ستكتب معلومات مثل ما هو موضح ولكن طبعا معلومات تناسبك أنت أم الإسم باللغه (الإنجليزية) فلازم يكون هكذا لانه لن يقبل (عربى) وستختار مجال مدونتك إختار أى شئ ليس (هام جداً)
بعد ذلك والضغط على متابعه تابع معى الآن 
ستقوم بكتابة الكلام الخاص بالإختبار الأمنى مثل ما هو موضح بالصورة أعلاه 
وفى هذة الصورة أعلاه تقوم بالتأكيد على المعلومات وإختيار الدومين الخاص بموقعك مثل ما هو موضح 
تابع معى الخطوة التاليه 
ستقوم بكتابة رابط مدونتك / موقعك بنفس الشكل 
والآن إذهب إلى تحرير القالب الخاص بك وإبحث عن هذا الكود <html
ستجده أول القالب ضع بجانبة هذا الكود 
xmlns:fb='http://www.facebook.com/2008/fbml'
بحيث يكون بهذا الشكل 
الآن نبحث عن هذا الكود <body> وبعد مباشرة ذع الكود التالى
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'معرف الـ id ',
      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('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>
- ستجد هذا الكود فى تطبيقك الذى قمت بإنشاءه سنجده بنفس الشكل التالى 
الآن إفتح المفكرة من جهازك وضع بها الكود التالى مع تغير ما يناسبك لاننا سنحتاجها ولكن ليس الآن قم بحفظ الكود التالى على المفكرة .
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <meta   expr:content='data:blog.pageTitle' property='og:title'/>
        <meta   expr:content='data:blog.url' property='og:url'/>
        <b:else/>
        <meta   expr:content='data:blog.title' property='og:title'/>
        <meta   expr:content='data:blog.homepageUrl' property='og:url'/>
        </b:if>
        <meta   content='اسم مدونتك' property='og:site_name'/>
        <meta   content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHcostwWSMa0fEkdhasrbnsUQOlkrBXDrHf60FucYQyysn79X-sfN4imOBc2CEPmJJn2_dF4A8FVzoExBL2Y-FXqfVf1VtFsnoVDQzzhlib7hLACVSRg2tjQswTX0pHdw4yrRp_CzEpH0/s1600/%D8%A8%D9%86%D8%B1-%D8%AE%D8%A7%D8%B5-%D8%A8%D9%89-125.png'   property='og:image'/>
        <meta content='اكتب الـID الذي نسخته سابقا هنا'   property='fb:app_id'/>
        <meta content='انسخ المعرّف (ID) الخاص ببروفايلك في الفيسبوك'   property='fb:admins'/>
        <meta content='article'   property='og:type'/>
كيف أجد معرف الـ id  الخاص بحسابى ؟ بسيطة جداً إفتح الرابط الاتى لايجاده
https://graph.facebook.com/hady.mana 
مع تغير إسمى بإسمك ستجد المعلومات عن حسابك بما فيها الـ id مثل الصورة التاليه 
- الكود السابق الذى تم حفظة فى المفكرة ضعه قبلة هذا الكود مباشرة </head>  
- والآن إبحث عن الكود التالى 
<data:post.body/>
- ضع الكود التالى بعده مباشرة 
   <b:if cond='data:blog.pageType == &quot;item&quot;'>  <script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>  <div><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/> <fb:comments migrated='1' expr:href='data:post.url'  expr:title='data:post.title' expr:xid='data:post.id' width='450'/>  </div> </b:if>
يمكنك تغيير هذة القيمة بحسب العرض الذى يناسبك width='450'
- ملحوظة : من الممكن أن تجد أكثر من كود مثل هذا <data:post.body/> قد يكون الأول او الثانى هى نختلف فى بعض القوالب
والآن قم بحفظ القالب وأعذرونى إن قصرت فى شرحى
إقرأ المزيد... Résumé3efrit blogger
, ,

اضافة شريط متحرك يضم اخر اخبار المدونه بالوان احترافيه

8 تعليق6:25 ص, مرسلة بواسطة Hady store

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

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

1- من لوحة التحكم --قالب --تحرير html
2-البحث عن الكود التالى 

  <head/>

واضافة هذا الكود قبله 

كود اللون الازرق

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;border-left: none;max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#21b8ff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

كود اللون الاخضر

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;
line-height:37px;;overflow:hidden; margin-bottom: 20px;
max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#29BD9E;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

كود اللون الاحمر

 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
background: #fff;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
background-clip: padding-box;
border-left: none;
max-height: 37px;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#CC1B1B;
-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;
font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>
الان بعد ان ضفت احد الاكواد السابقة تبقت لنا خطوة واحدة وهى اضافة الاضافة تحت الهيدر
ملاحظة - ان كود الهيدر يختلف من قالب لاخر ولكن انا ساعطيك الكود الشهير
سنقوم بالبحث عن الكود التالى

          <div class='main-outer'>

ونلصق قبله تماما هذا الكود
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='beakingnews'><span class='tulisbreaking'>أحدث الأخبار</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://mdwanblog.blogspot.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
numpostx     = 10; // Jumlah artikel yang di tampilkan
$.ajax({
url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',    type: 'get',    dataType: "jsonp", success: function(data) {        var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) {skeleton = "<ul>";for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++)  { if (entry[i].link[j].rel == "alternate"){ posturl = entry[i].link[j].href;  break;  }              }            
posttitle = entry[i].title.$t;
skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
skeleton += '</ul>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }
setInterval(function(){ tick () }, 5000); } else {
$('#recentpostbreaking').html('<span>No result!</span>');
        }  }, error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
       } }); });
//]]>
</script>
</b:if></b:if>

الان قم باستبدال الرابط التالى http://mdwanblog.blogspot.com/ برابط مدونتك

ستجده باللون الاحمر 

واذا كان لديك اى استفسار لا تترد فى طرحه

صفحتى على الفيس بوك


إقرأ المزيد... Résumé3efrit blogger
,

كيفية اضافة اداة الملفات المرفقة الى مدونات بلوجر فقط من مدونة مدون

4 تعليق12:35 ص, مرسلة بواسطة Hady store

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

مميزات الاضافة


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

اختيار وضع HTMl
ثم ضع الكود التالى فى المكان الذى تريد
<div trbidi="on" style="text-align: right;" dir="rtl">
<div style="text-align: center;">
</div>
<div style="color: red; text-align: center;">
<style type="text/css">
div.background
  {
  width:585px;
  height:60px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWDugGcDUOiiB0enh3n4H1cZUM5ZwdH-rCTP2KlWtTWqo6KQsW6K2uEIdDNgP8aMo0udSLJV1rCTwW6vwodUtdwlW9gW1I1jVd88X9rtXhlBCrZKPQNbDMK9F74G1wKY6dlGIsEvKator/s1600/%D8%A7%D9%84%D9%85%D8%B1%D9%81%D9%82%D8%A7%D8%AA.png) repeat;
  border:2px solid white;
  }
div.transbox
  {
  width:566px;
  height:26px;
  margin:26px 9px;

  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style></div>
<div style="color: red; text-align: center;">
</div>
<div style="color: red; text-align: right;" class="background">
<div class="transbox">
<a href="https://sites.google.com/site/morfkatmdontkblog/%D9%83%D9%8A%D9%81%D9%8A%D8%A9%20%D8%A7%D8%B6%D8%A7%D9%81%D8%A9%20%D8%A7%D8%AF%D8%A7%D8%A9%20%D8%A7%D9%84%D9%85%D9%84%D9%81%D8%A7%D8%AA%20%D8%A7%D9%84%D9%85%D8%B1%D9%81%D9%82%D8%A9%20%D8%A7%D9%84%D9%89%20%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1%20%D9%81%D9%82%D8%B7%20%D9%85%D9%86%20%D9%85%D8%AF%D9%88%D9%86%D8%A9%20%D9%85%D8%AF%D9%88%D9%86%D8%AA%D9%83.docx">كيفية اضافة المرفقات.docx</a> (91 KB)</div>
</div>
</div>
البرتقالية برابط التحميل
والزرقاء باسم الشئ المحمل
الخضراء بامتداد التحميل
والاحمر بحجم التحميل
والاصفر بنوع الحجم    : اذاكان جيجا بايت ، ميجا بايت ،كيلو بايت،بايت


معاينة وتحميل الشرح



إقرأ المزيد... Résumé3efrit blogger