طراحی قالب و ایجاد سرچ باکس

moslemfn

Member
با عرض معذرت دنبال این مطلبی که دارم مطرح می کنم خیلی گشتم به نتیجه نرسیدم در نتیجه دست به کار شدم و این تاپیک رو ایجاد کردم

می خوام رو این قالبی که در ضمیمه قرار دادم یه سرچ باکس در جایی که عکس جستجو در ناوبار هست قرار بدم
می خواستم یکی از اساتید زحمتش رو بکشه و طوری این کد نویسی رو انجام بده که وقتی در قسمت سرچ متن رو نوشتیم و خواستیم جستجو کنه روی زره بین که کلیک کردم عمل جستجو رو انجام بده .

در پایان از اساتید خواهش میکنم به اینجانب کمک کنند.

ارادتمند: آرمین شایسته
66.gif
98.gif
فایل های پیوست شده
zip.gif
My Theme Design.zip (77.2 کیلو بایت, 1 نمایش)
 

vahidd.com

Member
دوست عزیز کارتو انجام دادم و همه‌ی فایل‌ها رو همراه این پست پیوست کردم در ضمن در قسمت آدرس سایت شما آدرس سایتت رو وارد کن تا گوگل سرچ برات فعال بشه اینم فقط کد فایلت:

HTML:
<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>
  اولين طراحي موفقيت آميز من
  </title>

  <style type="text/css">
  
  <!-- Vahidd.com -->
  
  .vahidd {
    background: none;
    width:37px;
    margin-right:4px;
    margin-top:4px;
    height:24px;
    border:none;
    cursor: pointer;
}

.txt {
    background: none;
    border:none;
    float:left;
    margin-top:6px;
    margin-left:11px;
    width:137px;
}
  
  
  
  
  
  
    body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
    body{

      background: #666666 url(images/bg.gif);

    }
    #box{


      -moz-border-radius:5px;
      margin:27px;

      background: #CADAE2;
      width:944px;

      padding:5px;
    }
    #header{

      -moz-border-radius:5px;
      background:  url(images/headers.png);
      height:120px;
      width:944px;

    }

    #header h1{
      position: absolute;
      top:30px;
      left:250px;
      text-indent: -9999px;

    }


    #navbar{
      position: relative;
      -moz-border-radius:5px;
      background:url(images/navbar_07.png);
      width:944px;
      height:40px;
      margin-top:5px;
    }
    #top-div-content{
      background: #C0C0C0;
      width:944px;
      height:5px;
      -moz-border-radius-topright:5px;
      -moz-border-radius-topleft:5px;
      margin-top:5px;
    }
    .left{
      float: left;
      background: #DBDBDB;
      width:210px;

      -moz-border-radius:5px;

    }
    .content{
      float: left;
      background:  #DBDBDB;
      width:504px;

      -moz-border-radius:5px;
      margin-left:5px;
      margin-top:30px;

    }
    .right{
      float: left;
      background:  #DBDBDB;
      width:210px;

      margin-left:5px;
      -moz-border-radius:5px;
    }
    .m-info{
      background: url(images/left-top-menu_15.png);
      width:200px;
      height:30px;
      margin-top:5px;
      margin-left:5px;
    }
    .m-content{
      background: url(images/menu-bg_18.png);
      width:200px;

      margin-left:5px;
    }
    .m-footer{
      background: url(images/left-bottom-menu_18.png);
      width:200px;
      height:30px;
      margin-left:5px;
      margin-bottom:5px;

    }

    #content{
      padding:5px;
      background:  #C0C0C0;
      width:934px;

    }
    .info-content{
      background: url(images/content-top-info.png);
      width:495px;
      height:30px;
      margin-left:5px;
      margin-top:5px;
    }
    .content-content{
      background: url(images/content-bg_25.png);
      width:495px;

      margin-left:5px
    }
    .footer-content{
      background: url(images/content-bottom-footer.png);
      width:495px;
      height: 30px;
      margin-left:5px;
      margin-bottom:5px;

    }

    #bottom-div-content{
      background: #C0C0C0;
      width:944px;
      height:5px;
      -moz-border-radius-bottomright:5px;
      -moz-border-radius-bottomleft:5px;
    }
    #user{
      float: left;
      background: url(images/Last-Users_35.png);
      width: 184px;
      height: 295px;
      margin-top:10px;
      margin-left:4px;

    }
    #bishtar{
      float: left;
      background: url(images/Lost-Content_37.png);
      width: 234px;
      height: 295px;
      margin-top:10px;
      margin-left:4px;
    }
    #comment{
      float: left;
      background: url(images/Last-Comment_39.png);
      width: 234px;
      height: 295px;
      margin-top:10px;
      margin-left:4px;
    }
    #forum{
      float: left;
      background: url(images/Last-Send-In-Forum_41.png);
      width:274px;
      height:295px;
      margin-top:10px;
      margin-left:4px;
    }
    #footer{
      -moz-border-radius:5px;
      float: left;
      margin-top:5px;
      background: url(images/foot.png);
      width:944px;
      height: 50px;
    }
    ul{
      margin:0;
      padding:0;
    }

    li{
      list-style: none;
      direction: rtl;
      list-style-image: url(images/point.gif);
      padding:2px 5px 2px 2px;
      margin:0px 30px 0 0;


    }
    #navbar ul li{
      list-style: none;
      float: right;
      padding:0 5px 5px 0px;
      margin:-4px 10px 10px 10px;

    }
    #navbar ul li a{
      -moz-border-radius:5px;
      float: right;
      text-decoration: none;
      margin-top:7px;
      padding:1px 15px 1px 15px;


    }
    #navbar a:link{
      color: #FF0000;
      border: 1px dashed #FFFFFF;
      background-color: #FCFCFC;
      -moz-border-radius:5px;
      height:30px;
      margin-top:7px;
      padding:1px 15px 1px 15px;
    }
    #navbar a:hover{
      color: #FF0000;

      background-color: #CCFFFF;
      -moz-border-radius:5px;
      height:30px;
      margin-top:7px;
      padding:1px 15px 1px 15px;

    }
    .info-content h3{
      direction: rtl;
      margin:5px 10px 5px 5px;
      font-family: F_arshia,F_Badr,F_Mitra;
      font-size: larger;
    }
    p.p1{
      direction: rtl;
      margin-right:15px;

    }
    p.p2{
      direction: rtl;
      margin-right:15px;
    }
   /*       SEARCH         */
