اضافة سلايدر ذاتي احترافي يتميز بالأناقة والسرعة والخفة بلوجر

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

أول شئ أريد أن أنوه إلى أن السلايدشوا من تصميم سامبلكس ديزاين ومن تعريب مدونة مرغادي تقارب :)

لن أطيل كثيرا فقط نمر إلى الخطوات :
أولا : قم بأخذ نسخة احتياطية من قالب مدونتك :)

ثانيا : إذهب الى لوحة التحكم في مدونتك وادخل الى "القالب" ومن ثم "تحرير html" ومن ثم نقوم بتوسيع القالب ونبحث من خلال ctrl+f عن
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'/>
</b:section>
وضع فوقه /قبله الكود التالي :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label9+"?max-results="+numposts4+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label9+"?max-results="+numposts4+"&orderby=published&alt=json-in-script&callback=showrecentposts4a\"><\/script>");
</script>
</ul>
</div>
</div></b:if>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

ثم ابحث مجددا عن ]]></b:skin> وضع قبلها/فوقها مباشرة الكود الموجود في الاسفل :

/* /Features Slider */
#featured-slider {
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width:610px; /*width of featured content slider*/
height: 250px;
margin-bottom:10px;
}
#featured-slider .contentdiv{ /* do not change the name of class - The size of contentdiv is 495x270 (after excluding padding value) */
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
z-index:1;
width:380px;
background:#222;
}
#featured-slider .contentdiv img {
width:380px;
height:250px;
overflow:hidden;
}

#featured-slider .sliderPostPhoto { /* Wrapper for featured are photo and post title */
position:relative;
height: 250px;
width:380px;
overflow:hidden;
}
#featured-slider .sliderPostInfo { /* Post title and if enabled excerpt wrapper for featured slider */
position:absolute;
top:0;
left:0;
color:#ccc;
padding:20px 5px 10px;
background: url(http://img64.imageshack.us/img64/8492/bgtransparent.png);
font-size: 11px;
height:220px;
width:165px;
}
#featured-slider .sliderPostInfo p { /* Post excerpt style on featured slider */
color:#ccc;
font-size:12px;
padding-top:15px;
}
#featured-slider .featuredPostMeta { /* Post excerpt style on featured slider */
padding-top:15px;
}
#featured-slider .featuredPostMeta a { /* Post excerpt style on featured slider */
color:#ccc;
text-decoration:underline;
}
#featured-slider .featuredPostMeta a :hover{ /* Post excerpt style on featured slider */
text-decoration:none;
}
/* post titles by small thumbs on featured slider */
span.fea_thumb_title{
font-size:11px;
font-family:tahoma, verdana, sans-serif;
color:#ccc;
line-height:0.9em;
}
span.fea_thumb_title a{
color:#ccc;
}
span.fea_thumb_title a:hover{
color:#ccc;
}
#paginate-featured-slider { /* do not change the name of class - used to wrap thumbnails for featured area */
position: absolute; /*leave as is*/
right: 0; /*leave as is*/
top: 0; /*leave as is*/
z-index:1;
width:230px;
height:250px;
overflow:hidden;
background:#222;
}
#paginate-featured-slider ul {
width:505px;
padding-bottom:0;
list-style: none;
}
#paginate-featured-slider ul li {
display: block;
width:230px;
}
#paginate-featured-slider ul li a {
padding:7px 10px 5px 7px;
background:#52575C;
height:37px;
display:block;
border-bottom:1px solid #666;
overflow:hidden;
}
#paginate-featured-slider ul li a.last {
border-bottom:none !important;
}
#paginate-featured-slider ul li a:hover {
background:#444;
}
#paginate-featured-slider ul li a.selected {
background:#444;
}
#paginate-featured-slider .featured_thumb {
float:left;
margin-right:5px;
width:60px;
height:34px;
}

واخيرا ابحث عن </head> وضع قبله مباشرة الكود الموجود بالاسفل :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

سيو رفع زوار

اضافة سلايدر ذاتي احترافي يتميز بالأناقة والسرعة والخفة بلوجر

طريقة اضافة اكواد داخل اطار جميل على بلوجر

اضافة سلايدر ذاتي احترافي يتميز بالأناقة والسرعة والخفة بلوجر

إضافة كود جميل لشريط أخر مواضيعك بلوجر

إضافة أداة مواضيع ذات صلة (بشكل نصي) لتقوية الروابط الداخلية على بلوحر

اضافة زر اعجاب تحت مواضيع بلوجر

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

إرسال تعليق

افضل اسبوع

Movie Category 1

ٌإشترك في قناتي يويتيوب

تابعنا على فيس بوك

المشاركات الشائعة

عن الموقع

تغريدات

إتصل بنا