أعلان الهيدر

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

Posted by مدونة كيف On الخميس، 31 أكتوبر 2013 0 comments
السلام عليكم ورحمة الله تعالى وبركاته سوف نتطرق في هذه التدوينة إلى كيفية إضافة الأزرار الجانبية للمواقع الإجتماعية : الفيسبوك ،جوجل بلس ، تويتر ،والبريد 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="http://2.bp.blogspot.com/-AwJK988Hw9U/T_CUbBXoLmI/AAAAAAAABuM/XIwgqyH0zLw/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="http://2.bp.blogspot.com/-ggLNgeprfJo/T_CUf8BMk8I/AAAAAAAABuk/f38udn9GKo4/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="http://1.bp.blogspot.com/-zwfLV74trKg/T_CUcBJIkVI/AAAAAAAABuU/LVVwVCRESpI/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="http://1.bp.blogspot.com/-zKZoEMAlSBU/T_1C8cxmMoI/AAAAAAAADXA/p9CIkL4w19E/s1600/rssfeed.png"/></div></div></div></div>


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

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


قم بالبحث عن الكود التالي :
]]></b:skin>
ثم قم بلصق هذا الكود قبله :

.accordion {
width: 620px;
text-align: center;
border-bottom: solid 1px #c4c4c4;}
.accordion h3 {
background: #e9e7e7 url(http://2.bp.blogspot.com/_jFIsHl5gfpM/TFytEJ5rLTI/AAAAAAAAAf0/ogdrOF9AZ7U/s320/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;}
.accordion h3:hover {
background-color: #e3e2e2;}
.accordion h3.active {
background-position: right 5px;}
.accordion p{
background:url(http://lh6.ggpht.com/_4_wf1DKMvX4/TMWm472NmPI/AAAAAAAABmw/aioU52gp7Zw/box-bgr.gif) ;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;}

قم بالبحث عن الكود التالي :
</head>
ثم قم بلصق هذا الكود قبله :

 <script src='http://blogspacetech.googlecode.com/files/jquery.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.accordion h3:first&quot;).addClass(&quot;active&quot;);
$(&quot;.accordion p:not(:first)&quot;).hide();
$(&quot;.accordion h3&quot;).click(function(){
$(this).next(&quot;p&quot;).slideToggle(&quot;slow&quot;)
.siblings(&quot;p:visible&quot;).slideUp(&quot;slow&quot;);
$(this).toggleClass(&quot;active&quot;);
$(this).siblings(&quot;h3&quot;).removeClass(&quot;active&quot;);
});
});
</script><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>


قم بالبحث عن الكود التالي (إذا وجدت إثنين فالكود الثاني هو المقصود) :
<data:post.body/>
ثم قم بلصق هذا الكود بعده :


<b:if cond='data:blog.pageType == "item"'>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = &quot;http://lh5.ggpht.com/_ZXEvc1YiIko/TLzMljzSYFI/AAAAAAAAA4g/FW2VlpJHWfE/s128/no-image.blogspacetech.jpeg&quot;;
showRandomImg = true;
jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = &quot;#E67C15&quot;;
jaBold = true;
jtext = &quot;التعليقات&quot;;
jshowPostDate = true;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = &quot;#000&quot;;
numposts = 10;
label = &quot;إضافات بلوجر&quot;;
home_page = &quot;http://www.abu-iyad.com/&quot;;
</script>
<div class='accordion'>
<script src='http://blogspacetech.googlecode.com/files/new.recent-posts.js' type='text/javascript'/>
</div>
</b:if>
  • width: 620px قم تغيير هذه القيمة على حسب عرض الإضافة التي تريد
  • إضافات بلوجر : قم تغيير هذه التسمية بأحد التسميات الخاصة بمدونتك
  • قم بتغيير رابط المدونة برابط مدونتك
  • وأخير قم بحفظ القالب

READ MORE

إضافة أزرار التنقل لصفحات بلوجر

Posted by مدونة كيف On 0 comments
السلام عليكم ورحمة الله  تعالى وبركاته ،سوف نتطرق في هذه التدوينة إلى معرفة كيفية تركيب إضافة أزرار التنقل لصفحات بلوجر ،حيث تمكنك من تصفح المدونة بشكل سريع وسلس إذ أنها تتوفر على أربع إتجاهات : إلى الأعلى ،إلى الأسفل,الرئيسية،رسالة أقدم ورسالة أحدث و بكونها تبقى ثابتة على صفحة المدونة مما يجعلك تقوم بعملية التنقل من مكان لآخر بكل سهولة ،والآن نتوجه لتطبيق الإضافة .


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

<div class='blog-pager' id='blog-pager'>
ثم قم بلصق هذا الكود بعده مباشرة :


 <span id='blog-pager-top-link'>
      <a class='blog-pager-top-link' href='#' title='إلى الأعلى'>إلى الأعلى</a>
      </span>
      <span id='blog-pager-bottom-link'>
      <a class='blog-pager-bottom-link' href='#bottom' title='إلى الأسفل'>إلى الأسفل</a>
      </span><font size="0"><a href="http://www.siege--auto.org"></a></font>
الآن إبحث عن الوسم :
</body>
ثم قم بلضق هذا الكود قبله :
<a name='bottom'/>
وأخيرا قم بالبحث عن الوسم :
]]></b:skin>
وضع الكود التالي قبله :

#blog-pager {
  position: fixed;
  bottom: 10px;
  right: 50px;
  width: 120px;
  height: 120px;
  display: block;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ccc;
  -moz-box-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 1px 1px 3px #666666;
  box-shadow: 1px 1px 3px #666666;
  border-radius: 60px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  z-index: 9;
}
#blog-pager  a {
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  text-indent: -99999px;
  position: absolute;
  padding: 5px;
}
a.blog-pager-top-link {
  background: url(https://lh5.googleusercontent.com/-hSHWhg9kGg0/T2MugFnRreI/AAAAAAAAHw8/Htfa78EMsoQ/s30/arrow_up2.png) no-repeat center center;
  top: 0px;
  left: 40px;
}
a.blog-pager-bottom-link {
  background: url(https://lh6.googleusercontent.com/-YBE6uU6Hs9A/T2Muc7lPfII/AAAAAAAAHw8/MEwsNC6GORY/s30/arrow_down2.png) no-repeat center center;
  top: 80px;
  left: 40px;
}
a.blog-pager-newer-link {
  background: url(https://lh3.googleusercontent.com/-x2iM_Ehd97o/T2Muc2KIN9I/AAAAAAAAHw8/NsKA5zQvepo/s30/arrow_left2.png) no-repeat center center;
  top: 40px;
  left: 0px;
}
a.blog-pager-older-link {  
  background: url(https://lh4.googleusercontent.com/-yHMoNLjW5Eg/T2MudH-o1FI/AAAAAAAAHw8/kmXGiY_ztZI/s30/arrow_right2.png) no-repeat center center;
  top: 40px;
  left: 80px;
}
a.home-link {
  background: url(https://lh4.googleusercontent.com/-Ud-NZ0D_WgI/T2MvUcqLnXI/AAAAAAAAHw8/5aeH4DguMgc/s30/home.png) no-repeat center center;
  top: 40px;
  left: 40px;
}
.blog-mobile-link {
  display: none;
}
ثم قم بحفظ القالب

READ MORE
 السلام عليكم ورحمة الله وبركاته ،اليوم سوف نتعرف على كيفية إضافة الروابط الأوتوماتيكية لتدوينات بلوجر تحت كل موضوع ،حيث يُعرض على شكل جدول أسفل كل تدوينة ويتضمن روابط المقال على شكل 3 صيغ : URL,HTML,BBCODE
والان نترككم مع كيفية تطبيق الإضافة ,



انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرhtml, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي :
]]></b:skin>
ثم قم بوضع الكود التالي قبله :

#table {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 13px;
    margin: 10px -12px;
    width: 580px;
    text-align: left;
    border-collapse: collapse;
   direction:ltr;
}
#table th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe url('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2gjh1nPI/AAAAAAAACbg/7lNsVpks2oY/s1600/gradhead.png') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;

}
#table td {
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #4c4c4c;
    border-top: 1px solid #fff;
    background: #e8edff url('http://1.bp.blogspot.com/_xDpoN6UfFFY/S-J2f5yBC3I/AAAAAAAACbY/zWXYXsR-w5E/s1600/gradback.png') repeat-x;
}
#table tfoot tr td {
    background: #e8edff;
    font-size: 20px;
    color: #99c;
    text-align:center;
}
#table tbody tr:hover td {
    background: #d0dafd url('http://4.bp.blogspot.com/_xDpoN6UfFFY/S-J2hsztUzI/AAAAAAAACbo/ztV1CK0RUrE/s1600/gradhover.png') repeat-x;
    color: #339;
}
#table a:hover {
    text-decoration:underline;
}

