اضافة قائمة احترافية لمدونات بلوجر - عالم المدون

الأحد، 24 يوليو، 2016

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




اضافة اليوم هى اضافة جميله ورائع لمدونات بلوجرهى اضافة  قائمة احترافية لمدونات بلوجر اضافة يوجد بها 8 اقسام يمكنك تخصيصهم كما تريد بالشكل الذى تريدها ويمكنك وضع الاضافة فى المكان الذى تريده اسفل الهيدر او فوق الفوتر كما تحب انت والإضافاة تعمل بتاثيرات احترافية ويمكنك معاينة الإضافاة من الرابط التالى.

معاينة



شرح التركيب


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

.category-tile {
  position: relative;
  height: 0;
  width: 12.5%;
  float: left;
  padding: 0 0 12.5% 0;
}
.category-tile-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  padding: 0 5px 5px 0;
}
.category-tile .tile-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}
.category-tile .tile-layer {
  position: relative;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: #000;
  opacity: .73;
  transition: background .2s ease, opacity .2s ease;
}
.category-tile .tile-hover {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 5px;
  opacity: 0;
  transition: opacity .2s ease;
  color: #FFF;
  font-size: 32px;
}
[class^="theme-icon-"]:before, [class*=" theme-icon-"]:before {
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  /* font-size: 120%; */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.category-tile .tile-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  margin-top: -42px;
  margin-left: -34px;
  z-index: 4;
  text-align: center;
}
.category-icon-2-64.white {
  background: url(https://1.bp.blogspot.com/-MML3FcduaGk/V5IUBzB6gnI/AAAAAAAAAqI/ntNdoAOmECQm7ezpRaJeBZve_dl60Z5tgCLcB/s1600/gear-64x64.png) no-repeat 0px 0px;
  background-size: 64px 64px!important;
  width: 64px;
  height: 64px;
  float: left;margin-bottom: 5px;
}
.category-tile .tile-name {
  position: relative;
  color: #FFF;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 15px;
  transition: top .3s ease;
  top: 0;width: 100px;
margin-right: -20px;
}
.category-tile {
  position: relative;
  height: 0;
  width: 12.5%;
  float: left;
  padding: 0 0 12.5% 0;
}
.category-tile-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  padding: 0 5px 5px 0;
}
.category-tile .tile-image {
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background-size: cover;
  background-position: center 20%;
}
.category-tile .tile-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}
.category-tile .tile-layer {
  position: relative;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: #000;
  opacity: .73;
  transition: background .2s ease, opacity .2s ease;
}
.category-tile .tile-hover {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 5px;
  opacity: 0;
  transition: opacity .2s ease;
  color: #FFF;
  font-size: 32px;
}
.category-icon-3-64.white {
  background: url(http://www.industrialthemes.com/engine/wp-content/uploads/2014/11/gaming-white-64x64.png) no-repeat 0px 0px;
  background-size: 64px 64px!important;
  width: 64px;
  height: 64px;
  float: left;margin-bottom: 5px;
}
.category-tile .tile-name {
  position: relative;
  color: #FFF;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 15px;
  transition: top .3s ease;
  top: 0;
}
.theme-icon-forward:before {
  content: '\27a6';
}
.category-icon-4-64.white {
  background: url(http://www.industrialthemes.com/engine/wp-content/uploads/2014/11/reviews-white-64x64.png) no-repeat 0px 0px;
  background-size: 64px 64px!important;
  width: 64px;
  height: 64px;
  float: left;margin-bottom: 5px;
}
.category-icon-10-64.white {
  background: url(http://www.industrialthemes.com/engine/wp-content/uploads/2014/11/tech-white-64x64.png) no-repeat 0px 0px;
  background-size: 64px 64px!important;
  width: 64px;
  height: 64px;
  float: left;margin-bottom: 5px;
}

.category-icon-7-64.white {
  background: url(http://www.industrialthemes.com/engine/wp-content/uploads/2014/11/playstation-white-64x64.png) no-repeat 0px 0px;
  background-size: 64px 64px!important;
  width: 64px;
  height: 64px;
  float: left;margin-bottom: 5px;
}
.category-icon-22-64.white {
  background: url(http://www.industrialthemes.com/engine/wp-content/uploads/2014/11/wii-white-64x64.png) no-repeat 0px 0px;
  background-size: 64px 64px!important;
  width: 64px;
  height: 64px;
  float: left;margin-bottom: 5px;
}
.category-icon-5-64.white {
  background: url(http://www.industrialthemes.com/engine/wp-content/uploads/2014/11/galaxy-white-64x64.png) no-repeat 0px 0px;
  background-size: 64px 64px!important;
  width: 64px;
  height: 64px;
  float: left;margin-bottom: 5px;
}
.category-icon-9-64.white {
  background: url(http://www.industrialthemes.com/engine/wp-content/uploads/2014/11/tablet-white-64x64.png) no-repeat 0px 0px;
  background-size: 64px 64px!important;
  width: 64px;
  height: 64px;
  float: left;margin-bottom: 5px;
}
.category-tile .tile-link:hover {
background: rgba(228, 27, 23, 0.28);
color: #fff;
width: 97%;
height: 97%;
}
.category-tile.active .tile-hover {
  opacity: 1;
}
.category-tile .tile-hover {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 5px;
  opacity: 0;
  transition: opacity .2s ease;
  color: #FFF;
  font-size: 32px;
}

2- الان مع الكود الخاص باظهار الأضافة يمكنك وضع كما قلت فى المكان الذى تريده .

<div class='container-fluid no-padding builder-section builder-tiles'>
<div class='row'>
<div class='col-md-12'>
<div class='container-inner content-panel shadowed clearfix'>
<div class='category-tile-wrapper clearfix'>
<div class='category-tile add-active category-2'>
<div class='category-tile-inner'>
<div class='tile-image' style='background-image:url(http://i0.wp.com/www.oi-web1.pro/wp-content/uploads/2016/07/500-1.jpg?resize=225%2C211);'>
</div>
<a class='tile-link' href='#'>
</a>
<div class='tile-layer'>
</div>
<div class='tile-hover'>
<span class='theme-icon-forward'>
</span>
</div>
<div class='tile-icon'>
<span class='category-icon category-icon-2-64 white'>
</span>
<div class='tile-name'>اضافات بلوجر</div>
</div>
</div>
</div>
<div class='category-tile add-active category-3'>
<div class='category-tile-inner'>
<div class='tile-image' style='background-image:url(http://i2.wp.com/www.oi-web1.pro/wp-content/uploads/2016/06/Capture.png?resize=225%2C211);'>
</div>
<a class='tile-link' href='#'>
</a>
<div class='tile-layer'>
</div>
<div class='tile-hover'>
<span class='theme-icon-forward'>
</span>
</div>
<div class='tile-icon'>
<span class='category-icon category-icon-3-64 white'>
</span>
<div class='tile-name'>قوالب بلوجر</div>
</div>
</div>
</div>
<div class='category-tile add-active category-4'>
<div class='category-tile-inner'>
<div class='tile-image' style='background-image:url(http://i0.wp.com/www.oi-web1.pro/wp-content/uploads/2016/06/google-search-page-1.jpeg?resize=225%2C211);'>
</div>
<a class='tile-link' href='#'>
</a>
<div class='tile-layer'>
</div>
<div class='tile-hover'>
<span class='theme-icon-forward'>
</span>
</div>
<div class='tile-icon'>
<span class='category-icon category-icon-4-64 white'>
</span>
<div class='tile-name'>شروحات</div>
</div>
</div>
</div>
<div class='category-tile add-active category-10'>
<div class='category-tile-inner'>
<div class='tile-image' style='background-image:url(http://i2.wp.com/www.oi-web1.pro/wp-content/uploads/2016/06/google-search-page.jpeg?resize=225%2C211);'>
</div>
<a class='tile-link' href='#'>
</a>
<div class='tile-layer'>
</div>
<div class='tile-hover'>
<span class='theme-icon-forward'>
</span>
</div>
<div class='tile-icon'>
<span class='category-icon category-icon-10-64 white'>
</span>
<div class='tile-name'>الربح من الانترنت</div>
</div>
</div>
</div>
<div class='category-tile add-active category-7'>
<div class='category-tile-inner'>
<div class='tile-image' style='background-image:url(http://i2.wp.com/www.oi-web1.pro/wp-content/uploads/2016/06/google-search-page.jpeg?resize=225%2C211);'>
</div>
<a class='tile-link' href='#'>
</a>
<div class='tile-layer'>
</div>
<div class='tile-hover'>
<span class='theme-icon-forward'>
</span>
</div>
<div class='tile-icon'>
<span class='category-icon category-icon-7-64 white'>
</span>
<div class='tile-name'>اخبار الانترنت</div>
</div>
</div>
</div>
<div class='category-tile add-active category-22'>
<div class='category-tile-inner'>
<div class='tile-image' style='background-image:url(http://i0.wp.com/www.oi-web1.pro/wp-content/uploads/2016/07/500-1.jpg?resize=225%2C211);'>
</div>
<a class='tile-link' href='#'>
</a>
<div class='tile-layer'>
</div>
<div class='tile-hover'>
<span class='theme-icon-forward'>
</span>
</div>
<div class='tile-icon'>
<span class='category-icon category-icon-22-64 white'>
</span>
<div class='tile-name'>جوجل</div>
</div>
</div>
</div>
<div class='category-tile add-active category-5'>
<div class='category-tile-inner'>
<div class='tile-image' style='background-image:url(http://i0.wp.com/www.oi-web1.pro/wp-content/uploads/2016/07/500-1.jpg?resize=225%2C211);'>
</div>
<a class='tile-link' href='#'>
</a>
<div class='tile-layer'>
</div>
<div class='tile-hover'>
<span class='theme-icon-forward'>
</span>
</div>
<div class='tile-icon'>
<span class='category-icon category-icon-5-64 white'>
</span>
<div class='tile-name'>حصريات</div>
</div>
</div>
</div>
<div class='category-tile add-active last category-9'>
<div class='category-tile-inner'>
<div class='tile-image' style='background-image:url(http://i2.wp.com/www.oi-web1.pro/wp-content/uploads/2016/06/Colorfull-WP-22.jpg?resize=225%2C211);'>
</div>
<a class='tile-link' href='#'>
</a>
<div class='tile-layer'>
</div>
<div class='tile-hover'>
<span class='theme-icon-forward'>
</span>
</div>
<div class='tile-icon'>
<span class='category-icon category-icon-9-64 white'>
</span><div class='tile-name'>فيس بوك</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

3- يمكنك تغيير كل شئ فى الأضافة كما تريد انت بعد التعديل قم حفظ القال مبروط عليك

وهذا كل شئ فى موضوع اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)


شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

0 تعليق على موضوع : اضافة قائمة احترافية لمدونات بلوجر

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر