تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 3 از 4 نخستنخست 1234 آخرینآخرین
نمایش نتایج: از 21 به 30 از 35

مقاله: [آموزش] : یک ایندکس ساده ، با قابلیت نمایش آخرین ارسالها از RSS و JS ویبولتن

    1. [آموزش] : یک ایندکس ساده ، با قابلیت نمایش آخرین ارسالها از RSS و JS ویبولتن »

      [آموزش] : یک ایندکس ساده ، با قابلیت نمایش آخرین ارسالها از RSS و JS ویبولتن

      نگارش: , by (مدیر بازنشسته)
      2010/11/27 09:07 PM
      امتیاز: 

      درود به کاربران وی بی ایران ،

      همانطور که می دانید ، آموزش CSS ، HTML و Java Script رو تقریبا تموم کردم! حالا می خوام یک طرح اولیه رو براتون رفع اشکال کنم!



      حتما صفحه ی اول Omidx رو دیده اید! این صفحه تر کیبی از یک صفحه ی HTML بصورت استاتیک ، یک تابع Java Script و یک CSS اصلی برای دیزاین ه!

      خب ، بریم سر اصل مطلب :

      من یک فولدر به نام Main درست کردم و اون رو تو روت فروم آپلود کردم ، که عکس ها و توابع رو ازش آدرس دهی کنم!

      تذکر : در یک همچین صفحه ای هیچ وقت تاکید میکنم هیچ وقت ، عکس ها و توابع رو لینک نکنید!

      قبل از هر کاری شما باید خروجی Java Script وی بولتین خود رو فعال کنید ، برای اینکار به :

      Admincp --> تنظیمات اصلی انجمن --> تنظیمات اطلاعات خروجی --> فعال سازی جاوا اسکریپت خروجی

      و " فعال سازی جاوا اسکریپت خروجی " بروی "بله" قرار دهید!

      قبل از هر چیز ، اول هدف رو باید مشخص کنیم ، الان ما میخوایم آخرین ارسال های انجمن رو بیاریم رو یک صفحه ی استاتیک HTML !

      حالا بریم سراغ تابع اصلی ، اول باید یک تابع تعریف کنیم ، که شماره ی تاپیک ها ی انجمن رو از خروجی Java Script وی بولتین ، بصورت ورودی بگیره و بصورت لینک نمایش بده!

      برای این کار من از یک حلقه ی For استفاده میکنم ،

      کد:
      for (i=0; i<=12; i++) {
      document.write('<img src="Main/arr.gif" align="absmiddle">&nbsp;<a dir=rtl href="http://www.YourSite.com/showthread.php?t=', threads[i].threadid, '" target="_blank" title="توسط: ', threads[i].poster, ' در', threads[i].threaddate, '-', threads[i].threadtime, '">', threads[i].title, '</a><br />');
      }
      نکته : میتونید از آدرس های Search Engine Optimization هم استفاده کنید ، اما پیشنهاد میکنم ، vbseo رو بیخیال بشید ، چون برای برای قشنگ تر شدن کار ، من نام نویسنده و تاریخ ارسال هم در کد بالا گزاشتم! که در حالت استفاده از Search Engine Optimization این امکان وجود نداره!

      خب ، در کد بالا به جای www.YourSite.com آدرس انجمن رو قرار بدید! در این حالت یک نکته رو دقت کنید :

      - اگر فروم رو در ساب دامین و یا ساب دایرکتوری نصب کردید ، آدرس محل نصب رو وارد کنید :

      مثلا : www.YourSite.com/forum و یا forum.YourSite.com

      خب کد رو با پسوند JS و یک نام دلخواه ذخیره کنید! مثلا Main.js

      حالا بریم سر صفحه ی HTML :

      این کد صفحه ایست که در Omidx استفاده شده :

      کد:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Omidx.com | اولین انجمن تخصصی سیستم عامل</title>
      <meta name="keywords" content="OS,Operating System,Mac,Macintosh,Mac OS X,Leopard,Snow Leopard,Lion,Windows,Linux,Seven,Vista,XP,Programming,Web Designing,HTML,CSS,C,C++,C#,JAVA,سیستم عامل,مک,مکینتاش,ویندوز,لینوکس,برنامه نویسی,طراحی وب,آموزش,گرافیک" />
      <meta name="description" content="اولین انجمن تخصصی سیستم عامل  The First and Biggest Persian Operating System Community." />
      <link rel="alternate" type="application/rss+xml" title="Omidx RSS Feed" href="http://www.omidx.com/external.php?type=RSS2" />
      <link href="Temp.css" rel="stylesheet" type="text/css" />
      <script src="http://www.omidx.com/external.php?type=JS" type="text/javascript"></script>
      <style type="text/css">
      body {
          font-family:Tahoma, Geneva, sans-serif;
          font-size:12px;
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 25px;
          background-image: url('Main/bg.png');
          background-repeat: repeat-x
      }
      a:link {
          color: #3da9fc;
          text-decoration: none;
      }
      a:visited {
          color: #3da9fc;
          text-decoration: none;
      }
      a:hover {
          color: #3da9fc;
          text-decoration: underline;
      }
      a:active {
          color: #3da9fc;
          text-decoration: none;
      }
      -->
      </style></head>
      
      <body>
      <div style="background:url('Main/Main.jpg') no-repeat top center; width:795px; min-height:500px; overflow:auto; margin-left:auto; margin-right:auto">
      
        <div style="float:right; width:470px; margin-top:180px; margin-right:21px; line-height:20px; direction:rtl; text-align:justify">
      این سایت تنها برای اطلاع رسانی و آموزش تهیه گردیده است. شما می توانید با <a target="_blank" href="http://www.omidx.com/register.php">عضویت</a> در تالار گفتمان این سایت به کلیه مطالب آن به صورت رایگان دسترسی پیدا کنید.<br/>کلیه حقوق اطلاعات و مقالات در این سایت ، متعلق به " <a target="_blank" href="http://www.omidx.com/forum.php/">انجمن تخصصی سیستم عامل</a> " بوده و هرگونه نسخه برداری از آن بدون ذکر منبع پیگرد قانونی خواهد داشت.<br/>نظر به قانون <font color="#66AA11"><b>منع فعالیت سیاسی</b></font>  در انجمن های <a target="_blank" href="http://www.omidx.com/forum.php">Omidx</a> ، از شما کاربر گرامی تقاضا میشود ، به هیچ عنوان در امضا و آواتار خود از تصاویر یا محتوای سیاسی استفاده نکرده و <font color="#ff0000"><b>به هیچ وجه وارد بحث های سیاسی نشوید !</b></font>
        <div style="background:url('Main/Tapatalk.png') no-repeat right; height:48px; margin-top:10px; padding-right:55px; padding-top:15px"><a href="http://www.omidx.com/thread5.html" target="_blank">مجهز بودن این انجمن به سیستم Taptalk</a></div>
        <div style="background:url('Main/facebook.png') no-repeat right; height:48px; margin-top:10px; padding-right:55px; padding-top:15px"><a href="http://www.facebook.com/omid.samir" target="_blank">پروفایل مدیر وب سایت در فیس بوک!</a></div>
        <div style="background:url('Main/feed.png') no-repeat right; height:48px; margin-top:10px; padding-right:55px; padding-top:15px"><a href="http://www.omidx.com/external.php?type=RSS2" target="_blank">مشترك آخرين ارسالهاي انجمن شويد!</a></div>
        </div>
          
        <div  style="float:left; width:280px; text-align:right; margin-top:143px; direction:rtl; line-height:20px">
          <script src="Main/main.js" type="text/javascript"></script>
      
             </div>
         
      </div>
      <div style=" width:795px; margin-left:auto; margin-right:auto"><a href="http://www.omidx.com/up/" target="_blank"><img src="Main/4.png" width="197" height="128" border="0" /></a><a href="http://www.omidx.com/blogs.html" target="_blank"><img src="Main/3.png" width="197" height="128" border="0" /></a><a href="http://www.omidx.com/forum.php" target="_blank"><img src="Main/2.png" width="197" height="128" border="0" /></a><a href="http://www.omidx.com/content/" target="_blank"><img src="Main/1.png" width="197" height="128" border="0" /></a></div>
      <div style=" width:795px; margin-left:auto; margin-right:auto; text-align:center; direction:rtl; line-height:25px; padding-top:8px">
      <font size="1">.Copyright © 2010-2011 - By Omidx.com (Administration by <a href="http://www.omidx.com/member1.html">Omid Samir</a>). All right reserved<br/></font>
                  <div class="link"> 
                      <p> 
                          <a href="http://www.omidx.com/" target="_blank">صفحه اصلي</a> |
                          <a href="http://www.omidx.com/content/" target="_blank">خانه</a> |
                          <a href="http://www.omidx.com/forum.php" target="_blank">انجمن</a>
       |
                          <a href="http://www.omidx.com/blogs.html" target="_blank">وبلاگ</a> |
                          <a href="http://www.omidx.com/up/" target="_blank">آپلودسنتر عکس</a> | 
                           
                          <a href="http://www.omidx.com/forum10.html" target="_blank">فروشگاه</a>
       |
                          <a href="mailto:[email protected]">تبليغات</a> |
                          <a href="http://www.omidx.com/sendmessage.php" target="_blank">تماس با ما</a> 
                      </p> 
                  </div> 
      
      </div>
      </body>
      </html>
      به آدرس ها دقت کنید! همه از یک فولدر به نام Main آدرس دهی شده! شما نام دلخواه خودتون رو قرار بدید! : دی

      فکر کنم ، این قسمت دیگه واضح باشه! تگ title عنوان صفحه است ، و متا تگ ها و... هم که کاملا روشن ه! (مشکلی داشتتید سؤال کنید! در خدمت شما هستم!)

      این صفحه رو با فرمت HTML ذخیره کنید!

      خب ، حالا عکس ها ، تابع اصلی جاوا که در بالا تعریف کردیم! رو در Main بریزید و به همراه صفحه ی HTML dکه ساختید در روت فروم آپلود کنید!

      تذکر : اگر شما وی بولتین رو در ساب دامین و یا ساب دایرکتوری نصب کردید ، فایل HTML رو با نام index.html در روت آپلود کنید!

      اما اگر شما وی بولتین رو در روت نصب کردید ، برای قشنگ تر شدن کار ، ابتدا صفحه ی index.php وی بولتین رو باز کنید در خط 71 شما یک حلقه ی if به این شکل دارید :

      کد:
      if (defined('VB_RELATIVE_PATH'))
      
      {
      
          chdir('./' . VB_RELATIVE_PATH);
      
      }
      
      require('forum.php');
      خب ، وی بی شما نسخه ی forum باشه ، داخل if آدرس forum.php و اگر نسخه ی Suite باشه ، content.php رو خواهید دید!

      خب این صفحه ی php نحوه ی بالا امدن سایت دئ مدیریت میکنه!

      فقط کافیه به جای forum.php یا content.php آدرس صفحه ای که ساختید رو بزارید!

      مثلا :

      کد:
      if (defined('VB_RELATIVE_PATH'))
      
      {
      
          chdir('./' . VB_RELATIVE_PATH);
      
      }
      
      require('m.html');
      خب ، اینطوری دیگه نیازی به ریدارکت کردن دامین به صفحه ی اصلی نیست! پس اگر صفحه ای رو ریدارکت کردید ، ریدارکت رو حذف کنید! مخصوصا ریدارکت 301! (فقط برای root)

      برای راحتی کار شما من ، تابع جاوا و صفحه ی HTML خودم رو براتون پیوست میکنم! (پسورد فایل zip شده : www.omidx.com)

      هر سؤالی ، ایرادی ، اشکالی داشتید و یا کد HTML صفحه ی اول سایت خاصی مد نظر تون هست در خدمت شما هستم!

      فقط به خاطر علی آقای گل (VBiran) که در وی بی ایران واقعا زحمت میکشند! تازه مسائل پشت #### ی یک انجمن که واقعا وقت می بره ، هم هست ! با این وجود تا جایی که دیدم ، اکثر تاپیک ها رو شخصا جواب میدن! فقط وب مسترا می فهمند چی میگم!




      ___________________
      منبع : Omidx.com
      نویسنده : Omid Samir

      __________________________________________________ ________________
      کپی برداری از مطالب این تاپیک فقط با ذکر منبع و نام نویسنده مجاز میباشد .
      با تشکر ،
      امید

      ویرایش توسط OmidX : 2011/11/13 در ساعت 09:42 PM
  1. Top | #21
    کاربر سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    432
    میزان امتیاز
    51

    پیش فرض

    علی آقا الان تگ a استایل من ایناست :
    کد:
    a {    line-height:20px;
        font-size:11px;
        font-family:tahoma;
        text-decoration: none;
        color: black;
    }
    
    
    a:hover {
        text-decoration: none;
        color: #9d9d9d;
    }
    .s1 {
    background:#26a3dd url(images/lines.png);border:1px solid #232323;font-family:byekan;font-size:13px;padding: 7px;border-radius: 5px;box-shadow: 0px 0px 10px silver inset;height: 20px;width: 500px;
    }
    .links { margin:5px 15px 5px 15px }
      .links ul { list-style:none }
      .links ul li { padding:10px ; background:#f3f3f3 ; box-shadow:0 0 5px #CCC; margin:5px ; float:right }
        .links ul li:hover { box-shadow:0 0 5px #999 ;     -webkit-transition: all 0.3s ease-in;
        -moz-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in; }
        .hr { border:1px dashed #bba883 ; box-shadow :1px 1px 0px #FFF ; width:980px ; margin-right:15px }
        .footer { line-height:18px ; text-shadow:1px 1px 0px #FFF ; padding:0 0 0 0; margin:0px 14px 15px 0; color:#999}

    این
    overflow:hidden;
    رو کجای این کدها بذارم ؟




  2. گیفت کارت آیتونز

  3. Top | #22
    مدیریت کل سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,681
    میزان امتیاز
    3117

    پیش فرض

    این رو به CSS ها اضافه کنید :

    کد:
    .content li a {
    width: 273px;
    float: right;
    height: 17px;
    overflow:hidden;
    }
    
    
    li {
    list-style:none;
    }
    پیدا کنید :

    کد:
    <script src="forum.js" type="text/javascript"></script>
    جایگزین کنید با :

    کد:
    <script type="text/javascript">				for (i=0; i<=16; i++) {
    document.write('<li>&nbsp;<a href="http://www.chemistbax.ir/forum/showthread.php?t=', threads[i].threadid, '" target="_blank" title="توسط : ', threads[i].poster, ' در ', threads[i].threaddate, '-', threads[i].threadtime, '">', threads[i].title, '</a><li>');
    }
    </script>

    کاربر مقابل از VBIran بابت این پست مفید تشکر کرده است:


  4. Top | #23
    کاربر سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    432
    میزان امتیاز
    51

    پیش فرض

    اقا یه دنیا ممنون. فقط من میخوام قبلش یه تگ ایمیج هم بذارم. الان که میام این :
    کد:
    <script type="text/javascript">				for (i=0; i<=16; i++) {document.write('<li><img src="images/postbit.png" align="absmiddle"><a href="http://www.chemistbax.ir/forum/showthread.php?t=', threads[i].threadid, '" target="_blank" title="توسط : ', threads[i].poster, ' در ', threads[i].threaddate, '-', threads[i].threadtime, '">', threads[i].title, '</a></li>');
    }
    
    </script>

    رو میذارم ؛ عکسها تو یه خط میان و نوشته ها تو یه خط دیگه. امکانش هست در این خصوص هم کمک کنید ؟

  5. Top | #24
    مدیریت کل سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,681
    میزان امتیاز
    3117

    پیش فرض

    .content li a

    رو محتواش رو بکنید :

    کد:
    width: 257px;float: right;
    height: 17px;
    overflow: hidden;
    background: url(http://www.vbiran.ir/images/vbiranv5/statusicon/post_new.png) no-repeat right;
    padding-right: 16px;
    padding-bottom: 1px;
    http://www.vbiran.ir/images/vbiranv5...n/post_new.png


    بجای این هم عکس مورد نظر

    کاربر مقابل از VBIran بابت این پست مفید تشکر کرده است:


  6. Top | #25
    کاربر سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    432
    میزان امتیاز
    51

    پیش فرض

    آقا امروز خیلی مزاحم شدم ولی فایل استایل CSS من اصن اینجور قسمتی نداره !!!
    کد:
    @font-face { font-family: 'byekan'; src: url('fonts/byekan.eot?#') format('eot'), /* IE6-8 */ url('fonts/byekan.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url('fonts/byekan.ttf') format('truetype'); /* Saf3-5, Chrome4+, FF3.5, Opera 10+ */} a {
        line-height:20px;
        font-size:11px;
        font-family:tahoma;
        text-decoration: none;
        color: black;
    }
    
    
    a:hover {
        text-decoration: none;
        color: #9d9d9d;
    }
    .s1 {
    background:#26a3dd url(images/lines.png);border:1px solid #232323;font-family:byekan;font-size:13px;padding: 7px;border-radius: 5px;box-shadow: 0px 0px 10px silver inset;height: 20px;width: 500px;
    }
    .links { margin:5px 15px 5px 15px }
      .links ul { list-style:none }
      .links ul li { padding:10px ; background:#f3f3f3 ; box-shadow:0 0 5px #CCC; margin:5px ; float:right }
        .links ul li:hover { box-shadow:0 0 5px #999 ; 	-webkit-transition: all 0.3s ease-in;
    	-moz-transition: all 0.3s ease-in;
    	-o-transition: all 0.3s ease-in;
    	transition: all 0.3s ease-in; }
    	.hr { border:1px dashed #bba883 ; box-shadow :1px 1px 0px #FFF ; width:980px ; margin-right:15px }
    	.footer { line-height:18px ; text-shadow:1px 1px 0px #FFF ; padding:0 0 0 0; margin:0px 14px 15px 0; color:#999}
    
    
    .barca img {
    opacity:0.7;
    	-moz-opacity:0.7;
    	-webkit-opacity:0.7;
    	******:alpha(opacity=70);
    }
    .barca img:hover {
    opacity:1;
    	-moz-opacity:1;
    	-webkit-opacity:1;
    	******:alpha(opacity=100);
    }  
    .charkh {
    	opacity:0.8;
    	border-radius:10px;
    	display : block;
    	-webkit-transition: all 0.5s ease-out;
    	-moz-transition: all 0.5s ease;
    	-o-transition: all 0.5s ease;
    }
    .charkh:hover {
        opacity:1;
    	-webkit-transform: rotate(-10deg);
    	-moz-transform: rotate(-10deg);
    	-o-transform: rotate(-10deg);
    	-ms-transform:rotate(-10deg);
    }
    .charkh2 {
    	opacity:0.8;
    	border-radius:10px;
    	display : block;
    	-webkit-transition: all 0.5s ease-out;
    	-moz-transition: all 0.5s ease;
    	-o-transition: all 0.5s ease;
    }
    .charkh2:hover {
        opacity:1;
    	-webkit-transform: rotate(10deg);
    	-moz-transform: rotate(10deg);
    	-o-transform: rotate(10deg);
    	-ms-transform:rotate(10deg);
    	}
    .colorbar {
    background:url(images/rainbow-up.gif);border-bottom: 4px solid #E9E9E9;
    }
    #forum_green {margin-top:-14px;
    }
    #forum_blue {margin-top:-14px;
    }
    #forum_red {margin-top:-14px;
    }

  7. Top | #26
    مدیریت کل سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,681
    میزان امتیاز
    3117

    پیش فرض

    ته ته http://www.chemistbax.ir/style.css دارم من میبینم این کلس رو ..

    کاربر مقابل از VBIran بابت این پست مفید تشکر کرده است:


  8. Top | #27
    کاربر سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    432
    میزان امتیاز
    51

    پیش فرض

    نقل قول نوشته اصلی توسط VBIran نمایش پست ها
    ته ته http://www.chemistbax.ir/style.css دارم من میبینم این کلس رو ..
    شرمنده. حق با شما بود. من داشتم از رو سیستم خودم نگاه میکردم. حواسم نبود شما این کلس رو قبلا فرمودید اضافه کنم. بی نهایت ممنون

    کاربر مقابل از Reza-G بابت این پست مفید تشکر کرده است:


  9. Top | #28
    مدیریت کل سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,681
    میزان امتیاز
    3117

    پیش فرض

    اگر دوست دارید سی اس اس رو بصورت کامل یاد بگیرید بهتون این سایت رو پیشنهاد میکنم :

    CSS3 Tutorial

    کاربر مقابل از VBIran بابت این پست مفید تشکر کرده است:


  10. Top | #29
    مدیر ارشد

    ورژن ویبولتین
    All Versions
    نوشته ها
    3,176
    میزان امتیاز
    447

    پیش فرض

    درود میشه به کمک این آموزش یه چیزی ساخت که برای نیوک ه مبشه استفاده کرد؟

    اموزش های دیگه هست ولی هیچکدوم کار نمیکنن!!

  11. Top | #30
    مدیریت کل سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,681
    میزان امتیاز
    3117

    پیش فرض

    متوجه سوالتون نشدم !

صفحه 3 از 4 نخستنخست 1234 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. پاسخ: 313
    آخرين نوشته: 2014/06/29, 02:02 PM
  2. آموزش ساخت فیلد در پست بیت ویبولتین 4
    توسط KinG_LorD در انجمن پرسش و پاسخ
    پاسخ: 13
    آخرين نوشته: 2012/05/24, 09:25 PM
  3. درخواست آموزش ویرایش پست بیت
    توسط elshan2012 در انجمن پرسش و پاسخ
    پاسخ: 14
    آخرين نوشته: 2011/12/06, 01:37 AM
  4. پاسخ: 2
    آخرين نوشته: 2011/06/11, 11:56 AM
  5. پاسخ: 10
    آخرين نوشته: 2011/04/15, 05:30 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •