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

Share

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

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

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

المميزات :

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

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

1. سجل الدخول BLOGGER .
2. توجه إلى : التصميم ==> عناصر الصفحة
   
   
   
   
   
   
   
   
   
   
   
3. أنقر على : إضافة أداة
   
   
   
   
   
   
   
   
4. ثم اختر : HTML/Javascript
   
   
   
   
   
   
   
   
   
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"