مدونة محمود علام

إضافة كود إعلانات بطريقة مميزة ( CSS و HTML ) للتبادل الاعلاني

مرسلة بواسطة ma7moud 3lam يوم الأحد، 9 يونيو 2013 0 التعليقات

بسم الله الرحمن الرحيم

والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله وصحبة افضل الصلآة واتم التسليم

السلآم عليكم ورحمة الله وبركاته

إضافة كود إعلانات بطريقة مميزة ( CSS و HTML ) للتبادل الاعلاني

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

في هده الإضافة تظهر بنرات الإعلانات بألوان باهته, و عند المرور فوقها بالماوس تأخد ألوانها الطبيعية مع ظهور تسمية البنر بطريقة مميزة .

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnHI9Ql0TS9iR2H6kQWxlcEZiAnE6zu0358d5HobtT0t7jLrQ3lHruKYC3hU9H4YjmxmvYyspe3YM2JfwaZ7kKRqflshVM4JXFUXgf-MhwwnLhrbpu52-UzUOjiwVbiURCmvXgUpCK_ek/s1600/4-slide.png

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

ادخل مدونتك .
ثم التخطيط .
ثم اختر اداة جديده HTML/JavaScript .
اخيرا انسخ الكود مع استبدال الروابط والصور بما يلزم .

تابع القراءة ..

اضافة الاشتراك بالقائمة البريدية بشكل احترافى وانيق مدعم بتقنية css

مرسلة بواسطة ma7moud 3lam يوم 0 التعليقات

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiASvc2c4fxJksJFMmiL-AjF6QeBshWz8Mmx_DNjb5ib0NKLkuUNfJaucRxE6QBOToB2H3vSHJORlSLaMIDmvqgCvZKGaZ50FUuW8fyOD4ByS46WCjFf1Y9pUcfi4qPuXAW0raUDG67gKo/s1600/%D8%A8%D8%AF%D9%88%D9%86+%D8%B9%D9%86%D9%88%D8%A7%D9%86-3.gif

بسم الله الرحمن الرحيم

والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم

السلآم عليكم ورحمة الله وبركاته

اضافة الاشتراك بالقائمة البريدية بشكل جميل واحترافي مدعم بتقنية css

اضافه بلغة CSS3 و شكل جديد من اشكال الاشتراك عبر القوائم البريدية بالاضافة الى المتابعة في مواقع التواصل الاجتماعي

يوتيوب .
فيدبرنر .
جوجل بلس .
تويتر .
فيس بوك

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

انتقل إلى لوح تحكم مدونتك:
إختر "تخطيط"
ثم إضافة أداة .
ثم اختر HTML/Javascript
الآن الصق الكود التالي مع استبدال # بروابط حسابك

<div id="sidebars" style="text-align: center;">
<ul class="sidebar_list">
<li id="social-profiles">
<ul>
<li>
<a class="social facebook" href="#" rel="nofollow" target="_blank" title="Facebook Fan Page">Facebook</a></li>
<li>
<a class="social twitter" href="#" rel="nofollow" target="_blank" title="Twitter Profile">Twitter</a>
</li>
<li>
<a class="social googleplus" href="#" rel="nofollow" target="_blank" title="GooglePlus">GooglePlus</a>
</li>
<li>
<a class="social rss" href="#" rel="nofollow" target="_blank" title="RSS">Rss</a>
</li>
<li>
<a class="social youtube" href="#" rel="nofollow" target="_blank" title="Youtube Channel">Youtube</a>
</li>
</ul>
</li>
<li id="sidebar-social">
<div id="email-notice">
<span style="font-family: tahoma; font-weight: bold;"></span>انضم الى القائمة البريدية واحصل على الجديد لحظة بلحظة
</div>
<div id="email-form">
<h6>
اشترك في القائمة البريدية</h6>
<form action="http://feedburner.google.com/fb/a/mailverify" class="nice custom" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=jetara', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="input-text" name="email" onblur="if (this.value == '') {this.value = 'ادخل ايميلك هنا ...';}" onfocus="if (this.value == 'ادخل ايميلك هنا ...') {this.value = '';}" type="text" value="ادخل ايميلك هنا ..." />
<input name="uri" type="hidden" value="jetara00" />
<input name="loc" type="hidden" value="en_US" />
<input class="button" type="submit" value="اشترك" />
<br />
<span style="font-family: tahoma; font-weight: bold;">تابع جديد المدونه عبر الاشتراك في خدمة البريد الالكتروني
</span>
<span style="float: right; font-size: 10px; font-weight: normal; line-height: 0px; margin-top: 15px;">
 <a href="http://7loll.blogspot.com/2013/05/css.html" style="color: black;">احصل على الاضافه</a></span>
