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

الجمعة، 2 نوفمبر 2018

اضافة ايقونة pinterest على صور مدونة بلوجر لتهيئة المدونة لمحركات البحث

اضافة ايقونة pinterest على صور مدونة بلوجر لتهيئة المدونة لمحركات البحث ولزيادة عملية الارشيف فى جوجل .

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

ميزة اضافة زر pinterest داخل مدونة بلوجر

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

اشهار مدونة بلوجر من ايقونة pinterest

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

صورة توضح تركيب اضافة ايقونة pinterest

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

كيفية اضافة زر pinterest على صور مدونتك

قم بالذهاب الى لوحة تحكم مدونتك ومنها ادخل على التخطيط ثم اضغط على اضافة اداة ومنها اختار HTML/JavaScript كما واضح لنا بالصورة التالية :
بعد اختيار اداة HTML/JavaScript ضع الكود التالى بداخل الاضافة واضغط على زر عملية حفظ 

كود اظهار ايقونة pinterest فى صور بلوجر

<script async='' data-pin-color='white' data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js'/>
اى استفسار يخص هذه المدونة اضف تعليق 

الجمعة، 29 سبتمبر 2017

اضافة ساعة فلاشية رقمية مع التقويم الهجرى والميلادى - اضافات بلوجر

اضافة ساعة فلاشية رقمية مع التقويم الهجرى والميلادى - اضافات بلوجر
اضافة اليوم عبارة عن وضع ساعة فلاشية بسيطة رقمية مع اضافة التقويم الميلادى والهجرى .

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

اذا اعجبتك هذه الاضافة وتريد وضعها فى مدونتك او فى منتداك عليك بمتابعة طريقة التركيب .

شكل الساعة الفلاشية الرقمية :





طبعا كما تلاحظون بالمثال السابق شكل الاضافة 


كيفية تركيب اضافة ساعة فلاشية رقمية مع التقويم


فى البداية اذهب الى لوحة تحكم مدونة بلوجر ثم من صفحة التخطيط اختار اضافة اداة
اضافة ساعة فلاشية رقمية مع التقويم الهجرى والميلادى - اضافات بلوجر
ومنها اختار اضافة HTML/JavaScript :
اضافة ساعة فلاشية رقمية مع التقويم الهجرى والميلادى - اضافات بلوجر
بالاخير ضع هذا الكود :
<style type='text/css'>
.cnmuclock {
  background-color: #000000;
  border: 4px solid #eee;
  border-radius: 8px;
  box-shadow: 0 0 2px #222;
  color: #FF8000;
  display: block;
  font: 68px/80px arial;
  height: 80px;
  margin: 10px auto;
  padding-left: 4px;
  padding-right: 30px;
  position: relative;
  width: 195px;
}
.cnmuclock span {float: left;  margin: 0 4px;}
.ceconds {
  font-size: 12px;
  position: absolute;
  right: 7px;
  top: -5px;
}
.cspahmsa {
  font-size: 12px;
  top: 10px;
  position: absolute;
  right: 5px;
}
.cfasel2 {display: none;}
</style>
<script type='text/javascript'>
//<![CDATA[
var _0x3512=["\x41\x4D","\x67\x65\x74\x48\x6F\x75\x72\x73","\x67\x65\x74\x4D\x69\x6E\x75\x74\x65\x73","\x67\x65\x74\x53\x65\x63\x6F\x6E\x64\x73","\x72\x65\x6E\x64\x65\x72\x54\x69\x6D\x65\x28\x29","\x50\x4D","\x30","\x63\x6E\x6D\x75\x63\x6C\x6F\x63\x6B","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x3A","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x68\x6F\x75\x72\x73\x22\x3E","\x3C\x2F\x73\x70\x61\x6E\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x66\x61\x73\x65\x6C\x20\x63\x66\x61\x73\x65\x6C\x31\x22\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6D\x69\x6E\x75\x74\x65\x73\x22\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x66\x61\x73\x65\x6C\x20\x63\x66\x61\x73\x65\x6C\x32\x22\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x65\x63\x6F\x6E\x64\x73\x22\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x73\x70\x61\x68\x6D\x73\x61\x22\x3E"];function renderTime(){var _0x554cx2= new Date();var _0x554cx3=_0x3512[0];var _0x554cx4=_0x554cx2[_0x3512[1]]();var _0x554cx5=_0x554cx2[_0x3512[2]]();var _0x554cx6=_0x554cx2[_0x3512[3]]();setTimeout(_0x3512[4],1000);if(_0x554cx4==0){_0x554cx4=12}else {if(_0x554cx4>12){_0x554cx4=_0x554cx4-12;_0x554cx3=_0x3512[5]}};if(_0x554cx4<10){_0x554cx4=_0x3512[6]+_0x554cx4};if(_0x554cx5<10){_0x554cx5=_0x3512[6]+_0x554cx5};if(_0x554cx6<10){_0x554cx6=_0x3512[6]+_0x554cx6};var _0x554cx7=document[_0x3512[8]](_0x3512[7]);_0x554cx7[_0x3512[9]]=_0x554cx4+_0x3512[10]+_0x554cx5+_0x3512[10]+_0x554cx6+_0x554cx3;_0x554cx7[_0x3512[11]]=_0x3512[12]+_0x554cx4+_0x3512[13]+_0x3512[14]+_0x3512[10]+_0x3512[13]+_0x3512[15]+_0x554cx5+_0x3512[13]+_0x3512[16]+_0x3512[10]+_0x3512[13]+_0x3512[17]+_0x554cx6+_0x3512[13]+_0x3512[18]+_0x554cx3+_0x3512[13]}renderTime()
//]]>
</script>
<div class='cnmuclock' id='cnmuclock'></div>
<p align="center"><script language="JavaScript">
var fixd;
function isGregLeapYear(year)
{
return year%4 == 0 && year%100 != 0 || year%400 == 0;
}

