منتديات التطوير و الاشهار
مدخل جميل جدا لعرض الصور 15KrP
منتديات التطوير و الاشهار
مدخل جميل جدا لعرض الصور 15KrP
منتديات التطوير و الاشهار
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

منتديات التطوير و الاشهار

منتديات التطوير و الاشهار
 
الرئيسيةالرئيسية  البوابةالبوابة  أحدث الصورأحدث الصور  التسجيلالتسجيل  دخولدخول  

 

 مدخل جميل جدا لعرض الصور

اذهب الى الأسفل 
3 مشترك
كاتب الموضوعرسالة
الفارس الملثم
‎عضو ‎نشـيط
‎عضو ‎نشـيط
الفارس الملثم


ذكر
الدولة : www.freely.mam9.com
عدد المساهمات : 291
نقاط نشاط : 657
السٌّمعَة : 0
العمر : 24

مدخل جميل جدا لعرض الصور Empty
مُساهمةموضوع: مدخل جميل جدا لعرض الصور   مدخل جميل جدا لعرض الصور Emptyالإثنين أغسطس 12, 2013 8:48 pm



 بسم الله الرحمن الرحيم


اقجم لكم اليوم مدخل جميل جدا وايضا به سليدر لعرض الصور


وهذه صورة من داخل السليدر فارغة للكتابة عليها
مدخل جميل جدا لعرض الصور Ouuou_10

المهم الان الكود

الكود:
[center][b][/b]
<head>
[b][/b][/center]
[center]
[b][/b]
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
[b][/b][/center]
[center]
[b][/b]
    </head>
[b][/b][/center]


<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">


<head>


<link href="http://fonts.googleapis.com/css?family=Abel|Arvo" rel="stylesheet" type="text/css" />


<style>



/*


Design by Free CSS Templates


(http://www.a7la-7ekaya.com/)


Released for free under a Creative Commons Attribution 2.5 License


*/



body {


   margin: 0;


   padding: 0;


   background: #000000;


   font-family: 'Arvo', Tahoma;


   font-size: 14px;


   color: #CFCFCF;


}



h1, h2, h3 {


   margin: 0px;


   padding: 0px;


   text-transform: lowercase;


   font-family: 'Abel', sans-serif;


   font-weight: 400;


   color: #42859F;


}



h1 {


   font-size: 2em;


}



h2 {


   font-size: 2.4em;


}



h3 {


   font-size: 1.6em;


}



p, ul, ol {


   margin-top: 0;


   line-height: 180%;


}



ul, ol {


}



a {


   text-decoration: none;


   color: #9C9A9A;


}



a:hover {


   text-decoration: underline;


}



img.border {


   border: 6px solid #EEE7DF;


}



img.alignleft {


   float: left;


   margin-right: 25px;


}



img.alignright {


   float: right;


}



img.aligncenter {


   margin: 0px auto;


}



#wrapper {


   margin: 0 auto;


   padding: 0;


}



/* Header */



#header-wrapper {


   overflow: hidden;


   height: 750px;


   background-color: #C52546;


}



#header {


   width: 960px;


   height: 240px;


   margin: 0 auto;


}



/* Logo */



#logo {


   width: 980px;


   height: 100px;


   margin: 0px auto;


   padding: 80px 0px 0px 0px;


   color:#FFFFFF ;


}



#logo h1, #logo p {


   display: block;


   margin: 0px;


   padding: 0px;


   text-transform: lowercase;


}



#logo h1 {


   letter-spacing: -2px;


   text-align: center;


   text-transform: lowercase;


   font-size: 70px;


   color: #FFCB2A;


}



#logo h1 a {


   color: #FFFFFF;


}



#logo p {


   margin-top: -13px;


   text-align: center;


   font-family: 'Abel', Tahoma;


   font-size: 22px;


}



#logo a {


   border: none;


   background: none;


   text-decoration: none;


   color: #FFFFFF;


}



/* Search */



