الثلاثاء، 1 يوليو 2014

حصرياً اضافة ارشيف لمدونات بلوجر بثلاثه الوان احترافيه

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




كيفية اضافة هذا الارشيف لمدوناتكم

1-من لوحة التحكم >>> الصفحات
2- اضغط على صفحة جديدة واختر صفحة فارغة
3- الان قم بالتحويل الى HTML والصق احد الاكواد التاليه داخل المستطيع الخاص ب HTML

اللون الاحمر


<style type="text/css">
#bp_toc {
margin-bottom: 10px;margin-top: 28px;text-align: right;width: 100%;}#bp_toc a {text-decoration: none;}
.toc-note {
padding: 5px 10px;
position: relative;
top: -13px;
}.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eee;
border: 1px solid #ddd;
color: #666;
padding: 2px 5px;
font-weight: bold;}
/*------عناوين المواضيع------*/
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
background: #FFFFFF;
border: 1px solid #ddd;
padding-right: 8px;
line-height: 30px;
font-size: 14px;}
.toc-entry-col1 a {
color: #E75139;}
/*------التاريخ------*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
background: #222;border: 1px solid #111;color: #fff;
text-align: center;font-size: 14px;}
/*------الأقسام-------*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {background: #E75139;border: 1px solid #B43A27;
color: #fff;padding-right: 8px;
font-size: 14px;}.toc-entry-col3 a { color: #fff; }
.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
.post-body {border-bottom: 20px ridge #E4E4E4;}</style><br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>
<script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>
</div>

اللون الازرق

<style type="text/css">
#bp_toc {
margin-bottom: 10px;margin-top: 28px;
text-align: right;width: 100%;}
#bp_toc a {text-decoration: none;}
.toc-note {padding: 5px 10px;
position: relative;top: -13px;
}.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #eee;border: 1px solid #ddd;
color: #006BFF;padding: 2px 5px;
font-weight: bold;}
/*------عناوين المواضيع------*/
.toc-header-col1 { width:58%;}
.toc-entry-col1 {
background: #FFFFFF;border: 1px solid #ddd;
padding-right: 8px;line-height: 30px;font-size: 14px;}
.toc-entry-col1 a {color: #018EC5;
}
/*------التاريخ------*/
.toc-header-col2 {width: 11%;text-align: center; }
.toc-entry-col2 {
background: #222;
border: 1px solid #111;
color: #fff;text-align: center;font-size: 14px;}
/*------الأقسام-------*/
.toc-header-col3 {width:31%;}
.toc-entry-col3 {
background: #018EC5;
border: 1px solid #0086B7;color: #fff;
padding-right: 8px;
font-size: 14px;}
.toc-entry-col3 a { color: #fff; }.post-header,.post-title.entry-title,.bvd,#menu2{display: none;}
.post-body {border-bottom: 20px ridge #E4E4E4;}</style>
<br /><div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div>
<script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>

</div>

اللون الرمادي


<style type="text/css">
#bp_toc {border: 0px solid #000;
background: none repeat scroll 0% 0% #FFF;
padding: 5px;margin-top: 10px;width: 100%;}
.toc-note {padding: 5px 10px;position: relative;top: -13px;}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
text-align: center;
background: none repeat scroll 0% 0% #E6E6E6;
box-shadow: 2px 2px 5px 5px #CCC inset;
color: #000;
padding-left: 2px;width: 58%;}
.toc-header-col2 {width: 11%;}.toc-entry-col2 {text-align: center;}
.toc-header-col3 {width: 31%;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:80%;text-decoration:none;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {font-size:70%;text-decoration:underline;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;font-size:70%;
border: 2px solid white !important;background: #F6F6F6;
white-space:nowrap;}</style><br />
<div id="bp_toc">..إنتظر قليلا لتحميل الفهرس..</div><script src="http://yourjavascript.com/7710117410/blogtoc-orig.js" type="text/javascript"></script><script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc" type="text/javascript"></script></div>
</div>


وبالاخير قم بنشر الصفحه ومعاينتها ,,,,,,,,  هذا كل شئ .... بالتوفيق للجميع

الجمعة، 30 أغسطس 2013

اضافة تسمح لزوار مدونتك باختيار لون خلفية المدونه حسب رغبتهم

أكمل المقال
بسم الله الرحمن الرحيم , السلام عليكم اخواني اخواتي متابعي مدونة جلال البعداني ,, اليوم حبيت اقدم لكم اضافه  جديده في عالم بلوجر ,لا شك ان الكثير من المدونين يعانو من مشكلة ارضاء جميع زوار مدوناتهم من خلال شكل والوان ستايل المدونه ولكن اليوم باذن الله سوف اقدم لكم (الحل ) هذه الاضافه الاحترافيه تمكن زوار مدونتك من التحكم باختيار لون الخلفيه المناسبه لهم بمجرد النقر على اللون المفضل لهم بطريقه سهله واحترافيه, مما يزيد من جمالية المدونه  ويجعل زوار مدونتك راضيين كل الرضا عن شكلها واختيار الاستايل المناسب لهم ,,, لن اطيل عليكم ... نبدأ على بركة الله 

لتغيير خلفيه بلوجر بالوان احترافيه

۞ معــاينه 

كيفية اضافة هذه الاداه الى مدوناتكم

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

<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="1" width="100%" height="20">
<tbody><tr>
<td onclick="bgChange('#8B008B')" bgcolor="#8B008B">
</td>
<td onclick="bgChange('#9400D3')" bgcolor="#9400D3">
</td>
<td onclick="bgChange('#008080')" bgcolor="#008080">
</td>
<td onclick="bgChange('#808080')" bgcolor="#808080">
</td>
<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">
</td>
<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">
</td>
<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">
</td>
<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">
</td>
<td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">
</td>
</tr></tbody></table>

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

السبت، 3 أغسطس 2013

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

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

كيفية اضافة هذا السلايدر شو الى مدوناتكم

      1- من  لوحة التحكم -> قالب -> تحرير HTML
     2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 
     3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
]]></b:skin>
 ** والصق الكود التالي قبله تمامآ
#mblrib {
width: 111px;
height: 111px;
margin-right:-15px;
margin-top:-15px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDP04nMTW4wVMKUqb3B_a-BHTBNJRDIApHA06d5bopWIKqkj4ss8kFL5P78lXQJb0LyK3KHejg-IHueSfD3Gq6mTj01UokkvNFrpp1Oavetj_TUbzmiL4i01s2nz4xArR3AkvkHXqEP2hM/s109/1rib.png) no-repeat;
z-index: 7;
position:absolute;
}
.mblautbox {border: #4f5966 solid 3px; width:100%;}
.authorinfoname { text-decoration:underline;}
.mblautbox a:hover {
color: #afafaf;
text-decoration: underline;
outline: none;
}
.mblautbox a {
color: #afafaf;
text-decoration: none;
outline: none;
}
.mblautinfo {
border: #f5f5f5 solid 5px;
-moz-border-radius: 74px;
-webkit-border-radius: 74px;
border-radius: 74px;
margin-left:20px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
float:right; padding:4px;margin-right: 0px;height:100px;
}
.mblautobox {
font-size:20px;
margin-top:-20px;
}
.mblautbox{
direction:rtl;
background:#222222;
line-height:1.7em;
float:center;
padding:10px 10px 10px 10px;
margin:20px 5px 5px 0;
color:white;
font-family:GE SS Two Light;
font-size: 14px;
line-height: 24px;
}
.mblautbox-right-min{
border-left:solid 0px #e8e8e8;
height:auto
}
#mycontents {
position:absolute;
width: 111px;
height: 111px;
margin-left:565px;
margin-top:-5px;
}

