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

مرحباً بكم إخوانى الكرام مشكله بسيطة وشائعة لدى البعض وهو عند إضافة مربع إحصائيات اليكسا تجد عبارة 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 على النص + شرح كيفية التعديل عليه.

تحميل الملف

تابع القراءة

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

معاينة القــــالب

 مميزات القالب:

1. قالب إحترافي أنيق وجذاب متوافق مع أغلبية متصفحات الويب
2. ألوان هادئة وبسيطة 
3. به قائمة علوية وسفلية+ أزرار المواقع الإجتماعية
4. وحدة إعلانية داخل الهيدر+ مربع بحث داخل المدونة بشكل إحترافي
5. شكل إنسيابى وجديد لعرض التدوينات بشكل لطيف 
6. عرض المشاركات الشائعة وأقسام المدونة بشكل مختلف
7. مزود ب3 أعمدة أسفل الهيدر + أداة لعرض أهم تدوينات أو أعمالك فى الأاسفل
8. عرض معلومات عن الكاتب + مربع الفيس بوك + أزرار المشاركة أسفل كل تدوينة
9. زر الصعود إلى الأعلى + النسبة المئوية لشريط التمرير
10. أزرار إحترافية زر التحميل والمعاينة وأزرار أخرى

صورة للقالب من مدونة هادى ستور

تخصيص القالب:-
- أزرار المواقع الإجتماعية للتخصيص إبحث عن هذا الكود sorting-01 وستجد الروابط الثلاثة غيرها بما يناسبك

- لتغيير البنر الإعلانى واللوجو سنبحث عن عن هذا الكود mygallery للوجو والبنر adstore

- لتخصيص كود المواضيع الهامة أسفل المدونة إبحث عن wowpost

<h1 class='wowpost'>قوالب هادى ستور</h1>
<div class='latest-news-container' id='latest-news-container'>
<div class='single-wrapper'>
<div class='single-item single-item-1'>
<div class='single-item-main'>
<div class='single-icon'>
<ul class='grid cs-style-5'>
<li>
<figure>
<img height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8kYLIDZBhpE8HX6K__YTErFaXuyOsTZD8TMoVSCsP5B0LvHiFBhCPK6r-8S8H6M_v2dYHO2mJe2Y9nlR5f5IpX8YxSQvFnuKkbkgI5ea1ovxW54jrrYDTMPGVoRBlkgcV3IgljhHCJQnV/s1600/%D9%85%D8%AF%D9%88%D9%86%D8%A9+%D9%87%D8%A7%D8%AF%D9%89+%D8%B3%D8%AA%D9%88%D8%B1.jpg' width='380'/>
<figcaption>
<h3>قالب Hippo mag</h3>
<span>مجانا</span>
<a class='mana' href='http://hadystore.blogspot.com/2015/04/hippo-mag.html' target='_blank'>
<button class='btn btn-blue btn-3blue fa fa-share'>ألقي نظرة</button>
</a>
</figcaption>
</figure>
</li>
</ul>
</div>
<!-- single-item-main -->
</div>
<!-- Single Item Main -->
</div>
<!-- Slide 2 -->
<div class='single-item single-item-1'>
<div class='single-item-main'>
<div class='single-icon'>
<ul class='grid cs-style-5'>
<li>
<figure>
<img height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVHFghmc-hHkLTqk-qDtqYyKbHwI4lMTRfLyJBbeV5l-XZnRCfgLNWh3FVlGxF11IZRHdj7cMqm8gvnfyc1ci5VJAbkWiuHzyvBWc8mRljuAFXOuOy639C_p97JOsop_rHIAaspQPKB5nr/s1600/hady+store.png' width='380'/>
<figcaption>
<h3>قالب مدونة مدو&#1617;ن</h3>
<span>مجانا</span>
<a class='mana' href='http://hadystore.blogspot.com/2015/04/blog-post.html' target='_blank'>
<button class='btn btn-blue btn-3blue fa fa-share'>ألقي نظرة</button>
</a>
</figcaption>
</figure>
</li>
</ul>
</div>
<!-- single-item-main -->
</div>
<!-- Single Item Main -->
</div>
<!-- Slide 3 -->
<div class='single-item single-item-1'>
<div class='single-item-main'>
<div class='single-icon'>
<ul class='grid cs-style-5'>
<li>
<figure>
<img height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM2zO47Zi6qbXv4AZt_JkVNztVtfBeKY9Oyla9noC_4-kqy0zxSPR_o8Ipto8sOxE_nLlu_gQHpXi3kGxc1ME6oBz8MnAf2Fwv9pwXzYxyjtONbD_-La8YzvXwbUJmpG8QB10L0igjdrka/s1600/%D9%85%D8%AF%D9%88%D9%86%D8%A9+%D9%87%D8%A7%D8%AF%D9%89+%D8%B3%D8%AA%D9%88%D8%B1.jpg' width='380'/>
<figcaption>
<h3>قالب Elegant</h3>
<span>v.1</span>
<a class='mana' href='http://hadystore.blogspot.com/2015/05/eleganttemplate.html' target='_blank'>
<button class='btn btn-blue btn-3blue fa fa-share'>ألقي نظرة</button>
</a>
</figcaption>
</figure>
</li>
</ul>
</div>
<!-- single-item-main -->
</div>
<!-- Single Item Main -->
</div>
<!-- Slide 4 -->
<div class='single-item single-item-1'>
<div class='single-item-main'>
<div class='single-icon'>
<ul class='grid cs-style-5'>
<li>
<figure>
<img height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5NkJaq_MtrFZJs_G90OELGc7n_-2ZWyVimAgwAsjuJEohkrBebJuFe0h_847FyJ7yCbP65ttRVvwCxGtjDOmvJv05c91jkVw-yUdnyG-zkFm4QKBAxAZaBamnYD0vJRS-DuPA-ZExIfVE/s1600/hady-store.jpg' width='380'/>
<figcaption>
<h3>تحت الإنشاء </h3>
<span>إنتظرونا</span>
<a class='mana' href='#' traget='_blank'>
<button class='btn btn-blue btn-3blue fa fa-share'>ألقي نظرة</button>
</a>
</figcaption>
</figure>
</li>
</ul>
</div>
<!-- single-item-main -->
</div>
<!-- Single Item Main -->
</div>
<!-- Slide 4 -->
<div class='single-item single-item-1'>
<div class='single-item-main'>
<div class='single-icon'>
<ul class='grid cs-style-5'>
<li>
<figure>
<img height='240' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5NkJaq_MtrFZJs_G90OELGc7n_-2ZWyVimAgwAsjuJEohkrBebJuFe0h_847FyJ7yCbP65ttRVvwCxGtjDOmvJv05c91jkVw-yUdnyG-zkFm4QKBAxAZaBamnYD0vJRS-DuPA-ZExIfVE/s1600/hady-store.jpg' width='380'/>
<figcaption>
<h3>تحت الإنشاء</h3>
<span>إنتظرونا</span>
<a class='mana' href='#'>
<button class='btn btn-blue btn-3blue fa fa-share'>ألقي نظرة</button>
</a>
</figcaption>
</figure>
</li>
</ul>
</div>
</div>

