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

الدرس46شرح طريقة تثبيت قائمة الاقسام العلوية

العلوي او اي اضافة فى القائمة الجانبية لبلوجر بدون ان يختفي عند النزول الى اسفل المدونة
how to fix and make sticky widget in blogger

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

طبعا الطريقة سهلة جدا فقط عليك باضافة كود CSS  واخر  JAVA SCRIPT  و القيام ببعض التعديلات

1 - قم بالبحث عن الوسم  : ثم اضف فوقه هذا الك

/*------ CSS make sticky widget blogger by:www.arabes1.com ------*/ .sticky {position:fixed; top:10px;/* distance from the top*/ z-index: 100;}

2 - قم بالنزول الى اسفل صفحة تحرر قالب مدونتك تجد وسم  اضف فوقه هذا السكريبت

<script type='text/javascript'> /* script make sticky widget blogger by:www.arabes1.com */ $(document).ready(function() { var stickyWidgetTop = $('add id or class').offset().top; var stickyWidget = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyWidgetTop) { $('add id or class').addClass('sticky'); } else { $('add id or class').removeClass('sticky'); } }; stickyWidget(); $(window).scroll(function() { stickyWidget(); }); }); </script>

لاتنسى تغيير add id or class باسم ID او CLASS الخاص بالعنصر الذي تريد تثبيثه

شاهد الفيديو التعليمي

اقرء المزيد

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

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

1.نذهب الى المدونة تم تسجيل الدخول

2.نذهب الى التخطيط تم اضافة اداة

3.نختار من القائمة اضافة اداة html

4.نضع الكود تم نحفظ الاداة

<center> <ul id="abt-social-icons"> <li class="rss-icon"><a href="http://feeds.feedburner.com/FEEDID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSUC-9Q4qV3sFd3WiVeoDtHUczlsNsvic8CIuFMDrE6oQo4GjlbMuTpUwIq5r9VRKefRMVLLRtmj0lQn4eTG509g00TgspCxo2UWTvL_7olNmIYJt2beryTDB4t-Th_Da6Seh2-K0sSmY/s1600/rss.png" width="147" /></a></li> <li class="twitter-icon"><a href="http://www.twitter.com/TWITTERHANDLE" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEK6WG1eeIZ8e91uNErk6tGIB49ZeeLccWP6dXQ6K26Kx5WXDQFh-Ydljmtb5oMDEBnypUX_e130JYjfQTm2sAuQLo-Zmiu1PHmorF5qtmelp7n8CdJpc83i0zC-pbBQYzgs3PDYnsuds/s1600/twitter.png" width="147" /></a></li> <li class="facebook-icon"><a href="http://www.facebook.com/PAGEID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaYoVLQREExKdcCDJi7ZBrwIFwAI3PaNqpRa_vLihknf8d4aJmnFs27Px_4Ei_jlznbbmjmYoB0p9__OcBp41Wy0f2kh2hOTS1nq9bo9ewpAqI4woMAV2eHvyzXWKkDto2Fd_7E29Skbs/s1600/facebook.png" width="147" /></a></li> <li class="google-icon"><a href="https://plus.google.com/YOURID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDJZD81XD_MECKOy8cpNFfMaTNPZtpznzOlqLxC1KFnN-f8WB5RNDJ3xOQ7fNrFnFSZhIb_QGpb0FD4gvsF148RLPD4NrhXWTNnJjJWbPKK32Z9g5BnlPG4B5GRrGYSBF_1D7apZ-ovrQ/s1600/google.png" width="147" /></a></li> </ul> </center> <style> #abt-social-icons li { float: left; width: 147px; height: 147px; margin: 0 6px 6px 0; padding: 0 0 0 0; border-bottom: none; list-style: none; } #abt-social-icons li a { line-height: 1px; display: block; } #abt-social-icons li a:hover img { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; }

#abt-social-icons li a span { display: none !important; } </style>

قم بتغيير ما كتب بالاحمر الى اسم و عنوان صفحاتك في المواقع الاجتماعية

شاهد الفيديو التعليمي

اقرء المزيد

الدرس 43 طريقة تغير الخطوط في مدونة لبلوجر الى خط جميل و احترافي

الدرس 43 طريقة تغير الخطوط في مدونة لبلوجر الى خط جميل و احترافي

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

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

وجوجل تقدم لنا الآن 6 خطوط عربيه جديده وهى :
Amiri
Droid Arabic Kufi
Droid Arabic Naskh
Lateef
Scheherazade
Thabit
وحتى أسهل عليكم , ها هى الخطوط السته وأشكالهم فى الصور

Amiri


Droid Arabic Kuf


Droid Arabic Naskh





Scheherazade


Thabit

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

<head>

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

<link href='http://fonts.googleapis.com/earlyaccess/amiri.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/lateef.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/scheherazade.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/earlyaccess/thabit.css' rel='stylesheet' type='text/css'/>

