معجبي بوزبال : bloger

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

0 التعليقات


أهلا و سهلا بكم من جديد، في هذا الموضوع سوف نتطرق الى معرفة كيفية اضافة 3 أعمدة أسفل المدونة والتي تحظى بها القليل من المدونات ،وتتمثل أهمية هذه الاضافة في تنظيم و تنسيق المدونة و اجتناب تراكم أدوات بلوجر مما قد تسبب ازعاج لزوار مدونتك .




محاذاة إلى اليمينانتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).

]]></b:skin>
ثم قم بلصق الكود التالي فوقه :
#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}
ثم قم بالبحث عن الكود التالي:
<div id='footer-wrapper'>
فإن لم تجده قم بالبحث عن كود يحتوي على كلمة footer-wrap, footer, footer-end أو ماشابهها .

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

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>



#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

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

إدراج ترقيم الصفحات لمدونات بلوجر

0 التعليقات

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




انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascriptولآن الصق الكود التالي :

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #EF00BF; /* لون إطار الأرقام */
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #EFB700; /*لون إطار الأرقام عند لمسه بالماوس */
background-color:#00EFEF; /* لون مساحة الإطارعند لمسه بالماوس*/
}
.showpagePoint {
color::#EF2000; /* لون رقم الصفحة المفتوحة */
text-decoration:none;
border: 1px solid #FA2100; /* لون إطار رقم الصفحة المفتوحة */
background:#E9FA00; /*لون مساحة إطار رقم الصفحة المفتوحة */
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #A256C3; /* لون إطار "التالي, السابق" */
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#0AEA82; /*لون الأرقام */
}

</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5; /* عدد المواضيع المراد عرضها في صفحة الواحدة*/
var displayPageNum=3; /* عدد الصفحات التي يتم إدراجها */
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Prevous';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.monte-escalier-prix.org">www.monte-escalier-prix.org</a></div>

و اخيرا و ليس آخرا قم بإزاحة الأداة تحت "رسائل المدونة الالكترونية" كما هو موضح في الصورة اسفله
في الكود أعلاه يمكنك تغيير الأرقام الحمراءحسب رغبتكم.
1 : var pageCount = 5;
هذه القيمة تمثل عدد المواضيع المراد عرضها في صفحة الواحدة
2 : var displayPageNum = 3;
هذه القيمة تمثل عدد الصفحات التي يتم إدراجها.




















ثم قم بالحفظ

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

0 التعليقات

السلام عليكم ورحمة الله تعالى وبركاته ،هناك بعض المدونات التي لها أكثر من مؤلف أو كاتب بها وهذا ما يجعل المدونة أكثر طرحا للمواضيع لذلك سوف نقوم في هذا الدرس بتعلم كيفيةإضافة صورة الكاتب تحت عنوان الموضوع الذي قام بكتابته ،مما يسهل على الزائر بمعرفة صاحب المقال وعدم الخلط بين المؤلفين ،وكذلك تجعل المدونة أكثر تنسيقا وسهلة إذا كنت تتابع مقالات كاتب معين ،والصورة أسفله مثال على ذلك ،حيث أنني قمت بوضع صور عشوائية فقط للتوضيح .
image alt

الآن نتوجه لتطبيق الإضافة على مدونتك
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3><font size="0"><a href=" http://www.pergola-aluminium.org/"></a></font>
</b:if>
ثم قم بلصق الكود التالي تحته مع إدخال إسم الكاتب ورابط الصورة الخاصة به
<b:if cond='data:post.author == "إسم الكاتب الأول"'>
<span class="author"><img src="رابط صورة الكاتب الأول"/></span>
</b:if>
<b:if cond='data:post.author == " إسم الكاتب الثاني"'>
<span class="author"><img src="رابط صورة الكاتب الثاني"/></span>
</b:if>
<b:if cond='data:post.author == " إسم الكاتب الثالث"'>
<span class="author"><img src="رابط صورة الكاتب الثالث"/></span>
</b:if>