والآن قم بالبحث عن هذا الكود (إن وجدت منه أكثر الكثيير فالكود الأخير هو المقصود):

<data:post.body/>
ثم قم بوضع الكود التالي أسفله :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table id='table' summary='روابط الموضوع'>
  <tfoot>
    <tr>
      <td colspan='2'>روابط هذه التدوينة قابلة للنسخ واللصق</td>
    </tr>
  </tfoot>
<tr>
  <td>URL</td>
  <td><input expr:value='data:post.canonicalUrl' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
</tr><tr>
  <td>HTML</td>
  <td><input expr:value='&quot;&lt;a href=&amp;quot;&quot; + data:post.canonicalUrl + &quot;&amp;quot; title=&amp;quot;&quot; + data:post.title + &quot;&amp;quot;&gt;&quot; + data:post.title + &quot;&lt;/a&gt;&quot;' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
</tr><tr>
  <td>BBCode</td>
  <td><input expr:value='&quot;[url=&quot; + data:post.canonicalUrl + &quot;]&quot; + data:post.title + &quot;[/url]&quot;' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
</tr>
</table> </b:if>


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

READ MORE

قائمة أفقية ثابتة لمدونات بلوجر

Posted by مدونة كيف On 0 comments
السلام عليكم ورحمة الله اليوم أقدم لكم اضافة جميلة ويحتاجها الكثيرة منا ونرى انها مستعملة  في أشهر المواقع الإجتماعية ، إنها قائمة افقية ثابتة اي تتبعك وانت تتصفح المدونة اذا نزلت تنزل معك واذا صَعِدْتَ صَعَدَتْ معك، أقدم لكم صورة الأداة بعد ان قمت بتعريبها و تطويرها:



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


