قائمة css فى قمة الأناقة لمدونات بلوجر

بسم الله الرحمن الرحيم

أقدم لكم من مدونة مدون فقط قائمة css فى قمة الإحترافية بالوان رائعة جداً ومناسبة لجميع القوالب يمكنك تركيبها فى أداة جديدة جافاسكريبت ويمكنك إستبدالها بالقائمة القديمة فى قالبك .

لوحة التحكم / التخطيط / إختار المكان المناسب / أداة جافاسكريبت وضع بها الكود التالى بها

     <style>  

    /* by.mdwanblog.blogspot.com */

    #cssmenu {

      padding: 0;

      margin: 0;

      border: 0; }

    #cssmenu ul, #cssmenu li {

      list-style: none;

      margin: 0;

      padding: 0; }

    #cssmenu ul {

      position: relative;

      z-index: 597; }

    #cssmenu ul li {

      float: right;

      min-height: 1px;

      vertical-align: middle; }

    #cssmenu ul li.hover,

    #cssmenu ul li:hover {

      position: relative;

      z-index: 599;

      cursor: default; }

    #cssmenu ul ul {

      visibility: hidden;

      position: absolute;

      top: 100%;

      left: 0;

      z-index: 598;

      width: 100%; }

    #cssmenu ul ul li {

      float: none; }

    #cssmenu ul ul ul {

      top: 0;

      left: auto;

      right: -99.5%; }

    #cssmenu ul li:hover > ul {

      visibility: visible; }

    #cssmenu ul ul {

      bottom: 0;

      left: 0; }

    #cssmenu ul ul {

      margin-top: 0; }

    #cssmenu ul ul li {

      font-weight: normal; }

    #cssmenu a {

      display: block;

      line-height: 1em;

      text-decoration: none; }

    /* by.mdwanblog.blogspot.com */

    #cssmenu {

      background: #333;

      border-bottom: 4px solid #1b9bff;

      font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;

      font-size: 12px; }

      #cssmenu > ul {

        *display: inline-block; }

      #cssmenu:after, #cssmenu ul:after {

        content: '';

        display: block;

        clear: both; }

      #cssmenu ul {

        text-transform: uppercase; }

        #cssmenu ul ul {

          border-top: 4px solid #1b9bff;

          text-transform: none;

          min-width: 190px; }

          #cssmenu ul ul a {

            background: #1b9bff;

            color: #FFF;

            border: 1px solid #0082e7;

            border-top: 0 none;

            line-height: 150%;

            padding: 16px 20px; }

          #cssmenu ul ul ul {

            border-top: 0 none; }

          #cssmenu ul ul li {

            position: relative; }

            #cssmenu ul ul li:first-child > a {

              border-top: 1px solid #0082e7; }

            #cssmenu ul ul li:hover > a {

              background: #35a6ff; }

            #cssmenu ul ul li:last-child > a {

              -moz-border-radius: 0 0 3px 3px;

              -webkit-border-radius: 0 0 3px 3px;

              border-radius: 0 0 3px 3px;

              -moz-background-clip: padding;

              -webkit-background-clip: padding-box;

              background-clip: padding-box;

              -moz-box-shadow: 0 1px 0 #1b9bff;

              -webkit-box-shadow: 0 1px 0 #1b9bff;

              box-shadow: 0 1px 0 #1b9bff; }

            #cssmenu ul ul li:last-child:hover > a {

              -moz-border-radius: 0 0 0 3px;

              -webkit-border-radius: 0 0 0 3px;

              border-radius: 0 0 0 3px;

              -moz-background-clip: padding;

              -webkit-background-clip: padding-box;

              background-clip: padding-box; }

            #cssmenu ul ul li.has-sub > a:after {

              content: '+';

              position: absolute;

              top: 50%;

              right: 15px;

              margin-top: -8px; }

        #cssmenu ul li:hover > a, #cssmenu ul li.active > a {

          background: #1b9bff;

          color: #FFF; }

        #cssmenu ul li.has-sub > a:after {

          content: '+';

          margin-left: 5px; }

        #cssmenu ul li.last ul {

          left: auto;

          right: 0; }

          #cssmenu ul li.last ul ul {

            left: auto;

            right: 99.5%; }

      #cssmenu a {

        background: #333;

        color: #CBCBCB;

        padding: 0 20px; }

      #cssmenu > ul > li > a {

        line-height: 48px; }

</style>