ثم قم بالبحث عن 


<div class='post-footer'>

** والصق الكود التالي بعده  مباشره (تحته)


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mblautbox'>
<div id='mblrib'>
</div>
<a class='authorinfolink' href='https://plus.google.com/u/0/103499777490414306950?rel=author' title='jalal'>
<img border='1' class='mblautinfo' src='https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/487292_327202174037831_1400015829_n.jpg' title='albaadani'/>
</a><br/>
<div>
<div class='mblautobox'>
<b>بقلم:</b>
<span class='authorinfoname'>اسم الكاتب</span></div>
<div class='authorinfodescription'>
اكتب هنا نبذه قصيره عن الكاتب
<br/>
<b>يمكنك متابعتي على:</b>
<a href='http://facebook.com/alb33dani'>فيس بوك</a> | <a href='https://twitter.com/albaadani1'>تويتر</a> | <a href='https://plus.google.com/103499777490414306950?rel=author'>جوجل بلس</a> | <a href='http://www.youtube.com/alb33dani'>يوتيوب</a> | <a href='http://alb33dani.blogspot.com/'>الموقع</a>.</div>
</div>
<div style='clear: both;'>
</div>
</div>
</b:if>

تخصيص الاضافه

 2- استبدال ماباللونalbaadani1 باسم حسابك في تويتر
 3- استبدال ماباللونalb33dani باسم صفحتك في فيس بوك
 4- استبدال ماباللون115387305017738790650 باسم حسابك جوجل بلس
 5- استبدال ماباللونalb33dani باسم قناتك في يوتيوب
 5- استبدال ماباللونhttp://alb33dani.blogspot.com برابط مدونتك
  6- اسم الكاتب استبدله باسمك او الاسم الذي تحب
  7- اكتب هنا نبذه قصيره عن الكاتب استبدله بنبذه قصيره عنك او عن خدمات مدونتك

 وبالاخير قم بحفظ القالب ومبروك عليك الاضافه ولا تنسى ان تشاركنا ارائك بتعليق 

