Smf Destek

Smf Tema ve Destek Sitesi

*Seksen küsur sene manevî ve bâki bir ömrü kazandırmak sırrını taşıyan ŞUHUR-U SELÂSENİZİ*

 *_ve LEYLE-İ REGAİBİNİZİ bütün ruhumla tebrik ediyorum._*

Kastamonu - 250

Resul-i Ekrem Efendimiz dualarında:
"Allah'ım! Receb'i ve Şâban'ı hakkımızda hayırlı ve mübarek kıl, bizi Ramazan'a ulaştır." buyururlardı. (Camiü's-sağir, 2/90)

Üç aylara girmiş bulunuyoruz.Rabbim Üç ayları hakkımızda hayırlı etsin.

[Konusal]Smf Destek Ekibi

Daha önce javascript ile kullanılan lazy mantığı daha sonra tarayıcı mantığına dönüştü bu sayede gösterilmek istenilen resimlerin sayfa açılır açılmaz değilde, tarayıcı ile ekranda gözükmesi dahilinde Resim yüklenmekte.
 
 Bu sayede sitenizin daha hızlı sayfa açılışları demek oluyor.

Örnek : img kısmına loading="lazy"  eklerseniz resimler artık ekranda görünecek kısma gelince yüklenir.Smf 2.1 sürümünde gelmiş olan mantığı biz Subs.php ile 2.0.18 ekleyelim.

Yapmanız gereken Subs.php de 1266 satırda veya altıdaki kodu arayarak :
Bulun:
'content' => '<img src="$1" alt="{alt}"{width}{height} class="bbc_img resized" />',Değiştirin:
'content' => '<img src="$1" alt="{alt}"{width}{height} class="bbc_img resized" loading="lazy" />',
ve 1280 satırda Resimlerin resize yapılmayanlar için;
Bulun:
'content' => '<img src="$1" alt="" class="bbc_img" />',Değiştirin
'content' => '<img src="$1" alt="" class="bbc_img" loading="lazy" />',
Yapmanız.

Konuyu anlamak için :
https://storage.googleapis.com/web-dev-assets/native-lazy-loading/lazyload.mp4

http://fav.me/ddikm7k
http://fav.me/ddikm8j
Önizleme (kısa süreliğine) : www.islamvakti.com

Hudhud Teması özellikleri :
GetUikit front-end kısmında hazır sistem olarak : Uikit Github kullanıldı.
- Kendine özgü Portal sistemi mevcut
- Url?action=kategori;c=1  özel kategori bölümü mevcut Her bölüm için son 5 konuları listeler
- Sidebar bölümü mevcut kapanıp açılabiliyor. Session ile akılda tutup devamlı cevap veriyor.
- Hızlı konu aç özelliği var Sonnokta alınma üzerine Ajax ile veri yollama özelliği eklendi.
Ve daha fazlası.
 
 - Teşekkürler SMF

Neyebakmistiniz Smf 2.1 geliştirildi.

- Css3 ile kodlandı.
- Sass ile hızlıca css düzenleyebilirsiniz.Css klasöründe kendisini görüceksiniz.Sass yüklemek ve anlamak için : http://sass-lang.com/install
- Mobil için uyumludur.
- Kendine özgü konu profil alanı mevcutdur.

download http://smf.konusal.com/index.php?action=tema;sa=view;down=50

Daha hızlı kullanılması amacıyla bu hale geldi.Sass ile ilgili yükleme ve daha fazla bilgi için : http://sass-lang.com/install 
K.gelsin

.dropmenu {
position: relative;
box-sizing: border-box;
.generic_icons, img {
/* This is a small fix for dropmenu icons */
margin: -3px 8px 0 0;
vertical-align: middle;
}
li{
/* Level 1 button background. */
display: inline-block;
margin: 0 2px 0 1px;
padding: 0 0 0.3em 0;
font-size: 0.9em;
line-height: 1.9em;
strong {color: #333;}
&:hover ul {
/* Reposition Level 2 submenu as visible on hover. */
display: block;
}
/* Needed for new PM notifications. */
.active .amt{background: none;color: inherit;}
a {
padding: 0 7px 0 7px;
margin: 0;
display: block;
border: 1px solid transparent;
border-radius: 4px;
&.active {
/* Level 1 active button. */
background: orange;
color: #fff;
font-weight: bold;
border: 1px solid #f49a3a;
box-shadow: 0 5px 5px rgba(255,255,255,0.2) inset;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
}
a:hover, &:hover a, a:focus {
/* Level 1 hover effects. */
background: #597b9f;
border: 1px solid #4a6b8c;
color: #fff;
cursor: pointer;
text-decoration: none;
box-shadow: 0 4px 4px rgba(255,255,255,0.1) inset;
text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);
}
a.active:hover, &:hover a.active {
/* Level 1 active button. */
background: orange;
border: 1px solid #f49a3a;
color: #444;
box-shadow: 0 5px 5px rgba(255,255,255,0.2) inset;
text-shadow: none;
}
ul {
/* Levels 2 and 3 submenu wrapper. */
z-index: 90;
position: absolute;
display: none;
width: 18.2em;
padding: 0.5em;
font-weight: normal;
border: solid 1px #999;
border-left: solid 1px #bbb;
border-top: solid 1px #ccc;
border-radius: 4px;
box-shadow: 3px 3px 4px rgba(0,0,0,0.3);
background: #FFFFFF;
ul{
/* Level 3 submenu wrapper positioning. */
margin: -2em 0 0 15.3em;
}
}
li {
/* Level 2 link background. */
margin: 0;
padding: 0;
width: 17em;
font-size: 1em;
border-radius: 3px;
border: 1px solid transparent;
&:hover ul, ul {
/* Reposition as visible on hover. */
left: -14px;
}
&:hover{border:none;}
a>img {
vertical-align: middle;
}
&:hover, a:focus, a:hover{
color: #333;
text-decoration: none;
border: 1px solid #cfcfcf;
border-top: 1px solid #d4dee6;
}
/* Level 3 maintains font-size the same as Level 2. */
li {
a {
font-size: 1em;
}
}
&.subsections > a::after {
position: absolute;
padding: 5px 0;
right: 10px;
font: 83.33%/150% Arial, sans-serif;
content: '\25ba';
}
a.chosen {
font-weight: bold;
}
}
&:hover li a, li a {
/* Necessary to allow highlighting of 1st level while hovering over submenu. */
background: none;
padding: 0 9px;
color: #346;
border: none;
line-height: 2.2em;
}
&:hover ul ul, ul ul, &:hover ul ul ul, ul ul ul {
/* Hiding Level 3 submenu off hover. */
left: -9999px;
}
ul, li:hover,li:hover>a,li a:focus,li a:hover {
background: #FFFFFF; /* fallback for some browsers */
background-image: linear-gradient(to bottom, #E2E9F3 0%, #FFFFFF 70%);
}
}
ul{
a:focus,ul a:focus{
/* Note: The next declarations are for keyboard access with js disabled. */
margin-left: 9990px;
border: none;
width: 17em;
}
ul{
a:focus {
margin-left: 19950px;
}
}
li{
&:hover a:focus, a:focus{
/* Cancel those for hover and/or js access. */
margin-left: 0;
width: auto;
}
}

}
}

Download modu üzerine resim eklem demo link ekleme vb.. düzenlenerek Tema ekleme sistemi oluşturuldu.

Smf 2.1 ile çalışırır.

Demo : http://smf.konusal.com/index.php?action=tema

Github : https://github.com/CeeMoo/smf-tema-system.git

Github Modu indirip kurabilirsiniz.Eksik vb.. bildirirseniz sevinirim.Şuan kullanılabilir durumdadır.


Özellikleri :

+ Eklediğiniz tema otomatik olarak siteadresi.com/demo  link otomatik şekilde oluşur ve sıralanır.Demo link eklenmediyse etkilenmez.
+ Tema önizlemesi yüklerken admin panelinden belirttiğiniz width&height aşılırsa otomatik olarak keser ve resmin en iyi yeri yakalanmaya çalışılır.
+ kategori izinlerinden istemediğiniz gruplara tema indirimi kapatabilirsiniz ve ücetli üyelik alanına yönlendirme şeklinde uyarı verir.

Sorunlar ve Giderilme şekli :
 - Türkçe karakter hatası vb.. alırsanız Db'nizin utf8-general_ci olmasına dikkat edin yoksa sıkıntı yaşarsınız.

Download System devşirme sıfırdan yazmayı planladım ama böyle daha iyi oldu mu bilemicem bazen sıfırdan yazsam daha iyi gibime geldi abi güvenlik eksikleri yok gözüme takılmadı hata eksik açık vs.. github veya bu konu altından belirtebilirsiniz.

Download System Copyright kaldırmadım değişiklikler tabikide yapıldı ama isterseniz kaldırabilirsiniz.Biz kaldırmıcaz çok fazla katkı yaptıkdan sonra olabilir.

[attach name=Screenshot-2017-10-23+My+Community+-+Temalar.png type=image/png]1262[/attach]

SnrjAero - 2.0.14

- Kendine özgü görünüm
- Duyarlı Tema - Telefon&Tablet
- Ve daha nice özellikler.

Tema Ücretlidir bilgi için özel mesaj atınız

Demo : http://snrj.konusal.com/index.php?theme=14

HuuPortal - ssi portal - responsive - uikit framework

Smf 2.1 geliştirildi.
Uikit yararlanıldı : http://getuikit.com/
Mobil uyumludur.


Demo link'i fazla kalmaz Resim önceliğimizdir.
Demo : http://smf.konusal.com/portal.php
Demo resim



Bir arkadaş paylaşımı istedi diye paylaşıldı.Yok şu nasıl yapılır bu nasıl eklenir gibi böyle geniş çaplı şeyler istemeyelim.Diğer türlü her soruya cevap vermeye çalışırım.Portal ile ilgili minik ipucuları altda tek tek yazmaya çalıştım.Başka sıkıntılar varsa konuya çekinmeden yazabilirsiniz.İyi Çalışmalar

Huuportal İndir : http://smf.konusal.com/index.php?action=downloads;sa=view;down=107

Ekteki dosyaları smf ana dizinine yükleyin daha sonra smf.konusal.com/portal.php gibi çağırabilirsiniz.

Portaldaki logo kullandığınız temanın logosunu çeker tabi ki Kullanılan Tema ayarlarında logo url girmiş olmanız gerekir.


funtion.php :
Son gönderilerin limiti : $num_recent = 12
En çok mesaj yazanların limiti : $topNumber = 5
En çok konu barındıran kategoriler : $num_top = 8
En çok cevap almış konu limiti : $num_topics = 10


Temalar.php  $boards=array(45,46,47); istediğiniz gibi kategorilerinizi ekliyebilirsiniz.$sayfada = 8; istediğiniz gibi sayfada kaç tane gönderi gözükmesini isterseniz 8 değiştirin.


Temalar ve Deneme link'ini mobil menüde düzenlemek için theme/function.php Satır 80 : portal_menumobil  hemen içinde istediğiniz gibi düzenliyebilirsiniz.


menüye buton olarak eklemeyi bilmeyen arkadaşlar alttaki şekilde ekleyebilir

Sources/Subs.php de bulun
     $buttons = array(
         'home' => array(
            'title' => $txt['home'],
            'href' => $scripturl,
            'show' => true,
            'sub_buttons' => array(
            ),
         ),Altına Ekle
'Portal' => array(
            'title' => 'Portal',
            'href' => 'http://smf.konusal.com/portal.php',
            'show' => true,
            'sub_buttons' => array(
            ),
         ),

NChat sisteminiz varsa anasayfa.php //require_once($boarddir."/NChat/NChatBoardIndex.php"); // ları kaldırarak çağırabilirsiniz.Kullanmıyorsanız vericeğim direk kodu silin :
<?php if ($context['user']['is_logged']){ ?>
 <ul uk-accordion="multiple: true">
    <li class="uk-open">
        <h3 class="uk-accordion-title">Sohbet Alanı</h3>
        <div class="uk-accordion-content">
 <?php 
 //require_once($boarddir."/NChat/NChatBoardIndex.php");
 ?>
        </div>
    </li>
 </ul>
 <?php } ?>
Sayfalama mantığı direk sayfa.php çalışıyor.Örnek : takimlar gibi bir bölüm olsun o zaman sayfa.php altdaki gibi olucak.
<?php 

if(empty($_GET['sayfa'])){
 $page = false;
}else{
 if($_GET['sayfa'] == 'temalar'){
 require_once('temalar.php');
 }elseif($_GET['sayfa'] == 'deneme'){
 require_once('deneme.php');
 }elseif($_GET['sayfa'] == 'takimlar'){
 require_once('takimlar.php');
 }else{
 echo 'Hata böyle bir sayfa yok';
 }
}

?>takimlar.php oluşturmayı unutmayın.



Huuportal İndir : http://smf.konusal.com/index.php?action=downloads;sa=view;down=107

-Tablet ve Telefon Duyarlı - yani 2'sinden biri ile giriş yapılınca siteye ona göre düzene geçer.
-Bootstrap kullanıldı. getbootstrap.com giderek tab sistemlerini grid sistemlerini ve daha nice kodları sitenizde kullanabilirsiniz.
-Html5&Css3 - gelişmekte olan teknolojiyi takip eder.
ve daha nice özellikler.

Demo : http://snrj.konusal.com/index.php?theme=13

download : http://smf.konusal.com/index.php?action=tema;sa=view;down=54

KURBAN BAYRAMI'NIN ÜMMETİN BİRLİĞİNE, MAZLUM VE MAĞDURLARIN KURTULUŞUNA, İNSANLIĞIN, BARIŞ VE HİDAYETİNE VESİLE OLMASI DUASIYLA.

NİCE TAKVALI BAYRAMLARA

• Smf 2.0.14 üzerinde geliştirildi
• Tablet ve Mobil cihaz ile uyumlu.
• Fontawesome kullanıldı.http://fontawesome.io/icons/ istediğiniz gibi icon seçebilirsiniz.
• Css3 yararlanıldı.
• Sağ panel açılır kapanır
• Ve dahası....

download http://smf.konusal.com/index.php?action=tema;sa=view;down=51

Tema özellikleri

• Smf 2.1 Beta 3 üzerinde geliştirildi.
• Css3 ve Html5
• Responsive yani telefon/tablet için duyarlıdır
• Özel 5li gönderi - Anasayfada belirttiğiniz bölümlerden son gönderileri gösterir
• Özel Son gönderi - Belirtilen sayı kadar son konuları gösterir
• Ve dahası....dahası....

Wmci tema

Download : http://smf.konusal.com/index.php?action=tema;sa=view;down=53

• Smf 2.0.14 uyumlu
• Css3 ile kodlandı
• Mobil uyumluluk
• Fontawesome
• Mobil menu
• Özel Konu gösterim alanı

Not: Alıcağınız tema bu olucaktır. Değişiklik vb.. işlemler uygulanmaz.Tema ile ilgili hataları konu altında belirtebilirsiniz.

Kirkirik Tema 2.0.14 için yapılmıştır.

Html5 , Mobil uyumlu ve daha fazlası....

download http://smf.konusal.com/index.php?action=tema;sa=view;down=52

Sitemiz host kaynaklı index yemiştir.Bu host'a bağlı tüm domainlerde gerçekleşmiş ve ne Wordpress nede SMF ile alakası yoktur.

İndexden kasıt sadece index.html bir döküman atılmıştır.Sitelerimizde kişisel bilgi ve birikimlerinizi saklamayınız.Biz söz versek bile host ile giriş yapılabilmektedir.

Bir daha yaşanır yaşanmaz bilemicem Herkese İyi Çalışmalar

2.1 beta 3 şuanlık bir tema yükleme hatası var.Aşmak için önce kopya bir tema oluşturun "xenxen" adında daha sonra download ettiğiniz dosyayı atmanız yeterli olucaktır.
Download : http://smf.konusal.com/index.php?action=tema;sa=view;down=20

Otomatik olarak Smf belirtilen bölümlerde İlk resmi çekicek şekilde kapak slider olarak.

flimslider(); olarak index.template.php kullanın

index.template.php açın öncesine ?>  ekle
function flimslider() {

    echo '
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$.fn.infiniteCarousel = function () {
    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
 
    return this.each(function () {
        var $wrapper = $(\'> div\', this).css(\'overflow\', \'hidden\'),
            $slider = $wrapper.find(\'> ul\'),
            $items = $slider.find(\'> li\'),
            $single = $items.filter(\':first\'),
           
            singleWidth = $single.outerWidth(),
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn\'t include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);           

            if (($items.length % visible) != 0) {
            $slider.append(repeat(\'<li class="empty" />\', visible - ($items.length % visible)));
            $items = $slider.find(\'> li\');
        }

        $items.filter(\':first\').before($items.slice(- visible).clone().addClass(\'cloned\'));
        $items.filter(\':last\').after($items.slice(0, visible).clone().addClass(\'cloned\'));
        $items = $slider.find(\'> li\');
       
        $wrapper.scrollLeft(singleWidth * visible);
       
            function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
           
            $wrapper.filter(\':not(:animated)\').animate({
                scrollLeft : \'+=\' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                }
                currentPage = page;
            });                         
            return false;
        }
       
        $wrapper.after(\'<a class="icon-angle-left"></a><a class="icon-angle-right"></a>\');
       
          $(\'a.icon-angle-left\', this).click(function () {
            return gotoPage(currentPage - 1);               
        });
       
        $(\'a.icon-angle-right\', this).click(function () {
            return gotoPage(currentPage + 1);
        });
       
        $(this).bind(\'goto\', function (event, page) {
            gotoPage(page);
        });
    }); 
};
$(document).ready(function () {
  $(\'.infiniteCarousel\').infiniteCarousel();
});
//]]>
</script>';


 global $smcFunc, $scripturl, $settings, $options, $txt ,$context, $modSettings;

$boards = array(1,2);

$request = $smcFunc['db_query']('', '
  SELECT t.id_topic, m.subject, m.body
  FROM {db_prefix}topics AS t
     INNER JOIN {db_prefix}messages AS m ON (m.id_msg = t.id_first_msg)
  WHERE t.id_board IN ({array_int:boards})
  ORDER BY t.id_topic DESC
       LIMIT {int:limit}',
  array(
    'boards' => $boards,
               'limit' => 50,
  )
);
$topics = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
  $topics[] = array(
     'id_topic' => $row['id_topic'],
     'subject' => $row['subject'],
     'first_image'  => preg_match_all('~\[img.*?\]([^\]]+)\[\/img\]~i', $row['body'],  $images) ? '<img src="' . $images[1][0] . '" alt="' .  $row['subject'] . '" height="145" width="102"/>      ' : '',
  );
$smcFunc['db_free_result']($request);

     echo '
    <div id="caja-carrusel">
<div class="infiniteCarousel">
<div class="wrapper" style="overflow-x: hidden; overflow-y: hidden; ">
<ul>
     
                   ';
foreach ($topics as $topic)
  echo '
                       
     
<li><a  href="', $scripturl, '?topic=', $topic['id_topic'], '.0">',  $topic['first_image'], ' </a></li>

                      ';
echo '
                 
   </ul>
</div>
</div></div>';
}bunuda index.css ekleyin
.infiniteCarousel{width:1015px;position:relative;height:170px;margin:0px;}
.infiniteCarousel .wrapper{width:985px;overflow:auto;height:160px;margin:0 0px 0 0px;position:absolute;top:3px;background:#202020;border-radius:6px;}
.infiniteCarousel ul a img{border:1px solid #CCC;padding:0;-webkit-box-shadow:1px 1px 8px #777;-moz-box-shadow:1px 1px 8px #777;box-shadow:1px 1px 8px #777;width:100px;height:140px;}
.infiniteCarousel .wrapper ul{width:9999px;list-style:none;margin:0;padding:0;position:absolute;top:0;}
.infiniteCarousel ul li{display:block;float:left;padding:9px 5px;height:142px;width:99px;}
.infiniteCarousel ul li a img{display:block;color:#000;}
.infiniteCarousel .icon-angle-right{right:-11px;font-size:60px;top:67px;position:absolute;cursor:pointer;}
.infiniteCarousel .icon-angle-left{left:-41px;font-size:60px;top:67px;position:absolute;cursor:pointer;}Bu kadar.
flimslider(); ile istediğiniz yerde kullanabilirsiniz.$boards = array(1,2); 1,2 bölüm idlerini eklemeyi unutmayın.
index.template.php bul
global $context, $settings, $options, $scripturl, $txt, $modSettings;altına ekle
flimslider();Resimli demo

---

Sade HTML olarak buyrun.


indirmek için:
http://yadi.sk/d/FhY6erU1DyrD6
<style type='text/css'>
body {
 background-color: #F1F1F1;
 margin:0;
 color:#333;
 font:normal normal 13px/1.5 "Open Sans","Segoe UI","Helvetica Neue",Arial,Sans-Serif;
 font-size:13px;
}
a:hover {color:#c0392b;}
.infiniteCarousel{width:900px;position:relative;height:170px;margin:0 0 0 10px;}
.infiniteCarousel .wrapper{width:845px;overflow:auto;height:170px;margin:0 25px 0 25px;position:absolute;top:0;}
.infiniteCarousel ul a img{border:1px solid #CCC;padding:0;-webkit-box-shadow:1px 1px 8px #777;-moz-box-shadow:1px 1px 8px #777;box-shadow:1px 1px 8px #777;width:100px;height:140px;}
.infiniteCarousel .wrapper ul{width:9999px;list-style:none;margin:0;padding:0;position:absolute;top:0;}
.infiniteCarousel ul li{display:block;float:left;padding:9px;height:142px;width:102px;}
.infiniteCarousel ul li a img{display:block;color:#000;}
.infiniteCarousel .icon-angle-right{right:-5px;font-size:60px;top:27px;position:absolute;cursor:pointer;}
.infiniteCarousel .icon-angle-left{left:-10px;font-size:60px;top:27px;position:absolute;cursor:pointer;}
.pager-home{display:inline;}
.icon-angle-left:before {
    content: "<";
}
.icon-angle-right:before {
    content: ">";
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$.fn.infiniteCarousel = function () {
    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
 
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
           
            singleWidth = $single.outerWidth(),
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);           

            if (($items.length % visible) != 0) {
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
            $items = $slider.find('> li');
        }

        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li');
       
        $wrapper.scrollLeft(singleWidth * visible);
       
            function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
           
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 500, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                }
                currentPage = page;
            });                         
            return false;
        }
       
        $wrapper.after('<a class="icon-angle-left"></a><a class="icon-angle-right"></a>');
       
          $('a.icon-angle-left', this).click(function () {
            return gotoPage(currentPage - 1);               
        });
       
        $('a.icon-angle-right', this).click(function () {
            return gotoPage(currentPage + 1);
        });
       
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    }); 
};
$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});
//]]>
</script>

<!-- Empieza la galería de imágenes del carrusel -->
<div id='caja-carrusel'>
<div class='infiniteCarousel'>
<div class='wrapper' style='overflow-x: hidden; overflow-y: hidden; '>
<ul>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/manga/3/55539.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/manga/2/51811.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/manga/2/4066.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/manga/2/24135.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/4/50361.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/4/9391.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/4/5123.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/9/9453.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/13/11460.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/11/33657.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/8/18170.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/13/52265.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/8/41125.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/8/18170.jpg' title='Lorum Ipsum'/></a></li>
<li><a href='#'><img alt='' src='http://cdn.myanimelist.net/images/anime/13/17405.jpg' title='Lorum Ipsum'/></a></li>
</ul>
</div>
</div></div>

resimli demo :


Demo : http://css3menu.com/flat-turquoise-vertical.html

.html dosyası oluşturarak bu kodu kopyalayın menuyu elde etmiş olucaksınız.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>

<link rel="stylesheet" href="http://css3menu.com/images/flat-turquoise-vertical/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>

</head>
<body>

<div class="menu_templ">
 
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<li class="topmenu"><a href="#" title="Home" style="width:154px;"><img src="http://css3menu.com/images/flat-turquoise-vertical/001.png" alt=""/>Home</a></li>
<li class="topmenu"><a href="#" title="Product info" style="width:154px;"><span><img src="http://css3menu.com/images/flat-turquoise-vertical/010.png" alt=""/>Product info</span></a>
<ul>
<li><a href="#" title="Features"><img src="http://css3menu.com/images/flat-turquoise-vertical/029.png" alt=""/>Features</a></li>
<li><a href="#" title="Installation"><span><img src="http://css3menu.com/images/flat-turquoise-vertical/026.png" alt=""/>Installation</span></a>
<ul>
<li><a href="#" title="Description of files"><img src="http://css3menu.com/images/flat-turquoise-vertical/0021.png" alt=""/>Description of files</a></li>
<li><a href="#" title="How to setup"><img src="http://css3menu.com/images/flat-turquoise-vertical/038.png" alt=""/>How to setup</a></li>
</ul></li>
<li><a href="#" title="Parameters info"><img src="http://css3menu.com/images/flat-turquoise-vertical/025.png" alt=""/>Parameters info</a></li>
<li><a href="#" title="Supported browsers"><span><img src="http://css3menu.com/images/flat-turquoise-vertical/033.png" alt=""/>Supported browsers</span></a>
<ul>
<li><a href="#" title="Firefox"><img src="http://css3menu.com/images/flat-turquoise-vertical/016.png" alt=""/>Firefox</a></li>
<li><a href="#" title="Internet Explorer"><img src="http://css3menu.com/images/flat-turquoise-vertical/0161.png" alt=""/>Internet Explorer</a></li>
<li><a href="#" title="Opera"><img src="http://css3menu.com/images/flat-turquoise-vertical/0162.png" alt=""/>Opera</a></li>
<li><a href="#" title="Safari"><img src="http://css3menu.com/images/flat-turquoise-vertical/0163.png" alt=""/>Safari</a></li>
<li><a href="#" title="Google Chrome"><img src="http://css3menu.com/images/flat-turquoise-vertical/0164.png" alt=""/>Google Chrome</a></li>
</ul></li>
<li><a href="#" title="CSS3 info"><img src="http://css3menu.com/images/flat-turquoise-vertical/018.png" alt=""/>CSS3 info</a></li>
</ul></li>
<li class="topmenu"><a href="#" title="Samples" style="width:154px;"><span><img src="http://css3menu.com/images/flat-turquoise-vertical/014.png" alt=""/>Samples</span></a>
<ul>
<li><a href="#" title="Android template"><img src="http://css3menu.com/images/flat-turquoise-vertical/0141.png" alt=""/>Android template</a></li>
<li><a href="#" title="Mac template"><img src="http://css3menu.com/images/flat-turquoise-vertical/0142.png" alt=""/>Mac template</a></li>
<li><a href="#" title="Mercury template"><span><img src="http://css3menu.com/images/flat-turquoise-vertical/0143.png" alt=""/>Mercury template</span></a>
<ul>
<li><a href="#" title="Blue theme">Blue theme</a></li>
<li><a href="#" title="Green theme">Green theme</a></li>
<li><a href="#" title="Lilac theme">Lilac theme</a></li>
<li><a href="#" title="Orange theme">Orange theme</a></li>
</ul></li>
<li><a href="#" title="Elegant template"><img src="http://css3menu.com/images/flat-turquoise-vertical/0144.png" alt=""/>Elegant template</a></li>
<li><a href="#" title="Point template"><span><img src="http://css3menu.com/images/flat-turquoise-vertical/0145.png" alt=""/>Point template</span></a>
<ul>
<li><a href="#" title="Aquamarine theme">Aquamarine theme</a></li>
<li><a href="#" title="Blue theme">Blue theme</a></li>
<li><a href="#" title="Green theme">Green theme</a></li>
<li><a href="#" title="Grey theme">Grey theme</a></li>
<li><a href="#" title="Orange theme">Orange theme</a></li>
<li><a href="#" title="Red theme">Red theme</a></li>
</ul></li>
<li><a href="#" title="Toolbars template"><img src="http://css3menu.com/images/flat-turquoise-vertical/0146.png" alt=""/>Toolbars template</a></li>
</ul></li>
<li class="topmenu"><a href="#" title="Download" style="width:154px;"><img src="http://css3menu.com/images/flat-turquoise-vertical/044.png" alt=""/>Download</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">CSS3 Menu Templates </a></p>
<!-- End css3menu.com BODY section -->


          <br><br><br><br>
          <br><br><br><br>



    </div>
</body>
</html>programla yapılmamıştır.Direk olarak alıntıdır.icon awesome ilede icon yerleştirmesi yapabilirsiniz size kalmış birşey.CSS kendi sitenize eklemek isterseniz url : http://css3menu.com/images/flat-turquoise-vertical/style.css
html olarak da dosya ekdedir.Eğer böyle menu ararsanız gog,yan,yaho gibi arama motorlarına verticalmenu , vertical js menu gibi aramalarda bulunabilirsiniz.Sağdan sola doğru istede rtlvertical.dir.K.Gelsin

Evet sadece anasayfada gözükücek şekilde sola bir blok atayalım ve ssi ekleyerek portal gibi geliştirmeleri sağlayalım.
öncelikle BoardIndex.template.php temamızda açalım yoksa defult temadan edinelim.
function template_main()
{
global $context, $settings, $options, $txt, $scripturl, $modSettings;
hemen sonrasına sol kısım için div atayalım.
   echo '
   <div id="sol">
   </div>';
daha sonra 
// Show some statistics if stat info is off.
üstüne ekle
   echo '
   <div id="sa">';
ekledikden sonra en alta inerek div kapayalım. ?> hemen öncesine.

echo '
</div>
<br class="clear" />';br clear atamamızın sebebi bu kısımdan sonra direk alt kısımdaki bozulmaları düzenliyecektir.bir set oluşturduk diyebiliriz.

Eveti bu şekilde sol blok oluşturduk.Şimdi bu işi biraz zenginleştirelim.

function oluşturarak ve ssi sistemimize ekleyerek herşeyi kendi lehimize yapıcaz.
(function php içinde bir dünyadır.sadece çağırılırlar yani {} kapattıkdan sonra artık içerdeki kodları kullanamazsınız sadece function içinde return yaparak function dışarda kullanım izni vermiş olursunuz.PHPr sitesinde php öğrenebilirsiniz.)

<?php hemen sonrasına  ekle
require("SSI.php");istediğiniz bir bölümün son konularını almak için
function sons(){

 echo '
 <div class="cat_bar">
<h3 class="catbg">
        Ses Dosyaları
</h3>
 </div>';
   $array = ssi_boardNews( 284, 10, null, 0, 'array');
   echo '
   <div class="windowbg" style="padding:5px 2px;">';
   foreach ($array as $news)
   {
      echo '
<ul>
      <li>
    <a href="', $news['href'], '">', $news['subject'], '</a>
  </li>
</ul>';
   }
   echo '
   </div>';
   
}Ses Dosyaları - değiştirmeyi unutmayın.284 = bölüm id , 10 = ne kadar gösterilcek.0 ise içinde gözükücek mesaj limitidr.ben ['body'] kaldırdığım için etkisiz eleman şuan 
şimdi funtion kullanma.func ismi sons() bu şekilde hemen şöyle bir değişiklik yaparak sol kısımda gösterilmesini sağlıyorum.


   echo '
   <div id="sol">';
sons();
   echo '
   </div>';
bu kadar şuan ben böyle kullanıyorum ssi kodları için sisteminizdeki ssi_examples.php , ssi_examples.shtml bakabilirsiniz. siteadresi/ssi_examples.php gibi.K.Gelsin.

Unutmadan  index.css bu css ekleyelim.

#sol{float:left;width:20.6%;margin:0px;}
#sa{float:right;width:79%;}
ul{padding:0;margin:0;}
li{list-style:none;}


Önemli not: Ne kadar bilirseniz işiniz o kadar kolay olur.CSS > HTML > PHP öğrenmenizi tavsiye ederim.Ben işlerimin kolaylığını firefox - firebug eklentisiyle hallediyorum.Mesela bir siteye girince F12 ile firebug açıyorum ve sistemi nasıl yapmışlar nereye ne atamışlar ne ne işe yarıyor.  K.Gelsin.