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

 وهذا شكل زر الإقتباس في بلوجر

 لذا ليتم إعطاء شكل مميز يجب ان يتم تنسيق شكل صندوق اللإقتباس وهذه خمس نماذج لتختار منها ما يناسب مدونتك 

 طريقة الإضافة قم بالدخول لتحرير القالب وإبحث عن .post blockquote وإحذف الكود الخاص به باكمله ملوحظة لتحديد الكود بأكمله بداية الكود يحتوي قوس ونهايته يحتوي قوس مثال

.post blockquote {
overflow:auto;

}

لذا للحذف يجب ان تحدد الكود من بداية الكلمة الى نهاية قوس الإغلاق وطبعا عليك أن تحتفظ بنسخة إحتياطة من القالب تجنبا للمشاكل

ثم أضف مكان ما حذفته كود النموذج الذي يعجبك

أما إن لم تجد أساسا الكود في قالبك فقم بإضافة كود النموذج فوق الوسم ]]>

الشكل الأول

 .post blockquote {
background: #F2F2F2;
    margin: 0 25px 15px;
    padding: 10px 20px 10px 15px;
        border: dotted 2px #D8D8D8;
overflow:auto;
max-height:250px;
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
}

الشكل الثاني

.post blockquote {
overflow:auto;
max-height:250px;
border: 1px dashed #FFC600;
margin: 10px;
padding: 10px 10px 10px 60px;
background: #FFF8DD url(https://lh6.googleusercontent.com/-Ny881sz3L-o/UQ8ZYYtFzxI/AAAAAAAAAeQ/xrpyI6ekH88/s71/bq2.png) no-repeat;
background-position:20px 10px;}

ولتنسيقه #FFC600 هذا لون الإطار

#FFF8DD هذا لون الخلفية

وغير رابط الصورة بصورة بنفس المقاس وباللون الذي تختاره للخلفية

الشكل الثالث

.post blockquote {
position: relative;
z-index: 50;
background:#fff url(https://lh4.googleusercontent.com/-AZ3EY_MY_QU/UQ8ZYU-_hXI/AAAAAAAAAeM/iHwn4pfuEJ4/s36/bq3.gif) top left repeat;
border:1px solid #999;color:#000;
display:block;
font-family:"Courier New", Courier, monospace;font-size:13px;
line-height:18px;
margin:10px 0 10px;
padding:18px 10px 17px;
overflow:auto;
max-height:250px;
}

الشكل الرابع

.post blockquote {
    margin : 0 20px;
    padding: 10px 20px 25px 20px;
    background : #9FCFFF;
    color : #484848;
    border: 5px dashed #fff;
    }

#9FCFFF لون الخلفية

الشكل الخامس

.post blockquote {
overflow:auto;
max-height:250px;
background:#000;
color:#fff;
border-left:20px solid #969695;
border-radius:20px;
margin:10px;
padding:10px;
}

#000 لون الخلفية

#fff لون الخط

#969695 لو الإطار على اليسار

ملحوظة أخيرة بخصوص الكود المكرر في معظم الأكواد باللون الأحمر هذا الكود خاص بإرتفاع الإقتباس

وهو 250 إن زادت الكلمات عن هذا الإرتفاع يظل الكود بهذا الإرتفاع ويظهر شريط التمرير يمكنك زيادة الإرتفاع بزيادة الرقم

أما إن أردت ان يظهر الكود بدون شريط تمرير فإحذف الكود ذو اللون الأحمر من النموذج الذي تستخدمه

دمتم بكل ود

ماهر ديسمبر 26, 2018

مزيد من المعلومات »

ترقيم صفحات مدونة بلوجر عدد لانهائي بطريقة صحيحة

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

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

طريقة تركيب الكود على قالب مدونة بلوجر

قبل البدء لابد من إزالة كافة الأكواد القديمة الخاصة بترقيم الصفحات أكواد html وCSS وجافا سكربت ذالك إن وجد أما إذا كان القالب غير مرقم فلا حاجة إلى ذلك