السبت، 27 يوليو 2013

اضافة شريط المتابعه عبرالمواقع الاجتماعيه بشكل انيق وجذاب

أكمل المقال

بسم الله الصلاة والسلام على رسول الله , السلام عليكم اخواني اخواتي متابعي مدونة جلال البعداني , كثير من المدونين يعتقدون أن مدونات بلوجر  تفتقر الى  الاضافات الجيده والمنسقه بشكل انيق , التي يمكن أن تضاف إلى منصات أخرى مثل ووردبريس وجوملا،ولكن هذا الاعتقاد خاطئ.فهناك كثير من الاضافات الاحترافيه التي تمكنك من تخصيص مدونتك وتطويرها لتظهر بشكل جذاب واحترافي ,واليوم باذن الله سوف نكسر هذا المعتقد بهذه الاضافه الاحترافيه والتي هي عباره عن شريط جانبي على شكل قائمه عموديه  تتضمن خمس من اشهر مواقع التواصل الاجتماعي  (twitter ,Facebook ,Google+, feedburner, tumblr  )والتي تتميز بشكلها الرائع والانسيابي والذي بدوره يزيد من جمالية المدونه واحترافيتها
 


مثال حي للاضافه



۞ معاينه ◄

كيفية اضافة هذه القطعه الى مدوناتكم


1- انتقل إلى لوحة تحكم مدونتك
2- إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript
3- والآن الصق داخل المستطيل الكود التالي 


<div id='social-sidebar'>
<ul><li>
<a class='entypo-twitter' href='https://twitter.com/albaadani1' target='_blank'>
<span>Twitter</span>
</a></li><li>
<a class='entypo-gplus' href='https://plus.google.com/u/0/b/115387305017738790650' target='_blank'>
<span>google+</span>
</a></li><li>
<a class='entypo-tumblr' href='http://www.tumblr.net/albaadani' target='_blank'>
<span>tumblr</span>
</a></li><li>
<a class='entypo-facebook' href='http://www.facebook.net/alb33dani' target='_blank'>
<span>facebook</span>
</a></li><li>
<a class='entypo-rss' href='http://feeds.feedburner.com/albaadani' target='_blank'>
<span>feedburner</span>
</a></li></ul></div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : /---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>


تخصيص الاضافه

   1- استبدال ماباللونalbaadani باسم حسابك في فيدبرنر
 2- استبدال ماباللونalbaadani1 باسم حسابك في تويتر
 3- استبدال ماباللونalb33dani باسم صفحتك في فيس بوك
 4- استبدال ماباللون115387305017738790650 باسم حسابك جوجل بلس
 5- استبدال ماباللونalbaadani باسم حسابك في تمبلر
وبالاخير قم بحفظ القطعه ومبروك عليك الاضافه ولا تنسى ان تشاركنا ارائك بتعليق

الاثنين، 22 يوليو 2013

حصريآ اضافة تابعني عبر المواقع الاجتماعيه على شكل قائمة Metro

