• مسلسلات

    • قائمتين مميزتان لتسهيل المهام



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


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


                                                                     
     
<div class="ar1webmb">
    <input type="checkbox" id="tm" />
    <!-- The menu -->
    <ul class="sidenav">
      <li><a href="#"><i class="fa fa-check"></i><b>المهام</b></a></li>
      <li><a href="#"><i class="fa fa-inbox"></i><b>الرسائل</b></a></li>
      <li><a href="#"><i class="fa fa-pencil"></i><b>المواضيع الجديدة</b></a></li>
      <li><a href="#"><i class="fa fa-cog"></i><b>الإعدادات</b></a></li>
      <li><a href="#"><i class="fa fa-star"></i><b>جديد المدونة</b></a></li>
      <li><a href="#"><i class="fa fa-power-off"></i><b>تسجيل الخروج</b></a></li>
    </ul>
    <section>
      <!-- Label for #tm checkbox -->
      <label for="tm">القائمة<br/> ~ إضغط عليّ ~ </label>
    </section>
  </div>
<style>
@import url(http://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,300);
 #addku1,#addku2 {display:none;}
.ar1webmb {
  float: none;
  position: relative;
  overflow: hidden;
}
#tm {
  display: none;
}
.ar1webmb section {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0AoyIUQ13cAB4wXl4iNonFPR3GNAvQwAJXBg2WM3MDNkTLCdM3tA530OxMa8_I-s0xiq51QOb2RbxheW27M33Uh6JcFR2xuZzty-SlGu93z7daJM_rjy7aInrAPDtnWltba5OGW4co00/s1600/ar1web44.jpg");
  width: 300px;
  height: 500px;
  position: relative;
  transition: all 0.25s;background-size: cover;    box-shadow: 0 0 10px 0px #000000;
}
.ar1webmb section label {
  color: white;
    font: bold 22px 'Adobe Arabic','serif';
    text-align: center;
    border: 2px solid white;
    display: block;
    padding: 6px 0;
    width: 60%;
    position: absolute;
    left: 20%;
    top: 100px;
    cursor: pointer;
    text-transform: uppercase;
    background-color: rgba(49, 46, 47, 0.36);
}
.sidenav {
  background: rgb(169, 106, 70);
  width: 160px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding-top: 100px;
}
.sidenav li {
  list-style-type: none;padding-right: 19px;
}
.sidenav a {
  color: white;
  text-decoration: none;
}
.sidenav b {
  font: bold 19px/48px 'Adobe Arabic','serif';
  display: block;
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.4s;
}
.sidenav i {
  display: block;
  width: 50px;
  float: left;
  font-size: 16px;
  line-height: 48px;
  text-align: center;
}
#tm:checked ~ section {
  transform: translateX(160px);
}
#tm:checked ~ .sidenav b {
  opacity: 1;
  transform: translateX(0);
}
#tm:checked ~ .sidenav li:nth-child(1) b {
  transition-delay: 0.08s;
}
#tm:checked ~ .sidenav li:nth-child(2) b {
  transition-delay: 0.16s;
}
#tm:checked ~ .sidenav li:nth-child(3) b {
  transition-delay: 0.24s;
}
#tm:checked ~ .sidenav li:nth-child(4) b {
  transition-delay: 0.32s;
}
#tm:checked ~ .sidenav li:nth-child(5) b {
  transition-delay: 0.40s;
}
#tm:checked ~ .sidenav li:nth-child(6) b {
  transition-delay: 0.48s;
}
</style>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

    

    

    

    

    

            تخصيص القائمة :                      
    المحدد بالأحمر # يغير بالرابط
