Blogger İçin Aşağı Doğru Açılır Menü Eklentisi

Blogger’ınıza yeni bir açılır menü eklemek istiyorsanız bu eklenti tam size göre. Bu eklenti eklendiği zaman üzerine gediğiniz zaman aşağı doğru tıklayabileceğiniz sekmeler açılıyor. Görselden de gördüğünüz gibi bir menü karşınıza çıkıyor. 

Bu eklentiyi edinmek için aşağıdakileri yapabilirsiniz. 

Yerleşim – Gatget Ekle – HTML/JavaScript yolunu takip ederek aşağıdaki kodu yapıştırın. 

Kod: 

<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#2059DC;
border-radius:10px;
-moz-border-radius:10px;
border:2px solid #FFF;
width:202px;
height:20px;
color:#FFFFFF;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}


#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}


#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#9AB2EA;
margin:15px 0;
padding:0 15px;}


#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}


#bmenu li a:hover{
color:#fff;}


#bmenu:hover{
z-index:5;
height:175px;
</style>


<div id="bmenu">
<h3>
Açılır Menü</h3>
<ul>
<li><a href="#">MENÜ 1</a></li>
<li><a href="#">MENÜ 2</a></li>
<li><a href="#">MENÜ 3</a></li>
<li><a href="#">MENÜ 4</a></li>
<li><a href="#">MENÜ 5</a></li>
</ul>
</div> 

Kodlar bunlar. Kırmızı yere görüntü başlığınızı, mavi yerlere menü başlıklarınızı, sarı yere de menülere tıklandığı zaman gidilmesini istediğiniz linkleri koyun. Bu eklentinin demosu bu bağlantıdadır. Bakabilirsiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger’da Gazete Yazısı Gibi Görünen Yazı Tarzı Eklentisi

Blogger bloğunuzda yazılarınızın görseldeki gibi görünmesini istiyorsanız yapmanız gereken şey size vereceğimiz kodları değerlendirmek. 

Kodlar: 

<table cellpadding="10" cellspacing="10"><tbody>
<tr><td align="justify" valign="top" width="320">Deneme Yazısı Sol Tarafı</td><td align="justify" valign="top" width="300">Deneme Yazısı Sağ Tarafı</td></tr>
</tbody></table> 

Yukarıkdaki kodları nereye yapıştıracaksınız? Kodları yapıştıracağınız yer şurasıdır. Yeni yayın diyeceksiniz. Karşınıza gelen sayfada sol köşede “oluştur/HTML” adında bir buton gelecek. HTML’ye tıkladığınız zaman yazının kod sayfası açılır. Yukarıdaki kodları oraya yapıştıracaksınız. Herhangi bir yere yapıştırabilirsiniz. 

Ancak şuna dikkat edin. Kırmızı ile geçen yer sol taraftaki yazınız, mavi ile geçen yer ise sağ taraftaki yazınızdır. Bunu dikkate alarak düzenleme yapın.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Resimli Benzer Yazılar Eklentisi

Blogger bloğunuzda benzer yazıları resimli bir şekilde ziyaretçilerinize göstermek istiyorsanız bu eklentiyi kullanmalısınız. Bu eklentiyi nasıl Blogger bloğunuza eklersiniz? 

İlk olarak aşağıdaki kodu bulun. 

</head> 

Bu kodu “Şablon” – “HTML’yi düzenleden bulabilirsiniz. Kodu bulduğunuz zaman hemen üstüne aşağıdaki kodları yapıştırın. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
text-transform:none;
padding-left:5px;
}
#related-posts li {
list-style:none;
}
#related-posts h2{
font-size: 18px;
font-weight: bold;
color: #003300;
}
#related-posts a{
font-size: 16px;
color:#868686;
}
#related-posts a:hover{
color:black;
}
a.hidden img{
filter:alpha(opacity=70);
-moz-opacity: 0.5;
opacity: 0.5;
}
a.hidden:hover img{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;}
</style>
<script src='http://yourjavascript.com/1124875421/benzer.js' type='text/javascript'/>
</b:if> 