</form>
</div>
</li>
</ul>
</div>
<div style="text-align: center;">
</div>
<div style="text-align: center;">
<style>
 #sidebars {
    border: 0 none;
    float: right;
    padding: 0 15px;
    width: 310px;}
#email-notice {
    background: none repeat scroll 0 0 #66CCFF;
    color: #000000;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
    padding: 15px 20px;
    position: relative;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);}
#email-notice span {
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 10px solid #66CCFF;
    bottom: -10px;
    height: 0;
    position: absolute;
    right: 40px;
    width: 0;}
#email-form {
    background: none repeat scroll 0 0 padding-box #313131;
    border-bottom: 5px solid #202020;
    border-radius: 2px 2px 2px 2px;
    text-shadow: 0 -1px 0 #000000;}
#email-form h6 {
    color: #FFFFFF;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    padding: 15px 20px 0;
    text-transform: none;}
#email-form form {
    color: #FFFFFF;
    margin: 0;
    padding: 20px 18px;}
#email-form input.input-text {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #222222;
    margin: 0 0 10px;
    padding: 8px;
    width: 94%;font-family: tahoma;}
#email-form .button {
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
    font-family: "tahoma","Helvetica",sans-serif;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: white;
    text-shadow: #d08d00 1px 1px 0;
    font-weight: bold;
    font-size: 12px; width: 100px; height: 30px;
    cursor: pointer; float: right;
    border-image: initial;}
#email-form p {
    color: #CCCCCC;
    font-size: 12px; font-family: tahoma;
    line-height: 18px;
    margin: 0;}
#sidebar-social {
    float: left;
    font-size: 12px;
    margin: 0 0 15px;font-family: tahoma;
    width: 100%;}
ul.sidebar_list {
    list-style: none outside none;}
li.widget ul {
    list-style: none outside none;}
#social-profiles {
    float: left;}
#social-profiles ul {
    float: left;
    list-style: none outside none;
    margin: 0 5px 20px;}
#social-profiles ul li {
    float: left;}
#social-profiles ul li a {
    display: block;
    float: left;
    height: 32px;
    margin: 0 15px;
    text-indent: -999em;
    width: 32px;}
#social-profiles a.social {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7IfUkH2XGix7s5cShLr-TYNT7heE8Bze2yaJRoKgHqKqbFqB1fu92y9wKk0ECiHtAlqsxvQzpWzFt776YziyImMNS7D_r9Yn1sl5lxVcp3LHSLcgitmF7jKs088k3mUIQRg7GDmf-P9s/s1600/social.png") no-repeat scroll 0 0 transparent;}
#social-profiles a.facebook {
    background-position: -79px 0;
    height: 32px;
    margin: 0 15px 0 5px;
    width: 32px;
}
#social-profiles a.facebook:hover {
    background-position: -79px -74px;
    height: 32px;
    width: 32px;}
#social-profiles a.twitter {
    background-position: -5px -111px;
    height: 32px;
    width: 32px;}
#social-profiles a.twitter:hover {
    background-position: -42px 0;
    height: 32px;
    width: 32px;}
#social-profiles a.youtube {
    background-position: -42px -37px;
    height: 32px;
    width: 32px;}
#social-profiles a.youtube:hover {
    background-position: -5px -37px;
    height: 32px;
    width: 32px;}
#social-profiles a.rss {
    background-position: -42px -74px;
    height: 32px;
    width: 32px;}
#social-profiles a.rss:hover {
    background-position: -79px -37px;
    height: 32px;
    width: 32px;}
#social-profiles a.googleplus {
    background-position: -5px 0;
    height: 32px;
    width: 32px;}
#social-profiles a.googleplus:hover {
    background-position: -5px -74px;
    height: 32px;
    width: 32px;}
* {
    margin: 0;
    padding: 0;
}.custom .sidebar ul.sidebar_list {
    padding: 15px 0;
}
</style></div>

