الصفحات

Thursday, November 27, 2014

قالب Mag News معرب و مطور

قالب Mag News معرب و مطور -  هو قالب مميز يصلح للمواقع الإخبارية والتقنية

قالب Mag News معرب و مطور -  هو قالب مميز يصلح للمواقع الإخبارية والتقنية القالب له العديد من المميزات اهمها التجاوب ودعم الاجهزة الذكية وتصميمه هادئ ومريح لكن أهم ما في هذا القالب تواجد أقسام متعدده


تعديل اقسام القائمة

 <!-- Navigation Start -->
          <div id='mobnav-btn'>قائمة</div>
          <nav>
        <ul class='sf-menu' id='example'>
          <li class='selected'><a expr:href='data:blog.homepageurl'><span class='home-icon'/>الرئيسية</a></li>
            <li><a href='/404'>صفحة 404</a></li>
          <li><a href='/#'>الفهرس</a></li>
          <li><a href='/#'>اتصل بنا</a></li>
 <!-- Dropdown Menu Start -->
            <li>
              <a href='/#'>قائمة منسدلة</a>
              <div class='mobnav-subarrow'/>
                <ul>
                  <li><a href='/#'>قسم 1</a></li>
                  <li><a href='/#'>قسم 2</a></li>
                  <li><a href='/#'>قسم 3</a></li>
                  <li><a href='/#'>قسم 4</a></li>
                  <li><a href='/#'>قسم 5</a></li>
                </ul>
            </li>
          <!-- Dropdown Menu End -->

يمكنك تعديل التسميات العربية بما تريد واما رمز الـ # بجوار كل تسمية هذا عدله بالرابط

تعديل الاقسام المتعددة

في التخطيط ستجد أدوات فوق صندوق المواضيع أضف الكود التالي طبقاً لإسم كل إضافة مع تغيير كلمة العاب بالقسم التي تريد عرض مواضيعه

<script src="/feeds/posts/default/-/العاب?published&alt=json-in-script&start-index=1&max-results=4&callback=repostl1"></script>

إضافة السلايدر شو 

قم بإضافة الكود التالي بأول اداة في التخطيط

<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div></div></div>
 <!-- MAIN CONTENT -->
  <div class="lof-main-outer">
      <ul class="lof-main-wapper">
<script src="/feeds/posts/summary?orderby=published&start-index=1&max-results=10&alt=json-in-script&callback=rpslider"></script>
      </ul>     
  </div>
<div class="lof-navigator-wapper">
        <div onclick="return false" href="" class="lof-previous">السابق</div>

      <div class="lof-navigator-outer">
            <ul class="lof-navigator">
<script src="/feeds/posts/summary?orderby=published&start-index=1&max-results=10&alt=json-in-script&callback=rpslider2"></script>
      </ul></div>
        <div onclick="return false" href="" class="lof-next">التالي</div>
 </div></div>

اضافة قسم ربح المال

مع استبدال كلمة ربح المال بالقسم التي تريد ظهور مواضيعه

<div class="als-container" id="demo3">
<span class="als-prev"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXyIdCjJadhf3oDsCvJhU5-aH19uGHqpo6BoHGS9UxnZTrBYEFwJ4yJjQ3wO-Kl5L7sq45NkQxcXh9i5yCTxDsfuVKvJ7aWZ6PzSxyGmepUbW38taw_WH3i-izxq1mS_Z7c86mUwIEhQ/s1600/previous.png" alt="?" title="previous" /></span>
<div class="als-viewport">
<ul class="als-wrapper">
<script src="/feeds/posts/default/-/ربح المال?published&alt=json-in-script&start-index=1&max-results=4&callback=rgpost"></script>
</ul>
</div>
<span class="als-next"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA8Y5crE-iaiO-Sdg3KCBkro7UtCmciBnTRLzT8wBeM871SLfM_nUXg0Q4LGzGaqu4Q-s3L-0owNVBxdbtZ3WVVUR318n38WasdiZoRO_jYCM7SAdSp_7e_j1oKYK22phQ7fNo-LmObw/s1600/next.png" alt="?" title="next" /></span>
</div>

إضافة مواقع التواصل الاجتماعي

لإضافهتا في السابدبار اضف الكود التالي بأداة HTML/JavaScript

<div id="buttons">

<div class="facebook button1">
    <i class="icon-facebook"></i>
    <div class="social-container fb">
        <div class="slide">
        <div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=http://www.facebook.com/mudwnp&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe></div>
        </div>
         Facebook
    </div>
</div>


<div class="twitter button1">
    <i class="icon-twitter"></i>
    <div class="social-container tw">
        <div class="slide">
        <div class="twitter_c">
<a href="https://twitter.com/mudwnp" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </div></div>
         Twitter
    </div>
</div>


<div class="google button1">
    <i class="icon-google-plus"></i>
    <div class="social-container tw">
        <div class="slide">
<div class='google_c'>
<!-- Place this tag in your head or just before your close body tag. -->
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<!-- Place this tag where you want the widget to render. -->
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/+mudwnpro" data-rel="publisher"></div></div>
        </div>
         Google+
    </div>
</div>


<div class="rss button1">
    <i class="icon-rss"></i>
    <div class="social-container tw">
        <div class="slide">
        <div class="rss_c">
<p><a href="http://feeds.feedburner.com/mudwnp" target='_blank'><img src="http://feeds.feedburner.com/~fc/TntByStc?bg=99CCFF&fg=444444&anim=0" height="26" width="88" style="border:0" alt="" /></a></p>
        </div>
        </div>
         Rss Feed
    </div>
</div>
</div>

إضافة قسمين في السايدبار

لإضافة المواضيع على حسب الاقسام اضف الكودا التالي بأداة HTML/JavaScript مع تعديل ما هو باللون الازرق باسم القسم التي تريد عرض مواضيعه

<div class='tabsar'>
<div id="tabsholder2">
        <ul class="tabs">
            <li id="tabz1">العاب</li>
        <li id="tabz2">برامج</li>
        </ul>
       
        <div class="contents marginbot">
            <div id="contentz1" class="tabscontent">   
   
