قالب بلوجر اكثر من رائع الصراحة ، مميزات القالب :-

1-قالب باللونين الابيض والاسمر

2-قائمة رئيسية منسدلة رائعة 

3-استخدام font face icon  فى القائمة الرئيسية والذى يزيد من منظرها الجمالى 

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

5- القالب سريع جدا

6- القالب معد لجميع محركات البحث

7- ازرار المشاركة على المواقع الاجتماعية فى جميع الموضوعات وبشكل رائع 

8-سهولة ويسر الحركة داخل القالب 

9-الموضوعات بشكل الشبكة مما يعطى القالب منظر جمالى رائع 

10-يمكن استخدام القالب لاضافة الافلام والمسلسلات من اليوتيوب وديلى موشن 

11-اضافة صفحة الفيس بوك الى المدونة بالطريقة الصحيحة فقط غير رابط صفحة القالب الى صفحتك واستمتع بالقالب 

صور من داخل القالب :-

الان جاء وقت المعاينة والتحميل 
المعاينة :-

التحميل:-

اولا اذهب الى البلوجر ثم ابحث باستعمال ctrl+f  عن  ]]></b:skin>

ضع الكود التالى فوقة :-

/* CSS Related Posts qassemblog */ #at-picture{background:#F9F9F9;padding:12px;margin:6px 0 0;border:1px solid #f2f2f2;overflow:hidden} #at-picture h2{font-family:Electrolize,ge_ss_tvbold;font-weight:700;font-size:15px;color: #e74c3c;} #at-picture a{background:#FFFFFF;font-family:Electrolize,ge_dinar_oneregular;color:#716F6F;box-shadow:0 2px 2px #f0f0f0;overflow:hidden;text-align:center;font-size:12px;font-weight:400;border:1px solid #f8f8f8;text-decoration:none;margin:0 7px 5px 0;padding:6px;float:right} #at-picture a img{width:100px;height:98px}.box-related{width:100px;padding-left:3px;height:50px;border:0 none;margin:0 0 5px;padding:0;line-height:normal;font-stretch:normal}#at-picture a:last-child{margin-right:0} #at-picture a:nth-child(1):hover{box-shadow:0 -3px 0 #E50700 inset}#at-picture a:nth-child(2):hover{box-shadow:0 -3px 0 #0084C5 inset}#at-picture a:nth-child(3):hover{box-shadow:0 -3px 0 #6CAC00 inset}#at-picture a:nth-child(4):hover{box-shadow:0 -3px 0 #00C3B7 inset}#at-picture a:nth-child(5):hover{box-shadow:0 -3px 0 #FF8168 inset}#at-picture a:hover{box-shadow:0 -3px 0 #FF8168 inset}#at-picture a:nth-child(1):hover,#at-picture a:nth-child(2):hover,#at-picture a:nth-child(3):hover,#at-picture a:nth-child(4):hover,#at-picture a:nth-child(5):hover,#at-picture a:hover{background:#fff}#at-picture img{width:100%;margin:0;padding:0}#posting{width:auto!important;max-width:100%;margin:15px 20px 15px 0}

الان يأتى دور مكان الكود قم بالبحث عن الكود التالى  <data:post.body/> ضع  بعده [ أسفل] الشكل المختار

 * ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود .

<b:if cond='data:blog.pageType == "item"'><script> var defaultnoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd1Y26IVlMj6pDH0VVeUiZG0LgDZBsMok66Ey0e8D2QWjGrQRJoe66zb4Lx-O-bwXxeqlqoaTqxUPGtNm3JreD0h7dATK3oKx23DDLDLlGD6tnkcpPC3GD2apWs5dXbyXX7OQigXCOvXE/s100/picture_not_available.png"; var maxresults = 5; var splittercolor = "#d3d3d3 "; var relatedpoststitle = "تدوينات ذات صلة :"; </script><script src='https://ar1web-com.googlecode.com/svn/Hm/rehm.js' type='text/javascript'/><div id='at-picture'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=999"' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div></b:if>

