الطريقة المثالية لإضافة خاصية اقرأ المزيد

الطريقة المثالية لإضافة خاصية اقرأ المزيد

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

فوق </head> أضف الكود التالي

<script type='text/javascript'>
posts_no_thumb_sum = 120;
posts_thumb_sum = 120;
img_thumb_height = 160;
img_thumb_width = 220;
</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:right; margin-left: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div class="semor">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

ثانيا ابحث عن الوسم <data:post.body/> و أستبدله بهذا الكود

    <b:if cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&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;,&quot;<data:post.title/>&quot;);</script>
<a class="readmorlin" expr:href='data:post.url'>اقرأ المزيد</a>
</b:if>
<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
<data:post.body/>
</b:if>

مرحلة تنسيق الإضافة 


اسفل هذا الوسم ]]></b:skin> نضيف الكود التالي

<style>
.readmorlin {
float: left;
padding: 8px;
border-radius: 4px;
background-color: #2c3e50;
border-bottom: 2px solid #f39c12;
color: #fff;
font-weight: normal;
}
.readmorlin:hover {background-color: #f39c12; color:#fff;}
</style>


موفق ان شاء الله 




جعل صفحات بلوجر بعرض المدونة

جعل صفحات بلوجر بعرض المدونة

في الموضوع سنجري تعديل على هيئة الصفحات الثابته لمدونات بلوجر Blogger Static Pages ونجعلها بمساحة المدونة بكاملها


جعل صفحات بلوجر بعرض المدونة

  1. من لوحة التحكم بلوجر
  2. المظهر >> تحرير HTML

اسفل هذا الوسم ]]></b:skin> نضيف الكود التالي

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.sidebar {display:none;}
#main-wrapper{width: 100%; float: none; margin: 0px auto;}
html {overflow-x: hidden;}
</style>
</b:if>

ولجعلها تنطبق علي صندوق المواضيع أيضا
نغيير الكودالأحمر أعلي بــ هذا الكود

<b:if cond='data:blog.pageType == &quot;item&quot;'>

 أي أستفسار ضعه في تعليق
موفق ان شاء الله


تحويل اضافة التسميات الي قائمة مندسلة

تحويل اضافة التسميات الي قائمة مندسلة

تحويل اضافة التسميات الي قائمة مندسلة


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

تحويل اضافة التسميات الي قائمة مندسلة

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

<b:widget id='Label1' locked='false' title='الأقسام' type='Label' version='1'>
    <b:widget-settings>
      <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
      <b:widget-setting name='display'>LIST</b:widget-setting>
      <b:widget-setting name='selectedLabelsList'/>
      <b:widget-setting name='showType'>ALL</b:widget-setting>
      <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2> </b:if>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'>
<data:label.name/></option>
</b:loop>
</select>
</div>
</b:includable>
  </b:widget>

 طريقة تنسيق


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

select {
font: 15px/2em Changa;
background: #f39c12;
color: #fff;
position: relative;
bottom: 5px;
}

أي أستفسار ضعه في تعليق
في أمان الله

هدية بسيط قالب بلوجر للمدونات الشخصية

هدية بسيط قالب بلوجر للمدونات الشخصية

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




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

  1. قالب خفيف وحصري خاص بــ المدونة
  2. قالب متجاوب وسريع جدا
  3. قائمة أحترافية متجاوب 
  4. شريط آخر المواضيع متجاوب وخفيف 
  5. خاصية مواضيع ذات صلة بشكل مميز جدا
  6. أزرار مشاركة الموضوع 
  7. أستايل أحترافي ومريح جدا

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

في أمان الله


مواضيع ذات صلة أسفل المشاركات

مواضيع ذات صلة أسفل المواضيع

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




أولًا ابحث عن الوسم </head> 

وأضف هذه الأكواد قبله

<style type='text/css'>
#related-posts {
display: inline-block;
background: #fff;
position: relative;
padding: 0;
margin: 36px auto 26px auto;
width: 100%;
box-shadow: 0 0 20px -5px rgba(0,0,0,0.3);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
border-top: 2px solid #f22830;
}
#related-posts h4 {
background:#f22830;
padding:4px 15px;
position:absolute;
margin:0;
font-size:15px;
font-weight:500;
color:#fff;
top:-18px;
right:2.8%;
box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17);
}
#related-posts ul {
list-style: outside none none;
margin: 9px;
padding: 5px;
}
#related-posts a {
background-color: #607D8B;
color: #fff;
display: block;
font-size: 15px;
font-weight: normal;
height: 30px;
line-height: 30px;
margin: 8px auto -5px auto;
}
#related-posts a::before {
content: "\f100";
float: right;
font: 16px/30px fontawesome;
margin: 0 5px;
}
#related-posts a:hover {
background-color: #f22830;
text-decoration: none;
}
</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script> 

 الخطوة الثانية 


