سمارت ويب

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

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

الملف الخاص بقالب نفق : من هنا
معاينة تحميل

الكاتب : Unknown تاريخ النشر : الأحد، 25 سبتمبر 2016 ساعة النشر : 11:46 ص عدد التعليقات : 1 القسم : قوالب بلوجر

مزيد من المعلومات »

Unknown 1

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

قوالب بلوجر

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

الرابط من هنا

للحصول على القالب ، قم بالشروط التالي

إنضم لأعضاء المدونة من هنا
قم بوضع تعليق به اسم حسابك التي انضممت به للمدونة

ملاحظة : لا أسامح اي شخص حذف الحقوق إلى يوم الدين

الكاتب : Unknown تاريخ النشر : السبت، 17 سبتمبر 2016 ساعة النشر : 3:43 م عدد التعليقات : 9 القسم : قوالب بلوجر

مزيد من المعلومات »

Unknown 9

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

إضافات بلوجر

السلام عليكم متتبعي مدونة سمارت ويب ، اليوم ساشارك معكم اداة التلميحات التي نراها في العديد من المواقع المشهرة ، وقد تم نشر هذه الإضافة على عرب ويب ، لكنها بطريقة اخرى وابستعمال بسكربت كذلك وأكواد CSS ، ولكي تظهر استخدم فقط Title ، لكن انا اايوم اتيت لكم بالإضافة باكواد CSS فقط ، ما عليكم سوى متابعة هذه التدوينة ، لنبدأ ...

ولمعاينة الإضافة ، ومعرفة الأكواد التي يجب استعمالها لتفعيل الإضافة
من هنا

توجه إلى تحرير قالب
وإبحث عن وسم ]]></b:dkin>
وألصق فوقه هذا الكود :

/* === 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%;
}

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

مزيد من المعلومات »

Unknown 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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' placeholder='ابحث في الموقع' type='text'/>
<input class='searchsubmit' type='submit' value='بحث'/>
</form>
</div>

7- بعد الإنتهاء ضع هذا هذا في اي مكان في القالب يحلو لك (للتذكير : هذا الكود هو المسؤول عن إظهار مربع البحث ) :

<span class="search-button"><i class="fa fa-search"></i></span>

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

الكاتب : Unknown تاريخ النشر : الثلاثاء، 13 سبتمبر 2016 ساعة النشر : 12:12 م عدد التعليقات : 0 القسم : إضافات بلوجر

مزيد من المعلومات »

Unknown 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: '1';}
.popular-posts li:nth-child(2) .item-thumbnail:before {content: '2';}
.popular-posts li:nth-child(3) .item-thumbnail:before {content: '3';}
.popular-posts li:nth-child(4) .item-thumbnail:before {content: '4';}
.popular-posts li:nth-child(5) .item-thumbnail:before {content: '5';}
.popular-posts li:nth-child(6) .item-thumbnail:before {content: '6';}
.popular-posts li:nth-child(7) .item-thumbnail:before {content: '7';}
.popular-posts li:nth-child(8) .item-thumbnail:before {content: '8';}
.popular-posts li:nth-child(9) .item-thumbnail:before {content: '9';}
.popular-posts li:nth-child(10) .item-thumbnail:before {content: '10';}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';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:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';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- إحفظ القالب

الكاتب : Unknown تاريخ النشر : الاثنين، 5 سبتمبر 2016 ساعة النشر : 12:44 م عدد التعليقات : 1 القسم : إضافات بلوجر ، دروس بلوجر

مزيد من المعلومات »

Unknown 1

السبت، 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>

الكاتب : Unknown تاريخ النشر : السبت، 3 سبتمبر 2016 ساعة النشر : 12:15 م عدد التعليقات : 0 القسم : إضافات بلوجر

مزيد من المعلومات »

Unknown 0

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

إضافات بلوجر

شرح التركيب

تجوه إلى التخطيط
إضغط على إضافة أداة في المكان الذي تريده
إختر إضافة HTML/Javascript
وألصق الكود التالي

<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")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt0yMmowE9USeqAoPU3NoLCNACa_DdzvQxfJHyl6sozFA2LB8TNlGWvg9Y1QArrrAfJE0CZH9qAfCLfu3W_Dthkx9TJpgPvY71ffo4mHQ1KwhyLxuyKUAA2iaJTHZQ0SCzFPrB67p2asr7/"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjXied9W4NgPYXhbZpj7PWubCHvNNKk6tP-1chA15VBKxxU-hN-fYu-C8WGmRaF8rXGABG3pbEiauMuq2vJlDc957ma5US3W7VKAmqb51ON5_4zJkNr49i5ieTXAYuyHLeQRHHkNG9ubtC/"+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+="…",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||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTaD4zVqDyrBfLtAxaeIPY9uwOMPyDDjdBvxWimNn14n2F05ORH0Regg-hbAPI4v1AzYgPS0GUbLG-1kP0LiRn-7_s-Ef2YFqCYLR9vks2cgpPogzElUvQGkNKUAl0a4XyinRd_er8BB_7/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More »",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&callback=comments&max-results=15"></script>

الكاتب : Unknown تاريخ النشر : الثلاثاء، 30 أغسطس 2016 ساعة النشر : 1:39 م عدد التعليقات : 0 القسم : إضافات بلوجر

مزيد من المعلومات »

Unknown 0

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

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

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

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

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

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

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

المشاركات الشائعة

مشاركة مميزة

حصريا! : طريقة إضافة التلميحات لمدونات بلوجر

التسميات

أرشيف المدونة الإلكترونية

المتابعون

نموذج الاتصال