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

أهلا بمتتبعي مدونة مدون بلوجر في درس جديد و مفيد .

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

ستنطرق الأن إلى واحد من أكثر ال slideshows إستعمالا : سلايد شو مدونة المحترف .

و من مميزاته أنه يتناسب مع أغلبية المواقع بمختلف تصاميمها .

معاينة :

طريقة تركيب السلايد شو : 

1- أولا قم بأخذ نسخة إحتياطية لتفادي أي مشكلة قد تواجهها .

2- توجه إلى لوحة التحكم خاصتك على بلوجر 

3- توجه نحو تعديل القالب 

إبحث عن الكود التالي : (يمكنك البحث عبر الضغط على ctrl+f)

]]></b:skin>

فوقه مباشرة (قبله) , أضف الكود التالي :

#alwansd{ height: 428px; margin: 0 0 0px 0px; padding: 15px 28px 15px 16px; width: 672px; background: #373737; } .alwanw{ position: relative; height:385px; } .alwanw .contentdiv{ visibility: hidden; position: absolute; opacity: 1; } .alwan-ps{ text-align: right; float: left; width: 670px; height: 11px; margin-left:-43px; } .alwan-ps .toc{ font-size: 0px; width: 102px; height: 11px; float: right; background: #5b5b5b; margin-left: 1px; } .alwan-ps a.selected{ background:#dfdfdf; } .alwan-ps .prev, .alwan-ps .next {display:none; } .alwanip{ width: 618px; padding: 10px !important; bottom: 0; float: left !important; position: absolute; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySjhsAxOuoJbcKSnnajuzo-9a0sC48yvVIGJZ_HfNsHqLAcyDa-3d9djZDWJcFL0Ro9kqQrr4sC6-5dMw9hVptiqo6JWBkIt05cjDLAawfSuexhETb541jeBZWtaL_RiYQqQeng-DyIM/s1600/backslide.png); } .alwanip a{ color:#dcdcdc; font: 12px droidkufi-bold; margin:0; padding:0; line-height: 19px; } .alwanip h6{margin: 0;} .alwanip h6 a:hover {color:#c2df00;} .alwanip .alwand{font:12px arial; margin:4px 0; color:#a5a5a5; } .alwanip p{font-size: 13px; margin: 0; color: #a5a5a5; line-height: 23px; } .alwansf a img{float: right !important; } .alwansf {float: right !important; width:680px!important;} .column-center-outer { width: 680px; }

ابحث من جديد , عن :

</head>

قبله مباشرة أضف الكود التالي :
(غير كلمة "كل" بإسم القسم الذي تريده أن يظهر في السلايد شو)

<script> /* Script from:http://computer-for-security.blogspot.com */ imgr = new Array(); imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg"; showRandomImg = true; aBold = true; summaryPost = 150; numposts1 = 6; label1 = "كل"; function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s} function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}} if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break; }} var daystr = day+ ' ' + m + ' ' + y ; var trtd = '<div class="contentdiv"><div class="alwansf"><a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>' +removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>'; document.write(trtd); j++; }} </script>

إبحث الأن عن :

</body>

فوقه مباشرة أضف هذا الكود :

