Bilgi birikim bankası. | Oyun | Teknoloji | Hayat | Yaşam

Yandan Açılır Facebook ve Twitter Takipçi Kutusu

Yandan Açılır Facebook ve Twitter Kutusu

Blogger Blogunuz için , sayfanın yanından açılan facebook fan kutusu ve twitter fan kutusu eklentisi istermisiniz ?

Bu eklentimizle , blogger blogunuzda hem facebook hemde twitter fan kutusu blogunuza eklemiş olacaksınız , kullanışlı bir eklenti olan Yandan Açılır Facebook ve Twitter Kutusu eklentisiniz sizde blogger blogunuzda kullanmak için aşağıda anlatılan yolları uygulamanız yeterli..

Aşağıdaki kodu bulun.

</head>

Hemen üstüne aşağıdaki kodumuzu ekleyin ve kaydedin..

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

Yerleşim - Gadget Ekle - HTML/JavaScript ile açılan panele aşağıdaki kodlarımızı ekleyin..

<link rel="stylesheet" type="text/css" href="http://latesthack.googlecode.com/svn/mywidgets/2in1/2in1.css" /><script src="http://latesthack.googlecode.com/svn/mywidgets/2in1/twitter.js" type="text/javascript"></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: -240}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -240}, 500); }); }); </script><p style="display:none;"> 2 in 1 social sharing by<a href="http://www.latesthack.com">Latest Hack</a></p> <div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaVzfz5nXjoy-D-JlwVdVAreIptWLOiX6Cnbfveo3dooXce7ca95Zp8GVO9gswIXuN8hj5Y41sT3bGOUvLU-VEE9DW_jFgOEkY8Dy5pnGoQBrzi6ZMKhisKswWRdD_B5tuXqfmlxD_3XY/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dfacebook_right.png" alt="" /> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/xxxxxxxxxxamp;locale=en_GB&amp;width=238&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=256"   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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2TdHm2WfVIIv8pzdmJS_-lgtCyAxW0hVz0eNmdnGLY496gpPBwCH3R1wJjAwIiRcDToIMlDL-Jsfm79cWYcd4GekhKcgTy8_kZMNwAhN3RAoSyiuZEXr32LsSy-yyeTUC4ImRWO2Hlbs/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dtwitter_right.png" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("xxxxxxxxxx");</script></div></div></div>

Kod içinde kırmızı ile yazılmış olan yerlere , facebook ve twitter adreslerinizi yazınız..DEMO

<<< Bu Yazı için Arama Sonuçları >>>

Yandan Açılır Facebook ve Twitter Takipçi Kutusu , Facebook Takipçi Kutusu , Twitter Takipçi Kutusu , twitter fan box , facebook fan box

Devamını Gör

Yazı Altına Kalpli Paylaş Butonları Eklentisi

Bu eklentimizde, blogger blogunuzda yayınladığınız yazılarınızın/konularınızın altında, kalp şeklinde paylaş butonlarının nasıl ekleneceğini anlatacağız..

Oldukça şık bir görüntüye sahip olan Yazı Altına Kalpli Paylaş Butonları Eklentisini blogger blogunuza eklemek için aşağıdaki adımları takip edin , ön izlemesini aşağıdaki demo linkinden görebilirsiniz..

Aşağıdaki kodumuzu buluyoruz

</head>

Hemen üstüne aşağıdaki kodlarımızı ekliyoruz..


<style type='text/css'>
/* Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com */
ul.bbelog-social { list-style:none; margin:15px auto;display:inline-block; }
ul.bbelog-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.bbelog-social li a { display:block; width:55px; height:55px; padding-right:10px; position:relative; text-decoration:none; }
ul.bbelog-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.bbelog-social li.bbelog-facebook { background-image:url(&quot;http://tools.adityawebs.com/images/facebook.png&quot;); }
ul.bbelog-social li.bbelog-twitter { background-image:url(&quot;http://tools.adityawebs.com/images/twitter.png&quot;); }
ul.bbelog-social li.bbelog-google { background-image:url(&quot;http://tools.adityawebs.com/images/google.png&quot;); }
ul.bbelog-social li.bbelog-stumbleupon { background-image:url(&quot;http://tools.adityawebs.com/images/stumble.png&quot;); }
ul.bbelog-social li.bbelog-delicious { background-image:url(&quot;http://tools.adityawebs.com/images/delicious.png&quot;); }
ul.bbelog-social li.bbelog-reddit { background-image:url(&quot;http://tools.adityawebs.com/images/reddit.png&quot;); }
ul.bbelog-social li.bbelog-technorati { background-image:url(&quot;http://tools.adityawebs.com/images/technorati.png&quot;); }
/* Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
// Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com
$(document).ready(function () {
$(&quot;#bbelog-jqueryanime li&quot;).each(function () {
$(&quot;a strong&quot;, this).css(&quot;opacity&quot;, &quot;0&quot;);
});
$(&quot;#bbelog-jqueryanime li&quot;).hover(function () {
$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.2);
$(&quot;a strong&quot;, this).stop().animate({
opacity: 1,
top: &quot;-10px&quot;
}, 300);
}, function () {
$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1);
$(&quot;a strong&quot;, this).stop().animate({
opacity: 0,
top: &quot;-1px&quot;
}, 300);
});
});
// Yazı Altına Kalpli Paylaş Butonları Eklentisi eklentileri.blogspot.com
</script>

Şimdi bu kodumuzu buluyoruz..

<div class='post-footer'>

Bulduğumuz bu kodun altına , altta yer alan kodları ekliyoruz..DEMO


<style type='text/css'>
<!--
.style2 {font-size: smaller}
-->
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul class='bbelog-social' id='bbelog-jqueryanime'>
<li class='bbelog-facebook'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='bbelog-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='bbelog-google'>
<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'><strong>Google Bookmarks</strong></a>
</li>
<li class='bbelog-stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='bbelog-delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='bbelog-reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='bbelog-technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a></li>
</ul><br/>

</b:if>

<<< Bu Yazı için Arama Sonuçları >>>

Yazı Altına Kalpli Paylaş Butonları Eklentisi , Paylaş Butonları Eklentisi , Konu altına Paylaş Butonu , Paylaş Butonları Ekle , Konu içene Paylaş Butonları , Facebook Twitter Paylaş Butonu

Devamını Gör

Blogger Sitemap eklentisi

Blogger blogunuzda , sidebar kısmında yada blogunuzun istediğiniz bir yerinde sitemap göstermek istermisiniz ?

Blogger Sitemap eklentisi ile , Blogunuzda yazdığınız yazıları tarihine göre sıralayabilirsiniz, üstelik fazla yer kaplamayan bu eklenti çok kullanışlı..

Hemen anlatıma geçelim..

Yerleşim - Gadget Ekle - HTML/JavaScript seçin ve açılan yere aşağıdaki kodları yapıştırın.

<div style="overflow:auto; padding:5px; width:185px; height:300px; background-color: rgb(255, 255, 255); border:1px solid #ccc;"><script src="http://yourjavascript.com/524549651/sitemap.js"></script><script src="http://eklentileri.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Yukarıdaki kodlarda dikkat etmemiz gereken , kırmızı ile yazılmış olan yerleri kendinize göre düzenlemek , hepsi bu.. << DEMO >>

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Sitemap eklentisi , Blogger Sitemap Ekleme , Blogger Nasıl Sitemap Eklenir, Blogger Sitemap , Blogger Eklentileri , Sitemap Blogger , Blogger Site Haritası , site haritası , site , harita , site map

Devamını Gör

Blogger Jquery Slider Menu Eklentisi

Blogger blogunuzda slider menü kullanmak istermisiniz ? oldukça güzel bir eklenti olan Jquery Slider Menu Eklentisini blogger blogunuza eklemek için şağıdaki anlatılanları yapmanız yeterli..

Blogger blogunuzdaki ziyaretçilerinize önemli konularınızı , duyurularınızı göstermek için güzel bir eklenti...Kullanımı ve görüntüsüde oldukça hoş..

Hemen anlatıma geçelim..

Aşağıdaki kodumuzu bulalım..

]]></b:skin>

Hemen üstüne alttaki kodlarımızı ekleyelim..

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 500px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxdDiTPbUGFXQ-POKh301ZfdqIDjHmX0jC56VbFr1G13qXsTLsmkjb7V8kYxnFgQgThcNufvshZviPGJ3-qURmefW9a6LhqnViQEWxQA2s9oyl4DV-kmVQfiYFyiJMAQHctu9kGX0nkY10/s1600/paging_bg2.png) no-repeat;
display: none; /*--eklentileri.blogspot.com--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

Şimdide bu kodu bulalım..

</head>

Bu kodumuzunda hemen üstüne aşağıdaki kodlarımızı ekleyelim..

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

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){ 
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //eklentileri.blogspot.com

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(&quot;.image_reel&quot;).animate({ 
left: -image_reelPosition
}, 500 );

}; 

//Rotation + Timing Event
rotateSwitch = function(){ 
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //eklentileri.blogspot.com
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
}); 

//On Click
$(&quot;.paging a&quot;).click(function() { 
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
}); 

});
</script>

Yukarıdaki işlemleri yaptıysanız , kaydet diyelim..

Yerleşim kısmından blog kayıtları ( önerilir) üstüne gadget olarak aşağıdaki kodlarımızı ekleyelim..

<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window"> 
<div class="image_reel">

<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiibpu1Ce8p58flNP3nAP5Z082ff9-MTDyG3OD2f-TCldZYpliUwzSu7Bw8kG68V4iFxM_wQPDgrYhsdlu29yJl3Q0pElmVXEZvnex-R01Idpfd8ETMvsAZ6IFiZkls9Q5uPZy7te3wMFo0/s1600/slider-image-1.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNcT5LkY65nhmPFg7hSxUM4ERllPbISravMXbSyT2lKfJHAIy3CLweztaWPOp8qCURfpVI0ilZ-Evr9kZY1x_nzbYBvrH1fIHNEd0GbX_uANjaoqW07hUuN1x_M0_rS1bj9yvAkgfrHPu5/s1600/slider-image-2.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6k5C8VMbqOJ-hvtofebivlqt-IEFVvpEbKWk_DjxCTsvoI8L-srhKwwf30TIz539kywPfNF-ANIkKGyo6dTzdr1tDg_1QwhwO1asP8voK_X1_2m6yauMKaQKblJEWBKbNLmEpuF9w5sYg/s1600/slider-image-3.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6CXUNo5Etjmhogh5yX2pnLWLl-qPK2Y1JHR5M2mameyQ8gCiEJ3AAp60rVOyTlXiIseXTKX2Fqy3oSn0-zaz0ELvIn0DC8f5KtzxLRm54alpD9q4ttKoagekb1k80hR2z8Vd2qxdex_c/s1600/slider-image-4.jpg" alt="" /></a>

<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPCtJRn8SwkqHiKQCtVuGDw4aOUAg7cP26a1Ak4PMHUupSpIZYEoJ0Ym4Y5rfWDbMo1gIBQof97tNafyVg3bLePhDuB7YYyLqpdpR3vxCxbZd_2Al8hWNadZ9A7qBSr3HUJnb551ga2Qi3/s1600/slider-image-6.jpg" alt="" /></a>


</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>

</div>
</div>

</div> 

</div>

Yukarıdaki kırmızı olan yerleri kendinize göre düzenleyin..DEMO

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Jquery Slider Menu Eklentisi , Blogger Jquery Slider Menu , Blogger Jquery Menu Eklentisi , Blogger Jquery Menu , Blogger Slider Eklentisi , Blogger Jquery Eklentisi , Blogger Slayt Menu

Devamını Gör

Blogger Son Tweet Kusu Eklentisi

Blogger blogunuzda , twitter adresinizde yazdığınız son yazınızı , göstermek istermisiniz ?

Bu eklentimizi blogunuza gadget olarak ekleyerek , ziyaretçilerinizle twitterda yazdığınız son yazınızı paylaşabilirsiniz, görüntü açısındanda oldukça güzel bir eklenti olan Blogger Son Tweet Kusu Eklentisini mutlaka deneyiniz..

Aşağıdaki kodumuzu bulun..

]]></b:skin>

Yukarıdaki kodun hemen üstüne aşağıdaki kodlarımızı ekleyiniz..


twitter_update_list{
list-style:none;
}
#twitter_update_list li{
background: #f4f8f9; /* Old browsers */
background: -moz-linear-gradient(top, #f4f8f9 1%, #e8f0f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f4f8f9), color-stop(100%,#e8f0f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8f9', endColorstr='#e8f0f2',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f4f8f9 1%,#e8f0f2 100%); /* W3C */
box-shadow: 1px -1px 2px #bbc6c8;
-webkit-box-shadow: 1px -1px 2px #bbc6c8;
-moz-box-shadow: 1px -1px 2px #bbc6c8;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
padding:15px;
width:250px;
}

#twitter_update_list::after {
content: "";
position: relative;
left: 30px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #e8f0f2 transparent;
display: block;
width: 0;
}

Kaydedin ve yerleşim kısmından gadget ekle diyerek aşağıdaki kodlarımızı ekleyelim.

<ul id="twitter_update_list">
<li>Loading Tweets..</li>
</ul>
<a title="Follow Me" href="http://www.twitter.com/XXXXX" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNho0Sjx_kIwYeVjayDvl3XsAlY_smT_gWeNReGLkxegS2-WPAF944jadRlges7kmowOP-GX8ESpPAWEwNiDWl8ZaX512m52V9a4_pDGrUSPebvkg5C6aN55P2_53QeDclDNWB2lt888IK/s1600/twitter-bird-gadget.png" /></a>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/XXXXX.json?callback=twitterCallback2&count=1"></script>

Kırmızı ile yazılmış olan XXXXX yazıları yerine twitter hesabınızı yazının..DEMO

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Son Tweet Kusu Eklentisi , Blogger Tweet Kusu Eklentisi , Blogger Tweet Eklentisi , Blogger Twitter Eklentisi , Twitter eklentileri , Blogger Twitter yazıları eklentisi , Twitter yazılarını blogger da gösterme

Devamını Gör

Blogger Kapanabilir Bilgilendirme Çubuğu Eklentisi

Blogger blogunuzun altında , ziyaretçilerinizi bilgilendiren bir eklenti istermisiniz ? üstelik bu eklentimiz kapat butonu ile kapanabiliyor..

Blogunuza eklediğiniz bir özelliği , ziyaretçilerinizin ilgisini çekecek bir konuyu , veya reklam amaçlı kullanabileceğiniz bu eklentiyi blogger blogunuz için kullanmak isterseniz aşağıdaki adımı uygulayın ve Blogger Kapanabilir Bilgilendirme Çubuğu Eklentisini sizde blogger blogunuzda kullanın..

Aşağıdaki kodumuzu buluyoruz..

</body>

Bulduğumuz kodun hemen üstüne aşağıdaki kodları ekliyoruz..

<style type='text/css'>
#ut-sticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lRnOq9iqA5qTa5uRHt1sbHE0jPO1D6PWBqM6DufbO7HiSyrjBs-NXwjUbRvGTYkHokRIP0UhyphenhyphenMtJSnjLcnEuHu53EbyOWD6cNwHnLF-49eS7lccxKtxfxShpjO2ep602cgov4X4PNdzF/s1600/ut-bg.png&#39;) repeat; 
color:#fff;
text-align: center;
margin:0 auto; 
border-top: 1px solid #fff;
height:28px; 
font-size:13px; 
position:fixed; 
bottom:0; 
z-index:999; 
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px; 
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
font-color:#fff;
}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
</style>
<div id='ut-sticky'>
<p>Blogger Şeffaf bilgilendirme çubuğu eklentisi <a href='http://eklentileri.blogspot.com' target='_blank'>Blogger Eklentileri</a></p>
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById(&quot;ut-sticky&quot;);
crosstbox.style.visibility = &#39;hidden&#39;;
}
</script>

Dikkat etmemiz gereken , kırmızı ile yazılmış alanı kendinize göre uyarlayınız , ister yazı yazın , isterseniz link verin , bilgilendirme çubuğunda görünecek alan burası..DEMO

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Kapanabilir Bilgilendirme Çubuğu Eklentisi , Blogger bilgilendirme çubuğu , Blogger bilgi kutusu eklentisi , blogger sayfa altında bilgilendirme , blogger kapanabilir bilgilendirme çubuğu

Devamını Gör

Blogger Yazı Boyutu Değiştirme Eklentisi

Blogunuzda ziyaretçilerinizin yazı boyutunu değiştirmesini istermisiniz ? Bu blogger eklentimizde , sitenize giren ziyaretçiler , konularınız içindeki yazıların boyutuyla oynayabilir, yani isterlerse küçültebilir , isterlerse büyültebilirler..

Yararlı bir eklenti olduğunu düşündüğümüz bir blogger eklentisi olan Blogger Yazı Boyutu Değiştirme Eklentisini blogunuza eklemek için aşağıdaki adımları takip edin..

ilk olarak aşağıdaki kodumuzu buluyoruz..

</head>

Bu kodumuzun hemen üstüne , aşağıdaki kodu ekliyoruz..

<!-- eklentileri.blogspot.com kod başlangıcı -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){

//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array(&#39;span&#39;,&#39;.section2&#39;);
section = section.join(&#39;,&#39;);

// Reset Font Size
var originalFontSize = $(section).css(&#39;font-size&#39;); 
$(&quot;.resetFont&quot;).click(function(){
$(section).css(&#39;font-size&#39;, originalFontSize);
});
// Increase Font Size
$(&quot;.increaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});

// Decrease Font Size
$(&quot;.decreaseFont&quot;).click(function(){
var currentFontSize = $(section).css(&#39;font-size&#39;);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(section).css(&#39;font-size&#39;, newFontSize);
return false;
});
});
</script>
<!-- eklentileri.blogspot.com kod sonu -->

Yukarıdaki işlemi yaptıktan sonra , şimdi ise aşağıdaki kodumuzu buluyoruz.

<div class='post-header-line-1'/>

Bulduğunuz kodun hemen altına , aşağıdaki kodlarımızı ekliyoruz..

<!-- eklentileri.blogspot.com kod baslangıcı -->
<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:right; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiii3rF3j6Wg7GWx1SKGy1s3mDRKCJB8fEoBl6s14UO7vdRlwNjBzKnwljhxKfRu8wfktp3IvYakWzMBZcvK-8SUXoL2jzHg_NcSTvNvEbDQhbjV-YzVbnTK-uGvr3fTHMz9tO8bntJ9LM/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis4IJYO8xV-tQvDRQip2GvzgbQzq9O8WVivRRCfSKUpt2diKuBnQA_FOTVRwhcME9pYPnXT79YQWRhlDBSjVewJapRoe5s2AIA64PdvpfcrbaxlDMTtrhTOFMdrt97zxLP3Xwxbi7RjTQ/s1600/bigger-font+-+Copy.png'/></a> 
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVR1ANsDzeTvJcayrYidCJ_mUJaP0EYy1d6VWcz1fLMi0cgCIMtxDPmmyBoG7-I88JLNGMPvozObnK0dnkXs8J5j2T5npmU4GfFHbHFk37VOLCo_b_NufkCCjCzb6lMFGctf0TC7mxV_U/s1600/smaller-font.png' style='cursor: hand;'/></a> 
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4GAxPc43_TCYX_seEV5KCBN52EWHXR7f9H1LQqDyhiHS7xVSdL63pLk55B5tPgs4DcDf7m2upeTBt1elN9-XnwvfLjH8Y263hyphenhyphenLlypSnrNFUGs2ESxM_KGkylxaooiH3WvnELfNyU2lQ/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
<!-- eklentileri.blogspot.com kod sonu -->

Son olarak bu kodu bulun.

<data:post.body/>

Bu kodla değiştirin

<span><data:post.body/></span>

Artık Blogger Yazı Boyutu Değiştirme Eklentisine sahipsiniz...güle güle kullanın..DEMO

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Yazı Boyutu , Blogger Yazı Boyutu değiştirme , Blogger Yazı Boyutu ayarlama , Blogger Yazı ayarları , Blogger Metin Boyutu , Blogger Metin Boyutu ayarlama , Blogger Text Resize

Devamını Gör