اضافة قائمة الفيس بوك متوافقة مع جميع الاجهزة

Jack El Said لا يوجد تعليق إضافات بلوجر القوائم دروس بلوجر 4:07 ص

اضافة قائمة الفيس بوك متوافقة مع جميع الاجهزة

Jack El Said

4:07 ص

0 تعليقات

شاركه غرد جوجل+

اضافة قائمة الفيس بوك متوافقة مع جميع الاجهزة

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

معاينة

شرح التركيب

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

* {
    margin: 0;
    padding: 0;
}
html {
    background-color: #E9EAED;
    height: 100%;
}
body {
    color: #333333;
    font-family: 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif;
}

/* other elements */
#nav_v2 {
    display: none;
}
/* top level elements */
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: rgb(78,105,162);
    background: -moz-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -webkit-gradient(right top, right bottom, color-stop(0%, rgba(78,105,162,1)), color-stop(100%, rgba(59,88,152,1)));
    background: -webkit-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -o-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -ms-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: linear-gradient(to bottom, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);

    border-bottom: 1px solid #3A4B7B;
    height: 22px;
    padding: 10px 0 10px 5px;
    position: relative;
}
#nav > li {
    float: right;
    height: 22px;
    padding-left: 6px;
    position: relative;
    text-align: right;
}
#nav > li > a {
    border: 1px solid transparent;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 27px;
    line-height: 27px;
    margin: -3px 0 0 -1px;
    padding: 0 11px 0 1px;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #425691;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    margin-left: -8px;
    padding: 0 11px 0 9px;
    position: relative;
    z-index: 1;
}
#nav > li.subs:hover > a {
    background-color: #FFFFFF;
    border: 1px solid rgba(100, 100, 100, 0.4);
    border-bottom-width: 0;
    border-radius: 2px 2px 0 0;
    color: #000000;
    text-shadow: 0 0 transparent;
    z-index: 2;
}
/* top items separator */
#nav > li:after {
    background-color: #405791;
    content: "";
    height: 17px;
    right: 1px;
    position: absolute;
    top: 2px;
    width: 1px;
}
#nav > li:first-child:after {
    background-color: transparent;
}
/* submenu */
#nav ul {
    background-color: #FFFFFF;
    border: 1px solid rgba(100, 100, 100, 0.4);
    *border: 1px solid rgb(100, 100, 100);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    display: none;
    right: -1px;
    margin-top: 2px;
    min-width: 200px;
    padding: 6px 0;
    position: absolute;
    top: 100%;
    z-index: 1;
}
#nav li:hover ul {
    display: block;
}
#nav ul li a {
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    color: #232B37;
    display: block;
    font-size: 12px;
    line-height: 20px;
    padding: 0 22px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#nav ul li a:hover {
    background-color: #6D84B4;
    border-bottom: 1px solid #3B5998;
    border-top: 1px solid #3B5998;
    color: #FFFFFF;
}
/* responsive rules */
@media all and (max-width : 980px) {

    #nav {
        display: none;
    }
    #nav_v2 {
        background-color: rgb(78,105,162);
        border: 1px solid #3A4B7B;
        color: #FFFFFF;
        cursor: pointer;
        display: block;
        margin-bottom: 30px;
        padding: 6px;
        width: 100%;
    }
    #nav_v2 select {
        color: #FFFFFF;
        cursor: pointer;
    }
}

الان نبحث عن هذا الكود </head>و فوقه نضيف الكود التالي

<ul id='nav'>
    <li><a href='#'>الرئيسية</a></li>
    <li class='subs'><a href='#s1'>قائمة 1</a>
        <ul>
            <li><a href='#'>تعديل A</a></li>
            <li><a href='#'>تعديل B</a></li>
            <li><a href='#'>تعديل C</a></li>
            <li><a href='#'>تعديل D</a></li>
        </ul>
    </li>
    <li class='subs'><a href='#s2'>قائمة منسدلة 2</a>
        <ul>
            <li><a href='#'>تعديل E</a></li>
            <li><a href='#'>تعديل F</a></li>
            <li><a href='#'>تعديل G</a></li>
            <li><a href='#'>تعديل H</a></li>
        </ul>
    </li>
    <li><a href='#'>تعديل 3</a></li>
    <li><a href='#'>تعديل 4</a></li>
    <li><a href='#'>تعديل 5</a></li>
    <li><a href='http://mudwnp.blogspot.com/2014/06/facebook-like-menu-responsive.html/'>Back to Responsive menu tutorial</a></li>
</ul>

اهم الاعدادات

نقوم باستبدال ما هو باللون الازرق # برابط القسم الخاص بك
نقوم باستبدال ما هو باللون الاحمر تعديل باسم القسم الخاص بك

يمكنك ايضا مشاهدة : اضافة قائمة منسدلة مع ايقونات التواصل الاجتماعية