ملاحظة : يمكنك زيادة  عدد مؤلفي المدونة كما تريد وذلك بإضافة هذا الكود وإعادته في عدد المرات المراد زيادرها تحت الكود السابق.
<b:if cond='data:post.author == " إسم الكاتب "'>
<span class="author"><img src="رابط صورة الكاتب "/></span>
</b:if>

ملاحظة هامة : 
يجب أن يكون إسم الكاتب نفسه الإسم الموجود في لائحة مؤلفين المدونة والذي يمثل إسم تعريف المدون. 

الآن قم بالبحث عن الكود التالي :
]]</b:skin>
ثم قم بلصق الكود التالي قبله :
.author img{
padding: 0;
 float: left;
 border: none; 
margin: 0 10px 10px 0;
}
يمكنك التعديل على الأبعاد  0 0px 10px 10px لإجاد المكان المناسب لتموضع صورة الكاتب في المدونة,ويمكنك كذلك وضع صورة الكاتب على اليمين وذلك بإستبدال الكلمة left  بالكلمةright
قم بحفظ القالب 
أتمني أن تكونوا قد إستفدتم من هذا الإضافة الجديدة ،في إنتظار آرائكم وإستفساراتكم ،دمتم بود

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

0 التعليقات

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F )
]]></b:skin>
ثم قم بوضع الكود التالي قبله 
.post img {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}

.post img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}
يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك  سواء على اليسار أم على اليمين وذلك بإستبدال الرمز (+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس  وتمثل كذلك القيمة  1deg- درجة الميلان عند وضع مؤشر الماوس على الصورة .


والتتيجة تكون الصورة على هذا الشكل .

هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة،في إنتظار آرائكم وإستفساراتكم حول الموضوع .

إضافة الصور المنبثقة Jquery Lightbox التلقائية

0 التعليقات

السلام عليكم ورحمة الله تعالى وبركاته ، مرحبا بكم أحباءنا الكرام في تدوينة جديدة بعد هذا الغياب عن تقديم كل ما هو جديد في عالم التدوين ،تلقيت عدة رسائل تسألني عن طريقة تركيب خاصية الصور المنبثقة Jquery Lightbox والآن أتيت لكم بالجديد ،فكثير منكم من قام بتطبيق العديد من المحاولات لهذه الإضافة في مدونته لكن بدون فائدة وما يزيد الطين بلة هو يجب تعديل كودHTML  لكل صورة علي حدة ووضع الجملة rel="lightbox" title="Your image Caption"  بعد الوسم" a>" الذي يخص الصورة ،أما الآن مع الخاصية الجديدة التي أتيت لكم بها  تقوم بتفعيل الصور المنبثقة لجميع الصور التي تحتوي عليها المدونة بصفة تلقائية ولا داعي لإضافة أي شيء على كود الصورة ,ولمعاينة هذه الإضافة قم بالضغط على الصورة أسفله .


والآن بعد أن قمت بمعاينة الإضافة سوف نتوجه إلى التطبيق على المدونة ما عليك سوى البحث عن الوسم :
</body>
ثم قم بلصق الكود التالي قبله مباشرة :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>
<script src='http://lightboxabuiyad.googlecode.com/svn/jquery.lightbox-0.4.js' type='text/javascript'/>
<link href='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(function() {
$(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).lightBox();
});
</script><font size="0"><a href=" http://www.pergola-aluminium.org/ "></a></font>
هل ترون كم الأمر بسيط ،ومبروك عليكم جميعا مع متمنياتي لكم بمتابعة ممتعة  .

قائمة إدارة المدونة على مدونات بلوجر

0 التعليقات


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

