اكتب ما تود البحت عنه و اضغط Enter

السلايد 1

column/بلوجر/3

حصريات من تقديم أمين رغيب من الإثنين إلى الخميس المزيد

السلايد 2

حصريات
معذرة، فالصفحة التي تبحث عنها في هذه المدونة ليست متوفرة.

29‏/9‏/2017



بدائل يوتيوب :

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

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

أولاً : موقع Archive

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


ثانياً : موقع Veoh

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


ثالثاً: موقع MetaCafe

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


23‏/2‏/2017


هذه التدوينة لاتعكس تغيير مجال المدونة.


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



11‏/2‏/2017


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

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

للحصول على القالب  من هنا

3‏/2‏/2017



رحبا بكم احبتي
نحن دوما في تقدم للامام درس اليوم او اضافة اليوم هي حصرية ومعنا حصرية انها نحن اول من ينشرها واول من صممها
الاضافة بسيطة جدا من تصميم اخوكم : يونس ورضاوي
وبدون من الكثير من الكلام الفارغ لا اطيل عليكم فالاضافة عملها سهل وبسيط هي فقط تعرض زر الاشتراك في القناة على اليوتيوب او توجه الزائر الى قناتك طريقة التركيب سهلة جدا فقط الاضافة تتكون من اكواد html end css
شرح التركيب توجه للقالب ثم تحرير وابحث عن ]]></b:skin> 
ضع الكود التالى فوقه وقم بحفظ القالب

/*————————————————–*/
WARDAOUI31{
width: 25%;
}
.OI-WEB{
background: #ffffff;
width: 100%;
height: 255px;
border: 2px solid;
border-color: #e5e6e9 #e5e6e9 #d0d1d5;
border-radius: 3px; box-shadow: 2px 2px 6px 0px black;
}
.OI-WEB1{
width: 25%;
margin-top: -52px;
padding-right: 6px;
}
.oi-web2{
width: 85%;
margin-right: 46px;
margin-bottom: -135px;
}
img {
width: 100%;
height: 150px; } 
/*————————————————————*/
اذهب الى التخطيط اختر اضافة اداة في الجانب ( سيدبار) ثم اختر HTML/JavaScript

ثم اضف الكود التالي غيير فقط اسم المستخدم المشار اليه باللون البرتقالي


<div id=”WARDAOUI31″>
<div class=”OI-WEB”><img src=”http://www.ag.gov.tt/portals/0/Images/youtube.gif” />
<div class=”OI-WEB1″><div class=”widget-container”> <div class=”textwidget”><div id=”___ytsubscribe_0″ style=”text-indent: 0px; margin: 0px; padding: 0px; background: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 180px; height: 48px;”>
UCGY2ipym6YzPmXXyXO83nvg&amp;layout=full&amp;count=default&amp;origin=https%3A%2F%2Fwww.stepsn.com&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.ar.7x3SGfTT2M4.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCMOTCsgBsmnJ8mabBsYfC4fEvIJow#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I0_1485997606475&amp;parent=https%3A%2F%2Fwww.stepsn.com&amp;pfname=&amp;rpctoken=33757024″ data-gapiattached=”true”></iframe></div></div></div>
</div>
</div><!–end wardaoui31–></div>

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

2‏/2‏/2017



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

 وايضا فيها نمودج طلب او بمعنا فيها زر يحولك الى صفحة شروط الاعلان الاضافة من تصميمي انا شخصيا . لا اطيل عليكم اولا توجه للقالب ثم تحرير : ابحث عن الكود التالي ]]></b:skin> ثم اضف كود css  ستجده في هذه الصفحة

احفظ القالب واما كود html اضفه في المكان الذي تريد ان تظهر فيه الاضافة ستجده في هذه الصفحة

  اخيرا قم بتغيير الكلمات والروابط بما تريد

اذا واجهتكم اي مشكلة اسئل عنها في تعليق وسيتم مساعدتك

26‏/1‏/2017


درس اليوم حول
 كود ميتا تاج مدونات بلوجر 2017
 يعد كود الميتا تاج من اهم عوامل السيو التى تساعد على الارشفه السريعه والدقيقه لمدونات بلوجر وتساعد ايضا فى شهرة مواضيع المدونه فى بحث جوجل
