‏إظهار الرسائل ذات التسميات CSS. إظهار كافة الرسائل
,



تُستخدم لغة CSS لتنسيق العناصر في صفحات الإنترنت، فمن خلالها يُمكن ضبط مُعظم خصائص العناصر مثل الخلفية، حجم الخط، لون الإطار وغيرها من الخصائص الأُخرى. ومع التطور الكبير الذي وصلت إليه هذه اللغة، أصبح بالإمكان القيام بالكثير من الأمور.
المستخدمون الراغبون بضبط عناصر مواقعهم ولايملكون خبرة في هذه اللغة بإمكانهم تجربة موقع enjoycss.com الذي يوفر أداة تسمح بتنسيق العناصر وضبط خصائصها دون أي خبرة برمجية، لتقوم الأداة فيما بعد بكتابة الأكواد المقابلة للتنسيق الذي قام به المستخدم.
بعد الدخول إلى الموقع يختار المستخدم نوع العملية التي يرغب بالقيام بها، حيث يُمكن اختيار تنسيق العناصر I want to Style أو يمكن إنشاء آيقونات وخلفيات شاشة. بعدها، تظهر صفحة المعاينة والتعديل على الخصائص، وبعد الإنتهاء يضغط المستخدم على Get The Code ليظهر له الكود البرمجي.
, ,


السلام عليكم . يوف اقدم لم اضافة روعة تحت الهيدر هده الاضافة تشمل الاشتراك rss و تابعنا عبر المواقع التواصلية 

طريقة الإضافة :
1- إذهب إلى لوحة التحكم ثم إلى القالب ثم إلى تحرير html .
2- ابحث عن الكود التالي

 

<div class='main-outer'>

 

ثم قم باضافة هدا الكود قبله 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='navhead'>
<div id='byard-topsubsbox'>
    <div id='subscriptionsection'>
    <div class='subsbox-heading'>
       اشترك معنا وتوصل بأخر المستجدات !
     </div>
      <form action='http://feedburner.google.com/fb/a/mailverify?uri=pro-amine' class='byard-subsbox-form' method='post' target='_new'>
      <input class='topsubsboxname' name='name' onblur='if (this.value == &apos;&apos;) {this.value = &apos;أسمك هنا&apos;;}' onfocus='if (this.value == &apos;أسمك هنا&apos;) {this.value = &apos;&apos;;}' value='أسمك هنا'/>
      <input class='topsubsboxemail' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;ضع إميلك هنا &apos;;}' onfocus='if (this.value == &apos;ضع إميلك هنا ;) {this.value = &apos;&apos;;}' value='ضع إميلك هنا '/>
      <input class='topsubsboxbutton' type='submit' value='أشترك الأن!'/>
       </form>
              <p style='margin-top: 8px;font-size: 14px;text-align: center;font-family: Source Sans Pro;font-style: italic;font-weight: 600;'>
               
              </p>
            </div>
            <div class='socialicons'>
              <div class='socialheading'>
                تابعنا على مواقع التواصل الأجتماعي!
              </div>
              <ul>
                <li>
                  <a href='https://www.facebook.com/#' rel='nofollow' target='_blank'>
                    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr_XCWJFZ4r4W9MIqaawEuizZaF2lqalRx7x-dg7XCk69FQCif2cJuOh3I2BVUS9yfaFZxK7E5VFEdpabZDujicNbLQbs_cqFGzb5c_otxBasK8oDWSjUpMhXW4aHk0ztSOQTUjycRiOZs/s1600/facebook_64.png' title='Facebook'/>
                  </a>
                </li>
                <li>
                  <a href='https://twitter.com/#' rel='nofollow' target='_blank'>
                    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwXHJAg_Xn4dWw1gYtqsX9fcxqRhGAlOijchoRL3tzDwKYhtC5GiGERhU-BK-QUvBIciitEqFm4DxGJvQRDExXkPioqgNEBQN1TckPzJkBsEogrHq8ro3A3w8rTX-D-y5JtlOnwnHOPEY/s1600/twitter_64.png' title='Twitter'/>
                  </a>
                </li>
                <li>
                  <a href='https://plus.google.com/#' rel='nofollow' target='_blank'>
                    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAZCoRnCOTwiudekLfS5guhyCZN3bRaxWd6RhDr-oL7Z-zYSoe1SGCPJ4Oi6i5ZXB0tspfoxLFJ5TiJxVUX98e3wSGcdy9HU0iNxy5VwcW8C2EORbhc8wS0OMaOSreg4U33XyfxndZr5t0/s1600/google-plus_64.png' title='Google +'/>
                  </a>
                </li>
                <li>
                  <a href='http://feeds.feedburner.com/#' rel='nofollow' target='_blank'>
                    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpWA8F05jeVIIEVEpX0Mb3-7nAUqFKJ-wXo7KkfcXBp65Sr7-zJbpicj5AF155rr7PPiOfzCqisWxcvo8ufuUf0TeQ6FvD6Jc-fpViIFQ5ssbuvj1Bzmgbk-6jVFn3kG861g613X74RYjt/s1600/rss_64.png' title='Rss'/>
                  </a>
                </li>
                <li>
                  <a href='https://www.youtube.com/user/#' rel='nofollow' target='_blank'>
                    <img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSTBd38d53uWAo3ELfSgkR61JOWAlGTGdFwxYChvKZ0pkEzdBOo' title='youtube'/>
                  </a>
                </li>
              </ul>
            </div>
          </div>
  </div>
  </b:if>