تطبيق الإضافات :
1.قم بإضافة القائمة العلوية التي تقوم بإظهار وإخفاء 3 إضافات في وقت واحد من هنا ،لكن لا تقم بتطبيق المرحلة الخامسة والأخيرة والتي يطلب منك إضافة كود بعد الوسم body
2.قم بالبحث عن الوسم :
<body>
ثم ضع تحته هذا الكود 
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<b:section class='left' id='left' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
<div class='left'>
<b:section class='center' id='center' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
<div class='left right'>
<b:section class='right' id='right' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>الإدارة</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' id='open'>إظهار</a>
<a class='close' id='close' style='display: none;'>إخفاء</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
3.قم بالبحث عن الوسم :
]]></b:skin>
ثم ضع فوقه هذا الكود :
ul.adminbar
    {      background-color:#F5EDE3;
        border:1px solid #F5EDE3;
        margin-bottom:8px;
        padding:5px 5px 0;
    }
    ul.adminbar li {
        background-color:#E6DAC9;
        border:1px solid #999999;
        list-style:none outside none;
        margin-bottom:6px;
        outline:1px solid #D0CBE5;
        padding:12px 0px 20px 50px;
}
    ul.adminbar li a
    {      display:block;
        color:#333333 !important;
        text-shadow:1px 1px 0 #fff;
        text-decoration:none;
        font-size:20px;
        height:27px;
        margin:0 0 0 15px;
    }
    a.dashboard
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYmfJDmpNh8v0cMIky7yDjeTSWR33gmRbbmozUvq_E8wQGCmlTUbhK_t1MsmNiBIaLmRVHxfKN_Zt8N7APcI82Hth4TI5FfTVB15PsNy0835CdDyXJQM4JLgRCSaUDjT2Q0bI_2ToheLZU/s1600/dashboard.png) no-repeat 0px 0px;
        padding:4px 0 2px 47px;
    }
        a.settings
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUUZO976ygFeygiJOkjUNON5OIEI5x9_9YEQPox2S4Ti3qmxwAN3W3qpPOL78olHD52ogXNYpjaTdxKwabwJTjM0nZIjJuqFQJDzJv-eD6UIiKRj5dvMct_Prk04bOfWwgLnJvM-X9Sz8i/s1600/setting+blogger.jpg) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
        a.layout
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIEEdIi7tPC6DkFIq_QBnZ78wxOM7uLAZXQdQQiMEjpX16HR_CBGUGib8lz4efw7UIWcURzJDg1d5aFAFoox77gsMwOy6qzXY1b22P_zu8nZgerxRJ18oGdSu7zSPSEc_6kddsUsDfyQ9a/s1600/3anasir.jpg) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
        a.editpost
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Okj6QXhnsSvHtWvfLz3Wu8xF6wLW0OPKg78keD7Y8VqX1mM9coUyFYqx3LAIPwvEN2xP7DJfVyhhAIFLw6PiW_IIg35efmIQiDgbUTgEsSPUZeQxj0OlXEwV1qu5nqYflndCsir2283V/s1600/edit.png) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
        a.newpost
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMuMHYR-6ZRH2w3yTy8SxjdsLzKdhyphenhyphenBDM7fbP4p2laoDUluw13EndqL76DlkOXS174RJKtfZ2sVUGDF01RspNcnaKZC4aqS_o28c4ahbN6AOEXBSVSrgX2wkJ0EYn0DcFm2aGOTVDCzCJF/s1600/add+message+blogger.png) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
    a.statistic
    {      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkMiygs-2kEJEgd2ZXy_-76eYq-DZAg5mv40l-Sn-MveZpqO1UiGacpRiP8GgMHY2UNh1ardh8wyYr5wW-j9pS-_BycSo6e-2tcsA9sjpZ_PSmvnXcQ3R8S-K_MC3lQckmocro6abwzU8V/s1600/Statistics+blogger.png) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
