‏إظهار الرسائل ذات التسميات مواقع الويب. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات مواقع الويب. إظهار كافة الرسائل

إضافة زر الصعود الى بداية او أعلى الصفحة جميلة وتلقائية

الخميس، 5 سبتمبر 2013 | التعليقات

بسم الله الرحمن الرحيم  

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


مرحبا بكم في مدونة  افتخر 

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

معاينة الاضافة : زر الصعود الى بداية او اعلى الصفحة في اسفل مدونة افتخر

 طريقة التركيب :
1~  اذهب الى تخطيط.
2~ إضافة أداة
3~ اختار 
Html/Javascript

ثم لصق الشفرة التالية
 لتغيير شكل الاضافة يجب تغيير رابط الصورة بالاحمر برابط الشكل الجديد


<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.helperblogger.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBV9Ij7J7kx45izk4XxEpevdNOC8_pfSlDh3FK7Zf6_71e_kO7VLwk8EX2VQuUKN9-9ma1fBDwCAJmT7gyM0OILnJyoo-Jw1yYa6P-8eC4zhr76-lWHtzgm8JNXb8xWxihOIqg_oKyaNI/s1600/eftakhir.blogspot.com.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
   
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>


شفرة تبادل الإعلانات لمدونت بلوجر بتأثيرات Css

الثلاثاء، 3 سبتمبر 2013 | التعليقات

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

ومرحبا بكم في مدونة افتخر .

اليوم باذن الله سأقدم لكم إضافة من اجمل الاضافات لبلوجر .
الاضافة عبارة شفرة او كود التبادل الإعلانات في القائمة الجانبية للمدونة المعروفة ب (السايد بار) بلوجر بتأثيرات Css قبل الصور في غاية الجمال الروعة , كما يمكنك تغيير لون الاضفة لتبادل الإعلانات باللون المناسب لمدونتك او بعدة الوان ,
 ويمكنك ايضا تغيير حجم الصورة المعلنة بما يناسب حجم السايد بار .

تركيبة الشفرة  تبادل الإعلانات الطريقة بسيطة جدا وسهلة وقبل التركيب يجب تغيير  الصورة المعلنة ورابط المدونة  او الوان  المناسب لمدونتك 

  طريقة التركيب :

1~  اذهب الى تخطيط.
2~ إضافة أداة
3~ اختار  Html/Javascript




<!--CSS Hover Effects To 125x125 Advertisement Banners-->
<style>
.Mohamed-Ads ul{
list-style-type:none;
margin: 0px auto;
padding: 10px 0px 10px 0px;
width:300px;
overflow:hidden;
}
.Mohamed-Ads ul li{
list-style-type:none;
margin: 0px 5px 10px 5px;
float:left;
display:inline;
background:orange;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
border-radius:100%;
-webkit-border-radius:100%;
-moz-border-radius:100%;
-o-border-radius:100%;
}
.Mohamed-Ads ul li:hover {
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
-o-border-radius:15%;
-webkit-border-radius:15%;
-moz-border-radius:15%;
border-radius:15%;
}
.Mohamed-Ads ul li:active {
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-o-border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
.Mohamed-Ads ul li a img{
-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);
-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);
box-shadow:0 0 8px rgba(0,0,0,0.5);
padding:3px;
}
</style>
<div class="Mohamed-Ads">
<ul>
<li style="background:#e42b2b !important;">
<a href="http://eftakhir.blogspot.com/" rel="nofollow">
<img height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitp1Io2fjk5J87H1XtL5XSLJX9ENT0kGfH8mfeziOc5tcO_qxAH7EK3wbHCg852tOa9epfgcCm62acmiPbTHKBnnAUtF9fMoqVxAChRzc2ycLzPYvCt_aOIfx3Ti1PbRoeQ6h0bq4N6o/s1600/%D8%AA%D8%A8%D8%A7%D8%AF%D9%84+%D8%A7%D9%84%D8%A5%D8%B9%D9%84%D8%A7%D9%86%D8%A7%D8%AA.png" width="125" />
</a></li>
<li style="background:#FFE500 !important;">
<a href="http://eftakhir.blogspot.com/" rel="nofollow">
<img height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitp1Io2fjk5J87H1XtL5XSLJX9ENT0kGfH8mfeziOc5tcO_qxAH7EK3wbHCg852tOa9epfgcCm62acmiPbTHKBnnAUtF9fMoqVxAChRzc2ycLzPYvCt_aOIfx3Ti1PbRoeQ6h0bq4N6o/s1600/%D8%AA%D8%A8%D8%A7%D8%AF%D9%84+%D8%A7%D9%84%D8%A5%D8%B9%D9%84%D8%A7%D9%86%D8%A7%D8%AA.png" width="125" />
</a></li>
<li style="background:#a800ff !important;">
<a href="http://eftakhir.blogspot.com/" rel="nofollow">
<img height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitp1Io2fjk5J87H1XtL5XSLJX9ENT0kGfH8mfeziOc5tcO_qxAH7EK3wbHCg852tOa9epfgcCm62acmiPbTHKBnnAUtF9fMoqVxAChRzc2ycLzPYvCt_aOIfx3Ti1PbRoeQ6h0bq4N6o/s1600/%D8%AA%D8%A8%D8%A7%D8%AF%D9%84+%D8%A7%D9%84%D8%A5%D8%B9%D9%84%D8%A7%D9%86%D8%A7%D8%AA.png" width="125" />
</a></li>
<li style="background:#41d05f !important;">
<a href="http://eftakhir.blogspot.com/" rel="nofollow">
<img height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitp1Io2fjk5J87H1XtL5XSLJX9ENT0kGfH8mfeziOc5tcO_qxAH7EK3wbHCg852tOa9epfgcCm62acmiPbTHKBnnAUtF9fMoqVxAChRzc2ycLzPYvCt_aOIfx3Ti1PbRoeQ6h0bq4N6o/s1600/%D8%AA%D8%A8%D8%A7%D8%AF%D9%84+%D8%A7%D9%84%D8%A5%D8%B9%D9%84%D8%A7%D9%86%D8%A7%D8%AA.png" width="125" />
</a></li>
</ul>
</div>
<!--CSS Hover Effects To 125x125 Advertisement Banners—>


