Responsive Menu Yapımı

Responsive Menu Yapımı

11/17/2015 0 yorum

Responsive Menu Yapımı - Merhaba Arkadaşlar bugün sizlerle Responsive menu nasıl yapılır onu göstericem.

Responsive Menu Yapımı

1. İlk önce basit HTML kodlarını yazalım:
<html>
<head>
<title>Future Imperfect by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<nav class="nav">
<div class="menu-ac"><i class="fa fa-bars fa-lg"></i> Menu</div>
<div class="ac">
<ul class="sol-menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Feugiat</a></li>
<li class="dropdown"><a href="#">Tempus</a>
<ul class="altmenu-ac">
<li><a href="#">Asagi</a></li>
<li><a href="#">Template</a></li> </ul>
</li>
<li><a href="#">Adipiscing</a></li>
</ul>
<ul class="sag-menu">
<form action="" method="GET">
<input type="text" class="search" name="s" /><i class="fa fa-search fa-lg"></i>
</form>
</ul>
</div>
</nav>
        </body>
  </html>
2. Daha Sonra </head>  etiketinden yukarıda <style>/* CSS */</style> etiketlerini ekleyin ve aşağıdakı CSS kodlarını yazın :

<style>
/* Navbar */
.nav {
background-color: #4c6881;
    overflow: hidden;
    z-index: 50;
}
.nav ul {
padding: 0;
    margin: 0;
}
.sol-menu li {
    float: left;
    display: block;
    list-style: none;
}
.sol-menu li a {
display: block;
text-decoration: none;
color: #FFFFFF;
    padding: 15px 20px;
    background-color: #4c6881;
    border-bottom: 1px solid #4C6881;
    -webkit-transition: all 0.3s ease;                
    -moz-transition: all 0.3s ease;              
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;        
    transition: all 0.3s ease;
}
.sol-menu li a:hover {
color: #4c6881;
    padding: 15px 40px;
    background-color: #FFFFFF;
}
ul.sag-menu {
float: right;
padding: 8px 10px;
    overflow: hidden;
}
.sag-menu i {
color: #FFFFFF;
margin: 8px;
cursor: pointer;
}
input.search {
display: none;
    padding: 5px;
    max-width: 100%;
}
.altmenu-ac {
display: none;
}
.menu-ac {
display: none;
padding: 10px;
cursor: pointer;
color: #FFFFFF;
}
@media (max-width: 700px ){
.ac  {
display: none;
}
.nav ul li {
float: none;
}
.menu-ac {
display: block;
}
}
@media (min-width: 700px ){
.ac {
display: block!important;
}
}</style> 
3. Son olarak da Jquery Kodlarını ekleyin:
<script>
$(function(){
$('.menu-ac').click(function(){
$(this).next('.ac').slideToggle(500);
});
$('.fa-search').click(function(){
      $(".search").animate({
                width: "toggle"
            });
});
});
</script>



Blogger Çerezler için CSS eklentisi

Blogger Çerezler için CSS eklentisi

10/14/2015 0 yorum
Blogger Çerezler için CSS eklentisi - Merhaba Arkadaşlar. Uzun bir süredir blog yazmaya ara vermiştim. Artık haftada en az 1 defa blog'a yazı ekleyeceğim.
Bugünkü konuda bildirim çerezleri CSS ile şekillendirmek için sizlere css kodlarını paylaşıcam. Öncelikle Eğer siz siteniz için çerezleri yapmadıysanız buradan Avrupa Birliği ülkeleri için çerezlerle ilgili bildirim  nasıl yapıldığına baka bilirsiniz.

Blogger Çerezler için CSS eklentisi

Blogger Çerezler için CSS eklentisi

1.İlk önce blogger hesabınızı açın Şablon >Html düzenleye tıklayın ve CTRL+F tuşlarını basıb aşağıdaki kodu aratın:
</style>
2.Aşağıdaki kodlardan birini seçip </style> kodunun  üst kısmına kopyalayıp yapıştırın.

2.1. Siyah arka plan :

Blogger Çerezler için CSS eklentisi

/* Çerezler Siyah Arka plan */
.cookie-choices-info{background-color:rgba(56,66,75,.97)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;-webkit-transform:translateZ(0)}
.cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#cee6ea!important}
.cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#282f36!important;transition:all .1s linear}

2.2. Beyaz arka plan :

Blogger Çerezler için CSS eklentisi

/* Çerezler Beyaz Arka plan */
.cookie-choices-info{background-color:rgba(255,255,255,.99)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;box-shadow:0 0 10px rgba(0,0,0,0.2);-webkit-transform:translateZ(0)}
.cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#222!important}
.cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear}
.cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#999!important;transition:all .1s linear}
İyi Günler.

kaynak: http://www.arlinadzgn.com/2015/08/modifikasi-tampilan-cookies-bar-dengan-css.html
Windows 10 Aktivasyon

Windows 10 Aktivasyon

8/01/2015 0 yorum
Windows 10 Aktivasyon

Windows 10 Aktivasyon - Merhaba Arkadaşlar. Bildiyiniz üzere geçen günlerde Microsoft Windows 10 işletim sistemini piyasa sürdü. Tabiki  bu versiyon bazı yerler için ücretsiz güncellendi. Ancak şirketler ve sistemi bilgisayarlarına yerleştirmek isteyen bilgisayar üreticileri Windows 10'u satın almak zorunda. Windows 10'nu Aktive etmeseniz bir çok işlemlerden mahrum kalırsınız. Bu yazımda sizlere windows 10'nu nasıl aktive edeceyizini göstericem(Ben bu yazıyı bir gün önceden paylaşacaktım. Ama çalışıb-çalışmadığını yoklamam için beklemem gerekti).

Avrupa Birliği ülkeleri için çerezlerle ilgili bildirim

Avrupa Birliği ülkeleri için çerezlerle ilgili bildirim

7/29/2015 9 yorum
Avrupa Birliği ülkeleri için çerezlerle ilgili bildirim

Avrupa Birliği ülkeleri için çerezlerle ilgili bildirim - Merhaba Arkadaşlar. 28 temmuzdan itabaren  blogger panelinde böyle bir bildirim geliyor 

Avrupa Birliği yasaları uyarınca, blogunuzda kullanılan çerezlerle ilgili olarak Avrupa Birliği ziyaretçilerine bilgi vermeniz gerekmektedir. Çoğu durumda bu yasalar izin almanızı da gerektirir. 
Nezaket gereği olarak blogunuza, Google Analytics ve AdSense çerezlerinin kullanımı da dahil, Google'ın blogunuzdaki belirli Blogger ve Google çerezlerini kullanmasıyla ilgili açıklamalar içeren bir bildirim ekledik. 
Bu bildirimin blogunuzda iş görüyor ve görüntüleniyor olduğunu onaylama sorumluluğu size aittir. Başka çerezler (örneğin, üçüncü taraf özellikleri ekleyerek) kullanıyorsanız bu bildirim sizin işinize yaramayabilir. Bu bildirim ve üzerinizdeki sorumluluklar hakkında daha fazla bilgi edinin.