<!--by.mdwanblog.blogspot.com-->

    <div id='cssmenu'>

    <ul>

       <li class='active'><a href='#'><span>الرئيسية</span></a></li>

       <li class='has-sub'><a href='#'><span>منسدلة</span></a>

          <ul>

             <li class='has-sub'><a href='#'><span>رابط</span></a>

                <ul>

                   <li><a href='#'><span>رابط</span></a></li>

                   <li class='last'><a href='#'><span>مدونة مدون</span></a></li>

                </ul>

             </li>

             <li class='has-sub'><a href='#'><span>منسدلة اخرى</span></a>

                <ul>

                   <li><a href='#'><span>جديد</span></a></li>

                   <li class='last'><a href='#'><span>هاكات بلوجر</span></a></li>

                </ul>

             </li>

          </ul>

       </li>

       <li><a href='#'><span>عن مدوّن</span></a></li>

       <li class='last'><a href='#'><span>بلوجر</span></a></li>

    </ul>

    </div>

    <!--by.mdwanblog.blogspot.com-->

فى النهاية أتمنى إنها تنال إعجابكم دمتم بخير

اقرء المزيد

قائمة css فى قمة الإحترافية (صورة ، عنوان ، وصف)

بسم الله الرحمن الرحيم

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

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

<style>
#menu {
 background: white;
 width: 280px;
 padding:10px;
}
#menu ul {
 margin:0;
 padding:0;
 list-style: none;
}
#menu ul li {
 margin: 0;
 padding: 5px 0 10px;
 border-bottom: 1px dashed #EAEAEA;
}
#menu ul li img {
 float: right;
 padding: 3px 0 0 10px;
}
#menu ul li a {
 font: normal 18px 'Droid Arabic Kufi', tahoma ,arial;
 color: #007195;
 text-decoration:none;
}
#menu ul li a:hover {
 color:#CC3332;
}
#menu ul li span {
 font: normal 13px 'Droid Arabic Kufi', tahoma ,arial;
 color:#7D7D7D;
}
#menu li span:hover {
 color: #494949;
}
</style>
<div id="menu">
 <ul>
<!--design:mdwanblog.blogspot.com-->
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZIM0Iu_lyadqWhPnVw-G6_soIhflajyTvNiKTLw5R_raZvY07ko7Q3mfw3kBGUB9e_1mskUhPLyvyGOMWPKupZYwrXonuzXI9glwQyydffbYITjkuRSs27u9T57Yh6G67_W0h3u8xaSc/s1600/232.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggsFHBky1-PKvW30NkMz0XW45kFmPaLtXbz0ua4H7YCKU98N5laBmjf-pUeDQrv7MvHQPPDR1uy4X2tryAcKcQa4-lEQaRcZ-ootP9uB51ag6PHzZHJJ98BhHjawMKUfO8QSk_FY9LjuE/s1600/155.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6yPryUEJODKIs0cMrouzg-1kf_qWMJAkZs0G6BGUNVjY-u7kHf12zF5SLN-yupQOKtZednNLmTfcYMIG0TwecsPGpwHwxWF3u7iWPoLy_mHMYtPIjT52lDPxaONIc2hwgAWFf_QzruCY/s1600/178.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgDQ4FGiuFJzhfUO0ZUrSrEi8emmPV8K8J_cx05p0BHT7TJaNyT32pgKfXyksDD0yX9m8xdDdDqG-3tLUUrKJFY-3gPltQrvuNfMleKbT5kVuknBWYvrfnn_Xwg3DfWhjfymretHDmJLY/s1600/185.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
<!--design:mdwanblog.blogspot.com-->
 </ul>
</div>

أتمنى إنها تنال إعجابكم 

اقرء المزيد

كود الإعلانات النصية الإحترافى مثل المواقع

بسم الله الرحمن الرحيم 

السلام عليكم ورحمة الله وبركاتة ....  كود إعلانات نصية إحترافى مثل المواقع والمنتديات css من تطوير مدونة مدوّن ربما بحثت عليه كثيراً ولن تجده ولكن مدونة مدوّن اليوم تقدمة لك ويحتاج فقط لتعديل الروابط  الخاصه بك .

معاينة الكود بالكامل 

اولاً هذا الكود خاص بجزء الـ html فقط