في امان الله

اضافة تأثير الزوم على الصور لمدونات بلوجر

Jack El Said لا يوجد تعليق إضافات بلوجر دروس بلوجر CSS jQuery 4:05 ص

اضافة تأثير الزوم على الصور لمدونات بلوجر

Jack El Said

4:05 ص

0 تعليقات

شاركه غرد جوجل+

اضافة تأثير الزوم على الصور لمدونات بلوجر

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

معاينة

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

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

.zoomeffect img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

كيفية وضع الصور في الموضوع

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

 <a class="zoomeffect" href="#" target="_blank">
<img src="##" /></a>

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


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

تحياتي 

اضافة ازرار التحميل بطريقة احترافية

Jack El Said لا يوجد تعليق إضافات بلوجر تطوير بلوجر جافا سكربت دروس بلوجر CSS HTML jQuery js 4:03 ص

اضافة ازرار التحميل بطريقة احترافية

Jack El Said

4:03 ص

0 تعليقات

شاركه غرد جوجل+

اضافة ازرار التحميل بطريقة احترافية

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

الزر الاول الزر الثاني

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

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

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

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

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

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

.container {
  width:200px;
  display:block;
  margin:20px auto;
  position:relative;
  font-family:droid arabic kufi;
}

.con_down {
  display:block;
  cursor:pointer;
  background-color:#F6EB96;
  width:190px;
  height:50px;
  padding-left:10px;
  padding-top:5px;
  text-align:left;
  border-bottom:4px solid #D8B83C;
  border-radius:5px;
  position:relative;
  line-height:50px;
}
.con_down .fa-download{
  position:absolute;
  right:10px;
  top:15px;color:#895D0A;
}

.con_down h4 {
  color:#895D0A;
  text-transform:uppercase;
  margin:0;
}
.sizes h5 {
    margin:0;
}

.sizes {
  background-color:#E3E3E3;
  width:100px;
  height:30px;
  z-index:-9;
  padding-top:2px;
  border-bottom:4px solid #AAA9A9;
  position:absolute;
  top:13px;
  left:20px;
  transition:.5s all ease-in-out;
}

.size {
  line-height:30px;
  text-align:center;
  color:#4B4B4B;
}

.sizes_abs {
  background-color:#F6EB96;
  cursor:pointer;
  width:20px;
  border-bottom:4px solid #D8B83C;
  border-bottom-left-radius:5px;
  border-top-left-radius:5px;
  height:55px;
  position:absolute;
  top:-13px;
  left:-20px;
  z-index:2;

}

.container:hover .sizes {
  left:-100px;
}

.container:hover .con_down {
  background-color:#F1DD5E;
     border-bottom-left-radius:0;
  border-top-left-radius:0;
}

.container:hover .sizes_abs {
  background-color:#F1DD5E;
}

التنسيق

لتغيير الخط ابحث عن droid arabic kufi و استبدلها بالخط الموجود في مدونتك
لتغيير لون الزر ابحث عن :#F6EB96 سوف تجد الكود مكرر غيرها كلها بنفس اللون الذي اخترته
لتغيير لون البار التي بالاسفل ابحث عن #D8B83C  سوف تجد الكود مكرر غيرها كلها بنفس اللون الذي اخترته
لتغيير لون الايقونة بجانب كلمة تحميل ابحث عن #895D0A  سوف تجد الكود مكرر غيرها كلها بنفس اللون الذي اخترته
لتغيير اللون عند مرور مؤشر الماوس ابحث عن #F1DD5E سوف تجد الكود مكرر غيرها كلها بنفس اللون الذي اخترته

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

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

<div class="container">
  <div class="con_down">
      <i class="fa fa-download fa-2x"></i>
    <h4>Download Now</h4>
  </div>
  <div class="con_sizes">
  <div class="sizes">
    <h5 class="size">34.5 MB</h5>
    <div class="sizes_abs"></div>
  </div>
  </div>
</div>

استبدل كلمة Download Now  بالكلمة التي تريدها
استبدل 34.5 MB  بحجم الملف التي قمت برفعه

طريقة تركيب الزر الثاني

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

