Archive for 06/21/12

CSS Buton Yapımı (Balon Efektli Farklı Boy ve Renklerde)

Hepimiz blogumuzda zaman zaman izle,demo görünüm,indir,bağlan yada farklı amaçlar için butonlar kullanıyoruz.Bugün sizlere farklı amaçlar için kullanabileceğimiz farklı boyutlarda ve renklerde butonlara ait CSS kodlarını vereceğiz.Butonlar görünüm olarak resimde gördüğünüz gibi, maus ile buton üstüne geldiğimizde buton içerisinde baloncuklar uçuşuyor, görünüm olarak gerçekten çok şık ve bir okadarda kullanışlı olan butonları uygulayacağınız birkaç basit işlem sonrasında sizde blogunuzda kullanabilirsiniz.

Blogger kullanıcıları için tasarlanmış olan,resimde ve aşağıda örnek olarak gördüğünüz butonları blogunuza uygulamak için:
öRNEK GÖRÜNÜM öRNEK GÖRÜNÜM öRNEK GÖRÜNÜM

Blogger Buton için CSS kodlarını blogumuza ekliyeceğiz.

Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin
Widget Şablonlarını genişlet kutucuğunu işaretleyin
HTML kodları içerisinde]]></b:skin>kodunu Ctrl+F yardımı ile aratıp bulun.
Aşağıdaki kodu kopyalayarak bulduğumuz]]></b:skin> kodundan önceki kısma yapıştırın.

.button {
    font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
    background-position: bottom left;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
/* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
/* A 1px highlight inside of the button */
    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;
    box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
    background-position: top left;
    background-position: top left, bottom right, 0 0, 0 0;
}

.button:active {
/* Moving the button 1px to the bottom when clicked */
    bottom: -1px;
}
/* The three buttons sizes */
.button.big {
    font-size: 30px;
}

.button.medium {
    font-size: 18px;
}

.button.small {
    font-size: 13px;
}
/* A more rounded button */
.button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
    color: #0f4b6d !important;
    border: 1px solid #84acc3 !important;
/* A fallback background color */
    background-color: #48b5f2;
/* Specifying a version with gradients according to */
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover {
    background-color: #63c7fe;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
    color: #345903 !important;
    border: 1px solid #96a37b !important;
    background-color: #79be1e;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover {
    background-color: #89d228;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
    color: #693e0a !important;
    border: 1px solid #bea280 !important;
    background-color: #e38d27;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover {
    background-color: #ec9732;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button {
    color: #525252 !important;
    border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover {
    background-color: #b6bbc0;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYeFrItOHTH-ZF0SHG2gew0lb1mHU1XmMxlUcXfeGHhKCFWoqF80YK-by8MsJn4cLLADvJdUJk2wOi08d51WAMbYkbxy9NouUr8n1b2gW3nGpmBjGRHSbFYw68ncLcLWsBBp8B1ROuMk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

Blogger Buton için Html Kodlarımızı Ekliyeceğiz:Aşağıda gördüğümüz kodlardan hangi boyut ve rengi istiyorsak ona ait kodu butonun görünmesini istediğimiz yere html modundayken yapıştırıyoruz.

1.Big Button için Html Kodları (Buton Rengine Göre bir kod seçin)

<a href="Buton Linki Buraya" class="button big blue">Buton Metni</a>
<a href="Buton Linki Buraya" class="button big green">Buton Metni</a>
<a href="Buton Linki Buraya" class="button big orange">Buton Metni</a>
<a href="Buton Linki Buraya" class="button big gray">Buton Metni</a>

2.Medium Button için Html Kodları ( Buton Rengine Göre bir kod seçin )

<a href="Buton Linki Buraya" class="button blue medium">Buton Metni</a>
<a href="Buton Linki Buraya" class="button green medium">Buton Metni</a>
<a href="Buton Linki Buraya" class="button orange medium">Buton Metni</a>
<a href="Buton Linki Buraya" class="button gray medium">Buton Metni</a>

3.Small Button için Html Kodları ( Buton Rengine Göre bir kod seçin )

<a href="Buton Linki Buraya" class="button small blue">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small green">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small orange">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small gray">Buton Metni</a>

4.Small Rounded Button için Html Kodları ( Buton Rengine Göre bir kod seçin )

<a href="Buton Linki Buraya" class="button small blue rounded">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small green rounded">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small orange rounded">Buton Metni</a>
<a href="Buton Linki Buraya" class="button small gray rounded">Buton Metni</a>

Devamını Oku

Blogger E-Posta Abonelik Formu Sade ve Şık Tasarımlı

Blog Okulu 11:52:00 5 Yorumlar Edit

Blogger için tasarlanmış olan gayet sade ve kullanışlı eklemesi kolay abone formunu blogunuza eklemeyi anlatcağız.Ziyaretçileriniz Email adreslerini yazıp kaydet butonuna bastıklarında yayınladığınız yeni yazılarınız abone olan kişilerin mail adreslerine kısa özet halinde gider.Böylelikle abone olan ziyaretçiler yeni yazılarınızdan anında haberdar olur.İyi bir ziyaretçi ve backlink alma yöntemi olduğunu belirtmek gerekir.Normalde bloggerin kendi eklentileri içerisinde de E-Posta ile Takip Et şeklinde bir eklenti zaten mevcut, bizim yayınladığımız tasarım olarak değiştirilmiş, göze biraz daha hoş gelen, aynı işi yapan bir eklenti.
DEMO GÖRÜNÜME-Posta Aboneliği Formunu Blogunuza Eklemek için:

Blogger Hesabımızla Giriş Yapıyoruz.
Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip, açılan gadget içerisine aşağıdaki kodu kopyalayıp yapıştırıyoruz.

<!-- Start E-Posta Form Code http://www.blogokulu.org/ -->
<style>
.abt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNkEBlInnkcAluuLphpZqfYgLGytzqwN4T30cTyHDTSQpJoXDQhEIsTBYHiRGcYQyiK_59H72oxAgL1zUt0XuOQQSPaIlU96053opW3qBrsnDlUJfz4nU_MbMSjr3F2-sNVSVst9Tme3Y/h120/service-email.jpg) no-repeat -8px 10px ;
width:240px;
padding:10px 0 0 65px;
float:left;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#0084CE;
box-shadow: 1px 1px 5px 1px #eee;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

.abt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4.4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);

}
.abt-emailsubmit:hover{
background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1);
}
.textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1);
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #888; font-size: 12px;
height: 30px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px; }

