أحدث مقال

-أيقونات - أعلام 194 دولة بتصميم مسطح - Flat Design

أعلام 194 دولة بتصميم مسطح - Flat Design
أعلام 194 دولة بتصميم مسطح - Flat Design 
















السلام عليكم ورحمة الله بركاته ، ملحق اليوم عبارة عن أعلام 194 دولة بتصميم مسطح - Flat Design ،، شامل جميع أعلام الدول العربية بالتأكيد ،،  قم بتحميله  ولا تنسى إعطائي رأيك  ^^

أحدث مقال

خط روافد زينب - Rawafed zainab

خط روافد زينب - Rawafed zainab

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

خط روافد زينب - Rawafed zainab خط روافد زينب - Rawafed zainab
أحدث مقال

أداة معلومات عن التدوينة لبلوجر

السلام عليكم ورحمة الله وبركاته  متابعي مدونة نبض في تدوينة جديدة ، سأقدم لكم إضافة هامه ومميزة لقوالب بلوجر ، هذه الإضافة تقدم لزائر مدونتك معلومات بسيطة عن  التدوينة مثل كاتب الموضوع و موعد النشر بالاضافة لعدد المشاهدات والتعليقات بالاضافة لباقي المميزات .. ولمعاينة الاضافة  إنظر أسفل هذه التدوينة ،،
شرح تركيب الإضافة :
1- من لوحة التحكم >> قالب >> تحرير HTML
2- نأخذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
3- نقوم بالاستعانة بلوحة التحكم (CTRL+F) من اجل البحث عن هذا الكود
]]></b:skin>
4- نضع الكود التالي قبله ( فوقه )
 /* CSS Page Navigation */.pagenav {clear: both;margin: -5px 0 10px;margin-top: 10px;padding: 5px;font-size: 12px;font-weight: 800;background: #F2F2F2;display: inline-block;float: right;border: 1px solid #E2E2E2;}.pagenav span,.pagenav a {padding:8px;display:inline-block;background-color:#fff;color:#87888e;margin-right:2px;margin-left:2px;border:1px solid #E8E8E8;transition:all 0.6s linear;float: right;}.pagenav .pages {background-color:#fff;color:#87888e;border:1px solid #E8E8E8;font-weight:400;transition:all .3s linear;float: right;padding: 8px;}.pagenav a:hover {background-color:#FC4F3F;color:#fff;border:1px solid #E44334;transition:all .2s linear;}.pagenav .current {background-color:#FC4F3F;color:#fff;border: 1px solid #E44334;transition:all .3s linear;}.pagenav .pages {display:inline-block;}</style></b:if><b:if cond='data:blog.pageType != &quot;index&quot;'><style type='text/css'>#bottom-posts{margin:10px 0;}#bottom-posts h3{font-size:13px;margin:-10px -10px 7px;background:#575253;color:#fff;padding:5px;padding-left:5px;text-align: center;font-weight: 700;}.mbtloading {background: url(//ar1web-com.googlecode.com/svn/trunk/loading.gif) no-repeat left center;width: 16px;height: 16px;}ar1web-postinfo{background: #FFF;border: 1px solid #E7E7E7;padding: 10px;color: #555;display: block;max-width: 45%;  text-align: right;height: 251px;  margin-top: -1px;}ar1web-infotitle {width: 103.3%;margin-left: -10px;display: block;color: #FFF;font-size: 13px;font-weight: 700;text-align: center;background: #575253;padding-top: 7px;height: 32px;margin-top: -10px;}ar1web-postdate {background: url(//ar1web-com.googlecode.com/svn/trunk/date.png) no-repeat scroll 100% 0px rgba(0, 0, 0, 0);padding: 8px 40px 8px 8px;margin-bottom: 5px;width: 91%;float: right;height: 31px;}ar1web-comments {background: url(//ar1web-com.googlecode.com/svn/trunk/comments.png) no-repeat scroll 100% 0px rgba(0, 0, 0, 0);padding: 8px 40px 8px 8px;  margin-bottom: 5px;width: 91%;float: right;height: 31px;}ar1web-lables {background: url(//ar1web-com.googlecode.com/svn/trunk/tags.png) no-repeat scroll 100% 0px rgba(0, 0, 0, 0);padding: 8px 40px 8px 8px;margin-bottom: 5px;width: 91%;float: right;height: 31px;}ar1web-admin {background: url(//ar1web-com.googlecode.com/svn/trunk/Admin.png) no-repeat scroll 100% 0px rgba(0, 0, 0, 0);padding: 8px 40px 8px 8px;margin-bottom: 5px;width: 91%;float: right;height: 31px;margin-top: 3px;}ar1web-view {background: url(//ar1web-com.googlecode.com/svn/trunk/views.png) no-repeat scroll 100% 0px rgba(0, 0, 0, 0);padding: 8px 40px 8px 8px;margin-bottom: 5px;width: 91%;float: right;height: 31px;}ar1web-fakelink {background: url(//i.imgur.com/1HeB44m.png) no-repeat scroll 100% 0px rgba(0, 0, 0, 0);padding: 8px 40px 8px 8px; margin-bottom: 5px;width: 91%;float: right;height: 31px;}.post-body img{;border: 2px solid #eee;box-shadow: 1px 30px 30px -26px #A9A7A7;border: 1px solid #F4F4F4;  padding: 5px;}
ثم ابحث عن هذا الكود
<data:post.body/>
قد تجده متكرره عدة مرات الاخيره هي 
المقصوده واضف هذا الكود تحتة
 <div id='bottom-posts'><div style='display:none'/><ar1web-postinfo><ar1web-infotitle>معلومات عن التدوينة</ar1web-infotitle><ar1web-admin> <data:post.author/> : الكاتب</ar1web-admin><ar1web-postdate>بتاريخ : <data:post.date/></ar1web-postdate><ar1web-view><a expr:name='data:post.id'/><div id='views-container'><span class='views-icon'/><div class='views-text'/><span class='mbtloading viewscount' id='postviews'/></div>: عدد الزيارات<data:post.numviews/></ar1web-view><ar1web-comments>عدد التعليقات: <data:post.numComments/></ar1web-comments><ar1web-lables><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag' style='color: #444;'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>&#1548;</b:if></b:loop></b:if></ar1web-lables>  <ar1web-fakelink>قبل الإستعمال إقرأ <a href='#' style='color: #FFFFFF; background: #8B8887;padding: 3px;border-radius: 3px;font-size: 10px;'>إتفاقية الإستخدام</a></ar1web-fakelink><ar1web.com/></ar1web-postinfo> 
ثم اضغط حفظ ومبروك عليك الأداة الجديدة ،، 
أحدث مقال

صندوق اقتباس الأكواد لبلوجر [ الجزء الأول ]


السلام عليكم ورحمة الله وبركاته ، تحياتي لجميع المتابعين  ،،، بعد طلب الأخوة ، صندوق إقتباس أكواد لبلوجر[الحزء الأول ]، فلطالما بحث الكثير عن صندوق إقتباس ليلم بأكواد بلوجر ،، وما ييميز هذا الصندوق تصميمه المسطح والبسيط ، وخصوصا أنه غير ملئ بالعديد من الزخارف عديمة الفائدة
لمعاينة هذه الإضافة من هنا
بعد ان شاهدت المعاينة ،نتبع هذه الخطوات البسيطة معي لإضافة الصندوق بقالبك :

1- من لوحة التحكم >> قالب >> تحرير HTML
2- نأخذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
3- نقوم بالاستعانة بلوحة التحكم (CTRL+F) من اجل البحث عن هذا الكود
]]></b:skin> 
4- نضع الكود التالي قبله ( فوقه )
 /* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #0288d1;
}

pre.code-html code {
    color: #558b2f;
}

pre.code-javascript code {
    color: #f57c00;
}

pre.code-jquery code {
    color: #78909c;
} 

5- نبحث عن الكود </body>
 ونضيف فوقه مباشرةً الكود التالي
 <script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script> 

نقوم بحفظ القالب وعندما نريد اضافة اقتباس الأكواد نضع الصفحة html وتضيف أحد هذه الأكواد في المكان الذي تريده  وبعدها نرجع الصفحة إلى تأليف وسوف تظهر لك كلمه ( ضع هنا الكود ) تضع بدلها الاكواد التي تريد اضافتها
 <pre class='code code-html'><label>HTML</label><code>... ضع الكود هنا ...</code></pre>

<pre class='code code-css'><label>CSS</label><code>... ضع الكود هنا ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... ضع الكود هنا ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... ضع الكود هنا ...</code></pre> 

إلى هنا اتنتهى الموضوع  ، إنتظروني في الجزء الثاني ، لا تحرموني من تعليقاتكم ❤  
أحدث مقال

أداة أكثر المقالات تعليقاً لبلوجر

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

اذا كنت تريد تجربة هذه الأداة سريعاً  قم بنسخ الأكواد أدناه
 وقم بالذهاب إلى بلوجر > تخطيط > إضافة أداة > HTML\JAVA
وقم بلصق الكود وبعدها إضغط حفظ
 <div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-family: cursive,droid arabic kufi;font-size:14px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=10;
var homePage="nabd-blog.blogspot.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script> 
قم بتغيير  varnumPosts : بعدد المقالات التي ستظهر
قم بتغيير varhomepage : برابط مدونتك 

*ومبرووك عليك الأداة