عندما يقوم محرك بحث جوجل بفهرسة مدونتك وإدراجها ضمن نتائجها , فإن المدونات التى تراعى أسس السيو وقواعده الصحيحه وتسير عليه هى تلك المدونات الى تظهر فى المراتب الأولى فى نتائج البحث
شرح طريقة اضافة افضل كود ميتا تاج لمدونات بلوجر

 تابع الشرح ابحث عن <head>

 وضع الكود التالي اسفله وقم بتغيير الكلمات الي بالون البرتقالي الشرح في الاسفل "جدول"
<!-- [ Meta Tag SEO ] -->
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta content='sat, 02 jun 2020 00:00:00 GMT' http-equiv='expires'/>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name 'generator' />
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;http://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESKRIPSI-BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/about' rel='author'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS' rel='me'/>
<meta content='KODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='NAMA-ADMIN' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot; Untuk membaca postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://www.stepsn.com/wp-content/uploads/2017/01/small-9457-5875411cde22a-Recovered.gif' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/PROFIL-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' property='article:publisher'/>
<meta content='KODE-APLIKASI-FACEBOOK' property='fb:app_id'/>
<meta content='KODE-ADMIN-FACEBOOK' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>
الشرح
العبارات الملونة : البرتقالي تفسير
DESKRIPSI-BLOG الوصف أو الكلمات الرئيسية
USER-GOOGLE-PLUS حسابك على جوجل
KODE-VALIDASI-GOOGLE-WEBMASTER رمز التحقق جوجل من مشرفي المواقع
KODE-VALIDASI-BING-WEBMASTER رمز التحقق بينغ
NAMA-ADMIN اسم الادمن
id dan Indonesia البلد او الدولة
PROFIL-FACEBOOK رابط حسابك على الفيس بوك
FAN-PAGE-FACEBOOK رابط صفحتك ع الفيس بوك
KODE-APLIKASI-FACEBOOK رمز التطبيق فيسبوك يمكن انشاء واحد من هنا  https://developers.facebook.com
KODE-ADMIN-FACEBOOK ip الخاص بحسابك على الفيس بوك   http://findmyfbid.com
USER-TWITTER اسم المستخدم على التويتر
ان واجهتكم اي مشكلة في التركيب او اي شيئ ضعه في تعليق


الموضوع الاصلي من : خطوات كوم





18‏/8‏/2016


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

  • لا تنسى حفض نسخة للقالب 


  1. اول شيئ نقوم به وهو التوجه الى :
  2. لوحة التحكم >> قالب>> تحرير html 
  3. قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)
]]></b:skin>
واضف الكود التالي فوقه مباشرة


/*============================*/


