كود التبادل الإعلاني النصي المميز

إخواني الكرام نعلم جميعا ان اغلب المدونات إن لم اقل معضمها تعتمد على التبادلات الإعلانية

سواءا بالبرن او نصي فقط لذالك قررت وضع كود خاص بالتبادل النصي وهو مميز 

يمكنك تغيير اللون لاي لون تريد لون الخلفية او لون مرور الفأرة على الإعلان وذالك لتجعله متناسقا مع مدونتك

صورة لشكل الكود

والمميز ايضا انه سهل التركيب فقط قم بإضافة أدة جديدة ثم ضع فيها هذا الكود

<style type='text/css'> #navlist { margin: 0px auto 0px auto; padding: 0px; list-style-type: none; float: center; display: block; } #navlist a { font-family: "DroidKufi-Regular"; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color:#B6D721; border: 1px solid #B6D721; font-size: 10pt; text-decoration: none; color: #fff; display: block; text-align: center; line-height: 30px; padding-right: 0px; margin-right: 0px; } #navlist a:hover { font-family: "DroidKufi-Regular"; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color:#6EA611; border:1px solid #6EA611; font-size: 12pt; text-decoration: none; color: #000000; display: block; text-align: center; line-height: 30px; padding-right: 0px; margin-right: 0px; } </style><br /> <ul id='navlist'><table align='center' width='100 %'> <tr> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='' target='_blank'>أعلن هنا</a><br /> </td> </tr> </table> <table align='center' width='100%'> <tr> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td></tr> <table align='center' width='100%'> <tr> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td></tr> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> </table> <table align='center' width='100%'> <tr> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td></tr> <table align='center' width='100%'> <tr> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td> <td align='center' width='25%'><br /> <a href='/' target='_blank'>إعلانك هنا</a><br /> </td></tr> </table> </table> </table> </ul> <div class='clear'> </div>

وهكذا تكون إنتهيت اتمنى ان يكون الكود قد لاق إعجابكم بالتوفيق للجميع

ودمتم في رعاية الله وحفضه

اضف 6اشكال مميزة لصندوق اقتباس بلوجر

كما نعلم جميعا ان صندوق الاقتباس Blockquote يعتبر مهم لمدوني شبكة بلوجر ويستعمل في تنسيق مواضيع المدونة ويضفي عليها شكلا مميزا .ويستعمل خاصة في مدونات بلوجر التي تطرح أكواد أو شروحات  فصندوق الاقتباس يعوض الاطار لتمييز الكود عن بقية النص!

اشكال مميزة لصندوق الاقتباس في بلوجر

اليوم تستطيع اضافة نماذج واشكال لصندوق الاقتباس بتقنية CSS ما عليك سوي تنفيذ الخطوات التالية:

1.  قم بالدخول إلى حساب مدونتك.
2.  أنقر على تصميم .
3.  ثم انقر فوق تحرير HTML
4.  فوق الرمز </head> مباشرة قم بلصق الكود التالي ثم احفظ القالب:

<link href='http://helplogger.googlecode.com/svn/trunk/css/blockquotes/styles.css' rel='stylesheet' type='text/css'/> <br />
الآن في كل مرة تقوم فيها بإنشاء مشاركة جديدة انقر علي زر HTML واضف رقم كود صندوق الاقتباس الذي اعجبك

الشكل الأول

 

 

<div class="code1"> النص او الكود </div>

  الشكل الثاني 

<div class="code2"> النص او الكود </div>

 الشكل الثالث

 

<div class="code3"> النص او الكود </div>

 الشكل الرابع

 

<div class="code4"> النص او الكود </div>

الشكل الخامس

 

<div class="code5"> النص او الكود </div>

 الشكل السادس

 

<div class="code6"> النص او الكود </div>

تغيير شكل ومظهر التسميات(العلامات الدليلية) لمدونة البلوجر

 بسم الله الرحمن الرحيم 

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

طريقة التركيب سهلة جدا ولاتستغرق أكثر من عدة دقائق

توحه للوحة التحكم >>تصميم>>أضافة أداة>>تهيئة HTML/JavaScript

بعد ذلك أضف الكود التالي داخل الخانة المخصصة لذلك