الأن حان وقت عرض الاكواد لوضع هذه القائمة الرائعة في مدونتنا:

الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :  </head>

ونقوم بإلصاق هذا الكود قبله .
<link href='https://abuiyad.googlecode.com/svn/Ayoub-Etmaiti-menu-fixed-abu-i.css' rel='stylesheet'/>
<script src='http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js' type='text/javascript'/>
 <script type='text/javascript'>
            $(function() {
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                        $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;},400);
                    else   
                        $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;},400);
                });
               
                $(&#39;#nav&#39;).hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;},400);
                        }
                    }
                );
            });
        </script>


وبعد هذا سنقوم بالبحث على </body> بنفس الطريقة التي استخدمناها سابقا ونقوم بإلصاق الكود التالي قبله أيضا مع تعديل ما يناسب:


<div id='nav'>
<ul>
<li><a class='top' href='#'><span/></a></li>
<li><a class='bottom' href='#bottom'><span/></a></li>
<li><a href='الرابط-1'><span>عنوان الرابط 1</span></a></li>
<li><a href='الرابط-2'><span>عنوان الرابط 2</span></a></li>
<li><a href='الرابط-3'><span>عنوان الرابط 3</span></a></li>
<li><a href='الرابط-4'><span>عنوان الرابط 4</span></a></li>
<li><a href='الرابط-5'><span>عنوان الرابط 5</span></a></li>
<li class='search1'>
<form action='/search' id='search1' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;ابحث في المدونة...&quot;;}' onfocus='if (this.value == &quot;ابحث في المدونة...&quot;) {this.value = &quot;&quot;}' type='text' value='ابحث في المدونة...'/>
        <input id='searchbutton' src='http://3.bp.blogspot.com/-80DxERf30RE/UBWOpjpQFII/AAAAAAAABB8/xOILGMsPazI/s1600/search-ico-ayoub-etmaiti.png' type='image'/>
    </form>
   
</li>
</ul>
</div> 
<div id='top'/>
<div class='desc'/>
<div id='bottom'/>
<div class='scroll'/>

نقوم بتغير الكلمات :
الرابط-1 ، 2 ، 3 ، 4  و  5   بروابطنا التي نريد ان يتم التوجيه اليها بعد الظغط على الزر ، ونغير العناوين : عنوان الرابط 1
، 2 ، 3 ، 4 و 5  بالكلمة التي ستظهر على زر

 مثال:
<li><a href='ayoub-etmaiti.blogspot.com'><span>أيوب التمايتي</span></a></li>
وهذا هو كل شئ مع تحياتي

READ MORE

أزرار التنقل عائمة لصفحات بلوجر.

Posted by مدونة كيف On 0 comments
السلام عليكم ورحمة الله اليوم أقدم لكم اضافة جميلة وقد كان الأخ أبو إياد قد عرض  واحدة تشبهها وهي إضافة أزرار التنقل لصفحات بلوجر ، وأنا اليوم اتيتكم بإضافة مشابهة تحتوي على الازرار التالية : زر مشاركات اقدم ، زر مشركات احدث ، زر مقالة عشوائية {يقوم باختيار مقالة من عنده} ، زر العودة الى الرئيسية واخيرا زر الصعود الى الأعلى..




