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

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

كما تعلمون أنه عندما تتصفح مواضيع مدونتك على بلوجر تجد في أخر كل مجموعة مواضيع عبارة (رسائل اقدم) - (الصفحة الرئيسية) - (رسائل احدث)

إذا تركتها على مدونتك بهذا الشكل فلن تحصل على مشاهدات كثيرة لمواضيعك لأن هناك كثيرون من الزوار ليست لديهم نعرفة بهذه الأزرار قسيقومون بقراءة الصفحة الأولى من مدونتك ثم يتوقفون عن التصفح ظنّاً منهم أن مواضيع الموقع  قد إنتهت :/

لا بأس إبتسم :D فهناك الحل بشرح بسيط جدا

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

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

شاهد مثال موقع النكت

الأن الشرح :

تبديل رسائل أحدث Newer Post

قم بالذهاب إلى عناصر الواجهة > تخطيط > توسيع القالب ثم إظغط Ctr+f

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

 قم باستبداله بهذا الكود

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOzcr90WGS3e5bHexIlfx_669vN4Xaug-ZqxSIDLdHUsLeOoEAWwlZIDtbqMUcX59TEGQ_NvSIyu22myGCppJgNGE3fXzX-FnIzNueHUKEgEYfWPNKLns_DG2grJ1ZR_RGaM9Qacwi8U-0/s1600/التالي.png" />

 الصورة الحالية التي ستظهر هي

 قم باستبدال رابط الصورة الذي بالأحمر إذا أردت وضع صورة أخرى

تبديل رسائل أقدم Older Post 
قم بالبحث عن الكود

قم بتغييره بهذا الكود

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhee9OMmreeH32e6OVjNNw2reltMKq1t991iqvJ8nXAuWUa_In_IGZyj99bJ_3rJXuuaHjlZXgyE9QB6gTI3crfxX14wJOJbOmfTs63P-cEg3xIEYYOTtlHNQ6GGOCBxoGyj5NBYiTAkqAJ/s1600/القديم.png" /> 

 الصورة هي

تبديل الصفحة الرئيسية  Home page
قم بالبحث عن

قم باستبداله بهذا الكود

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQzlSqi7QmoOyEJnAxQaibKrlDVZvxPB2HPgHUg9NSfh6ASqLowjNQhVgcumGcY2H7iqWSu0kYXCaH_ibFo2gGM93BXXLIpaf_ebdyJWxPUJ5BLxCtdWr__muPxrdQPXCFMiGz8_1HmdUm/s1600/الرئيسية.png" /> 

---

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

و هناك إضافة أخرى ستكون جميلة وضعتها مسبقاً على عفريت بلوجر (كيفية وضع ترقيم الصفحات للمدونات بلوجر شاهد الشرح المصور أيضاً وقم باختيار اي الإضافتين أعجبتك و أضفها للمدونتك و إن كان لديك اي سؤال يمكنك التعليق أو التواصل معي على صفحتي في الفيسبوك مرحبا بك :) 

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

بالتوفيق للجميع ^^

كيفية وضع صور خلفية لمدونة بلوجر تتغير كل مرة

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

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

توجه للوحة إدارة مدونتك ثم إلى تحرير قالب HTML مدونتك و ابحث عن الوسم

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

قم بتغيير الروابط  باللون الأحمر بروابط الصور التي تريد ظهورها في الخلفية

يمكنك زيادة عدد الصور الذي تظهر كل مرة في مدونتك بزيادة سطور إضافية للصور وهذا مثال أنا وضعت 3 صور في الكود يمكنك أن تقوم بزيادة السطور في الكود أسفل هذا السطر