<script src='http://albaadani.googlecode.com/files/contentslider.js'></script> <script> featuredcontentslider.init({ id: "slider1", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. enablefade: [true, 0.5], //[true/false, fadedegree] autorotate: [true, 6000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script>

أخر خطوة : إبحث عن :

<div id='main-wrapper'>

(ربما لا تجده , يمكنك وضع رابط مدونتك في تعليق و مشكلتك و سيتم الرد عليك)
(ضع تعليقا ضمن تعاليق بلوجر و ليس تعليقات الفيسبوك حتى يصلني إشعار بذلك و أجيب عليك في أقرب وقت)
بعده / أسفله مباشرة , أضف هذا الكود

<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='alwansd'><div class='alwanw' id='slider1'><script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script></div><div class='alwan-ps' id='paginate-slider1'></div></div></b:if>

قم بحفظ القالب و يمكنك ملاحظة السلايد شو في مدونتك ! :)

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

السلام عليكم متابعي مدونة مدون بلوجر في شرح جديد و درس بسيط و مفيد لأصحاب المدونات .

صندوق الدردشة الذي ستقوم بإضافته , سيمكن زوار موقعك من التحاور و لم لا تبادل الخبرات في نفس الصفحة دون تحديثها .

من المميزات الرائعة و التي لا يمكنني المرور دون ذكرها , أنّ  :

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

- الحوار مع زوار الموقع فوري و لا يتطلب تحديث الصفحة

- هناك أكثر من تصميم و شكل للإضافة و يمكنك إختيار الألوان التي تريدها و تعديلها متى شئت 

- إظهار عدد المتواجدين في الشات 

إنشاء صندوق دردشة لمدونتك : 

أولا توجه نحو موقع chatango .
ستظهر لك 3 أمثلة لصناديق الشات : Box / Ticker / Tab .
اختر الشكل الذي تفضل ظهوره في مدونتك عبر الضغط عليه .
لتدخل إلى إعدادات الصندوق و هذه صورة تفسر لك كلّ التعديلات التي يمكنك أن تقوم بها :

و من ثم اضغط على Create Group في الأعلى .
ليقوم مباشرة بتوليد كود الإضافة .

قم بنسخ هذا الكود لأنك ستستحقه .

تركيب صندوق الدردشة إلى بلوجر :

الدخول للوحة التحكم في بلوجر

الدخول إلى التخطيط و إختيار إضافة HTML/JAVASCRIPT

إضافة الكود الذي قمت بنسخه

حفظ

مبروك !! الأن أن تشاهد صندوق الدردشة في مدونتك  ^_^ .
تعليقك البسيط و مشاركتك للتدونية على مواقع التواصل الإجتماعي تحفزني للنشر و الإفادة ! :)

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

إضافة عدد مشاهدات الموضوع تعتبر من بين الإضافات المميزة للمدونات على منصة بلوجر , و كون بلوجر لا يوفر هذه الإضافة عكس الووردبريس , فإن علينا الإلتجاء إلى الإضافات و الطرق "الملتوية" عبر الإلتجاء إلى بعض الخدمات المجانية التي تمثل حلا ناجحا , مثل خدمة Firebase التي توفر لك قاعدة بيانات تتسجل فيها عدد مشاهدات الموضوع تصل حتى 5GB !

أخي الكريم , فقط ركز معي و تابع الشرح بالصور :

1- توجه إلى لوجة تحكمك على بلوجر

2- توجه نحو القالب للتعديل عليه , و من ثم قم بأخذ نسخة إحتياطية للقالب (backup) حتى تتفادى أي مشكلة قد تواجهك .

3- تأكد أنك تستخدم مكتبة جيكويري (إبحث عن كلمة JQuery للبحث عن رابط إدراج الجيكويري , لو وجدته ممتاز , لو لم تجده أضف الكود أسفله مباشرة فوق 

)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

4- توجه نحو موقع firebase و أنشئ حسابك عبر هذا الرابط .
5- أنشئ قاعدة بيانات في حسابك على الموقع بالإسم الذي تريده
مثل ماهو موضح بالصورة :

سجل الرابط الذي يظهر لك تحت APP URL , لأنك ستجتاجه فيما بعد .

مثل : https://modawin-blogger.firebaseIO.com

6- توجه إلى قالبك , و ابحث عن : 

]]>

 فوقه مباشرة أضف هذا الكود :

/*-------- Post Views ----------*/ #views-container { width: 85px; float: right; } .DrROloading { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6de2HIebmFuZI1EeX3PyR_sSuBwDP-weFWHEI3J76Rsu9JXSpd1sWakovoCnf_EAuZaL3U5Hcu4s3wKSjxy3BcuHDK0nbk9uGPrUJ0rTPoULwzFB8B3ubrjuWxOPKzlMs5LyXGrqPAXBK/s32-no/Mini+balls.gif') no-repeat right center; width: 16px; height: 16px; } .viewscount { float: right; color: #EE5D06; font: bold italic 14px arial; } .views-text { float: right; font: bold 12px arial; color: #333; } إقرأ المزيد http://www.condaianllkhir.com/2014/09/views-download-counter-blogger.html#ixzz3fxyKn7kd

7- الأن إبحث عن :

فوقه مباشرة , أضف هذا الكود :