<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet'
<div class="simoelmaachi">
<div class="footerbg">
<div class="footerright">
<div class="footerleft">
<div id="textlinks">
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</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>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</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>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</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>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</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>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</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>
</div>
<div class="textcontainer" id="rightspace">
<ul>

  <li class="texttitle" style="background-image:
url('http://img706.imageshack.us/img706/7030/53800244.png');
background-position: right; background-repeat: no-repeat">الاعلانات
النصية</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>
</div>
</div>
</div>
</div>
</div>
</div>

ثانياً الجزء الخاص بـ css

<style type="text/css">
html
{
scrollbar-base-color: #3F93AF;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #DFDEDF;
}

.footerbg {
    height: 147px;
}

#textlinks ul  {
  padding: 0;
  margin: 0;
  direction: rtl;
  list-style-type: none;
font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 11px;
}
#textlinks li {
  background-position: bottom;
  text-align: right;

}
#textlinks li a {
  background-position: right;
  display: block;
  text-decoration: none;
  padding-right: 20px;
 font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 15px;
  font-weight: normal;
  color: FFCC00;
  background-image: url('http://img526.imageshack.us/img526/7194/linkie.png');
  background-repeat: no-repeat;
  line-height: 20px;
  height: 20px;
}
#textlinks li a:hover {
  text-decoration: none;

  color: FF9900;
}
#textlinks {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.textcontainer {
  float: right;
  display: inline;
  width: 160px;
  padding-top: 20px;
  margin-left: 20px;
}
#rightspace {
  margin-right: 35px;
}
.texttitle {
font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 13px;
  font-weight: bold;
  color: #FF9900;
  padding-right: 20px;
}
</style>

تركيب الكود إختر إضافة اداة جافاسكريبت وضع بها الكود الـ html وأسفلها مباشرة ضع الكود الـ css

اقرء المزيد

أزرار المتابعة بشكل جديد إحترافى لمدونتك

بسم الله الرحمن الرحيم 

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

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

أزرار متابعه المواقع الإجتماعية 5 مواقع فقط والآن مع شرح التركيب.

للمعاينة المباشرة| هنا

لوحة التحكم - القالب - إستخدم f3 وإبحث عن هذا الكود

]]></b:skin>

وضع الكود التالى قبلة مباشرة 

.socialw {
 width: 236px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: auto;
 height: 100%;
}
#social1 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 margin-left: 1px;
 float: left;
 overflow: hidden;
}
#social2,#social3,#social4,#social5 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 float: left;
 margin-left: 10px;
 overflow: hidden;
}
/*    ANIMATIONS   */
.animate {
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -o-animation-fill-mode: both;
 animation-fill-mode: both;
}
.animate.queue {
 -webkit-animation-delay: 1s;
 -moz-animation-delay: 1s;
 -o-animation-delay: 1s;
 animation-delay: 1s;
}
.animate.queue2s {
 -webkit-animation-delay: 2s;
 -moz-animation-delay: 2s;
 -o-animation-delay: 2s;
 animation-delay: 2s;
}
.animate.queue3s {
 -webkit-animation-delay: 3s;
 -moz-animation-delay: 3s;
 -o-animation-delay: 3s;
 animation-delay: 3s;
}
.animate.queue4s {
 -webkit-animation-delay: 4s;
 -moz-animation-delay: 4s;
 -o-animation-delay: 4s;
 animation-delay: 4s;
}
/* Fade In Down */
@-webkit-keyframes fadeInDown {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 }
}
@-moz-keyframes fadeInDown {
 0% {
 opacity: 0;
 -moz-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -moz-transform: translateY(0);
 }
}
@-o-keyframes fadeInDown {
 0% {
 opacity: 0;
 -o-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -o-transform: translateY(0);
 }
}
@keyframes fadeInDown {
 0% {
 opacity: 0;
 transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 transform: translateY(0);
 }
}
.fadeInDown {
 -webkit-animation-name: fadeInDown;
 -moz-animation-name: fadeInDown;
 -o-animation-name: fadeInDown;
 animation-name: fadeInDown;
}
/* Fade In Down */
/* Social 1 Animation */
#social1 {position:relative;}
#social1 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social1:hover img{
margin-top:-62px;
}
#social1 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 2 Animation */
#social2 {position:relative;}
#social2 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social2:hover img{
margin-top:-62px;
}
#social2 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 3 Animation */
#social3 {position:relative;}
#social3 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social3:hover img{
margin-top:-62px;
}
#social3 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 4 Animation */
#social4 {position:relative;}
#social4 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social4:hover img{
margin-top:-62px;
}
#social4 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 5 Animation */
#social5 {position:relative;}
#social5 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social5:hover img{
margin-top:-62px;
}
#social5 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}    

