قالب Easy Mag معرب

هو قالب بلوجر يصلُح لجميع المجالات مثل المدونات الأخبارية والمجلات والمدونات الشخصية والتقنية، حيثُ أنّه مُصمم ليكون قالب استثنائي لما يحتويه من ميزات مُبتكرة، لأنّه وبكل بساطة تستطيع التحكم بالقالب بشكل كامل من التخطيط وبكل سهولة، والرائع بالقالب أنّه متوافق مع جميع أحجام الشاشات وهو مُدعم بأكواد سيو.

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

قائمة علوية رئيسية.

قائمة فرعية مُنسدلة

سلايدر شو تلقائي.

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

أيقونات المتابعة عبر الشبكات الاجتماعية.

أزرار المشاركة عبر الشبكات الاجتماعية.

مواضيع ذات صلة.

ثلاث أنظمة للتعليقات (فيسبوك، بلوجر، ديسكوس)

شريط آخر الأخبار المُتحرك.

سلايدر شو يعرض مواضيع حسب التسمية.

أماكن للإعلانات جاهزة.

خيارات التنقل مع اسماء المواضيع

فوتر بثلاث أعمدة

                                  تحميل   معاينة

اضافة صناديق لعرض الأكواد الى مدونة بلوجر

اضافة صناديق لعرض الأكواد الى مدونة بلوجر

تستعمل صناديق syntax highlighter خصيصا في وضع الأكواد مثل Css و Html, Xml وغيرها بحيث توفر دعما يشمل النسخ بالضغط مرتين على الكود وتوضح كل اسم للوسوم مع تلوينه كما أن الاضافة تتوفر بأربعة ألوان زاهية كما سنشاهد بوضوح أكثر في المعاينة التالية

• معاينة

1. حرر القالب >> ابحث عن ]]></b:skin> وضع الكود التالي فوقه