<!-- Post Views --> <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('DrROloading'); var blogStats = new Firebase("https://modawin-blogger.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('DrROloading').text(data.value); data.value++; if(window.location.pathname!='/') { if(isnew) blogStats.set(data); else blogStats.child('value').set(data.value); } }); }); </script>

مغيرا https://modawin-blogger.firebaseIO.com بالرابط التطبيق الذي أنشأته .

8- أخر مرحلة , إبحث عن المكان الذي تريد أن تدرج فيه الإضافة بعد إقرأ المزيد أو في تحت العنوان ..الخ ,

يمكنك أن تبحث عن  

ستجدها أكثر من مرة , ستحتاج الثانية أو الثالثة حسب قالبك .

فوقه مباشرة , ألصق هذا الكود :

<!-- Post Views Counter --> <div id='views-container'><span class='views-icon'/><div class='views-text'>عدد المشاهدات:</div><div class='DrROloading viewscount' id='postviews'/></div>إقرأ المزيد http://www.condaianllkhir.com/2014/09/views-download-counter-blogger.html#ixzz3fy0bePwB

ثم إضغط حفظ .. ربما تركيب الإضافة معقد قليلا , لذلك أي مشكلة تواجهك أترك تعليقك و سيتم الرد عليه .

تعليقك المحفز و مشاركتك التدوينة مع أصدقائك يعني لي الكثير ! :)

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

مرحبا بك أخي الكريم ..

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

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

دعنا ندخل في صلب الموضوع , الإضافة التي ستقوم بإستعمالها في مدونتك بلوجر , لا تمنع نسخ النصوص فقط , بل أيضا الصور !

مراحل تركيب الإضافة : 

1- الدخول إلى لوحة تحكمك في بلوجر  

2- إختر المدونة التي تود تطبيق الشرح فيها

3- التعديل على القالب

4- Ctrl + F و كتابة وسم :

فوقه مباشرة , قم بلصق الكود أسفله :

<script type="text/javascript">// From : www.modawin-blogger.blogspot.com var omitformtags=["input", "textarea", "select"] omitformtags=omitformtags.join("|") function disableselect(e){ if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1) return false } function reEnable(){ return true } if (typeof document.onselectstart!="undefined") document.onselectstart=new Function ("return false") else{ document.onmousedown=disableselect document.onmouseup=reEnable } </script> <script type="text/javascript">//<![CDATA[ function nocontext(e) { var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName; if (clickedTag == "IMG") { alert(alertMsg); return false; } } var alertMsg = "لا يمكنك نسخ الصورة"; document.oncontextmenu = nocontext; //]]></script>

5- حفظ

لتكون بذلك منعت كل من يحاول سرقة جهدك ! :)

 مشاركتك البسيطة و تعليقك المشجع يدعمنا لمواصلة النشر و الإفادة ! ^_^

 (أزرار المشاركة أسفل التدوينة ::) )

تحديث : صندوق الإعجابات الخاص بالفيسبوك لن يتم اعتماده مستقبلا ! و هذا هو البديل

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

و على أساس إيجاد بديل لهذه الإضافة التي تستخدم في الملايين من المواقع , طرح الفيسبوك إضافة جديدة تسمى بـ Page Plugin .

بنفس خصائص الإضافة السابقة , لكن بتصميم جديد .

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

كل ما عليك فعله هو البحث في هذا الكود عن : https://www.facebook.com/modawin.blogger
و تغيره برابط صفحتك على الفيسبوك

<div class="fb-page" data-href="https://www.facebook.com/modawin.blogger" data-width="300" data-height="250" data-hide-cover="false" data-show-facepile="false" data-show-posts="true"></div><div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

لتقوم بتركبه كأي إضافة أخرى عبر : 

الدخول للوجة التحكم في بلوجر

إضافة أدات html/javascript

لصق الكود

حفظ 

هنا أقدم لك بعض التعديلات التي بإمكانك إجارءها إن كنت تملك خبرة ولو قليلة بالتعامل مع الشفرات البرمجية .

data-show-posts="false"

عند تغيير false بـ true , ستظهر الإضافة المنشورات في الصفحة تحت صندوق الإعجابات.

data-hide-cover="false"

عند تغيير false بـ true , سيتختفي غلاف الصفحة من الإضافة

