Yazılarına İmage Slider Ekleme

Merhaba KralAnlatım okurları,

Bu yazımda sizlerle güzel bir image slider paylaşacağım.Blogumda bir kaç kez kullandım.Beğendim.Fakat şuan kullanmıyorum.Eğer size de image slider gerekiyorsa bu kod size göre..

Hiçbir uğraşa gerek yok.Kodu alıyorsunuz.Yazınızın HTML Bölümünü açıyorsunuz ve istediğiniz satırın kodunu bulup altına yapıştırıyorsunuz.

Yazımızın HTML Bölümü bloggerda aşağıdaki gibidir ;

Kodu aldıktan sonra içindeki ## Resim Linki ## bölümüne resim linkini yapıştırıyorsunuz.Ve resime link vermek istiyorsanız ## RESİME TIKLAYINCA GİDİLECEK LİNK ## bölümünü de değiştiriyorsunuz. İstemezseniz sadece # kalsın.

Eğer daha da artırmak isterseniz <a href="## RESİME TIKLAYINCA GİDİLECEK LİNK ##" target="_blank"><img alt="" title="#caption1" src="### RESİM LİNKİ ###" /></a>Yukarıdaki yazıyı alt alta istediğiniz kadar yapıştırıp resimleri artırabilirsiniz.

Yazınızı açıyorsunuz. HTML bölümünde istediğiniz alana vericeğim kodu yapıştırıyorsunuz.Ve yazınızı yayınlıyorsunuz.

HTML Bölümü derken nereyi kastediyorum.İşte bu fotoğraftaki bölümü : (Blogger'da bu bölüm.Diğerlerinde de mutlaka vardır)

 ... <style type="text/css"/>/* dimpost.com - Basic Style */ body{ background: transparent; font:15px/2 'Adobe Caslon Pro', Georgia, Serif; margin:0; padding:0;}a{outline:0 none}#pagewrap{ margin:10px auto; padding:0; position:relative; height:400px; width: 640px;}#slidewrap{position:absolute;}#slider {    border-color: #c0c0c0;    border-radius: 5px 5px 5px 5px;    border-style: solid;    border-width: 10px 10px 30px;    box-shadow: 0 0 3px #2F2F2F;    height: 280px;    margin: 10px;    position: relative;    width: 600px;}#slider images{    position:absolute;    top:0px;    left:0px;    display:none;}/* The Nivo Slider styles */.nivoSlider { position:relative;}.nivoSlider images { position:absolute; top:0px; left:0px;}/* If an image is wrapped in a link */.nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none;}/* The slices and boxes in the Slider */.nivo-slice { display:block; position:absolute; z-index:5; height:100%;}.nivo-box { display:block; position:absolute; z-index:5;}.nivo-directionNav{display:none!important}.nivo-html-caption {    display:none;}.nivo-caption{ position:absolute; right:20px; text-align:center; top:130px; width:192px; z-index:60;}.nivo-caption p{margin:0}.nivo-caption .title{font-style:italic}.nivo-controlNav {    bottom: -23px;    display: block;    height: 15px;    left: 204px;    position: absolute;    text-align: center;    width: 192px;    z-index: 51; opacity: 0.6;}.nivo-controlNav a{ background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center; display:inline-block; height:14px; width:14px; text-indent:-9999px; cursor:pointer;}.nivo-controlNav .active{ background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png); } </style><script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script> <script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script><script type="text/javascript"> $(window).load(function() {  $('#slider').nivoSlider(); }); </script><!--[if IE]>  <script src="modernizr-2.0.min.js"></script> <![endif]-->  <div id="pagewrap"><div id="slidewrap"><div id="slider"><a href="## RESİME TIKLAYINCA GİDİLECEK LİNK ##" target="_blank"><img alt="" title="#caption1" src="### RESİM LİNKİ ###" /></a><a href="## RESİME TIKLAYINCA GİDİLECEK LİNK ##" target="_blank"><img alt="" title="#caption1" src="### RESİM LİNKİ ###" /></a> <a href="## RESİME TIKLAYINCA GİDİLECEK LİNK ##" target="_blank"><img alt="" title="#caption1" src="### RESİM LİNKİ ###" /></a><a href="## RESİME TIKLAYINCA GİDİLECEK LİNK ##" target="_blank"><img alt="" title="#caption1" src="### RESİM LİNKİ ###" /></a></div></div></div>

 ...