4.توجه إلى تصميم مدونتك سوف تلاحظ أنه تمت إضافة 3 قوائم لإضافة أداة جديدة فوق هيدر المدونة 
5.الآن سوف نقوم بإضافة القوائم في الأدوات الجديدة التي تم إنشؤها 
6.القائمة العلوية :
-قم بإضافة هذا الكود في أداة جديدة .
<ul class="adminbar">
<li><a class="layout" href="http://www.blogger.com/rearrange?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr1Hf-y84qNmBOBLY0IP3vpWtQlENh371zPptLyAP-tAcO88rwIWOy_x773kwdo-gWBgZMDyPm06i0wYLw_w8SoAHZOhwfjL1Dd8NWhhPLO1zo2GNvKnCSQCamuIdrL2hAwFI7EV6Ca2Q/s1600/tasmim.png" title="" alt=""/>
</a></li>
<li><a class="statistic" href="http://www.blogger.com/stats2.g?blogID=xxxxxxxxxx" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD-Aau8u3m4sSOgs9cZsDQalRcTOKnucLK_Ik-22EiMF3ii0JCcJwqLBdjiMugAvuJOpejmATFLXfmS5Utio6s4nNqCNTwizijCDnCUiPJFKEn1XFmZOapl05TQWBo4bkF7ywOeTA3WDQ/s1600/statistic.png" title="" alt=""/>
</a></li>
</ul>
القائمة الوسطى :
-قم بإضافة هذا الكود في أداة جديدة .
<ul class="adminbar">
<li><a class="editpost" href="http://www.blogger.com/posts.g?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_hHvzRz-d7k_TT4T2fIfMpCfzyOvQifBoyOL1WIHp_0mteDqzbwbs-Xygd0D69yQNrm7gvLfADCoxTSA_RBX9JSli0NGmng3gI82K-olrwYURwSvSNxF_llVia57zrF-our_X85tuU6U/s1600/edit+message.png" title="" alt=""/>
</a></li>
<li><a class="newpost" href="http://www.blogger.com/post-create.g?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-OAcbeHFvppImefiA6Cj-J0E2rCXpJkOSBBb_Ywy62FAslFWiGGoA-oUZM1uu-t7svaAz5vs1YXpc_NEuBO9AxdTSnk9C-cKkaLaDU3QV-Ru3eLSEV0VqikXHiDygj30AoihIuP5QKLg/s1600/new+message.png" title="" alt=""/>
</a></li>
</ul>
القائمة السفلية :
-قم بإضافة هذا الكود في أداة جديدة .
<ul class="adminbar">
<li><a class="dashboard" href="http://www.blogger.com/home" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLiPjes9x-yQcXq4cn-_19t758QBm1m7oG-xbEHHCKnOe_EtWmaKKsg5JLtwRt4icLzw81NFcM0Fmmm9tbLPjfd-ST6a7edmRxJcXmowLMNirkXk4N9a8DYdRi-1lZQbItCgyxzF4yD1Q/s1600/lawa77a2.png" title="" alt=""/></a></li>
<li><a class="settings" href="http://www.blogger.com/blog-options-basic.g?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvSmBOWO2JoicbXdsfe_oSFqUmqFNa96ccemHBwBtLNfPzJAwjMU8XKRQNuHs4nGQX9XWZF_C4jNYAngOZo1cSmpcFOTXMvCKXswOKWYO0ADGGEPx3OBZJ7mtlapIsWfLQY5ogE9ZAO9o/s1600/setting2.png" title="" alt=""/>
</a></li>
</ul>
7.عند إضافتك لجميع القوائم لا تنسى أن تقوم بإستبدال xxxxxxxxxx من جميع أكواد الإضافات الثلات برقم تعريف مدونتك،وللحصول على هذا الرقم كما هو موضح أسفله .
ملاحظة : لقد قمت بتغيير ألوان القائمة العلوية لتكون متناسقة مع مدونتي،لأن الإضافة توجد باللون الأسود كما هو موضح في شرح الأخ خالد 
أتمنى أن تعجبكم هذه الإضافة الجديدة في إنتظار إستفساراتكم وآرائكم حول الموضوع

إضافة نوافذ المفضلات الإجتماية الجانبية لمدونات بلوجر

0 التعليقات

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





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


]]></b:skin>
ثم قم بلصق هذا الكود قبله : 


