تواصل قالب بلوجر متجاوب


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

عند التحميل يرجى فتح ملف Documentation للتعرف على الشرح

الواجهة كاملة : اللون الأحمر والأزرق








































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

  1.  متجاوب  معاينة 
  2.  صفحة الخطأ
  3.  فهرس جاهز
  4.  نموذج اتصال جاهز
  5.  سلايدر تلقائي رئيسي
  6.  سلايدر ثانوي يشتغل بتسمية
  7.  4 أداة مواضيع عشوائية
  8.  أداة آخر التعليقات
  9.  صفحات مرقمة
  10.  مشاركتين تشتغل بتسميات
  11.  زر الصعود
  12.  أزرار مشاركة الموضوع
  13.  عن الكاتب
  14.  مواضيع ذات صلة
  15.  تعليقات Blogger و Disqus
  16.  والمزيد...







القالب من مدونة عرب ويب

قالب BlueTheme معرب ومطور


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

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

الواجهة كاملة



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

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





القالب من مدونة عرب ويب

قالب Invento معرب

قالب Invento معرب 


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


الواجهة كاملة



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


  •  متجاوب
  •  صديق لمحركات البحث
  •  يدعم جميع المتصفحات
  •  قائمة مندسلة متوافقة
  •  كوفر مع وصف
  •  أداة أحدث المواضيع
  •  أداة الإقتباسات
  •  أداة فريق العمل
  •  أداة الرعاة
  •  نموذج اتصال جاهز
  •  أداة إقتباسات وأقوال
  •  والمزيد...
المعاينة غير متوفرة




منقول من مدونة عرب ويب

اضافة تبويبات داخل التدوينة CSS فقط

اضافة تبويبات داخل التدوينة CSS فقط
اضافة تبويبات داخل التدوينة إضافة جميلة و رائعة جدا


إضافة الاداة
اتجه الى قالب تحرير HTML ابحث عن هذا الوسم
]]></b:skin> و ألصق الكود التالي فوقه

 /* Frame */
.tabs-frame {
    position: absolute;
    top: -25%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    height: 50px;
    margin: auto;
    display: block;
    text-align: Right;
}
/* Tabs */
.tabs-frame .tab {
    position: relative;
    float: left;
    width: 50px;
    height: 50px;
    display: block;
}
/* Tabs Radio */
.tabs-frame .tab .radio {
    display: none;
}

.tabs-frame .tab .tab-button {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 15px;
    height: 15px;
    margin: auto;
    border-radius: 100%;
    border: 0 double #f74545;
    background: #f74545;
    display: block;
    -webkit-transition: .15s linear;
}

.tabs-frame .tab .radio:checked + .tab-button {
    border: 6px double #d4d9e1;
    background: #f74545;
}

.tabs-frame .tab .tab-button:hover {
    background: #f74545;
}

/* Tabs Frame */
.tabs-frame .tab .tab-frame {
    position: absolute;
    top: 100%;
    left: -126px;
    width: 300px;
    border-radius: 5px;
    background: #fff;
    display: block;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    text-align: Right;
    line-height: normal;
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .3);
    -webkit-transition: opacity .3s linear,
    -webkit-transform .3s linear;
    -webkit-transform: translate(0, -10%);
}

.tabs-frame .tab .tab-frame:before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
    margin: auto;
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent #fff;
    display: block;
}

.tabs-frame .tab .radio:checked ~ .tab-button ~ .tab-frame {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    -webkit-transform: translate(0, 0);
}

.tabs-frame .tab .tab-frame p {
    padding: 0 20px;
    margin: 20px 0;
} 

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

 <section class="tabs-frame">
  <article class="tab">
    <input type="radio" id="tab_1" class="radio" name="tab_group_1" />
    <label for="tab_1" class="tab-button"></label>
    <section id="tab_frame_1" class="tab-frame">
      <p>...التبويب 1...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_2" class="radio" name="tab_group_1" />
    <label for="tab_2" class="tab-button"></label>
    <section id="tab_frame_2" class="tab-frame">
      <p>...التبويب 2...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_3" class="radio" name="tab_group_1" checked />
    <label for="tab_3" class="tab-button"></label>
    <section id="tab_frame_3" class="tab-frame">
      <p>...التبويب 3...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_4" class="radio" name="tab_group_1" />
    <label for="tab_4" class="tab-button"></label>
    <section id="tab_frame_4" class="tab-frame">
      <p>...التبويب 4...</p>
    </section>
  </article>
  <article class="tab">
    <input type="radio" id="tab_5" class="radio" name="tab_group_1" />
    <label for="tab_5" class="tab-button"></label>
    <section id="tab_frame_5" class="tab-frame">
      <p>...التبويب 5...</p>
    </section>
  </article>
</section>
 


تأثيرات تحميل صفحات المدونة بشكلين

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


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