</style>

<div class='abt-email'>
E-Posta Aboneliği
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogOkulu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="E-Mail Adresiniz..." type="text" />
<input type="hidden" value="BlogOkulu" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="abt-emailsubmit" value="Kaydet" type="submit" />
</form> 

</div>
<!-- End E-Posta Form Code http://www.blogokulu.org/ -->

Kod İçerisinde:

http://feedburner.google.com/fb/a/mailverify?uri=BlogOkulu yazan yere BlogOkulu yerine kendi feedburner adresinizi yazıyorsunuz.
Renkli olarak belirttiğim diğer E-Posta Aboneliği, E-Mail Adresiniz...,Kaydet yazılarınıda E-Posta Abonelik formunda gördüğünüz ve metin üzerinde değişiklikler yapabileceğiniz kısımlar.

Son olarak değişiklikleri yaptıktan sonra eklediğimiz E-Posta Abonelik Gadgetini kaydedip görünmesini istediğimiz yere sürükleyip bırakıyoruz.Blogger için E-Posta Abonelik Formu Kutusu kullanıma hazır.

Devamını Oku

Blogunzu Yedekleyin - Blog Nasıl Yedeklenir?

BLOG OKULU 00:13:00 6 Yorumlar Edit

Zaman zaman yaptığımız anlatımalarda şablonunuzun yedeğini alın diye yazıyoruz, aldığım yorum ve maillerde bir çok kişinin bunu nasıl yapılacağını sorması beni bu yazıyı yazmaya teşvik etti.Şablon yedeği alma ve blog içeriğinizin yedeğini (blogunuzu kopyalamayı) almayı sizlere anlatacağız.
Blogunuzun tamamını iki aşamada yedekliyebilirsiniz.Birinci Tasarım olarak blogunuzu yedekleme, ikincisi ise içerik olarak blogunuzu yedekleme.
Blogger Şablon (Tasarım) Yedekleme:Hepimiz blogumuzda widget ekliyerek yada html-css kodları ile oynuyarak bir çok değişiklik yapıyoruz.Zaman zaman eklediğimiz kodlarda yada ekleme yönteminde hata olduğunda blogumuz çalışmaz hale geliyor yada yamuk yumuk bir blog ortaya çıkıyor.Birde şablonu kaydettikten sonra görünüme baktıysak eyvah yandık!!! işin yoksa eklediğin kodları bul ve sil, içinden çıkılmaz bir hal alıp iş çok zor bir hale geliyor, işte bu zor işi blog şablonu yedekleme ile çok kolay hale getireceğiz.Diyelim ki yeni bir eklenti eklediniz, kodlarda değişiklik yaptınız eklenti çalışmadı yada kodlar bozuldu blog görünmez oldu iki tıkla yedeklediğiniz şablonu yüklüyerek eski görünümüne blogunuzu kavuşturabilirsiniz.Bilgisayardaki sistem geri yükleme gibi birşey.

Şimdi Videolu olarak şablon yedeklemeyi ve yüklemeyi sizlere anlatalım:

Devamını Oku

Kaydol: Kayıtlar ( Atom )