*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.fb-cont {
  overflow: hidden;
  position: relative;
  margin: 100px auto;
  width: 800px;
  padding: 75px;
  padding-bottom: 140px;
  background: #fff;
}
.fb-cont__inner {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.fb-cont__inner:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  height: 4px;
  margin-top: -2px;
  background: rgba(200, 206, 211, 0.5);
  border-radius: 2px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.fb-cont__drag-cont {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 0;
  width: 574px;
  height: 100%;
  margin-left: -287px;
  pointer-events: none;
  -webkit-transform: translate3d(50%, 0, 0);
          transform: translate3d(50%, 0, 0);
}
.fb-heading {
  margin: 0 auto 60px;
  font-size: 30px;
  text-align: center;
  color: #737b7b;
}
.fb-emote {
  z-index: 1;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 76px;
  height: 76px;
  cursor: pointer;
}
.fb-emote svg {
  display: block;
  margin-bottom: 15px;
  width: 100%;
  height: 100%;
  background: #c8ced3;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.fb-emote.s--active svg {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.fb-emote__caption {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #c8ced3;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.fb-emote.s--active .fb-emote__caption {
  color: #655e53;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}
.fb-emote__eye {
  stroke: none;
  fill: #fff;
}
.fb-emote__smile {
  stroke: #fff;
  stroke-width: 10;
  stroke-linecap: round;
  fill: none;
}
.fb-active-emote {
  position: absolute;
  left: 0;
  top: 50%;
  width: 110px;
  height: 110px;
  margin-left: -55px;
  margin-top: -55px;
  background: #ffd68c;
  border-radius: 50%;
}
.fb-active-emote svg {
  width: 100%;
  height: 100%;
}
.fb-active-emote__eye {
  stroke: none;
  fill: #655e53;
}
.fb-active-emote__smile {
  stroke: #655e53;
  stroke-width: 10;
  stroke-linecap: round;
  fill: none;
}
.icon-link {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 32px;
}
.icon-link img {
  width: 100%;
  vertical-align: top;
}
.icon-link--twitter {
  left: auto;
  right: 5px;
}
 
 ضع فوق

</body>
الكود التالي

<script type='text/javascript'>
function $$(selector, context) {
var context = context || document;
var elements = context.querySelectorAll(selector);
var nodesArr = [].slice.call(elements);
return nodesArr.length === 1 ? nodesArr[0] : nodesArr;
};
var $emotesArr = $$('.fb-emote');
var numOfEmotes = $emotesArr.length;
var $dragCont = $$('.fb-cont__drag-cont');
var $activeEmote = $$('.fb-active-emote');
var $leftEye = $$('.fb-active-emote__eye--left');
var $rightEye = $$('.fb-active-emote__eye--right');
var $smile = $$('.fb-active-emote__smile');
var emoteColors = {
terrible: '#f8b696',
bad: '#f9c686',
default: '#ffd68c'
}
var animTime = 0.5;
$emotesArr.forEach(function($emote, i) {
var progressStep = i / (numOfEmotes - 1);
$emote.dataset.progress = progressStep;
$emote.addEventListener('click', function() {
var progressTo = +this.dataset.progress;
var type = this.dataset.emote;
var $target = document.querySelector('#fb-emote-' + type);
var $lEye = $target.querySelector('.fb-emote__eye--left');
var $rEye = $target.querySelector('.fb-emote__eye--right');
var leftEyeTargetD = $lEye.getAttribute('d');
var rightEyeTargetD = $rEye.getAttribute('d');
var smileTargetD = $target.querySelector('.fb-emote__smile').getAttribute('d');
var bgColor = emoteColors[type];
if (!bgColor) bgColor = emoteColors.default;
$$('.fb-emote.s--active').classList.remove('s--active');
this.classList.add('s--active');
TweenMax.to($activeEmote, animTime, {backgroundColor: bgColor});
TweenMax.to($dragCont, animTime, {x: progressTo * 100 + '%'});
TweenMax.to($leftEye, animTime, {morphSVG: $lEye});
TweenMax.to($rightEye, animTime, {morphSVG: $rEye});
TweenMax.to($smile, animTime, {attr: {d: smileTargetD}});
});
});</script>
واخيرا ابحث عن هذا الكود ستجد اكثر من واحد الاخير هو المقصود 
<data:post.body/> 
الان اضف الكود التالي  :

  1. ان اردت الاضافة تكون فوق المقال الضفه فوق الكود وانا لا انصحك بذلك
  2. وان اردت الاضافة في اسفل المقال اضفه تحت الكود السابق 

<svg class="fb-emotes-svg" style="display: none;">
  <symbol id="fb-emote-terrible" data-emote="terrible" viewBox="0 0 100 100">
    <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 l10,10 a10,10 0 0,1 -20,0 a10,10 0 0,1 10,-10"/>
    <path class="fb-emote__eye fb-emote__eye--right" d="M58,35 l10,-10 a10,10 0 0,1 0,20 a10,10 0 0,1 -10,-10"/>
    <path class="fb-emote__smile" d="M30,68 q20,-13 40,0 M30,68 q20,-13 40,0"/>
  </symbol>
  <symbol id="fb-emote-bad" data-emote="bad" viewBox="0 0 100 100">
    <path class="fb-emote__eye fb-emote__eye--left" d="M22,35 l10,-10 a10,10 0 0,1 0,20 a10,10 0 0,1 -10,-10"/>
    <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 l10,10 a10,10 0 0,1 -20,0 a10,10 0 0,1 10,-10"/>
    <path class="fb-emote__smile" d="M30,68 q20,-10 40,0 M30,68 q20,-10 40,0"/>
  </symbol>
  <symbol id="fb-emote-okay" viewBox="0 0 100 100">
    <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__smile" d="M35,73 q20,-4 35,-8 M35,73 q20,-4 35,-8"/>
  </symbol>
  <symbol id="fb-emote-good" viewBox="0 0 100 100">
    <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__smile" d="M30,68 q20,10 40,0 M30,68 q20,10 40,0"/>
  </symbol>
  <symbol id="fb-emote-great" viewBox="0 0 100 100">
    <path class="fb-emote__eye fb-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__eye fb-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
    <path class="fb-emote__smile" d="M30,68 q20,15 40,0 M30,68 q20,0 40,0"/>
  </symbol>
</svg>
<div class="fb-cont">
  <div class="fb-heading">كيفية المساعدة التي حصلت عليها؟
</div>
  <div class="fb-cont__inner">
    <div class="fb-emote" data-emote="terrible">
      <svg><use xlink:href="#fb-emote-terrible"/></svg>
      <p class="fb-emote__caption">فظيع</p>
    </div>
    <div class="fb-emote" data-emote="bad">
      <svg><use xlink:href="#fb-emote-bad"/></svg>
      <p class="fb-emote__caption">سيئة</p>
    </div>
    <div class="fb-emote s--active" data-emote="okay">
      <svg><use xlink:href="#fb-emote-okay"/></svg>
      <p class="fb-emote__caption">حسنا</p>
    </div>
    <div class="fb-emote" data-emote="good">
      <svg><use xlink:href="#fb-emote-good"/></svg>
      <p class="fb-emote__caption">جيد</p>
    </div>
    <div class="fb-emote" data-emote="great">
      <svg><use xlink:href="#fb-emote-great"/></svg>
      <p class="fb-emote__caption">عظيم</p>
    </div>
    <div class="fb-cont__drag-cont">
      <div class="fb-active-emote">
        <svg viewBox="0 0 100 100">
          <path class="fb-active-emote__eye fb-active-emote__eye--left" d="M32,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
          <path class="fb-active-emote__eye fb-active-emote__eye--right" d="M68,25 a10,10 0 0,1 0,20 a10,10 0 0,1 0,-20"/>
          <path class="fb-active-emote__smile" d="M35,73 q20,-4 35,-8 M35,73 q20,-4 35,-8"/>
        </svg>
      </div>
    </div>
  </div>
</div> 
قم بحفض القالب 
الان مبروك عليك الاضافة اي مشكل لا تتردد التعليقات بيننا 

8‏/7‏/2016




كيف تكون مدون ناجح؟

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

هل تريد أن تتعلم كيف تبني مدونة ناجحة وتكون مدونا ناجحا؟ تابع معي إذن!



النصيحة الأولى : اختر مجالا تحبه وتبرع فيه

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

النصيحة الثانية : لا تجعل الربح هدفك الأول 

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

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


النصيحة الثالثة : أضف لمستك الخاصة وتميز عن المدونات الأخرى


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

11‏/6‏/2016

  


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

من لوحة التحكم >> قالب>> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

]]></b:skin>


 واضف الكود التالي فوقه مباشرة