#search {


   float: right;


   width: 280px;


   height: 100px;


   padding: 0;


}



#search form {


   height: 41px;


   margin: 0;


   padding: 60px 0 0 30px;


}



#search fieldset {


   margin: 0;


   padding: 0;


   border: none;


}



#search-text {


   width: 195px;


   padding: 6px 10px;


   border: none;


   background: #FFFFFF;


   text-transform: lowercase;


   font: normal 11px;


   color: #7F7F81;


}



#search-submit {


   display: none;


}



/* Menu */



#menu-wrapper {


   width: 900px;


   height: 60px;


   margin: 0px auto 30px auto;


   padding: 0px;


   background: #42859F;


   color: #000000;


}



#menu {


   margin: 0;


   padding: 0px 0px 0px 20px;


   list-style: none;


   line-height: 60px;


   letter-spacing: -1px;


   text-decoration: none;


   text-transform: lowercase;


   text-shadow: 2px 2px 2px rgba(0,0,0,.3);


   font-family: 'Abel', Tahoma;


   font-size: 21px;


   font-weight: normal;


   color: #FFFFFF;


}



#menu li {


   float: right;


   margin-left: 1px;


}



#menu a {


   display: block;


   float: right;


   height: 60px;


   margin: 0px;


   color: #FFFFFF;


}



#menu .current_page_item a {


   text-shadow: 2px 2px 2px rgba(0,0,0,.3);


   background: #174F65;


}



#menu a:hover {


   background: #174F65;


   text-decoration: none;


   text-shadow: 2px 2px 2px rgba(0,0,0,.3);


   color: #FFFFFF;


}



#menu span {


   padding: 0px 20px;


}



#menu > li {


}



#menu > li.active {


   background: #174F65;


   color: #FFFFFF;


}



.dropotron li.opener {


   border-left: solid 2px #FFFFFF;


}



.dropotron {


   margin: 0px;


   padding: 10px 0px;


   background: #42859F;


   list-style: none;


   text-transform: lowercase;


   font-family: 'Abel', Tahoma;


   font-size: 16px;


   font-weight: normal;


   color: #FFFFFF;


}



.dropotron a {


   color: #fff;


   text-decoration: none;


}



.dropotron li {


   margin: 0px;


   padding: 5px 20px;


}



.dropotron li:hover, .dropotron li.active {


   background: #174F65;


}



/* Page */



#page {


   width: 980px;


   margin: 30px auto 0px auto;


   padding: 0px 0px 0px 0px;


   background: url(http://templaty.com/examples/web-templates/combinations/images/content-wrapper-bg.png) repeat;


}



/* Content */



#content {


   float: left;


   width: 650px;


}



#content .contentbg {


   width: 590px;


   padding: 10px 30px 0px 30px;


}



.post {


   clear: both;


   padding-bottom: 10px;


   border-bottom: 1px solid #000000;


}



.post .title {


   padding-top: 10px;


   letter-spacing: -4px;


   text-transform: lowercase;


   font-size: 50px;


   color: #42859F;


}



.post .title a {


   border: none;


   color: #42859F;


}



.post .meta {


   padding-bottom: 10px;


   text-align: right;


   font-size: 11px;


   font-style: italic;


}



.post .meta a {


}



.post .entry {


   text-align: justify;


   margin-bottom: 25px;


   padding: 10px 0px 0px 0px;


}



.links {


   display: block;


   width: 96px;


   padding: 2px 0px 2px 0px;


   background: #A53602;


   text-align: center;


   text-transform: uppercase;


   font-size: 10px;


   color: #FFFFFF;


}



/* Sidebar */



#sidebar-bg {


   float: right;


   width: 330px;


}



#sidebar {


   overflow: hidden;


   width: 270px;


   padding: 30px 30px 20px 30px;


}



#sidebar ul {


   margin: 0;


   padding: 0;


   list-style: none;


}



#sidebar li {


   margin: 0;


   padding: 0;


}



#sidebar li ul {


   margin: 0px 0px;


   padding-bottom: 30px;


}



#sidebar li li {


   line-height: 35px;


}



#sidebar li li span {


   display: block;


   margin-top: -20px;


   padding: 0;


   font-size: 11px;


   font-style: italic;


}



#sidebar h2 {


   height: 38px;


   margin-bottom: 20px;


   padding: 12px 0 0 0px;


   border-bottom: 1px solid #000000;


   letter-spacing: -2px;


   font-size: 30px;


   color: #42859F;


}



#sidebar p {


   margin: 0 0px;


   padding: 0px 20px 20px 20px;


   text-align: justify;


}



#sidebar a {


   border: none;


}



#sidebar a:hover {


   text-decoration: underline;


}



/* Calendar */



#calendar {


}



#calendar_wrap {


   padding: 20px;


}



#calendar table {


   width: 100%;


}



#calendar tbody td {


   text-align: center;


}



#calendar #next {


   text-align: right;


}



/* Footer */



#footer {


   height: 100px;


}



#footer p {


   margin: 0;


   padding-top: 18px;


   line-height: normal;


   text-align: center;


   text-transform: lowercase;


   font-family: 'Abel', Tahoma;


   font-size: 13px;


   color: #76716C;


}



#footer a {


   text-decoration: underline;


}



#slider {


   position: relative;


   width: 590px;


   margin: 0px auto 20px auto;


}



#slider .viewer {


   width: 590px;


   height: 300px;


   overflow: hidden;


   margin: 0 auto;


}



#slider .viewer .reel {


   display: none;


   height: 300px;


}



#slider .viewer .reel .slide {


   position: relative;


   width: 590px;


   height: 300px;


}



#splash {


   width: 980px;


   margin: 30px auto 30px auto;


}



#slider {


   position: relative;


   margin: 0px auto;


   width: 1000px;


   height: 350px;


}



#slider .button {


   display: inline-block;


   color: #ffffff;


   text-align: center;


   line-height: 50px;


   height: 50px;


   text-decoration: none;


   outline: 0;


   border-radius: 8px;


   font-size: 3em;


}



#slider .button:hover {


}



#slider .viewer {


   width: 900px;


   height: 350px;


   margin: 0px auto;


   overflow: hidden;


}



#slider .viewer .reel {


   display: none;


   height: 375px;


}



#slider .viewer .reel .slide {


   position: relative;


   width: 900px;


   height: 375px;


   margin: 0px auto;


}



#slider .viewer .reel h2 {


   position: absolute;


   top: 180px;


   right: 0;


   width: 900px;


   height: 80px;


   line-height: 80px;


   background: #111111;


   text-align: center;


   opacity: 0.85;


   font-weight: normal;


   color: #ffffff;


   font-size: 2.25em;


}



#slider .viewer .reel p {


   position: absolute;


   top: 260px;


   right: 0;


   width: 900px;


   height: 40px;


   line-height: 40px;


   background: #0074C6;


   text-align: center;


   opacity: 0.85;


   font-weight: normal;


   color: #ffffff;


   font-size: 1.1em;


}



#slider .previous-button {


   position: absolute;


   top: 180px;


   right: 0;


   width: 50px;


}



#slider .next-button {


   position: absolute;


   top: 180px;


   left: 0;


   width: 50px;


}



#slider .indicator {


   margin: 30px auto 0 auto;


}



#slider .indicator ul {


   list-style: none;


   padding: 0;


   margin: 0;


   text-align: center;


}



#slider .indicator ul li {


   display: inline-block;


   width: 12px;


   height: 12px;


   text-indent: -9999em;


   background: #c8c8c8;


   margin: 0 2px 0 2px;


   border-radius: 8px;


   border-bottom: solid 1px #ffffff;


   border-top: solid 1px #909090;


}



#slider .indicator ul li.active {


   background: #505050;


   border-top: solid 1px #505050;


}


