السلام عليكم ورحمة الله تعالى وبركاته سوف نتطرق في هذه التدوينة إلى
كيفية إضافة الأزرار الجانبية للمواقع الإجتماعية : الفيسبوك ،جوجل بلس ،
تويتر ،والبريد RSS ,وهي عبارة عن إضافة واحدة تحتوي على 4 إضافات في آن
واحد حيث أنها تتميز في كونها لا تأخذ حيزا كبيرا في تنسيق المدونة .
والآن أترككم مع كيفية تطبيق هذه الإضافة على مدونكم .
قم بالبحث عن الكود التالي :
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :
إستبدل ما لون باللون البرتقالي بحسابك علي الفيسبوك
إستبدل ما لون باللون الأزرق بحسابك على التويتر
إستبدل ما لون باللون الاحمر بحسابك علي الفيدبيرنر
وإذا أردت عمل الإضافة في جهة اليسار لا تضيف الأكواد السابقة فما عليك سوى الضغط على الزر الأزق أسفله ثم إختر إسم مدونتك وسوف يتم تطبيق الإضافة مباشرة بعد ضغطك على إضافة عنصر واجهة المستخدم,لا تنسى تغيير حساباتك على الفيسبوك ،التويتر،والفيدبرنر كما تم شرحه سابقا
والآن أترككم مع كيفية تطبيق هذه الإضافة على مدونكم .
قم بالبحث عن الكود التالي :
ثم قم بلصق هذا الكود قبله :]]></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&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&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 == '') {this.value = 'أدخل إميلك هنا ...';}" onfocus="if (this.value == 'أدخل إميلك هنا ...') {this.value = '';}" 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>
إستبدل ما لون باللون البرتقالي بحسابك علي الفيسبوك
إستبدل ما لون باللون الأزرق بحسابك على التويتر
إستبدل ما لون باللون الاحمر بحسابك علي الفيدبيرنر
السلام عليكم ورحمة الله تعالى وبركاته ،في هذه التدوينة سوف نتعرف على كيفية تطبيق إضافة قائمة منزلقة لاخر مواضيعك والتي قام بشرحها الأخ خالد صاحب مدونة "الفضاء التكنولوجي"
على مدونته ،ويشكر على مجهوده في إنشاء هذه الإضافة المميزة ،فما أود أن
أضيفه هو كيفية تطبيقها تحت التدوينات كما هو مطبق في مدونة أبو إياد .
قم بالبحث عن الكود التالي :
ثم قم بلصق هذا الكود قبله :قم بالبحث عن الكود التالي :
]]></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(){$(".accordion h3:first").addClass("active");$(".accordion p:not(:first)").hide();$(".accordion h3").click(function(){$(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");$(this).toggleClass("active");$(this).siblings("h3").removeClass("active");});});</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] = "http://lh5.ggpht.com/_ZXEvc1YiIko/TLzMljzSYFI/AAAAAAAAA4g/FW2VlpJHWfE/s128/no-image.blogspacetech.jpeg";showRandomImg = true;jimgwidth = 80;jimgheight = 80;jfntsize = 12;jacolor = "#E67C15";jaBold = true;jtext = "التعليقات";jshowPostDate = true;jsummaryPost = 200;summaryFontsize = 12;summaryColor = "#000";numposts = 10;label = "إضافات بلوجر";home_page = "http://www.abu-iyad.com/";</script><div class='accordion'><script src='http://blogspacetech.googlecode.com/files/new.recent-posts.js' type='text/javascript'/></div></b:if>
- width: 620px قم تغيير هذه القيمة على حسب عرض الإضافة التي تريد
- إضافات بلوجر : قم تغيير هذه التسمية بأحد التسميات الخاصة بمدونتك
- قم بتغيير رابط المدونة برابط مدونتك
- وأخير قم بحفظ القالب
السلام عليكم ورحمة الله تعالى وبركاته ،سوف نتطرق في هذه التدوينة إلى معرفة كيفية تركيب إضافة أزرار التنقل لصفحات بلوجر ،حيث تمكنك من تصفح المدونة بشكل سريع وسلس إذ أنها تتوفر على أربع إتجاهات : إلى الأعلى ،إلى الأسفل,الرئيسية،رسالة أقدم ورسالة أحدث و بكونها تبقى ثابتة على صفحة المدونة مما يجعلك تقوم بعملية التنقل من مكان لآخر بكل سهولة ،والآن نتوجه لتطبيق الإضافة .
قم بالبحث عن الكود التالي :
قم بالبحث عن الكود التالي :
ثم قم بلصق هذا الكود بعده مباشرة :<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;}
السلام عليكم ورحمة الله وبركاته ،اليوم سوف نتعرف على كيفية إضافة الروابط الأوتوماتيكية لتدوينات بلوجر تحت كل موضوع ،حيث يُعرض على شكل جدول أسفل كل تدوينة ويتضمن روابط المقال على شكل 3 صيغ : URL,HTML,BBCODE
والان نترككم مع كيفية تطبيق الإضافة ,
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرhtml, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي :
وأخيرا قم بحفظ القالب ،أتمنى أن تنال إعجابكم ولأي إستفسارالمرجو ترك تعليقاتكم
والان نترككم مع كيفية تطبيق الإضافة ,
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحرير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 == "item"'><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='"<a href=&quot;" + data:post.canonicalUrl + "&quot; title=&quot;" + data:post.title + "&quot;>" + data:post.title + "</a>"' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td></tr><tr><td>BBCode</td><td><input expr:value='"[url=" + data:post.canonicalUrl + "]" + data:post.title + "[/url]"' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td></tr></table> </b:if>
وأخيرا قم بحفظ القالب ،أتمنى أن تنال إعجابكم ولأي إستفسارالمرجو ترك تعليقاتكم
السلام عليكم ورحمة الله اليوم أقدم لكم اضافة جميلة ويحتاجها الكثيرة منا ونرى انها مستعملة في أشهر المواقع الإجتماعية ، إنها قائمة افقية ثابتة اي تتبعك وانت تتصفح المدونة اذا نزلت تنزل معك واذا صَعِدْتَ صَعَدَتْ معك، أقدم لكم صورة الأداة بعد ان قمت بتعريبها و تطويرها:
- كما نلاحظ ان القائمة تحتوي على سهم يقوم بإصعادنا الى الاعلى واخر اتجاهه الى الأسفل يقوم بإنزالنا وبعدها نرى 5 ازرار يمككنا وضع روابطنا فيها ويمكننا زيادة العدد او العكس، ايضا نرى مربع بحث في الاضافة الأصل الغير المعربة مربع البحث لا يعمل وانا جعلته يعمل وبشكل جيد كما ينبغي,عندما ننزل القائمة تصبح شفافة نوعا ما وعندما نضع المؤشر عليها تصبح عادية كما كانت في السابق
الأن حان وقت عرض الاكواد لوضع هذه القائمة الرائعة في مدونتنا:
الخطوات:
أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن : </head>
ونقوم بإلصاق هذا الكود قبله .
وبعد هذا سنقوم بالبحث على </body> بنفس الطريقة التي استخدمناها سابقا ونقوم بإلصاق الكود التالي قبله أيضا مع تعديل ما يناسب:
الرابط-1 ، 2 ، 3 ، 4 و 5 بروابطنا التي نريد ان يتم التوجيه اليها بعد الظغط على الزر ، ونغير العناوين : عنوان الرابط 1
، 2 ، 3 ، 4 و 5 بالكلمة التي ستظهر على زر
مثال:
وهذا هو كل شئ مع تحياتي - كما نلاحظ ان القائمة تحتوي على سهم يقوم بإصعادنا الى الاعلى واخر اتجاهه الى الأسفل يقوم بإنزالنا وبعدها نرى 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)$('#nav').stop().animate({'opacity':'0.2'},400);else$('#nav').stop().animate({'opacity':'1'},400);});$('#nav').hover(function (e) {var scrollTop = $(window).scrollTop();if(scrollTop != 0){$('#nav').stop().animate({'opacity':'1'},400);}},function (e) {var scrollTop = $(window).scrollTop();if(scrollTop != 0){$('#nav').stop().animate({'opacity':'0.2'},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 == "") {this.value = "ابحث في المدونة...";}' onfocus='if (this.value == "ابحث في المدونة...") {this.value = ""}' 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>
السلام عليكم ورحمة الله اليوم أقدم لكم اضافة جميلة وقد كان الأخ أبو إياد قد عرض واحدة تشبهها وهي إضافة أزرار التنقل لصفحات بلوجر ،
وأنا اليوم اتيتكم بإضافة مشابهة تحتوي على الازرار التالية : زر مشاركات
اقدم ، زر مشركات احدث ، زر مقالة عشوائية {يقوم باختيار مقالة من عنده} ،
زر العودة الى الرئيسية واخيرا زر الصعود الى الأعلى..
صورة لهذه الإضافة على مدونتي التجريبية:
- كما نلاحظ أن هذه الإضافة لا تأخذ مكان كبيرة في المدونة وهي ذات شكل جميل ومفيدة ايضا.
الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا، شئ أخر أنا صممت هذه الإضافة لتعمل على الجهة اليمنى و اليسرى اختر الكود الذي يناسبك.
الخطوات:
أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن : </head>
لتركيب الإضافة على الجهة اليسرى نقوم بإلصاق هذا الكود قبل الوسم </head> .
ولتركيب الإضافة على الجهة اليمنى نقوم بإلصاق هذا الكود قبل الوسم </head> .
وبعد هذا سنقوم بالبحث على <b:includable id='main' var='top'> بنفس الطريقة التي استخدمناها سابقا ونقوم بإلصاق الكود التالي بعده :
وأخيرا قم بحفظ القالب
صورة لهذه الإضافة على مدونتي التجريبية:
- كما نلاحظ أن هذه الإضافة لا تأخذ مكان كبيرة في المدونة وهي ذات شكل جميل ومفيدة ايضا.
الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا، شئ أخر أنا صممت هذه الإضافة لتعمل على الجهة اليمنى و اليسرى اختر الكود الذي يناسبك.
الخطوات:
أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير 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>
السلام عليكم ورحمة الله ، أخوكم أيوب من جديد اليوم أقدم لكم إضافة جميلة وهي أزرار تابعني على يوتوب ، فيسبوك،تويتر والخلاصة والإضافة تتميز بأزرار أو ايقونات أنيقة وواضحة بحدود دائرية جميلة وعند الإتجاه اليها بمؤشر الفأرة تصبح الحدود مربعة شاهد الصورة :
- ونلاحظ من الصورة عمل الإضافة عند المرور بمؤشر الفأرة على احد الأيقونات، لاحظ ايقونة اليوتوب كيف هي مختلفة بحدود مربعة عن باقي الأيقونات.
الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.
الخطوات:
أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن : ]]></b:skin>
ثم نضيف الكود التالي قبله .
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :
وهذا هو كل شئ مع تحياتي
- ونلاحظ من الصورة عمل الإضافة عند المرور بمؤشر الفأرة على احد الأيقونات، لاحظ ايقونة اليوتوب كيف هي مختلفة بحدود مربعة عن باقي الأيقونات.
الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.
الخطوات:
أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير 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>
السلام عليكم ورحمة الله وبركاته ،ومرحبا بالجميع في تدوينة جديدة ،اليوم
سوف أقدم لكم إضافة جديدة من تصميمي ،تسمح لنا هذه الإضافة بإدارة المدونة
من داخل المدونة ,إذ يمكنك كتابة تدوينة جديدة ،أو التعديل على الرسائل أو
الإعدادات,أو مراجعة التعليقات ....فقط بكبسة زر من مدونتك ،لقد قمت بشرح
مثل هذه الإضافة في درس" قائمة إدارة المدونة على مدونات بلوجر " إلا أن هذه الإضافة الجديدة التي سوف أقدمها اليوم تتميز بكونها :
1-انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرhtml, ضع علامة
في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي :
ثم قم بوضع الكود التالي قبله :
1- تضم أزرار إدارة المدونة للمنصة الجيدة
2-عبارة عن قائمة ثابثة في أحد جوانب المدونة سواء على جهة اليمين أو اليسار
3- تسهل عليك التنقل بين قوائم حسابك على موقع بلوجر
4-لا تأخذ حيزا كبيرا في تنسيق المدونة
5-إمكانية إخفاءها على الزوار وإظهارها لصاحب المدونة فقط (admin)
2-عبارة عن قائمة ثابثة في أحد جوانب المدونة سواء على جهة اليمين أو اليسار
3- تسهل عليك التنقل بين قوائم حسابك على موقع بلوجر
4-لا تأخذ حيزا كبيرا في تنسيق المدونة
5-إمكانية إخفاءها على الزوار وإظهارها لصاحب المدونة فقط (admin)
]]></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;}
2-الآن قم بالبحث عن الكود التالي :
<b:include name='feedLinks'/>
<b:include name='nextprev'/>
<b:include name='ButtonsbloggerFix'/>
<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 != "error_page"'><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-كما ذكرنا سابقا فإن هذه إضافة تمكنك من التنقل في قائمة الإدارة على حسابك الخاص على موقع بلوجر ،حيث يمكنك إخفاء الإضافة على الزوار وإظهارها لك أنت فقط عند دخولك على حسابك في موقع بلوجر،كما هو شأن أزرار التحرير السريع المعتمدة لدى بلوجر،ولذلك إذا أردت إظهار الإضافة للزوار ،قم بحذف السطرين من الكود الأخير ،أي ما لون باللون الأحمر (السطر الثاني والسطر قبل الأخير)فلا مشكلة في ذلك لأن لو أحد الزوار قام بالضغط على أحد الأزرار سوف يقوم بفتح حسابه هو(كما فعلت أنا بمدونتي ) .
وإذا تركتهما ،سوف تظهر الإضافة لك أنت فقط عند دخولك على حسابك بموقع بلوجر،
أتمنى أن تروقكم هذه الميزة الجديدة في إنتظار آرائكم وإستفساراتكم
ليست المرة الأولة التي يقول فيها شخص ما أنه عند تغيير قالب مدونته أو عند
التعديل عليه يحصل معه مشكل ما، ومن هذه المشاكل يوجد هذا المشكل الشائع
وهو إختفاء أداة الصفحات، فعندما نتجه لإضافة أداة الصفحات بعد تعديل
القالب يقول لنا أداة الصفحات مضاف فعلا لكن عندما نبحث عنها في التخطيط
لانتجدها فما هو الحل؟؟؟... الحل هو إضافتها بشكل يدوي... كيف؟؟ تابع كيف:
نتجه إلى تحرير 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>
قم بحفظ القالب بعد المعاينة لتجد أن إضافة الصفحات قد عادة إلى مكانها.. أي إستفسار لا تتردد
مرحبا اليوم سأقدم لكم إضافة جميلة جدا لمتستعمل من قبل في المدونات
العربية وهي إضافة الفديوها في قائمة مسندلة بحيث لا تحجز حيز من مساحة
الموضوع أو المقالة فيمكنك عرض 50 فيديو أو أكثر في قائمة مسندلة واحدة لا
يتجاوز إرتفاعها 10 px وعند الضغط عليها تظهر لك عناوين الفيديوهات فبضغطك
على أي عنوان سيظهر الفيديو المقصود ، الأدات هذه لا تعمل بشكل أتوماتيكي
يجب عليك وضع العناوين و الروابط بنفسك والأداة مصممة بإستخدام الجافا
سكريبت ;) والجميل أنني قمت بتحسين الأداة لتستطيع وضعها على جوانب المدونة
أيضا بيحث أن حجمه يتناسب بشكل تلقائي بالمكان الذي تضعها فيه :D
أقدم لكم صور للأداة :
مثال حي للأداة: إضغط هنا
طريقة إستعمال، يمكننا إستعمال الأداة في أي مشاركة أو صفحة أو حتى بإضافة أداة الجافا سكريبت على جانب الصفحة أو في أي مكان، كل ما علينا هو نسخ الكود التالي :
2-قم بتغيير القيمة lOYBSSP64S4 في الكود بالقيمة التي سوف تجدها برابط الفيديو ،مثلا لو كان رابط الفيديو على هذا الشكل :
http://www.youtube.com/watch?v=lOYBSSP64S4 ,سوف تستبدلها بالقيمة الموجودة في آخر الرابط ،اي ما لون باللون البرتقالي
3-الجملة " إختر الفيديو المراد عرضه" هي عنوان القائمة المنسدلة ويمكنك تغييره بأي جملة أخرى تريد
أتمنى أن تنال إعجابكم ،دمتم في رعاية الله
طريقة إستعمال، يمكننا إستعمال الأداة في أي مشاركة أو صفحة أو حتى بإضافة أداة الجافا سكريبت على جانب الصفحة أو في أي مكان، كل ما علينا هو نسخ الكود التالي :
1-قم بتغيير عنوان الفيديو الذي سيظهر به في القائمة المنسدلة وذلك بتغيير العبارة "عنوان الفيديو"
<!--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 -->
2-قم بتغيير القيمة lOYBSSP64S4 في الكود بالقيمة التي سوف تجدها برابط الفيديو ،مثلا لو كان رابط الفيديو على هذا الشكل :
http://www.youtube.com/watch?v=lOYBSSP64S4 ,سوف تستبدلها بالقيمة الموجودة في آخر الرابط ،اي ما لون باللون البرتقالي
3-الجملة " إختر الفيديو المراد عرضه" هي عنوان القائمة المنسدلة ويمكنك تغييره بأي جملة أخرى تريد
أتمنى أن تنال إعجابكم ،دمتم في رعاية الله
في هذه الفقرة سوف نتطرق بعون الله تعالى إلى معرفة كيفية إضافة ملخص مواضيع المدونة
وكذلك أقسام الرئيسية لمدونة بلوجرمع الصور ،وتتمثل أهمية هذه الإضافة في
كون جميع المواضيع أو التدوينات والتسميات و كذلك أرشيف المدونة يتم
تلخيصها أوتوماتيكيا وذلك بإضافة خاصية "إقرأ المزيد" أو "تابع القراءة"
تحت كل ملخض للتدوينة .وكما تلاحظ في مدونتي أن كل المقالات عبارة على
ملخصات متبوعة بثلاثة نقط وذلك يعني أن هناك تتمة للموضوع وتحتها مكتوب
إقرأ المزيد .أما طريقة تطبيق هذه الخاصية ،عليك سوى تتبع المراحل التالية :
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).
قم بلصق الكود التالي قبله مباشرة :ملاحظة : عند تطبيقك لهذا الكود سوف يتم عرض صورة الملخص على اليسار ,ولعرض صورة الملخص على اليمين ،تجاهل هذا الكود وقم بلصق الكود الذي يليه.</head>
الصورة في يمين النص<script type='text/javascript'>var thumbnail_mode = "no-float" ;
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 = "no-float" ;
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 = "no-float" ;
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 == "static_page"'><br/><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</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 == "item"'><data:post.body/></b:if>
</b:if>
وذلك بإستبدال عبارة إقرأ المزيد.. بالكود التالي :
<img src="https://sites.google.com/site/lightbox007/photo/readmore.jpg" title="إقرأ المزيد" alt="إقرأ المزيد"/>
ولا تنسى أن تساهم في نشر المدونة،في إنتظار تشجيعاتكم.
أهلا بكم من جديد في نطاق تصميمي لصفحة ويب جديدة أرسل لي أحد أصدقائي
-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>
السلام عليكم ورحمة الله تعالى وبركاته ،درسنا اليوم سوف نتمكن من عمل
فلترة للتعليقات المسيئة والمخلة بالآداب ،أحيانا ما يشكو بعض المدونين من
مثل هذه الإسائات ،وتجعلهم يضطرون لتفعيل خاصية الإشراف علي التعليقات عبر
توصلهم بها عن طريق البريد الإلكتروني مع الرغم بوجود خاصية منع التعليقات
الغير مرغوب فيها المدعمة من بلوجر ،إلا أنها تكون غير مجدية في بعض
الأحيان ،،لذلك سوف نقوم بإضافة سكريبت يضم الكلمات المسيئة وعند كتابة
أحدها تظهر في التعليق على هذا الشكل *****
1.قم بالبحث عن الوسم :
وبطبيعة الحال من دون كتابة الأرقام
2.الآن قم بالبحث عن هذا الكود (إبحث عن ما لون باللون الأزرق لتجد الكود):
3.ثم قم بإستبدال الكود كاملا بهذا الكود :
ثم قم بلصق هذا الكود قبله مباشرة :<body>
ملاحظة : يمكنك إضافة أكثر من كلمة في الكود وهي الكلمات ما لون باللون الأحمر شرط أن يكون هذا الرمز | الفاصل بين كل كلمة وأخرى ،لتكن على هذا الشكل : .|.....|......|الكلمة السيئة4|الكلمة السيئة3|الكلمة السيئة2|الكلمة السيئة1<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>
وبطبيعة الحال من دون كتابة الأرقام
2.الآن قم بالبحث عن هذا الكود (إبحث عن ما لون باللون الأزرق لتجد الكود):
إن وجدت أكثر من واحد فالكود الأول هو المقصود :<p><data:comment.body/></p>
3.ثم قم بإستبدال الكود كاملا بهذا الكود :
4.وأخيرا قم بحفظ القالب .<p>
<div expr:id='data:comment.id' style='display:none;'>
<data:comment.body/>
</div>
<script type='text/javascript'>badwordfilter("<data:comment.id/>");</script>
</p>