الأحد، 25 سبتمبر، 2016

السلام عليكم متتبعي مدونة سمارت ويب ، اليوم سأشارك معكم قالب نفق الإحترافي من تصميم مدونتنا. وهذا صمم بعناء وسهر ، وبغض الظروف الإجتماعية وهي الدراسة وديق الوقت  وغيرها ... استطعنا اكماله .
الملف الخاص بقالب نفق : من هنا
معاينة  تحميل
الكاتب : أيوب مرغاد تاريخ النشر : الأحد، 25 سبتمبر، 2016 ساعة النشر : 11:46 ص عدد التعليقات : 0 القسم :
أيوب مرغاد 0

السبت، 17 سبتمبر، 2016


السلام عليكم ، اليوم أقدم لكم قالب مدونة سمارت الحالي النسخة الأولى  تحت طلب بعض الإخوان ، القالب لم يتم إضافة الا 80% من الإضافات المراد اضافتها .
في هذا الرابط يمكنك العثور على ميزات ومعلومات عن القالب ، كذلك بعض رابط المعاينة وطريقة التحكم ، وبعض الإضافات للقالب
الرابط من هنا

للحصول على القالب ، قم بالشروط التالي
  1. إنضم لأعضاء المدونة من هنا
  2. قم بوضع تعليق به اسم حسابك التي انضممت به للمدونة
ملاحظة : لا أسامح اي شخص حذف الحقوق إلى يوم الدين
الكاتب : أيوب مرغاد تاريخ النشر : السبت، 17 سبتمبر، 2016 ساعة النشر : 3:43 م عدد التعليقات : 6 القسم :
أيوب مرغاد 6

الجمعة، 16 سبتمبر، 2016


السلام عليكم متتبعي مدونة سمارت ويب ، اليوم ساشارك معكم اداة التلميحات التي نراها في العديد من المواقع المشهرة ، وقد تم نشر هذه الإضافة على عرب ويب ، لكنها بطريقة اخرى وابستعمال بسكربت كذلك وأكواد CSS ، ولكي تظهر استخدم فقط  Title ، لكن انا اايوم اتيت لكم بالإضافة باكواد CSS فقط ، ما عليكم سوى متابعة هذه التدوينة ، لنبدأ ...
ولمعاينة الإضافة ، ومعرفة الأكواد التي يجب استعمالها لتفعيل الإضافة
من هنا
  1. توجه إلى تحرير قالب 
  2. وإبحث عن وسم ]]></b:dkin>
  3. وألصق فوقه هذا الكود :

/* === Smart Weeb Tooltip === */
button[data-swtooltip] {
  overflow: visible;
}
[data-swtooltip] {
  position: relative;
}
[data-swtooltip]:before,
[data-swtooltip]:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.18s ease-out 0.18s;
  transition: all 0.18s ease-out 0.18s;
  bottom: 100%;
  left: 50%;
  position: absolute;
  z-index: 10;
  -webkit-transform: translate(-50%, 10px);
  -ms-transform: translate(-50%, 10px);
  transform: translate(-50%, 10px);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}
[data-swtooltip]:after {
  background: rgba(17, 17, 17, 0.9);
  color: #fff;
  content: attr(data-swtooltip);
  font-size: 15px;
  padding: .3em 1.3em;
  white-space: nowrap;
  margin-bottom: 1px;
}
[data-swtooltip]:before {
    content: "";
    background: transparent;
    border: 6px solid transparent;
    position: absolute;
}
[data-swtooltip-pos="up"]:before {
    right: 100%;
    bottom: 50%;
    margin: 0;
    margin-bottom: 5px;
    border-top-color: rgba(17, 17, 17, 0.9);
}
[data-swtooltip]:hover:before,
[data-swtooltip][data-swtooltip-visible]:before,
[data-swtooltip]:hover:after,
[data-swtooltip][data-swtooltip-visible]:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 0.9;
  pointer-events: auto;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