.post blockquote {
    background: rgb(49, 49, 49) !important;
    border-radius: 4px !important;
    border: 1px solid rgb(221, 221, 221) !important;
    box-sizing: border-box;
    clear: both !important;
    color: rgb(248, 248, 248) !important;
    direction: ltr !important;
    font-family: 'Courier New', 'MS Sans Serif', sans-serif, serif !important;
    font-size: 12px !important;
    font-stretch: normal !important;
    line-height: 1.6em !important;
    margin: 0px 1.15385em;
    max-height: 400px !important;
    outline: 0px;
    overflow-x: auto !important;
    padding: 0px 10px 10px !important;
    position: relative !important;
    quotes: "" "";
    text-align: left !important;
    vertical-align: baseline;
    z-index: 50 !important;}
 بعدها قم بحفظ القالب ولتفعيله ادهب مشاركة جديدة اتبع الصورة


ولاي استفسار باب التعليق مفتوح

8‏/6‏/2016



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

كيفية اضافة هذه الاداه الى مدوناتكم
من لوحة التحكم >> قالب>> تحرير html
قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)

 ]]></b:skin>

 واضف الكود التالي فوقه مباشرة
body {
  margin: 0 0 0 0;
  color: darkGray;
  background-color: rgba(20, 20, 20, .97);
  font-family: 'Source Sans Pro', sans-serif;
  text-rendering: optimizeLegibility;
}
.grid-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  height: auto;
  overflow: hidden;
}
.floatLeft {
  float: left;
}
.floatRight {
  float: right;
}
.grid-item {
  position: relative;
  overflow: hidden;
  margin: 0.2%;
  height: 0px;
}
.grid-item:hover {
  transform: scale(0.97);
  cursor: pointer;
}
.grid-item:active {
  transform: scale(0.93);
  cursor: pointer;
}
.medium {
  width: 19.6%;
  padding-bottom: 19.6%;
}
.wide {
  width: 39.6%;
  padding-bottom: 19.6%;
}
.large {
  width: 39.6%;
  padding-bottom: 39.55%;
}
.grid-item img {
  overflow: hidden;
  width: 105%;
}
.grid-item .info {
  overflow: hidden;
  position: absolute;
  background-color: rgba(15, 15, 15, 0.9);
  bottom: 0;
  height: auto;
  left: 0;
  width: 100%;
  font-size: 100%;
  transition: all 0.25s ease-in-out;
}
.grid-item .show-info {
  height: 100%;
}
.grid-item .hide-info {
  height: 30%;
  max-height: 60px;
}
.grid-item .title {
  margin-top: 5px;
  font-size: 15px;
  padding: 1%;
}
.grid-item .date {
  padding: 1%;
  padding-top: 5px;
  font-size: 13px;
}
.grid-item .description {
  margin-top: 15px;
  font-size: 13px;
  padding: 1%;
}
.grid-item button {
  visibility: collapse;
  text-align: center;
  background: #0096a0;
  color: white;
  position: absolute;
  text-decoration: none;
  border: none;
  left: 50%;
  right: 50%;
  bottom: 25px;
  margin: -20px -50px;
  width: 100px;
  height: 30px;
  transition: background-color 0.1s;
  transition: height 0.1s;
}
.grid-item button:hover {
  background-color: rgba(30, 30, 30, 100);
  cursor: pointer;
  transition: background-color 0.1s;
}
.grid-item button:active {
  background-color: rgba(20, 20, 20, 100);
  cursor: pointer;
  transition: background-color 0.1s;
}
@media all and (max-width:680px) {
  .medium {
    width: 99.3%;
    padding-bottom: 49.3%;
    margin-bottom: 1%;
  }
  .wide {
    width: 99.3%;
    padding-bottom: 49.3%;
    margin-bottom: 1%;
  }
  .large {
    width: 99.3%;
    padding-bottom: 49.3%;
    margin-bottom: 1%;
  }
}


 ضع فوق

  </body>

 الكود التالي 


 <script type='text/javascript'>