ومبروك عليك الاضافة 

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

استكمالا منا لتسهيل لغات البرمجة على كل من يود تعلمها ، اليوم اقدم لكم هذا الملف الثانى بعد ملف تلخيص عناصر لغة css ،  وهو ملف تلخيص عناصر css3  فى خمس ورقات فقط على شكل جدول به العنصر ووظيفته وطريقة كتابتة .

التحميل 

لا تنسى الدعاء من خالص قلبك :)

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

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

الكتاب عبارة عن 6 ورقات فقط !

لتحميل الكتاب :-

.  iam introducing to you the best css3 book for free download pdf 

 . the book by  DAN CEDERHOLM

Many of the CSS3 properties Dan discussed in 2010 now have wider browser support, which means you can feel even more confident putting them to use. In this updated edition, Dan has carefully refreshed code samples, removed old hacks that are no longer necessary, and written a whole new chapter on micro layouts. There’s no better time to dive in to—or polish 

 up—your CSS3 skills.

:to download the book 

التحميل :

Free 298 page eBook “WordPress and Ajax: An in-depth guide on using Ajax with WordPress” by Ronald Huereca.
The goal of this book is to provide you a rock-solid foundation for using Ajax with WordPress. After the foundation has
been laid, you will be walked through several real-world examples.

Description

By the end of the book, you should not only have a thorough understanding of Ajax, but how Ajax functions within WordPress itself. The book contains three real-life examples that provide the rationale and logic behind coding decisions, the reasons for Ajax’s use, and the steps from inception to completion of the examples.

Table of Contents

• What is Ajax?
• Adding Scripts Properly to WordPress
• Localizing Your Scripts
• Adding Styles Properly to WordPress
• Page Detection in WordPress
• WordPress Loading Techniques
• Properly Formatting jQuery for WordPress Use
• Nonces and the Escape API
• Sending Our First Ajax Request
• Processing Our First Ajax Request
• WordPress and Admin Ajax
• Example 1: WP Grins Lite
• Example 2: Static Random Posts
• Example 3: Ajax Registration Form
• Now You Begin Your Own Journey

Book Details

Author(s): Ronald Huereca

Format(s): PDF

File size: 9.52 MB

Number of pages: 298

>>download with filedown<<

>>download with media fire<<

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

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

يمكنك رؤية الاضافة حية فى مدونتى 

للتفعيل الاضافة :

1-اذهب الى التخطيطات 

2-اختار "اضافة اداة "

3- قم بنسخ الكود التالى وضعه بالاداة الجديدة 

<style type="text/css">#social-buttons { position:fixed; bottom:15%; margin-right:402px; float:left; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#fff; padding:0 0 2px 0; z-index:10; } #social-buttons .button-share { float:left; clear:both; margin:5px 5px 0 2px; } </style><div id='social-buttons' title="Get this from qassemblog.blogspot.com"><div class='button-share' id='like' style='margin-left:7px;'><div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script><div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div></div><br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='qassemblog' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script><br /><div class='button-share' style="margin-left: 3px;" id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div><div class='button-share' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div><div class='button-share' style='margin-left:3px;' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://qassemblog.blogspot.com/">widget</a></div></div></div>

لضبط مكان الاداة لتناسب مدونتك قم بتغير القامتين :

bottom:15%; 

margin-right:402px;

ومبروك عليك الاضافة اترك اى مشكلة تواجهك فى التعليقات 

معظمنا يعلم شكل الشبكة فى البلوجر grid layout اليوم اقدم لكم اسهل طريقة لتركيب شكل الشبكة الى المدونة الخاصة بك ، ليصبح شكلها جميل جدا :

لاضافة هذا الاسكربت :

1-اذهب الى قالب ثم اضغط تعديل القالب 

2-اضغط داخل  مربع الاكواد واضغط ctrl+f ليظهر لك مربع البحث ، قم بالبحث عن الكود التالى 

</head>