/* CSS Pre-Code 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;
    font-family: sans-serif;
    clear: both;
}

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;
        text-align: left;
}

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: #ff3c41;
}

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

2. ضع الكود التالي فوق </body>

<script src='//cdn.rawgit.com/iHussam/ar1web/master/preline.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
// Line Numbers
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
//<![CDATA[
// Selection
for(var pres=document.querySelectorAll("pre,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
//]]>
</script>
</b:if>

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

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">ضع هنا كود الـHTML</code></pre>
<pre data-codetype="CSSku" title="CSS"><code class="language-css">ضع هنا كود الـCss</code></pre>
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript">ضع هنا كود الـJavascript</code></pre>
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript">ضع هنا كود الـjQuery</code></pre>

* ملاحظة : لوضع أي كود به وسوم <> عليك بتحويله أولا 

قالب Blue Theme معرب

  

ق 

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

ملاحظة : بعد التحميل افتح ملف index لطريقة التركيب

تحميل القالب

معاينة
تحميل
تحميل

المميزات / الإضافات

• متجاوب
• سريع التحميل
• صفحة الخطأ
• سلايدر ثابت
• سلايدر جانبي
• 3 اضافات تشتغل بحسب التسمية
• قائمة منسدلة
• مساحات إعلانية
• زر الصعود

شريط تحميل الموقع بـ 6 أشكال مختلف

شريط تحميل الموقع بـ 6 أشكال مختلف

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

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

1. توجه لقالب >> تحرير ابحث بإستعمال Ctrl+F عن <head/>
2. ضع الكود التالي فوقه

<script src='https://ar1web-com.googlecode.com/svn/Hm/loaderweb.js'></script>

4. ابحث عن ]]></b:skin ثم إختر الشكل الذي تريد وضعه فوقه

* إذا اردت أن يظهر شريط التحميل في الصفحة الرئيسية فقط ضع الكود التالي فوق <head/>

<b:if cond='data:blog.url == data:blog.homepageUrl'> <style type='text/css'> ضع هنا كود الستايل المختار </style> </b:if>

                                                                 

• الشكل 1

.pace .pace-progress {
    background: #e14e42;
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    height: 2px;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
}

.pace-inactive {
    display: none;
}

• الشكل 2

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 2px;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

• الشكل 3

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  overflow: hidden;

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: -32px;
  bottom: 0;

  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  -webkit-background-size: 32px 32px;
  -moz-background-size: 32px 32px;
  -o-background-size: 32px 32px;
  background-size: 32px 32px;

  -webkit-animation: pace-stripe-animation 500ms linear infinite;
  -moz-animation: pace-stripe-animation 500ms linear infinite;
  -ms-animation: pace-stripe-animation 500ms linear infinite;
  -o-animation: pace-stripe-animation 500ms linear infinite;
  animation: pace-stripe-animation 500ms linear infinite;
}

@-webkit-keyframes pace-stripe-animation {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-moz-keyframes pace-stripe-animation {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-o-keyframes pace-stripe-animation {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@-ms-keyframes pace-stripe-animation {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
}
@keyframes pace-stripe-animation {
  0% { transform: none; transform: none; }
  100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
}

• الشكل 4

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background-color: #78c0f0;

  color: #CBE7F9;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  overflow: hidden;

  -webkit-border-radius: 0 0 4px 0;
  -moz-border-radius: 0 0 4px 0;
  -o-border-radius: 0 0 4px 0;
  border-radius: 0 0 4px 0;

  -webkit-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  -o-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);

  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.pace .pace-progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: -28px;
  bottom: 0;

  background-image: -o-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  background-image: -moz-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  background-image: -webkit-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
  background-image: radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);


  -webkit-background-size: 28px 100%;
  -moz-background-size: 28px 100%;
  -o-background-size: 28px 100%;
  background-size: 28px 100%;

  -webkit-animation: pace-stripe-animation 500ms linear infinite;
  -moz-animation: pace-stripe-animation 500ms linear infinite;
  -ms-animation: pace-stripe-animation 500ms linear infinite;
  -o-animation: pace-stripe-animation 500ms linear infinite;
  animation: pace-stripe-animation 500ms linear infinite;
}

@-webkit-keyframes pace-stripe-animation {
  0% { -webkit-transform: none; transform: none; }
  100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-moz-keyframes pace-stripe-animation {
  0% { -moz-transform: none; transform: none; }
  100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-o-keyframes pace-stripe-animation {
  0% { -o-transform: none; transform: none; }
  100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@-ms-keyframes pace-stripe-animation {
  0% { -ms-transform: none; transform: none; }
  100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }
}
@keyframes pace-stripe-animation {
  0% { transform: none; transform: none; }
  100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
}

• الشكل 5

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace .pace-progress {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  height: 12px;
  background: #29d;

  -webkit-transition: -webkit-transform .3s, width 1s;
  -moz-transition: width 1s;
  -o-transform: width 1s;
  transition: transform .3s, width 1s;

  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);

  pointer-events: none;
}

.pace.pace-active .pace-progress {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

• الشكل 6

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace.pace-inactive .pace-progress {
  display: none;
}

.pace .pace-progress {
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 0;
  height: 5rem;
  width: 5rem;
}

.pace .pace-progress:after {
  display: block;
  position: absolute;
  top: 0;
  right: .5rem;
  content: attr(data-progress-text);
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 100;
  font-size: 5rem;
  line-height: 1;
  text-align: right;
  color: rgba(0, 0, 0, 0.19999999999999996);
}

أزرار تويتر جوجل فيس بوك عائمة ومنزلقة CSS

كيفية التركيب:
لإضافة أزرار مواقع التواصل الاجتماعي لمدونتك
إذهب إلى لوحة تحكم بلوجر .
اختر تخطيط .
إضغط علي إضافة أداة .
إختر HTML/Javascript .
أضف الكود واضغط حفظ.

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

غير الروابط الملونة بالأزرق بما يناسبك ، إذا أعجبتك التدوينة شاركها مع أصدقائك

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

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

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

تابع معي في لبفيديو

الموقع الايقونات http://sh.st/WcKEW

الكود <img src=''border-width: 0px;'/>

ازرارمعاينة تحميل بشكل احترافي  

السلام عليكم اليوم سوف اقدم لكم ازرار بسيطة وبتصميم انيق بتقنية رائعة بتقنية css ازرار معاينة

                                               طريقة تركيب

1- من لوحة التحكم , قالب ,تحرير HTML

2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير

3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

4- قم بالبحث عن الكود ]]></b:skin> واضف فوقه مباشراً الكود التالي

#wrap { margin: 20px auto; text-align: center; } .btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s; } .btn-slide2 { border: 2px solid #efa666; } .btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color: #efa666; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; } .btn-slide2:hover span.circle2 { color: #efa666; } .btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } .btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%; } .btn-slide2 span.circle2 { background-color: #efa666; } .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff; }

5- اضف الكود التالي بداخل الموضوع في تبويب html

<div id="wrap"> <a href="#" class="btn-slide" target="_blank"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">معاينة</span> <span class="title-hover">اضغط هنا</span> </a> <a href="#" class="btn-slide2" target="_blank"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">تحميل</span> <span class="title-hover2">اضغط هنا</span> </a> </div>

واخيراً قم بالتغيرات المناسبة من خلال وضع رابط التحميل والمعاينة وغيرها

                              الإضافات بلوجر

شرح طريقة التركيب
1 . من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة

<style type='text/css'> /* About Me */ .sidebar_about_author { height: 200px; } .aboutpro-img:before { content: ''; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA89sono00eQhbwVYRH2yBs8rQkJzGRzv4c5xCMoArFlGtcZYxVwKMSLvgqXE7sNzHFRl17SbFaC856fvQLrRAAypXW_z7c9kqhw_-ayKMJQoIr0qz0mDa0tKXQe_dsuzjO9NcCB8_qgvp/s1600/pattern-overlay.png)center top repeat; opacity: .3; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 2; } .aboutpro-img {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj164FQfMOVQ0h9v2MhU3daQmAHw_iIaX_g2LCBHV6umC15lbvcP8W_4cXwfdsj-Ow3KItbHVmzz-Mdz9H6QCjf3hXbFVbe-Tqi3Zit_9YxtyZuTbuGMYzHAPcrnNXXtNDDUZmeo8vWWim6/s1600/66.jpg); height: 200px; display: block; width: 100%; position: relative; right: 0; bottom: 0;background-size: cover; } .sidebar_about_author { height: 200px; } .aboutpro-wrapicon{display:block;margin:-225px auto 0;position:relative;z-index:3;} .aboutpro-wrapicon .extender{width:100%;display:block;} .extender{text-align:center;font-size:18px} .extender .aboutpro-icon{display:inline-block;margin:0 .5px;padding:0;border:0;} .extender .aboutpro-icon a{display:inline-block;font-family:fontawesome;height:32px;width:32px;line-height:32px;font-weight:normal;color:#fff;font-size:80%;transition:all .5s} .extender .aboutpro-icon:hover a,.extender .aboutpro-icon a:hover{color:rgba(255,255,255,.7);} .aboutpro-info{font-size:12px;position: relative; bottom: 200px; z-index: 99999;} .aboutpro-info h4{display:table;background:rgba(255,255,255,1);margin:10px auto;font-family:'Playfair Display',serif;font-size:220%;font-weight:normal;text-transform:capitalize;color:#454545;border:4px double #2e2e2e;z-index:3;padding:5px 10px} .aboutpro-info p{position:relative;display:block;color:#fff;z-index:4;font-size:110%;text-align:center;font-family: Droid Arabic Naskh,sans-serif;line-height: 1.7em; padding: 1px; } </style> <div class="sidebar_about_author"> <div class="inner_wrapper"> <div class="aboutpro-img"> </div> </div> <div class="aboutpro-info"> <h4> iHussam</h4> <p> حسام بها، مغربي الجنسية ، مهتم ومتابع لكل ما يتعلق بالتقنية، محب للتصميم والألعاب أيضاً، هاوٍ بجمع شخصيات ديزني،لا تنسى متابعتي عبر المواقع الاجتماعية.</p> </div> <div class="aboutpro-wrapicon"> <ul class="extender"> <li class="aboutpro-icon"><a href="facebook" rel="nofollow" target="_blank" ><i class="fa fa-facebook"></i></a></li> <li class="aboutpro-icon"><a href="twitter" rel="nofollow" target="_blank" ><i class="fa fa-twitter"></i></a></li> <li class="aboutpro-icon"><a href="googleplus" rel="nofollow" target="_blank" ><i class="fa fa-google-plus"></i></a></li> <li class="aboutpro-icon"><a href="youtube" rel="nofollow" target="_blank" ><i class="fa fa-youtube"></i></a></li> <li class="aboutpro-icon"><a href="rss" rel="nofollow" target="_blank" ><i class="fa fa-rss"></i></a></li> </ul> </div> </div>

                                 تخصيص الإضافة :
               غير كل ما هو محدد بالأحمر بالروابط الاجتماعية
               المحدد بالوردي يغير بالكلمات
               المحدد بالأخضر يخص رابط الصورة

<style> .widget-content { overflow: hidden; } #likeme ul li a.likeme-yt { background-color: #E62117; border-bottom: 4px solid #D01D14;float: left; } #likeme-msg {font-family: 'Droid Arabic Naskh'; text-align: center; position: relative; padding: 0; margin: -10px 0; bottom: 10px; }#likeme { margin: 0 0; padding: 0; line-height: 1.3em; }#likeme-msg:before{content:" تابعنا عبر المواقع الإجتماعية";font-weight:bold;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto}#likeme ul{padding: 0; text-align: center; width: 100%; position: relative; bottom: 25px;}#likeme ul li{display:inline-block;margin:40px 0 0;position:relative;width: 32%;}#likeme ul li a{display:inline-block;color:#fff;padding:11px 0;font-size:15px;border-radius:2px!important;width:100%;}#likeme ul li a.likeme-gp{background-color:#f65543;border-bottom:4px solid #e13522;margin-right:4px;float:left}#likeme ul li a.likeme-tw{background-color:#4fc4f6;border-bottom:4px solid #35aadc;float:right} </style> <div id="fan-go"> <div class="fb-page" data-href="https://www.facebook.com/arabe1web" data-width="300" data-height="250" data-hide-cover="false" data-show-facepile="false" data-show-posts="false"> </div> <div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ar_AR/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> </div> <div class="clear"> </div> <div id="likeme"> <ul> <li><a class="likeme-gp" href="https://plus.google.com/u/0/+iHussam" target="_blank" rel="nofollow">Google+</a></li> <li><a class="likeme-tw" href="http://twitter.com/" target="_blank" rel="nofollow">Twitter</a></li> <li><a class="likeme-yt" href="http://youtube.com" target="_blank" rel="nofollow">Youtube</a></li> </ul> </div> <div id="likeme-msg"> </div>
غير كل ما هو محدد  بالروابط الاجتماعية

إضافة الاشترك في النشرة البريدية

إضافة الاشترك في النشرة البريدية

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

                             

                                                                      معاينة

1. من لوحة التحكم اتجه إلى التخطيط وأضف أداة HTML/Javascript

<style> @import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css); #subscribe-box {background-color:#47cf73;} #subscribe-box p {font-size: 18px; color: #fff; padding: 10px 20px 0 20px; margin: 0; font-family: 'Noto Sans Kufi Arabic', sans-serif!important; text-align: center; font-weight: bold;} #subscribe-box .emailfield {padding:0px 20px 10px;} #subscribe-box .emailfield input {background: #f9f9f9; color: #bbb; padding: 10px; margin-top: 10px; font-size: 13px; width: 100%; border: 0; transition: all 0.4s ease-in-out; font-family: tahoma; border-radius: 2px!important;} #subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;} #subscribe-box .emailfield .submitbutton {background: #4D504F; color: #fff;font-weight: 700; font-size: 16px; font-family: 'Noto Sans Kufi Arabic', sans-serif!important; border: none; outline: none; width: 100%; cursor: pointer; border-radius: 3px!important; transition: all 0.4s ease-in-out;} #subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;} #subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} </style> <div id="subscribe-box"> <p class="ar1websub"> اشترك لتصلك حصرياتنا! تطبيقات، ألعاب والمزيد...</p> <div class="emailfield"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="name" onblur="if (this.value == "") {this.value = "Your Name";}" onfocus="if (this.value == "Your Name") {this.value = "";}" type="text" value="الاسم الكريم" /> <input name="email" onblur="if (this.value == "") {this.value = "Your Email";}" onfocus="if (this.value == "Your Email") {this.value = "";}" type="text" value="البريد الالكتروني" /> <input name="uri" type="hidden" value="ar1web" /> <input name="loc" type="hidden" value="en_US" /> <input class="submitbutton" type="submit" value="اشترك الآن" /> </form> </div> </div>