function gregToFixed(year, month, day)
{
var a = Math.floor((year - 1) / 4);
var b = Math.floor((year - 1) / 100);
var c = Math.floor((year - 1) / 400);
var d = Math.floor((367 * month - 362) / 12);
if (month <= 2)
e = 0;
else if (month > 2 && isGregLeapYear(year))
e = -1;
else
e = -2;
return 1 - 1 + 365 * (year - 1) + a - b + c + d + e + day;
}
function Hijri(year, month, day)
{
this.year = year;
this.month = month;
this.day = day;
this.toFixed = hijriToFixed;
this.toString = hijriToString;
}
function hijriToFixed()
{
return this.day + Math.ceil(29.5 * (this.month - 1)) + (this.year - 1) * 354 +
Math.floor((3 + 11 * this.year) / 30) + 227015 - 1;
}
function hijriToString()
{
var months = new Array("محرم","صفر","ربيع أول","ربيع ثانى","جمادى أول","جمادى ثانى","رجب","شعبان","رمضان","شوال","ذو القعدة","ذو الحجة");
return this.day + " " + months[this.month - 1]+ " " + this.year;
}
function fixedToHijri(f)
{
var i=new Hijri(1100, 1, 1);
i.year = Math.floor((30 * (f - 227015) + 10646) / 10631);
var i2=new Hijri(i.year, 1, 1);
var m = Math.ceil((f - 29 - i2.toFixed()) / 29.5) + 1;
i.month = Math.min(m, 12);
i2.year = i.year;
i2.month = i.month;
i2.day = 1;
i.day = f - i2.toFixed() + 1;
return i;
}
var tod=new Date();
var weekday=new Array("الأحد","الإثنين","الثلاثاء","الأربعاء","الخميس","الجمعة","السبت");
var monthname=new Array("يناير","فبراير","مارس","إبريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر");
var y = tod.getFullYear();
var m = tod.getMonth();
var d = tod.getDate();
var dow = tod.getDay();
document.write(weekday[dow] + " " + d + " " + monthname[m] + " " + y);
m++;
fixd=gregToFixed(y, m, d);
var h=new Hijri(1421, 11, 28);
h = fixedToHijri(fixd);
document.write("  - " + h.toString() + "   &nbsp;&nbsp;");
</script></p>

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

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

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