أكمل المقال
بسم الله والصلاة والسلام على رسول الله ,مرحبا بكم اخواني من جديد هذه المرة سوف نقوم بإضافة " قائمه المتابعه عبر المواقع الاجتماعيه على شكل Metro " لمدونات بلوجر بشكل جديد بل بأشكال جديدة وبعدة ألوان مصممة حسب ذوقكم والتي تظفي جمالية أكثر لمدونات بلوجروتزيدها احترافيه  , تحتوي هذه الاضافه على قائمه افقيه متعددة الالوان تشمل اشهر مواقع التواصل الاجتماعي twitter ,Facebook ,Google+, feedburner, LinkedIn  والذي بدورها تساهم في توسع مدونتك وزيادة متابعيها وزوارها

 اضافة قائمه المتابعه عبر المواقع الاجتماعيه على شكل Metro

مثال حي للاضافه


۞ معاينه ◄

اين يمكنني ان اضع هذه الاضافه وفي اي اتجاه تكون اجمل؟

مكان وضع الإضافة مهم جدا لإقبال الزوار عليها , فهناك اماكن لا يقترب الزائر منها ,  فالمكان الامثل لوضع هذه الإضافة
إما على اعلى المدونه (تحت الهايدر)،او اسفل المدونه (فوق الفوتر)،  وهذا لتظهر افضل نتائج للإضافة,

كيفية اضافة هذه القطعه الى مدوناتكم


1- انتقل إلى لوحة تحكم مدونتك
2- إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript
3- والآن الصق داخل المستطيل الكود التالي


<style>
A:link {text-decoration: none; color: }.Mbt-Social-metro {
width: 960px;
float: right;
margin: 0;
padding: 1em 0; }
.Mbt-Social-metro ul {
margin: 0;  padding: 0;}
.Mbt-Social-metro ul li { 
list-style:none;
list-style-type: none;  
padding: 0; text-transform: none;
margin:0;
float: right;
display: inline-block; width: 20%; }
.Mbt-Social-metro ul li a {
font-size:80%;
text-align : center;
color: #fff!important;  
display:block;  }
.Mbt-Social-metro ul li a:hover { 
color: #000!important; 
background-color: #e5e5e5;
text-decoration: none;   }
idc-scoail ul li a, ul li a:hover {
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Mbt-Social-metro ul li .rss {
background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE;
background-size: 30px; padding: 10px 50px;}
.Mbt-Social-metro ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3;
background-size: 30px; padding: 10px 50px; }
/* width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {   
.Mbt-Social-metro ul li { width: 50%; }
}
/* width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {    
.Mbt-Social-metro ul li { width: 50%; }
}
/* width of 320px */
@media only screen and (max-width: 480px) {
.Mbt-Social-metro ul li { width: 100%; }
}
</style>
<div class='Mbt-Social-metro'>
<ul>
<li><a class='rss' href='http://feeds.feedburner.com/albaadani'>اشترك معنا عبر الخلاصات</a></li>
<li><a class='twitter' href='https://twitter.com/albaadani1'>تابعتي على تويتر twitter</a></li>
<li><a class='facebook' href='https://www.facebook.com/alb33dani'>تواصل معي عبر فيس بوك</a></li>
<li><a class='google' href='https://plus.google.com/115387305017738790650'>تابعني على جوجل بلس</a></li>
<li><a class='linkedin' href='http://in.linkedin.com/in/jalal-albaadani'>LinkedIn تواصل مع على </a></li>
</ul>
</div>
تخصيص الاضافه
  1- استبدال ماباللونalbaadani باسم حسابك في فيدبرنر
 2- استبدال ماباللونalbaadani1 باسم حسابك في تويتر
 3- استبدال ماباللونalb33dani باسم صفحتك في فيس بوك
 4- استبدال ماباللون115387305017738790650 باسم حسابك جوجل بلس
 5- استبدال ماباللونjalal-albaadani باسم حسابك في لينكدين
 6-  لتغيير عرض الاضافهwidth: 960px; قم بتغيير القيمه فقط

وبالاخير قم بحفظ القطعه ومبروك عليك الاضافه ولا تنسى ان تشاركنا ارائك بتعليق 

الأحد، 16 يونيو 2013

اسهل طريقه لاضافة سلايد شو احترافي لمدونات بلوجر

أكمل المقال

السلام عليكم اخواني , سنتطرق اليوم في هذه التدوينه الى كيفية اضافة سلايد شو Slidershow احترافي لمدونات بلوجر بطريقه سهله جدا ومميزه حيث تعتمد هذه الاضافه على كود الجافا سكريب ,  يعني تقدر تضيف هذا السلايد شو الى مدونتك بخطوه واحده فقط وهي اضافة اداهHTML/JavaScript  , مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية. الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان شاء الله

