أداة جديدة من أدسنس Adsense Direct

كشفت جوجل بالأمس عن أداة جديدة لناشري إعلانات أدسنس تمكّنهم من بيع وحداتهم الإعلانية بطريقة مباشرة للمعلنين الراغبين في ذلك ! نعم .. فأداة Adsense Direct الجديدة تتيح لك كناشر القيام بذلك. بل ومن داخل لوحة تحكم أدسنس ذاتها.

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

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

تتشابه الأداة الجديدة مع ما تقدمه خدمات أخرى كـ BuySellAds أو متجر إعلانات حسوب. ورغم أنها ما تزال متاحة لمعلني وناشري من الولايات المتحدة الأمريكية فقط حتى الآن، إلا أن جوجل ذكرت بأنها "تأمل فى التوسّع أكثر فى الأشهر القادمة".

      

   -   ميزات الأداة الجديدة

لاشك أن Adsense Direct ستشكل إضافة هامة للمهتمين بالربح من الإنترنت، وبتنويع مصادر دخلهم. دعنا نستعرض لأهم الميزات التي تأتي بها الأداة الجديدة:

1 - التعامل معها سيتم من داخل لوحة تحكم أدسنس، وتحديداً من التبويب My Ads. لذا، لامجال للتعقيدات.

2 - أرباحك المُحقّقه من بيع الإعلانات بطريقة مباشرة ستُضاف لأرباحك الإجمالية بأدسنس.

3 - لاحاجة لإجراء أي تعديلات على أكواد وحدات أدسنس المُدرجة بالفعل على موقعك.

4 - لاوجود لحد أدنى لعدد مرات ظهور لتتمكن من بيع الإعلانات بطريقة مباشرة.

5 - يمكنك منح المعلن حملة إعلانية بدءاً من يوم واحد، وحتى 90 يوماً.

6 - إمكانية مراجعة الإعلان قبل أن نشره.

   -   أسئلة شائعة بخصوص Adsense Direct

س1 - كيف سيقوم المعلن بالدفع ؟

ج1 - عن طريق Google Wallet

س2 - هل إذا قُمت ببيع وحدة بطريقة مباشرة، فهل بإمكانى وضع 3 وحدات أدسنس أخرى؟

ج2 - إجمالي الوحدات سواء كان بعض منها مباع بطريقة مباشرة أم لا يجب ألّا يتجاوز 3 وحدات.

س3 - هل كامل سعر الوحدة يذهب لأرباحى الإجمالية ؟

ج3 - لا، جوجل تستقطع 15% كعمولة وتتحصّل أنت على 85% من الثمن الذي يدفعه المعلن.

س4 - هل جميع أنواع وحدات أدسنس يمكن استخدام Adsense Direct معها؟

ج4 - لا، هناك وحدات مُستثناة من ذلك وهى:

           - الوحدات الإعلانية المتجاوبة Responsive Ad Units.

           - الوحدات المخفية Hidden Ad Units.

           - الوحدات الخاملة Idle Ad Units.

          - الوحدات المُستخدمة فى تجارب.

          - الوحدات المُباعة بالفعل.

   -   مستقبل Adsense Direct

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

قائمة جانبية مميزة بتصميم Css

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

معاينة القائمة

أكواد Css

* تضع فوق ]]></b:skin> أو فوق <head/> بإضافة الوسم <style> <style/>