Kodu yapıştırdıktan sonra şimdi de aşağıdaki kodu bulun. 

<data:post.body/> 

Kodu bulduktan sonra kodun altına aşağıdaki kodları yapıştıralım. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle=&quot;BENZER YAZILAR&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if> 

Yapacağınız işlemler bu kadardır. Eğer bir yanlış yapmadıysanız eklentiniz hazır demektir.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Otomatik Thumbnail ve Devamını Oku Eklentisi

Blogunuzdaki yazılarda devamını oku butonu tıklama açısından daha iyi olabilir. Yazınız olduğu gibi ortalıkta gözükmez. Kısa bir tarafı gösterilir. Sonra da devamını oku çıkar. Okumak isteyen kişi tıklamak zorunda kalır. 

Bu eklentiyi Blogger’a nasıl eklersiniz? 

İlk olarak aşağıdaki kodu bulun. 

</head> 

Ardından kodun hemen üstüne aşağıdaki kodu yapıştırın. 

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 400;
summary_img = 400;
img_thumb_height = 140;
img_thumb_width = 140; 
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidjaOJU8cx1UcLG5J92IOlHsX6ScvNYHA9F523DYfOWm3cSuHBfHWACNGWnBjwC1NQwTNLj1AoHwTwbU-aQM_7oafdf38cuppGcdEbCGe18Vv6tsx-TTyku4swFq6MJe5oZltIJWmXPXWm/s0/2nrklth.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left;margin-right:5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script> 

Bu kodu yapıştırdıysanız aşağıdaki kodu bulun. 

<data:post.body/> 

Bu kodu bulduysanız kodu silin ve onun yerine aşağıdaki kodları ekleyin. 

<!-- webmaster.10line.net thumbnail devamını oku başlangıcı -->
<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/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Devamını oku...</a>
</b:if>
</b:if>
<!—webmaster.10line.net thumbnail devamını oku bitişi --> 

Bunu yaptıysanız artık bu eklentiye sahipsiniz demektir. yapmanız gereken son bir iş daha var. İlk kodda kırmızı renkte olan iki yer göreceksiniz. 

img_thumb_height = 140; 

img_thumb_width = 140; 

Yukarıdaki yerleri görmüş olacaksınız. Bu yerleri resmin boyutunu ayarlamak için değiştirebilirsiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Üzerine Fare Gelince Dairesel Çıkan Paylaş Butonları

Bu blogger eklentisinin demosunu bu adresten görebilirsiniz. Ayrıca görselini de sizinle paylaştım. Peki, bu eklentiyi Blogger bloğunuza nasıl eklersiniz? 

İlk olarak aşağıdaki kodu bulun. 

</body> 

Bu kodu bulduktan sonra hemen üstüne aşağıdaki kodu yapıştırın. 

<!-- Start Shareaholic Sassy Bookmarks HTML (webmaster.10line.net)-->
<div class="shr_ss shr_publisher">
</div>
<!-- End Shareaholic Sassy Bookmarks HTML (helperblogger.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
<!-- End Shareaholic Sassy Bookmarks script (webmaster.10line.net) --> 

Şablonunuzu kaydedin ve çıkın. Artık bu eklentiye sahipsiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Kar Yağdırma Eklentisi

Blogger bloğunuza kar yağdırmak ister misiniz? Ziyaretçileriniz sitenizde dolaşırken hoş anlar yaşasın isterseniz o zaman bu eklenti tam size göre. Bu eklentiyi sitemize uyguladık ve bir ekran görüntüsü aldık. Nasıl göründüğünü oradan görebilirsiniz. 

Bu eklentiyi nasıl kurarsınız? 

Yerleşim - Gadget Ekle - HTML/JavaScript yolunu izleyin. Ardından da gerekli yere aşağıdaki kodu yapıştırın. 

<script type="text/javascript">
//Configure below to change URL path to the snow image
var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAL4ugWDNEqgMlgRR0L71PaEFsJOV652WgKKgDbm9imB9CZ1FyoTxo172X7qZqznXjpb4vu-Nmr3GZGtKIWxtKoY1QB4KHQhjHUQYTWozQGWQjjYd3nJy3-uchCtZae-Uvo194o2Hjig4/s400/snow.gif"
// Configure below to change number of snow to render
var no = 15;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAL4ugWDNEqgMlgRR0L71PaEFsJOV652WgKKgDbm9imB9CZ1FyoTxo172X7qZqznXjpb4vu-Nmr3GZGtKIWxtKoY1QB4KHQhjHUQYTWozQGWQjjYd3nJy3-uchCtZae-Uvo194o2Hjig4/s400/snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}
if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script> 