الخطوة الثانية والأخيرة

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

<!-- http://mdwanblog.blogspot.com/ !-->
 <div>
 <!-- Dribbble !-->
 <a href="http://dribbble.com/إسم الحساب" target="_blank">
 <div id="social1"> <img src="http://i.imgur.com/64r2jAv.png" /> </div>
 </a>
 <!-- Dribbble !-->
 <!-- Behance !-->
 <a href="http://behance.com/ إسم الحساب " target="_blank">
 <div id="social2"> <img src="http://i.imgur.com/fkuhUov.png" /> </div>
 </a>
 <!-- Behance !-->
 <!-- Facebook !-->
 <a href="http://facebook.com/ إسم الحساب " target="_blank">
 <div id="social3"> <img src="http://i.imgur.com/PY2EPRW.png" /> </div>
 </a>
 <!-- Facebook !-->
 <!-- Twitter !-->
 <a href="http://twitter.com/إسم الحساب" target="_blank">
 <div id="social4"> <img src="http://i.imgur.com/ny0pyqt.png" /> </div>
 </a>
 <!-- Twitter !-->
 <!-- Intagram !-->
 <a href="http://instagram.com/ إسم الحساب " target="_blank">
 <div id="social5"> <img src="http://i.imgur.com/tZZG2zQ.png" /> </div>
 </a>
 <!-- Instagram !-->
 </div>
<!-- http://mdwanblog.blogspot.com/ !-->

مع تغيير اللون الأحمر بروابط حساباتك

اقرء المزيد

إضافة يمكنك عمل مركز رفع صور بسيط

بسم الله الرحمن الرحيم

هذة إضافة بسيطة وهى عبارة عن مركز رفع صور فى مدونتك بسيط 

لتسهيل رفع الصور عليك وعلى الزوار الكرام الإضافة 

ليست من تصميمى أو معدل أى شئ بها أنا كنت أتصفح بعض المواقع 

 ووجدتها فحبيت إنى أشارككم بها أتمنى إنها تعجبكم وأى إستفسار

لا تترددو إخوانى فـ أنا فى الخدمة دائما إن شاء الله .

الكود لا يحتاج لتعديل فقط أضف أداة جديدة ثم ضع فيها هذا الكود 

 

تأكد من نسخ الأكواد التى بداخل الأطار كاملة

<table style="text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="1" cellspacing="1" width="70%"><tbody><tr><td style="text-align: center;"><center><div id="form_upload">
            <form action="http://www.servimg.com/fa_upload.php" enctype="multipart/form-data" method="post" name="upload">
                <p class="champ" style="text-align: center;">
                    <input onclick="switchuploadaddress(true);" checked name="uploadtype" style="border: 0pt none;" type="radio" /><label>اختيار صورة</label><span id="upfile"><input name="pic_file" size="25" style="width: 220px;" type="file" /></span></p>
                <p style="text-align: center;">
                    <span id="upurl" style="display: none;"><input name="pic_url" size="35" style="width: 200px; direction: ltr;" type="text" /></span><input name="cat_id" value="0" type="hidden" /><input name="email" value="goboy1000@gmail.com" type="hidden" /><input name="password" value="aa5c0a95aa1045a565c96df47c9f66" type="hidden" />"إن الله بما تعملون بصير"</p>
                <p class="submit_button" style="text-align: center;">
                    <input name="submit" value="تحميل / رفع" type="submit" /></p>
            </form>
        </div><center>
</center></center></td></tr></tbody></table>

المصدر|منتديات معهد خبراء بلوجر 

كاتب التدوينة الأصلى| أخى chhibo

 

اقرء المزيد

لوحة الأشتراك فى القائمة البريدية بشكل لطيف ولن تجدة إلا هنا فقط

بسم الله الرحمن الرحيم 

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

لهذة اللوحة وهى تضم فيس بوك،تويتر،rss، ايضاً القائمة البريدية شكل لطيف

ورائع وإحترافى لن تجدة إلى فى مدونة مدون فقط .

لوحة تحكم الرئيسية لبلوجر - التخطيط - إضافة أداة جافاسكريبت

<html>
<head>

<style>

</style>
</head>
<body>