images[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvcABh96fWrgYvZQCjS2cff2yXkcAqKnYKkpvljelIDFH3QMLS4B0pv-jJ5rpsM21xmUoxmuC5DXvRp3XaSgrloYACZlDyLETFbt8gSGh7zYHIm5U2X0tVtoPdayhQ5Cu4fpi97KKJ2zw/s1600/Study.jpg"
images[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvcABh96fWrgYvZQCjS2cff2yXkcAqKnYKkpvljelIDFH3QMLS4B0pv-jJ5rpsM21xmUoxmuC5DXvRp3XaSgrloYACZlDyLETFbt8gSGh7zYHIm5U2X0tVtoPdayhQ5Cu4fpi97KKJ2zw/s1600/Study.jpg" 
images[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvcABh96fWrgYvZQCjS2cff2yXkcAqKnYKkpvljelIDFH3QMLS4B0pv-jJ5rpsM21xmUoxmuC5DXvRp3XaSgrloYACZlDyLETFbt8gSGh7zYHIm5U2X0tVtoPdayhQ5Cu4fpi97KKJ2zw/s1600/Study.jpg"  
images[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvcABh96fWrgYvZQCjS2cff2yXkcAqKnYKkpvljelIDFH3QMLS4B0pv-jJ5rpsM21xmUoxmuC5DXvRp3XaSgrloYACZlDyLETFbt8gSGh7zYHIm5U2X0tVtoPdayhQ5Cu4fpi97KKJ2zw/s1600/Study.jpg"  

و لا تنسى تغيير الأرقام باللون الأزرق في كل سطر

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

بالتوفيق ^^

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

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

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

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

• إذا كنت تمتلك مدونة بلوجر فتوجه للوحة إدارة مدونتك

و توجه للعناصر الواجهة

 قم بإضافة عنصر HTML/JavaScript جديد

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

• وإذا كنت تمتلك موقع على منصة أخرى غير بلوجر مثل ووردبريس أو غيرها فقم بوضع الكود أيضا ضمن عنصر HTML/Javascript أو في قالب مدونتك أو موقعك فوق

الكود :

• https://twitter.com/radouaneouarhou" rel="nofollow" target="_blank">Twitter
• https://plus.google.com/u/0/b/103818064703943204996/103818064703943204996" rel="nofollow" target="_blank">google+
• https://www.facebook.com/3efritblogger" rel="nofollow" target="_blank">facebook

قم بتغيير روابط الصفحات الملونة بالأحمر داخل الكود بروابط صفحاتك الخاصة و قم بالحفظ

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

بالتوفيق ^^

إضافة أكثر الزوار و المدونين تعليقاُ لمدونات بلوجر بسكريبت بسيط

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

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

أولاً توجه للعناصر الواجهة

ثم افتح عنصر HTML/JavaScript جديد

  ثم قم بلصق السكريبت التالي فيه

<style type="text/css">.top-commentators {margin: 3px 0px;border-bottom: 1px dotted #CCC;font-family: arial;color: #FF764C;}.top-commentators b{color: rgb(132, 132, 132);} .avatar-top-commentators { vertical-align:middle; border-radius: 30px;}.top-commentators .commenter-link-name {padding-left:0;} </style><script type="text/javascript">var maxTopCommenters = 10; var minComments = 1; var numDays = 0; var excludeMe = true; var excludeUsers = ["Anonymous", "someotherusertoexclude"]; var maxUserNameLength = 42; // var txtTopLine = '<b>[#].</b> [image] ([user]) ([count]) '; var txtNoTopCommenters = 'No top commentators at this time.'; var txtAnonymous = ''; // var sizeAvatar = 45; var cropAvatar = true; // var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCuYjQovNHD0gHsFJ20Kcsr0v0kvR5Q7gIf0Pi8IFLNzPfZx2p9XBEMDZ-g6QyzS4TCKVW8iBeuE07vYf5RSG30cmbm2Z9QnSFe4gHx3RRku-jf500gS-9mcSHtX5WriakLrudhpT7D9Kw/s1600/avatar_blue_m_96.png" + sizeAvatar; var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxf28L2Xng2v3QV8itpma0DuL7U8ytXdZEzzkdhJkCzz-9cQjbPNzQgi5R49TABM7yqr5wXOy1i-tL8gqRK9JySIiEsXlrMwhAZ5JiRnGTb7i-No4V2629Se6EQkDDS7gndY7WKdfRRWX-/s1600/avatar1.png' + sizeAvatar; var urlMyProfile = ''; var urlMyAvatar = ''; if(!Array.indexOf) { Array.prototype.indexOf=function(obj) { for(var i=0;i<this.length;i++) if(this[i]==obj) return i; return -1; }} function replaceTopCmtVars(text, item, position) { if(!item || !item.author) return text; var author = item.author; var authorUri = ""; if(author.uri && author.uri.$t != "") authorUri = author.uri.$t; var avaimg = urlAnoAvatar; var bloggerprofile = "http://www.blogger.com/profile/"; if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile) avaimg = author.gd$image.src; else { var parseurl = document.createElement('a'); if(authorUri != "") { parseurl.href = authorUri; avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname; } } if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar; if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") avaimg = urlNoAvatar; var newsize="s"+sizeAvatar; avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/"); if(cropAvatar) newsize+="-c"; avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/"); var authorName = author.name.$t; if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar) authorName = txtAnonymous; var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />'; if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>'; if(maxUserNameLength > 3 && authorName.length > maxUserNameLength) authorName = authorName.substr(0, maxUserNameLength-3) + "..."; var authorcode = authorName; if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>'; text = text.replace('[user]', authorcode); text = text.replace('[image]', imgcode); text = text.replace('[#]', position); text = text.replace('[count]', item.count); return text; } var topcommenters = {}; var ndxbase = 1; function showTopCommenters(json) { var one_day=1000*60*60*24; var today = new Date(); if(urlMyProfile == "") { var elements = document.getElementsByTagName("*"); var expr = /(^| )profile-link( |$)/; for(var i=0 ; i<elements.length ; i++) if(expr.test(elements[i].className)) { urlMyProfile = elements[i].href; break; } } if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) { var entry = json.feed.entry[i]; if(numDays > 0) { var datePart = entry.published.$t.match(/\d+/g); var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]); var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day)); if(days > numDays) break; } var authorUri = ""; if(entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t; if(excludeMe && authorUri != "" && authorUri == urlMyProfile) continue; var authorName = entry.author[0].name.$t; if(excludeUsers.indexOf(authorName) != -1) continue; var hash=entry.author[0].name.$t + "-" + authorUri; if(topcommenters[hash]) topcommenters[hash].count++; else { var commenter = new Object(); commenter.author = entry.author[0]; commenter.count = 1; topcommenters[hash] = commenter; } } if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) { ndxbase += 200; document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>'); return; } // convert object to array of tuples var tuplear = []; for(var key in topcommenters) tuplear.push([key, topcommenters[key]]); tuplear.sort(function(a, b) { if(b[1].count-a[1].count) return b[1].count-a[1].count; return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1; }); var realcount = 0; for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) { var item = tuplear[i][1]; if(item.count < minComments) break; document.write('<di'+'v class="top-commentators">'); document.write(replaceTopCmtVars(txtTopLine, item, realcount+1)); document.write('</d'+'iv>'); realcount++; } if(!realcount) document.write(txtNoTopCommenters); } document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>'); </script>  



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

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

قم يالبحث عن  var maxTopCommenters = 10 في السكريبت وغير الرقم 10 بعدد الأشخاص الدين تريد ظهورهم

 قم يالبحث عن var sizeAvatar = 45;  في السكريبت وغير الرقم 45 لتغيير حجم صورة المعلقين

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

إضافة تكبير الصور بعد مرور مؤشر الفأرة عليها

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

معكم اخوكم عفريت بلوجر وفي جديد مواضيعي بعد غيبة طويلة لابد من الرجوع للقائكم و مشاركة مواضيع مفيدة معكم دائما لتطوير مدوناتنا و الرقي بها

درس اليوم هو كيفية جعل الصور تكبر عند مرور مؤشر الماوس عليها وهي جد رائعة وسهلة جدا يتم إضافتها بالإستعانة ببعض أكواد ال CSS و JQuery

قبل أن تتابع معي الشرح شاهد هذه الصورة التي لم أقم بإضافة التاثير عليها ثم شاهد الصورة الثانية التي قمت بإضافة التأثير عليها

---

[الصورة 1]

---

[الصورة 2]

 

• 

 

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

---

1 - في لوحة تحكم موقعك أو مدونتك قم بالتوجر لتحرير HTML 

وقم بالبحث عن الوسم التالي
]]> 

وقبله مباشرة قم بنسخ الكود التالي
↓

---

ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjpLZfwbS7LKKhldNoh1d0GhAhevc4vhe978GTQuFwSZ45wzpWlOJ4eVRLi4VcRLykCd3VJaj9uxsra-jNtasMDckLuj7i49XCMSxFB8UD2pmUuqXoFakccts68EMMouMsgFnQpxXxjYXP/) no-repeat center center; /* Image used as background on hover effect border: none; /* Get rid of border on hover */ }

---

 

2- الخطوة الثانية قم بالبحث عن الوسم 

وقم بنسخ الكود التالي ايضاً قبله مباشرة
↓

---

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); }); }); </script>

