احدث اضافات مدونات بلوجر لتهيئتها لمحركات البحث وتصدر نتائج البحث

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

احدث اوصاف الميتاتاغ في مدونات بلوجر لتقوية الارشفة

طريقة الاضافة  :

• اولا نذهب الى لوحة التحمكم بلوجر
• ندخل الى القالب ونختار تحرير HTML 
• ثم نبحث عن هذا السطر ستجده في بداية القالب

• نقوم باستبدال الكود الموضح أعلاه بهذا الكود 

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

لتحميل اوصاف الميتاتاغ المستعملة في الشرح

اضغط هنا

سلايد شو بسيط وتلقائي واحترافي للبلوجر ( سهل التركيب )

هناك الكثير من الاضافات المميز على قالب موقعك بكل تأكيد من الاضافات التي لا يستغنى عنه في اي قالب هو السلايد شو فلا يستغنى عنها في اي قالب لاي موقعك فله الكثير من المميزات ويساعد على عرض مواضيع موقعك بطريقة مميزة ولفت انتباه الزائر .

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

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

• قم بالذهاب الى التخطيط 
• قم باضافة اداة جديدة 
• قم باضافة الكود الاتي 
• يمكنك تحميل الكود من هنا 

<style>

#featuredpost {padding: 10px;}

#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}

#slides ul{height:320px}

#slides li{width:50%;height:100%;position:absolute;display:none}

#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}

#slides li:nth-child(1){left:0;top:0}

#slides li:nth-child(2){left:50%;width:25%;height:50%}

#slides li:nth-child(3){left:75%;width:25%;height:50%}

#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}

#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}

#slides li:nth-child(1) h4 {overflow:hidden;font-size:15px;bottom:0;color:#fafafa;width:100%;

padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);

height:90px;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}

#slides li:nth-child(1) .label_text {font-size:20px;display:block;bottom:10px;left:10px;

padding:0;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}

#slides li:nth-child(1) span.dd {display:block;font-size:20px;padding:12px 15px;

background:#FC4F3F;margin:0;}

#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;

padding:5px 21px;text-transform:uppercase;margin:0;}

#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}

#slides a{display:block;width:100%;height:100%;overflow:hidden}

#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}

#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}

#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}

#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;

left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;

background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}

#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;

position:absolute;background:#FC4F3F;padding:3px 6px;

text-transform:uppercase;}

#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}

#slides .overlayx,#slides li{transition:all .4s ease-in-out}

#slides li:nth-child(1) .overlayx{display:none;}

#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){

#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){

#slides ul{height:600px}

#slides li:nth-child(1){width:100%;height:50%}

#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}

#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}

#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}

#slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){

#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

</style>

<div id="featuredpost"></div>

<script type="text/javascript" src="https://googledrive.com/host/0B7EdpK5Vun4YcGJMbnU2T3RMV0k"></script>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

FeaturedPost({

blogURL:"http://www.almtwr.net",

MaxPost:8,

idcontaint:"#featuredpost",

ImageSize:500,

interval:10000,

autoplay:true,

tagName:false

});

});

//]]>

</script>

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

 في نهاية الموضوع لاتنسى مشاركة الموضوع مع اصدقائك على مواقع التواصل الاجتماعية ولاتنسى ترك تعليق .

اضافة تغيير حجم ونوع الخط والتحكم في لون خلفية المدونه بلوجر

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

طريقة التركيب :

1. قم بالذهاب الى لوحة تحكم بلوجر 
2. ثم قم بالذهاب الى التخطيط 
3. قم باضافة اداة HTML/Javascript
4. وقم باضافة الكود الأتي يمكنك تحميلة من هنا 