//<![CDATA[
'use strict';
$(document).ready(function () {
    var zindex = 10;
    $('.grid-item').click(function () {
        var clickedElment = $(this);
        $('.grid-item').find('> .info').removeClass('show-info');
        $('.grid-item').find('> .info').addClass('hide-info');
        $('.grid-item').find('> .info button').css('visibility', 'collapse');
        if (clickedElment.find('> .info').hasClass('hide-info')) {
            clickedElment.find('> .info').removeClass('hide-info');
            clickedElment.find('> .info').addClass('show-info');
            ;
            clickedElment.find('> .info button').css('visibility', 'visible');
        }
    });
});
//]]>
</script>

 قم بحفظ العمل

 توجه إلى التخطيط وأضف أداة Html/JavaScript ثم ضع بها الكود التالي

<div class="grid-item large floatRight">
    <img src="http://previewcf.turbosquid.com/Preview/2014/05/15__23_36_27/4.jpge6f857fa-d0a7-4085-abd5-63992f3de86dLarge.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"> <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item wide floatRight">
    <img src="http://tf3dm.com/imgd/l48919-spaceship-98075.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"> <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatRight">
    <img src="https://cdn.designmaz.net/wp-content/uploads/2014/01/Dark-UI-Kit.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"> <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatRight">
    <img src="http://core0.staticworld.net/images/article/2015/05/windows10musicapp-100587050-orig.png" />
    <div class="info hide-info">
     <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"> <button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatRight">
    <img src="http://www.wp7connect.com/wp-content/uploads/2013/01/conceptsurfacephone1.jpg" />
    <div class="info hide-info">
      <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"><button>اقرا المزيد</button>
    </div>
  </div>
  <div class="grid-item medium floatRight">
    <img src="https://img-new.cgtrader.com/items/117013/large_werewolf_3d_model_fbx_9a431241-46fa-4be8-a86f-3095f591306a.png" />
    <div class="info hide-info">
     <div class="title">نص تجريبي نص</div>
      <div class="date">May 5 2012</div>
      <div class="description">اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي ويب تيك درسنا اليوم وهو اضافة اداة مميزة وجميلة ويكنكم وضعها في الصفحة الرئيسية للمدونة تضهر للزائر مهاراتك.ولكي لااطيل عليكم نبدء في الشرح وللعلم فهي سهلة التركيب افتح قالب اضافة ايقونات المتحركة مع SVG و CSS للبلوجرمرحبا بكم متابعي...</div>
 <a href="#"> <button>اقرا المزيد</button>
    </div>
  </div>
ملاحظة : قم بتغير ما يلي
الصورة
العنوان
الوصف
رابط الموضوع

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

2‏/6‏/2016



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

اولا توجه الى قالب المدونة وابحث عن الكود التالي
]]></b:skin>
واضف فوقها الكود التالي
#oi-web-live {border: 5px solid #fff; padding: 10px 10px;background: #29567D url(http://3.bp.blogspot.com/-JTpuU7eTzso/VEiGa00vQ3I/AAAAAAAADTU/97Fv4hIrXgg/s1600/header-bg.png) no-repeat left bottom; color: #fff; position: relative; overflow: hidden; }.right-live {position: relative; float: right; }.right-live img { width: 118px;}.left-live { text-align: center; overflow: hidden; position: absolute; right: 0; font-size: 17px; left: 0; width: 550px; top: 40px; margin: 0 auto; display: block; font-weight: normal;font-size: 16px;}.time-live { float: left; margin-top: 10px;text-align: center; z-index: 99999999; font-size: 18px; position: relative; width: 129px; font-family: "Ta3alamFont"; }span#saaa { font-size: 37px; margin-right: 3px; margin-left: 21px; line-height: 46px; }.left-live a:hover { background: #F74047; }.left-live a { margin-right: 10px;margin-top: 6px; border-radius: 3px; transition: 0.2s; color: #fff; display: inline-block; padding: 8px; border: 2px solid #F74047; font-size: 16px; font-weight: normal;}
 وهذا هو كود html يمكنك اضافته في اي مكان مثلا في الهيدر فوق الفوتر في اداة داخل التخطيط ...
 <div id='oi-web-live'>
<div class='right-live wow bounceIn animated'>
<img src='https://lh3.googleusercontent.com/-EQrOkedTg4U/VyfYeI0G50I/AAAAAAAAGPI/OzfTkwLXLG48uV9UFqmz3qU05pwFJkmSACCo/s256/streaming.png'/></div>
<div class='left-live wow bounceInUp animated'>
<span id='ssgf1'><i class='fa fa-microphone'/>
البث المباشرة مع يونس ورضاوي للإجابة على تساؤلاتكم التقنية كل خميس فقط. على مدونة ويب تيك</span><a href='#'>قريبا.... <i class='fa fa-spinner fa-spin'/></a></div>
<div class='time-live wow bounceInLeft animated'><i class='fa fa-check-square-o'/>
<span id='saaa'>7</span>:<span id='d9i9a'>30</span>
<span id='ssss'>بتوقيت غرينيتش</span>
</div>
</div>
<div class='clear'/>
قم بتغيير ما يلي بما تريد
البث المباشرة مع يونس ورضاوي للإجابة على تساؤلاتكم التقنية كل خميس فقط. على مدونة ويب تيك
وقم ايضا بتغير # برابط صفحة البت الخاص بك 
ونتمنى من كل شخص استفاد يترك تعليق لتحفيزنا من اجل المزيد


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

1‏/6‏/2016



