Ağustos 06, 2012

Blogger İçin Özelleştirilmiş Haber Manşet Alanı (Yeni)



Blogger İçin Özelleştirilmiş Haber Manşet Alanı (Yeni)

Daha önce benzer bir konusunu açmıştım ama bu tasarım daha orijinal ve daha dikkat çekici olduğu için bunu da sizlerle paylaşmak istedim. Onu da paylaşıyorum. Umarım beğenirsiniz.

Önce daha önce paylaştığım Haber Manşet koduna bakmak için burayı tıklayınız. 

Şimdi bu kodu blogger'a nasıl uyarlayabiliriz ona bakalım;
Blogger Kumanda Paneli
*Yerleşim
*Yeni Gadget ekle
*HTML\JavaScript seçeneğini açın ve açılacak pencereye aşağıdaki kodu yapıştırın.
  • Resimlerin URL' adreslerini değiştirebilmeniz için MAVİ ile işaretledim,
  • Genişlik ve Uzunluğunu değiştirmeniz için KIRMIZI ile işaretledim,
  • Resim başlıklarını değiştirmeniz için TURUNCU ile işaretledim,

<style>
#slider {
  position:absolute !important;
  top:50%;
  left:50%;
  width:650px;
  height:350px;
  margin-top:-175px;
  margin-left:-325px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }

 .nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
 }

 .nivoSlider a {
  border:0;
  display:block;
 }

 .nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
 }

 .nivo-box {
  display:block;
  position:absolute;
  z-index:5;
 }

 .nivo-caption {
  position:absolute;
  left:75px;
  bottom:29px;
  width:498px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-left-color:rgba(0,0,0,.5);
  border-right-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
 }

 .nivo-caption p {
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }

 .nivo-caption a {
  display:inline !important;
  }

 .nivo-html-caption {
  display:none;
 }

 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(http://2.bp.blogspot.com/-g_Eipd24SIQ/UBwSRk_nXBI/AAAAAAAACz0/lVsc6AvQWzo/s1600/helperblogger.com-arrows.png);
  background-repeat:no-repeat;
}

 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }

 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }

</style>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>

<div id="slider" class="nivoSlider">
    <img src="http://4.bp.blogspot.com/-FHWLxVcu3HY/UB-j3tiTPWI/AAAAAAAAEuA/zhRIkMlEoWs/s1600/bloglamazamani5.jpg"
    alt="Slider Image 1" title="Resim Başlığı">
    <img src="http://2.bp.blogspot.com/-M7K8ASuFAuk/UB-j1nWyxOI/AAAAAAAAEt4/yz1ZHy0V-ws/s1600/bloglamazamani4.jpg"
    alt="Slider Image 2" title="Resim Başlığı">
    <img src="http://2.bp.blogspot.com/-wYsEtueGfA8/UB-j0qn8P4I/AAAAAAAAEtw/tjySaTGboRA/s1600/bloglamazamani3.png"
    alt="Slider Image 2" title="Resim Başlığı">
    <img src="http://4.bp.blogspot.com/-REb0jrFm9N8/UB-jvmJt2VI/AAAAAAAAEto/RdMKvsENnW4/s1600/bloglamazamani2.png"
    alt="Slider Image 2" title="Resim Başlığı">
    <img src="http://2.bp.blogspot.com/-MKrkHXYo5XM/UB-jq0mr_iI/AAAAAAAAEtg/2_no33C4J2I/s1600/bloglamazamani1.png"
    alt="Slider Image 2" title="Resim Başlığı">
</div>
Yapamadığınız bir şey olursa; YORUM kısmında belirtebilirsiniz. 
Kolay gelsin. İyi bloglamalar

5 yorum :

Bunu arıyordum bende sayenizde öğrendim. Hemen blogumda kullanmaya başlayacağım

blogun tam ortasında çıkıyor yani koyduğumuz yerde çıkmıyor :( ve genişlik yükseklik ayarlarıyla oynağımızda altta resim başlığı yazan yerin boyutu değişmiyor bilginize

Tam ayarla çekmem gerekecek bu koda. Tekrar bilgilendirme yapacağım.

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.