[data-swtooltip][data-swtooltip-break]:after {
  white-space: normal;
}
[data-swtooltip-pos="down"]:before,
[data-swtooltip-pos="down"]:after {
  bottom: auto;
  left: 50%;
  top: 100%;
  -webkit-transform: translate(-50%, -10px);
  -ms-transform: translate(-50%, -10px);
  transform: translate(-50%, -10px);
}
[data-swtooltip-pos="down"]:after {
  margin-top: 11.5px;
}
[data-swtooltip-pos="down"]:before {
    right: 100%;
    bottom: 50%;
    margin: 0 -1px 0px 0;
    border-bottom-color: rgba(17, 17, 17, 0.9);
}
[data-swtooltip-pos="down"]:hover:before,
[data-swtooltip-pos="down"][data-swtooltip-visible]:before,
[data-swtooltip-pos="down"]:hover:after,
[data-swtooltip-pos="down"][data-swtooltip-visible]:after {
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
[data-swtooltip-pos="left"]:before,
[data-swtooltip-pos="left"]:after {
  bottom: auto;
  left: auto;
  right: 100%;
  top: 50%;
  -webkit-transform: translate(10px, -50%);
  -ms-transform: translate(10px, -50%);
  transform: translate(10px, -50%);
}
[data-swtooltip-pos="left"]:after {
  margin-right: 11px;
}
[data-swtooltip-pos="left"]:before {
    right: 100%;
    bottom: 50%;
    margin: 0 -1px 0px 0;
    border-left-color: rgba(17, 17, 17, 0.9);
}
[data-swtooltip-pos="left"]:hover:before,
[data-swtooltip-pos="left"][data-swtooltip-visible]:before,
[data-swtooltip-pos="left"]:hover:after,
[data-swtooltip-pos="left"][data-swtooltip-visible]:after {
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
[data-swtooltip-pos="right"]:before,
[data-swtooltip-pos="right"]:after {
  bottom: auto;
  left: 100%;
  top: 50%;
  -webkit-transform: translate(-10px, -50%);
  -ms-transform: translate(-10px, -50%);
  transform: translate(-10px, -50%);
}
[data-swtooltip-pos="right"]:after {
  margin-left: 12px;
}
[data-swtooltip-pos="right"]:before {
    right: 100%;
    bottom: 50%;
    border-right-color: rgba(17, 17, 17, 0.9);
}
[data-swtooltip-pos="right"]:hover:before,
[data-swtooltip-pos="right"][data-swtooltip-visible]:before,
[data-swtooltip-pos="right"]:hover:after,
[data-swtooltip-pos="right"][data-swtooltip-visible]:after {
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
[data-swtooltip-length]:after {
  white-space: normal;
}
[data-swtooltip-length="small"]:after {
  width: 80px;
}
[data-swtooltip-length="medium"]:after {
  width: 150px;
}
[data-swtooltip-length="large"]:after {
  width: 260px;
}
[data-swtooltip-length="xlarge"]:after {
  width: 90vw;
}
@media screen and (min-width: 768px) {
  [data-swtooltip-length="xlarge"]:after {
    width: 380px;
  }
}
[data-swtooltip-length="fit"]:after {
  width: 100%;
}

الكاتب : أيوب مرغاد تاريخ النشر : الجمعة، 16 سبتمبر، 2016 ساعة النشر : 4:53 ص عدد التعليقات : 2 القسم :
أيوب مرغاد 2

الثلاثاء، 13 سبتمبر، 2016



السلام عليكم متتبعي مدونة سمارت ويب ، اليوم ساشارك معكم مربع بحث احترافي مثل مدونة المحترف ومبدعي التصميم والعديد منها ، وساشرح لكم طريقة تركيبه ، هيا لنبدأ ...
معاينة : من هنا
طريقة التركيب

1- توجه إلى قالب .
2- ثم تحرير HTML .
3- ابحث عن هذا الوسم </head> .
4- ثم ضع هذا الكود فوقه : 
<style>.search-wrapper {    position: fixed;    z-index: 9999;    width: 100%;    height: 100%;    background: rgba(52,52,52,0.7);    bottom: 1000px;    transition: 0.6s;}.search-form {    transition: .6s;    font-family: food-font;    position: absolute;    top: 50%;    background: transparent;    right: 50%;    margin-right: -250px;    margin-top: -65px;    width: 500px;    text-align: center;}.search-form .search-bar {    width: 430px;    height: 40px;    font-family: food-font;    padding: 4px;    font-size: 14px;    float: right;    border-radius: 2px;    border: 0;}.search-form .searchsubmit {    width: 60px;    height: 40px;    FLOAT: RIGHT;    margin: 0 3px;    border: 0;    background: #3395DC;    color: #fff;    font-family: food-font;    font-size: 15px;    border-radius: 2px;    cursor: pointer;}.close-search {    background: none;    border: 0;    color: #fff;    font-size: 30px;    padding: 10px;    transform: rotate(0);    cursor: pointer;    transition: 0.8s;}.close-search:hover {    transform: rotate(360deg);    transition: 0.5s;}</style><script>$(document).ready(function(){    $("span.search-button").click(function(){      $(".search-wrapper").css("bottom", "0px");      $("button.close-search").css("display", "block");    });    $("button.close-search").click(function(){      $(".search-wrapper").css("bottom", "-1000px");      $("button.close-search").css("display", "none");    });});</script>

5- بعد ذلك ابحث عن هذا الوسم : <body>
6- وألصق هذا الكود فوقه :

<div class='search-wrapper'>
  <button class='close-search'><i class='fa fa-times'></i></button>
<form action='/search' class='search-form' method='get'>
<input class='search-bar' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' placeholder='ابحث في الموقع' type='text'/>
  <input class='searchsubmit' type='submit' value='بحث'/>
</form>
</div>


7- بعد الإنتهاء ضع هذا هذا في اي مكان في القالب يحلو لك (للتذكير : هذا الكود هو المسؤول عن إظهار مربع البحث ) :
<span class="search-button"><i class="fa fa-search"></i></span>

ملاحظة : لم أضع لكم ستايل للكود المسؤول عن إظهار مربع البحث ، أي كود أيقونة البحث ، اذا لم تكن لديك دراية باكواد CSS ولا تعلم كيف تعطيها ستايل ، فيمكنني مساعدة ، عبر التواصل على حسابي على  فيسبوك  أو وضع تعليق به رابط المدونة ووسيلة للتواصل معك ، وشكرا
الكاتب : أيوب مرغاد تاريخ النشر : الثلاثاء، 13 سبتمبر، 2016 ساعة النشر : 12:12 م عدد التعليقات : 0 القسم :
أيوب مرغاد 0

الاثنين، 5 سبتمبر، 2016

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

1- اذا كنت تتوفر على ستايل للمشاركات الشائعة فقم بحذف لكي لا تحذت ايت مشاكل
2- توجه للقالب
3- تحرير HTML
4- إبحث عن ]]></b:skin> وضع الكود التالي فوقه ،أو ضعه فوق </head> بين وسمي <style>...</style>

.PopularPosts ul li {border-bottom: 1px solid #ccc;position: relative;}
.PopularPosts .item-thumbnail {float: right; margin-left: 8px;width: 80px;height: 80px;}
.PopularPosts .item-thumbnail img {width: 100%;height: 100%;border-radius: 50%;padding: 3px;border: 1px solid #929292;transition: 0.3s;}
.PopularPosts .item-thumbnail img:hover {border-radius: 0;transition: 0.4s;}
.PopularPosts .item-title {margin-bottom: 3px;}
.PopularPosts .item-title a {color: #2E6A9C;font-size: 16px;}
.PopularPosts .item-snippet {height: 31px;overflow: hidden;font-size: 13px;font-family: Droid Arabic Naskh;}
.popular-posts li .item-thumbnail:before {position: absolute;margin-right: 28px;margin-top: 26px;z-index: 9999;    background: #2E6A9C;color: #fff;display: block;border-radius: 50%;font-size: 16px;    width: 25px;text-align: center;line-height: 26px;height: 25px;}
.popular-posts li:nth-child(1) .item-thumbnail:before {content: &#39;1&#39;;}
.popular-posts li:nth-child(2) .item-thumbnail:before {content: &#39;2&#39;;}
.popular-posts li:nth-child(3) .item-thumbnail:before {content: &#39;3&#39;;}
.popular-posts li:nth-child(4) .item-thumbnail:before {content: &#39;4&#39;;}
.popular-posts li:nth-child(5) .item-thumbnail:before {content: &#39;5&#39;;}
.popular-posts li:nth-child(6) .item-thumbnail:before {content: &#39;6&#39;;}
.popular-posts li:nth-child(7) .item-thumbnail:before {content: &#39;7&#39;;}
.popular-posts li:nth-child(8) .item-thumbnail:before {content: &#39;8&#39;;}
.popular-posts li:nth-child(9) .item-thumbnail:before {content: &#39;9&#39;;}
.popular-posts li:nth-child(10) .item-thumbnail:before {content: &#39;10&#39;;}
.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 .item-snippet{display:none}
5- إحفظ القالب
الكاتب : أيوب مرغاد تاريخ النشر : الاثنين، 5 سبتمبر، 2016 ساعة النشر : 12:44 م عدد التعليقات : 0 القسم : ،
أيوب مرغاد 0

السبت، 3 سبتمبر، 2016


السلام عليكم متتبعي مدونة سمارت ويب ، في هذه التدوينة ساعطيكم اضافة تحميل تطبيق المدونة ، فالعديد منا يبحث عن الاضافة ولا يجدها ، فانا قمت بتصميمها لكم متتبعينا الكريم .
للمعاينة : إضغط هنا

شرح التركيب
1- توجه الى التخطيط
2- اضغط على اضافة اداة في المكان الذي تريد وضع الاضافة فيه
3- اختر اضافة HTML/JavaScript
4- ألصق الكود التالي

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
.blog-logo img {
    width: 30%;
    height: 30%;
    border-radius: 20%;
}
.blog-app-text {
    text-align: center;
}
.blog-app-title {
    background: #3598DC;
    color: #fff;
    width: 50%;
    display: inline-block;
    padding: 3px;
    text-align: center;
}
.blog-app-description {
    padding: 5px 2px;
    color: #737373
}
.download-app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.download-app a {
    width: 48%;
    display: inline-block;
    float: right;
    text-align: center;
    margin: 3px;
    border-radius: 30px;
    padding: 4px 0;
    color: #fff;
}
.android {
    background: #74C043;
}
.ios {
    background: #808080;
}
.tooltip {
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    position: absolute;
    display: inline-block;
    width: 130px;
    HEIGHT: 23px;
    line-height: 23px;
    text-align: center;
    margin-right: -71px;
    margin-top: -30px;
    font-size: 13px;
    background: #02ADD4;
    border-radius: 2px;
    color: #FFFFFF;
    opacity: 0;
}
.download-app a:hover .tooltip {
    opacity: 1;
    z-index: 9999;
}
</style>
<div class='blog-app'>
<div class='blog-logo'>
  <center><a href='#'><img src='http://gulf-up.com/do.php?img=152712'/></a></center>
<div>
<div class='blog-app-text'>
<h3 class='blog-app-title'>حمل تطبيق المدونة</h3>
<p class='blog-app-description'>
حمل تطبيق مدونتنا على هاتفك لتتوصل بكل جديدنا، وحتى لا يفوتك اي شيء ، فماذا تنتظر !
</p>
</div>
<div class='download-app'>
<a class='android' href='#'><i class="fa fa-android"/></i><span class='tooltip'>تحميل على الاندرويد</span></a>
<a class='ios' href='#'><i class="fa fa-apple"/></i><span class='tooltip'>تحميل على IOS</span></a>
</div>
</div></div></div>
الكاتب : أيوب مرغاد تاريخ النشر : السبت، 3 سبتمبر، 2016 ساعة النشر : 12:15 م عدد التعليقات : 0 القسم :
أيوب مرغاد 0

الثلاثاء، 30 أغسطس، 2016



شرح التركيب
  1. تجوه إلى التخطيط
  2. إضغط على إضافة أداة في المكان الذي تريده 
  3. إختر إضافة HTML/Javascript
  4. وألصق الكود التالي
<style scoped='' type="text/css">
ul.comments{list-style:none;margin:0;padding:0;max-height: 380px; overflow: auto;}.comments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-all;padding:10px 0;margin:0}.comments li .avatarImage{float:right;mapost blockquotergin-left:10px;position:relative;overflow:hidden}
.comments li img {
    position:relative;
    overflow:hidden;
    width:42px;
    height:42px;
    border-radius: 50%;
    border: 1px solid rgb(221, 221, 221);
    background: #FFF;
    display: block;
}
.comments li a{font-weight:700}.comments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4;    word-break: normal;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments
function comments(a){var e;e='<ul class="comments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="&hellip;",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=30,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="http://2.bp.blogspot.com/-XjxrXKBPQqs/VYcGtLWPGUI/AAAAAAAAKaQ/5jr871JIwds/s1600/default-avatar.jpg",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"http://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More &raquo;",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=comments&amp;max-results=15"></script>
الكاتب : أيوب مرغاد تاريخ النشر : الثلاثاء، 30 أغسطس، 2016 ساعة النشر : 1:39 م عدد التعليقات : 0 القسم :
أيوب مرغاد 0