اللون الاحمر : رابط المعلن
اللون الازرق : رابط صورة المعلن
اللون الاخضر : حجم الصورة
اللون الاسفر : الوان تقنية  تبادل الإعلانات بتأثيرات Css

إضافة الاشتراك عبر البريد الإلكتروني احترافية لمدونات بلوجر

الاثنين، 2 سبتمبر 2013 | التعليقات

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

الاضافة وخفيفة وانيقة للاشتراك عبر البريد الإلكتروني لمدونات بلوجر .

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

 تركيبة الشفرة  الاشتراك عبر البريد الإلكتروني الطريقة بسيطة جدا وسهلة وقبل التركيب يجب تغيير اللون الأحمر بإسم صفحتك 
 
 طريقة التركيب :

1~  اذهب الى تخطيط.
2~ إضافة أداة
3~ اختار  Html/Javascript

<style type='text/css'>#sidebar-subscribe-box {
    background: url() repeat scroll 0 0 transparent;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 3px 0;
}
.sidebar-subscribe-box-wrapper {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0Qwy-kfAzuI03sy9INkwQcmsrhc3aT-AJjyCum5rLDR6sSm4yvgbXPZYqi_869hyphenhyphen8HfP03IgcN962OyQalEbbUkIAFoSP67kpDutavTQe8sNZLBZ6cfjIm_hkLLLTBAGwBAbLMss54s/s1600/Emaileftakhir.jpg) repeat scroll 0 0 #f7f7f7;
    color: #111;
    font-size: 14px;
    line-height: 20px;
    padding: 1px 20px 10px;
    text-align: center;
    text-transform: uppercase;
}
.sidebar-subscribe-box-form {
    clear: both;
    display: block;
    margin: 10px 0;
}
form.sidebar-subscribe-box-form {
    clear: both;
    display: block;
    margin: 10px 0 0;
    width: auto;
}
.sidebar-subscribe-box-email-field {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vRfGr7FUD8ir5ByqCbS-niWz6uEsEdwxiGKjyOBtOQNb8NsPZ-Cx8qw-cwNyOHHtnr8ry2EBYV1nELB6RdmcP1e9WO6UWfCvGvl6OzlTtEtToP2OUWzCbv4-4BeqIjmsb47s9HpZGjM_/s1600/sprites.png) no-repeat 0 -27px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #444;
    margin: 0 0 15px;
    padding: 10px 40px;
    width: 68%;
}
.sidebar-subscribe-box-email-button {
    background: #09f;
    border: 1px solid #007fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;
    color: #fff;
    cursor: pointer;
    font-family: Helvetica;
    font-weight: 700;
    font-size: 20px;
    padding: 5px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.4);
    text-transform: uppercase;
    width: 100%;
}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus {
    background: #1ca4ff;
}
.sidebar-subscribe-box-email-button:active {
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    outline: 0;
}
iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table {
    width: 100%;
}
embed {
    border-radius: 3px;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background: #FFF;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin: 0;
    padding: 4px 4px 4px;
}
#footer-section {
    background: #f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGwNaNXIZLbmfz2kYxiZdy-FzyYFaemS18HU3LvLynh7Ff8psIO66z2W8y72adE6MMgXWj9ma6a6qnBFrrVVx9K16kt8LMpYiyzbymyGLeiLOlcX2JktjHnrEfRnQVCyTueamM5yz3f5lg/s0/bg-pattern.png) repeat top left;
    border-top: 1px solid #aaa;
    box-shadow: inset 0 4px 6px -3px #aaa;
    font-size: 14px;
    height: 100px;
    margin: 10px -30px 5px;
    padding: 0 30px;
    text-align: center;
    width: 100%;
}</style>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>
</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=eftakhir"
class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=eftakhir',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="eftakhir" /><input name="loc" type="hidden" value="en_US" />
<input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="أدخل بريدك الإلكتروني..."/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="اشترك الآن" /></form></div>المرجو تأكيد البريد الإلكتروني بعد الإشتراك</div></div>

