12‏/06‏/2010

موضوع عشوائي على شكل نشرة

Share
بسم الله، والــــسلام عليكم :

أهلاً بالشباب شرفتونا

اليوم مع طريقة اضافة أداة "موضوع عشوائي" على شكل نشرة اخبارية
بعد الإضافة ستظهر بهذا الشكل :


المميزات :
  • عرض موضوع عشوائي (العنوان، التاريخ، الكاتب، مقدمة للموضوع ...)
  • شكل جذاب وتأثير جميل على العناوين .
  • المرونة والسهولة في الإستخدام .
  • امكانية التعديل عليها بما يناسبك .

والآن مع طريقة الإضافة :

  1. سجل الدخول BLOGGER .
  2. توجه إلى : التصميم ==> عناصر الصفحة








  3. أنقر على : إضافة أداة



    [18-08-2009+10-28-43.jpg]


  4. ثم اختر : HTML/Javascript





    [20-08-2009+12-53-32.png]

  5. والآن قم بلصق الكود التالي : (هام جداً : تأكد من نسخ الكود كاملاً)




    <style type="text/css">
    .gfg-root {
    width : 100%;
    height : auto;
    position : relative;
    overflow : hidden;
    text-align : center;
    font-family: "Arial", sans-serif;
    font-size: 12px;
    border: 1px solid #BCCDF0;
    }

    .gfg-title {
    font-size: 14px;
    font-weight : bold;
    color : #3366cc;
    background-color: #E5ECF9;
    line-height : 1.4em;
    overflow : hidden;
    white-space : nowrap;
    }

    .gfg-title a {
    color : #3366cc;
    }

    .gfg-subtitle {
    font-size: 10px;
    font-weight : bold;
    color : #3366cc;
    background-color: #E5ECF9;
    line-height : 1.4em;
    overflow : hidden;
    white-space : nowrap;
    margin-bottom : 0px;
    }

    .gfg-subtitle a {
    color : #3366cc;
    display:none !important;
    }

    .gfg-entry {
    background-color : white;
    width : 100%;
    height : 6.9em;
    position : relative;
    overflow : hidden;
    text-align : right;
    margin-top : 3px;
    }

    /* To allow correct behavior for overlay */
    .gfg-root .gfg-entry .gf-result {
    position : relative;
    background-color : white;
    width : auto;
    height : 100%;
    padding-left : 20px;
    padding-right : 5px;
    }

    .gfg-list {
    position : relative;
    overflow : hidden;
    text-align : right;
    margin-bottom : 5px;
    display:none !important;
    }

    .gfg-listentry {
    line-height : 1.5em;
    overflow : hidden;
    white-space : nowrap;
    text-overflow : ellipsis;
    -o-text-overflow : ellipsis;
    padding-left : 15px;
    padding-right : 5px;
    margin-left : 5px;
    margin-right : 5px;
    }

    .gfg-listentry-odd {
    background-color : #F6F6F6;
    }

    .gfg-listentry-even {
    }

    .gfg-listentry-highlight {
    background-image : url('garrow.gif');
    background-repeat: no-repeat;
    background-position : center left;
    }

    /*
    * FeedControl customizations.
    */

    .gfg-root .gfg-entry .gf-result .gf-title {
    font-size: 19px;
    line-height : 1.2em;
    overflow : hidden;
    white-space : nowrap;
    text-overflow : ellipsis;
    -o-text-overflow : ellipsis;
    margin-bottom : 2px;
    }

    .gfg-root .gfg-entry .gf-result .gf-snippet {
    height : 3.8em;
    color: #000000;
    margin-top : 3px;
    }

    /*
    * Easy way to get horizontal mode, applicable via js options to gadget.
    */

    .gfg-horizontal-container {
    position : relative;
    }

    .gfg-horizontal-root {
    height : 1.5em;
    _height : 100%;
    position : relative;
    white-space : nowrap;
    overflow : hidden;
    text-align : center;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    border: 1px solid #AAAAAA;
    padding : 5px;
    margin-right : 80px;
    }

    .gfg-horizontal-root .gfg-title {
    font-weight : bold;
    background-color: #FFFFFF;
    line-height : 1.5em;
    overflow : hidden;
    white-space : nowrap;
    float : left;
    padding-left : 10px;
    padding-right : 12px;
    border-right: 1px solid #AAAAAA;
    }

    .gfg-horizontal-root .gfg-title a {
    color : #444444;
    text-decoration : none;
    }

    .gfg-horizontal-root .gfg-entry {
    width : auto;
    height : 1.5em;
    position : relative;
    overflow : hidden;
    text-align : right;
    margin-top : 0px;
    margin-left : 0px;
    padding-left : 10px;
    }

    /* To allow correct behavior for overlay */
    .gfg-horizontal-root .gfg-entry .gf-result {
    position : relative;
    background-color : white;
    width : 100%;
    height : 100%;
    line-height : 1.5em;
    overflow : hidden;
    white-space : nowrap;
    }

    .gfg-horizontal-root .gfg-list {
    display : none;
    }

    /*
    * FeedControl customizations.
    */

    .gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
    .gfg-horizontal-root .gfg-entry .gf-result .gf-author {
    display : none;
    }

    .gfg-horizontal-root .gfg-entry .gf-result .gf-title {
    color: #0000cc;
    margin-right : 3px;
    float : left;
    }

    .gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
    float : left;
    }

    .gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
    .gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
    display : block;
    color: #AAAAAA;
    }

    .gfg-branding {
    white-space : nowrap;
    overflow : hidden;
    text-align : right;
    position : absolute;
    right : 0px;
    top : 0px;
    width : 80px;
    }

    .gfg-collapse-open, .gfg-collapse-closed {
    background-repeat : no-repeat;
    background-position : center;
    cursor : pointer;
    float : right;
    width : 17px;
    height : 20px;
    }

    .gfg-collapse-open {
    background-image : url('arrow_open.gif');
    }

    .gfg-collapse-closed {
    background-image : url('arrow_close.gif');
    }

    .gfg-collapse-href {
    float : left;
    }

    .clearFloat {
    clear : both;
    }
    #feedGadget {
    margin-top : 5px;
    margin-left: auto;
    margin-right: auto;
    width : 470px;
    font-size: 17px;
    color: #9CADD0;
    }
    </style>
    <noscript><a href="http://al-dream.blogspot.com" target="_blank">Blogger Hacks</a></noscript>
    <script src="http://www.google.com/jsapi/?key=internal-sample"
    type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

    <script type="text/javascript">

    function showGadget() {
    var feeds = [
    {title:'title',
    url:'http://al-dream.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

    ];

    new GFdynamicFeedControl(feeds, 'feedGadget',
    {numResults : 1000, stacked : true,
    title: " موضوع عشوائي "});
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(showGadget);
    </script>.
    <noscript><a href="http://al-dream.blogspot.com" target="_blank"></a></noscript>
    <div id="feedGadget">يرجى الانتظار ...</div>
    <div id="feedGadget"><a href="http://al-dream.blogspot.com/2009/01/all-blogger-posts-slideshow-as-news.html" target="_blank"></a><a href="" target="_blank"></a>.</div>
  6. وأخيراً : "الحفظ" 

 تنويه : 
  • لا تنسى تغيير : http://al-dream.blogspot.com برابط مدونتك .
  • التعديل في عرض الأداة "width"  ،أما الارتفاع  "height"
     

4 تعليقات:

Dr/ walaa salah on 19 أغسطس، 2010 11:53 م يقول...

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

انا جربت الطريقه لكن للاسف ظهر عندي رموز غريبه

ممكن اعرف الحل

Dr/ walaa salah on 20 أغسطس، 2010 12:17 ص يقول...

خلاص الحمد لله طلعت معايا


انا متشكره اوي

arwa-naser on 8 نوفمبر، 2010 5:19 ص يقول...

مشكور وتستاهل مدونتك الاعلان

منتديات افاق مغربية on 23 مايو، 2011 3:03 م يقول...

مشكور على الاضافة الرائعة

إرسال تعليق

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

شكرا أخي/أختي على الاهتمام

شرف لي أن تحتوي مدونتي على ردك

.
يرجى الانتظار ...
.
 

ضع ايميلك واحصل على جديدنا فيه :

من أنا

صورتي
بسم الله الرحمــن الرحيم السلام عليكم ورحمة الله تعالى وبركاته أما بعد : لقد بدأت هذه المدونة -على أمل أن تصل لمستوى جيد - ورغم أني لا أعرف ماذا أضع فيها أو كيف أبدأها، لكن يقال ''رحلة الـ 1000 ميل تبدأ بخطوة'' وهذا ما سأفعله -بإذن الله- حيث أدعو الله أن يوفقنا في أعمالنا . . . والله ولي التوفيق . اللهم أنصر اخواننا في غزة - وأهِن أعداءك أعداء الدين -يا رب العالمين-.
مدونة الحلم Copyright © 2009 Blogger Template Designed by Bie Blogger Template
أعلى الصفحة