بسم الله السلام عليكم اعزائي تحياتي لك زائر اومتابع , موضوع اليوم عن ازرار المعاينة والتحميل لمدونات بلوجر, بالطبع تتواجد الكثير من الاشكال لازرار المعاينة والتحميل ولكن عندي لكم ازرار بشكل جداب وجميل جدا يمكنكم معاينته من هنا

نبدا في الشرح

نتوجه الى القالب ونبحث عن الكود التالي

 ]]></b:skin>
وبعدها اضف الكود التالي فوقه
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
.boxy {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 1.5em;
  color: rgba(255, 255, 255, 0);
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  padding: 0.6em 1.6em;
  margin: 0.6em;
  border-style: solid;
  border-width: 1px;
  transition: all 0.2s ease;
  border-image: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%) 1 round;
  background: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(49, 188, 184, 0.4), -2px -2px 6px rgba(251, 131, 250, 0.4);
}
.boxy:hover {
  color: rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.4);
}
.boxy.red {
  border-image: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%) 1 round;
  background: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.red:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(255, 182, 56, 0.4), -2px -2px 6px rgba(252, 92, 60, 0.4);
}
.boxy.green {
  border-image: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%) 1 round;
  background: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.green:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(170, 255, 169, 0.4), -2px -2px 6px rgba(6, 229, 222, 0.4);
}
.boxy.la {
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.05em;
  font-size: 3em;
  padding: 0.3em;
  border-width: 2px;
  display: block;
  width: 70%;
  margin: 0.6em auto;
  border-image: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%) 1 round;
  background: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.boxy.la:hover {
  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(173, 27, 163, 0.4), -2px -2px 6px rgba(240, 194, 123, 0.4);
}
p {
  color: rgba(255, 255, 255, 0.7);
  margin: 30px;
}
قم بحفظ القالب
وهذا هو كود html اضفه بداخل المشاركة في تبويب html

<a class="boxy" href="#">
  للتحميل
</a>
<a class="boxy red" href="#">
  للمعاينة
</a>
<a class="boxy green" href="#">
  للتحميل
</a>
الى هنا ينتهي الدرس بالتوفيق
.يسمح بالنسخ فقط عند ذكرك للمصدر مع رابطة وان لم تفعل تسمى سرقة وستتم متابعتك قانونيا بالتوفيقا.

31‏/5‏/2016



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

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

توجه الى القالب وابحث عن الكود التالي
]]></b:skin>
 واضف الكود التالي فوقه مباشرة