</style>


<script
 type="text/javascript"
src="http://templaty.com/examples/web-templates/combinations/jquery-1.7.1.min.js"></script>


<script
 type="text/javascript"
src="http://templaty.com/examples/web-templates/combinations/jquery.dropotron-1.0.js"></script>


<script
 type="text/javascript"
src="http://templaty.com/examples/web-templates/combinations/jquery.slidertron-1.0.js"></script>


</head>


<body>


<div id="wrapper">


   <div id="header-wrapper">


      <div id="header">


         <div id="logo">


            <h1><a href="#">اسم موقعك ياجميل</a></h1>


            <p>اكتب شىء عن موقعك ياغالى</p>


         </div>


      </div>


      <div id="menu-wrapper">


         <ul id="menu">


            <li class="current_page_item"><a href="/forum"><span>الرئيسية</span></a></li>


            <li><span>


قريبـــــا ></span>


               <ul>


                  <li class="first"> <a href="#">قريبـــــا</a> </li>


                  <li> <a href="s#">قريبـــــا</a> </li>


                  <li class="last"> <a href="###">قريبـــــا</a> </li>


<li class="last"> <a href="#">قريبـــــا</a> </li>


               </ul>


            </li>


 
           <li><a
href="#"><span>قريبـــا</span></a></li><a
href="#"><span>قريبـــا</span></a></li>


            <li><span>قريبــــا ></span>


               <ul>


                  <li class="first"> <a href="#">قريبـــا</a> </li>


                  <li> <a href="#">قريبــا</a> </li>


                  <li class="last"> <a href="#">قريبـــا</a> </li>


<li class="last"> <a href="#">قريبـــا</a> </li>         


      </ul>


<li><a href="/register"><span>التسجيل</span></a></li>


         </ul>


         <script type="text/javascript">


         $('#menu').dropotron();


      </script>


      </div>


      <!-- end #menu -->


      <div id="banner">


 
        <div id="slider"> <a href="#" class="button
previous-button"><</a> <a href="#" class="button
next-button">></a>


            <div class="viewer">


               <div class="reel">


                  <div class="slide">


                     <h2>السليدر الاول</h2>


                     <p>يمكنك وضع نص هنا لوصف السليدر أو لكتابة ماتريد في هذا المكان.</p>


 
                    <a class="link" href="http://4egy.ney">أكمل
القراءة ...</a><img
src="http://i34.servimg.com/u/f34/15/04/02/38/22161911.gif" width="900"
height="350" alt="" /></div>


                  <div class="slide">


                     <h2>السليدر الثانى</h2>


                     <p>يمكنك وضع نص هنا لوصف السليدر أو لكتابة ماتريد في هذا المكان.</p>


 
                    <a class="link" href="http://4egy.net">أكملة
القراءة ...</a><img
src="http://i34.servimg.com/u/f34/15/04/02/38/95583011.gif" width="900"
height="350" alt="" /></div>


               </div>


            </div>


            <div class="indicator">


               <ul>


                  <li class="active">1</li>


                  <li>2</li>


               </ul>


            </div>


         </div>


         <script type="text/javascript">


            $('#slider').slidertron({


               viewerSelector: '.viewer',


               reelSelector: '.viewer .reel',


               slidesSelector: '.viewer .reel .slide',


               advanceDelay: 3000,


               speed: 'slow',


               navPreviousSelector: '.previous-button',


               navNextSelector: '.next-button',


               indicatorSelector: '.indicator ul li',


               slideLinkSelector: '.link'


            });


         </script>


      </div>


   </div>


   <!-- end #header -->


   <div id="page">


      <div id="content">


         <div class="contentbg">


            <div class="post">


 
              <h2 class="title"><a