#search{
background: url(images/search.png);
width:198px;
height:30px;
position: absolute;
top:5px;
left:5px;

}


/*      END SEARCH         */


  </style>
</head>

<body>

    <div id="box">

        <div id="header">
            <a href="http://www.p30pdf.ir"><h1>مرجع دانلود کتابهاي الکترونيکي</h1></a>
        </div>
        <div id="navbar">

            <ul>

                <li><a href="http://www.p30pdf.ir">صفحه اصلي</a></li>
                <li><a href="http://www.shop.p30pdf.ir/">فروشگاه</a></li>
                <li><a href="http://www.forum.p30pdf.ir">انجمن</a></li>
                <li><a href="http://www.p30pdf.ir/contactus/">تماس با ما</a></li>


            </ul>
            <div id="search">
            
            
            
              <form dir="rtl"  method="Get" action="http://google.com/search" class=sch>
                <input type="submit" name="button" id="button" class="vahidd" value="" />
                <input name="sitesearch" value="آدرس سایت شما" type="hidden"/>

    
    <input name="q" type="text" onclick="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" value="Search" class="txt" id="sprytrigger1" />
  </form>
            
            
            
            </div>




        </div>

        <div id="top-div-content"></div>

        <div id="content">

            <div class="left">

                <div class="m-info"><center>منو اصلي</center>

                </div>
                <div class="m-content">

                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                </div>
                <div class="m-footer"></div>

            </div>
            <div class="content">

                <div class="info-content"><h3>اولين طراحي موفقيت آميز من!</h3></div>
                <div class="content-content">

                <center><h2>به نام خدا</h2></center>







                </div>
                <div class="footer-content" dir="rtl" >
                <a style="margin: 10px;" href="#">ادامه مطلب</a>
                </div>

            </div>
            <div class="right">

                <div class="m-info"><center>منو اصلي</center> </div>
                <div class="m-content">

                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>

                </div>
                <div class="m-footer"></div>

            </div>
            <div style="clear: both"></div>
        </div>

        <div id="bottom-div-content"></div>

        <div id="user"></div>
        <div id="bishtar"></div>
        <div id="comment"></div>
        <div id="forum"></div>
        <div id="footer"></div>
        <div style="clear: both"></div>
    </div>

</body>

</html>
 

پیوست ها

  • My Theme Design.rar
    75.6 کیلوبایت · بازدیدها: 18

moslemfn

Member
آقا وحید بابت کمکی که کردین ممنونم مشکلی که هست می خوام اون دکمه که value اش خالی هست دکمه سرچ رو منظورم هست دیده نشه یعنی وقتی روی عکس ذره بین کلیک کردیم شروع به سرچ و ادامه عملیات کنه در کل میشه اون دکمه هه دیده نشه و با کلیک رو ذره بین کار سرچ رو انجام بده

