• الرئيسية
  • اضافات بلوجر
  • الربح
  • أشهار المدونات
  • تدوينات سريعة
  • اخبار التدوين
  • مواقع هامة
  • نصائح التدوين
  • جوجل أدسنس
    • ahmed hegazy
    الاثنين, مايو 12, 2014
    » » » » » » مجموعة اكواد صناديق بلوجر بتقنية css3

    مجموعة اكواد صناديق بلوجر بتقنية css3

    بسم الله الرحمن الرحيم 
    مرحبا بكل متابعى نصائح للمدونين
    بعض طلب الكثير والبحث والسؤال
    عن
    كيفية عمل صندوق اقتباس مميز للبلوجر تلقائيا
    اليوم اتيت لكم بمجموعة من الأكواد الجزاء الأول
    بتقنية css3
    طريقة التركيب سهلة جدا نفتح القالب ثم تحرير html ثم نحرر القالب
    ملحوظة:اذا لم يظهر صندوق الأقتباس قم بعمل الأتى
    أبحث عن
    .post blockquote
    وأحذف الكود بأكملة قد تجدة بهذا الشكل
    .post blockquote{margin:1em 20px}
    .post blockquote p{margin:.75em 0} 
    ثم قم بالأتى 
    بالضفط على ctrl+f
    ونقوم بالبحث عن الكود التالى
    ]]></b:skin>
    وتضيف قبله او فوقة اى شكل يعجبك
    من الاشكال الاتية

    الشكل الأول

    blockquote {
    border-bottom-left-radius: 6px;
    -webkit-bottom-left-radius: 6px;
    -moz-bottom-left-radius: 6px;
    -o-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-bottom-right-radius: 6px;
    -o-border-bottom-right-radius: 6px;
    margin: 0 0 20px;
    border-left: 30px solid #FC4F08;
    background-color: #302C2B;
    color: #B8B4AA;
    border-radius: 10px 20px 20px 10px;
    -webkit-border-radius: 10px 20px 20px 10px;
    -moz-border-radius: 10px 20px 20px 10px;
    -o-border-radius: 10px 20px 20px 10px;
    padding: 4% 2% 4% 3%;
    font-family: 'Voces', cursive;
    font-size: medium;
    text-align: left !important;
    direction: ltr !important;
    }
    q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    }
    Pseudo ::after element

    الشكل الثانى 



    .post blockquote {
    max-height: 400px;
    clear: both;
    padding: 0 10px 10px 10px;
    border: 1px solid #DDD;
    color: #666;
    direction: ltr;
    text-align: left;
    border-radius: 4px;
    font: 12px "Courier New", "MS Sans Serif", sans-serif, serif;
    line-height: 1.6em;
    -ms-overflow-x: auto;
    overflow-x: auto;
    position: relative;
    z-index: 50;
    background: #FFF;
    }
    .post blockquote:before {
    content: " CODE --> copy/past this code and Enjoy --> ";
    padding: 0px 20px;
    margin: 0 -10px 5px -10px;
    border-bottom: 3px solid #A4D3DF;
    display: block;
    background: #E5F8FD url(https://jetara.googlecode.com/files/%D8%AA%D9%86%D8%B2%D9%8A%D9%84.png) left 2px top 2px no-repeat;
    color: #A4B1B8;
    }

    الشكل الثالث

    blockquote {
    width: 80%;
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #FFCC00;
    border: 2px solid #80D4DF;
    color: #333;
    position: relative;
    padding: 20px 30px;
    border: none;
    margin: 0 auto;
    margin-bottom: 15px;
    font-size: 13px;
    margin-right: -2px;
    }
    blockquote:before {
    background: #99CCFF;
    content: "إقتباس";
    position: absolute;
    left: -31px;
    text-align: center;
    line-height: 32px;
    color: #FFF;
    top: 0;
    width: 50px;
    height: 28px;
    font-weight: bold;
    }

    الشكل الرابع 

    .post blockquote {
    background: #EFEFEF;
    border: 2px dotted #000000;
    box-shadow: 1px 1px 0 #000, 3px 3px 0 #fff, 4px 4px 0 #000, 6px 6px 0 #fff, 7px 7px 0 #000, 9px 9px 0 #fff, 10px 10px 0 #000;
    color: #404141;
    direction: ltr;
    font: 14px Arial;
    margin: 15px auto;
    max-height: 400px;
    overflow: auto;
    padding: 15px;
    text-align: left !important;
    width: 80%;
    }
    .post blockquote:before {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieDyP8k1zgmyFl2sKQ3GvM6gbA4OioFeRIyO0Eja7FS7TgN-BmSzOs7OzdxTaYicjHkWlkwdTga647DBXieBRkynIvRIpO_urEd5Wepw4ykDrt0AArApd2sngK9jVV5RkTMkjNxUSSvBXN/s172/16x16.png") no-repeat scroll 99% -97px #000000;
    color: #FFFFFF;
    content: "3alam-b.Blogspot.Com كود معد بواسطة";
    display: block;
    font: bold 12px droid arabic kufi;
    height: 20px;
    margin: -15px -15px 5px;
    padding: 4px 30px 6px 0;
    text-align: right !important;
    }

    الشكل الخامس 



    .post blockquote {
    margin: 15px 35px 15px 15px;
    padding: 10px;
    clear: both;
    list-style-type: none;
    background: #FFFBC6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjQABA-Vz7mhqplKtiIOYjHzgMcRB14qv70t0IAWmlL0uPXl687jplg_1Fz9I4jZuI93TUfSzkF3DBG9CmUhvMbg4ymJnXmEPJ0o7e-0nOkAb4qT8ifvh22KR4XAdPyJNEC43LgPGmzAx_/s320/cv-1.png) no-repeat right bottom;
    border-top: 1px solid #4977FF;
    border-right: 1px solid #5686FF;
    border-bottom: 1px solid #475FFF;
    border-left: 1px solid #5686FF;
    border-radius: 10px;
    box-shadow: 2px 3px 3px 1px rgba(0, 0, 0, 0.5), 0 2px 2px 0 rgba(255, 255, 255, 0.5) inset;
    height: 380px;
    overflow: scroll;
    overflow-x: hidden;
    direction: ltr;
    }


    اتمنى ان تكون الاشكال اعجبتكم
    وانتظرونا مع مجموعة جديدة من اكواد الاقتباس للبلوجر
    نرجو كلمة فقط او تعليق يعنى تقيمك للموضوع
    دوَّنَهَا : ahmed hegazy
    من فضلك اضغظ لايك لمشاهدة لينك التحميل
    شارك الموضوع علي

    1 تَعْلِيق:

    1. غيسى خبيزي14‏/5‏/2014، 12:38 ص

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

      ردحذف

    الاشتراك في: تعليقات الرسالة (Atom)