إضافة التأثيرات إلى مدونتك
اتجه الى قالب ثم تحرير HTML 
ابحث عن الوسم التالي <body> وضع بعده مباشرة الكود التالي

الكود الخاص بالتأثير الاول

 <div id="loader">
        <div class="spinner">
            <div class="spinner-inner"></div>
        </div>
    </div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type="text/javascript">
        $(window).load(function () {
            setTimeout(function () {
                $(".spinner").fadeOut("slow");
                setTimeout(function () {
                    $("#loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}.spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.spinner,.spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style> 

الكود الخاص بالتأثير الثاني

 <div id='loader'>
<div class="wrap">
<div class="bg">
<div class="loading">
<span class="title">إنتظر...</span>
<span class="text"><data:blog.pageName/></span>
</div> </div></div></div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.wrap&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:Electrolize,ge_dinar_tworegular;}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.wrap{font-size:18px;font-weight:500;left:25%;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style> 

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

3 نماذج جديدة للقوائم الجانبية

3 نماذج جديدة للقوائم الجانبية
نعود إليكم اليوم مع 3 نماذج جديدة للقوائم الجانبية الأكثر من إحترافية
لكل واحدة منها خصائص تتميز بها عن غيرها
أترركم مع روابط لمعاينة القوائم


القائمة الثالثة


تركيب القائمة الأولى

القائمة الاولى

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

 .navToggle {
    position: fixed;
    top: 50px;
    left: 50px;
    z-index: 10;
    text-align: center;
}

.navToggle:hover {
    cursor: pointer;
}

.navToggle:hover .menu, .navToggle:hover .menu:before, .navToggle:hover .menu:after {
    background: white;
}

.navToggle:hover .menuOn {
    background: transparent;
}

.menu, .menu:before, .menu:after {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 5px;
    background: #fff;
    transition: 0.3s;
}

.menu:before, .menu:after {
    content: "";
    position: absolute;
    right: 0;
}

.menu:before {
    top: 10px;
}

.menu:after {
    bottom: 10px;
}

.menuOn {
    background: transparent;
}

.menuOn:before {
    top: 0;
    transform: rotate3d(0, 0, 1, 45deg);
}

.menuOn:after {
    bottom: 0;
    transform: rotate3d(0, 0, 1, -45deg);
}

nav {
    position: fixed;
    z-index: -1;
    top: 0;
    right: 100%;
    width: 100%;
    height: 100%;
    padding:50px 50px 50px 125px;
    transition: all .2s ease-in-out;
    color: #fff;
}

nav a {
    color: #fff;
    text-decoration: none;
}

nav a:hover {
    color: red;
}

nav.navOn {
    display: block;
    z-index: 5;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

nav ul li a {
    display: block;
    padding: 20px;
    font-weight: 100;
    font-size: 2rem;
    text-transform: lowercase;
}

nav ul li a:hover {
    color: #ff274d;
}
 


ابحث عن الوسم </body> و ألصق فوقه/قبله الكود التالي

 <script type='text/javascript'>
//<![CDATA[
$('.navToggle').click(function(){
  $('.menu').toggleClass('menuOn');
  $('nav').toggleClass('navOn');
})
//]]>
</script> 


الكود التالي هو كود HTML يمكنك وضعه مكان القائمة المستبدلة
أو أسفل الوسم   <div class='content-wrapper'> أو <div id='outer-wrapper'>
قد تختلف الوسوم من قالب لأخر
 <div class="navToggle"><span class="menu"></span></div>

<nav>
  <ul>
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">إتصل بنا</a></li>
    <li><a href="#">أعلن لدينا</a></li>
    <li><a href="#">إدعمنا</a></li>
    <li><a href="#">إحتراف عربي</a></li>      
  </ul>
</nav> 


مع تغيير الكلمات و # بالروابط


تركيب القائمة الثانية

القائمة الثانية

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

 nav {
  right: 100%;
}

.mainMove {
  right: -30%;
}

.navMove {
  right: 70%;
}

.navToggle {
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 10;
  text-align: center;
}
.navToggle:hover {
  cursor: pointer;
}
.navToggle:hover .menu, .navToggle:hover .menu:before, .navToggle:hover .menu:after {
  background: #fff;
}
.navToggle:hover .menuOn {
  background: transparent;
}

.menu, .menu:before, .menu:after {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 5px;
  background: #fff;
  transition: 0.3s;
}
.menu:before, .menu:after {
  content: "";
  position: absolute;
  right: 0;
}
.menu:before {
  top: 10px;
}
.menu:after {
  bottom: 10px;
}

.menuOn {
  background: transparent;
}
.menuOn:before {
  top: 0;
  transform: rotate3d(0, 0, 1, 45deg);
}
.menuOn:after {
  bottom: 0;
  transform: rotate3d(0, 0, 1, -45deg);
}

main {
  padding: 50px;
  background: #30abd5;
  transition: all .2s ease-in-out;
}

nav {
  padding: 30px;
  transition: all .2s ease-in-out;
  color: #fff;
  background: #2f3b3f;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li a {
  display: block;
  padding: 20px;
  font-weight: 100;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  text-transform: lowercase;
}
nav ul li a:hover {
  color: #ff274d;
}
 



ابحث عن الوسم </body> و ألصق فوقه/قبله الكود التالي

 <script src='https://a3p-mohammadalhor.googlecode.com/svn/arabic3professional/prefixfree.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(window).load(bodyContentHeight);
$(window).resize(function() {
    $('.bodyContainer, main, nav').css('height', '100%');
    bodyContentHeight();
});

function bodyContentHeight() {
    var newHeight = $(document).outerHeight() + 'px';
    $('.bodyContainer, main, nav').css('height', newHeight);
    // var docHeight = $(document).outerHeight();
    // console.log('.bodyContainer calculated on load: ' + newHeight + 'px');
}

$('.navToggle').click(function(){
  $('.menu').toggleClass('menuOn');
  $('main').toggleClass('mainMove');
  $('nav').toggleClass('navMove');
})
//]]>
</script> 


الكود التالي هو كود HTML يمكنك وضعه مكان القائمة المستبدلة
أو أسفل الوسم   <div class='content-wrapper'> أو <div id='outer-wrapper'>
قد تختلف الوسوم من قالب لأخر

 <nav>
    <ul>
      <li><a href="#">الرئيسية</a></li>
      <li><a href="#">من نحن</a></li>
      <li><a href="#">اتصل بنا</a></li>
      <li><a href="#">أعلن لدينا</a></li>
      <li><a href="#">سياستنا</a></li>
      <li><a href="#">إحتراف عربي</a></li>         
    </ul>
  </nav>

</div>
<!-- nav -->
<div class="navToggle"><span class="menu"></span></div> 


مع تغيير الكلمات و # بالروابط خاصتك


تركيب القائمة الثالثة

القائمة الثالثة

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

 
.sidebar-w {
  position: fixed;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  background-color: #252a32;
  color: #fff;
  overflow: hidden;
  transition: width .3s ease-in-out;
  z-index: 100;
}
.sidebar-w:hover {
  width: 200px;
}
.sidebar-w:hover .main-nav ul li a {
  opacity: 1;
  right: 0;
  transition-delay: .2s;
}
.sidebar-w .main-nav ul li {
  min-height: 50px;
  line-height: 50px;
  position: relative;
  border-bottom: 1px solid #303641;
  transition: all .3s ease-in-out;
}
.sidebar-w .main-nav ul li.logo a {
  text-transform: uppercase;
  font-weight: 800;
}

.sidebar-w .main-nav ul li.logo span:before {
  color: #ea4c89;
  font-size: 1.5em;
}
.sidebar-w .main-nav ul li.logo + li {
  border-top: 1px solid #303641;
}
.sidebar-w .main-nav ul li a {
  display: block;
  padding-right: 50px;
  position: relative;
  right: 15px;
  opacity: 0;
  transition: all .3s ease-in-out;
  transition-delay: 0s;
  cursor: pointer;
  font-weight: 300;
}
.sidebar-w .main-nav ul li span {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  right: 0;
  text-align: center;
}
.sidebar-w .main-nav ul li span:before {
  font-size: 1.25em;
  transition: all .3s ease-in-out;
}
.sidebar-w .main-nav ul li:hover {
  background-color: #1b1e24;
}
.sidebar-w .main-nav ul li:hover span:before {
  color: #ea4c89;
}
 




الكود التالي هو كود HTML يمكنك وضعه مكان القائمة المستبدلة
أو أسفل الوسم   <div class='content-wrapper'> أو <div id='outer-wrapper'>
قد تختلف الوسوم من قالب لأخر

 <aside class='sidebar-w'>
  <div class='main-nav'>
    <ul>
      <li class='logo'>
        <a>القائمة</a>
        <span class='entypo-list'></span>
      </li>
      <li>
        <a href='#' >الرئيسية</a>
        <span class='entypo-home'></span>
      </li>
      <li>
        <a href='#' >مثال</a>
        <span class='entypo-gauge'></span>
      </li>
      <li>
        <a href='#' >مثال</a>
        <span class='entypo-chart-line'></span>
      </li>
      <li>
        <a href='#' >المصدر</a>
        <span class='entypo-rocket'></span>
      </li>
      <li>
        <a href='#' >مثال</a>
        <span class='entypo-vcard'></span>
      </li>
      <li>
        <a href='#' >إعدادات</a>
        <span class='entypo-cog'></span>
      </li>
    </ul>
  </div>
</aside> 


مع تغيير الكلمات و # بالروابط خاصتك


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