img,a{border:0}#on{visibility:visible}#off{visibility:hidden}#facebook_div{width:196px;height:340px;overflow:hidden}#twitter_div{width:246px;height:353px;overflow:hidden}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px}#knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px}#kakinetwork_div{width:300px;height:97px;overflow:hidden}#facebook_right{z-index:10005;border:2px solid#3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px}#facebook_right img{position:absolute;top:-2px;left:-35px}#facebook_right iframe{border:0px solid#3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px}#twitter_right{z-index:10004;border:2px solid#6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0}#google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid#006ec9;border-top:2px solid#0056a0;border-bottom:2px solid#0056a0;border-right:2px solid#0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid#5b5b5b;border-top:2px solid#5b5b5b;border-bottom:2px solid#5b5b5b;border-right:2px solid#5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0}#kakinetwork_right{z-index:10003;border:2px solid#303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_right img{position:absolute;top:-2px;left:-101px}#facebook_left{z-index:10005;border:2px solid#3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px}#facebook_left img{position:absolute;top:-2px;right:-35px}#facebook_left iframe{border:0px solid#3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px}#twitter_left{z-index:10004;border:2px solid#6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid#006ec9;border-top:2px solid#0056a0;border-bottom:2px solid#0056a0;border-left:2px solid#0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid#5b5b5b;border-top:2px solid#5b5b5b;border-bottom:2px solid#5b5b5b;border-left:2px solid#5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}#kakinetwork_left{z-index:10003;border:2px solid#303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_left img{position:absolute;top:-2px;right:-101px}.box-title1{border:1px solid#ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px#CCCCCC;-moz-box-shadow:5px 5px 5px#CCCCCC;box-shadow:5px 5px 5px#CCCCCC;padding:10px;margin:10px 0}.enteryouremail{background:#fff!important;border:1px solid#d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px}.submitbutton{background:#F2F2F2;border:1px solid#F66303;-webkit-box-shadow:3px 3px 3px#666;box-shadow:3px 3px 3px#666;font:bold 12px Arial,sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer}

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZjX0OhLeB1qaESxU3A3lrIPXYPVw0IGJP6_XxyA9S4qgoQi2Zyzrw7ThX5pzSrIEX0x65uhZf-gYn7s6g7NZkcvDmMVa755sGLbtazhtnIhbpcZuQQT0OdrAqiLs5-110G8VXD0lecwXd/s1600/facebook-icon.png" alt=""/><iframe src="//www.facebook.com/plugins/likebox.php? href=http%3A%2F%2Fwww.facebook.com%2Fabuiyad007&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2aHbE-Z8xT3XHFe6NjNqcm6a8kBvvpeZ8r5VsyMYYpmsC6vnIF6V2QhyOocWU5iE70sauDQvRvTUY8JRQC6vgdwfva1N1KRnioVzg5_FNc3_gm-AAZNgXqLM5vBzykP_FZJjIsNLrYBhx/s1600/twitter-icon.png"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }})
.render().setUser('Abuiyad007').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguhBdUapopGfOOlK2TA4QGKs7sqEALymNEJncsPb5oJ_VRdrkc4TC1x8PZ3L4viNEDdUVEEf4C3DFAX42tyA9_EtTZDhR121j98o1_t8Qp_nVU_XrWYrLjnha1uhUiG8oDP9tEHe38fVRV/s1600/google-plus-icon.png"/><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">سجل إميلك وتوصل بمواضيعنا :</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=feedburner/simo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="" onblur="if (this.value == &#39;&#39;) {this.value = &#39;أدخل إميلك هنا ...&#39;;}" onfocus="if (this.value == &#39;أدخل إميلك هنا ...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="feedburner/simo" name="uri" type="hidden"/><input value="أرسل" class="submitbutton" type="submit"/></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilAidoLI7xf1Aca-9zmXR3_n56ZvzhfQy9jgI3rtQwv0xH-HYubKPqsTSTfw7ZDMl2hJSpgpJK8aioY2zhiHimrYlnddQJnJQVqUT_qOV0lSbus8qTuPKx8KBKXTnxhDC1ZmxOkdFwOWg/s1600/rssfeed.png"/></div></div></div></div>



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

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




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

جميع الحقوق محفوظة مدونة بوزبال ©2012-2013 | ، نقل بدون تصريح ممنوع . Privacy-Policy| أنضم ألى فريق التدوين