data-height="250"

لتحديد طول الإضافة

data-width="300"

لتحديد عرض الإضافة 

شاركنا بتعليقك و مشاركة المقالة مع أصدقائك ! :) (أز)

إضافة زر الصعود إلى أعلى في بلوجر و على ذوقك !

إن كنت مدون , فمن الظروري النظر إلى موقعك من جانبك كزائر و متابع للمدونة , لا كصاحبها أو كناشر فيها .

و بالتالي عليك توفير أفضل الإضافات و إستعمالها في موقعك مما يجعل تصفح موقعك أسهل و أريح للمتابعين .

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

الإضافة لا تحتاج إلى خبرة أو أي مجهود يذكر , فقط كود بسيط تقوم بإضافته إلى مدونتك و ستجد النتائج مباشرة !

طريقة التعديل :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></center> <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/AVvXsEh414vpNpmhmqk1o6qNMGavM1_Pn2Zh4SkC30JcRZE81XRaANh6aFbZIb0wziTCSMVKneUiKMqmRM5CsIJS6I7NmSLJktkt_DoI0HzNLEQ_DRNC-fv00f4NenX33m9jW8KaxWHAiYhHZRRU/s1600/Blue-Arrow-Up--BloggerAdsenSeO.BlogSpot.Com.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); }, /*<a href='http://www.bloggeradsenseo.blogspot.com/2013/10/add-go-up-to-top-arrow-up.html'></a>*/ 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') /*<a href='http://BloggerAdsenSeO.blogspot.com'></a>*/ 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>

بإمكانك تغيير شكل السهم و اختيار أحد النماذج التالية عبر البحث عن :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjakkQVqnrd0toMcS71D2WHR2ulHTe6dz_bSgEcGODYkvYTdqQNqjb4rGs7M8BGbVOmIuN3TjEs2pkjocTIMO62U71F3Vmq84fv4YtteF1K6DAK-d6JPwBLAxLxnqzPEsmTM7kRttaHw_Q/s1600/modawin-blogger-top-button-1.png

و تغييره برابط أحد الصور التالية .
(إضغط على الصورة و ستجد الرابط المباشر لها )

نموجذ 1

نموذج 2

نموذج 3

نموذج 4

ممتاز , الأن لم يتبقى إلا التركيب :

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

قم بنسخ الكود النهائي بعد التعديل عليه .
- توجه نحو لوحة التحكم الخاصة بك في بلوجر .
- تخطيط .
- إضافة html / javascript

و أخيرا قم بلصق الكود هناك و تمتع بالإضافة في موقعك !

لا تنس أن تشاركنا بتعليقك و تشجيعك :)
أي إستفسار او مشكلة , لا تتردد في طرحه هنا أو في صفحة الفيسبوك :)

(أزرار مشاركة المقالة أسفل التدوينة)

اضافة تأثير تحميل المدونة لمدونات بلوجر

ما يميز شكل المدونة عن الأخرى , هي الإضافات و التعديلات و التميز و الإختلاف ..

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

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

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

ابحث عن هذا الكود

فوقه مباشرة أضف هذا الكود :

<div dir="rtl" style="text-align: right;"><style></div><div dir="rtl" style="text-align: right;">#abt-page-loader {</div><div dir="rtl" style="text-align: right;">        position: fixed!important;</div><div dir="rtl" style="text-align: right;">        top: 0;</div><div dir="rtl" style="text-align: right;">        right: 0;</div><div dir="rtl" style="text-align: right;">        bottom: 0;</div><div dir="rtl" style="text-align: right;">        left: 0;</div><div dir="rtl" style="text-align: right;">        z-index: 9999;</div><div dir="rtl" style="text-align: right;">        background:#000 url('<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKcp-Px9urKxX4L5qV7rxYQLZnCd-128H56HPCDv1mUp3IrIn_e1VtDlfujiEdCIthOyq9S3oJayrdppXZdH7TR69hmkTymXRa8sgGkMFNJN4aNbBXhGYenfELgHkXlP4ytzvEZ_OO7S4/w43-h11-no/www.madad2.com1.gif</span>') no-repeat 50% 30%;</div><div dir="rtl" style="text-align: right;">        color: #FFF;</div><div dir="rtl" style="text-align: right;">        display: none;</div><div dir="rtl" style="text-align: right;">        font: 0/0 a;</div><div dir="rtl" style="text-align: right;">        text-shadow: none;</div><div dir="rtl" style="text-align: right;">        padding: 1em 1.2em;</div><div dir="rtl" style="text-align: right;">}</div><div dir="rtl" style="text-align: right;"></style></div><div dir="rtl" style="text-align: right;"><script type='text/javascript'></div><div dir="rtl" style="text-align: right;">//<![CDATA[</div><div dir="rtl" style="text-align: right;">$(document.body).append('<div id="abt-page-loader">تحميل...</div>');</div><div dir="rtl" style="text-align: right;">$(window).on("beforeunload", function() {</div><div dir="rtl" style="text-align: right;">    // ... Show the Animation `.fadeIn()`</div><div dir="rtl" style="text-align: right;">    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);</div><div dir="rtl" style="text-align: right;">});</div><div dir="rtl" style="text-align: right;">//]]></div></div>

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUHb5yPSN_jij9Z0O4wAdo7M_Onr2XRvV6gPmgb8Wh3U9SnnAieE7_2bZdSx_0cGroRNK3TIjsqmnh_sXGOGjNwlbUaFirM18WDQvmumokR5qIFS1W-1KlEIeLtECOM4qYME1hVOnicMo/s1600/modawin-blogger4.gif

برابط الصورة التي تريدها ,

إليك الصور :

الرابط :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwHXdiY4PeNUWeqmAHLdx1kTtlmviFLcTgO3V-vNkaSbl5pdSTFkM29YVo4658KoRp-QO0UUi8KhKKtf_ki48LD7yedV60F8j9OY06oBMNcyuQ1yq_mHE8K-NWxbwwGRSPdpjkUFMFD-lR/s1600/modawin-blogger1.gif

الرابط

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirIiNMPtNCm1_Um2nmjA5wxU-J1_Bc6Yc4Yuvy-_jzikFgzdAc28ic6dQwvjVyY84cE-aNL0Fq5UiVcexR-fTFw7emTe1nC7ExNVPh_74sQNcdGidbf32A3_wLbNNSr1f-0o_jvLIwc43l/s1600/modawin-blogger2.gif

الرابط : 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFz3vpiVlmgRRlR8S_wYu1Gtczy8RdL2YZO5tutuePzjXWP63rV3H2ZGvn6lsBIsKbwFEZxTDOnH02OwwRpI7Z-FlAL9kkMSUazZqSlkrMxvKo2ae6t118xCWQb2PgCTM1_F9M4o9YfpNO/s1600/modawin-blogger3.gif

الرابط : 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUHb5yPSN_jij9Z0O4wAdo7M_Onr2XRvV6gPmgb8Wh3U9SnnAieE7_2bZdSx_0cGroRNK3TIjsqmnh_sXGOGjNwlbUaFirM18WDQvmumokR5qIFS1W-1KlEIeLtECOM4qYME1hVOnicMo/s1600/modawin-blogger4.gif

إقرأ أيضا : 

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

إضافة صفحة إتصل بنا لمدونة بلوجر

إنشاء صفحات الخطأ في بلوجر

اضافة الاشتراك عبر المواقع الاجتماعية - بلوجر

مرحبا بالجميع ,

اليوم معنا شرح خفيف , و مهم لأصحاب المدونات و الصفحات .

اضافة الاشتراك عبر المواقع الاجتماعية  من أهم الإضافات و أكثرها جاذبية لعين الزائر بفضل ألوانها المشعة و تناسقها مع أي نوع من القوالب .

شرح تركيب الإضافة :

1-توجه نحو لوحة التحكم في بلوجر  .

2-توجه نحو تخطيط 

3-انشئ إضافة جديدة

4-أنسخ الكود أسفله 

http://www.twitter.com/*****" rel="nofollow" target="_blank"> http://www.fb.com/modawin.blogger" style="text-align: center;" rel="nofollow" target="_blank">بلوجرhttps://www.youtube.com/channel/UChh6LOq94wKRcCCg0L704GA" style="text-align: center;" rel="nofollow" target="_blank"> http://modawin-blogger.blogspot.com/feeds/posts/default" rel="nofollow" target="_blank">