اضافة اخر المشاركات متنوعة الاشكال ومنتشرة كثيرة عبر المدونات والمنتديات واليكم اهم واجدد الاشكال من اضافة اخر المشاركات عبر المواضيع التالية لعل تعجبكم :
اضافة عناوين اخر المواضيع في بلوجر من قسم معين - اضافات بلوجر .
اضافة اخر المشاركات من اقسام مدونة بلوجر بشكل مرقم - اضافات بلوجر .

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

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

كيفية اضافة اخر المشاركات من قسم معين 

فى البداية اذهب الى لوحة تحكم مدونة بلوجر ثم من صفحة التخطيط اختار اضافة اداة
اضافة عناوين اخر المواضيع في بلوجر من قسم معين - اضافات بلوجر
ومنها اختار اضافة HTML/JavaScript :
اضافة عناوين اخر المواضيع في بلوجر من قسم معين - اضافات بلوجر
بالاخير ضع هذا الكود :
<style type="text/css">
#rc-plus {width:300px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff}
.rc-plus h2{background:#B60202;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold}
.rc-plus ul{list-style:none;margin:0;padding:0}
.rc-plus li{text-indent:0;background:url(http://lh5.ggpht.com/_PAuO_he0N0k/TRV_Oku19aI/AAAAAAAAACE/rXs7F4X9HcQ/tag_blue.gif) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}
.rc-plus h2 a:link, .rc-plus h2 a:visited {color:#fff}
</style>
<div id="rc-plus" class="rc-plus">
<h2><a href="http://www.kingnt.com/search/label/الربح من الانترنت">الربح من الانترنت</a></h2>
<script type='text/javascript'>
numposts = 3; list1 = 1; sumPosts = 168;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a, b) {
    var s = a.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, b - 1);
    return s
}
function showrecentposts(e) {
    img = new Array();
    for (var i = 0; i < numposts; i++) {
        var f = e.feed.entry[i];
        var g = f.title.$t;
        var h;
        if (i == e.feed.entry.length) break;
        for (var k = 0; k < f.link.length; k++) {
            if (f.link[k].rel == 'alternate') {
                h = f.link[k].href;
                break
            }
        }
        if ("content" in f) {
            var j = f.content.$t
        } else if ("summary" in f) {
            var j = f.summary.$t
        } else
        var j = "";
        s = j;
        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 l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g + '</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>';
        var m = '<li><a href="' + h + '">' + g + '</a></li>';
        if ((i >= 0) && (i < list1)) {
            var n = l
        }
        if (i == list1) {
            var n = '<div class="rc-plus"><ul>' + m
        }
        if ((i > list1) && (i < numposts - 1)) {
            var n = m
        }
        if (i == numposts - 1) {
            var n = m + '</ul></div>'
        }
        document.write(n)
    }
}
document.write("<script src=\"http://www.kingnt.com/feeds/posts/default/-/الربح من الانترنت?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
</div>

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


  • الكود المحدد باللون الازرق وبالاخص كلمة الربح من الانترنت هى مخصصة باسم الاقسم قم بتغييرها الى الاقسم الذى تريدة .


  • كلمة numposts = 3 المحددة باللون الاخصر هى مخصصة باظهار عدد المواضيع عليك بتغيير رقم 3 الى الرقم الذى تريدة .


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


الجمعة، 22 سبتمبر 2017

اضافة عناوين اخر المواضيع في بلوجر من قسم معين - اضافات بلوجر

اضافة عناوين اخر المواضيع في بلوجر من قسم معين - اضافات بلوجر
فى احدى الدروس السابقة من قسم دروس بلوجر وضعت لكم اضافة اخر المشاركات مع مصغرات الصور عبر العنوان التالى : اضافة اخر المشاركات من اقسام مدونة بلوجر بشكل مرقم - اضافات بلوجر وكانت الاضافة اكثر من رائعة وتستحق التركيب فى المدونة .

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

صورة من اضافة عناوين اخر المواضيع 

اضافة عناوين اخر المواضيع في بلوجر من قسم معين - اضافات بلوجر
وكما تلاحظون شكل الاضافة اعتقد تصميم بسيط وبشكل احترافى وبدون ان تسبب اى ثقل للمدونة فأذا اعجبتك هذه الاضافة وتريد تركيبها الى مدونتك فعليك بمتابعة طريقة التركيب .
طريقة تركيباضافة عناوين اخر المواضيع في بلوجر
فى البداية اذهب الى لوحة تحكم مدونة بلوجر ثم من صفحة التخطيط اختار اضافة اداة
اضافة عناوين اخر المواضيع في بلوجر من قسم معين - اضافات بلوجر
ومنها اختار اضافة HTML/JavaScript :
اضافة عناوين اخر المواضيع في بلوجر من قسم معين - اضافات بلوجر
بالاخير ضع هذا الكود :
<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... اكمل القراءة";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 3;var posts_date = false;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default/-/مقالات?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script>
<noscript>Your browser does not support JavaScript!</noscript>

<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #B60202;font-family:Droid Arabic kufi,Arial,Helvetica,Sans-serif;font-size:10px;line-height: 30px;font-weight:normal;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#B60202; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #B60202; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font-family:Droid Arabic kufi,Arial,Helvetica,Sans-serif;font-size:10px;line-height: 30px;font-weight:normal;}
</style></div> 
قبل الحفظ قم بعمل هذه التغييرات :

  • رقم 3 المحدد باللون الازرق خاص بأظهار عدد المواضيع 
  • رقم 80 المحدد باللون الاخضر خاص بعدد مقتطفات الموضوع
  • كلمة مقالات المحددة باللون الاحمر قم بتغييرها الى القسم الذى يناسبك 
فى الاخير قم بالضغط على حفظ

اتمنى بأن موضوع اضافة عناوين اخر المواضيع في بلوجر من قسم معين - اضافات بلوجر نال على اعجابكم وان شاء الله فى القريب العاجل سأضع لكم بعض الاضافات المميزة واى استفسار قم بوضع تعليق .



اضافة اخر المشاركات من اقسام مدونة بلوجر بشكل مرقم - اضافات بلوجر

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

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

الاضافة كاملة والكمال لله وحدة بمعنى لايوجد ملفات جافا سكربت مرفوعة على سيرفر اخر بل جميع محتوى الاضافة ستكون متواجدة فى مدونتك وملكا لك .

مميزات اضافة اخر المشاركات من قسم محدد


  • صورة مصغرة
  • عنوان المشاركة
  • عدد التعليقات
  • عرض التاريخ
  • اقراءة المزيد
  • عدد المواضيع

صورة اضافة اخر المشاركات من اقسام المدونة


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

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

فى البداية اذهب الى لوحة تحكم مدونة بلوجر ثم من صفحة التخطيط اختار اضافة اداة
اضافة اخر المشاركات من اقسام مدونة بلوجر بشكل مرقم - اضافات بلوجر
ومنها اختار اضافة HTML/JavaScript :
اضافة اخر المشاركات من اقسام مدونة بلوجر بشكل مرقم - اضافات بلوجر
بالاخير ضع هذا الكود :
<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 4;
var showpoststhumbs = true;
var readmorelink = false;
var showcommentslink = false;
var posts_date = false;
var post_summary = false;
var summary_chars = 40;</script>
<script src="/feeds/posts/default/-/الربح من الانترنت?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<style type="text/css">
img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #B60202;}
.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #B60202;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-family:Droid Arabic kufi,Arial,Helvetica,Sans-serif;font-size:11px;line-height: 30px;font-weight:normal; text-transform: uppercase; color: #336699;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>
<div id="thumb" class="thumb"></div>
قبل عملية الحفظ عليك بمعرفة محتوى الكود لكى تعرف كيفية اظهار التعليقات ومقتطف من الموضوع والتاريخ وكلمة اقراءة المزيد وعدد التعليقات .............
  • رقم 4 المحدد باللون الاحمر عدد المواضيع .
  • كلمة true اظهار وكلمة false اخفاء بمعنى اذا كنت تريد اظهار خاصية عدد التعليقات مثلا عليك بوضع كلمة true واذا كنت تريد مثلا اخفاء كلمة اقراءة المزيد بالطبع سنضع كلمة false تابع معى التحكم :

showpoststhumbs المحدد باللون الاخضر خاص باظهار الصورة 
readmorelink المحدد باللون الازرق خاص بأظهار كلمة اقراءة المزيد
showcommentslink المحدد باللون الاورنج خاص بأظهار عدد التعليقات
posts_date  المحدد باللون الروز خاص بأظهارتاريخ المشاركة
post_summary المحدد باللون السماوى خاص بأظهار مقتطف من الموضوع
  • رقم 40 المحدد باللون الاحمر خاص بعدد احرف مقتطفات محتوى الموضوع
  • كلمة الربح من الانترنت قم بتغييرها الى القسم الذى تريدة
بالاخير اضغط على حفظ
اتمنى بأن مدونة كينج نت تضع لكم اهم دروس بلوجر تفيد المستخدم العربى واى استفسار قم بوضع رد عبر التعليقات  واتمنى ايضا بأن موضوع اضافة اخر المشاركات من اقسام مدونة بلوجر بشكل مرقم - اضافات بلوجر اعجبكم وانتظرونى باضافة جديدة فى القريب العاجل .

الأربعاء، 6 سبتمبر 2017

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

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

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

كيفية اضافة اخر المشاركات لقسم محدد


من لوحة تحكم مدونتك اضغط على المظهر ومنها اضغط على تحرير HTML

الان قم بالبحث عن هذا الكود :
]]></b:skin>
اضف قبلة هذا الكود :
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}
#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px; }
قم بالبحث مرة اخرى عن هذا الكود :
</head>
اضف قبلة هذا الكود :
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;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!="")){thumburl=d;}else thumburl='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
ثم قم بالبحث عن هذا الكود :
</body>
اضف قبلة هذا الكود :
<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("label_with_thumbs",210);
</script>