href="http://www.a7la-7ekaya.com/">مرحباً بك في موقع احلى
حكايه</a></h2>


               <p class="meta">أضيف بواسطةالمدبرفي مايو 17, 2012


                  </p>


               <div class="entry">


                  <p>  هذا المدخل من تحويل وتعديل خادم الاسلام ولا نحلل حزف الحقوق </p>


 
                 <p>هذا النص هنا تجريبي فقط , يمكنك تحريره و
تغييره لما تريد , هذا النص هنا تجريبي فقط , يمكنك تحريره و تغييره لما
تريد , هذا النص هنا تجريبي فقط , يمكنك تحريره و تغييره لما تريد , هذا
النص هنا تجريبي فقط , يمكنك تحريره و تغييره لما تريد.</p>


               </div>


            </div>


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


         </div>


      </div>


      <div id="sidebar-bg">


         <div id="sidebar">


</div>


            <ul>


               <li>


                  <h2>عنوان الروابط الهامه</h2>


                  <ul>


                     <li><a href="#">روابط هامه هنا</a></li>


                     <li><a href="#">روابط هامه هنا</a></li>


                     <li><a href="#">روابط هامه هنا</a></li>


                     <li><a href="#">روابط هامه هنا</a></li>


                     <li><a href="#">روابط هامه هنا</a></li>


                     <li><a href="#">روابط هامه هنا</a></li>


                     <li><a href="#">روابط هامه هنا</a></li>


                     <li><a href="#">روابط هامه هنا</a></li>


                     <li><a href="#">روابط هامه هنا</a></li>


                     <li><a href="#">روابط هامه هنا</a></li>


                  </ul>


               </li>


            </ul>


         </div>


      </div>


      <!-- end #sidebar -->


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


   </div>


   <!-- end #page -->


</div>


<div id="footer">


   <p>


<a
 href="http://www.ahlamontada.com"><img
src="http://2img.net/i/fa/empty.gif" alt="منتدى مجاني"
title="ahlamontada.com" /></a>


</p>


</div><!-- #footer menu --><div id="top_line_copyrights">


تصميم وتطوير


<a href="http://a7la-7ekaya.yoo7.com" target="_blank"> الفارس الملث</a>


</div><!-- #topline copy rights --><div id="mtwer_copy_rights">


      <!-- end #content -->


<!-- end #footer -->


</body>


</html>




اما طريقة  التركيب






لوحة الاداره





عناصر إضافية





HTML و JAVASCRIPT





إدارة صفحات ال HTML





تعديل صفحة ال HTML





ومبروووووك عليك الكود








واذا واجهتك اي مشكلة اناموضوج




الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.freely.mam9.com
واحد
‎عضو ‎نشـيط
‎عضو ‎نشـيط
avatar


ذكر
عدد المساهمات : 4716
نقاط نشاط : 4757
السٌّمعَة : 2

مدخل جميل جدا لعرض الصور Empty
مُساهمةموضوع: _da3m_14   مدخل جميل جدا لعرض الصور Emptyالإثنين أغسطس 19, 2013 5:33 pm

موضوع رائع بوركت
مدخل جميل جدا لعرض الصور 4
مدخل جميل جدا لعرض الصور 128711691410
الرجوع الى أعلى الصفحة اذهب الى الأسفل
M!do Lado
‎ادارة المنتـدي
‎ادارة المنتـدي
M!do Lado


ذكر
الدولة : Khartoum, Sudan
عدد المساهمات : 2373
نقاط نشاط : 4288
السٌّمعَة : 147
العمر : 26

مدخل جميل جدا لعرض الصور Empty
مُساهمةموضوع: رد: مدخل جميل جدا لعرض الصور   مدخل جميل جدا لعرض الصور Emptyالإثنين يناير 20, 2014 7:10 pm

موضــوع جمیــل جدا ...
بورکــت ...
تقبـل مروری ...
وشکــرا ...
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.ebda3pub.com
 
مدخل جميل جدا لعرض الصور
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات التطوير و الاشهار :: الاستايلات و البوبات :: البوابات و المداخل الجاهزة-
انتقل الى: