Posts Tagged blogger

Blogger 4 in 1 Yandan Açılan Facebook , Twitter , Google , Email Eklentisi



DEMO ADRESİ


<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}/* right side style */#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}#google_plus_right{z-index:10003;background-color:#f2f2f2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px;}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0;}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px;}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0;}#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px;}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0;}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px;}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0;}#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}.box-title1{border:1px solid #ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;margin:10px 0;}.enteryouremail{background:#fff !important;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px;}.submitbutton{background:#f2f2f2;border:1px solid #F66303;/*box-shadow*/-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;border-radius:5px;cursor:pointer;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="http://4.bp.blogspot.com/-pzM3IebaPHg/T3BF_Cp5ChI/AAAAAAAABTA/uPlhRvqJF2Y/s1600/helperblogger.com-facebook-icon.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/XXXXX&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356" scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="http://2.bp.blogspot.com/-DoXgccAh568/T3BGBaBhUUI/AAAAAAAABTY/apMnhTjbnnU/s1600/helperblogger.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('TWİTTERADRES').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="http://1.bp.blogspot.com/-08OfKvSFgp8/T3BF_ifkYhI/AAAAAAAABTI/H-tCpPulBME/s1600/helperblogger.com-google-plus-icon.png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">You can also receive Free Email Updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNERADRES', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="FEEDBURNERADRES" name="uri" type="hidden" /><input value="Submit" type="submit" /></form></center><img id="feedburner_right_img" src="http://2.bp.blogspot.com/-92lVWafnEt0/T3BGAWfGPKI/AAAAAAAABTQ/r61lpGWJqew/s1600/helperblogger.com-subscribe-icon.png" /></div></div></div></div> 

4 in 1 Yandan Açılan Facebook , Twitter , Google , Email Eklentisi

Blogger blogunuzda , yandan açılan facebook takipçi kutusu , Twitter son yazılarınız , Google + butonu ve email takip eklentisi istermisiniz..

Oldukça kullanışlı ve güzel bir eklenti olan 4in1 Yandan Açılan Facebook , Twitter , Google , Email Eklentisini blogger blogunuza eklemek için aşağıdaki yolu izleyin , Aşağıdaki kodu blogunuza Gadget olarak ekleyin..Kod için bulunan Kırmızı yazılmış yerlere , facebook twitter ve feedburner adreslerinizi yazınız , ( https://www.facebook.com/XXXXX , TWİTTERADRES , FEEDBURNERADRES Kısımlarına kendi adreslerinizi yazınız..)

Alıntıdır:eklentileri.blogspot.com

Yorum Yapın

Blogger Açılıp Kapanır Twitter Takipçi Kutusu

Daha önce bu açılır kapanır twitter takipçi kutusunun benzeri olarak twitter sabit takipçi kutusu ve facebook açılır kapanır takipçi kutusunu görmüştüm. Yine blogları dolanırken yabancı bir blogda bu eklentinin anlatımını gördüm ve hoşuma gitti sizinle paylaşmak istedim. Kullanımı oldukça basit ve görünümü göze hoş geliyor

Eklentiyi kullanabilmek için aşağıdaki yönergeleri izleyin…

1. Bölüm…

1. İlk olarak blogunuz Html/Javascript kodları arasında aşağıdaki kodu bulun

Kod:

</head>

2. Yukarıdaki kodu bulduktan sonra hemen üzerine aşağıdaki kodu ekleyin.

Kod:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js&#8221; type=”text/javascript”></script>

3. Şablonu Kaydedin.

2.Bölüm…

1. Kumanda Paneli → Tasarım → Sayfa Ögeleri kısmından istediğiniz yere → Gadget Ekle diyerek → Html Javascript’i seçin ve açılan sayfadaki içerik kısmına aşağıdaki kodları kopyalayıp yapıştırın.

Kod:

<script type=”text/javascript”>
//<!–
$(document).ready(function() {$(“.twitterboxot”).hover(function() {$(this).stop().animate({right: “0”}, “medium”);}, function() {$(this).stop().animate({right: “-250”}, “medium”);}, 500);});
//–>
</script>
<style type=”text/css”>
.twitterboxot{background: url(“http://3.bp.blogspot.com/-vBA1M7jZJAU/TyfkrODEvwI/AAAAAAAACYE/7CrewcpmHw4/s1600/twitter.png&#8221;) no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 240px;
padding: 0 5px 0 46px;
width: 245px;
z-index: 99999;
position:fixed;
right:-250px; top:20%;}
</style>
<div><div>
<script type=”text/javascript”
src=”http://script-ot.googlecode.com/svn/twitterbox.js”></script><div
id=”twitterfanbox”></div
id=”twitterfanbox”></div><script
type=”text/javascript”>fanbox_init(“hittoadam”);
</script
type=”text></div>

2. Kaydet deyip çıkın.

3. 2. kodda ‘hittoadam‘ kısmını bulun ve kendi twitter id’nizi yazın.

Eveet hayırlı olsun arkadaşlar, yapamadığınız bir yer olursa yorum formunu kullanabilirsiniz

Hepinize iyi bloglamalar…

Alıntı:
Yazar: Hit Adam
Konu: Blogger
Kaynak: Blogger: Açılır Kapanır Twitter Takipçi Kutusu

Yorum Yapın

Blogspot otomatik devamını oku eklentisi

Blogspot ucretsiz blogları olan bilir.Yazı yazarsınız ve yazınız cok uzundur.Anasayfayı acan bir zıyaretçi neyi ziyaret ettiğini şaşırır,çünkü yazının uzayıp gitmiştir.Bu çirkin goruntuyu ortadan kaldırmak için asagidaki eklentiyi paylaşan arkadasın makalesini okuyun.

ornek site:sohbet24.blogspot.com

 

Blogger’ın normalde bu özelliği var. Bazı blogcular bu özelliği sonradan öğrendiğinde “Ne her yazıya tek tek ‘more’ye tıklayıp keseceğim mi ?” der. Bunun daha kolay bir yolu vardır. İşte şimdi size bu eklentiyi anlatacağım.

Blogger hesabımıza giriş yaptıktan sonra Tasarım > HTML’yi Düzenle kısmına gelip Widget Şablonlarını Genişlet kutucuğunu işaretliyoruz.

Şimdi kodlarımızı ekleyelim.

CTRL + F yaparak kod penceremizden </head> etiketini buluyoruz. Hemen sonrasında aşağıdaki kodu, bulduğumuz </head> kodunun üst kısmına yerleştiriyoruz

<!– Auto read more script Start –>

var thumbnail_mode = “yes”; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;

//”)!=-1){
s[i] = s[i].substring(s[i].indexOf(“>”)+1,s[i].length);
}
}
strx = s.join(“”);
}
chop = (chop
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = “”;
var img = div.getElementsByTagName(“img”);
var summ = summary_noimg;
if(thumbnail_mode == “yes”) {
if(img.length>=1) {
imgtag = ‘‘;
summ = summary_img;
}
}
var summary = imgtag + ‘

‘ + removeHtmlTag(div.innerHTML,summ) + ‘

‘;
div.innerHTML = summary;
}
//]]>

<!– Auto read more script End –>

Bu kısmı hallettikten sonra </head> kodunu bulurken yaptığımız işlemi <data:post.body/> için yapıyoruz. Daha sonra bulduğumuz kodu seçerek aşağıdaki kodu yerine yapıştırıyoruz.

<!– Auto read more Start –>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<data:post.body/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
<data:post.body/>
<b:else/>

createSummaryAndThumb("summary");

<a class=’more’ expr:href=’data:post.url’>Read more …</a>
</b:if>
</b:if>
<!– Auto read more End –>

Kodumuzu kendimize göre düzenleyelim:

thumbnail_mode: Temamıza eklediğimiz kodlar içerisindeki bu kod, yazıyı kestikten sonra küçük resim koyma yada koymama seçeneğini bize sunuyor. Eğer “yes” dersek küçük resim görünür, “no” dersek görünmez.

summary_img: Resim olursa, kaç karakter yazı göstermek istediğimizi giriyoruz. Yukardaki kodda yanında değer var o kısım karakter sayısıdır.

summary_noimg: Yukardaki işlemin aynısı fakat bunda resim yok. O yüzden karakter sayısını yukardakinden fazla girmemizde fayda var.

