-->

العد التنازلي لرمضان 2017

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

دروس البلوجر
ولإضافة هذه الخاصية الجديدة لمدونتك كل ما عليك فعله الذهاب إلى  مباشرة إلى  تذهب إلى لوحة تحكم مدونتك وتضغط على قالب ثم تحرير html وتضع العلامة على  مربع توسيع قالب واجهة المستخدم ثم تضغط في الكيبورد على ctrl+f وتبحث عن هذا الكود 

]]>

بعد أن تجده قم بإضافة هذا الكود قبله

img,a{border:0}#on{visibility:visible}#off{visibility:hidden}#facebook_div{width:196px;height:340px;overflow:hidden}#twitter_div{width:246px;height:353px;overflow:hidden}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px}#knfeedburner_div{width:300px;height:97px;overflow:hidden;margin-top:5px;margin-left:-4px}#kakinetwork_div{width:300px;height:97px;overflow:hidden}#facebook_right{z-index:10005;border:2px solid#3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px}#facebook_right img{position:absolute;top:-2px;left:-35px}#facebook_right iframe{border:0px solid#3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px}#twitter_right{z-index:10004;border:2px solid#6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0}#google_plus_right{z-index:10003;background-color:#F2F2F2;border:2px solid#006ec9;border-top:2px solid#0056a0;border-bottom:2px solid#0056a0;border-right:2px solid#0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid#5b5b5b;border-top:2px solid#5b5b5b;border-bottom:2px solid#5b5b5b;border-right:2px solid#5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0}#kakinetwork_right{z-index:10003;border:2px solid#303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_right img{position:absolute;top:-2px;left:-101px}#facebook_left{z-index:10005;border:2px solid#3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px}#facebook_left img{position:absolute;top:-2px;right:-35px}#facebook_left iframe{border:0px solid#3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px}#twitter_left{z-index:10004;border:2px solid#6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid#006ec9;border-top:2px solid#0056a0;border-bottom:2px solid#0056a0;border-left:2px solid#0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid#5b5b5b;border-top:2px solid#5b5b5b;border-bottom:2px solid#5b5b5b;border-left:2px solid#5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0}#kakinetwork_left{z-index:10003;border:2px solid#303030;background-color:#fff;width:300px;height:97px;position:fixed}#kakinetwork_left img{position:absolute;top:-2px;right:-101px}.box-title1{border:1px solid#ddd;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:5px 5px 5px#CCCCCC;-moz-box-shadow:5px 5px 5px#CCCCCC;box-shadow:5px 5px 5px#CCCCCC;padding:10px;margin:10px 0}.enteryouremail{background:#fff!important;border:1px solid#d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px}.submitbutton{background:#F2F2F2;border:1px solid#F66303;-webkit-box-shadow:3px 3px 3px#666;box-shadow:3px 3px 3px#666;font:bold 12px Arial,sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;-webkit-border-radius:5px;border-radius:5px;cursor:pointer}

بعد أن تضيف هذا الكود قم بحفظ التغييرات وقم بالذهاب إلى لوة تحكم مدونتك واضغط على التخيط ثم على إضافة أداة وتختار html/java script وتضع هذا الكود داخل المربع 




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTBiQsUxyI1cTa9voV_3asmmMaitbu1kx6QCDovgpbC0FOtdaqU6_jzfWbmTVBGwPdePSFzyOZvNSGwu1dU8mI5jlKPESZuEZUMK57QyC_3A4C4CxAlccEfzRQxS3QoCcDys-juq-SbJG_/s1600/facebook-icon.png" alt=""/><iframe src="//www.facebook.com/plugins/likebox.php? href=http%3A%2F%2Fwww.facebook.com%2F856865GG&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnSVSTLD-OG89N-3qD2soBaNP2kEoQbC2_FEjWP_YkekKUkLLsmdC6fSJf-flOnAAKilbYa2VIpbRoeyo7-pL4dq-S-wi86_RDBafaHiQbUnnR10qXyXZleQGfI8vNG2GnuXg5wUjNrhNw/s1600/twitter-icon.png"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }})
.render().setUser('bhgytrfdes2').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV0cIOOUsNMmKYbRHkwL-7woczxkL7X-3kMz2TXjKIHzp81NsIsYjRp2IVQwDiXVHIFFdw2lfR19Td0xPY7hAzRlFmeoKhd4_oo3E3xwzonMmcmo7wChwSehqrkno_K4aJPjNZfionN5qw/s1600/google-plus-icon.png"/><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">سجل إميلك وتوصل بمواضيعنا :</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=modmin-fic', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="" onblur="if (this.value == &#39;&#39;) {this.value = &#39;أدخل إميلك هنا ...&#39;;}" onfocus="if (this.value == &#39;أدخل إميلك هنا ...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="modmin-fic" name="uri" type="hidden"/><input value="أرسل" class="submitbutton" type="submit"/></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2skyDFSzDiKEo1HFdgU2fRSECWBmJ80Wt9HNmTG6gauS4G0ZjPxekqb2v-yb7FMRz86gxyBHXsnWpCLJz3oPCxGH-zret4E-HDPFzsHOodeooP5t0LnI4_tFNrpfM7Xn4aSaSV0Cajus/s1600/rssfeed.png"/></div></div></div></div> 