<style>
#cnmustylechanger {height: 180px;}
#stylechanger {
  background:#FFFFFF;
  border-collapse: collapse;
  border-radius: 5px;
  box-shadow: 0 0 2px #222222;
  display: block;
  font: 10px tahoma;
  height: 170px;
  margin-top: 10px;
  text-align: right;
  width: 235px;
}
#stylechanger th,
#stylechanger td {
  vertical-align:middle;
  border:none !important;
  padding:2px 5px;
}
#stylechanger th.title {
  background-color:#33AFE0;
  padding:5px 10px;
  margin:0 0 10px;
  text-transform:uppercase;
  font-size:12px;
  font-family: Arial,Sans-Serif;
  color: #FFF;
}
#stylechanger select,
#stylechanger input[type="text"] {
  width:128px;
  padding:2px;
  font:bold 11px Arial,Sans-Serif;
  display:block;
  margin:0 0 0;
  height:24px;
  outline: 0;
}
#stylechanger select option {
  padding:5px 10px;
  cursor:pointer;
}
#stylechanger button {
  cursor: pointer;
  font: 12px tahoma;
  padding: 2px 5px 5px;
  width: 128px;
}
#stylechanger #bgColorer {
  overflow:hidden;
  margin:10px 15px 10px 0;
}
#stylechanger #bgColorer span {
  display:block;
  float:right;
  width:20px;
  height:20px;
  border:1px solid black;
  margin:0 5px 0 0;
  cursor:pointer;
}
#stylechanger input[type="text"] {
  width:118px !important;
  padding:4px !important;
  height:auto !important;
}
</style>
<center>
<div id="cnmustylechanger">
<table border="0" id="stylechanger">
     <tr>
        <td colspan="2">
            <div id="bgColorer">
                <span style="background-color:#523690;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#248bcb;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#fed100;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#c91212;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#3a9838;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#36404a;" onclick="bgSwitch(this.style.backgroundColor);"></span>
                <span style="background-color:#ffffff;" onclick="bgSwitch(this.style.backgroundColor);"></span>
            </div>
        </td>
    </tr>
    <tr><th>نوع الخط</th>
        <td>
            <select onchange="fontSwitch(this.value);">
                <option selected />--
                <option value="&#39;Book Antiqua&#39;,Serif" />Book Antiqua
                <option value="&#39;Times New Roman&#39;,Serif" />Times New Roman
                <option value="Georgia,Serif" />Georgia
                <option value="Arial,Sans-Serif" />Arial
                <option value="Tahoma,Verdana,Arial,Sans-Serif" />Tahoma
                <option value="&#39;Trebuchet MS&#39;,Arial,Sans-Serif" />Trebuchet
                <option value="Verdana,Arial,Sans-Serif" />Verdana
                <option value="&#39;Century Gothic&#39;,Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic
                <option value="&#39;Comic Sans MS&#39;,Serif" />Comic Sans
            </select>
        </td>
    </tr>
    <tr><th>لون الخط</th>
        <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>
    </tr>
    <tr><th>حجم الخط</th>
        <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>
    </tr>
    <tr><th>إستعادة الإفتراضي</th>
<td><button onclick="resetStyle();">إستعادة</button></td>
</tr>
</table>
</div>
</center>
<script src='https://cnmu.googlecode.com/svn/trunk/2014/theme-style.js' type='text/javascript'/></script>

اضافة صندوق التعليقات disqus الأحترافية لموقعك [بلوجر]

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

يمكنك معاينة صندوق تعليقات disqus  في أسفل هذه الموضوع ستجد صندوق التعليقات ولاتنسى التعليق حتى تجرب نظام التعليق :P

في البداية قم بالذهاب الى الرابط الأتي
https://disqus.com
قم بالتسجيل عن طريق بروفايلك في الفيس بوك او جوجل بلس + أو قم بالتسجيل في الطريقة العادية وقم بتأكيد حسابك عن طريق البريد الالكتروني

بعد الدخول الى الحساب قم بالذهاب الى Add Disqus to your site أو من الرابط الأتي
https://disqus.com/admin/create
وقم بوضع أسمك وبعد ذلك ضع أسم المستخدم وتابع الشرح كما في الصورة