صورة لهذه الإضافة على مدونتي التجريبية:



- كما نلاحظ أن هذه الإضافة لا تأخذ مكان كبيرة في المدونة وهي ذات شكل جميل ومفيدة ايضا.


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

الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :  </head>

لتركيب الإضافة على الجهة اليسرى نقوم بإلصاق هذا الكود قبل الوسم </head> .
<link href=' https://abuiyad.googlecode.com/svn/navigation-Ayoub-Etmaiti.css ' rel='stylesheet'/>


ولتركيب الإضافة على الجهة اليمنى نقوم بإلصاق هذا الكود قبل الوسم </head> .
<link href='https://abuiyad.googlecode.com/svn/navigation-right-Ayoub-Etmaiti.css' rel='stylesheet'/>


وبعد هذا سنقوم بالبحث على <b:includable id='main' var='top'> بنفس الطريقة التي استخدمناها سابقا ونقوم بإلصاق الكود التالي بعده :

<div id='float-menu'> 
<ul>
<li id='menu-right'>
<b:if cond='data:olderPageUrl'>
<b:if cond='data:olderPageUrl != data:blog.url'>
<a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-left'>
<b:if cond='data:newerPageUrl'>
<b:if cond='data:newerPageUrl != data:blog.url'>
<a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a>
</b:if>
</b:if>
</li>
<li id='menu-random'>
<script type='text/javaScript'>//<![CDATA[
var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};
//]]></script>
<script type='text/javaScript'>//<![CDATA[
function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'" title="مقالة عشوائية" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>');
//]]></script>
</li>
<li id='menu-home'>
<a expr:href='data:blog.homepageUrl' title='الرئيسية'/>
</li>
<li id='menu-top'>
<a href='#' title='إلى الأعلى' rel="nofollow"/>
</li>
</ul>
</div>
وأخيرا قم بحفظ القالب

READ MORE
السلام عليكم ورحمة الله ، أخوكم أيوب من جديد اليوم أقدم لكم إضافة جميلة وهي أزرار تابعني على يوتوب ، فيسبوك،تويتر والخلاصة والإضافة تتميز بأزرار أو ايقونات أنيقة وواضحة بحدود دائرية جميلة وعند الإتجاه اليها بمؤشر الفأرة تصبح الحدود مربعة شاهد الصورة :






- ونلاحظ من الصورة عمل الإضافة عند المرور بمؤشر الفأرة على احد الأيقونات، لاحظ ايقونة اليوتوب كيف هي مختلفة بحدود مربعة عن باقي الأيقونات.



الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.
الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :  ]]></b:skin>

ثم نضيف الكود التالي قبله .

