في درسنا اليوم سوف نتعرف على طريقة اضافة تبويب متعدد على الشريط الجانبي " sidebar " لمدونات بلوجر ، كما نلاحظ بأن عملية التبويب تقلل الحيز والمساحة المستهلكة عندما تضيف ثلاثة اضافات تأخذ حيز كبير من قالبك لذلك سوف نقدم لكم شرح طريقة التركيب .
::: طريقة التركيب :::
1- ادخل إلى مدونتك ، ثم اختر لوحة التحكم .
2- من لوحة التحكم اختر قالب ثم تحرير قالب .
3- ابحث عن الوسم :
4- ضع الكود التالي فوقه .
/* Multi Tab Widget */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:right}
.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}
5- ابحث عن الوسم :
6- ضع الكود التالي فوقه .
<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>
7- بعد ذلك ابحث عن هذا السطر ، إذا لم تجده ابحث عن جزء منه .
في درسنا اليوم سوف نتعرف على طريقة اضافة محوّل اكواد html ، ومن الضروري أن يتوافر في مدونتك ، لأن عن طريقه تستطيع أن تحول اكواد اعلانات ادسنس أو غيره من الاكواد .
طريقة التركيب :
1- اختر لوحة تحكم مدونتك .
2- من لوحة التحكم ، اختر صفحات .
3- من صفحات اختر صفحة جديدة ، قم بتسميتها محوّل اكواد html .
4- من صفحة جديدة اختر وضعية HTML ، ثم اضف الكود في صندوق HTML ، ثم اضغط على زر نشر .
في درسنا اليوم سوف نتعرف على طريقة اضافة اكثر المعلقين تعليقاً لمدونات بلوجر ، وهذه الإضافة تحفز زوار مدونات للتعليق على مواضيع مدونتك للتنافس في من هو أكثر تعليقاً .
::: طريقة التركيب :::
1- اختر لوحة التحكم .
2- من لوحة التحكم ، اختر تخطيط .
3- من تخطيط اختر إضافة أداة :
4- اضف الكود التالي في صندوق الأداة ، ثم احفظ .
<style type="text/css">
.top-commentators { margin:8px 0; font:bold 14px arial; border:2px solid #111; padding:8px; -moz-border-radius:5px; -webkit-border-radius:5px; background:#333; }
.top-commentators:nth-child(1n+0) {background: #F49A9A;}
.top-commentators:nth-child(2n+0) {background: #FCD092;}
.top-commentators:nth-child(3n+0) {background: #FFF59E;}
.top-commentators:nth-child(4n+0) {background: #E1EFA0;}
.top-commentators:nth-child(5n+0) {background: #B1DAEF;}
.avatar-top-commentators { vertical-align:middle; border-radius:30px;border:2px solid #111; }
.top-commentators .commenter-link-name { padding-left:0; }
</style>
<script type="text/javascript">
var maxTopCommenters = 6;
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 = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsqif9iSGxGF9zzXX8MGvTJl9049P-Ln734M_X_396QMFEnQD0pS4Nn46wevgUIxfouPWG34LV6OXzMkn3cg6VCeged8MIqiP30jXLwAcb-GNLOaOkmbcrgd21Q0JeYG7ZIEVxQZljpE-S/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghgngRjIozvUbL8eWC-55Ck8Kj_MnpieVlHrXSpFwsvySzmq-p9NwyltyPPz9nBQxntBnoCUWmjg29V27_PkAu55-1BneGsMnhazC9na1V8nzN83JBnap9XZ6Wa5Vvj3JzQRLK65k1mlew/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>
في درسنا اليوم سوف نتعرف على كيفية اضافة أداة الملاحظات بشكل جديد واحترافي وممييز لمدونات بلوجر ، من منا لم يحتاج لعمل رسائل تنبيه في مدونته أو ملاحظة أو مقدمات لزوار المدونة ، ومن مميزات هذه الاضافة وهي عبارة عن صناديق ررسائل وتظهر بالشكل الذي تريده ، ذات اللوان جذابة و تعتمد هذه الإضافة على استخدام خطوط الوسوم وبصيغة CSS3 .
::: طريقة التركيب :::
1- اختر لوحة التحكم ، ثم اختر قالب بعد ذلك اختر تحرير قالب .
في درسنا اليوم سوف نتعرف على طريقة تركيب أزرار التحميل بأستخدام CSS لمدونات بلوجر ، وهذه الاضافة تعتمد على خط الوسوم ، ومن مميزات هذه الاضافة ، متجاوبة ، خفيفة وسهلة التركيب ، وفيها لمسة أحترافية جمالية .
في درسنا اليوم سوف نتعرف على طريقة تركيب ايقونات المواقع الاجتماعية تحت كل تدوينة لمدونات بلوجر، ومن مميزات هذه الاضافة تعمل على زيادة شهرة المدونة وسهولة مشاركة التدوينة عن طريق ضغطة زر .
::: طريقة التركيب :::
1- اختر لوحة التحكم من مدونتك .
2- من لوحة التحكم اختر قالب ثم تحرير قالب .
3- ابحث عن الوسم :
4- اضف الكود التالي فوقه .
/* CSS Share Button */
.share-post{text-align:center;margin-bottom:20px;margin-top:20px;padding: 10px 0 30px;}
.share-post ul {
margin: 0 auto;
width: 90%;
}
.share-post li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative; text-align: center;}
.share-post li:hover{}
.share-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;opacity:0.9;font-size:13px;transition:all 0.6s ease-out;}
.share-post li a:hover{color:#fff;opacity:1;}
.share-post li .twitter{background-color:#19bfe5;}
.share-post li .facebook{background-color:#3b5998;}
.share-post li .gplus{background-color:#d44132;}
.share-post li .pinterest{background-color:#cb2027;}
.share-post li .linkedin{background-color:#3b5998;}
.share-post li .tumblr{background-color:#304e6c;}
.share-post li .twitter:hover,.share-post li .facebook:hover,.share-post li .gplus:hover,
.share-post li .pinterest:hover,.share-post li .tumblr:hover{color:#fff;}
.share-post li:last-child{margin-right:0}
.share-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;background:rgba(0,0,0,0.08);color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.share-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.share-post li .fa {display:initial;}
في درسنا اليوم سوف نتعرف على طريقة تركيب سلايد شو مدونة هوم بلوجر الاحترافي ، ومدونة هوم بلوجر تقدم هذا السلايد شو هدية لأعضاء المدونة ، السلايد شو لا مجال لوصفه خفيف وأحترافي بمعنى الكلمة ، ومتجاوب ، وفيه لمسة أحترافية جمالية وسوف تشاهد ذلك بنفسك .
::: طريقة التركيب :::
1- اختر لوحة التحكم من مدونتك .
2- من لوحة التحكم اختر تخطيط .
3- من تخطيط اختر اضافة أداة :
4- اضف الكود التالي في صندوق الأداة ثم احفظ .
::: للحصول على كود سلايد شو مدونة هوم بلوجر طبق الشروط أدناه :::
في درسنا اليوم سوف نتعرف على إضافة تدوينات مختارة لمدونات بلوجر ، كما هي الإضافة في مدونة هوم بلوجر . مميزات الإضافة أنها متجاوبة وتعمل تلقائياً ، وهي منبثقة ، تحتوي على زر( X ) وزر ( ـــ ) للتحكم بالإضافة ، وعلاوة على ذلك الإضافة تعرض موضعين من مواضيع مدونتك عشوائياً .
في درسنا اليوم سوف نتعرف على طريقة استخدام خط الوسوم في مدوناتنا ، وكما تعلم بأن خط الوسوم من الخطوط الرائعة والذي يغنينا عن مشقة البحث عن الايقونات ، ومن مميزات هذا الخط أنك تستطيع أن تتحكم به من حيث تكبير وتصغير الإيقونة أو اضافة التأثير عليها أو التحكم بإتجاه الإيقونة ونحن شرحنا ذلك ويمكنك مشاهدة الشرح من هـــــنــــا.
::: نأتي الآن إلى طريقة خط الوسوم على مدوناتنا :::
5- نحن اخترنا لكم الإيقونات الأكثر استخداماً ، وتستطيع أختيار الإيقونة التي تناسبك وتستخدمها في وضعية HTML في مشاركاتك أو استخدامها في تصميم إضافة معينة .
6- كيفية التحكم بالإيقونة من حيث الشكل وخلفية الإيقونة ولونها والتأثير عليها . ونحن اخترنا لكم بعض الأكواد التي تتحكم بالإيقونة من حيث الشكل ولون والتأثير .
:: نأخذ الشكل الأول ::
والكود الذي يتحكم بالإيقونة من حيث الشكل ولون والتأثير هو كود CSS ، طريقة استخدامه :
1- اختر لوحة التحكم من مدونتك .
2- من لوحة التحكم اختر قالب ، ثم تحرير قالب .
3- ابحث عن الوسم :
4- اضف الكود التالي فوقه .
#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: ضع هنا لون الخلفية للإيقونة;
color: ضع هنا لون الإيقونة;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: ضع هنا لون التأثير على الإيقونة;
}
::: للإستخدام كود اللوان إذا لم يتوافر في مدونتك من هـــنـــا .
- التغيرات مشروحة داخل الكود .
::: نأتي الآن إلى الشكل الثاني :::
- طريقة التركيب نفس طريق تركيب الشكل الأول .
#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
background: هنا ضع لون خلفية الإيقونة;
color: هنا ضع لون الإيقونة;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: هنا ضع لون التأثير على الإيقونة;
}
::: الشكل الثالث لهذه الإيقونات :::
#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid ضع لون اطار الإيقونة;
color: ضع هنا لون الإيقونة;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: ضع هنا لون التأثير على الإيقونة;
}
::: الشكل الرابع من أشكال أيقونات خط الوسوم :::
#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid ضع هنا لون اطار الإيقونة;
color: ضع هنا لون الإيقونة;
display: inline-block;
font-size: 16px;
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a:hover{
background: ضع هنا لون التأثير على الإيقونة;
}
::: الشكل الأخير لإيقونات خط الوسوم :::
#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
color: ضع هنا لون الإيقونة;
display: inline-block;
font-size: 23px;
margin: 0 6px 6px;
}
#fawesomeicons a:hover{
background: ضع هنا لون التأثير على الإيقونة;
}.