/* Slide Menu Hm*/
.menu-outer:hover ~ .menu-close {
  margin-right:-100px;
}
.menu-outer:hover .bar { background:rgba(100,200,240,.9); }
.menu-outer > nav ul { top:15%; }
.menu-outer {
  overflow: hidden;
  position: fixed;
  top: 0;
  font-family: 'Montserrat', serif;
  z-index: 998;  
  width: 100%;
  left: 100%;
  margin-left: -100px;
  height: 200%;
  background: rgba(100,200,240,.9);  
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s; 
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-outer:hover {
  background: rgba(100,200,240,.98);
  left: 0;
  margin-left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.menu-icon {
  z-index: 999;
  position: absolute;
  top: 58px;
  left: 15px;
  width: 30px;
  pointer-events: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-icon .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  margin: 0 0 5px;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
  opacity: 0;
}
nav ul {
  position:absolute;
  width:100%;
  padding: 0;
  left: 10%;; /*prevents possible click when not oppened*/
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > nav ul {
  left: 0;
}
nav li {
  list-style:none;
  text-align: center;
  text-transform: uppercase;
}
nav li a {
  font-size: 2em;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  margin: 0 auto;
  padding: 20px;
  display:block;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
nav li a:hover {
  color: rgba(255,255,255,1);
}
@media screen and (max-width: 600px), screen and (max-height: 600px) {
  nav ul {font-size:.75em;}
  nav ul a {padding: 10px;}
}
.menu-close {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 100%;
  width: 200px;
  height: 200px;
  background: rgba(250,130,70,1);
  cursor: pointer;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .menu-icon {
  right: 15px; left: auto;top: 68px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-close .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  position:absolute;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
.menu-close .bar:first-child {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .bar:last-child {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

أكواد HTML

* توضع بمكان الذي تراه مناسب داخل القالب ما بين <body>

<div class="menu-outer">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <nav>
        <ul>
           <li><a href="#">الرئيسية</a></li>
           <li><a href="#">المدونة</a></li>
           <li><a href="#">من نحن</a></li> 
           <li><a href="#">إتصل بنا</a></li>
       </ul>
   </nav>
</div>
<a class="menu-close" onClick="return true">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</a>

أزرار بسيطة V1 | معاينة تحميل

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

• معاينة من JS
 
• معاينة من مدونة

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

1. توجه لقالب >> تحرير 

2. ابحث بإستعمال Ctrl+F عن <head/>

3. ضع الكود التالي فوقه

* الكود هو فقط لإظهار الأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

4. ابحث عن ]]></b:skin أو تضعه فوق </head> بإضافة هذيين الوسميين <style> هنا الكود  </style>

5.  ضع الكود التالي فوقه 

/* CSS Simple Butn Ar1web */
.whitebutton {margin: 20px auto;padding: 20px 0;width: 200px;}
.whitebutton a {background: #fff;color: #666;display: block;font-size: 17px;font-weight: 700;font-family: Electrolize,ge_ss_tvbold;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;}
.whitebutton a:before {content: '\f019';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-right: 6px;}
.whitebutton span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebutton .up {background: #34B4E2;margin: -25px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down {margin: -30px auto;opacity: 0;border-radius: 5px 5px 0 0;transform: translate(0,-50px);transition: 350ms;}
.whitebutton .down:before {content:'\f14a';font-family: FontAwesome;font-weight: normal;margin-right: 6px;color: #aaa;}
.whitebutton:hover .up {opacity: 1;transform: translate(0,0);}
.whitebutton:hover .down {opacity: 1;transform: translate(0,-90px);}
.whitebuttondemo {margin: 20px auto;padding: 20px 0;width: 200px;}
.whitebuttondemo a {background: #34B4E2;color: #fff;display: block;font-size: 17px;font-weight: 700;font-family:Electrolize,ge_ss_tvbold;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;transition: 350ms;}
.whitebuttondemo a:before {content:'\f002';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-right: 6px;}
.whitebuttondemo a:hover {color:#fff;}
.whitebuttondemo span {background: #444;color: #fff;display: block;font-size: 12px;font-family: Electrolize,ge_ss_threeregular;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold;}
.whitebuttondemo .up {background: #444;margin: -25px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms;}
.whitebuttondemo:hover .up {opacity: 1;transform: translate(0,0);}

6. أضف الكود الأتي بداخل الموضوع في تبويب HTML

<div class="whitebuttondemo">
<a href="#" target="_blank">معاينة</a><br>
<span class="up">إضغط للمشاهدة</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">تحميل مباشر</a><br>
<span class="up">إضغط للبدء</span><br>
<span class="down">2.3MB .rar</span></div>

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

* ضع الرابط بدل # 

* المحدد باللون الأصفر للكلمات لك حرية التغيير