3- التعديلات :

غير pro-amine باسم المستخدم في خلاصتك في feedburner .
غير# باسم المستخدم الخاص بك في فيس بوك .
غير # باسم المستخدم الخاص بك في تويتر .
غير # باسم المستخدم الخاص بك في يوتيوب .
غير # باسم المستخدم الخاص بك في جوجل + .
غير # باسم المستخدم الخاص بك في الخلاصات .

 

4- بعد التعديلات ابحث عن الكود التالي :
 ]]></b:skin>
بعد أن تجده أضف فوقه الكود التالي 
<----- by proamine.com ------>
#navhead{
margin-top: 10px;
margin-bottom: -10px;
}
#byard-topsubsbox {background: #fff;
background: #fff;
width: 961px!important;
height: 90px!important;
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
overflow: hidden;
margin: 0 auto;}
#subscriptionsection {float: right;
border-left: 1px solid rgb(168, 168, 168);
padding-left: 56px;
margin-top: -3px;
padding-top: 9px;}
.subsbox-heading {font-size: 20px;
font-family: droidkufi-bold;
text-align: center;
font-weight: bold;}
.topsubsboxname {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFz_gd0mVNCtj3vtoTru_GzDYtvotcMFfPYE9N_fiCvR-225ev0193qDZtN3JNiBLfLiHe0-5r6QDynWRQu_paeysst_3xrnUzGv3t0O_vDMxHywJS05AqlOreN85VlwvqpngMp4VcxFA/s320/name.png) no-repeat 7px 8px;border:1px solid #ddd; font-family:droidkufi-bold; font-size:14px; font-weight:bold;color:hsla(0,0%,27%,0.69); width:150px; margin-top:10px; height:24px; padding:5px 28px 5px 15px; vertical-align:top; display:inline-block;margin-right:15px;}
.topsubsboxemail {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwWuGwnLikhYMh62LpBOujE6EtWJzNMmg6ujivkRbonVs4k_MJ_WvZMpA6YgYKWt73siRJ2AI6K8YGFZxceFsyYxZc7Ffl3ID6onTQNMjlzvtq1pkn3G8GPFvJwPyINx26ju5e5NSg3QY/s320/email.png) no-repeat 7px 10px; border:1px solid #ddd; font-family:droidkufi-bold; font-size:14px; font-weight:bold; color:hsla(0,0%,27%,0.69); width:150px; height:24px; margin-right:5px; margin-top:10px; padding:5px 28px 5px 15px;vertical-align:top; display:inline-block;}
.topsubsboxname:hover,.topsubsboxemail:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}
.topsubsboxbutton {-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;box-shadow:inset 0px 1px 0px 0px #bbdaf7;background:-webkit-gradient( linear, right top, right bottom, color-stop(0.05, #00B3FF), color-stop(1, #349ECB) );background:-moz-linear-gradient( center top, #00B3FF 5%, #349ECB 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00B3FF&#39;, endColorstr=&#39;#349ECB&#39;);background-color:#00B3FF;  margin-top:10px;  margin-right:5px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #84bbf3;display:inline-block;color:#ffffff;font-family:droidkufi-bold;font-size:13px;font-weight:bold;padding:5px 10px;text-decoration:none;text-shadow:1px 1px 0px #528ecc;}.topsubsboxbutton:hover {background:-webkit-gradient( linear, right top, right bottom, color-stop(0.05, #349ECB), color-stop(1, #00B3FF) );background:-moz-linear-gradient( center top, #349ECB 5%, #00B3FF 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#349ECB&#39;, endColorstr=&#39;#00B3FF&#39;);background-color:#349ECB;}.topsubsboxbutton:active {position:relative;top:1px;}
#socialsection {float:right;margin-top:20px;}
.socialheading{font-size: 20px;
font-family: droidkufi-bold;
text-align: center;
font-weight: bold;}
.socialicons ul {list-style: none;
display: inline;
float: left;
margin-top: 10px;
margin-left: 38px;}
.socialicons li {opacity: 1;float:right;padding:0px 0px 0px 10px;}
.socialicons li:nth-child(6) {padding: 0;}
.socialicons li a img{height:49px;width:49px}
<----- by proamine.com ------>
الأن احفظ القالب ومبروك عليك الإضافة . -اضغط دربتين على الماوس لكي تنسخ الكود بالكامل-
,

 

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

 

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

1 . ادخل لقالب البلوجر

2. تحرير HTML (لا تنسى حفض نسخة احتياطية ان حدة خطأ )

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


</b:skin>

4.  ثم تقوم بوضع الكود التالي فوقه


/* Flat UI Labels Cloud By Www.dzprofessionale.Com ---------------- */
@import "http://fonts.googleapis.com/earlyaccess/droidarabickufi.css";
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Droid Arabic Kufi;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
padding:8px 10px;
margin:0 6px 6px 0;
float:right;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}
/* Flat UI Labels Cloud By Www.proamine.Com ---------------- */

 

 بعد ذالك و الخطوة الأخير قم بالذهاب الى الى قسم "  تخطيط "  و قم بالضغط على  تعديل في أداة التسميات و قم بالتغيير كما بالصورة



