آخر المقالات إطلع على آخر مقالاتنا عن طريق الاشتراك في هذا الموقع
مُحول كود إعلانات أدسنس 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>
يمكنك تغيير ما هو باللون الأحمر برابط الصورة التي تريدها.
اضغط حفظ.
طريقة تغيير خطوط المدونة إلى خط عربي إحترافي
لاستكمال و ضع الخط المناسب .
إضافة تابعني عبر الشبكات الإجتماعية بشكل ذهبي
طريقة إضافة اشتراك عبر المواقع الإجتماعية بشكل ذهبي
طريقة التركيب :
ادخل مدونتك .
ثم التخطيط .
ثم اختر اداة جديده HTML/JavaScript .
اخيرا انسخ الكود مع استبدال الروابط والصور بما يلزم .
<style>/*Social Networks Widget Dev By (www.add-b.blogspot.com */
.Social-Networks-Sherif{padding:0px;margin:1px;text-align:center;direction:rtl;}.Social-Networks-Sherif:hover{padding:0px;margin:1px;text-align:center;direction:rtl;transform:rotate(360deg);-ms-transform:rotate(360deg); /* IE 9 */-moz-transform:rotate(360deg); /* Firefox */-webkit-transform:rotate(360deg); /* Safari and Chrome */-o-transform:rotate(360deg); /* Opera */transition: all 1s;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}.sherif {text-align:center;background:rgb(216, 230, 235);border:1px solid rgb(159, 150, 250);-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;border-radius:10px;}.sherif1 {font-family:tahoma;text-align:right;margin:2px;background:none repeat scroll 0% 0% rgb(235, 235, 235);border:1px solid rgb(200, 200, 200);-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;border-radius:10px;}/*Social Networks Widget Dev By (add-b.blogspot.com */</style>
<div class='sherif'><a rel='nofollow' href="GPLUS_URL" rel="nofollow" target="_blank"><img class='Social-Networks-Sherif' title="تابعنى عبر جوجل بلس" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9vMcCuo83D18n6YK5ogfTLpceclWDH_ZkGEAmI0SzzzCDWFTJ4eG3ucgzRttf04F52Rdbf7SzFmkQpwKXfU9aZD3JAxV0PXKcgp1M8GSGlfdvtTVYImRhcPYz0afRDjuaZcP5xl_-drYw/s1600/google-plus-icon.png" /></a>
<a rel='nofollow' href="FACEBOOK_URL" rel="nofollow" target="_blank"><img class='Social-Networks-Sherif' title="تابعنى عبر الفيس بوك" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDRdW9km7JAFV17VBYg2RC9iGzUHklq9IL77PTV8aIo9kL5CvIPyOa9OhG6lRV6cvIyWaPK1NusRSXFQ5WduPSJapeVyI3nfZOArv9uVAzSmB75np3uLyLiylQRQVOJ-rIzFOpY3Z53JXt/s1600/facebook-icon.png" /></a>
<a rel='nofollow' href="TWITTER_URL" rel="nofollow" target="_blank"><img class='Social-Networks-Sherif' title="تابعنى على تويتر" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyS57wmzy6ho06bjI71pkAYPNWw0xvGK6ACHfUaFatCS-mhYFrswVHy1sOvV3O7ZTHKidpb2CVoLwOj5yA7tsqEPHHKwld9yxpJzxu5TVmL8HF8EAKMgAYpPn1-zXv1l97EivKzLupKqPP/s1600/twitter-icon.png" /></a>
<a rel='nofollow' href="FEED_URL" rel="nofollow" target="_blank"><img class='Social-Networks-Sherif' title="تابعنى عبر الخلاصة" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGMpF7KeHPmVrtl-lTd0OzZ1ijSxSlx14MXfez-9PKMfxDIy4TBFWQIbCb9iZV1BPMGIJ3qIfei8lzYyHPJxmpjk6FQQJLieBLDzc98B90ouEQ7uZN-h8UWHrWSYN4DmE0TsgfRnco3HWL/s1600/feed-icon.png" /></a>
<div class='sherif1'><small><a rel='dofollow' href='http://th3techniques.blogspot.com/search/label/blogger'>إضافات بلوجر</a></small></div></div>
ثم قم بتغيير ما باللون الأحمر برابط كامل :
Gplus_Url رابط حسابك فى جوجل بلس
Facebook_Url رابط صفحتك او حسابك على الفيس بوك
Twitter_Url رابط حسابك فى تويتر
FEED_URL رابط خلاصات موقعك او رابط حسابك فى feedburner
وفي الختام اشكركم على تواصلكم عبر موقعنا
في خطوات بسيطة.. اصنع مدوّنتك بنفسك
يمكنك إنشاء مدونتك بمفردك بطريقة سهلة جدا و تجعلها محطة لموضوعاتك و صورك و أفكارك ، الأن يمكنك أن تطلق لخيالك العنان وتبدع فى مدونتك ، تابع الخطوات التالية .
لكي تقوم بإنشاء مدونة مجانية على بلوجر وتبدأ أولى خطواتك في التدوين لابد أن تكون قد إخترت المجال المناسب الذى ستكتب فيه .تابع الموضوع السابق " أساسيات التدوين على بلوجر " . الأن إذا كنت قد إخترت مجال مدونتك يمكنك متابعة باقي الدرس أما إذا لم تختر مجال مدونتك فأرجو منك متابعة الدرس السابق المذكور سالفا .
متطلبات عمل مدونة مجانية على بلوجر :
1- لابد أن يكون لديك بريد إلكترونى على جوجل (Gmail) .
2- بعد عمل الإيميل على جوجل يمكنك الأن عمل مدونة على بلوجر .
خطوات إنشاء إيميل على جوجل Gmail
قم بالضغط على الرابط التالى لإنشاء بريد إلكترونى على جوجل >> Gmail << ثم قم بإتباع الخطوات التالية :
1- First Name : أكتب إسمك الأول .
2- Last Name : أكتب إسم العائلة .
3- Choose Your User Name : إختر إسم إيميلك المراد عمله .
4- Create a Password : أكتب كلمة السر الخاصه بحسابك .
5- Confirm Your Password : قم بكتابة كلمة السر مرة أخرى للتأكيد.
6- Birthday : إختر تاريخ ميلادك .
7- Gender : إختر نوعك سواء ذكر أو أنثى .
8- Mobile Number : أكتب رقم الهاتف الخاص بك أو يمكنك تركه الأن وكتابته لاحقا.
9- Your current email address : أكتب البريد الإلكترونى الحالى مثلا على شركة ياهو أو هوتميل .
10- Prove you're not a robot : أكتب الحروف الموجوده فى الصورة فى المربع التالى .
11- Location : إختر الدولة الموجود بها .
12- قم بوضع علامة صح على المربعين التاليين للموافقة على شروط خدمة جوجل .
13- Next Step : إضغط على الخطوة التالية لإكمال التسجيل .
الأن مبروك عليكم الإيميل .الأن قد أنهينا أول خطوة فى درس اليوم .نأتى إلى الخطوة الأهم وهى إنشاء مدونة مجانية على بلوجر .قم بمتابعة الخطوات التالية .
قم بالضغط على الرابط التالى >> إنشاء مدونة على بلوجر << تابع الصور والخطوات التالية:
قم بالدخول لحسابك فى جوجل ثم إضغط على تسجيل الدخول أو على حسب لغتك "Sign In "
قم بعمل ملفك الشخصى فى Google+ أو إنشاء ملف شخصى فى Blogger .سأختار أنا الخيار الثانى "إنشاء ملف شخصى فى Blogger"
الإسم المعروض : قم بكتابة الإسم الذى سيظهر لك فى بلوجر ثم إضغط على متابعة إلى بلوجر Blogger .
لعمل مدونة جديدة قم بالضغط على كلمة مدونة جديدة ثم تابع الخطوات التالية .
قم بملئ هذه البيانات لعمل مدونة مجانية على بلوجر كالتالى :
1- إسم النموذج : هنا قم بكتابة وصف قصير للمدونة مثلا عالم الفوتوشوب أو على حسب مجال مدونتك .
2- العنوان : هنا قم بإختيار إسم مدونتك ولكن بالإنجليزية ولابد أن يكون إسم المدونة له علاقة بمجال المدونة مثلا مدونة عن الفوتوشوب سيكون إسم المدونه كالتالى photoshop-lessons" .
3- قالب : إختر القالب الأساسى لمدونتك ,لا تقلق يمكنك تغييره بعد ذلك .
4- إنشاء مدونة : قم بالضغط على إنشاء المدونة لإنهاء التسجيل .
الأن قد أنشأت أول مدونة مجانية لك على بلوجر .تهانينا
.jpg)
