يمن المحبة للمعلومات

اضافات بلوجر

‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل

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

تعز تك ديسمبر 24, 2015 اضف تعليق

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

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

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

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

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

<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>

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

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

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

تعز تك مارس 09, 2015 اضف تعليق

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

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

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

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

<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="'Book Antiqua',Serif" />Book Antiqua
<option value="'Times New Roman',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="'Trebuchet MS',Arial,Sans-Serif" />Trebuchet
<option value="Verdana,Arial,Sans-Serif" />Verdana
<option value="'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif" />Century Gothic
<option value="'Comic Sans MS',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 الأحترافية لموقعك [بلوجر]

تعز تك فبراير 15, 2015 اضف تعليق

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

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

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

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

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

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

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

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

تعز تك فبراير 11, 2015 اضف تعليق

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

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

<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&max-results=0&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)+"";};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&start-index=100&max-results=1&callback=random_posts"></script></div>

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