<!--تم تطوير الإضافة بواسطة مدونة مدون-->
<!--http://mdwanblog.blogspot.com/-->
<div class="widget-content">
<div class="lefts">
    <h1><strong>تابعنا ليصلك كل ما هو <b>جديد</b><b></strong></h1>
    <div class="social">
    <a rel="nofollow" target="_blank" href="1111"><img src="http://img829.imageshack.us/img829/9886/rssiconrw.png"></a>

    <a rel="nofollow" target="_blank" href="2222"><img src="http://img221.imageshack.us/img221/8408/twittericonf.png"></a>

    <a rel="nofollow" target="_blank" href="3333"><img src="http://img16.imageshack.us/img16/8030/facebookicona.png"></a>

    </div>

    <div class="ins">
        <center>
        <div id="sleek-subscribe">
        <form action="4444" method="post" rel="nofollow" target="_new">
    
        <input class="txt2" name="email" onblur="if (this.value == '') {this.value = 'ضع اميلك هنا ليصلك كل جديد';}" onfocus="if (this.value == 'ضع اميلك هنا ليصلك كل جديد') {this.value = '';}" value="ضع اميلك هنا ليصلك كل جديد">
    
        <input class="btn2" type="submit" value=" ">
        </form>
        </div>
        </center>
    </div>

</div>
<!--تم تطوير الإضافة بواسطة مدونة مدون-->
<!--http://mdwanblog.blogspot.com/-->
<style>
.lefts{
width:300px;
height:182px;
background:url(http://img266.imageshack.us/img266/3515/leftyb.png);
}

.lefts h1{
color:#000000;
margin:0;
text-align:center;
font:17px  'DroidKufi-Bold';
padding:10px;
padding-top:20px;
}

.lefts b{
font:18px Arial, Helvetica, sans-serif;
color:green;
}

.lefts .social{
margin-right:50px;

}


.lefts .social a img{
float:right;
margin-right:10px;
margin-top:8px;

}



.lefts .ins{
width:300px;
height:40px;
float:right;
margin-top:1px;
}

.lefts .ins .txt2{
border:1px solid #e1e1e1;
background:#fff;
border-radius:5px;
font:12px Tahoma, Geneva, sans-serif;
color:red;
padding:6px 7px 7px 7px;
margin:0px;
float:right;
margin:0 20px 0 5px;
text-align:right;
    width: 175px;
}


.lefts .ins .btn2{
background:url(http://img217.imageshack.us/img217/870/subo.png);
float:right;
border:none;
width:64px;
height:28px;
cursor:pointer;
}




</style>
</div>
</body>

</html>

الآن ناتى إلى التغيرات الواجب تغيرها لتناسبك

1. اللون      غيرة برابط التغذية 
2. اللون      يمثل رابط صفحتك على تويتر
3. اللون      يمثل رابط صفحتك على فيس بوك
4. اللون      يمثل الإشتراك فى قائمتك البريدية

تنبية| رجاء رجاء رجاء عدم حزف الحقوق من الكود

اقرء المزيد

قائمة فى قمة الإحترافية بالوان رائعه css

أهلا بكم إخوانى اليوم هو كود لإضافة قائمة روعة واحترافية لمدونتك طريقة التركيب

سهلة جدا القائمة الوانها داكنة تصميمها فى غاية البساطة والروعه لن تجدها إلى على

مدونتك مدونة مدون فقط والآن أسيبكم مع شرح تركيب القائمة .

أو خطوة هى - إذهب إلى لوحة التحكم الرئيسية - قم تحرير html

إبحث عن هذا الوسم

<style>

وضع أسفلة هذا الكود

#cssmenu{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px; } #cssmenu > ul {list-style:inside none; padding:0; margin:0;} #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:right; display:block; position:relative;} #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } #cssmenu > ul > li.has-sub:hover > a:before{top:19px;} #cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } #cssmenu ul li > ul{width:200px;} #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); } #cssmenu{border-color:#000;} #cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;} #cssmenu > ul > li > a:after{border-color:#444;} #cssmenu > ul > li > a:hover{background:#111;}

الخطوة الثانية والأخيرة إختار اضافة اداة جافاسكريبت ويمكن وضعها فى أى مكان بمدونتك

وضع الكود التالى

<!--تم برمجة الكود بواسطة مدونة مدون--> <div id='cssmenu'> <ul> <li class='active'><a href='index.html'><span>الرئيسية</span></a></li> <li class='has-sub'><a href='#'><span>مدونة مدون</span></a> <ul> <li><a href='#'><span>قوالب بلوجر</span></a></li> <li class='last'><a href='#'><span>اضافات بلوجر</span></a></li> </ul> </li> <li><a href='#'><span>عن المدون</span></a></li> <li class='last'><a href='#'><span>فوتوشوب</span></a></li> </ul>

التغييرات

1. مكان اللون     قم بوضع الرابط الخاص بك
2. مكان اللون     قم بتغيير إسم القوائم كما يناسبك

يمكنك أيضا زيادة هذا العدد وهو تكرار هذا الكود عند الحاجة

<li class='last'><a href='#'><span>فوتوشوب</span></a></li>

قم بنسخة وضع قبل هذا الوسم </ul>

 

 

أتمنى إنى أكود قد أفدتكم

اقرء المزيد

طريقة إستخدام الألوان والخلفيات بالـ css شرح مفصل

تعلم معنا فى هذة التدوينة عن طريقة تفعيل خاصية الـ color فى موقعك أو قالبك وطريقة 

إستخدامها بالـ css

لون المقدمة: خاصية 'color'

خاصية color تصف لون عنصر HTML.

فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم <h1>، المثال أدناه سيقوم بتوضيح كيفية تحويل كل <h1> إلى اللون الأحمر:

 
 h1 {
  color: #ff0000;
 } 
 

الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255,0,0)).

