4 0 4
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة الصفحة الرئيسية

الأحد، 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- يمكنك تغيير كل شئ فى الأضافة كما تريد انت بعد التعديل قم حفظ القال مبروط عليك

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


شارك التدوينه
تنبية هام

ليست هناك تعليقات :

إرسال تعليق

شارك بتعليق على

مواقع صديقة سوف تفيدك
brief useful MAX SEO TOOLS ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا
ALL RIGHTS RESERVED, 2016 WDBLOOG , POWERED BY BLOGGER , DESIGN BY WDBLOOG