غير كل ماهو باللون الأحمر بما يخص حساباتك على مواقع التواصل الإجتماعي .

شاهد أيضا إضافات أخرى قد تعجبك : إضافات بلوجر 

إضافة أزرار صفحات المواقع الإجتماعية منزلقة رائعة - بلوجر

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

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

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

توجه نحو لوحة التحكم الخاصة بك في بلوجر , و توجه نحو تخطيط ‘لى أساس إضافة إضافة جديدة .

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

إضافة أزرار صفحات المواقع الإجتماعية منزلقة رائعة 

• **********" rel="nofollow" target="_blank">Twitter
• 101926901344362278031" rel="nofollow" target="_blank">google+
• modawin.blogger" rel="nofollow" target="_blank">facebookمدون بلوجر

لا تنس أن تشارك التدوينة مع أصدقاء قد يحتاجونها :)

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

لا شك أن التعليقات في المدونات من أكثر الطرق فعالية لتقريب المتابع و الزائر لك و لموقعك .

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

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

ثم التوجه نحو تعديل قالبك بالنقر على "قالب" ثم "تحرير html" .

إبحث عن 

(للبحث إضغط على CTRL+F)

سيكون مكرر مرتين , توجه نحو الأولى ثم أضف تحتها مباشرة هذا الكود :

<div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Add Comments via Facebook'><img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieUjtioqe3FQqk4ErxXDfgR5BbPnMD88s4ZyXapYyKuV05xGlnLfm1L9AXwq76P0nIV-ZNFUUAQ2WJ0m2vXWgq8jM5Xf2FUPV4zI6SWij-bt3LxNUaTUFX5Kj4430v7dEvnGFMrUSm3Io/s1600/FACEBOOK.png'/><fb:comments-count expr:href='data:post.url'/> التعليقات</div><div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Add Comments via Blogger'><img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlP63BJqa2cgdK7ZSBnrfv4vDvkb4elIlIDYnUxjIEGfla_vxbA3fBn9PkB1siSnl5aeYTI2zEOHiI-OysWA_yqFilkqHfUuyz4JwxRqOruLkgxA8HaA-YDfLJlRmY2E6T4hpsZdtS4qU/s1600/BLOGGER.png'/> <data:post.numComments/> التعليقات</div><div class='clear'/></div><div class='comakauttafb-page' id='fb-comments-page'><b:if cond='data:blog.pageType == "item"'><div id='fb-root'/><fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='680'/></b:if></div><div class='comments comakauttafb-page' id='blogger-comments-page'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='additions.blogger' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comakauttafb-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comakauttafb-page").hide();$(selectTab + "-page").show();}</script><style type='text/css'>.comakauttafb-page, .comakauttafb-tab {-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-right:5px solid #ccc; border-top:3px solid #ccc; border-bottom:3px solid #ccc; border-right:5px solid #ccc}.comakauttafb-page {background:transparent;);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px 1px #fff;color:#000;float:right;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5sease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s ease-out}.comakauttafb-tab-icon {height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover {background:rgba(219,219,219,.8);}.inactive-select-tab {background:rgba(255,255,255,.4);}.inactive-select-tab, .comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000}</style>

(إن كنت تريد التعديل على عرض الإضافة لتتناسب مع عرض صفحتك , إبحث عن : width='680' و غير 680 بالعرض الذي تريده )

إضغط على "حفظ" , و شاهد الإضافة أسفل كل موضوع :)
إقرأ أيضا في : إضافات بلوجر

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

إضافة شاحنة الفيسبوك إلى مدونات بلوجر

لا تكاد أي مدونة تخلو من أي إضافة بلوجر كانت ضرورية أو غير ضرورية .

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

للحصول على هذه الإضافة المميزة , كل ما عليك فعله هو نسخ هذه الأكواد :

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