, ,


الابتسامات هي جميلة جداا للتعليقات , لانها لها جمالة و تسمح للزائر في كتابة تعليق و التعبير عن رأيه في ابتسامة

طريقة الاضافة


ادهب لقالب صم تحرير HTML و ابحث عن  <body/>

اضف الكود التالي فوق الوسم

<script src='https://cnmu.googlecode.com/svn/trunk/smiley.js' type='text/javascript'/>

ثم  وأضف الكود التالي فوق الوسم


/*Smile*/

.cnmu-smilet {

  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgje8XNnAFBWedOgk8izfbyIIMxBUpmF8G1sFNXjxWZ2v-rUJQIjnH1du_tk7sbXr08o-S7JQ2gvBZGPgTZ8lQmKpqJw-xiOenEzSPzuaOIHdwmhkLb0rpNFJOJoTjG7nzLjqCEEegP9-dr/s3512/smily.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);

  color: rgba(0, 0, 0, 0) !important;

  display: inline-block;

  height: 20px;

  position: relative;

  width: 20px;

  font: bold 16px arial;

  direction: ltr;

}

.cnmu-smilet:hover {cursor: default;}

.cnmu-smilet:hover:after {

  background: #fff;

  border: 2px solid #0062C4;

  border-radius: 100%;

  bottom: 26px;

  color: #000;

  content: attr(title);

  direction: ltr !important;

  display: inline-block;

  font: bold 16px arial;

  left: 20%;

  padding: 5px 1px;

  position: absolute;

  text-align: center;

  width: 30px;

  z-index: 98; 

}




مع تغيير هذا اللون #0062C4 وهو لون إطار التلميحات التي تظهر عند تمرير الماوس على التسميات بلون مناسب لقالبك

فعلياً انت الآن ركبت الإضافة لكن بقي أمر وهو ان توضح للزوار كيف يستخدمونها

قم بالدخول الى إعدادات المدونة ثم >> مشاركات وتعليقات >> ثم قم بتحرير رسالة نموذج التعليق

