طريقة إيقاف ظهور الإعلانات أثناء تصفح الإنترنت

للحد من الإعلانات، يمكن تحميل إضافة “آد بلوك بلاس” لمتصفحات فايرفوكس وكروم بالإضافة إلى آندرويد وأوبيرا

كثيراً ماتزعجنا الإعلانات الموجودة على الإنترنت أو تشعرنا بعدم الأمان حيث تتبع الإعلانات نشاط المستخدم وعمليات البحث التي يقوم بها المستخدم لتظهر له إعلانات مرتبطة بتلك المواضيع.

للحد من الإعلانات، يمكن تحميل إضافة “آد بلوك بلاس” لمتصفحات فايرفوكس وكروم بالإضافة إلى آندرويد وأوبيرا، وبعد تحميل الإضافة، تظهر أيقونة الإضافة في أسفل المتصفح أو في الأعلى حسب نوع المتصفح، وبعدها تقوم بشكل آلي بمنع أي إعلانات من الظهور بنسبة 99%، حتى الإعلانات التي تظهر في يوتيوب قبل عرض بعض مقاطع الفيديو.

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

تغيير شكل السكرول بار في بلوجر

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

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

خطوات تركيب الأداة :

1: ابحث عن ]]></b:skin>
2:ثم نكتب هذا الكود فوقه مباشرة
::-webkit-scrollbar{ background:#fff; width:15px; } ::-webkit-scrollbar-thumb{ -webkit-shadow:inset 0 0 6px rgba(0,0,0,0.5); -webkit-border-radius:30px; background-image:-webkit-linear-gradient(top,#9bcfff 25%,#0e8aff 51%); } ::-webkit-scrollbar-track{ -webkit-shadow:inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius:30px; }
3:إحفط لاقالب و مبروووك عليك

• ملحوض هذه الاضافة متوفر فقط في متصفح جوجل كروم

أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق.
المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.

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

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

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

طريقة انشاء حساب في موقع Firebase

رابط الموقع

-انشاء قاعدة البيانات اسفل حسابك ستجد مربع انشاء قاعدة بيانات جديدة ضع اي اسم واضغط Create Firebase

سيصبح رابط قاعدة البيانات هكذا https://clubup-9.firebaseio.com/

وضع الاكواد

• اذهب الى لوحة التحكم>>قالب ثم قم بعمل نسخة احتياطية للقالب

• ابحث عن ]]></b:skin>

• ثم ضع فوقه الكود التالي:  

/*-------- Post Views ----------*/ #views-container { width: 75px; float: right; } .mbtloading { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEzSoS9_6SOxuWR_jzGaANl85HAqbhRAoxXDFGJrW2FIdMBzEPdlKxu5W7EwptUbSUPqKN3DtiEy8sqcHJ86DgnnFHjjtYQ0irrOmMQiQ9y6Ty1z6HY1vokt_auqOaFBxLg25hR9jOYGo2/s320/mbtloading.gif') no-repeat left center; width: 16px; height: 16px; } .viewscount { float: right; color: #EE5D06; font: bold italic 14px arial; } .views-text { float: left; font: bold 12px arial; color: #333; } .views-icon{ background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTsx0fcudsT3HkMPISvLzxf8gNfkFkHDVVB-ryK__EB2F_Zr69gV4KCLM6TItb-cn1AuxA3WgseblCZRb2MvmiV3QhRPmtlx2KRg2Ofuywpom04Un5LZl2HnFosIoU52DRv1NHGdGCUqQA/s1600/postviews.png') no-repeat left; border: 0px; display: block; width: 16px; height: 16px; float: left; padding: 0px 2px; }
ابحث عن </body>

•  ثم ضع فوقه الكود التالي:

<!-- Post Views Script by MBT --><script type='text/javascript'>window.setTimeout(function() { document.body.className = document.body.className.replace('loading', ''); }, 10); </script><script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/><script>$.each($('a[name]'), function(i, e) { var elem = $(e).parent().find('#postviews').addClass('mbtloading'); var blogStats = new Firebase("https://clubup-9.firebaseio.com/pages/id/" + $(e).attr('name')); blogStats.once('value', function(snapshot) { var data = snapshot.val(); var isnew = false; if(data == null) { data= {}; data.value = 0; data.url = window.location.href; data.id = $(e).attr('name'); isnew = true; } elem.removeClass('mbtloading').text(data.value); data.value++; if(window.location.pathname!='/') { if(isnew) blogStats.set(data); else blogStats.child('value').set(data.value); } }); }); </script>


غير رابط https://clubup-9.firebaseio.com الى رابط قاعدة بيانات موقع Firebase

• اخيرا ابحث عن

<data:post.body/>

• ثم ضع فوقه الكود التالي لاظهار عدد المشاهدات (ضع العداد في اي مكان يناسبك)

<!-- Post Views Counter by MBT--><div id='views-container'><span class='views-icon'/><div class='views-text'>الزيارات:</div><div class='mbtloading viewscount' id='postviews'/></div>
ثم احفض القالب

أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق. المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم. 

بجانب,مشاهدة عدد الزوار لمدونة بلوجر,اضافة عدد مشاهدات,جانب عنوان الموضوع,

إضافة صندوق معجبي تويتر Twitter Fan Box

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

 إضافة صندوق معجبي تويتر Twitter Fan Box

إضافة صندوق لمعجبي تويتر، و هو شبه بصندوق معجبي الفيس بوك. يمكنك زيارة الموضوع من هنا إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box .

كما ترون الإضافة رائعة ومفيدة وتركيبها أسهل ما يكون

كل ما عليك هو الذهاب للتخطيط ثم اضف أداة HTML/JavaScript جديدة 

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

