‏إظهار الرسائل ذات التسميات أساسيات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات أساسيات بلوجر. إظهار كافة الرسائل

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

بواسطة نبيل يوم السبت، 11 فبراير 2012 القسم : | 3 التعليقات
السلام عليكم و رحمة أعزاء الزوار 


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

يمكنكم تجربته من هنا

لاضافة هده الاداة في بلوجر 
ندهب للوحة التحكم / تم / تصميم / تم / اضافة أداة جديدة / تم
HTML/javascript widget 

ونضع الكود الأتي

    <style>
    /*
       ColorBox Core Style:
       The following CSS is consistent between example themes and should not be altered.
    */
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    /*

       User Style:
       Change the following styles to modify the appearance of ColorBox.  They are
       ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{
            box-shadow:0 0 15px rgba(0,0,0,0.4);
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
           }

    #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrmUbN67_XgTIpThmSq6XgbI7jjwjtr3JbsJHOKc2CCDIiTntXdjMxrRp6V23Xk8yyw-nJktMKwzh9aVCgQHqCrEIDHISg90O0zmU-TTdZ4nDkY29RjKHRBEI-AjIWpNrYGYmVfseQyb0/s400/border.png) repeat-x top left;}
         #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) no-repeat -36px 0;}
         #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) no-repeat 0 -32px;}
         #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrmUbN67_XgTIpThmSq6XgbI7jjwjtr3JbsJHOKc2CCDIiTntXdjMxrRp6V23Xk8yyw-nJktMKwzh9aVCgQHqCrEIDHISg90O0zmU-TTdZ4nDkY29RjKHRBEI-AjIWpNrYGYmVfseQyb0/s400/border.png) repeat-x bottom left;}
         #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) no-repeat -36px -32px;}
         #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) repeat-y -175px 0;}
         #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) repeat-y -211px 0;}
         #cboxContent{background:#fff; overflow:visible;}
             #cboxLoadedContent{margin-bottom:5px;}
             #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib8CLGLF4LsqrnZhjI53SRHJTxxU6kkouDz6iwgm7Nh-AteTHYHOyEcgRL4OP-FFFLEaYzCH63KQrlaHAtOXQlzR9Fz2xJ1jAYTrs6ljftfGW9SxUh6Ln04YmF7tTVygKfgzco-d1Hq2E/s400/loadingbackground.png) no-repeat center center;}
             #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTiydtfH9TQUBgMzok1f2Ljdt3t-Y-1T7gppoXk0UkA5hNoBbrTR0mXaq1i4u7WhjhAsG9yz7P8nNHliUm46G-aQpjcx-QhRyWOMwOYaWtlLPA6VkYHSbldgWUj4NQ3vT-sHOEF8SsDfs/s400/loading.gif) no-repeat center center;}
             #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
             #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
             #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
             #cboxPrevious{left:0px; background-position: -51px -25px;}
             #cboxPrevious.hover{background-position:-51px 0px;}
             #cboxNext{left:27px; background-position:-75px -25px;}
             #cboxNext.hover{background-position:-75px 0px;}
             #cboxClose{right:0; background-position:-100px -25px;}
             #cboxClose.hover{background-position:-100px 0px;}
             .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
             .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
             .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
             .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

    /*-----------------------------------------------------------------------------------*/
    /*   Facebook Likebox popup For Blogger
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
        text-decoration:none;
    }
    .box-title {
       color: #F66303;
       font-size: 20px !important;
       font-weight: bold;
       margin: 10px 0;
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }
    .box-tagline {
       color: #999;
       margin: 0;
       text-align: center;
    }
    #subs-container {
        padding: 35px 0 30px 0;
        position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }
    </style>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

    <script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
       if (document.cookie.indexOf('visited=true') == -1) {
           var fifteenDays = 1000*60*60*24*30;
           var expires = new Date((new Date()).valueOf() + fifteenDays);
           document.cookie = "visited=true;expires=" + expires.toUTCString();
       $.colorbox({width:"400px", inline:true, href:"#subscribe"});
           }
    });
    </script>
        <!-- This contains the hidden content for inline calls -->
            <div style='display:none'>
       <div id='subscribe' style='padding:10px; background:#fff;'>
            <h3 class="box-title">توصل بكل جديدنا على فيس بوك . فقط اضغك على زر الاعجاب أسفله<center><p style="line-height:3px;" >▼</p></center></h3>
          <center>
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages/Phone4Ar/266669786737996&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
    </center>
    <p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.9odwa.blogspot.com">9odwa</a></p>
    </div>
    </div>

* لوضع صفحة الفيس بوك الخاصة بك 
عدل الكلمة المكتوبة بالاحمر في الكود.

* لجعل الصندوق يضهر عند كل دخول احدف *30
أو عدلها بما تراه مناسب من الايام


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

إقرأ البقية

صناديق CSS للمدونات و المواقع

بواسطة نبيل يوم الخميس، 9 فبراير 2012 القسم : 0 التعليقات
بسم الله الرحمان الرحيم و السلام عليكم و رحمة الله.
إخواني الكرام أقدم لكم فكرة اليوم : صناديق CSS - للاستفادة منها في عرض النصوص و الرسائل و التنبيهات بشكل جميل قصد شد الانتباه إليها و تمييزها عن باقي المحتوى لأنها دائما تكون ذات أهمية قصوى، فمثلا في مدونات بلوجر عادة ما ننبه إلى ضرورة حفظ نسخة من القالب لكن البعض يتجاهلها أو لا يراها و لكن بعد وضع التحذير في صندوق أو إطار أحمر سيكون أول ما يلمح و سيشتشعر الزائر أهمية ما كتب فيه، هذه فائدة أولى و يمكنك ابتكار الباقي :) .  طريقة التركيب واحدة في بلوجر ، ووردبريس، أو أي موقع آخر ...



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

أما الكود فهو كالتالي :

#yellow-box,
    #blue-box, 
    #green-box,
    #red-box, 
    #orange-box,
    #down-box,
    #show-box {
            border-radius:5px;
            -webkit-border-radius:5px;
           -moz-border-radius:5px; 
           -o-border-radius:5px;
            text-align:center;
            padding:6px 20px 6px 20px;
            color:#222222;
            margin:10px 0 5px 0;
    }
    #yellow-box {
            border:solid 1px #8e8e04;
            background:#FFFFCC url(http://img102.herosh.com/2011/06/26/426945931.png) 97% 6px no-repeat;
    }
    #blue-box {
            border:solid 1px #27739d;
            background:#94d5fb url(http://img102.herosh.com/2011/06/26/688326384.png) 97% 6px no-repeat;
    }
    #green-box {
            border:solid 1px #90ac13;
            background:#eef4d3 url(http://img105.herosh.com/2011/06/26/681386449.png) 97% 6px no-repeat;
    }
    #orange-box {
            border:solid 1px #ba4c0e;
            background:#ffcaa4 url(http://img102.herosh.com/2011/06/26/398818527.png) 97% 6px no-repeat;
    }
    #red-box {
            border:solid 1px #dc2727;
            background:#f2abab url(http://img105.herosh.com/2011/06/26/964674528.png) 97% 6px no-repeat;
            color:#222222;
            padding:6px;
            text-align:center;
    }
    #down-box {
            border:solid 1px #90ac13;
            background:#eef4d3 url(http://img105.herosh.com/2011/06/26/417615435.png) 97% 6px no-repeat;
            color:#222222;
            padding:6px;
            text-align:center;
    }
    #show-box {
            border:solid 1px #27739d;
            background:#94d5fb url(http://img102.herosh.com/2011/06/26/278846576.png) 97% 6px no-repeat;
            color:#222222;
            padding:6px;
            text-align:center;
    }
    #code-box {
            background:url(http://img105.herosh.com/2011/06/28/391147010.gif) repeat-x;
            border:1px solid #CFCFCF;
            padding:5px;
            overflow-x:scroll;
            margin:10px 0 5px 0;
    }


طبعا يجب استبدال روابط الصور في الكود لأنها مرفوعة على سيرفر Herosh فقط ، و سيحذفها بعد مدة .
و إليك الصور

الآن و قد زرعنا كود css في القالب سنرى كيف سندرج الصناديق الملونة في مواضيعنا أو على صفحات موقعنا. الأمر بسيط جدا سنستعمل كود HTML الآتي :

<div id="blue-box">أنا رسالة داخل صندوق أزرق</div> 

إقرأ البقية

طائر تويتر يحلق بمدونتك!!؟

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


اذن كيف نضيف طائر تويتر الجميل للمدونة؟؟ سهلة الطريقة في خطوة واحدة فقط هيا تابع معي ادخل الى تصميم/ عناصر الصفحة/ أداة جديدة/ html/JavaScript لاتدخل العنوان فقط نريد المضمون تابع معي قم باضافة الكود التالي


حمل الكود من هنا لم لانه عندي يضهر الطائر بدون الكود :

http://www.mediafire.com/?usc674ci5jgp8kb
إقرأ البقية

كيفية إضافة نمودج إتصال بتقنية PHP

بواسطة نبيل يوم الاثنين، 4 أبريل 2011 القسم : 0 التعليقات
* السلام عليكم

كل مدون منا يعرف اهمية التواصل مع قراء موقعه

خاصة عندما لا تريد أن تكشف عن البريد الإلكتروني للأشخاص للاتصال بك. 

لدينا اليوم موقعين يوفران لك هذا النمودج و بكل سهولة.

*اولا وقبل كل شيئ لمادا تقنية ال PHP ؟

-هذه التقنية تحول المدونة او الموقع الى موقع تفاعي و ليس ساكن

فالمواقع الساكنة لا تتفاعل مع الزوار و قد تفقدهم احيانا..

نعلم العديد من المواقع لتقديم خدمة الاتصال لكن لها سلبيات

كتحويل الزائر الى موقعها او وضع اعلانات خارجية و غيرها..

المهم موقعين مخاترين و مميزان لاضافة نمودج الاتصال الى BLOGGER
الموقع الاول


زيارة الموقع foxyform 


foxyform

هو موقع جد مميز لانشاء form خاص بك

من مميزاته :

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

يمكنك التحكم في ستايل ال form ليناسب موقعك أو مدونتك

لن تخسر زائرك..لان ارسال الرسالة يتم في نفس الصفحة و بدون تحديثها

سيتم ارسال لك رسالة المرسل مع كل بياناته

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




الموقع الثاني





زيارة الموقع jotform 


jotform

*مزايا استخدام JotForm!

-مجاني تماما ؛

-و المعلومة الموثوقة بها ، مع ما يزيد على 350،000 من المستخدمين ؛

-خيارات عديدة للتخصيص ، بما في ذلك الخلفية ؛

-إمكانية تعديل نموذج تم إنشاؤه في وقت لاحق ؛

-القدرة على تحميل الملفات مثل الصور والنصوص وعروض الشرائح 

-سريع وبسيط ؛

-لا توجد إعلانات أو الشعارات ؛

-الحفظ التلقائي ؛


وJotForm هو شكل من أشكال الاتصال المميزة ،

*من بين خيارات :

-الخلفية ؛

-إمكانية ارفاق الملفات بالبريد ؛

-التقييم مع نجوم ؛

-امكانية اضافة مواقع لطرق الدفع 

-شكر وتقدير ، وتستخدم لمنع البريد المزعج. 


لإنشاء نموذج الاتصال في الموقع ، لا حاجة لإنشاء حساب ، 

لكنني أوصي بإنشاء حساب ، كي يكون لك إمكانية 

إجراء تغييرات على النموذج الخاص بك من خلال لوحة التحكم 

* إنشاء حساب

إذا كنت لا ترغب في إنشاء حساب تخطي خطوة التسجيل في الموقع ، 

ولكن تذكر به أنه لا يمكنك تغيير شكل في وقت لاحق!

والخطوة الأولى هي الآن للوصول إلى موقع http://www.jotform.com.

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

استعداد حسابك تم إنشاؤه بالفعل ، وأكثر يجب عليك القيام به شيئا آخر قبل أن تبدأ في 

كي تشأ نمودجك : تأكيد حسابك! اعتقد أنه شيئ بسيط .. ، وأنا أراهن أنك فعلت هذا ربما ما 

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

التي بعث بها موقع لتأكيد حسابك :)

تم تنشأ نمودجك و هدا ليس بالصعب.



ملاحضة :

لا تنسى عند اضافة نمودجك ارسال رسالتك عبر صفحات التحرير

او ارسال رسالتك مع غلق التعليقات



هذا كل شيء 


و  الى لقاء قريب.

 
إقرأ البقية