<style> @import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css); #subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;} .widget_follow_subscribe .widget-detail{padding:36px 30px 40px} #subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700;font-family: 'Noto Sans Kufi Arabic', sans-serif!important; line-height: 3em;} .follow-subscribe-social{padding:0 0 14px;border-bottom:#858585 solid 1px} .follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center} .follow-subscribe-social ul li{display:inline;margin-left: 20px;border-bottom:none} .follow-subscribe-social ul li:last-child{margin:0} .follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out} .follow-subscribe-social ul li a:hover{color:#fff} form.subscribe{margin-top:-7px} form.subscribe input{display:block;width:100%} .subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff} .subscribe-email:focus{outline:0} form.subscribe .placeholder{color:#cacaca} form.subscribe input:-ms-input-placeholder{color:#cacaca} form.subscribe input::-webkit-input-placeholder{color:#cacaca} form.subscribe input:-moz-placeholder{color:#fafafa} form.subscribe input::-moz-placeholder{color:#fafafa} .subscribe-button{height: 45px; font-weight: 700; font-size: 16px; color: #fff; text-transform: uppercase; border: none; background-color: #4FC4F6; transition: background-color .2s ease-in-out; font-family: 'Droid Arabic Naskh', serif;} .subscribe-button:hover{background-color:#00A3CE} .subscribe-button:focus{outline:0} </style> <div id="subscribebox"> <div class="follow-subscribe-social"> <ul> <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> <p> اشترك في النشرة البريدية</p> <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='اسمك المستخدم'/> <input name='loc' type='hidden' value='en_US'/> <input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='بريدك الالكتروني'/> <input class="subscribe-button" type="submit" value="اشترك الان" /> </form> </div>