1. إنتقل من لوحة تحكم المدونة  --> القالب ثم انقر على تحرير HTML ثم أبحث عن الرمز </head> وأضف الكود التالي فوق الرمز </head> مباشرةً

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Page Navigation */
#blog-pager{background:#fff;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:center;overflow:visible;margin:20px 0 5px 0}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{position:relative;background:#fff;display:inline-block;font-size:13px;color:rgba(0,0,0,.8);padding:5px 8px;margin:0 4px 0 0;box-shadow:0 1px 4px 1px rgba(0,0,0,0.1);border-radius:2px;transition:all .3s}
.showpageNum a:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02);transition:box-shadow 0.5s}
.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:rgba(0,0,0,0.03);color:#333;position:relative;}
.showpagePoint{background:#2980b9;color:#fff;}
@media screen and (max-width:640px) {
#blog-pager {padding:12px;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0;box-shadow:0 1px 2px 1px rgba(0,0,0,0.1);}}
@media screen and (max-width:320px) {
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
</style>
</b:if>
</b:if>

2. ثم أبحث عن الرمز

<!-- navigation -->

    <b:include name='nextprev'/>

سوف تجده غالبًا كما هو في الشكل السابق قم بإستبداله بالكود التالي:

<!-- navigation -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
        <b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
    </b:if>
    </b:if>

3. وأخيرًا أبحث عن الرمز </body> تجده اسفل القالب دائمًا ثم قم بلصق الكود التالي فوق الرمز </body> مباشرةً

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=5;var numshowpage=4;var upPageWord ='السابق';var downPageWord ='التالي';var urlactivepage=location.href;var home_page="/";
/*]]>*/
</script>
<script src='https://cdn.rawgit.com/mohammedxx/madad2/e5a01ecf/unlipage.js' type='text/javascript'/>
</b:if>

الرمز postperpage=5 لعدد الصفحات المطلوب عرضها
الرمز numshowpage=3 لعدد الترقيمات المطلوب عرضها في الأداة

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

ماهر ديسمبر 25, 2018

مزيد من المعلومات »

كيفية اضافة زر الاشتراك يوتيوب في موقعك

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

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

بمجرد نسخ الكود ألصقه في مكان تريد أن يظهر فيه الزر فعل سبيل المثال لإضافته إلى مدونة بلوجر أدخل إلى لوحة تحكم مدونتك ثم التخطيط ثم أختراضافة  اداة حدد بين الادوات اداة html/javascript وثم ألصق الكود فيها

ماهر ديسمبر 25, 2018

مزيد من المعلومات »

إضافة مواضيع ذات الصلة لمدونة بلوجر نمط حديث مع الصور المصغرة

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

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

مشاهدة مثال حي من هنا


كيفية تركيبها
أولا أذهب إلى لوحة التحكم في مدونتك >> القالب >> تحرير html
ثم بإستخدام مفتاح الاختصار ctrlوf قم بالبحث عن الرمز ]]></b:skin>
شاهد هذه الصورة لمعرفة كيفية البحث عن الرموز في قالب مدونتك.
بعد العثور على الرمز ]]></b:skin> أضف الكود التالي فوقه مباشرةً

/* مواضيع ذات الصلة
----------------------------------------------- */
#related_posts {
line-height:1.4em;
margin-bottom:25px;
}
#related_posts ul,
#related_posts li {
list-style:none;
padding:0;
margin:0;
}

#related_posts li {
width:175px;
float:right;
height:150px;
overflow:hidden;
}
#related_posts .inner {
padding:0 5px;
}
#related_posts h4,
.comments > h4 {
border-bottom:1px solid #D5D5D5;
}
#related_posts .gmbrrltd {
display:block;
overflow:hidden;
height:140px;
padding:4px;
border:1px solid #D5D5D5;
}
#related_posts .gmbrrltd,
#related_posts .date {
-webkit-transition:margin-top 0.7s ease;
-moz-transition:margin-top 0.7s ease;
-ms-transition:margin-top 0.7s ease;
-o-transition:margin-top 0.7s ease;
transition:margin-top 0.7s ease;
}
#related_posts .gmbrrltd img {
width:100%;
height:100%;
}
#related_posts .inner strong {
font-size:120%;
line-height:1.3em;
display:block;
overflow:hidden;
max-height:54px;
padding:0 4px;
}
#related_posts p {
margin:10px 0 0;
padding:0 4px;
position:static;
}
#related_posts a {
text-decoration:none;
}
#related_posts li:hover .gmbrrltd,
#related_posts li:hover .date {
margin-top:-150px;
}
#related_posts .jcarousel-container {
padding:10px 0;
}
#related_posts .jcarousel-prev,
#related_posts .jcarousel-next {
top:-34px;
}
#related_posts .jcarousel-prev {
right:40px;
}
#related_posts .jcarousel-next {
right:5px;
}
#related_posts .loadingxx {
width:100%;
}