هذه هي الرسالة التي تظهر فوق صندوق التعليق قم بكتابة ما تريد مثلا

"مرر الماوس على الإبتسامات لمعرفة الكود "

أو اى شئ كما تريد ثم اضف السطر التالي في الرسالة

=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

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

أمر أخير يخص تنسيق الرسالة نفسها , ان اردت توسيط الكتابة في الرسالة يمكنك ان تضيف الكود التالي فوق الوسم ]]></b:skin> 

 

#threaded-comment-form p, .comment-form p {text-align: center !important;}

 

ثم تقم بحفض الجميع و هنيئا لك السمايلات


, ,

السلام عليكم ورحمة الله وتعالى وبركاته في هده التدوينة انشاء الله . و اللتي طلبوا  اشخاص من متتبعي مدونة عالم الاحتراف 

في هده التدوينة فسوف اقوم بانشاء لكم سمايلات للتعليقات من اختياركم اي بمعنى اخر انكم سوف ترسلوا لي من هنا  

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

 

 

ان اجبتك التدوينة فشاركها مع اصدقائك ^_^




,

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

صورة للاداة 

1/ نقوم بالدهاب للتخطيط 

2/ الى اضافة  HTML/JavaScript 

3/ نقم باضافة هدا الكود مع تغيير www.3alami7tiiraf.blogspot.com برابط مدونتك او موقعك

<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://softglad.at.ua/images/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #2C3E50;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 5px auto;text-align: center;background:#2C3E50;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #E84C3D transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #E84C3D;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://softglad.at.ua/widgets/slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://3alami7tiiraf.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>


اثمنى ان يكون الشرح جيد . ان واجهتكم اي مشكلة فاتصلوا بنا او
كتابتها في تعليق




, ,

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

  طريقة الاضافة ؟

أولا تقوم بالدخول إلى مدونتك .

تانيا تختار التخطيط.

تالتا تختار إضافة أداة جديدة و تختار Html/javascript.

وتقوم بإضافة كود القائمة التي أعجبتك و تقوم بالتعديل على الأسماء و الروابط .

الشكل الأول باللون الأخضر :

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
<style>
ul.container{
    width:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}

li.title
{
border-radius:5px;
background:#5EAC3F;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    font:14px droidkufi-bold;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
     text-align: center;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
    margin:5px ;
    padding:4px 10px;   
}

.downlistie li:hover {
background:#8DA619;
}
.downlistie li a{
font: 11px droidkufi-bold;
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#fff;
}
 

</style>


<a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>


<ul class="container">
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >وشحال</a></li>
<li class="downlistie">
                    <ul>
<li><a  href="#" >إضافات بلوجر</a></li>
<li><a  href="#">قوالب بلوجر</a></li>
<li><a href="#">دروس</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
       
              <ul>
<li class="title"><a href="#" >حصريات</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >تصميم</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >برمجة</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
          <ul>
<li class="title"><a href="#" >منوعات</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
</ul>

الشكل الثاني باللون الأزرق:
 


 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
<style>
ul.container{
    width:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}

li.title
{
border-radius:5px;
background:#49AAB3;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    font:14px droidkufi-bold;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
     text-align: center;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
    margin:5px ;
    padding:4px 10px;   
}

.downlistie li:hover {
background:orange;
}
.downlistie li a{
font: 11px droidkufi-bold;
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#fff;
}
 

</style>


<a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>


<ul class="container">
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >وشحال</a></li>
<li class="downlistie">
                    <ul>
<li><a  href="#" >إضافات بلوجر</a></li>
<li><a  href="#">قوالب بلوجر</a></li>
<li><a href="#">دروس</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
       
              <ul>
<li class="title"><a href="#" >حصريات</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >تصميم</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >برمجة</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
          <ul>
<li class="title"><a href="#" >منوعات</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
</ul>

الشكل التالث باللون الأسود:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});</script>
<style>
ul.container{
    width:275px;
    padding:5px;
}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;}

li.title
{
border-radius:5px;
background:#333;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
    display:block;
 padding:5px;
    font:14px droidkufi-bold;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
     text-align: center;
}
.downlistie{
list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
   list-style:none;
border-left:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
    margin:5px ;
    padding:4px 10px;   
}