Kodu girdikten sonra size yapacak başka bir şey kalmıyor. Artık blogunuzda kar yağmaya başlayacak.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Klavye Yazı Tipi Eklentisi

Blogger’daki muhteşem eklentilerden bir tanesi de budur. Blogger’da bulunan eklentiler bloğunuzu daha çok tıklanır kılar. Bunlardan bir tanesi de bu eklentidir. Bu eklentiyi yüklediğiniz zaman istediğiniz yerler klavyenizdeki harfler gibi yazılıyor. Görselde de size gösterdik. Eğer bloğunuzdaki bazı yazıların bu şekilde görülmesini istiyorsanız siz de bu eklentiyi yükleyin. 

Bu eklentiyi nasıl bloğunuza yüklersiniz? 

Aşağıda verilen kodu bulun. 

]]></b:skin> 

Ardından yukarıdaki kodun üstüne aşağıdaki kodu ekliyoruz. 

/*****************************************
Klavye Tarzı Yazı Yazma Eklentisi kod başlangıcı www.webmaster.10line.net
******************************************/
klavye{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
} 

Bunu yaptıktan sonra şablonu kaydedin. Ardından klavye tarzı yazı yazmak istediğiniz zaman aşağıdaki kodu kullanın. 

<klavye>Yazı Alanı</klavye> 

Yapmanız gerekenler bu kadar.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Sosyal Paylaşım Eklentisi

Retro tarzı bir sosyal paylaşım eklentisini sizlerle paylaşıyoruz. Çok güzel bir eklenti. Hareketleriyle, görüntüsüyle çok hoş duruyor. 

Nasıl yaparsınız? 

Aşağıda verdiğim kodları yerleşim -> gatget ekle -> HTML -> JavaScript yolunu takip ederek ekleyiniz. 

Kodlar: 

<style>
/* Retro tarzı blogger sosyal paylasim webmaster.10line.net */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>


<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUi4uw_AW9b0lUcpL7bR6oBdXeaDQWX-3HyPpO0wFocE61qXOx-5_3gfLOf_zk3yaL8-SrEXIUUAER4RikBGWX6QnzEc_fjrw2mCmZ47kacxif9p7UCsS8j62v5HvdiZSaqRUf6if1uYw/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>


<li><a href="http://www.facebook.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjYrA7a554Nu3ixTqj03fAR3bdJyCPrhY_qPOsXNJTKPaVhacAcWNsUQ-oUa-T35BSQsdiVwOlI7A8T4rv0F4iV79f2rXY6KaVjYq-MxUN_fuipoQ_q_CikfqMq6GVwZi8NtNOH4GtCBU/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>


<li><a href="http://www.pinterest.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uvZrdA5G7uKqeCdzU5-g87vhaqxHNVVc89ZhRrB9i5X0Sr4pt-Tb5TFrwqfGo7jTsX-eXeNZ2zEc3SMTtj_gnmG6fwLn43Ptj92bHOfCWDKPzWxTeJCwg4MNJJ3v8DYkst57TawHK8c/s1600/bloggertrix-pinterest-icon.png" title="Add to Digg" /></a></li>


<li><a href="http://www.twitter/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieQNzCJQ0X6BiB5suH0kaZJREjuDHgy0buDUTwqlMZqlNjfHF3r9fPeEwRLlBViyBFydtmnqLQo8RkMFTJ4DBpSHlIEbU88kSjX2gCQ5Q2A2T6KCh62dvYZ5Uc1fYXCx74nydwGu82SHc/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>