بعد ذلك سيظهر لك كما في الصورة العديد من منصات تصميم مواقع الأنترنت الأكثر شهرة كالبلوجر والووردبريس وغيرها المنصات قم باختيار التي تستخدمها

بعد ذلك سواء أخترت واحدة من الخيارات مثلا بلوجر قم بالظغط على Add to blogger والووردبريس وباقي المنصات بنفس الخيار وبعد ذلك سيتم أضافة نظام التعليقات اليكم موقع وسيبدأ بالعمل مباشراً أتمنى ان يكون الشرح قد نال أعجابكم في حال واجهتك مشلكة لاتترد بترك تعليق 

اضافة المواضيع العشوائية بشكل منسق وأحترافي بلوجر 2015

أهلا بجميع متابعي موقع المطور .نت اليكم اليوم اضافة جديدة من أجمل اضافات بلوجر لعام 2015 , حيث تغير شكل المشاركات الموجودة في جميع المدونات بلوجر حيث يمكنك اضافتها بنفسك ولكن الجميع ملل من شكل الاضافة لذلك اليكم اليوم شكل جديد ومميز للمشاركات في مدونات بلوجر الاضافة من تصميم blogsdaddy وقمت بتعريبها لكم كما تشاهدون هي منسقة بشكل أحترافي باللون الأخضر مع علامة صح اما المواضيع العشوائية وقم بتطوير الاضافة حتى تتناسب مع المدونات العربية بدون اطالة اترككم مع الاضافة وكيفية التركيب

1. لتركيب الاضافة الأمر سهل جداً 
2. قم بالذهاب الى التخطيط في لوحة تحكم بلوجر 
3. قم باضافة أداة وضع في داخلها الكود الأتي يمكنك تحميل الكود من هنا 

<style>#random-posts{border: 1px solid #aaa;margin: 0px 0;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-moz-box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;box-shadow: 0 5px 5px -5px #999;background: #f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));}#random-posts li{background: url(http://4.bp.blogspot.com/-L_LJEgujgIc/UhTU2lSmpFI/AAAAAAAA8lo/cX9ye62idwQ/s1600/tick_blogsdaddy.png) no-repeat 12px;border-bottom: 1px solid #ccc;font-size: 12pt;list-style-type: none;margin: 0;padding: 6px 10px 10px 3em !important;height: 44px;overflow: hidden;line-height: 1.5em;}</style>
<div id="random-posts">
 <script type="text/javaScript">
var rdp_numposts=7;var rdp_snippet_length=0;var rdp_info='no';var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};</script><script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalposts"></script><script type="text/javaScript">
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry);if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://1.bp.blogspot.com/-44EergrPyEU/UhTU2eQARvI/AAAAAAAA8lk/CFBRyKaR3Ik/s1600/default.jpg"}}};document.write('<li>');document.write('<div><a href="'+rdp_posturl+'" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script><script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&amp;start-index=100&amp;max-results=1&amp;callback=random_posts"></script></div>

وقم بتغير ما هو ملون أن أردت

اضافة سلايد شو المحترف الجديد تلقائي بلوجر 2015

اضافة سلايد شو المحترف الجديد الى مدونات البلوجر

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

في البداية قم بالتوجة الى لوحة تحكم بلوحر
ثم الى قائمة قالب قم أظغط على تحرير html
وقم بالبحث عن كود أغلاق </head> وقم باضافة الكود الأتي قبلة يمكنك تحميل الكود من هنا 

<script>
//<![CDATA[
/* Script from:http://www.almtwr.net/ */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
numposts1 = 6;
label1 = "almtwr.net";
function removeHtmlTag(strx,chop){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)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}
     
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="alwansf"><a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';  
document.write(trtd);    
j++;
}}
//]]>
</script>