<div class="textwidget"><script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox"><script type="text/javascript">fanbox_init("إسم صفحتك");</script></div></div><style>.FB_SERVER_IFRAME { width: 290px !important; /* عرض الإضافة*/ height: 250px !important; /* إرتفاع الإضافة*/ } </style>

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

أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق. المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم. 

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

أزرار المشاركة مواقع الاجتماعبة أسفل كل تدوينة بشكل إحترافى

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

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

والآن مع شرح التركيب وهى سهلة جداً

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

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

• ثم إبحث عن هذا الكود  <div class='post-footer'>

ملحوظة : إن لم يعمل معك الكود الأول جرب الثانى لانها تختلف فى بعض القوالب

• ضع الكود التالى بعدة مباشرة 

<b:if cond='data:blog.pageType == "item"'><br /> <div class='shr_class shareaholic-show-on-load'> </div><script type='text/javascript'> var SHRSB_Settings = {"shr_class" :{"src":"http://www.shareaholic.com/media/ css/styles/sb","link":"" ,&88,74,10,106,45,40,210,78,39","apikey":"6ffe2cbf1 quot;service":"5,7,2,38,3,219,43,52,201, 42c45bd4cd03b01ec46b8658","localize" :true,"shortener":"google","; ,"designer_toolTips" :true,"twitter_template":"Some fancy post title - http://goo.gl/dbqlx via @clubup"}}; </script><br /> <script type='text/javascript'> (function() { var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true; sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-sb.min.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s); })(); </script></b:if>

اضغط حفظ 

ومبرووووك

أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق. المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم. 

أزرار المشاركة للمواقع الاجتماعية أسفل كل تدوينة بشكل إحترافى

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

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

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

2.عرض أقسام أو التصنيفات الخاصة بكل موضوع.

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

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

4.عرض العدد الكلى للموضوعات مع عدد مواضيع القسم المحدد.

5. ظهور ملخص للموضوع بمجرد مرور الماوس على رابط عنوان الموضوع.

6.تخطى مشكلة تكرار المواضيع المشتركة بالتسميات.

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

1- نضغط علي html
2- نقوم بنسخ الكود التالي مع تغير عنوان http://www.clubup.blogspot.com الي عنون مدونتك
<script src="https://chababnet.googlecode.com/files/archive.js"></script><br /><script src="http://www.clubup.blogspot.com/feeds/posts/default?max-results=10000&alt=json-in-script&callback=loadtoc"></script>
- قوم بكتابة وصف جيد لهذه الصفحة .
وفي النهاية إضغط علي نشر الصفحة .

أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق. المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.

فهرس مدونة,اضافة فهرس بلوجر الأكثر تطورًا,

اضافة صندوق تعليقات Disqus الي مدونتك

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

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

 

اولا يجب عليك تسجيل الدخول الي الموقع من هنـــــــــــــــا 

تابع الشرح كما موضح في الصورة

بعد ذلك سوف تظهر صفحة قوم بلتسجيل

 

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

 

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

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

تكون الاضافة علي هذا الشكل

 

ثم قوم بحفظ الترتيب  واذهب الي مدونتك وتاكد بنفسك

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

أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق. المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم.
طريقة إضافة صندوق التعليقات ,الي مدونتك,صندوق تعليقات Disqus ,Disqus

تغيير شكل تعليقات بلوجر الى شكل احترافي

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

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

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

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}<br />.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:right}<br />.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}<br />.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}<br />.comments .comments-content .inline-thread{padding:0}<br />.comments .comments-content .comment-thread{margin:8px 0}<br />.comments .comments-content .comment-thread:empty{display:none}<br />.comment-replies{margin-top:1em;margin-right:40px;background:#fff}<br />.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}<br />.comments .comments-content .comment:first-child{padding-top:16px}<br />.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}<br />.comments .comments-content .comment-body{position:relative}<br />.comments .comments-content .user{font-style:normal;font-weight:normal}<br />.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}<br />.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}<br />.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:left;text-decoration:none}<br />.comment-content{margin:0 0 8px;padding:0 5px}<br />.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}<br />.comments .comments-content .owner-actions{position:absolute;left:0;top:0}<br />.comments .comments-replybox{border:none;height:230px;width:100%}<br />.comments .comment-replybox-thread{margin-top:0}<br />.comments .comment-replybox-single{margin-top:5px;margin-right:48px}<br />.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}<br />.comments .thread-toggle{cursor:pointer;display:inline-block}<br />.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}<br />.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}<br />.comments .thread-chrome.thread-collapsed{display:none}<br />.comments .thread-toggle{display:inline-block}<br />.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-left:4px}<br />.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}<br />.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}<br />.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnpgGtugiRBbF3YHcyg4gRlQ_-Vasg9Wcc_OpiB6mm-6lSOPD__osJRB1sptpX5_jkQ38Ie7QWOlhMZIRHLG5DXXGE1H4X-ITVfJND3uS3UrdAMfX395Op1YpEZmNj1DxX1yACGduKfdE/s51/arrow.png) top left no-repeat;float:right;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}<br />.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}<br />.comments .comment-block{margin-right:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}<br />@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-right:0}}<br /><br />

اضغط حفظ 

ومبرووووك

أتمنى أن يكون الدرس في متناول الجميع,في حال كان هنالك أي إستفسار لا تترددوا في وضع  إستفساراتكم في تعليق. المرجو دعم الموقع من خلال الإشتراك على صفحاتنا على المواقع الإجتماعية و مشاركة الدروس مع أصدقاءكم. 

Blogger , تغيير شكل تعليقات بلوجر,تغيير التعليقات