اضافة سلايد شو لمدونات بلوجر

مثال حي للسلايدر شو

معاينة
 

كيفية اضافة هذه الاداه الى مدوناتكم

 انتقل إلى لوحة تحكم مدونتك
     HTML/Javascript   إختر "تخطيط" ثم إضافة أداة ثم اختر
   والآن الصق داخل المستطيل الكود التالي
<style type="text/css">
/* alb33dani.blogspot.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}

#slider {
width:700px;height:306px;/* Make it the same size as your images */
background:#fff urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaBVor4hY7fRE1G3G1RW95XYK3NQ8iMEsyHCmDAOPfccWpwI5ozqXURxVNECZby5yqCtjfCPHdYcxJbQ-L2JnBGIOHz76l8MJlVnvPybqLfbjby_iciEAVR15ZIuliaOjKyRuMsVc5S3zT/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
/* the link style undefinedif an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px;
bottom:15px;
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:320px; left:280px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdb3Nrk-PYHCdi4maz8g1Ch3MKhWGTpLwXGb_HUMLlSIvT73c8Z7_-gPL-W6Cy_098BHsh_4-hAiL3Sk3s2FJM07wkEJscirE3qC6_MC3SDRporrIoDiBHwty0PABlNp0HJTMJaQl_sCFf/s1600/bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider
{
transform: translate3dundefined0,0,0);
-ms-transform:translate3dundefined0,0,0);
-moz-transform:translate3dundefined0,0,0);
-o-transform:translate3dundefined0,0,0);
}
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="رابط الصوره الاولى" alt="عنوان الموضوع الاول" /></a>
<a href="#"><img src="رابط الصوره الثانيه" alt="عنوان الموضوع الثاني" /></a>
<a href="#"><img src="رابط الصوره الثالثه"alt="عنوان الموضوع الثالث" /></a>
<a href="#"><img src="رابط الصوره الرابعه"alt="عنوالن الموضوع الرابع" /></a>
<a href="#"><img src="رابط الصوره الخامسه" alt="عنوان الموضوع الخامس"/></a>
</div>
</div>


مايجب عليك تغييره
  • عنوان الموضوع : استبدلها بعنوان الموضوع المراد عرضه في السلايد شو.
  • رابط صورة الموضوع : استبدلها برابط صورة الموضوع المراد عرضه بالسلايد شو.
    # : استبدلها برابط الموضوع المراد عرضه بالسلايد شو. 
    700px : لتغيير عرض السلايد شو .
    306px:لتغيير ارتفاع السلايدشو.

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

الجمعة، 31 مايو 2013

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

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

اضافات بلوجر احترافيه

كيفية اضافة هذه الاداه الى مدوناتكم

الخطوه الاولى (تخصيص قطعة مولد الاكواد)

  1.  ادخل رابط صفحتك على فيس بوك
  2.  ثم ادخل اسم حسابك على التويتر
  3. ادخل الايدي الخاص بحسابك في جوجل بلس
  4.  ثم ادخل اسم حسابك على فيدبرنر 
  5. ثم  اكتب وصف قصير عن كاتب التدوينه
  6.  الان رابط صورة الكاتب
  7.  ثم  قم بتخصيص الالوان حسب رغبتك
  8. الان قم بالضغط على زر  “Generate code” لتوليد الكود
  9. الان يمكنك استعراض الاداه قبل اضافتها الى مدونتك بالنقر على زرpreview
الخطوه الثانيه(اضافة الاكواد الى المدونه)
   
      1- انتقل الى لوحة التحكم مدونتك -> قالب -> تحرير HTML ->
     2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 
     4- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
</head>
    5-الان قم بنسخ الكود الذي ظهر في داخل مستطيل ccs والصقه قبل </head> تماما
    6- قم بالبحث عن
<div class=’post-footer-line post-footer-line-1′>
  7-قم بنسخ الكود الذي ظهر داخل مستطيل html في قطعة مولد الكود والصقه بعد <div class=’post-footer-line post-footer-line-1′>

الان قم بحفظ القالب ومبروك عليك الاضافه  :)

اذا كان عندكم اي استفسار او واجهتكم مشكله عند اضافة الاداه يمكنكم وضع تعليق وسيتم الرد عليكم ان شاء الله