<style type="text/css"> /*<![CDATA[*/ .label-size a { display: inline-block; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); padding: 4px 7px; font-family: 'Helvetica Neue', helvetica, sans-serif; font-size: 12px; line-height: 14px; height: 14px; vertical-align: middle; margin-bottom: 6px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4); } .label-size a { color: #996633; border: 1px solid #DDA13C; background: rgb(238,177,75); background: url(data:image/svg+xml;base64,PD94bWwgdmV yc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG 5zPSJodHRwOi8vd3d3LnczLm9yZy' 8yMDAwL3N2ZyIgd2lkdGg9IjEwM CUiIGhlaWdodD0iMTAwJSIgdmlld0 JveD0iMCAwIDEgMSIgcHJlc2VydmV Bc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGl kPSJncmFkLXVjZ2ctZ2VuZXJhdGV kIiBncmFkaWVudFVuaXRzPSJ1c2V yU3BhY2VPblVzZSIgeDE9IjAlIiB5M T0iMCUiIHgyPSIwJSIgeTI9IjEwMCUi PgogICAgPHN0b3Agb2Zmc2V0PSIw JSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc 3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c 3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3A tY29sb3I9IiNjYzkxMmQiIHN0b3Atb3Bh Y2l0eT0iMSIvPgogIDw vbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lk dGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id XJsKCNncmFkLXVjZ2ctZ2VuZ XJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%); background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1))); background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 ); } .label-size a:before { content: '\2022'; color: #FFFFFF; margin-left: 4px; font-size: 15px; line-height: 13px; height: 13px; vertical-align: text-top; text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); } .label-size a:hover { text-decoration: none; background: rgb(240,183,86); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHR wOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwM CUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2Vy dmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW5 0IGlkPSJncmFkLXVjZ2ctZ2VuZX JhdGVkIiBncmFkaWVudFVuaXRz PSJ1c2VyU3BhY2VPblVzZSIgeD E9IjAlIiB5MT0iMCUiIHgyPSIwJSI geTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1 jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFj aXR5PSIxIi8+CiAgICA8c3RvcCBvZ mZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3A tb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbn Q+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIg ZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%); background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1))); background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 ); } /*]]>*/ </style>

أعمل حفظ للأداة

ثم بعد ذلك أختار أضافة أداة >>التسميات

وعدل الخيارات كما هو موضح في الصورة

أما أذا كنت مضيف أداة التسميات (العلامات الميتاتاج)

فقط قم بدخول على الأداة وأعمل التعديلات كما في الصورة  

أتمنى أن تنال على رضاكم 

وسلام عليكم ورحمة الله وبركاته

اضافة لا تنسى الانضمام الى متابعينا

بسم الله الرحمن الرحيم 

كود اضافه لاتنسى الانضمام الى متابعينا 

يظهر عند النزول الى اخر المدونة به ازرار المفضلات الاجتماعيه الخاصه بك

 طريقة التركيب :

    ادخل مدونتك .
    التخطيط .
    اضافة اداة HTML/JavaScript.
    الان اضف هذا الكود ( مع تعديل ما سأذكره ) : 

<script type="text/javascript" src="https://cnmu.googlecode.com/svn/trunk/slidesubsc.js"></script> <script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mblsocialslide").show("slow");else $("#mblsocialslide").hide("slow");});function closeMBlsocialslide(){$('#mblsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script> <style> #mblsocialslide{background:#f3f3f3;border:1px solid #BBBBBB;border-radius:9px;box-shadow: 0 1px 2px #999;padding:12px 14px 12px 14px;font:'DroidKufi-Bold';width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:65px;} </style> <div style="display: none;" id="mblsocialslide"> <a style="position:absolute;top:12px;right:10px;color:#555;font-size:15px;font-weight:bold;color:#C53A1E;" href="javascript:void(0);" onclick="return closeMBlsocialslide();">(X)</a> <span style="font:'DroidKufi-Bold';font-size: 20px; margin: 10px 20px; text-shadow: 1px 1px 0 #FFFFFF;">لا تنسى الإنضمام الى متابعينا</span><br /> <div style="float:left; margin:15px;"> <g:plusone annotation="none"></g:plusone></div> <div style="float:left; margin:15px;"> <iframe src="//www.facebook.com/plugins/like.php?href=رابط صفحتك على الفيس بوك&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div> <div style="float:left; margin:15px;"> <a href="https://twitter.com/اسم حسابك على تويتر" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow Us</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div> </div> <div class='clear'> </div>

 لا تنسى تقوم بتغير المطلوب حتى تتناسب مع مدونتك !!

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

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

شرح الدرس
من لوحة التحكم نفتح صفحة تحرير html ثم نحفظ نسخة احتياطية من القالب قبل بدء التعديل.
و نبحث عن :

</head>
قبلها أي فوقها مباشرة نلصق الكود الموالي:

<link href='http://sites.google.com/site/simoxisite/syntaxhighlighter/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shCore.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCpp.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCSharp.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCss.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushDelphi.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJava.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJScript.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPhp.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPython.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushSql.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushVb.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushXml.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushRuby.js' type='text/javascript'/  مرة أخرى نبحث عن:

</body> و قبله أي فوقه مباشرة نلصق الكود الآتي و نحفظ القالب:

<script language='javascript'> function start() { dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false); } window.onload = start; </script>
الآن بعد حفظ القالب سنتعرف طريقة وضع الكود بالتدوينة أو الموضوع.
كما لاحظتم في الكود الأول فإن الإضافة بها عدة ملفات جافاسكريبت كل واحد منها مختص بعرض أكواد لغة برمجة معينة ك php ، java ، javascript ، xml ، و غيرها ... و هذا سنأخذه بعين الاعتبار فيما يلي .
يدرج الكود كما يلي :