وفى النهاية قم بحفظ الاداه ومبروك عليك الاضافه

تابع القراءة ..

كيفية استبدال روابط ( الاقدم , الاحدث , الرئيسيه ) باشكال جديده - لمدونات بلوجر

مرسلة بواسطة ma7moud 3lam يوم 1 التعليقات

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWh-Uk43FHqGtfmOejDHriWnEex_ZC1bCOPVwIUPV9KgPMxsBlEG3yMdNG7atRm-ZSmk-_KTXKsGXJ5W0ozTb3l-YXvRnfB3U52ma14gjw5Z7HdnPP8ho5h-axvV28ulFLxD2pms6T_Sg/s1600/Newer-Older-and-Home-Links.png

بسم الله الرحمن الرحيم

والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم

السلآم عليكم ورحمة الله وبركاته

كيفية استبدال روابط ( الاقدم , الاحدث , الرئيسيه ) بصور - لمدونات بلوجر

استبدال الاقدم , الاحدث , الرئيسيه , هي اضافة تجميليه لمدونتك وطريقة تركبيها سهله للغايه

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

اما اذا كنت لآ تستخدم ترقيم الصفحات فستجدها في اسفل الصفحة الرئيسيه وفي اسفل صفحة المشاركه

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

ادخل على لوحة تحكم مدونتك
ثم اذهب الى القالب

اولآ : استبدال رابط الاقدم : !

ابحث عن <data:olderPageTitle/> واستبدلها بهذا الكود

الان احفظ قالبك

تابع القراءة ..

صناديق الاشتراك في البريد الالكتروني لمدونات بلوجر بشكل جديد ومميز

مرسلة بواسطة ma7moud 3lam يوم 0 التعليقات

بسم الله الرحمن الرحيم

والصلآة والسلآم على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله وصحبه

السلآم عليكم ورحمة الله وبركاته .

صناديق الاشتراك في البريد الالكتروني لمدونات بلوجر جميله جدا - Beautiful Email Subscription Forms For Blogger

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

اضافه جميله فعلآ : فبمجرد ان يشترك الزائر او العضو ستصله مواضيعك فوراَ على البريد .

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

وكالعاده تصاميم ابداعيه في الاضافه .

كيف يمكنني اضافة صناديق الاشتراك في البريد الالكتروني في بلوجر ؟

ادخل الى لوحة تحكم مدومنتك
ثم التخطيط
ثم اضافة اداة جديده
ثم اداة HTML/JavaScript
انسخ الكود والصقه .

الشكل الاول للصندوق 1

صناديق الاشتراك في البريد الالكتروني لمدونات بلوجر جميله جدا - Beautiful Email Subscription Forms For Blogger

الشكل الثاني للصندوق 2

الشكل الثالث للصندوق 3

form#helperblogger-emailform {
        display: block;
        margin: 0;
        padding-left: 42px;
        padding-top: 67px;
    }

form#helperblogger-emailform #s {
        background: transparent;
        border: none;
        color: #444242;
        font-family: georgia;
        font-size: 15px;
        font-style: italic;
        height: 30px;
        margin-top: -2px;
        padding-left: 2px;
        vertical-align: top;
        width: 227px;
    }

form#helperblogger-emailform #sbutton {
        background: transparent;
        border: none;
        cursor: pointer;
        height: 30px;
        padding-right: 45px;
    }</style>

هذا كل شيء :)

تابع القراءة ..

إضافة كود إعلانات بطريقة مميزة ( CSS و HTML ) للتبادل الاعلاني

اضافة الاشتراك بالقائمة البريدية بشكل احترافى وانيق مدعم بتقنية css

كيفية استبدال روابط ( الاقدم , الاحدث , الرئيسيه ) باشكال جديده - لمدونات بلوجر

اولآ : استبدال رابط الاقدم : !

ثانياَ : استبدال رابط الاحداث : !

ثالثاَ : استبدال رابط الرئيسيه : !

صناديق الاشتراك في البريد الالكتروني لمدونات بلوجر بشكل جديد ومميز

كيف يمكنني اضافة صناديق الاشتراك في البريد الالكتروني في بلوجر ؟

الشكل الاول للصندوق 1

الشكل الثاني للصندوق 2

الشكل الثالث للصندوق 3

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

إجمالي مرات مشاهدة الصفحة

نبذة عني

المتواجدون الان