قالب بلوجر مدفوع إحترافي بتقنية CSS3

السلام عليكم ورحمة الله وبركاته 

اليوم سوف أتطرق إلى قالب في قمة الأحترافية والروعة القالب مدفوع أحترافي 

- ميزات القالب :

1- القالب متجاوب ، متوافق مع جميع المتصفحات ، وصديق لمحركات البحث .

2- القالب ذو اللون الأبيض والأسود .

3- القالب يتكون من ثلاثة أعمدة ,

4- القالب يحتوي على قائمة أحترافية في أعلى الهيدر + المواقع الأجتماعية + التوقيت .

5- وأيضاً يحتوي على قائمة تحت الهيدر أحترافية منسدلة .

6- القالب يحتوي على شريط  آخر الأخبار بأحترافية .

7- القالب يحتوي على سلايد شو تلقائي يعرض مواضيع المدونة تلقائياً .

8- وأيضاً يحتوي على أقرأ المزيد وترقيم الصفحات بأحترافية أيضاً .

القالب يحتوي على ميزات كثيرة أكتشفها بنفسك .

- التعديلات :

1- طريقة تركيب سلايد شو : 

1- أدخل إلى مدونتك | ثم أختر تخطيط | ثم إضافة أداة : HTML/JavaScript

2- اللصق الكود التالي في صندوق الأداة ثم إحفظ .