اضافة صندوق التعليقات "comments " الزوار مع الصورة الرمزية

الخميس، 29 أغسطس 2013 | التعليقات

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

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


 طريقة التركيب :



1~  اذهب الى تخطيط.
2~ إضافة أداة

3~  اختر  Html/Javascript
ثم لصق الشفرة او الكود في الاسفل مكان Html/Javascript 



 <style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 50,
characters  = 60,
defaultAvatar  = "http://Eftakhir.blogspot.com",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://yourjavascript.com/211271156231/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://Eftakhir.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

يمكنك تغيير
 رقم (5) : المكتوب باللون الازرق هو عدد التعليقات التي تريدها ان تضهر
رقم (50): المكتوب باللون الأصفرهو حجم الصورة الرمزية لزائر المعلق
رقم (60): المكتوب باللون الأخضر هو عدد الأحرف تعليقا التي تريدها ان تضهر
واخيرا يجب عليك تغيير رابطة URL المدونة المكتوبة باللون الأحمر بالرابط الخاص بك . 


اروع الإضافات المحبوبة عند الزوار: صندوق النص معزول عن التدوين

الثلاثاء، 27 أغسطس 2013 | التعليقات

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

للمعاينة مباشرة هنا :



تفضل الكود او الشفرة الكل يعرف طريقة الاستخدام

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="تحديد الكل" type="button"> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20"> افتخر: اكتب هنا ما تريد نص او شفرة  </textarea></p></form></div> 
1 يمكنك تغيير "تحديد الكلالمكتوبة باللون الاخضر 
2 يمكنك تغيير الارقام المكتوبة باللون الازرق للتحكم في الطول والعرض
3 يمكنك تغيير افتخر: اكتب هنا ما تريد نص او شفرة المكتوبة باللون الاحمر 

إضاف ايقون RSS بجانب أقسام التسميات بلوجر

الجمعة، 23 أغسطس 2013 | التعليقات

 بسم الله الرحمن الرحيم

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


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

 تابع معي شرح إضافة  ايقون او شعار RSS  بجانب كل تسمية بلوجر 

طريقة التركيب :

1~   قالب 

2~  تحرير HTML.
 ملاحظة: قبل تحرير القالب يجب حفظ نسخة منه احتياطية عند الحاجة.
3~ ابحت عن :

                                                                                        <b:if cond='data:blog.url == data:label.url'>

                                          <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
                                                                                                                                          <b:else/>
               <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

4~ الخطوة الاخيرة نقوم بتغييره الي الشفرة او الكود التالي الجديد:

 <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

<b:if cond='data:blog.url == data:label.url'>

<span expr:dir='data:blog.languageDirection'><data:label.name/></span>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

يمكنك تغير ايقون المفضلة من الرابط المكتوب الاحمر .
حفظ القالب الخاص بك لمعاينة الاضافتك الجديدة

واي استفسار لا تتردد في طرحه في صندوق التعليقات

اضافة سلايد (slider) فى قائمة المدونة الجانبية

السبت، 17 أغسطس 2013 | التعليقات

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

للمعاينة مباشرة هنا : فى قائمة الجانبية







طريقة التركيب :

1~   قالب
2~  تحرير HTML.

3~ ابحت عن : 
]]></b:skin>
 ولصق هذه الشفرة او هذا الكود فوقه يعني اعلاه