ثانيا ابحث عن الوسم <data:post.body/> و اضف الكود التالي تحته


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<h4>مواضيع ذات صلة</h4>
<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

أحفظ قالب مدونتك
أي أستفسار ضعه في تعليق
وشكرا لمرورك 



خاصية اظهار المزيد من المشاركات

خاصية اظهار المزيد من المشاركات

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



طريقة اضافة زر ظهور المزيد من المواضيع


ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/><b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,n){for(var t=document.getElementById(e).getElementsByTagName("img"),a=0;a<t.length;a++)t[a].src=t[a].src.replace(/\/s72\-c/,"/s"+n+"-c")}window.labelfx=function(){var e=function(e){var n=e||{},t=n.url_blog||window.location.host,a=n.id_labelcontent||"#labelfxn";$.ajax({url:"http://"+t+"/feeds/posts/summary?max-results=0&alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var n=e.feed.category,t="";if(void 0!==n){t="<ul class='labelx'>";for(var i=0;i<n.length;i++)t+='<li><a href="/search/label/'+encodeURIComponent(n[i].term)+'" target="_blank">'+n[i].term+"</a></li>";t+="</ul>",$(a).html(t)}else $(a).html("<span>No Label!</span>")},error:function(){$(a).html("<strong>Error Loading Feed!</strong>")}})};return function(n){e(n)}}(),resizeThumb("main",250),labelfx(),function(e){function n(n){e.getScript("http://"+n+".disqus.com/blogger_index.js")}function t(){s||(s=!0,o?(r.find("a").hide(),r.find("img").show(),e.ajax(o,{dataType:"html"}).done(function(t){var a=e("<div></div>").append(t.replace(l,"")),i=a.find("a.blog-pager-older-link");i?o=i.attr("href"):(o="",r.hide());var p=a.find(d).children(".date-outer");e(d).append(p),resizeThumb("main",250),window._gaq&&window._gaq.push(["_trackPageview",o]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&n(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),r.find("img").hide(),r.find("a").show(),s=!1})):r.hide())}function a(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(o=e("a.blog-pager-older-link").attr("href"))){var n=e('<a class="loadpost" href="javascript:;" style="text-decoration:none;padding:10px 20px;background:#000000;color:#ffffff;">اظهار المزيد</a>');n.click(t);var a=e('<img src="'+i+'" style="display: none;">');(r=e('<div style="display:block;text-align:center;margin:20px auto;"></div>')).append(n),r.append(a),r.insertBefore(e("#blog-pager")),e("#blog-pager").hide()}}var i="https://1.bp.blogspot.com/-6_Eha7PSRy0/WXI6jskHE9I/AAAAAAAAMB0/6iFQ2qywS2kaNA2evWgsUb51zjRFf69cQCLcBGAs/s1600/loader.gif",o="",r=null,d="div.blog-posts",s=!1,l=(e(window),e(document),/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi);e(document).ready(a)}(jQuery);
//]]>
</script>

في حال مكتبة جيكويري متجواد في قالب مدونتك 
أحذف الكود لذي بــ لون الأحمر أعلي  
أحفظ القالب 
في أمان الله


اضافة تأثير أحترافي علي صور المدونة

اضافة تأثير أحترافي علي صور المدونة

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


معاينة

اضافة تأثير حركي علي صور المدونة


أولًا ابحث عن الوسم </head> و اضف الكودين التاليين فوقه

<style type='text/css'>
.imgani .post-body img{opacity:0;transition:all .6s ease;transform:scale(.95) translateY(20px)}.imgani .post-body img.anime{opacity:1;transform:scale(1) translateY(0)}
</style>

 الخطوة الثانية والأخيرة


ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
// Image Transition
var scroll="yes",Fscroll=scroll.replace(/(\r\n|\n|\r)/gm," ");"yes"===Fscroll&&($(document).ready(function(){$("body").addClass("imgani")}),$(window).bind("load resize scroll",function(){var o=$(this).height();$(".post-body img").each(function(){var s=.1*$(this).height()-o+$(this).offset().top;$(document).scrollTop()>s&&$(this).addClass("anime")})}));
//]]>
</script>

احفظ القالب 
أي أستفسار ضعه في تعليق 
في أمان الله 


اضافة وتنسيق أرشيف المدونة الإلكترونية

تنسيق واضافة أرشيف المدونة بشكل أحترافي

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

طريقة اضافة وتنسيق أرشيف المدونة الإلكترونية

  1. من لوحة التحكم بلوجر 
  2. نختار >> تخطيط >> اضافة آداة 
  3. نختار >> أرشيف المدونة الإلكترونية

طريقة اضافة وتنسيق أرشيف المدونة الإلكترونية

تنسيق أرشيف المدونة الإلكترونية


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

.BlogArchive select {
background-color: #E74C3C;
border: 4px solid #E74C3C;
color: #fff;
font: 14px droid arabic kufi;
padding: 3px;
width: 100%;
}


وأحفظ القالب 
أي أستفسار ضعه في تعليق 
في أمان الله 


إضافة رسالة تنبيه ورابط المشاركة أسفل المواضيع

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

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


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

.namd{
color:#fff;
background:#00BCD4;
padding:10px 0;
display:block;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-top: 30px;
}
.namd m{
background:#FF5722;
padding:10px;
color:#fff;
border-top-right-radius: 10px;
margin-left:10px;
}
.attention{
background:#FFF;
margin-top:15px;
margin-bottom:20px;
border:1px solid #C4CDD4;
}
.attention-h1{
color: black !important;
font-size:14px;
text-align:center;
font-weight: normal;
}
#shoternUrl{
margin:20px 0;
box-shadow:0 0 0 1px rgba(0,0,0,0.15),0 0 10px -3px rgba(0,0,0,0.5);
background:#00BCD4;
color:#FFF;
padding:10px;
overflow:hidden;
}
#shorternh2{
float:right;
padding-right:10px;
font-size:16px;
}
#shorternh2 i{margin-left:10px;}
.textinput {
border: 2px solid #E1ECE6!important;
direction: ltr;
height: 25px!important;
text-align: center;
margin-right: 5%;
float: right;
width: 60%;
}

ثانيا ابحث عن الوسم <data:post.body/> و اضف الكود التالي تحته

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='namd'>
<m>
<i aria-hidden='true' class='fa fa-exclamation-triangle'/>
</m>
<b>
                      تنبية هام
                    </b>
</div>
<div class='attention'>
<h1 class='attention-h1'>
                      لايسمح بنقل الموضوع بدون ذكر المصدر
                    </h1>
</div>
<div id='shoternUrl'>
<div id='shorternh2'><i class='fa fa-link'/>رابط الموضوع</div>
<input class='textinput' expr:value='data:post.canonicalUrl' onclick='this.focus(); this.select();' readonly='readonly' type='text'/>
</div>
</b:if>

في أمان الله 

أي أستفسار ضعه في تعليق


إضافة خاصية تحميل المدونة بشكل أحترافي

إضافة خاصية تحميل المدونة بشكل أحترافي

إضافة خاصية تحميل المدونة بشكل أحترافي - اضافة رائعة و جميلة تتمثل في جعل الزوار ينتظرون حتي تحميل المدونة بشكل كامل وبهذا يسهل تصفح المدونة


معاينة


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


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

/* Loader */
#loader {
position : fixed;
display : block;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 9999;
background-color: #ffffff;
}
#loader-inside {
position : absolute;
top: 50%;
right: 50%;
width :  500px;
margin:-46px -250px 0 0;
text-align: center;
}
#loader-inside i {
margin:0 0 0 5px;
font-size: 48px;
color: #FF5151;
}
#loader-inside span {
display : block;
margin-top: 20px;
font: normal bold 18px 'Ropa Sans', Trebuchet, Verdana, sans-serif;
line-height: 1.6;
color: #333333;
}
.transeff {
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}

الخطوة الأخيرة ابحث عن الوسم </body> و اضف الكود التالي فوقه

 <script class='java' type='text/javascript'>
    //<![CDATA[
    $(window).load(function() {
      $('#loader').fadeOut('slow');
      $('.java').remove();
    });
    //]]>
  </script>
   <span id='loader'>
      <span id='loader-inside'>
        <i class='fa fa-circle-o-notch fa-spin'/>
        <span><data:blog.pageTitle/></span>
      </span>
    </span><!-- loader Ends! -->

في أمان الله