<style scoped="" type="text/css">
.ei-slider{position:relative;width:100%;max-width:1000px;height:250px;margin:0 auto 35px;padding:0;background-color:white}
.ei-slider-loading{width:100%;height:100%;z-index:997;position:absolute;top:0;left:0;background-color:white;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi011vT0SJDApDslHsCQTdNYjPsn-iHUlylfpHe6z-MTBn1vLL7K9b4xUyPeuhKdu90oOz6uJuSjc4IniPySvYs-uTsniizXNQIQeJmPq04dT6BP0jlpTAzvdjCuxUtEYsIPg5xIiqjPA4/s1600/loading.gif);background-position:50% 50%;background-repeat:no-repeat}
.ei-slider-large{height:100%;position:relative;overflow:hidden;margin:0 0 10px;padding:0;border:5px solid #14dbca;border-radius:2px}
.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;list-style:none}
.ei-slider-large li img{width:100%;border:0;padding:0}
.ei-title{position:absolute;right:8%;left:8%;bottom:20%;color:#fff;opacity:0.8}
.ei-title p{text-align:left}
.ei-title h2{font-family:Georgia,Times,"Times New Roman";text-align:right;margin-left:auto;font-size:18px;line-height:20px;color:#b5b5b5;max-width:80%;text-transform:capitalize;background:#000;padding:5px}
.ei-title h2 a{color:white}
.ei-title h2 a:hover{text-decoration:none;color:#14dbca}
.ei-title p{font-family:Verdana,Geneva,sans-serif;margin-left:auto;font-size:11px;line-height:15px;width:85%;clear:both;background:#000;padding:5px 10px;position:relative;left:-5%}
.ei-slider-thumbs{padding:0 0;height:13px;margin:0 auto;width:100%;position:relative}
.ei-slider-thumbs li{position:relative;float:left;height:100%;width:20%;list-style:none}
.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#14dbca}
.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease}
.ei-slider-thumbs li a:hover{background-color:#f0f0f0}
.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;padding:0;background-color:white;border-radius:2px 2px 0 0;border:0;max-width:100%;height:60px;max-height:70px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0 -webkit-gradient( linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}
@media only screen and (max-width:479px){
  .ei-slider{height:200px}
  .ei-title{bottom:5%}
  .ei-title h2{font-size:14px;line-height:17px}
}
</style>
<br />
<div id="autoelastic">
</div>
<script src="http://trollvlhcv.googlecode.com/svn/trunk/demo/autoelastic.min.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
AutoElasticSlideshow({
blogURL:"http://www.homeblog7.blogspot.com",
MaxPost:5,
idcontaint:"#autoelastic",
ImageSize:400,
Summary:100,
animation:'center',
speed:800,
easing:'',
titlesFactor:0.60,
titlespeed:800,
titleeasing:'',
thumbMaxWidth:150,
Interval:3000,
autoplay:true,
pBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif',
tagName:false
});
});//]]>
</script>

- عدّل ماهو بالأحمر برابط مدونتك .

2- طريق تركيب أقسام المدونة بالتسمية :

1- أدخل إلى مدونتك | ثم أختر تخطيط | ثم إضافة أداة : HTML/JavaScript

2- اللصق الكود التالي في صندوق الأداة ثم إحفظ .

- الكود الأول : 

<div id="musicpost"></div>
<script type='text/javascript'>
jQuery("#musicpost").RecentPostbyTag({
postType:"v",
MaxPost:4,
tagName:"قوالب بلوجر"
});
</script>

- الكود الثالني :

<div id="sportpost"></div>
<script type='text/javascript'>
jQuery("#sportpost").RecentPostbyTag({
postType:"h",
MaxPost:4,
tagName:"إضافات بلوجر"
});
</script>

3- طريقة تركيب آخر التعليقات :

1- أدخل إلى مدونتك | ثم أختر تخطيط | ثم إضافة أداة : HTML/JavaScript

2- اللصق الكود التالي في صندوق الأداة ثم إحفظ .

<div id="rcentcomnets"></div>
<script type='text/javascript'>
jQuery("#rcentcomnets").RecentComments();
</script>

4- طريقة تركيب أحدث المشاركات منزلقة :

1- أدخل إلى مدونتك | ثم أختر تخطيط | ثم إضافة أداة : HTML/JavaScript

2- اللصق الكود التالي في صندوق الأداة ثم إحفظ .

<style scoped="scoped">
.spy-outer {
  border:2px solid Black;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  margin:0 auto;
}
.spy-outer h2 {
  margin:0;
  padding:5px 10px;
  background-color:#121312;
  background-image:-webkit-linear-gradient(#292a29,#414241);
  background-image:-moz-linear-gradient(#292a29,#414241);
  background-image:-ms-linear-gradient(#292a29,#414241);
  background-image:-o-linear-gradient(#292a29,#414241);
  background-image:linear-gradient(#292a29,#414241);
  color:white;
  font:normal bold 12px/normal Helmet,Freesans,Sans-Serif;
  text-transform:none;
  text-shadow:0 1px 2px black;
}
.spy {
  margin:0;
  padding:0;
  font:normal normal 10px/12px Helmet,Freesans,Sans-Serif;
  color:#333;
  overflow:hidden;
}
.spy li {
  list-style:none;
  text-align:left;
  margin:0;
  padding:5px 7px;
  background-color:#595959;
  background-image:-webkit-linear-gradient(#090908,#171714);
  background-image:-moz-linear-gradient(#090908,#171714);
  background-image:-ms-linear-gradient(#090908,#171714);
  background-image:-o-linear-gradient(#090908,#171714);
  background-image:linear-gradient(#090908,#171714);
  border-top:1px solid #A7D101;
  border-bottom:1px solid #090908;
  word-wrap:break-word;
  overflow:hidden;
}
.spy a {text-decoration:none}
.spy li em {
  font-weight:bold;
  color:#e6e6e6;
}
.spy-header {
  font:normal bold 12px/14px "Trebuchet MS",Trebuchet,Geneva,Verdana,Arial,Sans-Serif;
  display:block;
  color:yellow;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  /*
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  */
}
.spy-header:hover {
  color:Black;
  text-decoration:underline;
}
.spy-summary {
  margin-top:5px;
  overflow:hidden;
}
.spy li .image-wrapper,
.spy li img {
  float:right;
  margin:0 0 2px 7px;
  padding:0;
  width:72px;
  height:72px;
  border:4px solid #212120;
  background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2iTGEh8lOc_kRVGtAckhoVAiWyHvKnVtE5Q2NaySfhPXnDj4Gu4YoVWjzfhCTdIf3ezSYHRSvb1JFzyxWb5C96JVJwJh2PWhu_HbepN3eC9tyvJuJZ63owNTTXswalgSBrO1EBhu_XQe8/s1600/loading.gif') no-repeat 50% 50%;
}
.spy li .image-wrapper {
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.7);
  box-shadow:0 0 2px rgba(0,0,0,.7);
}
.spy li img {
  border:none !important;
  float:none;
  margin:0;
  padding:0;
  display:none;
}
.spy-outer .loading {
  display:block;
  padding:10px;
  background-color:#cdcdcd;
}
</style>
<div id="spy-outer" class="spy-outer"><span class="loading">Memuat...</span></div>
<script>
var spy_config = {
    widgetTitle: '<h2>أحدث المشاركات</h2>',
    url:'http://'+window.location.hostname,
    containerId: 'spy-outer',
    numPost: 5,
    numChars: 100,
    monthNames: [
        'Januari',
        'Februari',
        'Maret',
        'April',
        'Mei',
        'Juni',
        'Juli',
        'Agustus',
        'September',
        'Oktober',
        'November',
        'Desember'
    ],
    noImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTjXStSBP54vF3wt976-PQWF_frpbAm9tjR-38V0wGiZ4gWGLeKym-flYmp1Z2N9jdAllk4loZy9MuF6Wmh9n4gsN5ZuUW2ExjoY05JxmnFzyWQ0XEnBp-jFRRESqqMMRYbv3q5jH6hH9e/s1600/noimage.png',
    showSummaries: true,
    showThumbnails: true,
    showPostDate: true,
    showComments: true,
    newTabLink: false,
    animatedRecentPost: true,
    jsonCallback: 'recentpost_spy',
    newsTicker: {
        visible: 4,
        interval: 3000,
        speed: 600
    }
};
</script>
<script src="https://googledrive.com/host/0Bz_65BAr9KCZbUpFSU12WGR5RGM"></script>

للمشاهدة

للتحميل

تنويه : أحبائي وأعزائي : تحية طيبة وبعد ، أنتم تعلمون كم يبذل كاتب التدوينة من جهد وعصف ذهني كي يخرجها إلى حيز الوجود أرجو من شخصكم الكريم عند النقل ذكر المصدر .

كتب بواسطة Expert Blogger

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