<!--www.modawin-blogger.blogspot.com--> <div style="position: fixed; z-index: 65535; left: 0px; bottom: -3px; width:100%;"><marquee><a href="https://www.facebook.com/modawin.blogger" target="blank"> <abbr title="Follow us at Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGP4ob5u-Z5-TuynewPQKbqrem8tOCExtTOK7YAm-hrbWF0prwEUKZ_025a6E8ESLPcR49xQgbCqBhj3iwp2tmugbDrKhhD9GXkL-xujbxY3RcqwP37EaVIQF6hzPyI0_8OxatBZy8HjEe/s69/I1.png"/> </abbr> </a> </marquee> </div><!--www.modawin-blogger.blogspot.com-->

الأن في هذا الكود , إبحث عن https://www.facebook.com/modawin.blogger و غيرها برابط صفحتك على الفيسبوك .
بعد النسخ توجه نحو لوحة التحكم في بلوجر ,
نختار تخطيك (mise en page)
تنشئ إضافة جديدة كما هو موضح في الصورة :

تختار الإضافة من نوع HTML/JAVASCRIPT كما هو في الصورة :
و تنسخ الكود في المكان الموضح .

كل ماعليك فعله الأن هو الضغط على حفظ , لتشاهد الإضافة في موقعك .

إن كنت استفدت و لو بالقليل , فلما لا تشاركه مع أصدقائك على الفيسبوك و تويتر ^_^

تكاد صفحة إتصل بنا لا تكاد تغيب عن أي مدونة لأهميتها الكبرى , حيث تقرب المتابع من الموقع و يمكن من خلالها الإستفسار أو التواصل مع صاحب الموقع .

فإن كنت تعاني من مشاكل في إضافة صفحة إتصل بنا إلى مدونتك على بلوجر , فتابع الشرح بالصور ^_^

موقع http://fr.foxyform.com/ يقدم خدمة الحصول على صفحة إتصل بنا في بلوجر مجانا و بدون أي تعب أو جهد يذكر , حيث أنه لا يتوجب عليك التسجيل في الموقع .

3 خطوات بسيطة تقوم بها هو كل ما عليك فعله ,

إملأ البيانات حسب رغبتك (تابع الصورة)

و اخيرا الضغط على زر إنشاء الصفحة 

إضافة صفحة إتصل بنا لمدونة بلوجر

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

لم يتبق لك إلا أن تتوجه نحو لوحة التحكم في بلوجر ثم الصفحات :

أنشأ صفحة سميها : إتصل بنا 

ثم ألصق الكود بعد إختيار خاصية الhtml كما هو موضح في الصورة

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

إنشاء صفحات الخطأ في بلوجر

صفحات الخطأ , من بين النقاط التي يغفل عنها أغلبية أصحاب المدونات و المواقع .. بالرغم من أهميتها الكبرى .

على أساس تفعيل صفحات الخطأ في مدونتك , كل مل عليك فعله هو التوجه نحو لوجة التحكم الخاصة بك في بلوجر ومن ثم :

- إعدادات

- تفضيلات البحث

- الأخطاء وعمليات إعادة التوجيه

ومن ثم تابع ما هو موجود في الصورة

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

إليك هذه الكود المعد بواسطة مدون بلوجر :

<style>#modawin-blogger-error-page{ background:rgb(112, 112, 112); width:500px; margin-right:auto; margin-left:auto; padding-top:40px; padding-bottom:40px; border-radius:20px; border:3px rgb(73, 73, 73) solid; direction:rtl; margin-top:20px; margin-bottom:20px; } #modawin-blogger-error-page h2{ color:rgb(185, 185, 185); font-size:40px; direction:rtl; } #modawin-blogger-error-page h1 a{ color:rgb(190, 190, 190); font-size:35px; padding:10px; background:rgb(58, 58, 58); border-radius:10px; border:4px solid rgb(185, 185, 185); width: 250px; margin-right:auto; margin-left:auto; direction:rtl; } #modawin-blogger-error-page p{ color:white; direction:rtl; } </style><div id="modawin-blogger-error-page"><h2>صفحة خطأ - Error Page </h2><a href="http://www.modawin-blogger.blogspot.com/" style="display:none;" >مدون بلوجر</a><p>الصفحة التي تبحث عنها غير موجودة أو تم حذفها توجه نحو الصفحة الرئيسية عبر : </p><h1><a style="text-decoration:none;" href="/">الرئيسية </a></h1></div>بعد نسخ هذا الكود كاملا , قم بلصقه في المكان المخصص الذي ظهر لك 

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