Bilgisayar » haber https://www.bilgisayar.me Wed, 29 Aug 2018 20:31:06 +0000 tr-TR hourly 1 https://wordpress.org/?v=4.2.29 Günün Mesajı Widget https://www.bilgisayar.me/index.php/2015/06/19/gunun-mesaji-widget/ https://www.bilgisayar.me/index.php/2015/06/19/gunun-mesaji-widget/#comments Sat, 20 Jun 2015 01:07:39 +0000 http://www.bilgisayar.me/?p=670 YÜKLE DEMO]]> Günün Mesajı Widget Bootstrap, PHP/MYSQL ve JQuery tabanlı, sitenizde özellikle gösterge panelinde kullanabileceginiz bir widget’ tır. Değişik renkte, dizaynda ve farklı versiyonları mevcuttur.

 
 
 
gununmesaji

]]> https://www.bilgisayar.me/index.php/2015/06/19/gunun-mesaji-widget/feed/ 0 Haber Bandı (Ticker) Uygulaması https://www.bilgisayar.me/index.php/2015/06/17/haber-bandi-ticker-uygulamasi/ https://www.bilgisayar.me/index.php/2015/06/17/haber-bandi-ticker-uygulamasi/#comments Thu, 18 Jun 2015 00:16:08 +0000 http://www.bilgisayar.me/?p=698 YÜKLE DEMO]]>

Bu uygulamanın PHP/MYSQL Uygulamasını ulaşmak için burayı tıklayın.

Haber bandımız için, jquery.li-scroller.1.0.js jquery eklentisini kullanacağız. Eklentiyi yüklemek için burayı tıklayın .

index.html veya index.php oluşturun ve aşağıdaki kodları, bu dosyanın <body> etiketinin tam üstüne kopyalayın. Editör olarak Notepad++ kullanabilirsiniz.

<link rel="stylesheet" type="text/css" href="css/stil.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>
stil.css dosyası oluşturun ve aşağıdaki CSS kodunu, bu dosyanın içine kopyalayın.

#haber-ticker {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	overflow: hidden;
}
.title {
	position: absolute;
	font-family: 'Verdana', sans-serif;
	color:#fff;
	z-index: 2;
	top: 2px;
	left: 5px;
}

.tickercontainer {
	background-color: #4285F4;
	width: 100%;
	height: 27px;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.tickercontainer:after {
 	content: "";
    width: 100%;
    height: 1px;
    margin-left: 0px;
    display: block;
    position: absolute;
    left: 0;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 5px 1px #000000;
       -moz-box-shadow: 0px 0px 5px 1px #000000;
            box-shadow: 0px 0px 5px 1px #000000;
}
.tickercontainer .mask {
	position: relative;
	left: 35px;
	top: 3px;
	width: 100%;
	overflow: hidden;
}

ul.newsticker {
	position: relative;
	left: 980px;
	font: bold 12px Verdana;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul.newsticker li {
	float: left;
	margin: 0;
	padding: 0;
}
ul.newsticker li span {
	color: #fff;
}
ul.newsticker a {
	white-space: nowrap;
	padding: 0;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	margin: 0 50px 0 0;
}
ul.newsticker span {
	margin: 0 12px 0 0;
}

Oluşturmuş oldugunuz index.php/html sayfasında </body> etiketinin tam üstüne aşağıdaki scripti kopyalayın.

<script>
    $(function(){
        $("ul#js-news").liScroll({travelocity: 0.09});
		$("ul#js-newsbottom").liScroll({travelocity: 0.06});
    });
</script>

Son olarak, haber bandımızın içine bazı değerler girelim. <body> etiketinin tam altına aşağıdaki html kodunu kopyalayın.

<div id="haber-ticker"> <span class="title">HABER: </span>
  <div class="tickercontainer">
    <div class="mask">
      <ul id="js-news" class="js-hidden">
        <li><span>21:26</span><a href="javascript:void(0);">Kayseri'de "ramazan sokağı" açıldı</a></li>
        <li><span>21:25</span><a href="javascript:void(0);">Habur Sınır Kapısı'ndaki operasyon</a></li>
        <li><span>21:22</span><a href="javascript:void(0);">9. Cumhurbaşkanı Demirel'in vefatı</a></li>
        <li><span>21:09</span><a href="javascript:void(0);">Zonguldak’ta bıçaklı kavga: 1 ölü</a></li>
        <li><span>21:08</span><a href="javascript:void(0);">Manisa'daki trafik kazası</a></li>
        <li><span>21:04</span><a href="javascript:void(0);">Karşıyaka'da Cüneyt Dumlupınar dönemi</a></li>
        <li><span>21:03</span><a href="javascript:void(0);">Davutoğlu canlı yayında soruları yanıtlıyor!</a></li>
        <li><span>21:03</span><a href="javascript:void(0);">Cizre'de silahlı saldırı: 2 yaralı</a></li>
        <li><span>20:59</span><a href="javascript:void(0);">Kayseri'nin 2. vakıf üniversitesi ilk mezunlarını verdi</a></li>
        <li><span>20:56</span><a href="javascript:void(0);">Mursi hakkındaki idam kararına tepkiler</a></li>
        <li><span>20:54</span><a href="javascript:void(0);">Kocaeli'nde konteyner yüklü tırın devrilmesi</a></li>
        <li><span>20:50</span><a href="javascript:void(0);">Pınar Karşıyaka'dan Anadolu Efes'e cevap</a></li>
       </ul>
     </div>
   </div>
</div>

Haber bandımız böylece tamamlanmış oldu.

haberbandi

 
 
 

]]> https://www.bilgisayar.me/index.php/2015/06/17/haber-bandi-ticker-uygulamasi/feed/ 0