آخر التدوينات

كولكشن خلفيات متنوعة 2016

كولكشن خلفيات متنوعة 2016

السلام عليكم ورحمة الله وبركاتة 
 متابعينا الكرام إذا كنت من المهتمين بكل جديد بالنسبة للخلفيات لجهازك حمل الآن مجموعة خلفيات جديدة 2016 متنوعة و بمقاسات مختلفة تناسب جميع الأجهزة حقاً كولكشن رائع مناسب للجميع لانه كما ذكرنا يحتوى على مجموعة صور متنوعة .
- عدد الخلفيات : 232       
 - حجم الملف : 162.7 MB
خلفيات شهر رمضان الكريم 2016

خلفيات شهر رمضان الكريم 2016

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

مخطوطات وخلفيات 2016 بمناسبة شهر رمضان EPS

شهر رمضان المبارك اعاده الله علينا بالخير والبركات فهو شهر للصيام والقيام وحسن العبادات وفيه تفتح أبواب الجنان وتغلق أبواب النيران وبهذة المناسبة الكريمة نقدم لك مخطوطات شهر رمضان الكريم + صور ستوكات بجودة عالية جداً وبدقة إحترافية بصيغة EPS والآن لمشاهدة الملحق و للتحميل .
مخطوطات شهر رمضان الكريم


تحميل الصـــــــــور
طريقة وضع خلفية للنص داخل المواضيع

طريقة وضع خلفية للنص داخل المواضيع

بسم الله الرحمن الرحيم / السلام عليكم ورحمة الله وبركاتة
دروس عديدة لتخصيص التدوينة / الموضوع فى مدونات بلوجر سنشرح الآن كيفية إضافة خلفية للنص / صورة داخل مواضيع بلوجر إضافة كود بسيط جداً لإضافة خلفية للنص من خلال تستطيع تخصيص الخلفية كيفما شئت والآن تابع الشرح .
  1. قم بكتابة موضوع جديد عادى جداً ولكن إختر محرر HTML التدوينة مثل الصورة التالية 
 
 * ستستخدم الكود التالى إذا كنت تريد خلفية لون فقط ولمزيد من اكواد الالوان قم بزيارة هذة الصفحة من هنا
    <div style="background-color: #444; color: #fff; padding: 10px;">ضع النص الخاص بك هنا</div>
* وهذا الكود إذا كنت تريد وضع صورة كخلفية للنص 
    <div style="background: url(رابط الصورة هنا); background-size: cover; color: #000; padding: 10px;">النص الخاص بك هنا </div>
صورة توضح كيفية وضع الخلفية من محرر التدوينة


حل مشكله No data فى تصنيف موقعك لدى اليكسا

حل مشكله No data فى تصنيف موقعك لدى اليكسا

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

طريقة إزالة التمدد فى قوالب بلوجر

السلام عليكم ورحمة الله وبركاتة
نتحدث اليوم عن مشكله تحدث عند البعض عند تركيب بعض قوالب بلوجر وهى " تمدد القوالب " بمعنى تكون مساحة فارغة بالجنب أو يكون جزء من المدونة وهذا ما سنوضحة من خلال هذة التدوينة البسيطة حل هذة المشكله بسيط جداً وهو إضافة كود بسيط جداً لكى تختفى هذة المشكلة : إبحث عن هذا الوسم ]]></b:skin> وضع الكود التالى قبله / أعلاه
 html {overflow-x: hidden;} 
- ولكن بعض القوالب تظهر الزيادات بشكل مختلف يعنى يكون جزء من محتوى المدونة نفسه خارج عرض الشاشة لديك وفى مثل هذة الحالة فإن المشكله ليست كما قلنا من قبل ولكن يحتاج للتعديل البسيط على القالب شاهد الصورة التالية : -
  •  شاهد الصورة السابقة لأحد المدونات القالب به 2 سيد بار + المحتوى الجزء المحدد باللون الأحمر مساحة كبيرة وعلى اليسار السيد  بار لم يظهر كاملاً ليست المشكله بالسيد بار 2 ولكن فى تقليص المساحة فى هذة المشكله تحتاج لتقليل المساحة قليلاً تقليل عرض المواضيع أو السيد بار بالجهة اليسرى .
شكراً لكم وأتمنى التوفيق للجميع
موك أب تاثير على النص مع شرح التعديل

موك أب تاثير على النص مع شرح التعديل

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

بوستر إحترافى جاهز للتعديل

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

خط Pacha الأكثر جمالاً واناقة

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

تحميل خط BlowBrush

السلام عليكم ورحمة الله وبركاتة ... تحميل خط 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="http://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/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(http://1.bp.blogspot.com/-rh-PYvqjzSs/VPTARkPOSVI/AAAAAAAALC4/GyFFEnl2TO8/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(http://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/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 شرح الحصول عليه
إذا إستفدت من هذة التدوينة لا تتردد فى مشاركتها مع زملائك
جميع الحقوق محفوظة © 2016 - 2014 | مدونة هادى ستور