الشق الثانى : تعديل نوع الخط فى الجزء الذى تريد تغييره
والآن تستطيع تغيير الخط على كل أجزاء المدونه , فقط عليك معرفة كود الجزء المراد تغيير الخط فيه , وإليك شكل أكواد CSS الخاص بكل خط من الخطوط السابقه وبنفس الترتيب

ملحوظه : عليك إستخدام كود واحد من الأكواد التاليه , وإختر هذا الكود على أسس إختيارك لكود نوع الخط السابق .

ont-family: 'Amiri', serif;
font-family: 'Droid Arabic Kufi', serif;
font-family: 'Droid Arabic Naskh', serif;
font-family: 'Lateef', serif;
font-family: 'Scheherazade', serif;
font-family: 'Thabit', serif;

اقرء المزيد

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

شرح طريقة اضافة سكريب تعطيل مضاد الاعانات Anti Adblock Script على المواقع و مدونة بلوجر Blogger لتنبيه الزوار بتعطيلها لتظهر مواضيعك , حتى تزيد من ارباح موقعك من نسبة ظهور و نقرات الاعلانات الربحية

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

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

شاهد الفيديو التعليمي

كود سكريب تعطيل مضاد الاعانات Anti Adblock Script

<style> #h237 { background-color: #fcfcfc; opacity: .99; display: table; position: fixed!important; position: absolute; z-index: 9999!important; width: 100%; height: 100%; top: 0; top: expression((t=document.documentElement.scrollTop?document.documentElement.scrollTop: document.body.scrollTop)+"px"); bottom: 0; right: 0; left: 0; padding: 2% 0 } #h237 p { font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: normal; color: #7a7a7a; line-height: 30px; text-decoration: none; text-align: center; display: table-cell; vertical-align: middle; margin: 0 auto } #h237 p a { background: #979797; display: block; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 14px; color: #fff!important; line-height: initial; text-align: center; text-transform: uppercase; letter-spacing: .5px; width: 100px; padding: 10px; border-radius: 3px; margin: 30px auto; clear: both; transition: all .3s ease-out } #h237 p a:hover { background: #ff4e00; color: #fff } #h237~ * { display: none } </style><div id="h237"> <span>Mohon Aktifkan Javascript!<a href="http://t.umblr.com/redirect?z=http%3A%2F%2Fift.tt%2F1i13QSt&t=OTQwNmM2MGViMjUxYmExNWQ3OWNjZjBkYWUyOTEzMTQ1NjhhY2M4NixrN2JEZEczTQ%3D%3D&b=t%3AP3KwZKsEqfnxY18XaAATLg&p=https%3A%2F%2Farabes1.tumblr.com%2Fpost%2F157353737338%2F%D8%A7%D9%84%D8%AF%D8%B1%D8%B3-101-%D8%B3%D9%83%D8%B1%D9%8A%D8%A8-%D9%84%D8%AA%D9%86%D8%A8%D9%8A%D9%87-%D8%A7%D9%84%D8%B2%D9%88%D8%A7%D8%B1-%D8%A8%D8%AA%D8%B9%D8%B7%D9%8A%D9%84-%D8%A7%D8%B6%D8%A7%D9%81%D8%A9-%D9%85%D8%A7%D9%86%D8%B9&m=1">Enable JavaScript</a></span></div> <script> /*<![CDATA[*/ window.document.getElementById("h237").parentNode.removeChild(window.document.getElementById("h237")); (function(b, a) { function e(f) { f && h237.nextFunction() } var c = b.document, d = ["i", "s", "u"]; e.prototype = { rand: function(f) { return Math.floor(Math.random() * f) }, getElementBy: function(g, f) { return g ? c.getElementById(g) : c.getElementsByTagName(f) }, getStyle: function(g) { var f = c.defaultView; return f && f.getComputedStyle ? f.getComputedStyle(g, null) : g.currentStyle }, deferExecution: function(f) { setTimeout(f, 250) }, insert: function(i, h) { var n = c.createElement("span"), o = c.body, p = o.childNodes.length, l = o.style, m = 0, j = 0; if ("h237" == h) { n.setAttribute("id", h); l.margin = l.padding = 0; l.height = "100%"; for (p = this.rand(p); m < p; m++) { 1 == o.childNodes[m].nodeType && (j = Math.max(j, parseFloat(this.getStyle(o.childNodes[m]).zIndex) || 0)) } j && (n.style.zIndex = j + 1); p++ } n.innerHTML = i; o.insertBefore(n, o.childNodes[p - 1]) }, displayMessage: function(g) { var f = this; g = "abisuq".charAt(f.rand(5)); f.insert('<p>من فضلك قم بتعطيل مضاد الإعلانات<br/><br/><img border="0" src="http://ift.tt/2fs3JTE" /><br/><br/>هذا الموقع يقوم على وجود الإعلانات<br/>من فضلك قم بتعطيل مضاد الإعلانات حتى تدعمنا<a href="JavaScript:window.location.reload()">تحديث الصفحة ', "h237"); c.addEventListener && f.deferExecution(function() { f.getElementBy("h2a37").addEventListener("DOMNodeRemoved", function() { f.displayMessage() }, !1) }) }, i: function() { for (var h = "DivTopAd,ad-zone-1,ad_190x90,ads-sticky,iqadtile5,leftframeAD,tobsideAd,ad,ads,adsense".split(","), f = h.length, j = "", k = this, l = 0, i = "abisuq".charAt(k.rand(5)); l < f; l++) { k.getElementBy(h[l]) || (j += "<" + i + ' id="' + h[l] + '"></' + i + ">") } k.insert(j); k.deferExecution(function() { for (l = 0; l < f; l++) { if (null == k.getElementBy(h[l]).offsetParent || "none" == k.getStyle(k.getElementBy(h[l])).display) { return k.displayMessage("#" + h[l] + "(" + l + ")") } } k.nextFunction() }) }, s: function() { var i = { "pagead2.googlesyndic": "google_ad_client", "js.adscale.de/getads": "adscale_slot_id", "get.mirando.de/miran": "adPlaceId" }, h = this, n = h.getElementBy(0, "script"), o = n.length - 1, p, l, m, j; c.write = null; for (c.writeln = null; 0 <= o; --o) { if (p = n[o].src.substr(7, 20), i[p] !== a) { m = c.createElement("script"); m.type = "text/javascript"; m.src = n[o].src; l = i[p]; b[l] = a; m.onload = m.onreadystatechange = function() { j = this; b[l] !== a || j.readyState && "loaded" !== j.readyState && "complete" !== j.readyState || (b[l] = m.onload = m.onreadystatechange = null, n[0].parentNode.removeChild(m)) }; n[0].parentNode.insertBefore(m, n[0]); h.deferExecution(function() { if (b[l] === a) { return h.displayMessage(m.src) } h.nextFunction() }); return } } h.nextFunction() }, u: function() { var g = "ad&adv_keywords=,-page-peel/,/adchain.,/adfootright.,/adsxml/ad,/adyard300.,/impopup/ad,/loadadsparam.,/meme_ad.,_adshare.".split(","), f = this, h = f.getElementBy(0, "img"), i, j; h[0] !== a && h[0].src !== a && (i = new Image, i.onload = function() { j = this; j.onload = null; j.onerror = function() { d = null; f.displayMessage(j.src) }; j.src = h[0].src + "#" + g.join("") }, i.src = h[0].src); f.deferExecution(function() { f.nextFunction() }) }, nextFunction: function() { var f = d[0]; f !== a && (d.shift(), this[f]()) } }; b.h237 = h237 = new e; c.addEventListener ? b.addEventListener("load", e, !1) : b.attachEvent("onload", e) })(window); /*]]>*/ </script>

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