هنا يوضع الكود

أو

<textarea name="code" class="css">
هنا يوضع الكود
</textarea>

طبعا هذا الكود معد لعرض css و منه لعرض أكواد أي لغة أخرى نستبدل css باسم تلك اللغة.
باستعمال pre لعرض كود html تأكد من تعويض الأقواس المعقوفة < و > بما يلي

- < إلى &lt;
- > إلى &gt;

 و يمكن القيام بهذه العملية باستعمال هذه الأداة التي تعوض كل الأقواس بكود html دفعة واحدة .
أما إذا استعملت textarea فالمتصفح يتجاهل ما بين وسميها و يعرضها نصا ، إذا فهذه تعد الأبسط و الأسرع.

أتمنى أن أكون وفقت في شرح درس

إضافة ساعة جميلة إلى مدونتك أو موقعك

بسم الله الرحمن الرحيم 
والصلآة والسلأم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم 
السلآم عليكم ورحمة الله وبركاته .
في هذا درس انشالله سوف نتطرق إلى كيفية إضافة ساعة جميلة إلى مدونتك على بركت الله :)
طريقة التركيب :

ادخل مدونتك .
    التخطيط .
    اضافة اداة HTML/JavaScript.
    الان اضف هذا الكود

 <embed src="http://flash-clocks.com/flip-flash-clock.swf?timeOffset=local&faceColor=0xFFFFFF&numbersColor=0x222222" width=150px height=75px wmode="transparent" type="application/x-shockwave-flash"></embed>  <br>

ساعات أخرى إذا أعجبتك

الكود الخاص بها هو 

  <embed src="http://flash-clocks.com/analog-flash-clock.swf?timeOffset=local&faceColor=0xFFFFFF&numbersColor=0x222222&edgeColor=0xFFFFFF¢erColor=0x555555&hourHandColor=0x555555&minuteHandColor=0x555555&secondHandColor=0x555555" width=150px height=150px wmode="transparent" type="application/x-shockwave-flash">

الكود الخاص بها هو 

<embed src="http://flash-clocks.com/block-flash-clock.swf?timeOffset=local&backColor=0xFFFFFF&backAlpha=0&numbersColor=0x000000&hourColor=0x000000&minuteColor=0x000000&secondColor=0x000000" width=150px height=150px wmode="transparent" type="application/x-shockwave-flash">  <br>
هذا كل شيء أحبابي في الله  أتمنى أن يعجبكم الدرس