بالاخير ضع الكود التالى داخل اضافة HTML/Javascript من صفحة التخطيط
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/KINGNT?published&alt=json-in-script&callback=labelthumbs"></script>
قبل الحفظ ضع اسم القسم الذى تريدة بدلا من كلمة KINGNT المحدد باللون الاحمر
بالأخير اضغط على حفظ .
صورة لشكل الاضافة بعد عملية التركيب :
اضافة المشاركات الاخيرة من قسم اقسام مدونة بلوجر
اتمنى بأن هذه الاضافة اعجبت الجميع وانتظرونى فى درس اخر من دروس بلوجر لأضع لكم المزيد من اضافات بلوجر الذى يبحث عنها المدون العربى .

الجمعة، 30 يونيو 2017

اضافة زر الأنتقال الى اعلى الصفحة اسفل مدونة بلوجر Back to Top

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

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

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

اضافة زر العودة الى الاعلى اسفل مدونة بلوجر


بالبداية اذهب الى لوحة تحكم المدونة ومنها اختار المظهر ومن بعدها اضغط على تحرير HTML ثم اضغط على CTRL + F من لوحة المفاتيح الكيبورد لظهور خانة البحث .
الان عليك بالبحث عن هذا الكود :
]]></b:skin>
ضع فى اعلاه مباشرة هذا الكود :
.back-to-top {
    display:none;
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration:none;
    color: #000000;
    background-color: rgba(121, 235, 229, 0.8);
    font-size: 12px;
    padding: 1em;
   
}
.back-to-top:hover {    
    background-color: rgb(63, 191, 191);
    text-decoration:none;
    color:#ffffff;
}
ثم قم بالبحث عن هذا الكود :
</body>
ضع فى اسفلة مباشرة هذا الكود :
<a href="#" class="back-to-top">الى الأعلى</a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
بالأخير اضغط على حفظ متغيرات القالب
الأن اذا ذهبت الى اى صفحة بالمدونة ستجد الاضافة بأسم ( الى الأعلى )
اذا كنت تريد ان تغير الكلمة الى كلمة اخرى قم بتغير كلمة الى الاعلى المحددة فى الكود باللون الاحمر ولكن من الأفضل ان تتركها كما هى اعتقد الحجم والكلمة مناسبة ولكن الأختيار لك .
بالاخير اتمنى بأن اضافة زر الأنتقال الى اعلى الصفحة اسفل مدونة بلوجر Back to Top اعجبتكم وانتظرونى قريبا سأضع لكم اهم الاضافات فى قسم دروس بلوجر فى القريب العاجل ان شاء الله واى استفسار او مشكلة اترك تعليق .