---

3 -الأن ما عليك إلا أن تنسخ رابط الصورة التي تريد أن يحدث عليها التاثير في اي مكان في مدونتك داخل هذا الكود سواء في عنصر جديد من هناصر الواجهة أو في تدويناتك...

---

• رابط صورتك هنا" />

---

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

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

هل من تعليق على هذا الموضوع طبعا سأجد تعليقات إن شاء الله

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

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

تعليقات ذات مظهر إحترافي وبعيد جدا عن المظهر الكلاسيكي و القديم للتعليقات العادية و افضل منها بكثير و ايضاً تحتوي خصائص مميزة جدا مثل المشاركة بالصور في التعليقات دون الحاجة لكود HTML لهذه الصورة

إليكم الشرح فرجة ممتعة

إعرف ترتيب موقعك واضف أداة PageRank Google لموقعك أو مدونتك

السلام عليكم ورحمة الله
ببساطة كيفية إضافة أداة ترتيب موقعك في غووغل ومثال للإضافة اسفل مدونتي في الصفحة الرئيسية

قم بكتابة رابط موقعك في الإطار ثم إضغط على Check PR

Check Page Rank of your Web site pages instantly:

ثم ثم بتطبيق الخطوات كما في الصور

ثم توجه للوحة تحكم موقعك وأنشئ اداة HTML جديدة واصق فيها الكود ثم احفظ القالب

