ضع الأكواد في المربع :
آخر المقالات إطلع على آخر مقالاتنا عن طريق الاشتراك في هذا الموقع
شرح تقسيم (السايد بار-sidebar) لمدونة بلوجر الى قسمين
شرح تقسيم (السايد بار-sidebar) لمدونة بلوجر الى قسمين , شرح بسيط جدا ولا يوجد به اي صعوبه ولا يحتاج حتى الى تركيز تابع......
ادخل الى لوحة اداررة مدونتك .
ثم اذهب الى التخطيط.
اختر المكان المناسب للقطعتين .
اضف اداة عبارة عن : HTML/JavaScript
انسخ هذا الكود وضعه داخلها :
<div style="width: 45%; float: left;"> ضع هنا الكود الذي تريد - الجهة اليسرى </div> <div style="width: 45%; float: right;"> ضع هنا الكود الذي تريد - الجهة اليمنى </div> <div style="clear: both;"></div>
إضافة أداة أو أداتين فوق ( أسفل ) صندوق رسائل المدونة في مدونات بلوجر
في أغلب الأحيان، و في أغلب قوالب بلوجر سواءا الرسمية أو التي يتم تحميلها من شبكة الأنترنيت تكون ذات مقسمة بطريقة قد يريد المستخدم إضافة أو حذف جزء معين منه.
لذلك أود اليوم أن أقوم بشرح سهل و بسيط عن كيفية إضافة عمودين أو أداتين Sections "إضافة أداة" فوق صندوق رسائل المدونة و / أو تحته. بعد ذلك يمكنك إضافة ادوات جافا سكريبت HTML/Javascript كما تشاء.
كالعادة و قبل أن نبدأ يجب علينا أخذ نسخة إحتياطية من القالب لتجنب أي خطأ قد يحصل .
نذهب إلى قالب --> تحرير HTML --> باستعمال F3 أو ctrl+F نبحث عن الكود التالي :
<b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='false' title='Post sul blog' type='Blog'/> </b:section>
لإضافة عمودين / أداتي "إضافة أداة" فوق صندوق رسائل المدونة نضع الكود التالي فوق / أعلى الكود الذي قمنا بالبحث عنه في الخطوة السابقة.
<div id='Widget1A' style='width: 47%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-1a' preferred='yes' style='float:left;'/> </div> <div id='Widget1B' style='width: 47%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-1b' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>
لإضافة عمودين / أداتي "إضافة أداة" تحت / أسفل صندوق رسائل المدونة نضع الكود التالي تحت / أسفل الكود الذي قمنا بالبحث عنه في الخطوة السابقة.
<div id='Widget2A' style='width: 47%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/> </div> <div id='Widget2B' style='width: 47%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2b' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>
النسبة المئوية لعرض الأدواة يمكن أن يكون بأي نسبة تريدون أي بالقياسات التي تريدونها، المهم أن يكون مجموعهما أقل من 100%.
إذا ظهرت الأداتان فوق بعض فقم بتنقيص أو تصغير النسب المائوية / قياسات الأداتين حتى يظهرا جنبا إلى جنب.
أما إذا أردتم إضافة 3 أدوات "أضافة أداة" فيمكنكم الإعتماد على الكود التالي.
<div id='Widget2A' style='width: 31%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2a' preferred='yes' style='float:left;'/> </div> <div id='Widget2B' style='width: 31%; float: left; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2b' preferred='yes' style='float:left;'/> </div> <div id='Widget2C' style='width: 31%; float: right; margin:0; padding: 5px;'> <b:section class='sidebar' id='widget-2c' preferred='yes' style='float:right;'/> </div> <div style='clear:both;'/>
هنا أيضا يمكنكم التحكم بقياسات عرض الإضافات بنفش الشروط السابقة.
مُحول كود إعلانات أدسنس Adsense Code Converter
إضافة أداة محول أكواد html للبلوجر
العروض الديناميكية لمدونات بلوجر
العروض الديناميكية للمدونات هي طريقة جديدة من موقع بلوجر تمكنك من عرض مدونتك بعدة طرق جديدة ومثيرة.
لتفعيل هذه الطريقة على مدونتك يجب توافر الشروط الآتية :
1- أن تكون المدونة عامة ، فلا يحتاج القراء إلى تسجيل الدخول لعرض مدونتك .
2- أن يتم تمكين الخلاصات في مدونتك بشكل كامل ، في علامة التبويب إعدادات | خلاصة موقع الويب، يمكنك تمكين إما الكل أو الفاصل لخلاصة المشاركات .
إذا لم يتوفر أي من الشروط الواردة أعلاه، فإن المستخدمين الذين يحاولون الدخول إلى العروض الديناميكية لمدونتك سيتم نقلهم بدلاً من ذلك إلى الصفحة المقصودة وإعادة توجيههم إلى مدونتك الأصلية في غضون بضع ثوانٍ .
يمكن لمستخدمي مدونات البلوجر عرض مدوناتهم بالثيمات الخمس ، وهي :
1. طريقة العرض الأولى flipcard
view/flipcard#!/
مثال :
http://makeactionblogger.blogspot.com/view/flipcard#!/
2. طريقة العرض الثانية mosaic
view/mosaic#!/
مثال :
http://makeactionblogger.blogspot.com/view/mosaic#!/
3. طريقة العرض الثالثة sidebar
view/sidebar#!/
مثال :
http://makeactionblogger.blogspot.com/view/sidebar#!/
4. طريقة العرض الرابعة snapshot
view/snapshot#!/
مثال :
makeactionblogger.blogspot.com/view/snapshot#!/
5. طريقة العرض الخامسة timeslide
ضع الكود التالي بعد عنوان مدونتك
view/timeslide#!/
مثال :
http://makeactionblogger.blogspot.com/view/timeslide#!/
كيفية حل مشكلة Scroll Bar في أسفل المدونة
مشكلة السكرول بار يعاني منها كثير من المدونين في مدونتهم ، وهي بالتالي تسبب ازعاج كبير لزائر المدونة و تعطي إنطباع سئ عنها .
وهنا يوجد الحل بكل سهولة فقط اتبع الخطوات التالية :
إفتح أكواد HTML الخاصه بقالب مدونتك , ثم قم بالبحث عن الكود التالى
]]></b:skin>
وأضف فوقه هذا الكود
html {
overflow-x: hidden;
}
<div style="position:
fixed; bottom: 0px; border: 0px solid ; left: 0px;
width: 160px; text-align: left;">
</div>
<End :
احفظ القالب و شاهد النتيجة
أفضل طريقة لإضافة مربع البحث بشكل جميل
يسعدني أن أقدم لكم إضافة رائعة و هامة جدا لمدونات بلوجر وهي مربع البحث
من أجل تركيب هذه الإضافة اتبع التالي :
1- الدخول إلى لوحة التحكم الخاصة بمدونتك
2- الذهاب إلى خانة الإضافات
3- نسخ الكود التالي في أداة HTML/Javascript جديدة
<div id='search-wrapper'><style type='text/css'> .form-wrapper { width: 290px; padding: 5px; margin: 10px auto; overflow: hidden; border-width: 1px; border-style: solid; border-color: #dedede #bababa #aaa #bababa; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #f6f6f6; } .form-wrapper #search { width: 210px; height: 12px; padding: 10px 5px; float: right; font: bold 18px 'Arial', 'trebuchet MS', 'Tahoma'; border: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .form-wrapper #search:focus { outline: 0; border-color: #aaa; } .form-wrapper #search::-webkit-input-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-moz-placeholder { color: #999; font-weight: normal; } .form-wrapper #search:-ms-input-placeholder { color: #999; font-weight: normal; } .thumb{position:relative;left:4px;top:1px;} .form-wrapper #submit { float: left; border: 1px solid #00748f; height: 32px; width: 60px; padding: 0; cursor: pointer; font: bold 15px Arial, Helvetica; color: #fafafa; text-transform: uppercase; background-color: #0483a0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .form-wrapper #submit:hover, .form-wrapper #submit:focus { background-color: #91bc1e; } .form-wrapper #submit:active { outline: 0; } .form-wrapper #submit::-moz-focus-inner { border: 0; } </style> <div class='rss'> <form action='/search' class='form-wrapper' method='get'> <input id='search' name='q' placeholder='' type='text'/> <input id='submit' type='submit' value='بحث'/> </form></div>
و الأن ضع الإضافة في المكان المناسب الذي يعجبك ، مع تمنياتنا أن ينال إعجابك
لا تنس مشاركة الموضوع مع أصدقائك
طريقة اضافة زر الصعود إلى أعلى لمدونات بلوجر
هذه الإضافة من أجل التسهيل على الزائر عند عودته لأعلى الصفحة عند الضغط على الزر المضاف , و أيضا تعطي المدونة رونقا و جمالا وللمعاينة كما هو موجود في مدونتنا من الجهة اليمنى .
طريقة تركيب الكود :
اذهب الى تخطيط.
ثم اضغط اضافة أداة HTML\JavaScript
ثم ضع الكود التالي فيه.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<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="http://im33.gulfup.com/pIUN1.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);
},
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:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
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>
يمكنك تغيير ما هو باللون الأحمر برابط الصورة التي تريدها.
اضغط حفظ.
طريقة تغيير خطوط المدونة إلى خط عربي إحترافي
لاستكمال و ضع الخط المناسب .
.jpg)
