CSS yapımı tam ekran blogger menüsü

Blogger Css Menusu

Merhaba arkadaslar  sizlere css yapimi blogger menusunu paylacagim

 menu blogunuza renk katicak siradan menulerden kurtulup daha guzel ve şık bir menuye sahip olucaksiniz
 bu menunun ozeligi menu butonunun uzerine mous ile gelince tam ekran seklinde menu acilir ayni sekilde sol kosede kapatmak  x butonu mevcut oraya mous ile gelince menu kapanir

 blogunuzda menunuz elinizin altinda olsun ;)

menuyu blogunuza eklemeniz icin yapmaniz gerekenler  sirasiyla..

blog kupanda paneli > yerlesim > gadget ekle > HTML/JavaScript

bolumune altaki kodu  koymanizdir.

<style type='text/css'>

/* Stuff I added */
.menu-outer:hover ~ .menu-close {
  margin-right:-100px;
}
.menu-outer:hover .bar { background:rgba(100,200,240,.9); }
.menu-outer > nav ul { top:8%; }

/* The rest I chnaged parts but not most of it */



.menu-outer {
  overflow: hidden;
  position: fixed;
  top: 0;
  font-family: 'Montserrat', serif;
  z-index: 998;  
  width: 100%;
  left: 100%;
  margin-left: -100px;
  height: 200%;
  background: rgba(100,200,240,.9);  
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s; 
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-outer:hover {
  background: rgba(100,200,240,.98);
  left: 0;
  margin-left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.menu-icon {
  z-index: 999;
  position: absolute;
  top: 58px;
  left: 15px;
  width: 30px;
  pointer-events: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-icon .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  margin: 0 0 5px;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
  opacity: 0;
}
nav ul {
  position:absolute;
  width:100%;
  padding: 0;
  left: 10%;; /*prevents possible click when not oppened*/
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > nav ul {
  left: 0;
}
nav li {
  list-style:none;
  text-align: center;
  text-transform: uppercase;
}
nav li a {
  font-size: 2em;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  margin: 0 auto;
  padding: 20px;
  display:block;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
nav li a:hover {
  color: rgba(255,255,255,1);
}
@media screen and (max-width: 600px), screen and (max-height: 600px) {
  nav ul {font-size:.75em;}
  nav ul a {padding: 10px;}
}
.menu-close {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 100%;
  width: 200px;
  height: 200px;
  background: rgba(0,0,0,1);
  cursor: pointer;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .menu-icon {
  right: 15px; left: auto;top: 68px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-close .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  position:absolute;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
.menu-close .bar:first-child {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .bar:last-child {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


</style>

<div class="menu-outer">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <nav>
        <ul>
           <li><a href="#">Baslik</a></li>
           </li>
           <li><a href="#">Baslik</a></li> 
            
<li><a href="#">Baslik</a>
<li><a href="#">Baslik</a></li>


       </ul>
   </nav>
</div>
<a class="menu-close" onclick="return true">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</a>

menunun gorunusunu mu merak ediyorsun ? Önizleme için tıkla
duzeltilmesi gereken yerler kodun alt siralarinda gordugunuz link alanlari ve menu basliklari yani buralar

# yerine sizin linkiniz
Baslik yerine sizin menude koyacaginiz sayfa yada konu basligi menuyu farkli renkte yapmak istiyorsaniz renk kodlari ayarlariya oynamalisiniz renk kodlari rgba turundendir yani kod icinde orenk olarak
rgba(250,250,250,1) boyle goruyorsaniz bu renk kodudur..

bu menuyu blogunuzda gule gule kullanin

yorumlarinizi eksik etmeyin

Devamını Oku

Kalemimden sayfası yayında

 hayirli aksamlar arkadaslar nasilsiniz :)
hayat nasil gidiyor bana soraniniz yok ama ben size sorayim :)

 bloga yeni bi sayfa ekledim kalemimden isimli sayfa orada yazdigim yazilari paylasacagim pek iddaali degilim yani kendimce takiliyorum
sayfaya basit bi gorunum vermek istemedim oyle direk yazmak istemedim onun icin zaman tuneli seklinde yaptim guzel bi goruntu oldu diye dusunuyorum yazinin yazildigi tarih saatla birlikte kalem iconu ve yazi alani umarim sizlerde begeniceksiniz

not: yazidgim tum yazilari ekleyemedim onlarida ekliycem vakit buldukca :)
ayrica gelecekte yazacagim yazilari oraya ekiycem ( ki insallah   yazarim )


Sayfaya gitmek icin tikla

 herkese iyi bloglamalar

Devamını Oku

Yine ben yine film onerilerinizi bekliyorum

merhaba blog okurlarimmm

yine film krizim tuttu 2 gundur film izlemiyorum ki ben her gece film izleyen biriyim hatta gecede 2 film izlerim :)

bana simdi boyle guzel komedi filmleri onerebilirsiniz dimi ? evet deyisinizi duyuyorumm komedi olsun ama boyle pembe filmler olmasin hani romantik komedi gibisinden ask canim cicim falan  :)

komedi
komedi dram
komedi aksiyon
komdi macera
komedi korku

usteki kategorilerden film onerilerinizi bekliyorum bi film degil birden fazla film onerin butun begendiginiz komedi filmlerini :) nasilsa izliycem  tabi izlemediklerimi heheh

Devamını Oku

Açılır kapanır menü hizmetinizde :)

merhaba arkadaslar biraz ugrastim ama sanirim guzel oldu :)