/* https://oi-web.blogspot.com
----------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
/* https://oi-web.blogspot.com
----------------------------------*/
header {
  padding: 2em 0;
  border-bottom: 10px solid #00796B;
  background: #009688;
  color: #FFFFFF;
  overflow: hidden;
}
header h1 {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 4em;
  font-weight: 300;
  letter-spacing: 5px;
  text-shadow: 1px  1px  #00796B, 2px  2px  #00796B, 3px  3px  #00796B, 4px  4px  #00796B, 5px  5px  #00796B, 6px  6px  #00796B, 7px  7px  #00796B, 8px  8px  #00796B, 9px  9px  #00796B, 10px  10px  #00796B, 11px  11px  #00796B, 12px  12px  #00796B, 13px  13px  #00796B, 14px  14px  #00796B, 15px  15px  #00796B, 16px  16px  #00796B, 17px  17px  #00796B, 18px  18px  #00796B, 19px  19px  #00796B, 20px  20px  #00796B, 21px  21px  #00796B, 22px  22px  #00796B, 23px  23px  #00796B, 24px  24px  #00796B, 25px  25px  #00796B, 26px  26px  #00796B, 27px  27px  #00796B, 28px  28px  #00796B, 29px  29px  #00796B, 30px  30px  #00796B, 31px  31px  #00796B, 32px  32px  #00796B, 33px  33px  #00796B, 34px  34px  #00796B, 35px  35px  #00796B, 36px  36px  #00796B, 37px  37px  #00796B, 38px  38px  #00796B, 39px  39px  #00796B, 40px  40px  #00796B, 41px  41px  #00796B, 42px  42px  #00796B, 43px  43px  #00796B, 44px  44px  #00796B, 45px  45px  #00796B, 46px  46px  #00796B, 47px  47px  #00796B, 48px  48px  #00796B, 49px  49px  #00796B, 50px  50px  #00796B, 51px  51px  #00796B, 52px  52px  #00796B, 53px  53px  #00796B, 54px  54px  #00796B, 55px  55px  #00796B, 56px  56px  #00796B, 57px  57px  #00796B, 58px  58px  #00796B, 59px  59px  #00796B, 60px  60px  #00796B, 61px  61px  #00796B, 62px  62px  #00796B, 63px  63px  #00796B, 64px  64px  #00796B, 65px  65px  #00796B, 66px  66px  #00796B, 67px  67px  #00796B, 68px  68px  #00796B, 69px  69px  #00796B, 70px  70px  #00796B, 71px  71px  #00796B, 72px  72px  #00796B, 73px  73px  #00796B, 74px  74px  #00796B, 75px  75px  #00796B, 76px  76px  #00796B, 77px  77px  #00796B, 78px  78px  #00796B, 79px  79px  #00796B, 80px  80px  #00796B, 81px  81px  #00796B, 82px  82px  #00796B, 83px  83px  #00796B, 84px  84px  #00796B, 85px  85px  #00796B, 86px  86px  #00796B, 87px  87px  #00796B, 88px  88px  #00796B, 89px  89px  #00796B, 90px  90px  #00796B, 91px  91px  #00796B, 92px  92px  #00796B, 93px  93px  #00796B, 94px  94px  #00796B, 95px  95px  #00796B, 96px  96px  #00796B, 97px  97px  #00796B, 98px  98px  #00796B, 99px  99px  #00796B, 100px  100px  #00796B, 101px  101px  #00796B, 102px  102px  #00796B, 103px  103px  #00796B, 104px  104px  #00796B, 105px  105px  #00796B, 106px  106px  #00796B, 107px  107px  #00796B, 108px  108px  #00796B, 109px  109px  #00796B, 110px  110px  #00796B, 111px  111px  #00796B, 112px  112px  #00796B, 113px  113px  #00796B, 114px  114px  #00796B, 115px  115px  #00796B, 116px  116px  #00796B, 117px  117px  #00796B, 118px  118px  #00796B, 119px  119px  #00796B, 120px  120px  #00796B;
}
main {
/*padding: 1em;*/
}
footer {
/* padding: 1em;*/
}
footer .copy {
  float: left;
}
footer .thanks {
  float: right;
}
الان قم بحفظ القالب او قم باضافة الكود التالي في المكان الذي تريده داخل القالب او في التخطيط 
<header>
  <h1> قم بكتابة ما تريد هنا </h1>
</header>

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

30‏/5‏/2016



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

وصف المنتج

قالب مرن و تجاوبي (بوتستراب)
يستخدم أحدث تقنيات الويب في تصميم المواقع مع سرعة تصفُح
إمكانيّة تغيير الشعار و الروابط الإجتماعيّة بسهولة
قالب داعم لإعلانات أدسنس و سهولة تعديلها من لوحة التحكُم
دعم لكُل إصدارات الووردبرس
قالب عربي 100%

لتحميل القالب من هنا

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


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

1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن  ]]></b:skin>  أو ضعه بين <style>  </style>
3. ضع الكود التالي قبله [ فوقه ]
.buttonz{display:inline-flex;border-radius:4px;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;color:#FFF!important;
background:url(//ar1web-com.googlecode.com/svn/trunk/rainbow.png);background-size:cover;padding:8px 25px;text-shadow:none;transition:all 1s;}
.buttonz:hover, .buttonz:hover, .buttonz.link:hover {box-shadow: 0px 0px 18px 18px rgba(80, 80, 80, 0);} 

4. ضع الكود التالي إما فوق </head> أو فوق </body>
 <script type='text/javascript'>
var intval = null;
var pos = 0;
$(document).ready(function() {
intval = window.setInterval(moveBg, 70);
});
function moveBg() {
pos++;
$('.buttonz').css({backgroundPosition: (pos * 1) + '% 1px'});
}
  </script> 

5. لتفعيل الزر ضع الكود التالي بداخل الموضوع بتبويب HTML
 <a class='buttonz' href='هنا الرابط' target='_blank'>إسم الزر</a> 


منقول من : عرب ويب
.اتمنى ان يعجبكم الدرس.
جميع الحقوق محفوظة ل ويب تيك
صمم وكود بكل من طرف