.downlistie li:hover {
background:orange;
}
.downlistie li a{
font: 11px droidkufi-bold;
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#fff;
}
 

</style>


<a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a> <a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://wachhal.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>


<ul class="container">
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >وشحال</a></li>
<li class="downlistie">
                    <ul>
<li><a  href="#" >إضافات بلوجر</a></li>
<li><a  href="#">قوالب بلوجر</a></li>
<li><a href="#">دروس</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
       
              <ul>
<li class="title"><a href="#" >حصريات</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >تصميم</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
              <ul>
<li class="title"><a href="#" >برمجة</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
<li class="accoi-menu">
          <ul>
<li class="title"><a href="#" >منوعات</a></li>
<li class="downlistie">
                    <ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul>
</li>
</ul>
</li>
</ul>

 

اثمنى ان يكون الشرح جيد . ان واجهتكم اي مشكلة فاتصلوا بنا او
كتابتها في تعليق




, ,

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

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

صورة توضيحيه للاضافه


  طريقة الاضافة ؟

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

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

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

<data:post.body/>


ولصق الكود التالي بعده ثماما



<!--Social Subscription Box by http://3alami7tiiraf.blogspot.com‎-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.tbibox {
background: #fff;
border: 1px solid #ddd;
height: 360px;
margin: 10px auto;
padding: 10px;
width: 572px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
.tbisharebox {
border: 1px solid #D3D3D3;
margin: -157px 0 0 330px;
padding: 8px;
width: 225px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisharebox:hover {
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbibox'>
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>اشترك عبر القائمه البريديه ليصلك جديدنا</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='albaadani'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='albaadani' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'
onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}'
type='text' value='ادخل ايميلك هنا...' />
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='https://www.facebook.com/kaoukabi' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZJsLgKoiPejPOW__8bYzFKzySLq8b5XfC_A64CI9o-dqmlpqYTadzKYi3DwFq6FcyDYLWrTlsXL3WuxZ_gZSw6c77bJNSc93vYQf9wMMCeRtMUBxy3QmfR0XjsroApkxIQkvOii76Kk/s32/facebook500.png' alt='facebook'/></a>
<a href='https://twitter.com/kaoukabirel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigRun7KP_bmfdv4qzTQRxjtZ1EldKHq5T13jG5mQNH7Xim6_oNyBgZzotHFAbcXrcssz_kdFERw3uUiVVZrDgppu9v58tyKZV3gdzsNBYUKD-nHyR8ZhnG3IEAo_8KyN_TA0hEsmt4Oz8/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/kaoukabi' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPVmQS9cYX9yQdsFk6NDBml_xVDB_SMitb4qkrxIFc5fZQsfT8p4FIoXG7ql4vzTot1ZCuUJakmBzqejpqNROd4jESIeq3RkYxwVPbNJMDbhMSo089HlyGKSjhrw0NgrZ2aqxVVYgH28/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='http://pinterest.com/kaoukabi' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipSAxNvdS5zlELLvZ5gyunAyaDIWOAxvGyvihFfDQU_SSAzLgtKq2s7BXXcg8DQfhjZdXkg_QxSqPyYtFPPKzY-Zu-IeVeGMsc-pjenjUw-gNRSpINBs3xHZR6E-zURftRDAqqGljudxk/s32/pinterest.png' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/kaoukabi' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_8vA-kdLIJpUiYsI4nFAzRxp694YP5OPAGGm0aH98sjS7wtw5__4crLFBPTIUWPejRwg1x27XbA9MYfhKsI99LmhOCabOJxdYONmIjDnS3CUlhp2OoTLbqWwe-Zv-uMiPjBRzy0G3M_g/s32/rss.png' alt='rss'/></a>
</div>
</div>
<div class='tbisharebox'>
<script type='text/javascript'>
var switchTo5x = true;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
onhover: false
});
</script>
<div style='margin: 5px 5px;'>
<span class='st_fblike_hcount' displaytext=''></span>
</div>
<div style='margin: -30px -20px 0 0; float: right;'>
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'
expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title'
data-count='horizontal'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script>
</b:if>
</div>
<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>
<a class='addthis_counter'></a>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script>
</div>
<div style='margin: 5px 5px;'>
<su:badge layout='1'></su:badge>
<script type='text/javascript'>
(function () {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
</div>
</div>
<div style='float: right; margin: -40px -5px 0 0;'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div>
<script type='text/javascript'>
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div style='margin-top: 20px;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F3alami7tiraf&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if><!--Social Subscription Box by http://3alami7tiiraf.blogspot.com‎-->


الان قم باستبدال ما بالالوان باسماء حساباتك في فيس بوك وتويتر وجوجل وفيدربنر

* استبدل      kaoukabi          باسم حسابك في فيس بوك

* استبدل      kaoukabi          باسم حسابك في فيد برنر

* استبدل      kaoukabi        باسم حسابك في تويتر

* استبدل      kaoukabi  رقم الاي دي الخاص بحسابك في جوجل

* استبدل      kaoukabi               باسم حسابك في موقع pinterest     

* استبدل    kaoukabi          باسم حسابك في فيد برنر(القائمه البريديه)

  

وبالاخير قم بحفظ الاداه ومبروك عليك الاضافه 


 

,

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

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

صورة للاداة 


طريقة الاضافة ؟


1- انتقل إلى لوحة تحكم مدونتك
2- إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript
3- والآن الصق داخل المستطيل الكود التالي 


<style>
A:link {text-decoration: none; color: }.Mbt-Social-metro {
width: 960px;
float: right;
margin: 0;
padding: 1em 0; }
.Mbt-Social-metro ul {
margin: 0;  padding: 0;}
.Mbt-Social-metro ul li { 
list-style:none;
list-style-type: none;  
padding: 0; text-transform: none;
margin:0;
float: right;
display: inline-block; width: 20%; }
.Mbt-Social-metro ul li a {
font-size:80%;
text-align : center;
color: #fff!important;  
display:block;  }
.Mbt-Social-metro ul li a:hover { 
color: #000!important; 
background-color: #e5e5e5;
text-decoration: none;   }
idc-scoail ul li a, ul li a:hover {
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Mbt-Social-metro ul li .rss {
background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE;
background-size: 30px; padding: 10px 50px;}
.Mbt-Social-metro ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3;
background-size: 30px; padding: 10px 50px; }
/* width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {   
.Mbt-Social-metro ul li { width: 50%; }
}
/* width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {    
.Mbt-Social-metro ul li { width: 50%; }
}
/* width of 320px */
@media only screen and (max-width: 480px) {
.Mbt-Social-metro ul li { width: 100%; }
}
</style>
<div class='Mbt-Social-metro'>
<ul>
<li><a class='rss' href='http://feeds.feedburner.com/3alami7tiraf'>اشترك معنا عبر الخلاصات</a></li>
<li><a class='twitter' href='https://twitter.com/3alami7tiraf'>تابعتي على تويتر twitter</a></li>
<li><a class='facebook' href='https://www.facebook.com/3alami7tiraf'>تواصل معي عبر فيس بوك</a></li>
<li><a class='google' href='https://plus.google.com/99999999999999'>تابعني على جوجل بلس</a></li>
<li><a class='linkedin' href='http://in.linkedin.com/in/aminekaoukabi'>LinkedIn تواصل مع على </a></li>
</ul>
</div>


تخصيص الاضافه

1- استبدال ماباللون3alami7tiraf باسم حسابك في فيدبرنر
 2- استبدال ماباللون3alami7tiraf باسم حسابك في تويتر
 3- استبدال ماباللون3alami7tiraf باسم صفحتك في فيس بوك
 4- استبدال ماباللون99999999999999999 باسم حسابك جوجل بلس
 5- استبدال ماباللونaminekaoukabi باسم حسابك في لينكدين
 6-  لتغيير عرض الاضافهwidth: 960px; قم بتغيير القيمه فقط

وبالاخير قم بحفظ القطعه ومبروك عليك الاضافه ولا تنسى ان تشاركنا ارائك بتعليق 

الاشتراك في: الرسائل (Atom)

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

lm7a © جميع الحقوق محفوظة
Powered by v4.1 lam7a

MARI themes

يتم التشغيل بواسطة Blogger.