الأحد، 27 سبتمبر 2015

اضافة قائمة أفقية احترافية جديدة الى البلوجر 2015

سرفر VPS مقابل 0.01 دولار
اضافة قائمة أفقية احترافية جديدة الى البلوجر 2015
السلام عليكم ، مرحبا بكم في هذا الدرس الحصري و الذي سأقدم لكم فيه قائمة افقية إحترافية و جديدة لمدونات البلوجر .هذه القائمة غاية في الروعة بحيث تعمل عن طريق الضغط على القائمة فيتم ظهور القوائمو الخاصة بي المدونة و في حالة ما انتهى من البحث يمكن للزائر اخفائ هذه القائمة بالضغط فقط على عز الزر إخفاء ، كما قلت سابقا قائمة احترافية و متناسقة الألوان و أيضا المظهر و الشكل و سريعة العمل و الإضافة ، تابع الشرح التالي ...
طريقة اضافة القائمة الى البلوجر 
1 . نتوجه الى المدونة ، قالب ، تحرير HTML 
2. نبحث عن الوسم 
</head>
3. ثم نضيف الكود التالي فوقه
<style>
* {
  -webkit-transition-timing-function: ease-out;
  /* Safari and Chrome */
  transition-timing-function: ease-out;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.toggleNav {
  border-bottom: 5px solid #15e1af;
  background-color: #54EFC9;
  width: 100%;
  height: 80px;
  text-align: center;
  line-height: 80px;
  cursor: pointer;
  color: white;
  font-size: 30px;
text-decoration: none;
}
.toggleNav:hover { border-bottom: 5px solid #13ca9d; }
nav {
  width: 100%;
  min-height: 50px;
}
.toggleNavButton {
  transition-duration: 0.5s;
  width: 40px;
  height: 2px;
  background-color: white;
  position: absolute;
  right: 50%;
  top: 25px;
  margin-right: -20px;
  border-radius: 2px;
}
.toggleNavButton:before,
.toggleNavButton:after {
  border-radius: 2px;
  transition-duration: 0.5s;
  content: "";
  position: absolute;
  top: 10px;
  right: 0;
  background-color: white;
  width: 40px;
  height: 2px;
}
.toggleNavButton:after { top: 20px; }
.toggleNavButton.active { width: 0; }
.toggleNavButton.active:after {
  top: 10px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.toggleNavButton.active:before {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#subnav {
  width: 100%;
  border-bottom: 0px solid #e60b3e;
  background-color: #F64870;
  transition-duration: 0.2s;
  overflow: hidden;
  height: 0px;
}
#subnav.active {
  border-bottom: 5px solid #e60b3e;
  height: 50px;
}
#subnav ul {
  width: 615px;
  margin: 0 auto;
}
#subnav ul li {
  transition-duration: 0.3s;
  display: inline-block;
  text-align: center;
  width: 120px;
  padding: 10px 0;
  height: 50px;
}
#subnav ul li a { color: white;text-decoration: none; font: 13px oswald,ges;}
#subnav ul li:hover { background-color: #e60b3e; }
</style>
4. نبحث عن الكود 
</body>
5. ثم نضيف الكود التالي فوقه مباشرة
<script>
$(".toggleNav").click(function () {
    $("#subnav").toggleClass("active");
    $(".toggleNavButton").toggleClass("active");
 });
</script>
6. و اخيرا كود الخاص بالقائمة أضفه في المكان الذي تريده و يستحسن اضافته أسفل الوسم <body>
<nav>
  <div class="toggleNav">
    <div class="toggleNavButton"></div>
  </div>
  <div id="subnav">
    <ul>
      <li> <a href="#">الرئيسية</a> </li>
      <li> <a href="#">القائمة 1</a> </li>
      <li> <a href="#">القائمة 2</a> </li>
      <li> <a href="#">القائمة 3</a> </li>
      <li> <a href="#">القائمة 4</a> </li>
      <li> <a href="#">القائمة 1</a> </li>
      <li> <a href="#">القائمة 1</a> </li>
    </ul>
  </div>
</nav>
7. ثم حفظ . لأي استفسار ضعه في التعليق .

http://www.hukmaty.info/2014/08/2015.html

إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد. هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة, ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميلً