صندوق اعجابات الفيس بوك الجديد والأنيق

صندوق اعجابات الفيس بوك الجديد والأنيق

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

‎تدوين باحتراف‎


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

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

في البداية توجه إلى صفحة الإضافة على الفيسبوك من هنـــا : Page Plugin

صندوق اعجابات الفيس بوك الجديد

1- ادخل هنا رابط صفحتك على الفيس بوك
2- هنا يمكنك وضع عرض محدد للإضافة
3- هنا يمكنك وضع طول محدد للإضافة
4- هنا يمكنك التحكم في اظهار او اخفاء الكوفر (الغلاف)
5- هذا الزر يخول لك اظهار او اخفاء المنشورات
6- هنا يمكنك اظهار او اخفاء صور المعجبين بالصفحة

بعد الانتهاء من تعبئة المعلومات كاملة اضغط على "Get Code" للحصول على الأكواد

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

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

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

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

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

إقرأ المزيد

سلايد شو تلقائي لمدونات بلوجر

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

معاينة السلايد شو

معاينة

تركيب السلايد شو

  • توجه الى لوحة تحكم مدونتك
  • ثم اضغط على تخطيط Layout
  • قم باضافة اداة جديدة في المكان الذي تود ان تضع فيه السلايد شو
  • اختر اداة html/javascript ثم الصق كود السلايد شو في الصندوق وقم بالحفظ

كود السلايد شو

<style>
/* CSS Slider Recent Post */
#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){right:0;top:0}
#slides li:nth-child(2){right:50%;width:25%;height:50%}
#slides li:nth-child(3){right:75%;width:25%;height:50%}
#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){right:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;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;font-family:'Oswald';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:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;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;font-family:'Oswald';
right:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
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%;right:0;width:50%}
  #slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){right: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>
<br />
<div id="featuredpost"></div>
<script type='text/javascript'>
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://tadwinpro.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

تعديلات على السلايد شو

  • غير http://tadwinpro.blogspot.com/ برابط مدونتك
إلى هنا يكون الموضوع قد انتهى، أتمنى أن ينال السلايد شو اعجابكم ولا تنسى التعبير برأيك في التعليقات

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

إقرأ المزيد

جميع الحقوق محفوضة لمدونة تدوين باحتراف 2014/2013