/*sus code by Ayoub-Etmaiti */
 .Azrar-Ayoub-Etmaiti {
border-radius: 50%; /* الحدود الدائرية  */
box-shadow: 0px 0px 15px #000; /* الظل*/
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.Azrar-Ayoub-Etmaiti:hover {
box-shadow: 0; /* لحذف الحدود الدائرية عند مرور المأشر */
border-radius: 0; /*لحذف الظل عند مرور المأشر */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.Ayoub-Etmaiti-center {
        text-align: center /*لتوسيط الأزرار  */
}
 /*sus code by Ayoub-Etmaiti */

قم بحفظ القالب


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


<div class="Ayoub-Etmaiti-center">
<a href="رابط الفيسبوك هنا" target="_blank" title="¡فيسبوك!"><img class="Azrar-Ayoub-Etmaiti" src="http://1.bp.blogspot.com/-ZKoFaeP1f2s/UBceZWyke8I/AAAAAAAABE0/d_0vqj43WyI/s1600/sus-Ayoub-Etmaiti-facebook.png" /></a>
<a href="رابط تويتر هنا" target="_blank" title="¡تويتر!"><img class="Azrar-Ayoub-Etmaiti" src="http://3.bp.blogspot.com/-TJH_umUcQDY/UBceanQhoAI/AAAAAAAABFA/Mg0ILCRrwHM/s1600/sus-Ayoub-Etmaiti-twitter.png" /></a>
<a href="رابط يوتوب هنا" target="_blank" title="¡يوتوب!"><img class="Azrar-Ayoub-Etmaiti" src="http://1.bp.blogspot.com/-BTGMZZ-SDSg/UBcebFves8I/AAAAAAAABFI/AMmlhLKM6Bg/s1600/sus-Ayoub-Etmaiti-youtube.png" /></a>
<a href="رابط الخلاصة هنا" target="_blank" title="¡الخلاصة!"><img class="Azrar-Ayoub-Etmaiti" src="http://2.bp.blogspot.com/-HcaATl1ylms/UBceaMdkJsI/AAAAAAAABE4/qLlINjLE7nY/s1600/sus-Ayoub-Etmaiti-rss.png" /></a>
</div>
وأخيرا قم بحفظ الأداة
وهذا هو كل شئ مع تحياتي

READ MORE

قائمة إدارة المدونة لمنصة بلوجر الجديدة

Posted by مدونة كيف On 0 comments
السلام عليكم ورحمة الله وبركاته ،ومرحبا بالجميع في تدوينة جديدة ،اليوم سوف أقدم لكم إضافة جديدة من تصميمي ،تسمح لنا هذه الإضافة بإدارة المدونة من داخل المدونة  ,إذ يمكنك كتابة تدوينة جديدة ،أو التعديل على الرسائل أو الإعدادات,أو مراجعة التعليقات  ....فقط بكبسة زر من مدونتك ،لقد قمت بشرح مثل هذه الإضافة في درس" قائمة إدارة المدونة على مدونات بلوجر " إلا أن هذه الإضافة الجديدة التي سوف أقدمها  اليوم تتميز بكونها :
1- تضم أزرار إدارة المدونة للمنصة الجيدة
2-عبارة عن قائمة ثابثة في أحد جوانب المدونة سواء على جهة اليمين أو اليسار
3- تسهل عليك التنقل بين قوائم حسابك على موقع بلوجر
4-لا تأخذ حيزا كبيرا في تنسيق المدونة
5-إمكانية إخفاءها على الزوار وإظهارها لصاحب المدونة فقط (admin)

1-انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرhtml, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي :
]]></b:skin>
ثم قم بوضع الكود التالي قبله :
.bloggermenu {
  position: fixed;
  top: 200px;
  left: 10px;
  width: 24px;
  overflow: hidden;
  padding: 5px;
  background: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  -moz-box-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 1px 1px 3px #666666;
  box-shadow: 1px 1px 3px #666666;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}
ملحوظة : لتركيب الإضافة في جهة اليمين ،قم بتغيير الكلمة Left بالكلمة Right.

2-الآن قم بالبحث عن الكود التالي :
<b:include name='feedLinks'/>
فإن لم تجده ،قم بالبحث عن هذا الكود  :
<b:include name='nextprev'/>
ثم قوم بوضع هذا الكود تحت أحد الأكواد السابقة :
<b:include name='ButtonsbloggerFix'/>
3-قم بالبحث عن هذا الكود :
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>
ثم ضع الكود التالي بعده مباشرة :

<b:includable id='ButtonsbloggerFix'>
<span class='item-control blog-admin'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<div class='bloggermenu'>
<a class='layout' href='http://www.blogger.com/home' target='_blank' title='الرئيسية '><img alt='' src='http://2.bp.blogspot.com/-SQmfhfCbCZI/UCMnLEfgGmI/AAAAAAAADg0/Z8SHbim2ZPI/s1600/blogger.gif' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overview' target='_blank' title='نظرة عامة '><img alt='' src='http://3.bp.blogspot.com/-wRMW3Y3cvCY/UCMkFkzt2nI/AAAAAAAADgk/UJHdujwqwBM/s1600/general+orange.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#editor/src=sidebar' target='_blank' title='مشاركة جديدة'><img alt='' src='http://4.bp.blogspot.com/-DigewNLsMso/UCMlvW5zPmI/AAAAAAAADgs/dxEzvkOYPXo/s1600/new+message.png' title=''/>
</a>
 <a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#allposts' target='_blank' title='المشاركات'><img alt='' src='http://1.bp.blogspot.com/-0hBWczd_zRQ/UCMMdnQ7l9I/AAAAAAAADfY/7wVFO-g-Uvs/s1600/MOCHARAKAT.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pages' target='_blank' title='الصفحات'><img alt='' src='http://1.bp.blogspot.com/-6bk1dEz0WdA/UCMMe823fVI/AAAAAAAADfo/oxRxmVJtx7I/s1600/PAGES.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#publishedcomments' target='_blank' title='التعليقات'><img alt='' src='http://3.bp.blogspot.com/-o9sGJj-MIoU/UCMMc-KKk_I/AAAAAAAADfU/of8UsfwsHOk/s1600/COMMENTS.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#googleplus' target='_blank' title='Google +'><img alt='' src='http://4.bp.blogspot.com/-TV_ShFm3rns/UCOdcWJTB_I/AAAAAAAADhY/N_MjgjFZY94/s1600/google+plus.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overviewstats' target='_blank' title='الإحصائيات'><img alt='' src='http://1.bp.blogspot.com/-j74rSzStrqA/UCMMgYUa4AI/AAAAAAAADf4/s1_ybIoFG7Y/s1600/STATISTIC.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#adsensesummary' target='_blank' title='الأرباح'><img alt='' src='http://3.bp.blogspot.com/-KgD7fIXPip8/UCOdb_cVeBI/AAAAAAAADhU/f6Rl2WsOqLM/s1600/adsense.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pageelements' target='_blank' title='تخطيط'><img alt='' src='http://2.bp.blogspot.com/-AzJORCsyr7o/UCMMgw1u9GI/AAAAAAAADgA/91InNMBCyGA/s1600/TAKHTIT.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#template' target='_blank' title='قالب'><img alt='' src='http://4.bp.blogspot.com/-SWNP03FZvFw/UCMMhstw0oI/AAAAAAAADgI/PVwUKbX2xos/s1600/TASMIM.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#basicsettings' target='_blank' title='إعدادات'><img alt='' src='http://2.bp.blogspot.com/-d5yhMIm_t8U/UCMMflZVRuI/AAAAAAAADfw/WbEtkWv8q0s/s1600/PARAMETRE.png' title=''/>
</a>
</div>
</b:if>
</span>
</b:includable>

تعديل : 
1-قم بإستبدال xxxxxxxxxxx برقم تعريف مدونتك،وللحصول على هذا الرقم  . إضغط على إسم مدونتك من قائمة مدوناتك ثم قم بنسخ كود التعريف كما هو موضح في الصورة أسفله


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

أتمنى أن تروقكم هذه الميزة الجديدة في إنتظار آرائكم وإستفساراتكم

READ MORE

حل مشكل إختفاء أداة الصفحات في بلوجر

Posted by مدونة كيف On 0 comments
ليست المرة الأولة التي يقول فيها شخص ما أنه عند تغيير قالب مدونته أو عند التعديل عليه يحصل معه مشكل ما، ومن هذه المشاكل يوجد هذا المشكل الشائع وهو إختفاء أداة الصفحات، فعندما نتجه لإضافة أداة الصفحات بعد تعديل القالب يقول لنا أداة الصفحات مضاف فعلا لكن عندما نبحث عنها في التخطيط لانتجدها فما هو الحل؟؟؟... الحل هو إضافتها بشكل يدوي... كيف؟؟ تابع كيف:



نتجه إلى تحرير Html ← بالضغط على Control+F نبحث عن:
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
نستبدله بالكود التالي { نمسحه ونضيف الكود التالي مكانه } :


<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section>

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

READ MORE

قائمة مسندلة لوضع الفيديوهات على بلوجر.

Posted by مدونة كيف On 0 comments
مرحبا اليوم سأقدم لكم  إضافة جميلة جدا لمتستعمل من قبل في المدونات العربية وهي إضافة الفديوها في قائمة مسندلة بحيث لا تحجز حيز من مساحة الموضوع أو المقالة فيمكنك عرض 50 فيديو أو أكثر في قائمة مسندلة واحدة  لا يتجاوز إرتفاعها 10 px وعند الضغط عليها تظهر لك عناوين الفيديوهات فبضغطك على أي عنوان سيظهر الفيديو المقصود ، الأدات هذه لا تعمل بشكل أتوماتيكي يجب عليك وضع العناوين و الروابط بنفسك والأداة مصممة بإستخدام الجافا سكريبت ;) والجميل أنني قمت بتحسين الأداة لتستطيع وضعها على جوانب المدونة أيضا بيحث أن حجمه يتناسب بشكل تلقائي بالمكان الذي تضعها فيه :D
أقدم لكم صور للأداة :
مثال حي للأداة: إضغط هنا

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