لاتنسى تغير almtwr.net بالتسمية التي تريد
قم بالبحث عن كود أغلاق </body> وقم بوضع فوقة أيضاً الكود الأتي يمكنك تحميل الكود من هنا

<script type="text/javascript" src="http://yourjavascript.com/917824114/slider.js"></script><script>
      featuredcontentslider.init({
        id: &quot;slider1&quot;, //id of main slider DIV
        contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
        toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
        nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
        enablefade: [true, 0.5], //[true/false, fadedegree]
        autorotate: [true, 6000], //[true/false, pausetime]
        onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
        //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
        //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
      }
                                 })
    </script>

لاضافة اكواد css قم بالبحث عن  ]]></b:skin> وضع فوقة الكود الأتي يمكنك تحميل الكود من هنا 

 /*--------------Slider-------------*/
#alwansd{
height: 276px;
margin: 0 auto;
padding: 18px;
background: #fbfbfb;
width: 1229px;
margin-right: -132px;
border-bottom: 2px solid #E6E6E6;
position: relative;
}
.alwanw{
position: relative;
height: 241px;
width: 78%;
margin: 0 auto;
}
.alwanw .contentdiv{
visibility: hidden;
opacity: 1;
position: absolute;
height: 240px;
}
.alwan-ps{
text-align: right;
float: left;
width: 490px;
height: 13px;
margin: 0 auto;
}
.alwan-ps .toc {
float: right;
font-size: 0;
width: 13px;
height: 13px;
background: #e74c3c;
margin-left: 8px;
border-radius: 60px;
}
.alwan-ps .selected {background: #95A5A6;}
.alwan-ps .prev ,.alwan-ps .next{
display:none;
}
.alwan-ps .next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMO1w2ZJe6vcPSvExaEezJccGsn2YZdmjXPexo1ehEZCnn50OD_yNLURE3d8nNgTcuzysd3oHZpY8CQKLpwQjyFyL2lWbkyRFFPQkDhX5ccoR3IjG1WrVAi0r5rE29mwSza9u5RIFrA64/s1600/next-h.png);}
.alwanip{
width: 486px;
float: left !important;
padding: 0 37px 0 0;
margin: 0 auto;
}
.alwanip a{
color: #2c3e50;
font: 19px DroidKufi-Bold;
margin: 0 auto;
line-height: 37px;
}
.post-body img {
margin: -1px 0 0 8px;
padding: 3px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
.alwanip h6{margin: 0;}
.alwanip h6 a:hover {color:#95A5A6;}
.alwanip .alwand{
color:#fff;
}
.alwanip p{
margin: 0 auto;
color: #95A5A6;
font-family: hacen_liner;
}
.alwansf {
float: right !important;
margin:0 auto;
}
.alwansf a img {
width: 435px;
height: 275px;}
.alwansf a img:hover{
}
.alwansf a img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

في النهاية قم بالبحث عن <div id='content-wrapper'>  أو  <div id='main-wrapper'> او في المكان الذي تريد اضافة السلايدر شو فيه وقم باضافة الكود تحته مباشرة يمكنك تحميل الكود  من هنا  ثم قم بالحفظ

<div id='alwansd'>
<div class='alwanw' id='slider1'>
<script>//<![CDATA[
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
//]]>
</script>
</div>
<div class='alwan-ps' id='paginate-slider1'>
</div>
</div>
  </b:if>

[بلوجر] تغير شكل التسميات الى شكل احترافي و مميز ( بتقنية flat )

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

اليكم اليوم طريقة مميزة لتغير شكل التسميات في البلوجر الى شكل فلاتي احترافي 2015 ,  حيث يمكنك الان تغير الشكل التقليدي للتسميات الموجود في اغلب القوالب الحالية فالشكل الجديد بالوان مميزة وبالوان فلاتية بتقنية التصميم المسطح الاحترافي المميز , الاضافة تعمل عن طريق css , حيث تعمل الاضافة على تغير لون التسميات من الشكل العادي الى الشكل الجديد كما تظهر بالصورة فهي ازراربتقنية flat التصميم المسطح , الاضافة بتقنية css فقط قهي تعمل على تغير اللون وهي لاثؤثر على سرعة تحميل القالب فهي خفيفة جدأ بدون اطالة اترككم مع المعاينة

• تحميل الاكواد

طريقة تركيب الاضافة

لتركيب الاضافة قم بالذهاب الى لوحة تحكم بلوجر
ثم الذهاب الى قالب
ثم الظغط على تحرير html
بعد ذلك قم بالبحث عن

 ... </b:skin> ... 

وقم بوضع فوقة الكود الاتي

 ./* By http://www.almtwr.net/ ---------------- */
@import "http://fonts.googleapis.com/earlyaccess/droidarabickufi.css";
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Droid Arabic Kufi;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
padding:8px 10px;
margin:0 6px 6px 0;
float:right;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}
/*  By http://www.almtwr.net/---------------- */
. 

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

طريقة جعل القائمة الرئيسية تتحرك مع نزول المدونة

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

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

• DEMO
• DOWNLOAD

طريقة جعل القائمة الرئيسية أو الأفقية ثابتة في مكانها

في البداية قم بالذهاب الى لوحة تحكم بلوجر ثم الى قالب
ثم اظغط على تحرير html
بعد ذلك قم بالبحث عن وسم اغلاق </body>  وضع فوقة / قبلة الكود الاتي يمكنك تحميل الكود من هنا 

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    var stickyNavTop = $('#nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya    
        if (scrollTop > stickyNavTop) {
          $('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#nav').css({ 'position': 'relative', 'width': '100%' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

 غير id المللون باللون الازرق في الاعلى بال id الخاص بالقائمة يمكنك معرفتة كما في الصور قم بالبحث عن كود القائمة يمكنك اختيار القائمة او اي قسم من اقسام المدونة لتبححث عن وستجد id الخاص بالقائمة في الاعلى

المصدر 

[بلوجر] إضافة زر الصعود للأعلى و النزول للأسفل بشكل احترافي

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

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

معاينة 

تحميل الاكواد

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

 <style type='text/css'>
/* CSS Top Down Hm */
#BounceToTop {background:#fff;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;padding:5px;display:none;border-radius:2px;}
#BounceToTop:before {content:"";position:absolute;bottom:5px;right:5px;width:0; height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #00acd6 transparent;line-height:0;transition:all 0.3s ease-out;}
#BounceToTop:hover:before {content:"";position:absolute;bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #00c0ef transparent;line-height:0}
#BounceToTop:after {content:""; position:absolute;bottom:5px;right:11px;width:0; height:0;border-style:solid;border-width:0 9px 12px 9px;border-color:transparent transparent #fff transparent;line-height:0;}
#GoToDown {background:#fff;text-align:center;position:fixed;bottom:10px;right:60px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius:2px;}
#GoToDown:before {content:"";position:absolute; bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#E74C3C transparent transparent transparent;line-height:0;transition:all 0.3s ease-out;}
#GoToDown:hover:before {content:"";position:absolute; bottom:5px; right:5px;width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#C0392B transparent transparent transparent;line-height:0}
#GoToDown:after {content:"";position:absolute;top:5px;right:11px;width:0; height:0;border-style:solid;border-width:12px 9px 0 9px;border-color:#fff transparent transparent transparent;line-height:0;}
</style>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); var $elem = $('body');
$('#GoToDown').click(function () {
$('html, body').animate({scrollTop: $elem.height()}, 4000);
$('#GoToDown').fadeOut()
});
$('#BounceToTop').click(function () {
$('#GoToDown').fadeIn()
});
 });
</script>
<div id='BounceToTop'></div>
<div id='GoToDown'></div>