/* Slider */.sompret-wrapper {float:right; position: relative;}.sompret { overflow: hidden; position: relative; width:300px; height:400px;}.image_reel { position: absolute; top: 0; left: 0; }.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGDrgaSNbzPsrVr8ORdgxeeO_n4Nhzd12_MNKvI9nsymnmb5cEcM-YuRzKDPAz3rbruZ6U3BwQY5DODUp_cDAMTJqxn_1DEZAluwEvwItl44aMJPyxPp-gqWPi2BhcyiTJ7fEFu5pEho/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEAZGLDF4t3L4P3GS1tZngcI9AIWFU8V1bh_NfiwCAuB1P7gKINK9J08MUabeMYvuZ35c1qfmAtAp4V9GHcAX2dF1f1O9_OjOy5IpcfrX2hVViIwMm0_IS2s-LIqY2y0s4hVGOmV3T37A/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}.paging a:hover {font-weight: bold; border:none; outline:none;}.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWf5Kf9FR5Bb84PSKBO0i4r7wScYYn_gYEaz-qUgKlOPqNwavrkC33jI67X8omolLfdjoM7Y302vI4f6CGUQjPApmYCcpd0ak8p4AIlF5MNkAVqWVck0d9q03bJT9xkQ8FE7A8rtAnlgkr/s1600/uj-opacity-40.png);padding:5px 10px;  }.crott a{color: #fff;font: 16px Oswald }.crott p{color: #fff;font: 12px Arial;}

يمكنك تعديل حجم الطول والعرض باللون الأحمر بما يتناسب مع مدونتك


4- ابحث عن الكود التالى :


</head>

 ولصق هذه الشفرة او هذا الكود فوقه يعني اعلاه




<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() { 

 //Set Default State of each portfolio piece
 $(".paging").show();
 $(".paging a:first").addClass("active");

 //Get size of images, how many there are, then determin the size of the image reel.
 var imageWidth = $(".sompret").width();
 var imageSum = $(".image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;

 //Adjust the image reel to its new size
 $(".image_reel").css({'width' : imageReelWidth});

 //Paging + Slider Function
 rotate = function(){ 
     var triggerID = $active.attr("rel") - 1; //Get number of times to slide
     var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

     $(".paging a").removeClass('active'); //Remove all active class
     $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
    
  $(".crott").stop(true,true).slideUp('slow');
  
  $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
  
     //Slider Animation
     $(".image_reel").animate({
         left: -image_reelPosition
     }, 500 );

  
 };

 //Rotation + Timing Event
 rotateSwitch = function(){ 
 $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
     play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
         $active = $('.paging a.active').next();
         if ( $active.length === 0) { //If paging reaches the end...
             $active = $('.paging a:first'); //go back to first
         }
         rotate(); //Trigger the paging and slider function
     }, 10000); //Timer speed in milliseconds (3 seconds) 

 };

 rotateSwitch(); //Run function on launch

 //On Click
    $(".paging a").click(function() {   
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });   

});

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4P2MXTaZPhs2sQd9sxwnSNZKFrsHmZJjqcBCqg3_Ku9ruuJn4RDQXFWogVSQRGZDJUiIPsXRCXwm6Qj6buh0bch3CQ2fI_f5HeTtaTgYWWlSmv9Q4gkNSxd5pja6r3sjEFgo07jNgL-o/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost1 = 80;
summaryTitle = 20;
numposts1 = 8;

function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
    }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}

function showrecentposts1(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
    
   for (var i = 0; i < numposts1; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
  
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
     
     postdate = entry.published.$t;

 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];

 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var daystr = m+ ' ' + day + ' ' + y ;

 var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';     
  document.write(trtd);     
    
     j++;
 }

}

function showrecentposts2(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
  
   for (var i = 0; i < numposts1 ; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
  
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
     
     postdate = entry.published.$t;

 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];

 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];

 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }

 var daystr = day+ ' ' + m + ' ' + y ;

 var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
  document.write(trtd);     
    
     j++;
 }

}
 //]]>
</script>

يمكنك تعديل عدد المشاركات التى تود ان تظهر فى السلايدر باللون الأحمر

5- ابحث عن الكود التالى :

<div id='sidebar-wrapper'>

 ولصق هذه الشفرة او هذا الكود فوقه يعني اعلاه




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='description'>
<script>         
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
<a href='#' rel='7'/>
<a href='#' rel='8'/>

</div>
</div></b:if>

 
Support : Creating Website | EFTAKHIR | افتخر copyright © 2013. افتخر | EFTAKHIR - All Rights Reserved