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

مرحباً بكم إخوانى الكرام مشكله بسيطة وشائعة لدى البعض وهو عند إضافة مربع إحصائيات اليكسا تجد عبارة No data” أو “No rank ولا يوجد اى إحصائيات لحل هذة المشكله عليك بالتسجيل بالموقع لان هذة المشكله هى لا يوجد بيانات لدى اليكسا لتصنيف موقعك فيتوجب عليك التسجيل وتقديم بيانات موقعك كاملاً حتى يظهر ترتيب موقعك لا اليكسا تقوم من حين لآخر بتحديث بيانات موقعك لكى تظهر الإحصائيات بشكل أدق ايضا عند تعبئة البيانات الخاصة بموقعك يجب تحديد بلدك حتى يظهر اليكسا ترتيب موقعك محلياً .

فقط هذة حل المشكله وهى تقديم بيانات كافية لدى اليكسا كيفية التسجيل بموقع اليكسا بالطريقة الجديدة سيتم شرحها لاحقاً بامر الله

تجريب الإقتباس 
تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس  تجريب الإقتباس 
تجريب الترقيم

1. تجريب الرتقيم
2. مدونة هادي ستور
3. نحن الأفضل تجريب 

 

الزر الأبيض   الزر الأزرق  الزر الأحمر   الزر البرتقالي   زر التحميل

 

تابع القراءة

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

نتحدث اليوم عن مشكله تحدث عند البعض عند تركيب بعض قوالب بلوجر وهى " تمدد القوالب " بمعنى تكون مساحة فارغة بالجنب أو يكون جزء من المدونة وهذا ما سنوضحة من خلال هذة التدوينة البسيطة حل هذة المشكله بسيط جداً وهو إضافة كود بسيط جداً لكى تختفى هذة المشكلة : إبحث عن هذا الوسم ]]></b:skin> وضع الكود التالى قبله / أعلاه

 html {overflow-x: hidden;} 

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

•  شاهد الصورة السابقة لأحد المدونات القالب به 2 سيد بار + المحتوى الجزء المحدد باللون الأحمر مساحة كبيرة وعلى اليسار السيد  بار لم يظهر كاملاً ليست المشكله بالسيد بار 2 ولكن فى تقليص المساحة فى هذة المشكله تحتاج لتقليل المساحة قليلاً تقليل عرض المواضيع أو السيد بار بالجهة اليسرى .

شكراً لكم وأتمنى التوفيق للجميع

تابع القراءة

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

إذا كنت ممن تبحث عن طريقة سهلة وبسيطة لكتابة إسمك بشكل لطيف إذن عليك بتحميل هذا الملف psd موك اب إحترافى جاهز للتعديل عليه كما تشاء + فيديو بسيط لشرح طريقة التعديل.

مشاهدة الفيديو      تحميل الملف  

تابع القراءة

 السلام عليكم ورحمة الله وبركاتة ...التصميمات مفتوحة المصدر اصبحت توفر لك الوقت والجهد وخصوصا إذا كنت بسيط فى إستخدامك لبرامج التصميم لذلك نقدم لك بوستر إعلانى تصميم أنيق وإحترافى وجزاب جاهز للتعديل psd موك اب حمله الآن من هادي ستور فقط.

download    download

تابع القراءة

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

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

download

تابع القراءة

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

تحميل الخط 

تابع القراءة

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

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

مهم جداً قبل البدء فى الشرح:

1- حفظ نسخة إحتياطية من القالب فى حالة وجود اى أخطاء يمكنك إستعادة القالب كما كان من قبل

2- إذهب إلى صفحة تحرير القالب

3- بإستخدام CTRL+F سنبحث عن هذا الوسم </head> ونضع الكود التالى قبلة مباشرة

<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/AVvXsEgYVU9UCMNtA7KQTaM4W85p9FcYdarhgCSnmKOBFSv55ENzX6595KdN9EvE5jgwnw4jGi9iGI6NO-D4ej_B5Qmus5tWhhyphenhyphenVYaVWMRTOf2D28_Hrkm27x6Vr-Ty15NgqJle10VfyInPxIDCD/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/> ستجد 3 من هذا الوسم ربما يكون الثانى أو الثالث المقصود عندما تجد الوسم      المناسب ضع الكود التالى أسفلة مباشرة

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <div expr:id='&quot;summary&quot; + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</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 == &quot;item&quot;'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
</b:if>

