قالب phorto معرب بشكل أحترافي

قالب phorto معرب بشكل أحترافي

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




مميزات قالب phorto

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


تنويه مهم جدا

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



تنسيق العنوان الفرعي و الثانوي

تنسيق العنوان الفرعي و الثانوي

في هذا الموضوع سوف نتطرق الي تنسيق معرفات عناوين بلوجر وخصوصا العنوانين الفرعي ولذي يحمل معرف h3 و الثانوي لذي يحمل معرف h4 وذلك من أجل اعطاء هذه العناوين مظهر رائع وجميل من خلال css

عند كتابتك لأي موضوع وتريد تمميز عنوان أو كلمة با الفرعي أو الثانوي
قم بتحديد الجملة أو الكلمة واضغط علي أحد الخيارين كما في الصورة التالية


تنسيق العنوان الفرعي و الثانوي


وسوف تظهر العناوين بـ الشكل التالي

تنسيق

طريقة تنسيق العناوين


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


.post h3{
background-color:#eee;
border-bottom:4px solid #ddd;
display:block;
margin:20px 0;
min-height:40px;
line-height: 41px;
font-size: 18px;
padding:0 10px
}
.post h4{
background-color: #eee;
border-right: 4px solid #FFC107;
display: block;
margin: 20px 0;
min-height: 40px;
line-height: 41px;
padding: 0 10px;
}


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

قالب Vletters AMP معرب

قالب Vletters AMP معرب

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



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

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

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


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

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

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

فوق </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigAM26mvtMTlhkL-xfVIdxbR9BWo29ABr9ZDtrPiREzO7P6ZPu0J-wJrUof7uEMXJdolN22nq4tj7cBYNwog7_Iy1GabyWZHexWzcbEsz0hyphenhyphenm3uKYrJFywXEW0j5ks52Xs-4TKd0cfnxjX/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>

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