بالتوفيق للجميع ^^

إضافة شريط أخر المواضيع مُتحركة في جميع الإتجاهات لمدونات بلوجر (↓↑ أو →←)

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

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

 لذلك هناك اربعة أكواد ستقوم بنسخ الكود الذي تريد وتضعه في إنشاء عنصر جديد على واجهة مدونتك HTML/JavaScript وتلصق فيه الكود ثم قم بتغيير رابط 3efrit.blogspot.com برابط مدونتك الذي تريد ثم تحفظ

كود الإضافة من اليسار لليمين:

كود الإضافة من اليمين لليسار :

 

كود الإضافة من التحت للفوق :

شاهد مثال للإضافة هنا
الموقع اصبح بنطاق مدفوع لذلك لم تعد تظهر وانا اشير انها تظهر للنطاقات .blogspot فقط

  

كود الإضافة من الفوق للتحت :

 

 ملاحظات** بالنسبة للأكواد

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

قم بتغيير كلمة 3efrit في رابط 3efrit.blogspot.com باسم قبل blogspot الخاص برابط مدونتك

 ثم يتغيير الرقم 20 في nMaxPosts = 20 لتغيير عدد المواضيع التي تريد أن تظهر

 و قم بالتغيير 150 على nScrollDelay = 150 لتغيير سرعة تحرك المواضيع الأخيرة وكلما نقص العدد كلما زادت السرعة الأكواد تعمل على مدونات بلوجر ذات النطاق blogspot أما عند تغيير النطاق للمدفوع فلن تظهر

 بالتوفيق للجميع

عفريت بلوجر

www.3efrit.net

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

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

الطريقة جد سهلة

1. اولاً قم بالتوجه لإنشاء صفحة جديدة في إدارة صفحات مدونتك
2. حول نمط الكتابة إلى HTML حتى يعمل الكود
3. ثم قم بلصق الكود التالي مع تغير رابط مدونة عفريت بلوجر باللَّون الأحمر برابط مدونتك

قم بحفظ الصفحة

  وستظهر لك بعد فتحها تحتوي على فهرس كامل لمواضيع مدونتك بالترتيب

ولا بد أن أشير لكون الفهرس سيظهر لمدونات نطاق blogspot أي بمعني يجب يكون رابط مدونتك مستضاف لدى بلوجر حتى يعمل السكريبت
أنا الأن لم أتمكن من الإستفادة من السكريبت لانني غيَّرت دومين مدونة عفريت بلوجر من دومين عند بلوجر إلى دومين مدفوع
 أما الصورة التي فوق فهو للفهرس الذي عملته لمدونتي قبل تغيير الرابط

موفقين إن شاء الله و لابد من مشاهدة تعليقاتكم أعزائي

بالتوفيق للجميع ^^

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

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

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

توجه للوحة HTML ثم توسيع القالب Ctrl+F و ابحث عن الوسم التالي

 ]]>

ثم قبله ضع الكود التالي