5- الآن عليك بإختيار الشكل المناسب إبحث عن هذا الوسم </head> وضع كود الشكل الذى تود تركيبة قبلة / أعلاه

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear:both;
}
.post {
height: auto;
width:30.8%;
overflow: hidden;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding: 0px !important;
}
h3.post-title a {
font-size:75%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
padding:0;
color:#444;
}
h3.post-title {
height: 26px;
text-align:center;
width:100%;
margin:0!important;
padding-bottom: 4%;
}
.date-header {
display: none;
}
.post-body a {
text-decoration: none;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.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:#777;
font-size:100%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-align:center;
clear:both;
overflow:hidden;
margin:5px 0 0;
padding:7% 10%;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
font-weight: bold;
right:10px;
position:absolute;
top:165px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
}
a.comment-bubble:before {
content: &quot;Comments: &quot;;
}
.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'/>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<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: &#39;Open Sans Condensed&#39;, 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/AVvXsEgyYWifRdTumjygcLE6W4ggNOO5Cu3kuiVKiRqEu4vmjkrhKh169m8wLA3MG6MMnVWv3gSZScR-nmJL2oOrIvt5buxR-Zqv1PDXbF8BwD7kZ4invl2mmQLgVmNCh18-T3JIK1Q6fFYh4EsU/s1600/blueprint.png);
font-size:100%!important;
font-family: &#39;Open Sans Condensed&#39;, 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: &#39;Pacifico&#39;, cursive;
}
a.comment-bubble:before {
content: &quot;Comments: &quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiglvxA0RNwvUYC8rav9rS2EgcZhbyJUBP_8zF_4WCiyF0xN-3NdBlhuHOYVN0jKS5qm2leDk__X-TMfR4UgudfW-3KZB4RH9sxSeCgvqOkVcv5WeUyM-cTFB_5Dr0aDZ9HkuWfs5zKhKYW/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'/>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<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:95%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
color:#fff;
padding:0;
text-shadow: 2px 2px 3px #222;
}
h3.post-title {
height: 22px;
text-align:center;
position:absolute;
top:1%;
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;
}
.post-body {
border-radius:2px;
box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);
position:relative;
overflow: hidden;
}
.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 {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
width: 100%;
text-align: center;
position:absolute;
top:165px;
left: 0px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Pacifico&#39;, cursive;
z-index: 122;
}
a.comment-bubble:before {
content: &quot;Comments: &quot;;
}
.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'/>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<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:95%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
color:#fff;
padding:0;
text-shadow: 2px 2px 3px #222;
}
h3.post-title {
height: 22px;
text-align:center;
position:absolute;
top:1%;
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;
}
.post-body {
border-radius:2px;
box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);
position:relative;
overflow: hidden;
}
.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 {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
width: 100%;
text-align: center;
position:absolute;
top:165px;
left: 0px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Pacifico&#39;, cursive;
z-index: 122;
}
a.comment-bubble:before {
content: &quot;Comments: &quot;;
}
.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'/>

6- إضغط على زر المعاينة وشاهد التعديلات قم إحفظ القالب وأى إستفسار لا تتردد فى كتابتة

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

تابع القراءة

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

الخطوة الأولى: الدخول إلى لوحة بلوجر & تحرير القالب & إبحث عن هذا الوسم </style> وضع الكود التالى قبلة مباشرة