اقرء المزيد

الدرس39 كيفية ادراج و عمل صندوق مجموعة دردشة حية لمدونة بلوجر

الدرس39 كيفية ادراج و عمل صندوق مجموعة دردشة حية لمدونة بلوجر

السلام عليكم مجددا وفي درس حصري وجديد الا وهو شرح كيفية اضافة علبة صندوق مجموعة الدردشة أو شات حية "Live group chat" إلى موقعك أو مدونتك في بلوجر "blogger "بشكل جميل و متوافق مع جميع شاشات الحاسوب PC و اجهزة الذكية الموبايل "Mobile Phone"

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

اقرء المزيد

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

تمتاز ترجمة غوغل بعدد اللغات التي تترجم منها وإليها إذ تبلغ 65 لغة

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

ورغم أن ترجمة غوغل ليست الترجمة الآلية المجانية الوحيدة المتاحة على شبكة الإنترنت، فهناك إلى جانبها ترجمة بينغ (أفكار) من مايكروسوفت وترجمة صخر (ترجم) وخدمات أخرى، إلا أن مجموعة خصائص ترجمة غوغل وأدواتها المرنة تجعلها أكثر عملية بالنسبة للمستخدم.

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

أداة ترجمة الأعلام المتحركة:

هي عبارة عن كود css يجعل أيقونات الأعلام الدائرية تتحرك 360 درجة بمرور الماوس عليها

مميزات الأداة:

1. دعم 10 لغات وهم :اللغة العربية, الإنجليزية ,الفرنسية, الألمانية,الأسبانية,الروسية,اليابانية,الكورية,الصينية والبرتغالية.
2. سهل التحميل .

<div id="google_translate_element"> </div> <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element'); } </script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

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

او شاهد اللفيديو التعليمي : 

اقرء المزيد

الدرس37 اضافة ازرار النشر على فيسبوك, تويتر, جوجل بلس, لينكدين, واتساب اسفل مواضيع بلوجر

الدرس37 اضافة ازرار النشر على فيسبوك, تويتر, جوجل بلس, لينكدين, واتساب اسفل مواضيع بلوجر

لتحميل الكود هنا

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

اقرء المزيد