dun bi bogger arkadasimla konusurken  bana dedi ki blog menunde kategoriler falan koy benim blog menumde ana sayfa hakkimda sarkilar iletisim yorumlar ve arama kutusu vardi
arkadasin demek istedigi ise kategorileri oraya koymakti

ama ben daha farkli bisey yaptim menunun sol tarafinda siyah menu butonu var gordugunuz gibi oraya tikladiginiz zaman sol taraftan menu aciliyor

menunun icinde
kategoriler var  orda bazi kategorileri ekledim :)
araclar var  kod ceviri ve renk kolari  ( buraya zamanla biseyler daha katicam )

blog ekstasi bolumude var
burasida hani bloggerin izleyiciler seysi calismadigi zaman  bilindigi gibi bazen hatta veriyor :) o calismadigi zaman blogu izle butonundan blogumu izleyebilerler izmeye calisan blog arkadaslar

blogu tweetle var bu  bolume tikladiginiz zaman direk blogumu twitterde paylasabilirsiniz bu tweetle her konuda ayni linki paylasiyor sadece blog linkimi oyle olmasini istedim

diger bi bolum ise bloglovin sayfami takip etmeniz icin bloglovin linkini yerlestirdim

iconlarla ve renk uyumuyla sanirim guzel bi menu oldu sizin gorusunuzu almak istedim

sizce nasil gorunuyor ve sorunsuz calsiyor mu ?

Devamını Oku

Blogger kod çevirici sayfası

Blogger kod çevirici

merhaba arkadaslar bloguma kod cevirisi sayfasi ekledim artik kod cevirisi sayfam butun blogger arkadaslarin hizmetindedir..

 kod cevirisi sayfasi ne ise yarir ?
 kod cevirisi sayfasi kod paylasmayi seven bloglar paylasacagi kodu kod cevirisi kutusunda cevirir donusturur  
nie kod cevirisini kullanmak zorundayiz ? neden kodu direk oldugu gibi konuda paylasamayiz?
kod cevirisini kullanmasaniz konuda paylasacaginiz kod, kod olarak gorulmez o paylastiginiz kodla ortaya cikan sonuc gorunur.

 arkadaslar kod cevirisi sayfasinda olabildigi kadar detayli bi sekilde anlatmaya calistim hatta blogunda kod penceresi olmayan arkadaslarimiz icin kod penceresi kodlarinida paylastim.

Blogger kod çeviri sayfasına gitmek için tıkla --->   Blogger kod çeviri sayfası

Devamını Oku

Bilin İstedim !

merhaba arkadaslar bloglari gezinirken beni cok uzen bir yoruma rasladim neymis efendim 'ezik insanlar '

bucurukveben   isimli blogun sahibi   herzamanki gibi yine basbakan erdoganla ilgili biseyler paylasmis olabilir paylasabilir  o da o sekilde kendini mutlu ediyordur belki :)

ama bi yorumu dikkatimi cekti ezik insanlar demesi  diger bi yorumcu ona abla demis sanirim yasi bizden buyuk  yasina gore davranmamis  sen diger partiyi destekleyebilirsin veya erdogani sevmeyebilirsin ama senin gorusunde olmayan kisilere ezik insanlar demek seni insan mi yapar ?

bu kadar mi kuculdunuz ? biz ezik insanlarsak siz cok mu yucesiniz ?

kendini birilerinden ustun gormek seni  insan haric hersey yapar bunu unutma


o yorum

Devamını Oku

Pabucumun milisleri

dun twitterde bunu gordum ve tweet atip tepki verdim

resimde anlasildigi gibi once eli silahli maskeli serefsizlerin resmi paylasildi  onlarin deyimiyle milislerin

ardindan polis  okmeydaninda gaz ve ses bombasi atiyor dite twit paylasildi

eh polis napsin sizin gibi teroristlere ? mahallenize degil gotunuze soksa bobmayi yeridir !

birileride bunlari savunuyor  bunlari savunanalrda teroristir gozumde

cikan olaylarda ortaligi yakip yikanlarin basinda bunlar geliyor bazi kesimide bunlar kiskirtiyor

Devamını Oku