<!--by-Ayoub Etmaiti- slide bar youtube -->     
<script type="text/javascript">
function MostrarVideo(idYouTube)
{
var contenedor = document.getElementById('divInnerVideo');
if(idYouTube == "")
{
contenedor.innerHTML = "";
}
else
{
var dimensiones = "width='420' height='315' frameborder='0'";
var url = "http://www.youtube.com/embed/" + idYouTube;
contenedor.innerHTML = "<iframe " + dimensiones + " src='"+ url +"'></iframe>";
}
}
</script>
<div style="margin:20px 0px;">
<select id="sVideos" onchange="MostrarVideo(this.value);">
<option value="" selected="selected">[إختر الفيديو المراد عرضه...]</option>
<option value="lOYBSSP64S4">عنوان الفيديو</option>
<option value="lOYBSSP64S4">-عنوان الفيديو-</option>
</select>
</div>
<div id="divInnerVideo"></div>
<!--by-Ayoub Etmaiti- slide bar youtube -->     
1-قم بتغيير عنوان الفيديو الذي سيظهر به في القائمة المنسدلة وذلك بتغيير العبارة "عنوان الفيديو"
2-قم بتغيير القيمة  lOYBSSP64S4 في الكود بالقيمة التي سوف تجدها برابط الفيديو ،مثلا لو كان رابط الفيديو على هذا الشكل :
http://www.youtube.com/watch?v=lOYBSSP64S4  ,سوف تستبدلها بالقيمة الموجودة في آخر الرابط ،اي ما لون باللون البرتقالي
3-الجملة " إختر الفيديو المراد عرضه" هي عنوان القائمة المنسدلة ويمكنك تغييره بأي جملة أخرى تريد
أتمنى أن تنال إعجابكم ،دمتم في رعاية الله 