و این که اون کدی که در قالب وب سایت خودتون برای ردیوس کردن عکس ها استفاده کردین رو میشه تو همین قالب بزارین یعنی یه عکس به پوشه ایمج خودتون اضافه کنید و اون ردیوس رو که برای عکس های وب خودتون قرار دایدن در کدهای این قالب هم قرار بدین منظورم همون کدی هست که وقتی روی عکس میریم ردیوس میشه تو وب خودتون هست

ارادتمند : آرمین شایسته :rose:
 

vahidd.com

Member
از این کد استفاده کنید:

HTML:
<!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" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>
  اولين طراحي موفقيت آميز من
  </title>

  <style type="text/css">
  
  
  
  input.vahidd {
    background: none;
    width:37px;
    margin-right:4px;
    margin-top:4px;
    height:24px;
    border:none;
    cursor: pointer;
}

.txt {
    background: none;
    border:none;
    float:left;
    margin-top:6px;
    margin-left:11px;
    width:137px;
}
  
  
  
  
  
  
    body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
    body{

      background: #666666 url(images/bg.gif);

    }
    #box{


      -moz-border-radius:5px;
      margin:27px;

      background: #CADAE2;
      width:944px;

      padding:5px;
    }
    #header{

      -moz-border-radius:5px;
      background:  url(images/headers.png);
      height:120px;
      width:944px;

    }

    #header h1{
      position: absolute;
      top:30px;
      left:250px;
      text-indent: -9999px;

    }


    #navbar{
      position: relative;
      -moz-border-radius:5px;
      background:url(images/navbar_07.png);
      width:944px;
      height:40px;
      margin-top:5px;
    }
    #top-div-content{
      background: #C0C0C0;
      width:944px;
      height:5px;
      -moz-border-radius-topright:5px;
      -moz-border-radius-topleft:5px;
      margin-top:5px;
    }
    .left{
      float: left;
      background: #DBDBDB;
      width:210px;

      -moz-border-radius:5px;

    }
    .content{
      float: left;
      background:  #DBDBDB;
      width:504px;

      -moz-border-radius:5px;
      margin-left:5px;
      margin-top:30px;

    }
    .right{
      float: left;
      background:  #DBDBDB;
      width:210px;

      margin-left:5px;
      -moz-border-radius:5px;
    }
    .m-info{
      background: url(images/left-top-menu_15.png);
      width:200px;
      height:30px;
      margin-top:5px;
      margin-left:5px;
    }
    .m-content{
      background: url(images/menu-bg_18.png);
      width:200px;

      margin-left:5px;
    }
    .m-footer{
      background: url(images/left-bottom-menu_18.png);
      width:200px;
      height:30px;
      margin-left:5px;
      margin-bottom:5px;

    }

    #content{
      padding:5px;
      background:  #C0C0C0;
      width:934px;

    }
    .info-content{
      background: url(images/content-top-info.png);
      width:495px;
      height:30px;
      margin-left:5px;
      margin-top:5px;
    }
    .content-content{
      background: url(images/content-bg_25.png);
      width:495px;

      margin-left:5px
    }
    .footer-content{
      background: url(images/content-bottom-footer.png);
      width:495px;
      height: 30px;
      margin-left:5px;
      margin-bottom:5px;

    }

    #bottom-div-content{
      background: #C0C0C0;
      width:944px;
      height:5px;
      -moz-border-radius-bottomright:5px;
      -moz-border-radius-bottomleft:5px;
    }
    #user{
      float: left;
      background: url(images/Last-Users_35.png);
      width: 184px;
      height: 295px;
      margin-top:10px;
      margin-left:4px;

    }
    #bishtar{
      float: left;
      background: url(images/Lost-Content_37.png);
      width: 234px;
      height: 295px;
      margin-top:10px;
      margin-left:4px;
    }
    #comment{
      float: left;
      background: url(images/Last-Comment_39.png);
      width: 234px;
      height: 295px;
      margin-top:10px;
      margin-left:4px;
    }
    #forum{
      float: left;
      background: url(images/Last-Send-In-Forum_41.png);
      width:274px;
      height:295px;
      margin-top:10px;
      margin-left:4px;
    }
    #footer{
      -moz-border-radius:5px;
      float: left;
      margin-top:5px;
      background: url(images/foot.png);
      width:944px;
      height: 50px;
    }
    ul{
      margin:0;
      padding:0;
    }

    li{
      list-style: none;
      direction: rtl;
      list-style-image: url(images/point.gif);
      padding:2px 5px 2px 2px;
      margin:0px 30px 0 0;


    }
    #navbar ul li{
      list-style: none;
      float: right;
      padding:0 5px 5px 0px;
      margin:-4px 10px 10px 10px;

    }
    #navbar ul li a{
      -moz-border-radius:5px;
      float: right;
      text-decoration: none;
      margin-top:7px;
      padding:1px 15px 1px 15px;


    }
    #navbar a:link{
      color: #FF0000;
      border: 1px dashed #FFFFFF;
      background-color: #FCFCFC;
      -moz-border-radius:5px;
      height:30px;
      margin-top:7px;
      padding:1px 15px 1px 15px;
    }
    #navbar a:hover{
      color: #FF0000;

      background-color: #CCFFFF;
      -moz-border-radius:5px;
      height:30px;
      margin-top:7px;
      padding:1px 15px 1px 15px;

    }
    .info-content h3{
      direction: rtl;
      margin:5px 10px 5px 5px;
      font-family: F_arshia,F_Badr,F_Mitra;
      font-size: larger;
    }
    p.p1{
      direction: rtl;
      margin-right:15px;

    }
    p.p2{
      direction: rtl;
      margin-right:15px;
    }
   /*       SEARCH         */