img_thumb_height ve img_thumb_width: Yazıyı kestikten sonra oluşan küçük resimin hangi boyutlarda küçülmesini istiyorsanız yanındaki değerleri onunla değiştirin. Sadece birini değiştirirseniz diğeri ona göre oranlanır.

Read more …: Kodumuzun içindeki bu yazı da, yazıyı kestikten sonra ardına eklenecek kelimedir. “Devamını Gör“, “Devamını Oku” gibi değiştirebilirsiniz.

ALINTIDIR

Kaynak:

Yazar: Furkan ÖZDEN
Kategori: Blogger

Yorum Yapın

Blogger ve Web Sitesi Sahiplerinin Bilmesi Gereken HTML Etiketler

Yeni ücretsiz servisler ve hazır sistemler ile bloggerlar için artık yazılarını yayınlamak, kendi istedikleri yazı formatlarını uygulamak çok pratik hale geldi. Hazır web teknolojilerinin sunduğu kolaylıklarla birlikte blog ve web sitesi sahipleri artık HTML kodlamaya gerek duymuyor. Ancak zaman zaman oluşan bazı durumlarda sitenizde hızlı bir değişiklik yapmak için HTML ile bir metni biçimlendirmek gerekebiliyor. Bu yazıda sizlere günlük kullanım için faydalı olabileceğini düşündüğümüz birkaç basit HTML etiketleri paylaşacağız.

Başlamadan önce anlatımı kolaylaştırmak için HTML etiketleri yapacak bazı temel kurallarla sizi tanıştıralım…
1.    <html> ve </html> Etiketleri sayfaların başlangıç ve bitişini belirler.
2.    <head> ve </head> Sayfanın başlık bilgilerini belirler, her başlangıç etiketi gibi bu noktada bir bitiş etiketi ile takip edilmelidir.
3.    <title> ve </title>  Sayfada bulunan içerik tanıtımın yapıldığı alandır.
4.    <br />  Bazı etiketlerin açıklaması için boşluk bırakarak şekil vermeniz gerekebilir. Yazılarınızda boşluk bırakmak için <br /> yi kullanmanız gerekecektir.
Blogcular için en pratik HTML metin biçimlendirme kodları:

Yazınızı kalın yapmak için: <b>yazı</b> “Yazı” olan  bölüme istediğiniz metini girmeniz gerekmektedir.
Yazınızı italic yapmak için: <i>yazı</i>
Yazınızı altı çizgili biçimlendirmek  için: <u>yazı</u>
Yazıya renk vermek için: <font color=”red”>Yazı</font>  Yazı olan bölüme rengini değiştirmek istediğiniz kelime / metninizi girerek color bölümünden yazının hangi rengi almasını istiyorsanız onu yazmalısınız. Örneğin yazınınızın kırmızı olması için color bölümüne red yazmanız gerekmektedir.

Hypertext Oluşturma:
Yazınınız içine linki olduğu gibi koymak yerine ilgili kelimelere link vererek kullanıcıları bu yolla ilgili web sitelerine  yönlendirebilirsiniz

Yazılarınıza Link vermek için: <a href=”URL”>Yazı</a>
Link oluşturmak için “URL” yazan yere yönlendireceğiniz adresi, “Yazı” bölümüne ise link vereceğiniz metni yazıyorsunuz.

Resime link vermek: <a href=”URL”><img src=”Resim URL’si”><a>
Url yazan bolüme kullanıcınızı yönlendirmek istediğiniz sitenin adresini, resim bölümüne ise resmin url’lsini yazmanız gerekmektedir.

Sayfaya resim ekleme:
Blog ve web site sahipleri için görsel kullanmak en az yazı kadar önemlidir. Hazır şablon yoluyla görsel eklemek yerine HTML ‘i kullanarak eklemek isterseniz;

Resim ekleme: <img src=”dosya-adi” alt=”…” align=… >
Align ile ekleyeceğiniz görselin konumuna karar verebilirsiniz. Örneğin görseli sağa yanaşık olarak konumlandırmak istiyorsanız; <img src=resim.gif align=right> şeklinde yazmalısınız.

Paragraf oluşturma:

Paragraf oluşturmak için :<p>yazı<p>
Yazı olarak yazılmış yere paragraf olarak yer almasını istediğiniz metni girerek metininizde paragraf oluşturabilirsiniz.

Yorum Yapın