READ MORE

في هذه الفقرة سوف نتطرق بعون الله تعالى إلى معرفة كيفية إضافة ملخص مواضيع المدونة وكذلك أقسام الرئيسية لمدونة بلوجرمع الصور ،وتتمثل أهمية هذه الإضافة في كون جميع المواضيع أو التدوينات والتسميات و كذلك أرشيف المدونة يتم تلخيصها أوتوماتيكيا وذلك بإضافة خاصية "إقرأ المزيد" أو "تابع القراءة" تحت كل ملخض للتدوينة .وكما تلاحظ في مدونتي أن كل المقالات عبارة على ملخصات متبوعة بثلاثة نقط وذلك يعني أن هناك تتمة للموضوع وتحتها مكتوب إقرأ المزيد .أما طريقة تطبيق هذه الخاصية ،عليك سوى تتبع المراحل التالية :
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).
</head>
قم بلصق الكود التالي قبله مباشرة :ملاحظة : عند تطبيقك لهذا الكود سوف يتم عرض صورة الملخص على اليسار ,ولعرض صورة الملخص على اليمين ،تجاهل هذا الكود وقم بلصق الكود الذي يليه.
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='text/javascript'/>
الصورة في يمين النص
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/read-more-right.js' type='text/javascript'/>
وإذا رغبت في ظهور الصورة في الوسط قم بلصق الكود التالي :
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/LireLaSuiteCentre0.js' type='text/javascript'/>
والآن قم بالبحث عن الكود التالي :
<data:post.body/>
ثم قم بإستبدالة بهذا الكود :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>إقرأ المزيد...</a></span>
<a href='http://www.abu-iyad.com/2010/07/read-more-for-blogger.html' style='display:none;'>Résumé</a><a href='http://abu-iyad.blogspot.com' style='display:none;'>abuiyad</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if>
يمكنك تبديل كلمة "إقرأ المزيد" ذات اللون الاحمر في الكود السابق بكلمة أخرى حسب رغبتك أو تبديلها بصورة مثل هذه :

وذلك بإستبدال عبارة إقرأ المزيد.. بالكود التالي :

<img src="https://sites.google.com/site/lightbox007/photo/readmore.jpg" title="إقرأ المزيد" alt="إقرأ المزيد"/>
و إذا رغبت في تبديل الصورة ،عليك فقط تبديل ما لون باللون الأحمربرابط الصورة المراد تبديلها
ولا تنسى أن تساهم في نشر المدونة،في إنتظار تشجيعاتكم.

READ MORE

قوائمة جميلة بhtml و Css

Posted by مدونة كيف On 0 comments
أهلا بكم من جديد في نطاق تصميمي لصفحة ويب جديدة أرسل لي أحد أصدقائي
 -Jordi Benejam Melia-
 هذه القوائم لأستفيد منها في تصميمي الجديد القوائم من تصميمه بالأشتمل و السي إس إس طبعا يمكن تطويرها أكثر وأكثر لتتناسب  
مع أعمالكم أنا سأضع لكم مثال لكل قائمة والكود الخاص بها ـ
أولا سأقدم لكم كود السي إس إس الذي يعمل مع جميع القوائم أضف كود السي إس إس ثم إختر كود الأتش تي إم إل الخاص بالقائمة
التي تفضلها

