BLOGGER EKLENTİLERİ etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
BLOGGER EKLENTİLERİ etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

3 Stil Popüler Yayınlar Eklentisi

Pazar, Kasım 08, 2015 2 Yorumlar icon18_edit_allbkg

Merhaba arkadaşlar bu yayınımda sizlere yine güzel bir blogger eklentisinden bahsedeceğim.Popüler yayınlarınızın daha havalı durmasını sağlayacak üç stil kendinize uygun olanı seçip kullanabilirsiniz.

İlk önce nasıl kurulacağından bahsedeyim her bir stil için css kodlarını]]><b:skin>veya </style>kodlarının üstüne ekliyoruz.

Stil1:



/* Popular Post Style 1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.3em;font-weight:700}

Stil 2:


/* Popular Post Style 2 */
.PopularPosts .widget-content ul{padding:0;margin-top:-10px}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{text-decoration:none;color:#000;}
.PopularPosts .item-title a:hover{color:#ff2d2d}
.PopularPosts .item-snippet{font-size:12px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px dashed #e3e3e3}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block;overflow:hidden;max-height:180px;margin-bottom:10px;}
.PopularPosts img{padding:0}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}

Stil 3:

/* Popular Post Style 3 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:700;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts li .item-thumbnail{margin:10px 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}

Şimdi stiller için javascript kodlarını ekliyoruz.Kodları </body> kodunun üstüne ekliyoruz.
Stil 1:

<script type='text/javascript'>
//<![CDATA[ 
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

Stil 2:
<script type='text/javascript'>
//<![CDATA[
// Popular Post
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>

Stil 3:

<script type='text/javascript'>
//<![CDATA[ 
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

Widget Ayarı:

Hepsi bu kadar 
Yardım için yoruma yazabilirsiniz..Sağlıcakla Kalın...

Blogger Site Haritası Oluşturma(Sitemap)

Perşembe, Ekim 29, 2015 Yorum Yapmak İstermisiniz? icon18_edit_allbkg
blogger-site-haritasi-olusturma


Selamlar herkese bu yayınımda sizlere blogger da sitemap oluşturmadan bahsedeceğim.Blog ziyaretçilerin daha kolay dolaşması için hazırlanmış hoş görünmlü güzel bi eklenti.

Nasıl kurulacağından bahsedeyim

Blogger Panel den > Sayfalar > Yeni Sayfa diyerek HTML kısmına aşağıdaki kodu yapıştıyoruz.

<style scoped="" type="text/css">
#head-tab{background:#51a8e9;padding:15px 20px;margin:0;color:#fff;font-size:16px;text-align:center;font-weight:700;letter-spacing:.5px;}
#tabbed-toc{margin:0 auto;background-color:#222;overflow:hidden;position:relative;color:#fff;border-left:5px solid #51a8e9}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0;padding:0;list-style:none}
#tabbed-toc .toc-tabs{width:30%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;color:#fafafa;text-decoration:none;padding:8px 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:#333;color:#fff}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#333;color:#fff;position:relative;z-index:5;}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:70%;float:right;background-color:#fafafa;border:1px solid #fafafa}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:14px;color:#7f8c8d;line-height:20px;height:30px;padding:6px 12px;text-decoration:none;outline:0;overflow:hidden}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:1px solid #2c3e50;overflow:hidden}
#tabbed-toc .panel li:nth-child(even){background-color:#fafafa}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#fafafa;color:#e06666;outline:0}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#36424a}
.post ol li:before{display:none}
@media(max-width:700px){
#tabbed-toc{border:1px solid #ccc}
#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}
#tabbed-toc .toc-tabs li{display:inline;float:left}
#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#777}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#51a8e9;color:#fafafa}
#tabbed-toc .toc-content{border:0}#tabbed-toc .panel li a{font-size:12px;line-height:20px;height:20px;padding:0 12px}
#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
</style>

<div id="head-tab">
Site Haritası</div>
<div id="tabbed-toc">
</div>
<script>
var tabbedTOC = {
    blogUrl: "blog adresiniz", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "Yeni!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " <em style='color:#F2784B;'>Yeni</em>" // HTML for the "Yeni!" text
};
</script>
<script async="async" src="https://cdn.rawgit.com/Indzign/theme/master/daftar-isi-indzign.js"></script>

Yukarıda blog adresiniz yazan yere kendi adresinizi yazın.
Mavi renk yerine kendi istediğiniz renk ile değiştirmek için kodlardan 51a8e9kodunu aratın ve yerine kendi renk kodunuzu girin.


Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...


Blogger Otomatik Slider Manşet Eklentisi

Salı, Ekim 27, 2015 22 Yorumlar icon18_edit_allbkg
blogger-otomatik-slider-eklentisi

Merhaba arkadaşlar,
bu yayınımda sizlere güzel bi otomatik slider  manşet eklentisinden bahsedicem.

Kurulumu:
Blogger Yerleşimden Gadget Ekle > Html /JavaScript diyoruz ve aşağıdaki kodu yapıştırıyoruz.Daha sonra blog adresiniz yazan yere kendi blog adresinizi yazıyorsunuz bu kadar.

<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"blog adresiniz",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>


Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Blogger Kod Penceresi Oluşturma

Pazartesi, Ekim 19, 2015 Yorum Yapmak İstermisiniz? icon18_edit_allbkg
blogger-kod-penceresi-olusturma

Merhaba arkadaşlar,bu yayınımda sizlere bloğunuzda kullanabileceğiniz kod pencerelerini sunacağım.
Eğer bloğunuzda yayınlarda html,css,javascript gibi kodlar paylaşıyorsanız ve bunları pencere içine almak istiyorsanız aşağıdaki adımları uygulayın.

Adım 1:Aşağıdaki css kodunu ]]><b:skin> veya </style> kodunun üstüne ekliyoruz.


/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}

Adım 2:Aşağıdaki JavaScript kodunu</body> kodunun hemen üstüne ekleyin.

<script type="text/javascript">
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>
');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Adım 3:Şimdi ise kullanım şeklini göstereyim hangi şekilde kullanmak istiyorsak aşağıdaki koddan seçiyoruz.
<pre class='code code-html'><label>HTML</label><code>...Html kod için</code></pre>

<pre class='code code-css'><label>CSS</label><code>... Css kod için ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... JavaScript kod için ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... jQuery kod için  ...</code></pre>
Sağlıcakla kalın...
 Kaynak:http://goo.gl/XVZPjs

Blogger İletişim Formu Oluşturma(Google Form ile)

Çarşamba, Eylül 30, 2015 7 Yorumlar icon18_edit_allbkg
blogger-iletisim-sayfasi

Merhaba arkadaşlar,
bu yayınımda sizlere blogger kullanırken çok güzel ve pratik bi eklenti diyebileceğimiz Google'dan faydalanarak bloggerımıza iletişim sayfası oluşturabileceğiz.Blogger kullanan kullanıcıların en çok ihtiyaç duyduğu sayfa olan iletişim sayfasını oluştuma için aşağıdaki adımları uyguluyoruz.

RESİMLİ ANLATIM

Adım 1:
İlk önce https://www.google.com/intl/tr_tr/forms/about/ adresine giriyoruz ve Google Formlar'a git diyoruz.


google-form-olu%25C5%259Fturma-1

Adım 2:
Tıkladığımız ekranda aşağıdaki yer açılacaktır.Resimdeki gibi formu oluşturuyoruz.
google-form-olusturma-2

Adım 3: 
Formu oluşturduktan sonra tasarım kısmına geliyoruz "Temayı Değiştir" alanına geliyoruz.
google-form-olusturma-3

Adım 4:
Özelleştir kısmından yazıların rengini,üst resmi,arkaplan vs. yerlerini düzenliyoruz.
google-form-olusturma-3

Adım 5:
Daha sonra Yanıtları Görüntüle diyoruz ve ordan Araçlar sekmesinden "Bildirim Kuralları"ndan mesaj geldiğinde e-posta adresinize hemen mi yoksa 24 saat içerisinde mi bildirimini ayarlıyoruz.
google-form-olustuma-7

Adım 6:
Daha sonra Form sekmesine gelip Formu Web Sayfasına Yerleştir diyoruz ve aşağıdaki resimlerdeki adımları uyguluyoruz.
google-form-olustuma-5

Adım 7:
Tıkladıktan sonra aşağıdaki gibi bi ekran açılacaktır.Aşağıdaki ekrandaki yerde formun geniş ve yüksekliğini ayarlıyoruz ve kodu kopyalıyoruz.
google-form-olustuma-6

Adım 8:
Şimdi Blogger Admin Panel'ine gelip Sayfalardan Yeni Sayfa diyoruz ve kodu html kısma yapıştırıyoruz ve kaydediyoruz.
google-form-olustuma-8
google-form-olustuma-10

Adım 10:
Daha blogdan iletişim sayfasına bakıyoruz herşey tamamdır...
google-form-olustuma-9*

Evet arkadaşlar Google'dan faydalanarak istediğimiz tarzda iletişim formunu oluşturuyoruz.
Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...















Blogger Hazır Sosyal Paylaşım Eklentisi - 12

Çarşamba, Temmuz 29, 2015 4 Yorumlar icon18_edit_allbkg

Merhaba arkadaşlar,
bu yayınımda sizlere yeni bir blogger sosyal paylaşım eklentisinden bahseceğim.Kullanışlı zarif oluşu bloğunuza güzel bir hava oluşturacaktır.Üzerine geldiğimizde rengi değişen bu eklentiyi anlatayım.

Nasıl Eklenir?

-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapıştırıyoruz.


<style>#sosmed{margin:16px auto 5px;}
#sosmed li:hover{background-color:#414b5e;}
#sosmed li{line-height:30px;font-weight:400;margin:auto;margin-bottom:3px;border-radius:5px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
#sosmed li a{padding:5px 5px 3px 14px;display:block;color:#fff;}
#sosmed li i{border-right:1px solid rgba(0,0,0,.2);padding-right:5px;margin-right:5px;width:15px;}
.bg-fb{background:#5772bb;}
.bg-tw{background:#3494e5;}
.bg-gp{background:#e34242;}</style>
<div>
<nav id="sosmed">
<ul>
<li class="bg-fb"><a href="#"><i class="fa fa-facebook"></i> Facebook'ta Takip Et</a></li>
<li class="bg-tw"><a href="#"><i class="fa fa-twitter"></i> Twitter'da Takip Et</a></li>
<li class="bg-gp"><a href="#"><i class="fa fa-google-plus"></i> Google+'da Takip Et</a></li>
</ul>
</nav></div>

# ile olan yerlere sosyal medya adreslerimizi yazıyoruz.






Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Hazır Sosyal Paylaşım Eklentisi - 11

Cumartesi, Temmuz 11, 2015 Yorum Yapmak İstermisiniz? icon18_edit_allbkg

Merhaba Arkadaşlar,
bu yayınımda sizlere yeni bir sosyal paylaşım eklentisinden bahsedeceğim.Sade ve şık bir eklenti üzerine gelince renk değiştiren güzel bir eklenti.

Nasıl Eklenir?
-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu ekliyoruz.
-Gerekli düzenlemeleri aşağıda belirttim.

<style>
.social-wrap {
margin:0;
padding:0;
}
.social-wrap ul li{
list-style:none;
border-bottom:none;
margin:0;
padding:0;
}
.social-wrap li a {
margin:0 5px;
padding:0;
width:60px;
height:60px;
float:left;
text-indent:-99999px;
background: #fff;
border:solid 1px #eee;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.social-wrap li a.facebook {
background: #fff url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.facebook:hover {
background: #fff url(http://4.bp.blogspot.com/-njqMpTvxYbs/UFM2yXm-AnI/AAAAAAAAEFU/yfm_dKxQ2hs/s1600/facebook.png) no-repeat -0px -0px;
}
.social-wrap li a.twitter {
background: #fff url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.twitter:hover {
background: #fff url(http://2.bp.blogspot.com/-BtalCDk0UGg/UFM206t5yfI/AAAAAAAAEFk/1cwjqImigQo/s1600/twitter-1.png) no-repeat -0px -0px;
}
.social-wrap li a.google-p {
background:#fff url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.google-p:hover {
background: #fff url(http://1.bp.blogspot.com/-qITbsA3n7_w/UFM2z36eMnI/AAAAAAAAEFc/PK9Cmf7JZd4/s1600/google.png) no-repeat -0px -0px;
}
.social-wrap li a.rss {
background:#fff url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat -0px -88px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.rss:hover {
background: #fff url(http://1.bp.blogspot.com/-xmXWc6_8mxw/UFM21nVC47I/AAAAAAAAEFs/Ydce5M-vkvw/s1600/twitter.png) no-repeat -0px -0px;
}</style>

<div class='social-wrap'>
<ul>
<li><a class='facebook' href='http://www.facebook.com/#' target='_blank'>Facebook</a></li>
<li><a class='twitter' href='http://twitter.com/#' target='_blank'>Twitter</a></li>
<li><a class='google-p' href='https://plus.google.com/#' target='_blank'>Google Plus</a></li>
<li><a class='rss' href='#' target='_blank'>Rss</a></li>
</ul>
</div>

# yazan yerlere sosyal medya adreslerimizi yazıyoruz...






Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Hazır Sosyal Paylaşım Eklentisi - 10

Çarşamba, Temmuz 01, 2015 3 Yorumlar icon18_edit_allbkg

Merhaba Arkadaşlar,
bu yayınımda sizlere blogger için hazır sosyal paylaşım eklentilerinden onuncusunu göstereceğim.Bir nevi yalancı bir eklenti de diyebiliriz çünkü eklentinin üzerinde takip sayısını kendimiz ayarlayabiliyoruz.Mesela Facebook için 2k+ şeklinde veya istediğimiz takipçi sayısını yazıyoruz.Güzel ve kullanışlı bir eklentidir.

Nasıl Kurulur?
-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapıştırıyoruz.Düzeltmemiz gereken yerleri aşağıda belirttim.


<style>
.btrix-social-slidebox {
    font: 16px normal 'Denk One', sans-serif;
    display: inline-block;
    position: relative;
    width: 95%;
    max-width: 200px; 
    padding: 12px;
}
.btrix-social-slide {
    width: 95%;
    max-width: 280px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.btrix-social-slide a {
    text-decoration: none !important; 
   }
.btrix-social-slide ul {margin-top:-5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.btrix-social-slide ul li {margin-bottom:15px;
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0;
 margin-left:10px;
}
.btrix-social-slide ul li a.facebook {
    border-left: 65px solid rgba(59, 89, 152, 1);
    color: rgba(59, 89, 152, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover {
    background: rgba(59, 89, 152, 1);
    border-left: 0px solid rgba(59, 89, 152, 0.1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.twitter {
    border-left: 65px solid rgba(64, 153, 255, 1);
    color: rgba(64, 153, 255, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover {
    background: rgba(64, 153, 255, 1);
    border-left: 0px solid rgba(64, 153, 255, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.gplus {
    border-left: 65px solid rgba(219, 74, 57, 1);
    color: rgba(219, 74, 57, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover {
    background: rgba(219, 74, 57, 1);
    border-left: 0px solid rgba(219, 74, 57, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest {
    border-left: 65px solid rgba(174, 45, 39, 1);
    color: rgba(174, 45, 39, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.pinterest:hover {
    background: rgba(174, 45, 39, 1);
    border-left: 0px solid rgba(174, 45, 39, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.pinterest:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}

.btrix-social-slide ul li a.rss {
    border-left: 65px solid rgba(255, 102, 0, 1);
    color: rgba(255, 102, 0, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss:hover {
    background: rgba(255, 102, 0, 1);
    border-left: 0px solid rgba(255, 102, 0, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
</style>

<div class="btrix-social-slide">
    <ul>
        <li><a class="btrix-social-slidebox facebook" href="https://www.facebook.com/kodblogcum"><p>17</p>Facebook </a></li>
        <li><a class="btrix-social-slidebox twitter" href="https://twitter.com/kodblogcum"><p>50+</p>Twitter</a></li>
        <li><a class="btrix-social-slidebox gplus" href="https://plus.google.com/#"><p>40+&nbsp;</p>Google+</a></li>
        <li><a class="btrix-social-slidebox pinterest" href="http://pinterest/kodblogcum"><p>20+&nbsp;</p>Pinterest</a></li>
        <li><a class="btrix-social-slidebox rss" href="http://feeds.feedburner.com/kodblogcum"><p>11+</p>RSS</a></li>
    </ul>
</div>

-Yukarda kodblogcum yazan yerlere kendi sosyal medya adreslerimizi yazıyoruz.
-# ile olan yerede Google Plus adresimizi yazıyoruz.





Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Sayfada Aşağı İnince Sağda Çıkan Sosyal Medya Eklentisi

Çarşamba, Temmuz 01, 2015 Yorum Yapmak İstermisiniz? icon18_edit_allbkg

Merhaba Arkadaşlar,
bu yayınımda sizlere değişik bir sosyal medya eklentisinden bahsedeceğim.Sayfada aşağı doğru indikçe sağ altta çıkan sosyal medya.Bu eklenti kullanıcınında dikkatini çekecektir sayfalarda dolaşırken sürekli karşısına çıkması sizi sosyal medyada takip etmeye yönlendirir.

Nasıl Kurulur?
-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapışıtırıyoruz düzeltmemiz gereken yerleri renkli olarak gösterdim.
Bu eklentiyi herhangi bir gadgete ekleyebiliriz illaki sağdaki gadget olacak diye bir şey yok.


<style>
#socialslide{background: rgb(41, 40, 40) url(http://3.bp.blogspot.com/-FZRJ9cS-Mkk/UXpZC0CGyrI/AAAAAAAAAgg/tnE5hftHXuM/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div id="socialslide" style="display: none;">
<a href="javascript:void(0);" onclick="return closesocialslide();" style="color: #555555; font-size: 10px; font-weight: bold; position: absolute; right: 10px; top: 14px;">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Sosyal Medyada Takip Et!</span><br />
<div style="float: left; margin: 15px;">
<g:plusone annotation="none"></g:plusone></div>
<div style="float: left; margin: 15px;">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fkodblogcum&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" style="border: none; height: 21px; overflow: hidden; width: 80px;"></iframe></div>
<div style="float: left; margin: 15px;">
<a class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-size="large" href="https://twitter.com/kodblogcum">Takip Et @kodblogcum</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>
<div class="clear">
</div>

-Yukarda kodblogcum yazan yerlere sosyal medya kullanıcı adreslerimizi yazıyoruz.


Hazır Sosyal Paylaşım Eklentisi - 9

Pazar, Haziran 28, 2015 3 Yorumlar icon18_edit_allbkg

Merhaba arkadaşlar,
bu yayınımda sizlere blogger sosyal medya eklenti serisinden yeni bir eklenti sunacağım.Üzerine gelince dönen sade bir eklenti.

Nasıl Eklenir?
-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu ekliyoruz.

<style>
.pakmax-fancyshare img {
-webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.pakmax-fancyshare img:hover {
-webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
</style>
<center>
<div class="pakmax-fancyshare">
<a href="https://www.facebook.com/#" target="_blank"><img src="https://lh5.googleusercontent.com/-4eFkq5v7Nnc/U751mgd8dAI/AAAAAAAABPI/o1oFUonb6ls/h120/facebook.png" /></a>
<a href="https://twitter.com/#" target="_blank"><img src="https://lh3.googleusercontent.com/-bCY0vgsXkGQ/U751nB8YmDI/AAAAAAAABPc/ZkXPELRl_Bs/h120/twitter.png" /></a><br />
<a href="https://plus.google.com/#" target="_blank"><img src="https://lh3.googleusercontent.com/-WS08B0GjgLE/U751mjOmKdI/AAAAAAAABPM/lbW8FzCnssY/h120/g%2B.png" /></a>
<a href="http://feeds.feedburner.com/#" target="_blank"><img src="https://lh3.googleusercontent.com/-gVfRoabNyCM/U751molueJI/AAAAAAAABPU/u_ZBHtjtigk/h120/Rss.png" /></a>
</div>
</center>





# ile olan yerlere sosyal medya kullanıcı adreslerimizi ekliyoruz.
Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Blogger Slider Eklentisi - 3

Cumartesi, Haziran 27, 2015 Yorum Yapmak İstermisiniz? icon18_edit_allbkg

Merhaba Arkadaşlar,
bu yayınımda sizlere blogunuz için güzel bir slider eklentiden bahsedeceğim.Css ile hazırlanmış olan boyutu uyarlanabilir,resimler ve başlıklar düzenlebilir olan güzel bir eklenti.

Nasıl Yaparız?
-Blogger Admin Panel'inden istersek blogger kodlarının içinden bi yere istersekte gadget olarak ekleyebiliriz.
-Kodlardan eklemek istiyorsak;
-Blogger Admin Panel'inden Şablon > Html'yi Düzenle diyoruz ve slider in nerde gözükmesini istiyorsan oraya aşağıdaki kodları ekliyoruz.
-Gadget olarak eklemek istiyorsak eğer;
-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve kodu ekliyoruz.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<style type="text/css">
/*Make sure your page contains a valid doctype at the top*/ 
#simplegallery1{ //CSS for Simple Gallery Example 1 
position: relative; /*keep this intact*/ 
visibility: hidden; /*keep this intact*/ 
border: 1px solid #666; 
}
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined) 
text-align: left; 
padding: 2px 5px; 
font: 10px normal verdana, arial; 
}
</style>
<script type="text/javascript" >
var simpleGallery_navpanel={ 
    loadinggif: 'http://2.bp.blogspot.com/-ksi5eL8Tbnw/TlVybEe2EeI/AAAAAAAAExc/bzJY4U3_5Dk/s400/ajaxload.gif', //full path or URL to loading gif image 
    panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container 
    images: [ 'http://2.bp.blogspot.com/-LzMDVlVfxmQ/TlVybqSABOI/AAAAAAAAEx8/riOJdIu1eRc/s400/left.gif', 'http://1.bp.blogspot.com/-ZkATWoPt8Q8/TlVybVMA4xI/AAAAAAAAExs/zoAjOL7erWY/s400/play.gif', 'http://4.bp.blogspot.com/-IlIucHdUM-I/TlVybkMej0I/AAAAAAAAEx0/yQvxG-paQVc/s400/right.gif', 'http://1.bp.blogspot.com/-qdHg1fyty6A/TlVybOlRciI/AAAAAAAAExk/oio-_kn2KO8/s400/pause.gif'], //nav panel images (in that order) 
    imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images 
    slideduration: 500 //duration of slide up animation to reveal panel 
}
function simpleGallery(settingarg){ 
    this.setting=settingarg 
    settingarg=null 
    var setting=this.setting 
    setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height) 
    setting.fadeduration=parseInt(setting.fadeduration) 
    setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0 
    setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty 
    setting.preloadfirst=(!jQuery.Deferred)? false : (typeof setting.preloadfirst!="undefined")? setting.preloadfirst : true //Boolean on whether to preload all images before showing gallery 
    setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play 
    setting.currentstep=0 //keep track of # of slides slideshow has gone through 
    setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles 
    setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide) 
    setting.oninit=setting.oninit || function(){} 
    setting.onslide=setting.onslide || function(){} 
    var preloadimages=[], longestdesc=null, loadedimages=0 
    var dfd = (setting.preloadfirst)? jQuery.Deferred() : {resolve:function(){}, done:function(f){f()}} //create real deferred object unless preloadfirst setting is false or browser doesn't support it 
    setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains "" 
    setting.$loadinggif=(function(){ //preload and ref ajax loading gif 
        var loadgif=new Image() 
        loadgif.src=simpleGallery_navpanel.loadinggif 
        return jQuery(loadgif).css({verticalAlign:'middle'}).wrap('<div style="position:absolute;text-align:center;width:100%;height:100%" />').parent() 
    })() 
    for (var i=0; i<setting.imagearray.length; i++){  //preload slideshow images 
        preloadimages[i]=new Image() 
        preloadimages[i].src=setting.imagearray[i][0] 
        if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length) 
            setting.longestdesc=setting.imagearray[i][3] 
        jQuery(preloadimages[i]).bind('load error', function(){ 
            loadedimages++ 
            if (loadedimages==setting.imagearray.length){ 
                dfd.resolve() //indicate all images have been loaded 
            } 
        }) 
    } 
    var slideshow=this 
    jQuery(document).ready(function($){ 
        var setting=slideshow.setting 
        setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV 
        if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found 
            alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.") 
            return 
        } 
        setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide 
            .css({position:'absolute', left:0, top:0}) 
            .appendTo(setting.$wrapperdiv) 
        setting.$loadinggif.css({top:setting.dimensions[1]/2-30}).appendTo(setting.$wrapperdiv) //30 is assumed height of ajax loading gif 
        setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects 
        setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects 
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled) 
            setting.descdiv=simpleGallery.routines.adddescpanel(setting) 
        $(setting.navbuttons).filter('img.navimages').css({opacity:0.8}) 
            .bind('mouseover mouseout', function(e){ 
                $(this).css({opacity:(e.type=="mouseover")? 1 : 0.8}) 
            }) 
            .bind('click', function(e){ 
                var keyword=e.target.title.toLowerCase() 
                slideshow.navigate(keyword) //assign behavior to nav images 
            }) 
        dfd.done(function(){ //execute when all images have loaded 
            setting.$loadinggif.remove() 
            setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')}) 
            setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')}) 
            slideshow.showslide(setting.curimage) //show initial slide 
            setting.oninit.call(slideshow) //trigger oninit() event 
            $(window).bind('unload', function(){ //clean up and persist 
                $(slideshow.setting.navbuttons).unbind() 
                if (slideshow.setting.persist) //remember last shown image's index 
                    simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage) 
                jQuery.each(slideshow.setting, function(k){ 
                    if (slideshow.setting[k] instanceof Array){ 
                        for (var i=0; i<slideshow.setting[k].length; i++){ 
                            if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div 
                                slideshow.setting[k][i].innerHTML=null 
                            slideshow.setting[k][i]=null 
                        } 
                    } 
                    if (slideshow.setting[k].innerHTML) //catch gallerydesctext div
                        slideshow.setting[k].innerHTML=null 
                    slideshow.setting[k]=null 
                }) 
                slideshow=slideshow.setting=null 
            }) 
        }) //end deferred code 
    }) //end jQuery domload 
}
simpleGallery.prototype={
    navigate:function(keyword){ 
        clearTimeout(this.setting.playtimer) 
        this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number 
        if (!isNaN(parseInt(keyword))){ 
            this.showslide(parseInt(keyword)) 
        } 
        else if (/(prev)|(next)/i.test(keyword)){ 
            this.showslide(keyword.toLowerCase()) 
        } 
        else{ //if play|pause button 
            var slideshow=this 
            var $playbutton=$(this.setting.navbuttons).eq(1) 
            if (!this.setting.ispaused){ //if pause Gallery 
                this.setting.autoplay[0]=false 
                $playbutton.attr({title:'Play', src:simpleGallery_navpanel.images[1]}) 
            } 
            else if (this.setting.ispaused){ //if play Gallery 
                this.setting.autoplay[0]=true 
                this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1]) 
                $playbutton.attr({title:'Pause', src:simpleGallery_navpanel.images[3]}) 
            } 
            slideshow.setting.ispaused=!slideshow.setting.ispaused 
        } 
    },
    showslide:function(keyword){ 
        var slideshow=this 
        var setting=slideshow.setting 
        var totalimages=setting.imagearray.length 
        var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0) 
            : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1) 
            : Math.min(keyword, totalimages-1) 
        setting.gallerylayers[setting.bglayer].innerHTML=simpleGallery.routines.getSlideHTML(setting.imagearray[imgindex]) 
        setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground 
            .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete: 
                clearTimeout(setting.playtimer) 
                setting.gallerylayers[setting.bglayer].innerHTML=null  //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below) 
                try{ 
                    setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage) 
                }catch(e){ 
                    alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e) 
                } 
                setting.currentstep+=1 
                if (setting.autoplay[0]){ 
                    if (setting.currentstep<=setting.totalsteps) 
                        setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1]) 
                    else 
                        slideshow.navigate("play/pause") 
                } 
            }) //end callback function 
        setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background 
        setting.fglayer=setting.bglayer 
        setting.bglayer=(setting.bglayer==0)? 1 : 0 
        setting.curimage=imgindex 
        setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length 
        if (setting.imagearray[imgindex][3]){ //if this slide contains a description 
            setting.$descpanel.css({visibility:'visible'}) 
            setting.descdiv.innerHTML=setting.imagearray[imgindex][3] 
        } 
        else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled) 
            setting.descdiv.innerHTML=null 
            setting.$descpanel.css({visibility:'hidden'})
        } 
    },
    showhidenavpanel:function(state){ 
        var setting=this.setting 
        var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1] 
        setting.$navpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration) 
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled) 
            this.showhidedescpanel(state) 
    },
    showhidedescpanel:function(state){ 
        var setting=this.setting 
        var endpoint=(state=="show")? 0 : -setting.descpanelheight 
        setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration) 
    } 
}
simpleGallery.routines={
    getSlideHTML:function(imgelement){ 
        var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide? 
        layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />' 
        layerHTML+=(imgelement[1])? '</a>' : '' 
        return layerHTML //return HTML for this layer 
    },
    addnavpanel:function(setting){ 
        var interfaceHTML='' 
        for (var i=0; i<3; i++){ 
            var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+simpleGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? simpleGallery_navpanel.imageSpacing.spacing+'px' : 0) 
            var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next') 
            var imagesrc=(i==1)? simpleGallery_navpanel.images[(setting.ispaused)? 1 : 3] : simpleGallery_navpanel.images[i] 
            interfaceHTML+='<img class="navimages" title="' + title + '" src="'+ imagesrc +'" style="'+imgstyle+'" /> ' 
        } 
        interfaceHTML+='<div class="gallerystatus" style="margin-top:1px">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>' 
        setting.$navpanel=$('<div class="navpanellayer"></div>') 
            .css({position:'absolute', width:'100%', height:setting.panelheight, left:0, top:setting.dimensions[1], font:simpleGallery_navpanel.panel.fontStyle, zIndex:'1001'}) 
            .appendTo(setting.$wrapperdiv) 
        $('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs 
            .css({position:'absolute', left:0, top:0, width:'100%', height:'100%'})
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"navpanelbg" div
            .eq(1).css({paddingTop:simpleGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div 
            .appendTo(setting.$navpanel) 
        return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects 
    },
    adddescpanel:function(setting){ 
        setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>') 
            .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'}) 
            .find('div').css({position:'absolute', left:0, top:0, width:'100%'}) 
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"gallerydescbg" div 
            .eq(1).css({color:'white'}).end() //"gallerydescfg" div 
            .eq(2).html(setting.longestdesc).end().end() 
            .appendTo(setting.$wrapperdiv) 
        var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext') 
        setting.descpanelheight=$gallerydesctext.outerHeight() 
        setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'}) 
        return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object 
    },
    getCookie:function(Name){ 
        var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair 
        if (document.cookie.match(re)) //if cookie found 
            return document.cookie.match(re)[0].split("=")[1] //return its value 
        return null 
    },
    setCookie:function(name, value){ 
        document.cookie = name+"=" + value + ";path=/" 
    } 
}
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({ 
    wrapperid: "simplegallery1", //ID of main gallery container, 
    dimensions: [600, 300], //width/height of gallery in pixels. Should reflect dimensions of the images exactly 
    imagearray: [ 
        ["RESİM URLSİ", "Resmin gideceği adres", "_new", "BAŞLIK 1"],
        ["RESİM URLSİ", "Resmin gideceği adres", "_new", "BAŞLIK2"],

        ["RESİM URLSİ ","Resmin gideceği adres", "_new", "BAŞLIK 3"],

        ["RESİM URLSİ", "Resmin gideceği adres", "_new", "BAŞLIK 4"],

        [RESİM URLSİ", "Resmin gideceği adres", "_new", "BAŞLIK 5"]
    ], 
    autoplay: [true, 2000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int] 
    persist: false, //remember last viewed slide and recall within same session? 
    fadeduration: 500, //transition duration (milliseconds) 
    oninit:function(){ //event that fires when gallery has initialized/ ready to run 
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause")) 
    }, 
    onslide:function(curslide, i){ //event that fires after each slide is shown 
        //Keyword "this": references current gallery instance 
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML) 
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc) 
    } 
})
</script>
<div id="simplegallery1"></div>
- Yukarda 600 , 300 yazan yere sliderın boyutlarını ayarlayın.
 - Kırmızı renkle belirttiğim RESİM URLSİ kısmına resimlerin url adreslerini ekleyin.
-  Resmin gideceği adres yazan yerede resme tıklandığında hangi adrese gideceğini ekleyin.
-  BAŞLIK yazan yerlere ise resimlerin açıklamasını yazın.


Yardım için yoruma yazabilirsiniz... Sağlıcakla Kalın...