15 سبتمبر، 2016

اضافة صندوق اعجاب صفحة الفيسبوك عائم بشكل جديد


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




طريقة الاضافة

1. اذهب الى قالب ثم تحرير HTML و ابحث عن  </head>  وضع فوقه هذا الكود
 <style>
#open-fb{background-color: #FFFFFF; border: 4px solid rgb(210, 210, 210); bottom: 0; border-bottom: 0; float:left; height: auto; margin-bottom: 0; margin-right: 5px; position: fixed; right: 0; width: auto; z-index: 10;}
.close-fb{color: #333!important; position: absolute; top: 1px; right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 11px;}
.slideUp{
 animation-name: slideUp;
 -webkit-animation-name: slideUp; 

 animation-duration: 1s; 
 -webkit-animation-duration: 1s;

 animation-timing-function: ease; 
 -webkit-animation-timing-function: ease;

 visibility: visible !important;   
}

@keyframes slideUp {
 0% {
  transform: translateY(100%);
 }
 50%{
  transform: translateY(-8%);
 }
 65%{
  transform: translateY(4%);
 }
 80%{
  transform: translateY(-4%);
 }
 95%{
  transform: translateY(2%);
 }   
 100% {
  transform: translateY(0%);
 } 
}

@-webkit-keyframes slideUp {
 0% {
  -webkit-transform: translateY(100%);
 }
 50%{
  -webkit-transform: translateY(-8%);
 }
 65%{
  -webkit-transform: translateY(4%);
 }
 80%{
  -webkit-transform: translateY(-4%);
 }
 95%{
  -webkit-transform: translateY(2%);
 }   
 100% {
  -webkit-transform: translateY(0%);
 } 
}
</style>

2. ثم ابحث عن  </body>  وضع فوقه هذا الكود
 <div class='slideUp' id='open-fb'>
<a class='close-fb' href='#close-fb-like-box' onclick='hide(&apos;open-fb&apos;)' title='Close'><i class='fa fa-times'/></a>
<div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/th3kurdi' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fth3kurdi&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
</span></div></div>
<script type='text/javascript'>

function show(target) {
    document.getElementById(target).style.display = &#39;block&#39;;
}

function hide(target) {
    document.getElementById(target).style.display = &#39;none&#39;;
}
</script> 


غيير  th3kurdi  بأسم صفحتك على الفيسبوك ( متكرر مرتين )

13 سبتمبر، 2016

قالب iGallery معرب و مطور


قالب iGallery معرب و مطور لكم بأحترافية و بدون اخطاء و هو قالب رائع جدا يتميز بمضهر جميل و بسيط 😊  و القالب متعدد الاستعمالات 😉 تستطيع استعماله لمدونات التي تعرض 📋 قوالب بلوجر او التي تعرض الصور او الكثير من الاشياء و ايضا يوجد اضافات بالقالب 👍👌 مثل ازرار المشاركة التي تكون بجانب الموضوع و مواضيع ذات صلة وايضا القائمة المنسدلة و القالب متجاوب مع جميع الشاشات مع الحاسوب 📺 و الهاتف و التابليت ايضا 😁 .

مميزات القالب
  1. قالب متجاوب
  2. ازرار مشاركة الموضوع
  3. مواضيع ذات صلة
  4. القائمة المنسدلة
  5. الوان متناسقة
  6. متعدد الاستعمالات
  7. والكثير ...



10 سبتمبر، 2016

تغيير شكل المشاركات الشائعة مع اضافة نجوم بالتصنيف


نعود اليكم من جديد بشرح جديد و اضافة جديدة على مدونة كورد ويب اضافتنا اليوم طريقة اضافة النجوم بالتصنيف الى المشاركات الشائعة و ايضا سيتم تغيير شكل المشاركات الشائعة 👌  ☺ وايضا النجوم بالتصنيف 💡 ما يعطي المدونة شكل اجمل .


طريقة اضافتها
  1. لوحة التحكم
  2. قالب
  3. تحرير HTML
4. ابحث عن  </head>  وضع فوقه هذا الكود
<style>
/* Popular Post S1 */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background: #FFFFFF; display: block; margin: 0 0 0 0; width: 60px; height: 60px; overflow: hidden; float: right; margin-left: 10px; border: 1px solid #EAE8E8; padding: 3px;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:&#39;\f005\f005&#39;;display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;left:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:&#39;\f005\f005\f005\f005\f005&#39;;}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:&#39;\f006\f005\f005\f005\f005&#39;;opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:&#39;\f006\f006\f005\f005\f005&#39;;opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:&#39;\f006\f006\f006\f005\f005&#39;;opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:&#39;\f006\f006\f006\f006\f005&#39;;opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color: #333; font-size: 14px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;    float: right;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:100;padding-bottom:.2em;padding:0 5px}
</style>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

5. واخيرا اضغط على حفظ و مبروك 😉 👍

2 سبتمبر، 2016

غلاف فيسبوك احترافي جاهز psd مجانا


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

معاينة الغلاف:







30 أغسطس، 2016

طريقة اضافة اكثر المواضيع تعليقا الى بلوجر

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

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


طريقة اضافة اكثر المواضيع تعليقا

اذهب الى "لوحة التحكم" ثم "التخطيط" ثم "اضافة اداة" و اختار HTML/JavaScript
وضع فيها الكود التالي

 <div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-size:12px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=10;
var homePage="th3kurdi.blogspot.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script> 

تعديلات مهمة:
قم بتغيير th3kurdi.blogspot.com برابط مدونتك ويجب ان يكون بدون  http://  او  https://  كما في الصورة





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


27 أغسطس، 2016

قالب فيديوهاتي الاحترافي لمدونات بلوجر


نعود اليكم من جديد بقالب جديد و احترافي لعرض الفيديوهات قالب فيديوهاتي وهو قالب معرب و مطور و القالب احترافي و رائع جدا 👌 و متجاوب مع جميع الشاشات 📺 و يمتلك اضافات جميلة و رائعة منها أزرار مشاركة الموضوع و مواضيع ذات صلة و الكثيير .. 😃

مميزات \ اضافات القالب

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


26 أغسطس، 2016

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


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




طريقة اضافة اخر المواضيع

  1. لوحة التحكم
  2. تخطيط
  3. اضافة اداة
  4. HTML/JavaScript
وضع فيها الكود التالي

 <style>
/* CSS Recent Post Gallery By http://th3kurdi.blogspot.com */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:right;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var arlina_thumbs = 82; 
var arlina_title = true; 
</script>
<script src="/feeds/posts/summary?max-results=12&amp;alt=json-in-script&amp;callback=arlinagrid"></script> 

غيير ما باللون الاخضر بعدد المواضيع التي تريد ان تضهر في الاضافة و اخيرا اضغط على حفظ .

25 أغسطس، 2016

قالب Gearworld معرب و مطور


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

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




لتشغيل السلايد شو اذهب الى "لوحة التحكم" ثم "تخطيط" واذهب الى "feature content slider" كما في الصورة










واضغط على "تحرير" وضع فيها اسم تسمية .

والى هنا ينتهي شرحنا لا تنسى الانضمام الى المدونة  ❤  👍  ☑

23 أغسطس، 2016

dearpins قالب بلوجر بسيط و متجاوب


مرحبا، قالب جديد قمنا بتعريبه لكم قالب dearpins والقالب يمتلك مضهر بسيط و جميل و الوان جميلة و ايضا به اضافات جميلة جدا  👌  و مساحات اعلانية و القالب يمتلك خطوط جميلة جدا و القالب متجاوب مع جميع الشاشات  📺 .


مميزات / اضافات القالب

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

22 أغسطس، 2016

قالب متجر مبدعي التصميم من تكويد مدونة كورد ويب


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



اضافة أزرار التحميل والمعاينة بلغة الماتريال ديزاين


مرحبا، اضافتنا اليوم من اضافات بلوجر طريقة أضافة الأزرار والكثير من المدونات يستعملونها في معاينة و تحميل القوالب لذا فسميناها ازرار التحميل و المعاينة 😃 و هي بلغة الماتريال ديزاين و اذا لا تعرف ما هو الماتريال ديزاين فتستطيع البحث في جوجل وهنالك الكثير من الشروحات 😉 👍 .



طريقة اضافتها
اذهب الى "لوحة التحكم" ثم "قالب" ثم "تحرير HTML"
و ابحث عن  </head>  وضع فوقه هذا الكود
 <style type='text/css'>
@media only screen and (min-width: 993px) {
    .container {
        width: 85%;
    }
}
@media only screen and (min-width: 993px) {
    .container {
        width: 70%;
    }
}
@media only screen and (min-width: 601px) {
    .container {
        width: 85%;
    }
}
.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}
.btn-space{
    text-align: center;
} 
.ripple {
    text-align: center;
    display: inline-block;
    padding: 8px 30px;
    border-radius: 2px;
    letter-spacing: .5px;
    border-radius: 2px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    position: relative;
    z-index: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.ripple:hover {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.ink {
    display: block;
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.animate {
    -webkit-animation: ripple 0.55s linear;
    -moz-animation: ripple 0.55s linear;
    -ms-animation: ripple 0.55s linear;
    -o-animation: ripple 0.55s linear;
    animation: ripple 0.55s linear;
}
@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
    }
}
@-moz-keyframes ripple {
    100% {
        opacity: 0;
        -moz-transform: scale(2.5);
    }
}
@-o-keyframes ripple {
    100% {
        opacity: 0;
        -o-transform: scale(2.5);
    }
}
@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}
.red {
    background-color: #F44336;
    color:#ffffff;
}
.pink {
    background-color: #E91E63;
    color:#ffffff;

}
.blue {
    background-color: #2196F3;
    color:#ffffff;

}
.cyan {
    background-color: #00bcd4;
    color:#ffffff;

}
.teal {
    background-color: #009688;
    color:#ffffff;

}
.yellow {
    background-color: #FFEB3B;
    color: #000;
}
.orange {
    background-color: #FF9800;
    color:#ffffff;

}
.brown {
    background-color: #795548;
    color:#ffffff;

}
.grey {
    background-color: #9E9E9E;
    color:#ffffff;

}
.black {
    background-color: #000000;
    color:#ffffff;

}

  </style>
 

وبعد اضافتها اضغط على حفظ .

وعند كتابة تدوينة انتقل الى وضع HTML وضع فيها الكود التالي
 <div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="container btn-space" style="font-weight: bold;">
<a class="ripple red" href="#" style="color: white;">أضغط هنا</a>
      <a class="ripple blue" href="#" style="color: white;">أضغط هنا</a>
      <a class="ripple cyan" href="#" style="color: white;">أضغط هنا</a>
      <a class="ripple orange" href="#" style="color: white;">أضغط هنا</a>
      <a class="ripple brown" href="#" style="color: white;">أضغط هنا</a>
      <a class="ripple grey" href="#" style="color: white;">أضغط هنا</a>
    </div>
</div> 

وقم بتغيير ما باللون الاحمر بأي رابط تريد  ☑ 👌 ❤