.container {
    width:200px;
    display:block;
    margin:20px auto;
    position:relative;
    font-family:droid arabic kufi;
}
.con_down {
    display:block;
    cursor:pointer;
    background-color:#F6EB96;
    width:190px;
    height:50px;
    padding-left:10px;
    padding-top:5px;
    text-align:left;
    border-bottom:4px solid #D8B83C;
    border-radius:5px;
    position:relative;
    line-height:50px;
    transition:.5s all ease-in-out;
}
.con_down .fa-download {
    position:absolute;
    right:10px;
    top:15px;
    color:#895D0A;
}
.con_down h4 {
    color:#895D0A;
    text-transform:uppercase;
    margin:0;
}
.sizes h5 {
    margin:0;
}
.sizes {
    background-color:#E3E3E3;
    width:100px;
    height:30px;
    z-index:-9;
    position:absolute;
    bottom:22px;
    right:50%;
    margin-right:-50px;
    transition:.5s all ease-in-out;
}
.size {
    line-height:30px;
    text-align:center;
    color:#4B4B4B;
}
.sizes_abs {
    background-color:#F6EB96;
    cursor:pointer;
    width:200px;
    border-bottom:4px solid #D8B83C;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    height:20px;
    position:absolute;
    left:-50px;
    bottom:-22px;
    z-index:2;
}
.container:hover .sizes {
    bottom:-30px;
}
.container:hover .con_down {
    background-color:#F1DD5E;
    border-bottom:0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.container:hover .sizes_abs {
    background-color:#F1DD5E;
}

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

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

<div class="container">
    <div class="con_down"> <i class="fa fa-download fa-2x"></i>

         <h4>Download now</h4>

    </div>
    <div class="con_sizes">
        <div class="sizes">
             <h5 class="size">34.5 MB</h5>

            <div class="sizes_abs"></div>
        </div>
    </div>
</div>

استبدل كلمة Download Now  بالكلمة التي تريدها
استبدل 34.5 MB  بحجم الملف التي قمت برفعه

طريقة تنسيق الزر الثاني هي نفس طريقة تنسيق الزر الاول و مع القليل من الخبرة في CSS تستطيع ان تجعله افضل 

بالتوفيق

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

Jack El Said لا يوجد تعليق إضافات بلوجر تطوير بلوجر دروس بلوجر 3:55 ص

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

Jack El Said

3:55 ص

0 تعليقات

شاركه غرد جوجل+

إضافة ابتسامات متحركة لمدونات بلوجر

الإبتسامات والرموز من الإضافات التي  لا انصح بعدم تركيبها نظراً لانها تسبب الكثير من الثقل في مدونات بلوجر لان غالباً إضافات الإبتسامات تتكون من صور منفرده ومتحركه وجلب كل تلك الروابط يعد عبئ اضافة حتى لطرق اظهارها لكن الإبتسامات والرموز من اكثر الإضافات التي تعطي حيوية للتعليقات وقد تحل محل كثير من الكلمات وتعبر بشكل طيب عن بعض ما قد لا تعطيه الكلمات من معاني لكن الان تم تطويرها وهي صورة واحده يتم تجزئتها وهي تصميم حصري وطريقة تركيبها ايضاً سهله ولا تؤثر في سرعة المدونة ويمكنك تركيبها بإتباع التالي

شرح التركيب

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

ابحث عن</head>و اضف الكود التالي فوقه

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

الان قم بالبحث عن </body>واضف فوقه هذا الكود

<!-- mudwnp Smily.-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.emoWrap{position:relative;
padding:10px;
margin-bottom:7px;
background:#fff;
background-image:-ms-linear-gradient(left,#fff 0,#fff9f2 100%);
background-image:-moz-linear-gradient(left,#fff 0,#fff9f2 100%);
background-image:-o-linear-gradient(left,#fff 0,#fff9f2 100%);
background-image:-webkit-gradient(linear,left top,right top,color-stop(0,#fff),color-stop(1,#fff9f2));
background-image:-webkit-linear-gradient(left,#fff 0,#fff9f2 100%);
background-image:linear-gradient(to right,#fff 0,#fff9f2 100%);
border:1px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:0 4px 6px
rgba(0,0,0,0.1),0 1px 1px
rgba(0,0,0,0.3);-moz-box-shadow:0 4px 6px
rgba(0,0,0,0.1),0 1px 1px
rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px
rgba(0,0,0,0.1),0 1px 1px
rgba(0,0,0,0.3);box-shadow:0 2px 6px
rgba(0,0,0,0.1),0 1px 1px
rgba(0,0,0,0.3);font-size:14px;color:#333}
.emoWrap:after{content:&quot;&quot;;position:absolute;bottom:-10px;right:10px;border-top:10px solid #ccc;border-left:20px solid transparent;
width:0;
height:0;
line-height:0}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"يمكنك ان تستخدم الإبتسامات بالضغط عليها لمعرفة الكود",
emoMessage:"يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة ولا ننشر تعليق يخص مدونات تخالف الشريعة الإسلامية , اما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولا بمحول الأكواد"
})
});
//]]></script><script src='https://dl.dropboxusercontent.com/s/s7x5nalqkatxtlq/bloggerknown-emo.js' type='text/javascript'/></b:if>

اهم الاعدادات

1. قم بتغيير 14px التي باللون الازرق لتغيير حجم الخط
2. قم بتغيير #333 لتغيير لون الخط استخدم اكواد الالوان
3. قم بتغيير الكلمات التي باللون الاحمر بما يناسب مدونتك

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

في امان الله