- لتعديل نبذة عن الكاتب أسفل التدوينة إبحث عن هذا الوسم pro-me-left وغير بما يناسبك

- والأكواد الخاصة بالأزرار مع شكل كل زر كما هو موضح امامكم

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

<a class="button" src="...">الزر الأبيض</a>
<a class="blueButton" src="...">الزر الأزرق</a>
<a class="redButton" src="...">الزر الأحمر</a>
<a class="orangeButton" src="...">الزر البرتقالي<a>
<a class="button down" src="...">زر التحميل<a>

arabsh / up-00 / gulfupz / ziddu / filerio / 4downfiles / turbobit / file4down
نذكركم دائماً إذا كان هناك اى مشاكل فى روابط التحميل بلغ فى هذة الصفحة هنا

تابع القراءة

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

ما هى خاصية Tooltip css :

هى عبارة عن مربع معلومات إضافية تستطيع إضافتها فى أى صورة أو رابط فى مدونتك عند مرور الماوس على الصورة أو اللينك تظهر الرسالة أو التعريف الذى قمت بكتابتة فوق اللينك بشكل جيد.                      معاينة بسيطة
مثــــــــــــال:

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>
<div class="tooltip">مدونة هادى ستور
  <span class="tooltiptext">مخزنك المفضل</span>
</div>            

توضيح أكثر:

* عليك اولاً بكتابة الكود بلغة الـ HTML وإستخدام عنصر <div> مثل ما هو موضح فى المثال السابق هذا يتطلب ولو معرفة بسيطة عن HTML & CSS لإنجاز هذا العمل وحتى إذا كنت لا نجيد هذا لا عليك سأوجهك على موقع يقوم بعمل هذا والآن دعنا نوضح لك كلمة ( مدونة هادى ستور ) هى الكلمة الأساسية ولكن نحتاج ان نجلب كود الكلمة الذى سيظهر عند مرور الماوس سنحتاج لهذا العنصر وجلبة فى الكود <span> ونعطى له class أى تعريف له مثل مخزنك المفضل ستلاحظ
<span class="tooltiptext"> هذا كل ما نفعله بإستخدام HTML ، والآن عليك إنجاز الجزء الأكبر وهو إكمال المهمة بإستخدام CSS .

* بإستخدام CSS راح نظبط خاصية tooltip إذا لاحظنا المثال السابق سنجد خاصية position وهى خاصة بضبط الكلمة هذة تكلمنا عنها فى تدوينة سابقة توجهة إليها من فضلك إذا كنت تريد معرفة الخواص بهذة الخاصية الذهاب للتدوينة .

- راح نظبط الآن الألوان و padding و border-radius والخاصة بالحواف الدائرية إذا أحببت إضافتها

ضبط وضع التلميحات:

- يمكنك التحكم فى وضع التلميحات على أى جهة تريدها يمين،يسار،أعلى،أسفل هذا ما سنوضحة الآن.

- إذا أردناوضح التلميحات من جهة اليمين سنستخدم هذا

.tooltip .tooltiptext {
    top: -5px;
    left: 105%;
}

وإذا أردت إظهارها من جهة اليسار سيتم وضع هذا الكود :

.tooltip .tooltiptext {
    top: -5px;
    right: 105%;
} 

 أم إذا أردت أن تظهر فى الأعلى أو الأسفل ولاحظ إستخدامنا margin-left

 .tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
} 

* Tooltip Arrows

يعنى التحكم فى السهم الخاص بالمعلومات الإضافية الذى ستضاف يمكنك التحكم به لإظهارة فى جنب معين فعليك لإستخدام class ::after مع إستخدام الـ content بعد إضافة هذا سيظهر وكانه فقاعة كلام مثال للتوضيح بعد إضافة السهم

.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

معاينة بعد إضافة السهم

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

تابع القراءة

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

الذهاب للموقع

* سنقوم بإختيار الصورة ثم الضغط على الكلمة التى بداخل المستطيل

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

تابع القراءة