<style> @import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css); /* Subscribe Box */ .widget-content{padding:0} .subscribe-wrapper h3{font-weight: 700; margin: 0 auto 10px auto; text-align: center; font-size: 20px; line-height: 1.8; font-family: 'Noto Sans Kufi Arabic', sans-serif!important;} .subscribe-wrapper h3 span{display:inline-block;font-weight:bold;font-size:33px;} .subscribe-wrapper p{margin:0 auto;opacity:.95;text-align:center;font-family: 'Droid Arabic Naskh', serif; font-size: 14px;} .subscribe-wrapper{color:#fff;background:#e83e3b;margin:0;padding:20px;} .subscribe-form{clear:both;display:block;margin:5px 0 10px 0;overflow:hidden} form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden} .subscribe-css-email-field{background:rgba(0,0,0,0.2);color:#fff;margin:0 0 15px;padding:0.962em 1.847em;width:100%;border:none;text-align:center;outline:0} .subscribe-css-button{background: #fff!important; color: #E83E3B!important; cursor: pointer; font-weight: 700; padding: 7px; width: 100%; border: 0; font-size: 15px; text-transform: uppercase; transition: all .3s; font-family: 'Noto Sans Kufi Arabic', sans-serif!important;} .subscribe-css-button:hover{color:#aaa!important;transition:all 0.3s ease-in;} </style> <div id="subscribe-css"> <div class="subscribe-wrapper"> <h3> احصل على أجدد مواضيعنا <span>أول بأول</span></h3> <p> اشترك بنشرتنا البريدية وتوصل بأشياء مثيرة للإهتمام.</p> <div class="subscribe-form"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ar1web/TFDh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" type="hidden" value="ar1web" /> <input name="loc" type="hidden" value="en_US" /> <input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="ادخل بريدك الإلكتروني" /> <input class="subscribe-css-button" title="" type="submit" value="اشترك الآن" /> </form> </div> </div> </div>  


التغييرات

 لمن لا يتوفر على رابط للفيدبانر فالشرح موجود هنا بعد انشائك للحساب لا تنسى تفعيل خاصية الإشتراك  وهي مذكورة في الشرح
2. في الإضافة قم بتغيير كل ما به https://feedburner.google.com/fb/a/myfeeds بإسم رابط خلاصتك
3. إذا أردت تغيير لون الصناديق فهي محددة بالبرتقالي في كل شكل