<script src="/feeds/posts/default/-/العاب?published&alt=json-in-script&start-index=1&max-results=4&callback=myrecent"></script>

</div>

            <div id="contentz2" class="tabscontent">

<script src="/feeds/posts/default/-/برامج?published&alt=json-in-script&start-index=1&max-results=4&callback=myrecent"></script>

            </div>
        </div>
    </div>
</div>

إضافة قسم أخر المواضيع

<script src="/feeds/posts/summary?orderby=published&max-results=3&alt=json-in-script&callback=repost1"></script>

الباقيي سهل التعديل عليه و يوجد في ملف التحميل شرح لكيفية التعامل مع القالب اي سؤال او استفسار لا تترد بوضعه في تعليق

بالتوفيق

Monday, November 24, 2014

طريقة تزيين كتابة الاكواد في بلوجر

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

 طريقة تزيين كتابة الاكواد في بلوجر - هي من اهم الاضافات التي يجب ان تكون في كل مدونة بلوجر او موقع و ما يميز هذه الاضافة انه يمكنك وضع فوق كل كود ما هي طريقة عمله مثل CSS , JavaScript ,jQuery ,HTML و بضغطة زر يمكن نسخ الكود يمكنك معاينة الاضافة عبر الرابط التالي عند النقر على رابط المعاينة سوف تجد فوق كلمة result اضغط عليها لتظهر المعاينة



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

  1. الان قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير HTML

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'انقر مرتين لنسخ الكود';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}

ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script src='https://mudwnp.googlecode.com/svn/trunk/prism.js' type='text/javascript'/>

ايضا ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>

الان ايضا ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>


كيفية الاستخدام

عند كتابة موضوع جديد تنتقل إلى وضع HTML  و قم بوضع الاكواد التي تريدها مكان الكتابات التي باللون الاحمر
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> هنا توضع اكواد HTML </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> هنا توضع اكواد CSS </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> هنا توضع اكواد Javascript </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> هنا توضع اكواد JQuery </code></pre>

مع القليل من الخبرة في CSS يمكنك تنسيق الاضافة بشكل اكثر اي سؤال او استفسار لا تترد بوضعه في تعليق 

Sunday, November 23, 2014

قالب Lycoris 2 معرب و مطور

قالب Lycoris 2 معرب و مطور و يعد من افضل قوالب بلوجر 2014 محسن لمحركات البحث مثل جوجل و ياهو و سيو مدعم

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


المميزات


  1.  متجاوب مع جميع الشاشات " معاينة "
  2.  صفحة اتصل بنا " معاينة "
  3.  صفحة الفهرس " معاينة "
  4.  صفحة 404
  5. صفحة الأزرار " معاينة "
  6. محرك بحث متطور 
  7. موضوع عشوائي
  8.  إعلانات متجاوبة
  9.  ازرار المشاركة 
  10. تعريف الكاتب
  11.  سيو مدعم
  12.  التدوينات على شكل شبكة
  13.  قائمة مثبتة مع قوائم منسدلة 
  14. يحتوي على تعليقات بلوجر و تعليقات فيسبوك
      و المزيد ....


 الإضافات 


كود السلايدر في السايد بار / يضاف في اداة HTML/Javascript

<div id="slider-rotator" class="slider-rotator loading">
</div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "ضع هنا رابط مدونتك"
});
</script>


كود اتصل بنا /  يضاف في صفحة ثابتة

<div dir="rtl" style="text-align: right;" trbidi="on">
<form name="contact-form">
<span style="font-family: droid arabic kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> الإسم</span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
&nbsp;

<span style="font-family: droid arabic kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i>البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span></span><br />

<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
&nbsp;