قبل حفظ التغييرات قم بتغيير التالي :

إستبدل ما  باللون  الأحمر  بحسابك علي الفيسبوك
إستبدل ما  باللون الأخضر بحسابك على التويتر
إستبدل ما باللون الوردي بحسابك علي الفيدبيرنر


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

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




عمل خريطة لمدونتك وإضافتها إلى حسابك في بلوجر .add-sitemap-google





كل ما عليك فعله هو الذهاب إلى هذا الموقع لعمل خريطة لموقعك



 http://ctrlq.org/blogger


ضع في الإطار التالي رابط مدونتك كما هو مبين في هاته الصورة






عمل خريطة لمدونتك وإضافتها إلى حسابك في بلوجر .add-sitemap-google




إضغط على generate sitemap  لتوليد الكود الذي هو خريطة مدونتك ، بعد ذلك سوف تحصل على هذا الكود كما في الصورة التالية
عمل خريطة لمدونتك وإضافتها إلى حسابك في بلوجر .add-sitemap-google



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


عمل خريطة لمدونتك وإضافتها إلى حسابك في بلوجر .add-sitemap-google
إضافة تسمية توضيحية




ثم إضغط على تفضيلات البحث كما هو ظاهرفي هاته الصورة


عمل خريطة لمدونتك وإضافتها إلى حسابك في بلوجر .add-sitemap-google


 بعدها أنقر على تحرير لملف robots.txt كما هو ظاهر في الصورة


عمل خريطة لمدونتك وإضافتها إلى حسابك في بلوجر .add-sitemap-google


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



عمل خريطة لمدونتك وإضافتها إلى حسابك في بلوجر .add-sitemap-google



لا تنسى أن تضع العلامة على مربع نعم ، ثم قم بحفظ التغييرات ، ومبروك عليك الأرشفة القوية على محركات البحث.




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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F )
]]></b:skin>
ثم قم بوضع الكود التالي قبله
.post img {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}

.post img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}
يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك  سواء على اليسار أم على اليمين وذلك بإستبدال الرمز (+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس  وتمثل كذلك القيمة  1deg- درجة الميلان عند وضع مؤشر الماوس على الصورة .

والتتيجة تكون الصورة على هذا الشكل .

هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة،في إنتظار آرائكم وإستفساراتكم حول الموضوع .





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








<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
قم بوضع الكود التالي بعده ل لحصول على هذا الرمز :
<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'>
</script>
</div>
ولإختيار الرمز الصغير قم بوضع هذا الكود التالي بدلا من الكود السابق:
<div style='float:left; margin-right:10px;'>
<script type="text/javascript">
tweetmeme_style = "compact";
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
يمكنك وضع الرمز في جانب التدوينات كما هو موضح في الصورة و ذلك بوضع أحد الكودين السابقين (حسب الرغبة) قبل الكود التالي :
<data:post.body/>






السلام عليكم إخواني الكرام في هذه الفقرة سوف نتعلم كيفيية إضافة أداة "مواضيع ذات صلة' و هي عبارة عن روابط لمقالات مقترحة من نفس المدونة يتم إضافتها تحت المواضيع حيث أن هذه العناوين تكون ذات صلة بالموضوع الذي يقرؤه الزائر مما يسهل عليه الإطلاع على مواضيع أخرى.و الجميل في ذلك أن هذه الروابط تكون مصحوبة بصور الموضوع, بدون إطالة عليك إتباع التعليمات التالية:

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.
</head>
ثم ضع الكود التالي فوقه :
<!-- www.monte-escalier-prix.org Related Posts with thumbnails -->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig230m9WrebWDB-Su9zj5qe6nPB_9vsVS2rz4jCS44G0nRQXADnfjKRxmjiBjZEaxBhjuPw1ukh8OWpn8eO95lr5VbedVMZnqAfVgoFk-VfN7G3wApdv5gcOI0mePiJSzV1qYBQ668KK8/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="مواضيع ذات صلة ";
</script>
<script src='http://sites.google.com/site/lightbox007/abuiyad/related-posts-with-thumbnails-for-blogger-pro.js.txt' type='text/javascript'/>
<!-- remove --></b:if>
<!--www.pergola-bois-terrasse.org Related Posts with thumbnails -->

ملاحظة : يمكنك تغيير كلمة "مواضيع ذات صلة" بأي جملة تريد .
ثم قم بالبحث عن الكود التالي :
<div class='post-footer-line post-footer-line-1'>
فإن لم تجده إبحث عن هذا الكود :
<p class='post-footer-line post-footer-line-1'>

ثم قم بوضع الكود التالي تحت الكود الذي وجدته من بين الكودين السابقين :
<!-- www.monte-escalier.org Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://abu-iyad.blogspot.com/2010/07/related-postssimilar-posts-widget-for.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='www.monte-escalier-prix.org' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
ملاحظة : يمكنك تغيير الرقم 5، وهو يدل على عدد المواضيع ذات الصلة التي سيتم عرضها.
أخيرا قم بحفظ القالب و إذهب للمعاينة
أنتظر تشجيعاتكم



جميع الحقوق محفوظة 2013-2017 ل عرب جوجل
تصميم : مستر ابوعلى