<style type="text/css" rel="stylesheet">
table{
/* الجوانب دون ملئ */
border-collapse:collapse;
}
/*خصائص الصفوف */
.taula_menu tr{
border-top:dotted 1px  #02223E;
}
/* خصائص الأعمدة */
.taula_menu td{ background-color:#FFAFAF; width:100px;
font:bold 12px Arial;
text-align:center; } .taula_menu td:hover{ background-color:#CF4D4D; font:bold 14px Arial; } /* Propietats de les columnes */ .taula_menu_2 td{
background-color:#AFE3FF;
vertical-align:top;
width:70px;
font:bold 12px Arial;
text-align:center;
border-top:solid 4px  #02223E;
} .taula_menu_2 td:hover{
background-color:#AFE3FF;
color:#175A7F;
text-align:center;
border-top:solid 4px orange;
}
span
{
border:1px solid #000000;
padding:4px;
margin:0px;
font:bold 12px Arial;
background-color:green;
color:#ffffff;
width:120px;
}
p
{
padding:0;
margin:3px;
font:bold 12px Verdana;
color:#ffffff;
background-color:orange;
width:120px;
padding:4px;
}
a:hover
{
color:yellow;
}
a{
text-decoration:none;
color:#ffffff;
}
</style>
 لمعاينة القوائم  إضغط هنا

<!-- القائمة الأولى -->
<table class="taula_menu" border="1" cellpadding="4" cellspacing="0">
<tr><td>Música</td></tr>
<tr><td>Cinema</td></tr>
<tr><td>Llibres</td></tr>
<tr><td>Jocs</td></tr>
<tr><td>Ciència</td></tr>
<tr><td>Notícies</td></tr>
</table>

<!-- القائمة الثانية -->

<table class="taula_menu_2" border="1" cellpadding="4" cellspacing="0">
<tr>
<td>Música</td>
<td>Cinema</td>
<td>Llibres</td>
<td>Jocs</td>
<td>Ciència</td>
<td>Notícies</td>
</tr>
</table>
<!-- القائمة الثالثة -->

<span>Música</span>
<span>Cinema</span>
<span>Llibres</span>
<span>Jocs</span>
<span>Ciència</span>
<span>Notícies</span>
<!-- القائمة الرابعة -->

<p><a href="direccio_web">Pàgina principal</a></p>
<p><a href="direccio_web">Videojocs</a></p>
<p><a href="direccio_web">DVD</a></p>
<p><a href="direccio_web">Blue-ray</a></p>
<p><a href="direccio_web">Moda</a></p>
<p><a href="direccio_web">Tecnologia</a></p>
<p><a href="direccio_web">Moda</a></p>
<p><a href="direccio_web">Reals</a></p>

READ MORE
السلام عليكم ورحمة الله  تعالى وبركاته ،درسنا اليوم سوف نتمكن من عمل فلترة للتعليقات المسيئة والمخلة بالآداب ،أحيانا ما يشكو بعض المدونين من مثل هذه الإسائات ،وتجعلهم يضطرون لتفعيل خاصية الإشراف علي التعليقات عبر توصلهم بها عن طريق البريد الإلكتروني مع الرغم بوجود خاصية منع التعليقات الغير مرغوب فيها المدعمة من بلوجر ،إلا أنها تكون غير مجدية في بعض الأحيان ،،لذلك سوف نقوم بإضافة سكريبت يضم الكلمات المسيئة وعند كتابة أحدها تظهر في التعليق على هذا الشكل *****

1.قم بالبحث عن الوسم :
<body>
ثم قم بلصق هذا الكود قبله مباشرة :
<script type='text/javascript'>
//<![CDATA[
function badwordfilter(ID){
var comm = document.getElementById(ID);
var comment = comm.innerHTML;
var reBadWords = /الكلمة مسيئة2|الكلمة مسيئة1/gi;
comment1 = comment.replace(reBadWords, "****");
comm.innerHTML = comment1;
comm.style.display = "block";
}
//]]>
</script>
ملاحظة : يمكنك إضافة أكثر من كلمة في الكود وهي الكلمات ما لون باللون الأحمر شرط أن يكون هذا الرمز | الفاصل بين كل كلمة وأخرى ،لتكن على هذا الشكل  : .|.....|......|الكلمة السيئة4|الكلمة السيئة3|الكلمة السيئة2|الكلمة السيئة1
وبطبيعة الحال من دون كتابة الأرقام

2.الآن قم بالبحث عن هذا الكود (إبحث عن ما لون باللون الأزرق لتجد الكود):
<p><data:comment.body/></p>
إن وجدت أكثر من واحد فالكود الأول هو المقصود :

3.ثم قم بإستبدال الكود كاملا بهذا الكود :
<p>
 <div expr:id='data:comment.id' style='display:none;'>
 <data:comment.body/>
 </div>
 <script type='text/javascript'>badwordfilter(&quot;<data:comment.id/>&quot;);</script>
</p>
4.وأخيرا قم بحفظ القالب .

READ MORE