#search{
background: url(images/search.png);
width:198px;
height:30px;
position: absolute;
top:5px;
left:5px;

}


/*      END SEARCH         */


  </style>
</head>

<body>

    <div id="box">

        <div id="header">
            <a href="http://www.p30pdf.ir"><h1>مرجع دانلود کتابهاي الکترونيکي</h1></a>
        </div>
        <div id="navbar">

            <ul>

                <li><a href="http://www.p30pdf.ir">صفحه اصلي</a></li>
                <li><a href="http://www.shop.p30pdf.ir/">فروشگاه</a></li>
                <li><a href="http://www.forum.p30pdf.ir">انجمن</a></li>
                <li><a href="http://www.p30pdf.ir/contactus/">تماس با ما</a></li>


            </ul>
            <div id="search">
            
            
            
              <form dir="rtl"  method="Get" action="http://google.com/search" class=sch>
                <input type="submit" name="button" id="button" class="vahidd" value="" />
                <input name="sitesearch" value="آدرس سایت شما" type="hidden"/>

    
    <input name="q" type="text" onclick="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" value="Search" class="txt" id="sprytrigger1" />
  </form>
            
            
            
            </div>




        </div>

        <div id="top-div-content"></div>

        <div id="content">

            <div class="left">

                <div class="m-info"><center>منو اصلي</center>

                </div>
                <div class="m-content">

                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                </div>
                <div class="m-footer"></div>

            </div>
            <div class="content">

                <div class="info-content"><h3>اولين طراحي موفقيت آميز من!</h3></div>
                <div class="content-content">

                <center><h2>به نام خدا</h2></center>







                </div>
                <div class="footer-content" dir="rtl" >
                <a style="margin: 10px;" href="#">ادامه مطلب</a>
                </div>

            </div>
            <div class="right">

                <div class="m-info"><center>منو اصلي</center> </div>
                <div class="m-content">

                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>
                    <ul>

                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>
                        <li>آيتم سوم</li>
                        <li>آيتم چهارم</li>
                        <li>
                        <ul>


                        <li>آيتم اول</li>
                        <li>آيتم دوم</li>




                        </ul>
                        </li>

                    </ul>

                </div>
                <div class="m-footer"></div>

            </div>
            <div style="clear: both"></div>
        </div>

        <div id="bottom-div-content"></div>

        <div id="user"></div>
        <div id="bishtar"></div>
        <div id="comment"></div>
        <div id="forum"></div>
        <div id="footer"></div>
        <div style="clear: both"></div>
    </div>

</body>

</html>
 

moslemfn

Member
اره ممنونم داداش حل شد میشه یه زحمت دیگه هم بکشید همین عکس امضامو دانلود کنید و تو همین قالب قرار بدین بعدش تو سی اس اس هاش همون کدی که در قالب وب خودتون استفاده کردین برای ردیوس کردن عکس ها استفاده کنید ممنون میشم
 

vahidd.com

Member
توی فایلی که پیوست کردم هر عکسی که توی div با کلاس content قرار بگیره اگه ماس بره روش گوش با افکت گرد میشه.
 

پیوست ها

  • My Theme Design.rar
    84.9 کیلوبایت · بازدیدها: 11

جدیدترین ارسال ها

بالا