المحدد بالبرتقالي يخص الأيقونات "الموقع"
المحدد بالوردي يغير بالكلمات
المحدد بالأخضر يخص رابط الصورة
المحدد بالأزرق يخص لون الخلفية

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

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

    غلاف صفحة الحملة
    غلاف صفحة الحملة
    دشن نشطاء على موقع التواصل الاجتماعي "فيس بوك" حملة شعبية لمقاطعة المنتجات الداعمة لبرنامج "صبايا الخير" الذي تقدمه الإعلامية ريهام سعيد.
    جاء ذلك، بعد أن قامت ريهام سعيد بنشر صور فاضحة لفتاة كانت قد تعرضت للتحرش بـ"مول الحرية" بغرض التشهير بها، في محاولة منها لتبرئة المتحرش وإلقاء اللوم على الفتاة.
    وأثار هذا التصرف من الإعلامية جدلا كبيرا، قرر على إثره مجموعة من النشطاء بدء الدعوة لمقاطعة المنتجات الداعمة لبرنامج ريهام سعيد، قائلين، عبر الصفحة الرسمية للحملة: "اللي زي ريهام سعيد من الإعلام الفاسد مش هيبطلوا غير بوسيلة واحدة وهي إننا نقطع عنهم الأكسجين اللي بيخليهم يطلعوا علينا كل يوم ويزيدوا في فسادهم كل سنة (الفلوس)".
    وارتفع عدد المنضمين لتلك الحملة في الساعات الأولى من بدئها إلى أكثر من 8000 مشارك.

    إضافه تعليقات الفيس بوك مدومج مع بلوجر

                                             تم نقل الموضوع من موقع #اضفات_بلوجر

    مرحباً بكم اخواني وزوار المدونة 




    على اضافات بلوجر فقط جميع الإضافات مميزة هناااا فقط








    لتعلمو مقدر معزتكم لدينا ..اليوم سوف نتعلم إضافه تعليقات الفيس بوك الى مدونات بلوجر
    لكن بطريقة جديده وهي من تطويري ( الاضافة متواجده في بعض المدونات) لكنها تفتقر الى التطوير + الشرح الصحيح
    اولاً الاضافة لا تناسب كل مدونه فهي بحجم معين ولم يتم شرح للتعديل على الحجم
    نحن قمنا بذلك

    الاضافة باللغة الانكليزيه 
    نحن ترجمناها لتناسب المدونات العربية

    وسوف نقوم بالشرح الصحيح للإضافه 
    اولاً اذاهب الى لوحة تحكم المدونة 2- انقر على قالب ثم تحرير HTML3- ابحث عن

    <div class='comments' id='comments'>

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





      <div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'><img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBhwPA06GtktFW0T20NgoNX2uzfpcBLy6rggDFRxPmdufZw97hufpWbtdIsRH-azJCq-NOUB0ge8y80flfqrZZDsvgNO6bak-Xb-M4YkWkKsQHj9J_vzfqToAR4FTFYV-2a4-pTnWMcA/s1600/FACEBOOK.png'/><fb:comments-count expr:href='data:post.url'/> التعليقات</div><div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'><img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjCfoX7l7OABk-X7g4tqtF9N7BI2p4fCLBkoXEKA-Ia9jHW_vzwNdXx8zM-CP1MsWY19PnptVvz7GvPBp7zJkCnR4L-k-CDCOG9XiBefqfXPcH4Hg06ev0CfTx7ifmjlfrWdPuCePBvm4/s1600/BLOGGER.png'/> <data:post.numComments/> التعليقات</div><div class='clear'/></div><div class='comakauttafb-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='680'/></b:if></div><div class='comments comakauttafb-page' id='blogger-comments-page'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='additions.blogger' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(&quot;.comakauttafb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.comakauttafb-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}</script><style type='text/css'>.comakauttafb-page, .comakauttafb-tab {-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-right:5px solid #ccc; border-top:3px solid #ccc; border-bottom:3px solid #ccc; border-right:5px solid #ccc}.comakauttafb-page {background:transparent;);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px 1px #fff;color:#000;float:right;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5sease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s ease-out}.comakauttafb-tab-icon {height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover {background:rgba(219,219,219,.8);}.inactive-select-tab {background:rgba(255,255,255,.4);}.inactive-select-tab, .comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000}</style>





    الان نأتي الى الشرح 
    1-  الذي باللون الاحمر هو العرض غير باللون الرقم فقط ليناسب مدونتك
    تستطيع ايضاً تغيير الالون .. 

    اضغط حفظ والف مبروك 


    الشكل الثاني (تطويري)





    الكود

      <div class='comakauttafb-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'><img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMCwcsbka3n1tkQg31dcefRg3dRpaW2U3pToNrupTgNiKWsw7hqMt6R0uRbMCIqH5n2do6n0FgGZonUI1sZYZ3N0uUb09JRrWHOsS_WVzNoW9zNfVB3eG2F-wvDg6QhbtmtTguLbTrq7TO/s1600/add-b.blogspot1.png'/><fb:comments-count expr:href='data:post.url'/> التعليقات</div><div class='comakauttafb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'><img class='comakauttafb-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOKvUEjGXFGZSUUpi4XkKiTaJ4ovOkaxEqHXIRe3fwZT-SFInbe0zaKb20ep-rVZHzOgtm62zjNVvzQ9uKBEEqGoYMZZdNi3VSiPnmjoo48UzGnBNCk_Mw7V_t2u56vgcQJcSXVuNeGnxY/s1600/add-b.blogspot.com.jpg'/> <data:post.numComments/> التعليقات</div><div class='clear'/></div><div class='comakauttafb-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments color='dark' expr:href='data:post.url' num_posts='10' width='639'/></b:if></div><div class='comments comakauttafb-page' id='blogger-comments-page'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='additions.blogger' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(&quot;.comakauttafb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.comakauttafb-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}</script><style type='text/css'>.comakauttafb-page, .comakauttafb-tab {-moz-border-radius:10px 10px 10px 10px; -webkit-border-radius:10px 10px 10px 10px; border-right:5px solid #ccc; border-top:2px solid #ccc; border-bottom:2px solid #ccc; border-right:2px solid #ccc}.comakauttafb-page {background:transparent;);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}.comakauttafb-tab {text-shadow:0px 1px 1px #FFA221;color:#FFA221;float:right;padding:5px;margin-right:5px;cursor:pointer;background:transparent;);-o-transition:.5sease-out;-moz-transition:.5s ease-out;-webkit-transition:.5s ease-out}.comakauttafb-tab-icon {height:16px;width:16px;margin-right:5px;}.comakauttafb-tab:hover {background:rgba(219,219,219,.8);}.inactive-select-tab {background:rgba(255,255,255,.4);}.inactive-select-tab, .comakauttafb-tab:hover {box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-moz-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000;-webkit-box-shadow:-1px -1px 1px #fff,1px 1px 1px #fff,1px 1px 5px #000}</style>


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

    وشكراً لكل متايع لي 
    دمتم بود


    الاشتراك في: التعليقات (Atom)
    Menu :
    جميع الحقوق محفوظه. يتم التشغيل بواسطة Blogger.

    المشاركات الشائعة