<li><a href="http://feeds2.feedburner.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz9MdNGYZ-Hd8S8VsXxJ0VwoZWLQeAhNfnSsduD24isLvasJQx23ZRoEp7_evs5jZeiLKYWWvbBVp9pc20bLM30DQNp5iQSuZ_Yz6LlHKunUEAYLwHqffSzg4-aBgfWOePB0JJmHswgjY/s1600/bloggertrix-rss-feed-icon.png" title="Add RSS Feed" /></a></li>
</ul> 

Yukarıdaki kodlarda geçen xxxxx yazan yerlere kendi sosyal paylaşım adreslerinizi yazınız.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Yan Menü Eklentisi Nasıl Yapılır?

Bu eklenti bloğunuza şık bir görünüm katar. Görselde de gördüğünüz gibi renkli ve ilgi çekicidir. Simgelerin üzerine gelindiği zaman karşınıza yazılı olarak simgenin nereye gönderdiğini ifade eder. Bu eklentiyi bloğunuza nasıl uygularsınız? 

Bu eklentiyi uygulamak için: 

İlk olarak aşağıda yazılı olan kodu bulmalıyız. 

]]></b:skin>

Bu kodu bulduktan sonra hemen üst tarafına aşağıdaki kodu yapıştıralım.

/* CSS Style for Horizontal Menu - info @ http://www.webmaster.10line.net*/
#hor {
list-style:none;
padding:0;
margin:0;
}
 #hor li {
float:left;
padding:5px;
}
 #hor a {
display:block;
height: 12px;
text-indent:-999em;
}
 #hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}
 #hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}
 #hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}
  /* CSS Style for Vertical Menu */
 #ver {
list-style:none;
padding:0;
margin:0;
}
 #ver li {
padding:2px;
}
 #ver li a {
display:block;
height:12px;
text-indent:-999em;
}
 #ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}
 #ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}
 #ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}
  .clear {
clear:both;
}
  *{
/* A universal CSS reset */
margin:0;
padding:0;
}
  #navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;
  /* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
 font-family:Arial, Helvetica, sans-serif;
}
 #navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}
 #navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
 /* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
 /* CSS3 Transition: */
-webkit-transition: 0.25s;
 /* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}
 #navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRpr2DqQz46cEH5uxjjQaYXRmLalnCyrno831-wSukIjWNZFG_pqP7SQw5JNwKgEvywbAwcazbX-TeX-ECAKJg5d-OJon-YJBjg0NBow7IfzJFwZuf6BKhg8kch4KUlWOkDrrkhpsAjmA/s1600/navigation.jpg') no-repeat;
 height:39px;
width:38px;
display:block;
position:relative;
}
 /* General hover styles */
 #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
 /* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}
 /* Green Button */
 #navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
 /* Blue Button */
 #navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
 /* Orange Button */
 #navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
 /* Yellow Button */
 #navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
 /* Purple Button */
 #navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
 /*End menu css - info @ http://www.webmaster.10line.net */

Bu kodu yapıştırdıktan sonra şu işlemi yapın. Önce yukarıdaki kodu kaydedin ve yerleşim >> gadget ekle >> HTML/JavaScript seçeneği ile açılan yere aşağıdaki kodları yapıştırın.

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Ana Sayfa" href="http://www.webmaster.10line.net">
<span>ANA SAYFA</span>
</a>
</li>
 <li>
 <a class="about" href="LİNK">
<span>About</span>
</a>
</li>
 <li>
<a class="services" href="LİNK">
<span>Services</span>
</a>
 </li>
 <li>
<a class="portfolio" href="LİNK">
<span>Portfolio</span>
</a>
</li>
 <li>
<a class="contact" href="LİNK">
 <span>Contact us</span>
</a>
</li>
</ul>
</div>

Yapmanız gereken tüm işlemler bu kadar. Ancak son olarak bir şey belirteyim. Yukarıdaki kodda kırmızı ile yazılan yerleri kendinize göre düzenleyiniz.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.