/* CSS Syntax Highlighter */
pre {padding:35px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#333;position:relative;max-height:500px;box-shadow:0 0 0 1px #eee;border-radius:3px;}
pre::before {font-size:13px;content:attr(title);position:absolute;top:0;background-color:transparent;padding:6px 10px 7px 10px;left:0;right:0;color:#333;display:block;margin:0 0 15px 0;font-weight:700;box-shadow:0 0 3px #ccc;}
pre::after {content:&quot;إضغط مرتين لتحديد الكل&quot;;padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#888;line-height:20px;transition:all 0.3s ease-in-out;}
pre:hover::after {opacity:0;top:-8px;visibility:visible;}
code {line-height:16px;color:#aaa;background-color:transparent;
padding:1px 2px;font-size:12px;}
pre code {display:block;background:none;border:none;color:#aaa;direction:ltr;
text-align:left;word-spacing:normal;padding:10px;font-weight:bold;}
code .token.punctuation {color:#bbb;}
pre code .token.punctuation {color:#777;}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {color:#aaa;}
code .namespace {opacity:.8;}
code .token.property,code .token.tag,code .token.boolean,code .token.number {color:#d75046;}
code .token.selector,code .token.attr-name,code .token.string {color:#88a9ad;}
pre code .token.selector,pre code .token.attr-name {color:#00a1d6;}
pre code .token.string {color:#6fb401;}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {color:#5ac954;}
code .token.operator {color:#1887dd;}
code .token.atrule,code .token.attr-value {color:#009999;}
pre code .token.atrule,pre code .token.attr-value {color:#1baeb0;}
code .token.keyword {color:#e13200;font-style:italic;}
code .token.comment {font-style:italic;}
code .token.regex {color:#ccc;}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
pre code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
.comments pre {padding:10px 10px 15px 10px;background:#333;border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);text-shadow:0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::before {content:&#39;Code&#39;;font-size:10px;font-weight:700;position:relative;top:0;background-color:#363636;padding:2px 8px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;border:none;border-radius:2px;border:1px solid #2a2a2a;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 20px 20px rgba(255,255,255,0.1);text-shadow: 0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::after {font-size:11px;}
.comments pre code {color:#aaa;}
.comments pre.line-numbers {padding-left:10px;}
pre.line-numbers {position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers &gt; code {position:relative;}
.line-numbers .line-numbers-rows {height:100%;position:absolute;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#444;}
.line-numbers-rows &gt; span {display:block;counter-increment:linenumber;}
.line-numbers-rows &gt; span:before {content:counter(linenumber);color:#aaa;display:block;
padding-right:0.8em;text-align:right;transition:350ms;}

الخطوة الثانية: إبحث عن هذا الوسم </body> وضع الكود التالى قبلة مباشرة

<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/pismaa.js' type='text/javascript'/>
<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
</script>

* الآن قم بحفظ القالب ولإستخدام هذا النموذج عند إنشاء موضوع جديد إختار HTML وضع الكود التالى 

<pre title="HTML" data-codetype ="HTMLku">
<code class="language-markup"> ... YOUR HTML CODE HERE ... </code></pre> <pre title="CSS" data-codetype ="CSSku">
<code class="language-css"> ... YOUR CSS CODE HERE ... </code></pre> <pre title="Javascript" data-codetype ="JavaScriptku">
<code class="language-javascript"> ... YOUR JAVASCRIPT CODE HERE ... </code></pre> <pre title="jQuery" data-codetype ="JQueryku">
<code class="language-javascript"> ... YOUR jQuery CODE HERE ... </code></pre>

وضع كل كود فى المكان المخصص له

تابع القراءة

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

هل لديك موقع / مدونة وتريد نشر كل ما هو جديد على مواقع السوشيال ميديا تلقائى بدلاً من الطريقة العادية هذا ما سنتكلم عنه من خلال هذة التدوينة البسيطة سنشرح لك كيفية النشر التلقائى لتدويناتك على تويتر وفيس بوك والآن دعنا نشرح لك الطريقة بسيطة وسهلة جداً .

اولاً: سنتوجه إلى هذا الرابط feedburner.google.com 

والآن إختار إضافة تغذية جديدة 

 

قم بكتابة رابط موقعك فى المكان المخصص

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

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

تابع القراءة

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

إضافة التسجيل فى القائمة البريدية بطريقة أنيقة عن طريق رسالة منبثقة بتقنية الـ css3&jquery تعطى مظهراً رائعاً فى مدونتك وهذة الإضافة هى هامة فى متابعة زوارك لكل جديد لديك فننصح بتركيبها.

معاينة الإضافة 

شرح التركيب الإضافة:

1.  لوحة التحكم من هنا >> تحرير القالب >> ثم أضف كود css قبل هذا الوسم </style>

#sub-box {
display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {background:#fff;border:8px solid #fff;width:600px;height:250px;position:absolute;top:33%;left:28%;}
#closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}
#closebox:before {content:&quot;إغلاق&quot;;padding:5px 8px;background:#fff;color:#48cb7a;font-weight:normal;font-size:12px;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box {width:600px;height:250px;background-color:#02BA74;}
#subscribe-box p {font-size:18px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;font-family: DroidKufi-Bold;
}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;;width:96.3%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:normal;font-size: 16px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{font-family: DroidKufi-Bold;
background:#fff;color:#444;}

ـــ الآن إحفظ القالب >> إذهب إلى التخطيط وإضافة أداة جديدة HTML&javascript وأضف الكود التالى

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#sub-box').delay(3000).fadeIn('fast');
$('#closebox, #boxclose').click(function(){
$('#sub-box').stop().fadeOut('fast');
});
}
});
</script>
<div id='sub-box'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='subscribe-box'>
                 <center><p>سجل معنا لكى يصلك كل جديد</p></center>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify?uri=hadystore/hmBDo' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=hadystore/hmBDo, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;أدخل إسمك&quot;;}' onfocus='if (this.value == &quot;أدخل إسمك&quot;) {this.value = &quot;&quot;;}' value='أدخل إسمك'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;أدخل بريدك الإلكترونى&quot;;}' onfocus='if (this.value == &quot;أدخل بريدك الإلكترونى&quot;) {this.value = &quot;&quot;;}' value='أدخل بريدك الإلكترونى'/>
<input name='uri' type='hidden' value='hadystore/hmBDo'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='سجل الآن!'/>
              </form>
             </div></div>
</div>
</div> 

 ـــ ثم قم بتغييرهذا الإسم hadystore/hmBDo بإسم موقعك فى feedburner شرح الحصول عليه

إذا إستفدت من هذة التدوينة لا تتردد فى مشاركتها مع زملائك

تابع القراءة

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

نوع الملف: .JPEG
    حجم الملف: 64.3 MB
تحميل الملف
تم تحديث رابط التحميل

تابع القراءة

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

بالتاكيد أصبحت التصميمات مفتوحة المصدرتساهم بشكل كبير فى توفير الوقت والجهد وخصوصاً الملفات الخاصة بتاثيرات الكتابة والنصوص لهذا وضعنا هذا الملف للتحميل  ملف مفتوح المصدر لتاثير neon-light على النص + شرح كيفية التعديل عليه.

تحميل الملف

تابع القراءة