B][/B] [B] /* Author Bio */ .postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 0.7em; } .postauthor img { border: 5px solid #e2dede; float: right; margin-left: 1em; } .postauthor h3 { color: #666; font-size: 1.2em; margin-bottom: 5px; margin-top: 0; } .postauthor p { color: #515151; font-size: 12px; margin-bottom: 10px; margin-top: 0; } /* Author Bio End */ [/B]

لوضع بلون مدونتك أو لونك المفضل قم بتغيير الكود (الارقام الستة) باللون الأحمر للون الذي تريده

ثم ابحث عن الوسم 

توجد أكثر من واحدة وعليك إحتيار الثانية

ثم ضع بعدها مباشرة الكود التالي

بقلم  اسم الكاتب 

 فقرة تضم نبذة عن الكاتب 

قم بتغيير ما كتب باللون الأحمر برابط صورتك

واللون الأزرق باسم المدون أو الكاتب

وباللون الأخضر قم بوضع نبذة ولمحة عن صاحب الموضوع

ثم احفظ القالب وتمت الإضافة

بالتوفيق

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

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

واسعد الله اوقاتكم بكل خير

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

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

الان لنبدأ شرح طريقة وضعها في موقعك

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

ثانياً : قم بالتوجه لصفحة الإضافة على موقع أليكسا من هنا

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

أدخل رابط موقعك في الخانة المطلوبة مثلا www.3efrit.blogspot.com

ثم قم بنسخ الكود الموافق لأي حجم ترغب فيه وضعه في موقعك

وهذه بعض الأكواد قم فقط بنسخها وغير رابط مدونتي www.3efrit.blogspot.com باللون الاحمر مرتين إلى رابط مدونتك أو موقعك

.....................................................................

الحجم الاول مربع

الكود الخاص بها:

www.3efrit.blogspot.com">

.......................................................................

الحجم الثاني عمودي 2

الكود الخاص بها:

www.3efrit.blogspot.com">

.......................................................................

الحجم الثالث افقي

الكود الخاص بها:

www.3efrit.blogspot.com">

..............................................................

إلى هنا أكون قد انتهيت وأتمنى تتوفقوا في إضافة الأداة 

طبعاً أنا متفاعل جداً مع التعليقات ولاي استفسار أو تعليق لا تترددوا

بالتوفيق ^_^

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

مرحباً بكم من جديد على عفريت بلوجر مع تدوينة جديدة وجميلة إن شاء الله

 شرح مُبسط لوضع (البسملة) بسم الله الرحمان الرحيم فوق كل موضوع أي في بداية كل تدوينة أوتوماتيكيا دون الحاجة لكتابتها دائماً أو وضع صورتها دائما في البداية أثناء التدوين

تابع معي الشرح

توجه للوحة تحكم مدونتك ثم افتح لوحة تحكم HTML ثم ابحث عن الوسم التالي

ابحث عن الثاني

وقم بوضع مباشرة قبله الكود التالي الخاص بالبسملة كما في الصورة التي بدئت بها الموضوع

ولوضع صورة أخرى لبسملة بهذا الشكل:

قم بوضع الكود التالي

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

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

وسأرد أيضاً على أي تعليق في الموضوع

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

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

ومرحبا بكم من جديد على مدونة عفريت بلوجر

فكرة هذه التدوينة جائتني من أحد التعليقات التي طلب صاحبها مني كيف أن مدونة عفريت تتصدر الصفحة الرئيسية في غووغل باستعمال كلمة البحث " عفريت بلوجر" وطبعاً هذه صورة كاملة أثناء كتابة كلمة البحث عن مدونتي في غووغل

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

أيضا جعل مدونتك كالصارووووووووووووووخ

أولا توجه إلا لوحة إدارة منتداك ثم توسيع القالب ثم إضغط على Ctrl+F للبحث ثم ابحث عن

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

title>أكتب إسم مدونتك

طبعا للشرح كما عملت أنا شخصيا كمثال:

title>عفريت بلوجر

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

إلى درس أخر بالتوفيق واي تعليق دائما أنا في الخدمة

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

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

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

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

لكن هذه الإضافة جديدة ستكون أفضل إن شاء الله و هي تقوم بجمع كُل المواضيع المشابهة للتدوينة  على شكل أيقونات  الصُوَر الرئيسية للموضوع + عنوان الموضوع و جعلها متحركة من اليمين إلى الشِمال و من الشِمال إلى اليمين بجمالية وروعة كبيرة

للنبدأ الدرس

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

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

ثم قم بوضوع هذا الكود (بعده) أسفل منه مباشرة

 

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

ستجد أكثر من للذلك اختر الثالثة

و قم بوضع اسفل منه مباشرة هذا الكود

 

قم بحفظ القالب و هنيئا لك الإضافة

أخبروني بافكاركم و ارائكم حول الإضافة بتعليقاتكم

و إلى قادم الدروس إن شاء الله

بالتوفيق ^^