Blogger İçin Yalancı Takipçi Sayısı Eklentisi!

Blogger ücretsiz blog servisini kullanıyorsanız işinize yarayabilecek çok iyi bir eklenti biliyoruz. Bu eklenti bloğunuz daha yeni olsa bile takipçilerinizi çok gösteriyor. Rakamları siz belirliyorsunuz. İsterseniz 1000 takipçi yazarsınız, isterseniz de 500 takipçi yazarsınız. Şimdi size kodları vereceğim ve nasıl yapacağınızı anlatacağım.

Kod:

<style> .rss-mbt { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwQsZ3rffASFTTZhATsN_8EZN3UiGMdBwNDd52oqLWSY9X5w9xinZ5iFsZyOMPJEXwf7ja1ddXasT-2DJXcI1vgFS_BBTy2JpPaW0-y93K0TX7Wa8WCf5A2lpsdbb0-8hoyxsb3qdPzWo/s800/RSS1.png) no-repeat; height: 64px; padding: 0px 20px 0px 80px; margin-top: 20px; }.twitter-mbt { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiztQhtuupKRGt9BtVs90UmPTGsiyT4yoWz0skofVx5N71PQP73hen6NE0xrji5Px38cCdN7mTiXF80TbpFaubGs5pyfUoOtyS_azV-J2HJDY0tQTM_qeikzhOUvHpvWa8rkbC9wElIyHE/s800/TWITTER1.png) no-repeat; height: 64px; padding: 0px 20px 0px 80px; margin-top: 20px; }.facebook-mbt { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc9V1plgyt2T_B1lHoVQ2iR0SUIpvCpL9xQ96btACarTkQ_4qxQKKTvEyX4hauE09DmUfHKVryCUs8hKIXYeKwXZsRDPoH2FMZbGGKyr_R4v_Gp5eoj5tyVtRzcHvTrvSBC1S2wJD6oMw/s800/FACEBOOK1.png) no-repeat; height: 64px; padding: 0px 20px 0px 80px; margin-top: 20px; }.follower-rss, .follower-twitter, .follower-facebook { font-family: Georgia, sans-serif, Times; font-size: 1.1em; font-style:italic; color:#289728; }.follower-rss span { font-size: 1.9em; font-weight: bold; font-style:italic; color:#FFB93C; }.follower-twitter span { font-size: 1.9em; font-weight: bold; font-style:italic; color:#6DB6E6; }.follower-facebook span { font-size: 1.9em; font-weight: bold; font-style:italic; color:#3889BA; }</style><div class="rss-mbt"> <div class="follower-rss"> <span>131</span> Okuyucu </div> <a href="</div> <a href="Rss adresiniz" rel="nofollow">RSS feed</a> | <a href="| <a href="E-mail adresiniz" target="_blank" rel="nofollow">E-mail</a> </div> <div class="twitter-mbt"><div class="follower-twitter"><span></div><div class="twitter-mbt"><div class="follower-twitter"><span>965</span> Takipçi</div> <a href="<a href="Twitter Adresiniz" target="_blank" rel="nofollow" title="I definitely follow you back">Bizi Twitter'da Takip et</a> </div> <div class="facebook-mbt"> <div class="follower-facebook"><span></div> <div class="facebook-mbt"> <div class="follower-facebook"><span>304</span> Takipçi </div> <a href="<a href="Facebook Adresiniz" target="_blank" rel="nofollow">Bizi Facebook'da takip et</a> </div></div>

Bu kodu nasıl eklersiniz? 

• Bu kodu istediğiniz yere yerleşimden gatget butonuna tıklayarak ekleyebilirsiniz. 
• Kodun içinde kırmızı renkteki yerlere twitter , facebook , rss ve mail adreslerinizi yazacaksınız. 
• Mavi renkte olan yerlere ise takipçi sayısı kısmıdır. Buralara hangi rakamı yazacağınız size bırakılmıştır.

Bu yazı http://webmaster.10line.net adresinde yayınlandı.