الآن أبحث عن الرمز </head>

ثم أضف الكود التالي فوقه مباشرةً

<script type='text/javascript'>//<![CDATA[
//Ajax Related Post by www.madad2.com
function relatedPostsWidget(a){(function(e){var f={blogURL:"",maxPosts:5,maxTags:5,maxPostsPerTag:5,containerSelector:"#related_posts",tags:null,loadingText:"",loadingClass:"loadingxx",relevantTip:"",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],rlt_summary:100,ShowDate:true,relatedTitle:"مواضيع ذات الصلة:",readMoretext:"المزيد...",rlpBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",rlt_thumb:200,recentTitle:"مواضيع ذات الصلة:",postScoreClass:"",onLoad:false};f=e.extend({},f,a);var k=0,b=null,g=null;if(!f.containerSelector){document.write('<div id="related_posts"></div>');f.containerSelector="#related_posts"}var c=function(x,r){k++;if(x.feed.entry){for(var w=0;w<x.feed.entry.length;w++){var m=x.feed.entry[w];var o,p,C,q,B,n,t,A,v,y,z="";for(var u=0,s=m.link.length;u<s;u++){if(m.link[u].rel=="alternate"){z=m.link[u].href;break}}o=("content" in m)?m.content.$t:("summary" in m)?m.summary.$t:"";var l=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;q=e("<div></div>").append(o.replace(l,""));B=q.find("img");if("media$thumbnail" in m){p=m.media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+f.rlt_thumb+"-c");if(m.media$thumbnail.url.indexOf("img.youtube.com")!=-1){p=m.media$thumbnail.url.replace("default","0")}}else{if(B.length!=0){p=B[0].src}else{p=f.rlpBlank}}o=o.replace(/<\S[^>]*>/g,"");if(o.length>f.rlt_summary){o=o.substring(0,f.rlt_summary)}C=m.title.$t;y=m.published.$t.substring(0,10);n=y.substring(0,4);t=y.substring(5,7);A=y.substring(8,10);v=f.MonthNames[parseInt(t,10)-1];if(location.href.toLowerCase()!=z.toLowerCase()){i(z,C,p,o,n,A,v)}}}if(k>=f.tags.length){g.attr("class","");e("#related-posts-loadingtext",b).remove();if(f.maxPosts>0){e("li:gt("+(f.maxPosts-1)+")",g).remove()}}};var i=function(q,u,w,m,y,v,x){var r=e("li",g);for(var p=0,l=r.length;p<l;p++){var t=e("a",r.eq(p));var s=j(t);if(t.attr("href")==q){h(t,++s);for(var o=p-1;o>=0;o--){var n=e("a",r.eq(o));if(j(n)>s){if(p-o>1){r.eq(o).after(r.eq(p))}return}}if(p>0){r.eq(0).before(r.eq(p))}return}}g.append('<li><div class="inner"><a class="jdlunya" href="'+q+'" title="'+(f.relevantTip?f.relevantTip.replace("\d",1):"")+'"><span class="gmbrrltd"><img alt="'+u+'" src="'+w+'"/></span><strong>'+u+"</strong></a><p>"+m+'<a title="'+u+'" href="'+q+'">'+f.readMoretext+"</a>"+(f.ShowDate===true?'<span class="date"><strong>'+v+"</strong><span>"+x+"</span><span>"+y+"</span></span>":"")+"</p></div></li>")};var j=function(l){var m=parseInt(l.attr("score"));return m>0?m:1};var h=function(l,m){l.attr("score",m);if(f.relevantTip){l.attr("title",f.relevantTip.replace("\d",m))}if(f.postScoreClass){l.attr("class",f.postScoreClass+m)}};var d=function(){if(f.containerSelector!="#related_posts"){var l=e(f.containerSelector);if(l.length!=1){return}b=e('<div id="related_posts"></div>').appendTo(l)}else{b=e(f.containerSelector)}if(!f.tags){f.tags=[];e('a[rel="tag"]:lt('+f.maxTags+")").each(function(){var o=e.trim(e(this).text().replace(/\n/g,""));if(e.inArray(o,f.tags)==-1){f.tags[f.tags.length]=o}})}if(f.tags.length==0&&!f.recentTitle){return}if(f.tags.length==0){e("<h4><span>"+f.recentTitle+"</span></h4>").appendTo(b)}else{if(f.relatedTitle){e("<h4><span>"+f.relatedTitle+"</span></h4>").appendTo(b)}}if(f.loadingText){e('<div id="related-posts-loadingtext">'+f.loadingText+"</div>").appendTo(b)}g=e("<ul "+(f.loadingClass?'class="'+f.loadingClass+'"':"")+"></ul>").appendTo(b);if(f.tags.length==0){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/default?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}else{for(var n=0,m=f.tags.length;n<m;n++){e.get((f.blogURL===""?window.location.protocol+"//"+window.location.host:f.blogURL)+"/feeds/posts/default/-/"+f.tags[n]+"?max-results="+f.maxPostsPerTag+"&orderby=published&alt=json-in-script",c,"jsonp")}}};d();e(window).bind("load",function(){setTimeout(function(){var l;var m;var n=e(f.containerSelector);if(e(window).width()<479){l=1;m=n.width()/l}else{if(e(window).width()<980){l=2;m=n.width()/l}else{if(e(window).width()<1030){l=3;m=n.width()/l}else{l=4;m=n.width()/l}}}e("ul",n).jcarousel({easing:"easeInOutQuint",animation:800,auto:4,wrap:"last",scroll:l,setupCallback:function(o){o.reload()},reloadCallback:function(p){var o=Math.floor(p.clipping()/m);p.options.scroll=o;p.options.visible=o}})},3000)})})(jQuery)};
//]]>
</script>

نأتي لأخر إضافة والتي يخطأ فيها الكثير..
قم بالبحث عن الرمز <data:post.body/> وسوف يظهر لك على الشكل  التالي:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
أضف الكود التالي أسفله مباشرةً

<div id='related_posts'/>
<script class='jshilang' type='text/javascript'>
relatedPostsWidget();
</script><br/>

أكرر لا تضف الكود السابق حتى تجد الرمز 
<b:if cond='data:blog.pageType == &quot;item&quot;'>

فوقه هذا الرمز يمكن ان يتوفر في مدونتك متكرر ولكن لن تجد اسفله مرة واحدة سوى الرمز <data:post.body/> اذا لم تجده قم بالبحث عن الرمز <b:if cond='data:blog.pageType == &quot;item&quot;'>

ثم اضفه بعد <data:post.body/> أتمنى أن تكون مفيددة حقاً 

إلى اللقاء

ماهر ديسمبر 25, 2018

مزيد من المعلومات »

كود تبادل إعلاني بانز 125×125 بشكل بسيط وخفيف

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

في كل يوم موضوع جديد ومفيد ونحن نحث زوارنا الكرام في متابعتنا دائماً على الأشتراك في المدونة او عبر فيس بوك وتويتر لمتابعة جديدنا.

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

صورة الإضافة:

للمعاينة إضغط هنا

الأن كيفية الإضافة:

إذهب لوحة التحكم في مدونتك  > تخطيط > إضافة أداة

ثم نختر من بين الأدوات أداة HTML/JavaScript ثم نضيف الكود التالي حيث تريدوا ظهوره في مدونتكم:

<style>
/* جميع الحقوق محفوظة لـ مدونة مداد الجليد */
#ads{
margin:5px 5px 15px 10px;
width:289px;
}
#ads img{
margin:5px 5px 5px 5px;
height:125px;
width:125px;
}
</style>
<div id='ads'>
<a href='#'><img src='https://lh5.googleusercontent.com/-Np32D7zElbU/UmwPkmy4dvI/AAAAAAAAIBA/sl3sJiHvCoQ/s125-no/ads125.png'/></a>
<a href='#'><img src='https://lh5.googleusercontent.com/-Np32D7zElbU/UmwPkmy4dvI/AAAAAAAAIBA/sl3sJiHvCoQ/s125-no/ads125.png'/></a>
<a href='#'><img src='https://lh5.googleusercontent.com/-Np32D7zElbU/UmwPkmy4dvI/AAAAAAAAIBA/sl3sJiHvCoQ/s125-no/ads125.png'/></a>
<a href='#'><img src='https://lh5.googleusercontent.com/-Np32D7zElbU/UmwPkmy4dvI/AAAAAAAAIBA/sl3sJiHvCoQ/s125-no/ads125.png'/></a>
</div>

• الأن إذا قمت بمشاركة أحد بالتبادل قم بإضافة البانز الخاص به مكان رابط الصورة باللون الازرق
• ولإضافة رابط موقعه غير ال # وضع الرابط

أيضاً ملاحظة لزيادة عدد البانزات يمكنك ذلك من خلال تكرار نسخها مرة أخرى لكل رابط

ثم حفظ

ماهر ديسمبر 25, 2018

مزيد من المعلومات »

اضافة نافذة منبثقة لمدونات بلوجر

اضافة نافذة منبثقة لمدونات بلوجر

• 
  

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

والاضافة عبارة عن كود جافا سكربت Javascript تقوم بتركيب السكربت في مدونتك في بلوجر.

فائدة هذا الاضافة أن بعض المدونات لديها عدد كبير من الزيارات اليومية وبالتالي يستغل بعض المدونين لـ اضافة نافذة منبثقة لمواقع او مدونات بلوجر بمقابل مادي.

طريقة الاضافة كود اضافة نافذة منبثقة لمدونات بلوجر

اذهب إلى لوحة تحكم مدونتك ثم

 توجه إلى التخطيط ثم

 اضافة اداة  اضف أداة جديدة  Html/JavaScript

 <script type="text/javascript">

 document.body.onclick= function(){

window.open('http://www.tooky.info/', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=950, height=650, left = 300, top = 50'); 

  }</script>

قم بتغير الرابط باللون الاحمر إلى رابط الصفحة التي تريد اظهارها في النافذة.

الارقام باللون الازرق هي طول النافدة واللون الاخضر عرض النافدة.

وإلى هنا إنتهينا والله الموفق.

ماهر ديسمبر 25, 2018

مزيد من المعلومات »

كيفية إضافة زر الصعود إلى الاعلى لمدونات بلوجر

كيفية إضافة زر الصعود إلى الاعلى لمدونات بلوجر

• 
  

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

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

شرح تركيب :

أولاً : نتوجة إلى القالب ثم تحرير Html :

ثم نضغط داخل القالب Ctrl+F ونبحث عن الوسم :

]]></b:skin>

بعد أن نجده نلصق قبله هذا الكود :

 /* ------http://www.tooky.info------- */
.button_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNy6hyphenhyphenJWH9V25EVWyVSQg14JGELpCdgo1-rI5JCKZ7Y3AuyYHO0qYzZJXfsEF4o_brRdtWv0tVReYZrVGKoYrAalhKIh2I5UG6oCTeTkEKKffpYycUqgCkssReuMUgGur77uMxV7r8dOw/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:280px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7; 
}
.button_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJunS_7RUQEbJG3m4mcqrt-MoLihyphenhyphen9t6f-mzPuNU_oe_AQhbuZ_QpaF5bslmojkyrGF7sag2Cp_vTJYgtbVQF-CvDZQf5Y05qCR5cPG6vqQ2KwxMN6jvtJXkKk8207iWHhS720bIJVdwY/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:242px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
}
/* ------http://www.tooky.info------- */

  

بعد ذلك إبحث عن الوسم :

</body>

والصق قبلة الكود التالي : 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow'); 
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>  

ثم احفظ القالب وادخل موقعك وجرب ذلك .

ماهر ديسمبر 25, 2018

مزيد من المعلومات »