3-قم بأضافة الكود التالى قبله مباشرة "فوقة " :

<script type='text/javascript'>posts_no_thumb_sum = 100; posts_thumb_sum = 100; </script> <script type='text/javascript'>//<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { 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); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>'; summ = posts_thumb_sum; } else { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Q-3OK0dOaV2kJfI0y_zZnC5lcgbqn1_kJv8H_pq_xsohA7fh_1gVA3HWBI3tD83Wo5HOB1maKrQepHcJo92XW6Gl5TEbpWP-n2Dpr4z_hwa5FXRI0RelZVXN5PwPSREPOSTFpOIiWbiF/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>'; div.innerHTML = summary; } //]]></script>

4- " اذا كانت المدونة الخاصة بك تحتوى على سكربت" قراءة المزيد" فلا داعى لعمل الخطوة التالية : "

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

<data:post.body/>

سوف تجد الكود السابق مكرر ثلاث مرات استبدل اخر اثنين بالكود التالى :  

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/> </div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script> <b:if cond='data:post.allowComments'> <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:post.numComments/> </a> </b:if> </b:if></b:if><b:if cond='data:blog.pageType == "item"'> <data:post.body/></b:if><b:if cond='data:blog.pageType == "static_page"'> <data:post.body/></b:if>

5-الان فوق </head> مباشرة قم اضافة الكود التالى :

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType!= "item"'><style>#blog-pager { clear:both; } .post { height:auto; width:31%; display:inline-block; text-decoration:none; float:left; margin:0 1.1% 2%; padding:0!important; } h3.post-title a { font-size:75%; font-family: 'Open Sans Condensed', sans-serif; text-transform:uppercase; color:#111; padding:0; } h3.post-title { text-align:center; height:22px; position:absolute; bottom:23%; width:100%; z-index:101; overflow:hidden; margin:0!important; padding:10px 0; } .date-header { visibility:hidden; height:0!important; width:0!important; margin:0!important; padding:0!important; } .posts-thumb { width:100%!important; height:190px!important; overflow:hidden; clear:both; border-bottom:3px solid #00C8BD; border-top:3px solid #558ABB; } .posts-thumb:hover { border-top:3px solid #FF664E; border-bottom:3px solid #FEBE36; } .post-body { border-radius:2px; box-shadow:0 0 6px 1px rgba(0,0,0,0.1); position:relative; height:auto; } .post-body a { text-decoration: none; } .post-body img { display:block; width:100%!important; height:auto!important; max-width:800px!important; max-height:400px!important; min-width:190px!important; min-height:190px!important; border:none; outline:none; position:relative; margin: 0px; padding:0; } .post-summary-text { color:#555; background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrFYknvVHPtdiwUMWtUKlJlEbJmXXIX3mgkYKrm_1jJFsbhsXLZnBmwUgpVdpT7CYC8X_wrXBDJ5-TRDLslJHAuA_tBF2Gz6zFuI6btIbwenAJir-uAWKN3PVnhbUMwWawvTg5SCN2WOxF/s1600/blueprint.png); font-size:100%!important; font-family: 'Open Sans Condensed', sans-serif; text-align:center; clear:both; overflow:hidden; margin:5px 0 0; padding:17% 10% 6%; } a.comment-bubble { color:#fff; text-decoration:none; font-size:110%; right:10px; position:absolute; top:165px; text-shadow:1px 2px 1px #333; font-family: 'Pacifico', cursive; } a.comment-bubble:before { content: "Comments: " url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuvnbYh8hVHAlwk0Ck9YJujre9aUdjMTQBB_mGG-6pxQhEoS_myQb7uEUIShSuHYzByTxgtDh3AQrtyKQcyybJM3ajnhT4y7C8v8_apZdJ31YpbBSL79Ac_QhpFt9cSJS09S50Qfgp_hCL/s1600/heart-active.png); } .post-header,.post-footer { display:none; } </style></b:if></b:if> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

ومبروك عليك الاضافة  :)