<span style="font-family: droid arabic kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i>الرسالة <span style="color: red; font-weight: bolder;">*</span></span><br />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<br />
&nbsp;
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" /><br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
.post{padding:40px 20px;margin:0;background:#fff;}
.post-outer {overflow:hidden;padding:0 15px;}
#main {padding:0 10px;background:repeating-linear-gradient(-45deg, #fff, #fff 20px, #f3f1e2 20px, #f3f1e2 40px);}
</style></div>

كود صفحة الفهرس / يضاف في صفحة ثابتة 


<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="bp_toc">
إنتظر...</div>
<script src="https://mudwnp.googlecode.com/svn/trunk/mudwnp-sitemap.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script></div>


كود صفحة الفهرس 2 / يضاف في صفحة ثابتة 


<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="table-outer">
<table><tbody>
<tr><td><label>حسب الموضوع : </label></td><td><select id="orderFeedBy"><option selected="" value="published">موضوع جديد</option><option value="updated">آخر تحديث</option></select></td></tr>
<tr><td><label>حسب الاقسام : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">إنتظر ...</option></select></span></td></tr>
<tr><td><label>بحث مباشر : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
أنتظر ...</div>
<script src="https://arlina-design.googlecode.com/svn/tocs.js" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style></div>


كود صندوق الإشتراك في البريد الإلكتروني / يضاف في اداة HTML/Javascript



الباقي سهل التعديل عليه اي استفسار او سؤال بخصوص القالب لا تترد بوضع تعليق

بالتوفيق

Friday, November 21, 2014

حل مشكلة رسالة الخطأ في فيدبورنر

حل مشكلة الخطأ في فيدبورنر- في بعض المدونات عند التسجيل في موقع فيدبورنر تظهر رسالة خطأ او علامة X اليوم سوف نقوم بحل المشكلة

حل مشكلة رسالة الخطأ في فيدبورنر- في بعض المدونات عند التسجيل في موقع فيدبورنر تظهر رسالة خطأ او علامة X بعد إضافة موقعك او مدونتك لتقديم البريد الإلكتروني للإشتراك في موقعك و تكون الرسالة على هذا الشكل 

حل مشكلة الخطأ في فيدبورنر- في بعض المدونات عند التسجيل في موقع فيدبورنر تظهر رسالة خطأ او علامة X اليوم سوف نقوم بحل المشكلة

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

كيفية حل المشكلة 


    1. انتقل إلى موقع Feedburner
    2. قم باختيار المدونة الخاصة بك
    3. الان قم بالضغط على Publicize


      حل مشكلة الخطأ في فيدبورنر- في بعض المدونات عند التسجيل في موقع فيدبورنر تظهر رسالة خطأ او علامة X اليوم سوف نقوم بحل المشكلة

      الان من القائمة اليسرى اضغط على Email Subscriptions و قم بالضغط على Activate كما في الصورة

      حل مشكلة الخطأ في فيدبورنر- في بعض المدونات عند التسجيل في موقع فيدبورنر تظهر رسالة خطأ او علامة X اليوم سوف نقوم بحل المشكلة

      بعد الضغط على زر Activate سوف يظهر زر Save اضغط عليه

      حل مشكلة الخطأ في فيدبورنر- في بعض المدونات عند التسجيل في موقع فيدبورنر تظهر رسالة خطأ او علامة X اليوم سوف نقوم بحل المشكلة

      الان اصبح صندوق الإشتراك في البريد الإلكتروني مفعل في فيدبورنر و تم حل مشكلة رسالة الخطأ

      يمكنك ايضا مشاهدة :  تخصيص فيدبرنر لمدونات بلوجر

      بالتوفيق 

      Thursday, November 20, 2014

      قالب Lycoris 3 معرب و مطور

      قالب Lycoris 3 معرب و محسن لمحركات البحث و يعتبر من اقوى قوالب بلوجر 2014

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

      المميزات 


      1. متجاوب مع جميع الشاشات
      2. صفحة اتصل بنا " معاينة "
      3. صفحة ارشيف " معاينة "
      4. صفحة 404
      5. محرك بحث متطور
      6. موضوع عشوائي 
      7. إعلانات متجاوبة
      8. ازرار المشاركة
      9. تعريف الكاتب
      10. سيو مدعم
      11. التدوينات على شكل شبكة
      12. قائمة مثبتة مع قوائم منسدلة
             و المزيد ....

      الإضافات


      كود السلايدر في السايد بار / يضاف في اداة HTML/Javascript

      <div id="slider-rotator" class="slider-rotator loading">
      </div>
      <script type="text/javascript" src="https://arlina-design.googlecode.com/svn/feed-rotator.min.js"></script>
      <script type="text/javascript">
      makeSlider({
          url: "هنا ضع رابط مدونتك"
      });
      </script>


      كود اتصل بنا / يضاف في صفحة ثابتة

      <div dir="rtl" style="text-align: right;" trbidi="on"><form name="contact-form"><span style="font-family: droid arabic kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> الإسم</span><br /><input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />&nbsp;   <span style="font-family: droid arabic kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i>البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span></span><br />  <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />&nbsp;   <span style="font-family: droid arabic kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i>الرسالة <span style="color: red; font-weight: bolder;">*</span></span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />&nbsp; <input id="ContactForm1_contact-form-submit" type="button" value="إرسال" /><br /><div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><style type="text/css">#comments, #blog-pager, .breadcrumbs, .post-footer{display:none} .post{padding:40px 20px;margin:0;background:#fff;} .post-outer {overflow:hidden;padding:0 15px;} #main {padding:0 10px;background:repeating-linear-gradient(-45deg, #fff, #fff 20px, #f3f1e2 20px, #f3f1e2 40px);} </style></div>


      كود صفحة الفهرس / يضاف في صفحة ثابتة

      <div dir="rtl" style="text-align: right;" trbidi="on">
      <div id="table-outer">
      <table><tbody>
      <tr><td><label>حسب الموضوع : </label></td><td><select id="orderFeedBy"><option selected="" value="published">موضوع جديد</option><option value="updated">آخر تحديث</option></select></td></tr>
      <tr><td><label>حسب الاقسام : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">إنتظر ...</option></select></span></td></tr>
      <tr><td><label>بحث مباشر : </label></td><td><form id="postSearcher">
      <input type="text" /></form>
      </td></tr>
      </tbody></table>
      </div>
      <br />
      <br />
      <header id="resultDesc"></header>
      <br />
      <ul id="feedContainer"></ul>
      <div id="feedNav">
      أنتظر ...</div>
      <script src="https://arlina-design.googlecode.com/svn/tocs.js" type="text/javascript"></script>
      <style scoped="" type="text/css">
      #comments {display:none;}
      </style></div>

      الباقي سهل التعديل عليه اي استفسار او سؤال بخصوص القالب لا تترد بوضع تعليق

      بالتوفيق 

      Saturday, November 15, 2014

      اضافة شريط التحميل في المدونة مثل يوتيوب

      كيفية اضافة شريط التحميل في المدونة مثل موقع يوتيوب بطريقة احترافية

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


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

      1. الان قم بالدخول إلى لوحة تحكم المدونة
      2. اختر قالب 
      3. ثم انقر فوق تحرير HTML
      ابحث عن الوسم </body> و اضف الكود التالي فوقه
      <script type='text/javascript'>
      //<![CDATA[
      var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
      a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
      k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
      var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
      //]]>
      </script>


      التنسيق

      لتغيير حجم عرض شريط التحميل استبدل height:"2px"
      الان لتغيير لون شريط التحميل استبدل a.bg=a.bg||"#db3131 باللون الذي تريده و يمكنك استخدام اكواد الالوان

      اي سؤال او استفسار لا تترد بوضعه في تعليق

      بالتوفيق

      Friday, November 14, 2014

      قالب pro vision محسن لمحركات البحث

      قالب pro vision محسن لمحركات البحث و من افضل قوالب بلوجر معربة لأنه محسن لمحركات البحث

      قالب pro vision محسن لمحركات البحث و من افضل قوالب بلوجر معربة لأنه محسن لمحركات البحث مثل ياهو و جوجل و سيو و يوجد به الكثير من الاضافات و الوانه هادئة و مريحة للعين يمكنك تحميل و معاينة القالب عبر الرابط التالي

      مميزات القالب



      1. متحاوب مع جميع الشاشات
      2. يحتوي على صفحة الفهرس " معاينة "
      3. يحتوي على صفحة اتصل بنا " معاينة "
      4. سيو 100%
      5. القالب عامودين
      6. يحتوي على فوتر بـ 3 اعمدة
      7. مكان مخصص للإعلانات 
      8. يحتوي على قائمتين " رئيسية و منسدلة "
      9. يحتوي على صفحة خطأ 
      10. يحتوي على جرس التعليقات و اخر المعلقين
      11. و الكثير من الاضاافات اكتشفوها بنفسكم


      التعديلات على القالب


      اولا سوف نبدأ بإضافة صفحة الفهرس 


      انشيء صفحة جديدة و انتقل إلى وضع HTML  و قم بوضع الكود التالي

      <div dir="rtl" style="text-align: right;" trbidi="on">
      <div id="bp_toc">
      فهرس المدونة انتظر قليلا....</div>
      <script src="https://mudwnp.googlecode.com/svn/trunk/index.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script></div>


      ثانيا إضافة صفحة اتصل بنا 


      انشيء صفحة جديدة و انتقل إلى وضع HTML  و قم بوضع الكود التالي

      <div dir="rtl" style="text-align: right;" trbidi="on">
      <form name="contact-form">
      الإسم
      <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
      <br />
      البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span>
      <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
      <br />
      &nbsp;الرسالة<span style="color: black; font-weight: bolder;">*</span>
      <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
      <br />
      &nbsp;<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
      <br />
      <div style="max-width: auto; text-align: center; width: auto;">
      <div id="ContactForm1_contact-form-error-message">
      </div>
      <div id="ContactForm1_contact-form-success-message">
      </div>
      </div>
      </form>
      <style type="text/css">
      </style></div>

       ثالثا التعديل على جرس التعليقات 


      ابحث عن الكود و قم بتغيير رابط مدونتي إلى مدونتك انزل إلى اسفل قليلا سوف تجد الرابط قم بتغييره ايضا

      <div id='show-total'/>
          <script type='text/javascript'>
          //<![CDATA[
          var originalTitle = document.title;
          var cm_config = {
              home_page: "http://mudwnp.blogspot.com",

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

      Thursday, November 13, 2014

      قائمة منسدلة احترافية بتقنية Ajax

      Ajax Menu
      قائمة احترافية تعمل بتقنية Ajax يمكنك من خلالها جلب آخر المواضيع من الروابط المضافة للأقسام اضافة على احتوائها على محرك بحث يعمل بنفس التقنية فيمكنك البحث مباشرة دون الإنتقال لصفحات اخرى القائمة بتطويرات حصرية لكن مدون وسيتم شرح تنسيق القائمة وتعديل الوانها لتتناسب مع الوان قالبك ويمكنك معاينة القائمة من الرابط التالي
      يمكنك تركيب القائمة في آداة HTML/JavaScript

      <style>
      #cnmujmecontain {
      background: #fff;
      border-bottom: 1px solid #e6e6e6;
      float: right;
      position: absolute;
      right: 0;
      top: 0;
      width: 100%;
       }

      .cnmuajm * {
      margin: 0;
      padding: 0;
       }

      ul.cnmuajm {
      list-style: none;
      line-height: 1;
      overflow: visible!important;
       }

      ul.cnmuajm:after {
      margin: 0;
      padding: 0;
      content: ' ';
      display: block;
      height: 0px;
      clear: both;
       }

      ul.cnmuajm li {
      float: right;
      display: inline;
      position: relative;
      text-transform: uppercase;
       }

      ul.cnmuajm li a {
      display: block;
      line-height: 50px;
      padding: 0 20px;
      text-decoration: none;
      color: #2c2c2c;
      transition: all 0.7s ease-in-out;
       }
      ul.cnmuajm li a:hover { background:#00a7fb; color:#fff;}
       .hmenulin {
        background: url("https://lh3.googleusercontent.com/-E2NkQvKwGUE/VGOaM-GUOoI/AAAAAAAAFEw/Ac6VSGgcmkk/s24/home_icon.png") no-repeat scroll center center #00a7fb;
        height: 50px;
        margin-left: 2px !important;
        width: 24px;
      }
      .hmenulin:hover {background: url("https://lh3.googleusercontent.com/-E2NkQvKwGUE/VGOaM-GUOoI/AAAAAAAAFEw/Ac6VSGgcmkk/s24/home_icon.png") no-repeat scroll center center #000 !important; }
      ul.cnmuajm ul {
      position: absolute;
      display: none;
      top: 100%;
      border: 1px solid #ccc;
       }

      ul.cnmuajm li:hover > ul {display: block;}

      ul.cnmuajm ul li {
      z-index: 72;
      float: none;
      min-width: 160px;
      background: #f5f5f5;
      text-shadow: none;
       }

      ul.cnmuajm ul li a {
      text-transform: none;
      color: #aaa;
       }

      ul.cnmuajm ul li a:hover,ul.cnmujaxmenu ul li a.hover {background: #00A7FB;}

      ul.cnmuajm ul ul {
      display: none;
      right: 100%;
      top: 0;
       }

      ul.cnmujaxmenu li div.submenu {
      position: absolute;
      width: 500px;
      z-index: 90;
      right: 0;
      top: 100%;
      overflow: hidden;
      min-height: 150px;
      background: #f0f0f0;
      -moz-transform: translate(0,30px);
      -webkit-transform: translate(0,30px);
      -o-transform: translate(0,30px);
      transform: translate(0,30px);
      transform-origin: 50% 0;
      visibility: hidden;
      opacity: 0;
      color: #929292;
      box-shadow: 0 10px 7px -7px rgba(0,0,0,0.1);
      transition: all 0.3s ease-in-out;
       }

      ul.cnmujaxmenu li:hover div.submenu {
      visibility: visible;
      opacity: 1;
      -moz-transform: translate(0,0);
      -webkit-transform: translate(0,0);
      -o-transform: translate(0,0);
      transform: translate(0,0);
       }

      ul.cnmujaxmenu ul ,ul.cnmujaxmenu ul li {
      display: block!important;
      border: 0 none!important;
      margin: 0!important;
      padding: 0!important;
       }

      ul.cnmujaxmenu ul li {
      background: none!important;
      float: none!important;
       }

      ul.cnmujaxmenu ul.verticlemenu {
      position: absolute;
      width: 33%;
      right: 0;
      top: 0;
      bottom: 0;
      background: #202020;
       }

      ul.cnmujaxmenu ul.postslist {
      position: relative;
      display: block;
      width: 65%;
      float: left;
      margin: 0 0 15px 0!important;
      background: none;
       }

      ul.cnmujaxmenu ul.postslist li {
      display: block;
      overflow: hidden;
      position: relative;
      min-height: 60px;
      padding: 15px 110px 15px 8px!important
       }

      ul.cnmujaxmenu ul.postslist li .imgCont {
      position: absolute;
      right: 0;
      top: 15px;
      width: 100px;
      height: 70px;
      overflow: hidden;
      font-size: 0;
      line-height: 0;
      border: 1px solid #929292;
       }

      ul.cnmujaxmenu ul.postslist li .imgCont img {
      position: relative;
      top: -20px;
      margin: 0;
      padding: 0;
      width: 100px;
      height: 100px;
      display: block;
       }

      ul.cnmujaxmenu ul.postslist li a {
      display: block;
      line-height: 1.4;
      padding: 0!important;
      color: #666;
      transition: all 0.7s ease-in-out;
       }

      ul.cnmujaxmenu ul.postslist li a:hover {
      color: #00A7FB;
      background: transparent;
       }
       .verticlemenu a:hover {color: #fff;}
      ul.cnmujaxmenu .loader {
      background: url('https://lh3.googleusercontent.com/-taZFnpxM_xo/VGN7mTXCwrI/AAAAAAAAFEg/cMd1XWKxFEo/s16/loading.gif') no-repeat scroll 0 0 transparent;
      width: 22px;
      height: 22px;
      position: absolute;
      top: 50%;
      margin-top: -11px;
      left: 5px;
       }

      ul.cnmujaxmenu .menuArrow {
      border-bottom: 4px solid transparent;
      border-top: 4px solid transparent;
      border-right: 4px solid #fff;
      display: block;
      height: 0;
      margin-top: -4px;
      position: absolute;
      left: 11px;
      top: 50%;
      width: 0;
       }

      #cnmujaxmenu {
      height: 50px;
      width: auto;
      position: relative;
      font: 14px tahoma;
      margin: 0 auto;
      padding: 0 20px;
      max-width: 950px;
       }
       /*====== Search ======*/
       li.search-form {
      float: left!important;
      line-height: 50px;
      margin: 0 20px 0 0;
       }

      li.search-form .searchbar {
      border: none;
      font: 14px tahoma;
      margin-left: -5px;
      padding: 10px 5px;
      background: #f9f9f9;
      color: #777;
      width: 130px;
       }

      li.search-form .searchbar:focus {
      border: none;
      outline: none;
      background: #fafafa;
      color: #666;
       }

      li.search-form .searchsubmit {
      background: #00A7FB;
      border: none;
      color: #fff;
      cursor: pointer;
      font: bold 14px tahoma;
      padding: 8px 5px;
      transition: all 0.7s ease-in-out;
       }

      li.search-form .searchsubmit:hover {background: #000;}

      #search-result {
      border-top: none;
      background-color: #FFF;
      padding: 10px;
      margin: 51px 0 10px;
      width: 278px;
      height: auto;
      position: absolute;
      top: 0;
      left: 0;
      max-height: 310px;
      overflow: auto;
      z-index: 99;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      display: none;
       }

      #search-result li {
      border: 1px dotted #eee;
      color: #aaa;
      font-size: 0;
      line-height: 1em;
      margin: 0 0 5px 5px;
      overflow: hidden;
      padding: 10px;
      width: 240px;
       }

      #search-result img {
      float: right;
      margin: 0 0 0 8px;
      border: 3px solid #EEE;
       }

      #ajax-search-form a {
      color: #888;
      line-height: 1.9em !important;
      font: normal 12px tahoma;
      text-decoration: none;
      padding: 0;
       }

      #search-result ol,
          #search-result h4 {
      margin: 0;
      padding: 0;
       }

      #search-result h4, #search-result strong {
      display: block;
      margin: 0 0 10px 0;
      font: normal 12px tahoma;
      color: #00A7FB;
       }

      #search-result ol {
      margin: 0;
      text-align: right;
       }

      #search-result ol a:hover {
      color: #00A7FB;
      text-decoration: underline;
      background: none;
       }

      #search-result .close {
      display: block;
      position: absolute;
      top: 0;
      left: 10px;
      line-height: normal;
      color: #f00;
      font-size: 18px;
       }
      #search-result strong {color: #00A7FB;}
      #blog-pager {
      margin: 1em 0;
      text-align: center;
      overflow: hidden;
      clear: both;
       }
      </style>

      <div id="cnmujmecontain">
      <ul id="cnmujaxmenu" class="cnmuajm">
      <li><a class="hmenulin" href="/"></a></li>
      <li><a href="#">تعديل</a></li>
      <li>
      <a href="#">قائمة منسدلة</a>
      <ul>
      <li><a href="#/search/label/name">القسم</a></li>
      <li><a href="#/search/label/name">القسم</a></li>
      <li><a href="#/search/label/name">القسم</a></li>
      <li><a href="#/search/label/name">القسم</a></li>
      <li><a href="#/search/label/name">القسم</a></li>
      </ul>
      </li>
      <li><a href="#">تعديل</a></li>
      <li><a href="#">تعديل</a></li>
      <li class='search-form'>
      <form action='/search'  id='ajax-search-form' class='searchblog' method='get'>
      <input class='searchbar' name='q' placeholder='البحث في الموقع ...' size='30' type='text'/>
      <input class='searchsubmit' type='submit' value='البحث'/>
      </form>
      </li>   
      </ul>
      </div>

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
      <script src='https://cnmu.googlecode.com/svn/trunk/2014/Ajaxmenu.js' type='text/javascript'></script>
      <script src='https://cnmu.googlecode.com/svn/trunk/2014/Ajax-search.js' type='text/javascript'></script>
      <script>
      jQuery(document).ready(function($) {
       $('#cnmujaxmenu').ajaxBloggerMenu({
        numPosts : 3,
        defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEift5-bHdjQi9EamxzNerK3GCgcwgOJuYphlgUqVkkfp3793aCVDQJssQWQsGkPtdDoHcQKr8FBfA4etkzaAHC-JhwNl53wuVq5PDm2MMVcsdw7OLCKxV4Nmq-4_K-rOZaDKM03REOu1OE/s500/No_image.gif'
       });
      });
      </script>

      التنسيق

      هذا tahoma هو نوع الخط الإفتراضي للقائمة يمكنك تعديله
      لتغير اللون الأزرق في القائمة ابحث عن اللون التالي #00a7fb وعدله بكود اللون الذي تريد ملاحظة ستجده متكرر عدة مرات
      هذا #fff هو لون خلفية القائمة في حالة تعديله بلون غامق كالأسود مثلا ستعدل اللون التالي #2c2c2c وهو لون الروابط لكي تظهر
      وهذا #e6e6e6 هو لون الإطار السفلي والرقم 1 هو حجمه
      كما نرى القائمة ظاهر بالأعلى لو اردناها تظل ثابتة عند التمرير  نستبدل هذه الكلمة absolute  بهذه fixed
      في حالة كانت القائمة تغطي جزء عام من المدونة في المنطقة العلوية يمكن تجنب هذا بإضافة الكود التالي فوق الوسم ]]></b:skin>
      body {margin-top: 50px !important;}
      الرقم 50 هو درجة البعد من الاعلى يمكنك زيادته او انقاصة حتى يضبط معك المظهر
      في حالة اردنا ان تكون القائمة تظهر في مكان الآداة يعني لو كانت الآداة التي أضفنا بها القائمة في مكان مناسب أسفل الهيدر مثلا ونريدها في هذا المكان دون ان تظهر بالأعلى فقط ازل الأكواد التالية من بداية كود الآداة
      -bottom
      position: absolute;
      right: 0;
      top: 0;

      الإستخدام

      الرقم 3 الموجود في نهاية الكود هو عدد المواضيع التي تظهر في الأقسام
      بتكرار الكود الاخضر داخل الآداة تحصل على قائمة منسدلة جديد
      <a href="#">قائمة منسدلة</a>
      <ul>
      <li><a href="#/search/label/name">القسم</a></li>
      <li><a href="#/search/label/name">القسم</a></li>
      <li><a href="#/search/label/name">القسم</a></li>
      <li><a href="#/search/label/name">القسم</a></li>
      <li><a href="#/search/label/name">القسم</a></li>
      </ul>
      </li>
      الأكواد الداخلية والتي علمت أحدها باللون البني كل سطر يساوي قسم جديد اما ان تزيد بتكراره او تقلل بحذف احدهم
      رمز # هو رابط مدونتك أما كلمة name هي اسم القسم كما هو موجود في مدونتك اما كلمة  القسم هي الكلمة التي سيظهر بها في القائمة مثال لو لديك قسم بإسم Design ستضيفه بدل كلمة name لكن مثلا ان كنت تريد ان يظهر في القائمة بإسم عربي تصميم فتضيف كلمة تصميم بدلا من كلمة القسم
      هذه اهم التنسيقات وأبسط شرح للإستخدام وبقليل من الخبرة يمكنك عمل الكثير من تلك القائمة
      دمتم في امان الله




      Tuesday, November 11, 2014

      اضافة نموذج الاتصال في صفحة ثابتة

      اضافة نموذج الاتصال في صفحة ثابتة يعتبر من اهم اضافات بلوجر في المدونة لأنه من خلاله يمكن التواصل معك بشكل مباشر

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

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

      اولا عليك اضافة نموذج الاتصال من التخطيط


      1. الان قم بالدخول إلى لوحة تحكم المدونة
      2. اختر قالب 
      3. ثم انقر فوق تحرير HTML

      ابحث عن الوسم </head> و اضف الكود التالي فوقه
      <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>


      الان ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
      /* Contact Us mudwnp */
      #ContactForm1 {
          display: none;
      }

      #ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
          width: 300px;
          height: auto;
          margin: 10px auto;
          padding: 10px;
          background: #F4F3F3;
          color: #666;
          border: 1px dashed #ddd;
          transition: all 0.5s ease-in-out;
      }

      #ContactForm1_contact-form-email-message {
          width: 450px;
          height: 175px;
          margin: 10px auto;
          padding: 10px;
          background: #fdfdfd;
          color: #666;
          font-family: 'Droid Arabic Kufi',sans-serif;
          border: 1px dashed #ddd;
          transition: all 0.5s ease-in-out;
      }

      #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
          background: #fff;
          outline: none;
          border: 1px dashed #f8a82a;
      }

      #ContactForm1_contact-form-submit {
          font-family: 'Droid Arabic Kufi';
          font-size: 15px;
          width: 101px;
          height: 35px;
          float: right;
          color: #fff;
          padding: 0;
          margin: 10px 0 3px 0;
          cursor: pointer;
          background: #aaa;
          border: none;
          border-radius: 2px;
          transition: background 0.4s linear;
      }

      #ContactForm1_contact-form-submit:hover {
          background: #f8a82a;
      }

      #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
          width: 450px;
          margin-top: 35px;
      }

      الان قم بحفظ القالب و قم بإنشاء صفحة ثابتة مع وضع الخيارات مثل الصورة


      و اخيرا انتقل إلى وضع HTML و قم بوضع الكود التالي


      <form name="contact-form">
      <span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> الإسم</span>
      <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> 

      <span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span></span>
      <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> 

      <span style="font-family: Droid Arabic Kufi, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> الرسالة<span style="color: red; font-weight: bolder;">*</span></span>
      <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
      <input id="ContactForm1_contact-form-submit" type="button" value=" إرسال " /> 
      <div style="max-width: 222px; text-align: center; width: 100%;">
      <div id="ContactForm1_contact-form-error-message">
      </div>
      <div id="ContactForm1_contact-form-success-message">
      </div>
      </div>
      </form>

      التنسيق


      استبدل Droid Arabic Kufi بالخط الموجود في مدونتك ستجدها مكررة اكثر من مرة استبدلها كلها

      يمكنك ايضا مشاهدة : تخصيص نموذج الاتصال الجزء الاول
                                 إنشاء نموذج اتصال احترافي لمدونات بلوجر


      اي سؤال او استفسار لا تترد بوضعه في تعليق بالتوفيق


      Monday, November 10, 2014

      طريقة عمل محتوى مخفي

      خدعة ظريفة لعمل محتوى مخفي أو بالتحديد محتوى قابل للإظهار والإخفاء Hide and show وتفيد هذه الطريقة في المدونات التي تكون مواضيعها طويلة

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


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


      1. قم بالدخول إلى لوحة تحكم المدونة
      2. اختر قالب 
      3. ثم انقر فوق تحرير HTML
      الان ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
      #flippy {
          text-align: center;
      }

      #flippy button {
          background: #aa65c7;
          color: #fff;
          text-align: center;
          margin: 0 auto;
          border: none;
          border-radius: 3px;
          padding: 8px 16px;
          margin: 10px auto;
          font-size: 14px;
          font-weight: bold;
          font-family: Droid Arabic Kufi;
          box-shadow: 0px 3px 0px 0px #883da7;
          vertical-align: middle;
          cursor: pointer;
          text-shadow: 0 1px rgba(0, 0, 0, 0.3);
          transition: background 0.1s ease-in-out;
      }

      #flippy button:hover, #flippy button:focus {
          background: #9e4fbf;
          outline: none;
      }

      #flippanel {
          padding: 1px;
          text-align: right;
          background: #f5f5f5;
          border: 0px;
      }

      #flippanel {
          padding: 24px;
          display: none;
      }

      التنسيق

      هذ اللون هو لون خلفية الزر استبدل #aa65c7
      عند تغيير الخلفية يجب تغيير#883da7  بلون اغمق من الخلفية بشيء بسيط لأنه الخط الملون في اخر الزر
      هذا اللون هو لون خلفية الزر عند مرور الماوس #9e4fbf
      لتغيير حجم الخط استبدل الرقم الذي باللون الاحمر 14px
      لتغيير نوع الخط استبدل Droid Arabic Kufi بالخط الموجود في مدونتك


      الان ابحث عن الوسم </body> و اضف الكود التالي فوقه
      <script>
      $(document).ready(function() {
          $("#flippy").click(function() {
              $("#flippanel").slideToggle("normal");
          });
      });
      </script>


      الان طريقة الاستخدام


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

      <div id="flippy"><button>إظهار / إخفاء</button></div>
      <div id="flippanel">
      هنا نكتب النص او اكواد الصور المراد إخفائها
      </div>

      يمكنك استبدال إظهار / إخفاء بالكلمة التي تعجبك
      يجب استبدال هنا نكتب النص او اكواد الصور المراد إخفائها  بالنص او الشيء المراد إخفائه

      يمكن وضع اكثر من زر في الموضوع على حسب ما تريد فقط عليك استبدال المعرفات flippy , flippanel  مع تغيير الوان الزر كما في الاعلى و مع القليل من الخبرة في CSS يمكن تنسيق الزر بشكل اجمل بالتوفيق

      يمكنك ايضا مشاهدة :  اضافة ازرار CSS احترافية لمدونتك 
                                   اضافة ازرار فلات احترافية لمدونات بلوجر


      Sunday, November 9, 2014

      قالب مدونة ArlinaDesign معرب و مطور

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

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



      مميزات القالب


      1. القالب متجاوب وداعم للأجهزة والمتصفحات الحديثه 
      2.  يحتوي على ازرار المشاركة لمواقع التواصل الاجتماعي
      3. محسن لمحركات البحث و سيو 100%
      4. يحتوي على ازرار المعاينة شرح الإستخدام
      5. يحتوي على اضافة مواضيع ذات صلة
      6. يحتوي على محول الاكواد الإبتسامات


      نبدأ أولا بتنسيق القائمة المنسدلة


      ابحث في القالب عن المسميات التالية و قم بتغييرها على حسب مدونتك مع تغيير # برابط صفحة المدونة

      <li><a href='/' title='الرئيسية'>الرئيسية</a></li>
      <li><a href='#'>اتصل بنا</a></li>
      <li><a href='#'>الفهرس</a></li>
      <li><a href='#'>سياسة الخصوصية</a></li>
      <li><a class='dutt' href='#'>أدوات</a>


      الان ابحث في القالب عن الكود التالي مع تغيير رابط مدونتي برابط ركن الاسئلة الخاص بك او ما تريده انت
      <a href='http://mudwnp.blogspot.com/p/chat.html' target='_blank'>ركن الاسئلنة</a></span>

      الان اخر خطوة و هو تعديل صفحة الخطأ لإعادة التوجيه إلى موقعك



      ابحث عن هذا الكود
      <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
      <style type='text/css'>

      ستجد تحته هذا الكود 
      .header-wrapper, #header, #post-wrapper, #outer-wrapper, #footer-wrapper, #sidebar-wrapper, #credit, #social_networks {display:none;}

      استبدله بالكود التالي 
      .header-wrapper, #header, #post-wrapper, #outer-wrapper, #sidebar-wrapper {display:none;}


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

      بالتوفيق

      انشاء الملاحظات الثابتة والمتحركة وتنسيقها

      Alert Message HTML CSS Blogger
      من منا لم يحتاج يوماً لعمل رسالة تنبيه في مدونته او ملاحظة ليخبر زواره بامر معين  هنا ياتي دور هذه الإضافة وهي عبارة عن عمل صندوق مميز لرساله تنبيهية او ملاحظة وتنسيقها بالشكل الذي تريد لتتوافق مع الوان ونظام قالبك كل ما عليك هو قراءة الموضوع بشكل جيد وستحصل على النتيجة التي تريد بإذن الله اولاً لنرى نموذج لتلك الرسائل
      نبدأ بالنموذج الثابت

      كن مدون كل ما يحتاجه المدونون معنا ستصبح مدون محترف

      ثانياً النموذج المتحرك

      من أخلاق نبينا صلى الله عليه وسلم عن عبد الله بن ابي أوفى رضى الله عنه قال ( كان يُكثِرُ الذِّكرَ ، و يُقِلُّ اللغوَ ، و يطيلُ الصلاةَ ، و يُقصِرُ الخطبةَ ، وكان لا يأنَفُ و لا يستكبرُ أن يمشيَ مع الأرملةِ والمسكينِ و العبدِ ، حتى يَقضيَ له حاجتَه ) --- {وَمَا أَرْسَلْنَاكَ إِلَّا رَحْمَةً لِّلْعَالَمِينَ }الأنبياء107

      كود الرسالة

      <style>
      #cnmumesclose {
        background:rgba(0, 0, 0, 0);
        border: 0 none;
        border-radius: 0;
        color: #888;
        cursor: pointer;
        display: inline-block;
        float: right;
        font: bold 14px Arial Black;
        margin: 9px -18px 0 0;
        position: absolute;
        text-align: center;
        width: 15px;
      }
      #cnmumesclose:hover {color: #d50000;}
      #cnmumes1 {
        background-color: #d0fdbc;
        background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kWGY__F3du5Q-Xej5pK_KbkW-njVSUh3khJ96ayiQIopTysUcBQifTA65gINig3wGWQcc0taDYfSJ3KjAN-6QQX6Fs58HmQfSuW28QNtjJK-pF5ZLxyvoXbmCdesIZ5q4l8kL0J8hqY4/s24/Accept.png");
        background-position: 14px 8px;
        background-repeat: no-repeat;
        border: 1px solid #6abf45;
        border-radius: 4px;
        font: 17px/36px tahoma;
        height: 40px;
        overflow: hidden;
        padding: 0 25px 0 42px;
        width: 400px;
      }
      </style>
      <div id="cnmumes1">
      <button id="cnmumesclose" type="button" onclick="{document.getElementById('cnmumes1') .style.display='none'}">X</button>
      <marquee behavior="scroll" direction="right" scrolldelay="90" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);">
      <div style="text-align:left;">
      كن مدون كل ما يحتاجه المدونون
      </div>
      </marquee>
      </div>

      أهم التنسيقات

      هذا #d0fdbc هو لون الخلفية
      هذا #6abf45 هو لون الإطار
      الرقم 17 هو حجم الخط
      هذا 36 هو بعد الخط من الأعلى
      هذا tahoma هو نوع الخط
      هذا 400 هو عرض الشريط
      الرابط المعلم باللون الزهري هو الأيقونة يمكنك استبدالها بايقونة اخرى المقاس المناسب هو 24x24
      الرقم 14 هو بعد الأيقونة من جهة اليسار
      الرقم 8 هو بعد الايقونة من الأعلى
      الكود معد على النموذج المتحرك لإيقاف الحركة احذف الكودين المعلمان بالبرتقالي
      الرقم 90 داخلهما هو سرعة الحركة كلما زاد اصبح أبطأ
      وطبعا استبدل جملة كن مدون كل ما يحتاجه المدونون بما تريد
      التركيب والتعامل
      يمكنك ان تضيف الكود باكلمه داخل آداة HTML/JavaScript
      أو يمكنك ان تيف الجزء الموجود بين الكودين <style> </style>
      داخل القالب فوق الوسم ]]></b:skin>
      والجزء الباقي من الكود تستخدمه داخل موضوع
      في حالة أردت أكثر من تنسيق للرسائل يعني مثلا تريد رسالة بلون ورسالة بلون آخر
      فقط كرر الكود التالي مع تعديله في كل مرة بالشكل والايقونة المناسبه وتغيير الرقم 1 برقم آخر كلما كررته عليك تغيير الرقم
      #cnmumes1 {
        background-color: #d0fdbc;
        background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kWGY__F3du5Q-Xej5pK_KbkW-njVSUh3khJ96ayiQIopTysUcBQifTA65gINig3wGWQcc0taDYfSJ3KjAN-6QQX6Fs58HmQfSuW28QNtjJK-pF5ZLxyvoXbmCdesIZ5q4l8kL0J8hqY4/s24/Accept.png");
        background-position: 14px 8px;
        background-repeat: no-repeat;
        border: 1px solid #6abf45;
        border-radius: 4px;
        font: 17px/36px tahoma;
        height: 40px;
        overflow: hidden;
        padding: 0 25px 0 42px;
        width: 400px;
      }
      أيضاً عليك تغيير الرقم 1 في الكود الذي ستضيفه كرساله بنفس ارقم الذي وضعته في التكرار
      توضيح كالتالي
      <div id="cnmumes1">
      <button id="cnmumesclose" type="button" onclick="{document.getElementById('cnmumes1') .style.display='none'}">X</button>
      <marquee behavior="scroll" direction="right" scrolldelay="90" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 6, 0);">
      <div style="text-align:left;">
      كن مدون كل ما يحتاجه المدونون
      </div>
      </marquee>
      </div>
       وطبعا يمكنك ان تصل لاى عدد تريد من التنسيقات
      وبالتوفيق