خاصية 'background-color'

خاصية background-color تحدد لون خلفية أي عنصر.

العنصر <body> يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر <body>.

يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري <body> و <h1>.

 
 body {
  background-color: #FFCC66;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 } 
 

لاحظ أننا قمنا بتفعيل خاصيتين للعنصر <h1> وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة.

الصورة كخلفية "background-image"

خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر.

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

لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر <body> وحدد مسار الصورة:

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 } 
 

انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif")، هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام url("../images/butterfly.gif") أو حتى العنوان الكامل للملف: url("http://www.do-by.blogspot.com.net/butterfly.gif").

تكرار صورة الخلفية "background-repeat"

هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟ الخاصية background-repeat تتحكم بتكرار الصورة.

في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية background-repeat.

القيمة	الوصف
Background-repeat: repeat-x	الصورة ستتكرر أفقياً
background-repeat: repeat-y	الصورة ستتكرر عمودياً
background-repeat: repeat	الصورة ستتكرر أفقياً وعمودياً
background-repeat: no-repeat	لن تتكرر بأي شكل

مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل::

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 
 

تثبيت صورة الخلفية "background-attachment"

الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.

الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها.

في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصية background-attachment، شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة.

القيمة	الوصف
Background-attachment: scroll	الصورة ستتحرك مع الصفحة
Background-attachment: fixed	الصورة ستبقى ثابتة

المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية:

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 
 

مكان صورة الخلفية "background-position"

تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة.

هناك طرق مختلفة لتحديد قيمة background-position، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح.

هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.

الجدول أدناه يوضح بالمزيد من الأمثلة

القيمة	الوصف
background-position: 2cm 2cm	هذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشة
background-position: 50% 25%	هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشة
background-position: top right	هذه الصورة وضعت في أعلى يمين الصفحة

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

 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 
 

جمع كل الخصائص "background"

الخاصية background هي اختصار لكل خصائص خلفية العناصر التي قرأتها في هذا الدرس.

باستخدام background يمكنك جمع عدة خصائص وبالتالي تقليل عدد الأسطر التي تكتبها في ملف التصميم وهذا يجعل الملف أسهل للقراءة.

فمثلاً يمكن اختصار هذه الأسطر:

 
 background-color: #FFCC66;
 background-image: url("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
 
 

باستخدام background يمكن تحقيق نفس النتيجة باستخدام سطر واحد فقط:

 
 background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
 
 

القائمة ترتب بهذا الشكل - من اليسار إلى اليمين:

background-color | background-image | background-repeat | background-attachment | background-position

إذا لم تكتب خاصية ما سيقوم المتصفح بوضع القيمة التلقائية لهذه الخاصية، فمثلاً لم نضع الخاصية background-attachment وbackground-position في المثال:

 
 background: #FFCC66 url("butterfly.gif") no-repeat;
 
 

الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll وtop left.

اقرء المزيد