Blogger Videolar İçin Işıkları Aç-Kapat Eklentisi

 Blogger için uygulanacak bu uygulamanın benim tarafından çok harika olduğunu düşünüyorum.Blogunda bir film veya dizi veya izletmek istediğiniz herhangi bir videoyu arkadaşlarınıza veya ziyaretçilerinize kapalı ışıklar içinde izletebilirsiniz sinema tarzı misali.Eklenti çok harika ve özel bir eklenti olduğunu düşünüyorum eklemek isteyen arkadaşlar aşağıdaki videodan DEMO'suna ve nasıl yapılacağına bakabilirler.

Blogger Paneline Girin. .
Şablon Tıklıyoruz > HTML Düzenle > CTRL+F yardımı ile
kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $("#darkness").css("height", $(document).height()).hide(); $(".lightSwitcher").click(function(){ $("#darkness").toggle(); if ($("#darkness").is(":hidden")) $(this).html("Işıkları Kapat").removeClass("turnedOff"); else $(this).html("Işıkları Aç").addClass("turnedOff"); }); }); //]]> </script>

CTRL+F yardımı ile ]]>
kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz.
/* Blogger Turkey Videolar İçin Işık Aç-Kapat Eklentisi ----------------------------------------------- */ #lightsVideo { position:relative; z-index:102; } #switch { max-width:640px; text-align:left; position:relative; height:25px; display:block; margin: 25px 0 0 60px; } .lightSwitcher { position:absolute; z-index:101; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_zpuaJhoipDOZQTd0l8-sKQQ1lHjjKPit-JyLCNsG3Oz1OohPP6F10E488XP9zewcYARnrPbbxMXEXQ6f-p6PFQXGBR9AJl_Z4_pPMQvMFJ-xwI8cBY-44w6_e7xmKblbCXnePuS4-DBc/s1600/lights-on.png); background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px; outline:none; text-decoration:none; } .lightSwitcher:hover {text-decoration:underline;} .turnedOff { color:#ffff00 !important; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixAgigrN5Kks41GdBzwhBZ3GmxdbUPTxi7CcvLe5R3ZjTjR8rSO5In_eweLLtUVVSNuPEKhJXHF06QT0PEPd1786rv299SBXUYoc2R_HZzgwX0Jnz6gYHajbqxS0H43boHwWQk-U6_087L/s1600/lights-off.png); } #darkness { background:#000; opacity:0.8; filter:alpha(opacity=80); position:absolute; left:0; top:0; width:100%; z-index:100; }
CTRL+F yardımı ile kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz.
<div id='darkness'/>

Aşağıdaki kodları bir yazı içersine nasıl ekleyeceğimizi ve nasıl çalıştırğını görmek için kodun altındaki video yu izleyin.Diğer bir seçenek olan HTML/JavaScript gatget'i olarakta ekleyebilirsiniz tercih sizin.
<center> <div id="switch"> <a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div> <div id="lightsVideo"> ...Buraya video'nun kodunu ekliyoruz... </div> </center>

CSS3 İle Tüm Sitelerde Çalışan 3D Yazı Efekti

Merhaba Arkadaşlar Bugün Sizlere Çok Güzel Bir Kodu Göstericeğim Resimde de Görmüş Olduğunuz Gibi İstediğiniz Yazıyı 3D İle Gösterebileceksiniz. İsterseniz Rengini Değiştirebilirsiniz.
İsterseniz Artık Anlatıma Geçelim..

"Blogger Kullanıcıları İçin"

Aşağıda Bulunan Kodu Tasarım Bölümündeki ]]></b:skin>

 Bölümünün Üstüne Yapıştırıp Kaydedin.

.phtmldrive-3d{ font-family: Garamond, serif; color: #ffffff; font-family: Garamond, serif; font-weight:bold; font-size: 64px; text-shadow:0px 0px 0 rgb(223,223,223),1px 1px 0 rgb(202,202,202),2px 2px 0 rgb(180,180,180),3px 3px 0 rgb(158,158,158), 4px 4px 0 rgb(136,136,136),5px 5px 4px rgba(0,0,0,0.6),5px 5px 1px rgba(0,0,0,0.5),0px 0px 4px rgba(0,0,0,.2); }

Daha Sonra Aşağıda Bulunan Kodu İster Logonuzda İster Gönderilerinize Ekleyebilirsiniz.

<a class="phtmldrive-3d">Merhaba!</a>

İşlemimiz Bu Kadar.

"Diğer Kullanıcılar İçin"

Blogger Dışı Diğer Kullanıcıların Yapması Gereken İse Yaşağıda Vermiş Olduğum Kodu İstediği Yere Yapıştırıp Kaydet'de Bilir.

<a class="phtmldrive-3d">Merhaba!</a> <style> .phtmldrive-3d{ font-family: Garamond, serif; color: #ffffff; font-family: Garamond, serif; font-weight:bold; font-size: 64px; text-shadow:0px 0px 0 rgb(223,223,223),1px 1px 0 rgb(202,202,202),2px 2px 0 rgb(180,180,180),3px 3px 0 rgb(158,158,158), 4px 4px 0 rgb(136,136,136),5px 5px 4px rgba(0,0,0,0.6),5px 5px 1px rgba(0,0,0,0.5),0px 0px 4px rgba(0,0,0,.2); } </style>
Bizi Takip Etmeye Devam Edin :))

Blogger Temalarında Ki Kayma Sorununun Çözümü

Bu sabah Blogger sitelerimizde yaşadığımız temalarda kaymalar meydana gelmişti. Benim sitemle birlikte arkadaşlarımında sitesinde kaymalar ve bozuklukluklar oluşmuştu. Aşağıda bulunan bu kısa kod ile siteniz yeniden eski haline geri dönecek.

Aşağıda ki kodu kodundan sonra ekleyin. 

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $("[href$='css_bundle.css']").remove(); </script>

Ve temamızı kaydedip önizlemesine bakalım ve sorun giderildi :)

Bloggerlar İçin Google+ Yorum Özelliği

Google’ın sosyal ağı olan Google+ ile zaman içerisinde Google bütün ürünlerini toplamayı hedefliyor. Google+ ile birlikte de zaten bunun kıvılcımlarını Youtube gibi benzeri Google ürünlerinde görmüştük. Kısa bir zaman önce meydana getirilen Blogger’lar için Google+ yorum özelliği de ürünleri bir arada toplamak için geliştirilen son hamlelerden birisidir. Hadi Google+ yorum özelliğine biraz daha yakından bakalım.

Google+ yorum özelliği blog sahibine bir çok avantaj sağlıyor. Bunların arasından sağladığı en büyük avantaj da elbette Google+ profili sayesinde etkileşimleri çok kolay bir şekilde takip edebilme özelliği oluyor. Bu sayede yorumların hiçbirini kaçırmıyor ve daha seri yorumlara cevap verebiliyorsunuz. Ancak diğer yandan bu yorum özelliği bizlere çok da büyük bir dezavantaj sunuyor.

Bu özellik aktif hala getirildiğinde kullanıcıların kullanabilmeleri için dolayısıyla mutlaka bir Google+ hesabına sahip olması gerekiyor bu da etkileşimi düşürebilecek başlıca nedenlerin arasında yer alıyor.  Google+ yorum özelliğini açmak ise oldukça basit. Panelinizden Google+ bölmesine girdiğinizde bu blog’da Google+ yorumlarını kullan özelliğini seçmeniz geçiş işlemini tamamlamanız için yeterlidir.

Blogger Gelişmiş Yorum Alanı Eklentisi

Yeni bir blogger yazımla tüm blogculara sevgiler. Bu yazımda blogger yorum alanında bir gelişme yapacağız, ilk olarak eklentiden söz edeyim isterseniz. Bu eklentiyi uzun zamandır kullanıyorum ve çok sade bir tasarıma sahip demosu üstteki resim zaten. Sadece css ile bu kadar güzel bir eklenti meydana geliyor. İsteyen de çok oldu bende zaman ilerledikçe paylaşmk istedim.

Tek yapmanız gereken css bölümüne eklemek

#comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%} .comments .comment-content{margin-left:48px;position:relative;background:#f9f9f9;border:1px solid #ddd;overflow:hidden;border-bottom:2px solid #ddd;border-radius:5px;padding:10px} .comments .comments-content{font-size:13px} .comments .comment .comment-actions a{padding-top:5px;padding-right:5px;text-decoration:none} .comments .comment .comment-actions a:hover{text-decoration:underline} .comments .comments-content .comment-thread ol{list-style-type:none;text-align:left;padding:0} .comments .comments-content .inline-thread{padding:.5em 0 .5em 1em} .comments .comments-content .comment-thread{margin:8px 0} .continue{background:#fff;border:1px solid #ddd;overflow:hidden;border-bottom:2px solid #ddd;border-radius:5px;padding:5px} .comments .comments-content .comment-replies{margin-top:0;margin-left:36px} .comments .comments-content .comment{margin-bottom:0;padding-bottom:0} .comments .comments-content .comment:first-child{padding-top:6px;text-align:left} .comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0;text-align:left} .comments .comments-content .comment-body{position:relative} .comments .comments-content .user{font-style:normal;font-weight:700} .comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;background:url(http://png.findicons.com/files/icons/2353/stuttgart/16/star.png) no-repeat top;margin:0 0 -4px 6px} .comments .comments-content .datetime{margin-left:6px;float:right;font-size:10px} .comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:5px 0 8px} .comments-content{padding:5px} .comments .comments-content .comment-header{font-size:15px} .comments-content .datetime{font-style:PFBeauSansProBbookRegular, Verdana, sans-serif;color:#fff} .comments .comments-content .comment-content{text-align:left} .comments .comments-content .owner-actions{position:absolute;right:0;top:0} .comments .comments-replybox{border:none;height:250px;width:100%} .comments .comment-replybox-single{margin-top:5px;margin-left:48px} .comments .comment-replybox-thread{margin-top:5px} .comments .comments-content .loadmore a{display:block;text-align:center;padding:10px 16px} .comments .thread-toggle{cursor:pointer;display:inline-block} .comments .continue{cursor:pointer} .comments .continue a{display:block;font-weight:700;padding:.5em} .comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:3em} .comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden} .comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;padding-right:4px;margin:.3em} .comments .thread-expanded .thread-arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC) no-repeat scroll 0 0 transparent} .comments .thread-collapsed .thread-arrow{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==) no-repeat scroll 0 0 transparent} .comments .comment-header{margin-left:48px;position:relative;background:url(http://2.bp.blogspot.com/-p56goQ2FzGU/URvNe5UKRLI/AAAAAAAAE0E/u4764R2J6O8/s1600/sidebaronurbatur.png) repeat-x;border:1px solid #ddd;overflow:hidden;border-bottom:2px solid #ddd;border-radius:5px;padding:5px} .comments .comment-header .user{font-size:17px} .comments .comment-block{margin-left:48px;position:relative;background:#fff;border:1px solid #ddd;overflow:hidden;border-bottom:2px solid #ddd;border-radius:5px;padding:5px} .avatar-image-container,.avatar-image-container img{max-width:50px!important;width:50px!important;max-height:50px!important;height:50px!important;background:#fff} .comments .avatar-image-container{border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;float:left;margin-right:10px;background:#fff;border:1px solid #ddd;padding:2px} .comments .avatar-image-container img{background:#fff} .comments{border:1px solid #ddd;font-family:PFBeauSansProBbookRegular, Verdana, sans-serif;-moz-border-radius:8px;color:#666;border-radius:5px 5px 5px 5px / 5px 5px 5px 5px;margin:10px 0 0;padding:10px} .comments h4{color:#666;font-family:PFBeauSansProBbookRegular, Verdana, sans-serif;font-size:15px;text-decoration:none;font-weight:700;text-shadow:#d0d0d0 0 0 4px;border-bottom-style:dashed;border-bottom-width:2px;border-bottom-color:#CCC;margin:-2px 0 -3px;padding:3px 0 5px}

Yapamadığınız, temanıza uyumlu olmayan bir yer varsa onur imdat burada yorum atmanız yeterli :)

Logonuzu Saydamlaştırıp İleri Geri Hareket Ettirmek

Güzel bir eklenti ile karşınızdayız. Bu eklentimizde ise site logonuzu hem saydamlaştırıp hemde ileri geri hareket etme efektini uygulayacağız. Uzun zamandır bana gelen mailler bu eklenti üzerineydi. Bende müsait olduğum için paylaşmak istedim. Eklenti basit ama kod bilginiz varsa yapabileceksiniz. İsterseniz konuya geçelim.

Logo kodlarımızı buluyoruz örn: <img src='Logo Url' class='logo'>
Bir diğer yöntem örn: <div class='logo'> <img src='Logo Url'> <div>

Bu verdiğim 2 kodda turuncu ile işaretlediklerimden birini kendi temanızda logonuzun bulunduğu kısma ekliyoruz yukarıda örnekte ki gibi.

Sıra geldi css kodlarına aşağıda ki kodları blogger css bölümüne ekliyoruz.
.logo a:link{ transition: all .3s linear; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -o-transition: all .3s linear; } .logo{width:350px;height:120px;text-align:left;color:#fff;overflow:hidden;float:left;-webkit-transition:all .9s ease-out;-moz-transition:all .9s ease-out;-ms-transition:all .9s ease-out;-o-transition:all .9s ease-out;transition:all .9s ease-out} .logo a:hover{ filter: blur(1.5px); -moz-filter: blur(1.5px); -webkit-filter: blur(1.5px); -o-filter: blur(1.5px); } .logo:hover{margin-left:30px;-webkit-transition:all .9s ease-out;-moz-transition:all .9s ease-out;-ms-transition:all .9s ease-out;-o-transition:all .9s ease-out;transition:all .9s ease-out}

Temamızı kaydedip önizlemesine bakıyoruz ve tamamlandı.

Blogger Breadcrumb Eklentisi

Bir sitenin seo özelliği nekadar iyi olursa aramalarda o kadar üste çıkar. Bu eklentimizde ise google aramalarda ve konu içinde anasayfa > kategori > yazı ismi şeklinde yönlendirme gösterecek. Ve hem ziyaretçilerimiz bulunduğu yeri bilebilcek hemde arama motorlarında seo dostu olacak. İsterseniz anlatıma geçelim.

Aşağıda ki kodu temamızdan buluyoruz.
<b:includable id='breadcrumb' var='posts'></b:includable>

Daha sonra aşağıda ki kod ile değiştiriyoruz.
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/><b:if cond='data:blog.pageType == "item"'> <p class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> <span class='post-labels'><span typeof='v:Breadcrumb'> <a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>PhtmlDrive</a></span><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'> » <span typeof='v:Breadcrumb'><a expr:href='data:label.url + "?max-results=8"' property='v:title' rel='v:url'><data:label.name/></a></span></b:if></b:loop><b:else/> » Kategorisiz</b:if> » <span><data:post.title/></span></b:loop></span></p> <b:else/> <b:if cond='data:blog.pageType == "archive"'><p class='breadcrumbs'> <span class='post-labels'><a expr:href='data:blog.homepageUrl'>PhtmlDrive</a> » Tüm Yazılar <data:blog.pageName/></span></p> <b:else/> <b:if cond='data:blog.pageType == "index"'><p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == ""'><a expr:href='data:blog.homepageUrl'>PhtmlDrive</a> » Tüm Yazılar <b:else/><a expr:href='data:blog.homepageUrl'>PhtmlDrive</a> » <data:blog.pageName/></b:if> </span></p> </b:if></b:if></b:if></b:if></b:includable>

Temamızı kaydediyoruz ve önizlemesine bakıyoruz.

Blogger - 3 Boyutlu Css Buttonlar

Merhaba Arkadaşlar Bugün Sizlere 3 Boyutlu Css Butonlarını Göstermekteyim. Yabancı Bir Sitede Buldum Sizlere Yararlı Olucağını Düşüdüm. Umarım Beğenirsiniz.

Demo

  1. Adım Şablon > Htmlyi Düzenle'ye Tıklıyoruz. CTRL+F Yaparak ]]>
Aratıyoruz. Ve Aşağıda Bulunan Kodu ]]>
Üstüne Yapıştırıyoruz.
.3dbutton { background: #fff; padding: 30px 20px 20px 20px; } .button { text-decoration: none; color: #fff; font-weight: bold; padding: 12px 20px; font-size: 18px; border-radius: 10px; background-color: #666666; box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); position: relative; border-bottom: 1px solid rgba(255,255,255,0.2); display: inline-block; text-shadow: 0px -1px 0px rgba(0,0,0,0.2); margin-bottom: 40px; } .button:hover { box-shadow: 0 5px 5px #313131, 0 9px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); } .shield { border-radius: 5px 5px 35px 35px; padding-left: 25px; padding-right: 25px; } .criss-cross { border-radius: 35px 5px; } .rectangular { border-radius: 10px / 35px; } .one-corner { border-radius: 5px 5px 35px 5px; padding-right: 25px; } .pressure { } .button { margin-right: 20px; } .button:active { top: 7px; box-shadow: 0 2px 0 #393939, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2); } .red { background-color: #c34747; box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); } .red:hover { box-shadow: 0 5px 5px #853232, 0 9px 0 #5e2525, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); } .red:active { box-shadow: 0 2px 0 #5e2525, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2); } .orange { background-color: #c37846; box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); } .orange:hover { box-shadow: 0 5px 5px #855031, 0 9px 0 #5e3a25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); } .orange:active { box-shadow: 0 2px 0 #5e3a25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2); } .green { background-color: #7fc345; box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); } .green:hover { box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); } .green:active { box-shadow: 0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2); } .pink { box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); background-color: #d7298b; } .pink:hover { box-shadow: 0 5px 5px #782d54, 0 9px 0 #5e254c, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); } .pink:active { box-shadow: 0 2px 0 #5e254c, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2); } .blue { background: #2a8ad8; box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); } .blue:hover { box-shadow: 0 5px 5px #364a8e, 0 9px 0 #25325e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); } .blue:active { box-shadow: 0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2); } .purple { background-color: #8a26d3; box-shadow: 0 5px 5px #54307b, 0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2); } .purple:hover { box-shadow: 0 5px 5px #54307b, 0 9px 0 #3f255e, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2); } .purple:active { box-shadow: 0 2px 0 #42255e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2); }

Kaydedip Çıkıyoruz.

2. Adım Aşağıda Bulunan Kodu İster Menü Olarak İsterseniz İndir - Demo Göster Gibi Eklentiler İçin Kullanıcağız.

<div class="3dbutton"> <a href="#" class="button">A BUTTON</a> <a href="#" class="button red shield">A BUTTON</a> <a href="#" class="button orange rectangular">A BUTTON</a> <a href="#" class="button green criss-cross">A BUTTON</a> <a href="#" class="button blue one-corner">A BUTTON</a> <a href="#" class="button pink">A BUTTON</a> <a href="#" class="button purple shield">A BUTTON</a> </div>


İşlem Bu Kadar Basit Umarım Beğenmişsinizdir. Güle Güle Kullanın :))

3lü Sosyal Media İntro Kodu

Kod Dostu'dan almış olduğum bi tasarımdır. Üçlü sosyal intro giriş ekranı, belki de şu ana kadar kullandığınız en muhteşem hazır kod olacak! twitter introsu, facebook introsu ve çok tutan google artı introsu şimdi bir arada!
-Kod içerisindeki facebook.com/phtmldrive linki yerine kendi facebook sayfanızın linkini yerleştirin.
-Kod içerisindeki twitter.com/phtmldrive yerine kendi twitter sayfanızın linkini yerleştirin.
-Kodda bulunan +1 butonu,kodun o an görüntülendiği site sayfasını +1lemeye yarar.
Bu nedenle google+ entegrasyonu için bir ayara gerek yok.

Demo

 

<div class="eeikoddostu ksddostu-fabecook" id="obenimmil"> <center> <a style="display:block;width:50%;min-width:500px;height:42px;background-color:#333;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:26px;line-height:42px;font-weight:normal;margin-top:15px;-webkit-border-radius: 12px;border-radius: 12px;border:2px solid #c45004;-moz-box-shadow: 0 0 15px #000;-webkit-box-shadow: 0 0 15px #000;box-shadow: 0 0 15px #000;">En çok hangisini kullanıyorsunuz?</a></center> </div> <div class="ouikoddostu saym1rayt koddostu-fabecook"> <div id="faceic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#4a6ea9;text-align:center;"> <center> <a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:180px;height:180px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjBDV2cyaDQQ0zAa4w0Mh8nYYmlUKnBeAQVm-T9Hvtj-4jOe3l-MBgLUc8pPYBFOPsQDoq6Me-GLULFN8TTCX3mnzdGK63eugMGXPw4bFzxbI7FKAl2by35OWd2PEi3j77AdXESthMJQy7/s180/facebook-icon.png) no-repeat top left;margin-top:115px;"></a> </center> </div> <center> <a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Siteye Girmeden Önce,</a> <a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Bizi facebook'da beğenir misiniz?</a> <br/><br/> <iframe src="//www.facebook.com/plugins/like.php?href=www.facebook.com/phtmldrive&send=false&layout=button_count&width=450&show_faces=false&font=trebuchet+ms&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:21px;" allowTransparency="true"></iframe> <a style="vertical-align:top;display:inline-block;width:90px;height:19px;background-color:#eceef5;-webkit-border-radius: 6px;border-radius: 6px;border:1px solid #6279ad;line-height:18px;font-family:Tahoma, Arial, sans-serif;font-size:11px;color:#3b5998;font-weight:normal;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJDFzwTwGQda0-SMpxpRK2vK-zXaawWSZT7jIhvP2XrRi7jD0fxlEKKaXS88YLaqfrztkzSpd9doIzW8VbTSa5jSHsZEyKOJcQTo58E1wQQ3ChuBd_fNNiOQ4ljDLMLQDtwfqcTH3YSIa/s22/arrow_right.gif" style="vertical-align:-4px;padding:0px;margin:0px;border:none;float:left;background-color:transparent;">Siteye Geç</a> </center> </div> <div class="uoikoddostu saym2rayt koddostu-gopluas"> <div id="plusic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#e46044;text-align:center;"> <center> <a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:200px;height:200px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_wnxcwKFXCz9QcqZ1IQHF8w0B_Bf64Ai-8eBPbtIioIH3ENQtlJ_qnfPd2xpC3J2YT7BgdP6ePP-G-oL8Y2gr37LUZch5Bmy8DdvCQoxwgsKoGpgycFZZlnEnz0SNs66pACNOVXCxnzpz/s200/google-plus-icon.png) no-repeat top left;margin-top:110px;"></a> </center> </div> <center> <a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Siteye Girmeden Önce,</a> <a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Bize google+'da +1 verebilir misiniz?</a> <br/><br/> <div class="g-plusone" data-annotation="inline" data-width="140"> </div> <script type="text/javascript"> window.___gcfg = {lang: 'tr'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <a style="vertical-align:top;display:inline-block;width:90px;height:23px;background-color:#eee;-webkit-border-radius: 4px;border-radius: 4px;border:1px solid #fff;line-height:23px;font-family:Tahoma, Arial, sans-serif;font-size:12px;color:#e46044;font-weight:bold;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);">Siteye Geç</a> </center> </div> <div class="iuokoddostu saym3rayt koddostu-twitterr"> <div id="twitic" style="position:absolute;top:0px;right:0px;width:100%;height:2000px;background-color:#32def4;text-align:center;"> <center> <a onfocus="this.blur();" href="javascript:void(0)" style="display:block;width:200px;height:200px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNFklQ_-QLhB6ldKhigYlUzmlqG2zj-Rj7HtmELy_kxVJ35DEXGBDO-pmC40AJUXjFplxWz0Kn6AwwKTZu7VPa3qzb-uf_CljWBRbZbB6Wxtk9MgPbK5eXn0Vt98zsXxrfomAJfaEtooe9/s200/twitter-icon.png) no-repeat top left;margin-top:105px;"></a> </center> </div> <center> <a style="display:block;margin-top:150px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Siteye Girmeden Önce,</a> <a style="display:block;margin-top:15px;font-family:Helvetica, Arial, sans-serif;color:#fff;font-size:16px;font-weight:bold;">Bizi twitter'da takip eder misiniz?</a> <br/><br/> <a href="https://twitter.com/phtmldrive" class="twitter-follow-button" data-show-count="false" data-lang="tr">Takip et</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> <a style="vertical-align:top;display:inline-block;width:90px;height:19px;background-color:#f8f8f8;-webkit-border-radius: 3px;border-radius: 3px;border:1px solid #ccc;line-height:18px;font-family:Helvetica, Arial, sans-serif;font-size:11px;color:#444;font-weight:bold;padding-right:8px;text-decoration:none;" class="gecgec" href="javascript:void(0);">Siteye Geç</a> </center> </div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(".gecgec").click(function(){ $(".saym1rayt").animate({ top: "-100%" }, 1100 ); $(".saym3rayt").animate({ top: "-100%" }, 600 ); $(".saym2rayt").animate({ top: "-100%" }, 1700, function(){$(".saym1rayt").hide();$(".saym2rayt").hide();$(".saym3rayt").hide();} ); }); $(".saym1rayt").click(function(){ $("#faceic").fadeOut(200); $("#plusic").fadeIn(200); $("#twitic").fadeIn(200); $(this).animate({ width: "50%" }, 200 ); $(".saym2rayt").animate({ width: "25%", left: "50%" }, 200 ); $(".saym3rayt").animate({ width: "25%", left: "75%" }, 200 ); $("#obenimmil").fadeOut(400); }); $(".saym2rayt").click(function(){ $("#faceic").fadeIn(200); $("#plusic").fadeOut(200); $("#twitic").fadeIn(200); $(this).animate({ width: "56%", left: "22%" }, 200 ); $(".saym1rayt").animate({ width: "22%" }, 200 ); $(".saym3rayt").animate({ width: "22%", left: "78%" }, 200 ); $("#obenimmil").fadeOut(400); }); $(".saym3rayt").click(function(){ $("#faceic").fadeIn(200); $("#plusic").fadeIn(200); $("#twitic").fadeOut(200); $(this).animate({ width: "50%", left: "50%" }, 200 ); $(".saym1rayt").animate({ width: "25%" }, 200 ); $(".saym2rayt").animate({ width: "25%", left: "25%" }, 200 ); $("#obenimmil").fadeOut(400); }); </script> <style type="text/css">div.eeikoddostu{position:fixed;text-align:center;z-index:99990;}div.ksddostu-fabecook{top:10px;left:0px;width:100%;height:75px;background-color:transparent !important;overflow:hidden;}</style><style type="text/css">div.eeikoddostu{_position:absolute;}div.ksddostu-fabecook{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}div.ouikoddostu{position:fixed;text-align:center;z-index:99900;}div.koddostu-fabecook{top:0px;left:0px;width:32%;height:100%;background-color:#4a6ea9;overflow:hidden;cursor:pointer;}</style><script src="http://goo.gl/jgZ1C" charset="windows-1254"></script><style type="text/css">div.ouikoddostu{_position:absolute;}div.koddostu-fabecook{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}div.iuokoddostu{position:fixed;text-align:center;z-index:99900;}div.koddostu-twitterr{top:0px;left:68%;width:32%;height:100%;background-color:#32def4;overflow:hidden;cursor:pointer;}</style><style type="text/css">div.iuokoddostu{_position:absolute;}div.koddostu-twitterr{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}div.uoikoddostu{position:fixed;text-align:center;z-index:99900;}div.koddostu-gopluas{top:0px;left:32%;width:36%;height:100%;background-color:#e46044;overflow:hidden;cursor:pointer;}</style><style type="text/css">div.uoikoddostu{_position:absolute;}div.koddostu-gopluas{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style>

Kod Alıntıdır. KodDostu

Bloggera Açılır Yan Menü Ekle

 

Merhaba Arkadaşlar Buğün Sizlere Açılır Yan Menü Eklentisini Sunuyorum. Yabancı Bir Siteden Aldığım Bu Eklenti Tamamen Hatasız Bir Şekilde Türkçeleştirildi Umarım Beğenirsiniz. İster Bloggerınıza İster Bedava-Sitemde'de Kullanabilirsiniz. Anlatıma Geçebiliriz.

Kod :
<style> .greenmenuacilir, .greenmenuacilir li ul{ list-style-type: none; margin: 0; padding: 0; width: 185px; /*WIDTH OF MAIN MENU ITEMS*/ border: 1px solid black; } .greenmenuacilir li{ position: relative; } .greenmenuacilir li a{ background: white url(http://www.javascriptkit.com/script/script2/glossyback.gif) repeat-x bottom left; font: bold 12px Verdana, Helvetica, sans-serif; color: white; display: block; width: auto; padding: 5px 0; padding-left: 10px; text-decoration: none; } .greenmenuacilir li ul{ /*SUB MENU STYLE*/ position: absolute; width: 190px; /*WIDTH OF SUB MENU ITEMS*/ left: 0; top: 0; display: none; } .greenmenuacilir li ul li{ float: left; } .greenmenuacilir li ul a{ width: 180px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */ } .greenmenuacilir .arrowdiv{ position: absolute; right: 2px; background: transparent url(http://www.javascriptkit.com/script/script2/arrow.gif) no-repeat center right; } .greenmenuacilir li a:visited, .greenmenuacilir li a:active{ color: white; } .greenmenuacilir li a:hover{ background-image: url(http://www.javascriptkit.com/script/script2/glossyback2.gif); } /* Holly Hack for IE \*/ * html .greenmenuacilir li { float: left; height: 1%; } * html .greenmenuacilir li a { height: 1%; } /* End */ </style> <script type="text/javascript" src="http://yourjavascript.com/17481832531/greenmenuphtml.js"></script> <ul id="acilirmenugreen" class="greenmenuacilir"> <li><a href="#">Anasayfa</a></li> <li><a href="#" >Eklentiler</a></li> <li><a href="#">Tasarımlar</a></li> <li><a href="#">Dersler</a> <ul> <li><a href="#">Blogger</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> <li><a href="#" >Html Editör</a></li> <li><a href="#">Renk Editör</a></li> <li><a href="#" >PhtmLDrive</a> <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> <li><a href="#">Menü 6</a></li> </ul> </li> </ul>

PhtmlDrive Yönlendirme Eklentisi (Saniye Göstergeli)

PhtmlDrive Yönlendirme Eklentisi Saniye Göstergeli

Merhaba Arkadaşlar Bugün Sizlere Yönlendirme Eklentisini Sunmaktayım. Bu Eklentiyi Diğerlerinden Ayıran Özelliği İse Göstergeli Yanı Saniyeyi Gösteriyor. Umarım Beğenirsiniz.

Demo

Kod :

<form name="redirect"> <center> <font face="Arial"><b>PhtmlDrive Saniye Göstergeli Yönlendirme Eklentisi<br><br> <form> <input type="text" size="3" name="redirect2"> </form> Saniye Sonra Siteye Yönlendiriliceksiniz.</b></font> </center> <script> <!-- var targetURL="http://phtmldrive.blogspot.com/" var countdownfrom=10 var currentsecond=document.redirect.redirect2.value=countdownfrom+1 function countredirect(){ if (currentsecond!=1){ currentsecond-=1 document.redirect.redirect2.value=currentsecond } else{ window.location=targetURL return } setTimeout("countredirect()",1000) } countredirect() //--> </script>

Blogger Yeni AJAX Menü

Demo

Selam Arkadaşlar Bugün Sizlerle AJAX Menü Eklentisini Paylaşmaktayım. Yabancı Bir Sitede Gördüm Sizlerle Paylaşma İsteği Duydum. Umarım Beğenirsiniz. Sizler İçin Düzenlemiş Olduğum Bir Menüdür. Hiç Bir Sorunu Yoktur Denedim ve Sizlerle Paylaştım.

Öncelikle Yerleşim > HTML'yi Düzenle ye Tıklıyoruz. CTRL+F Yaparak ]]></b:skin> Aratıyoruz. Aşağıda Bulunan Kodu Bu Kodun Üstüne Yapıştırıyoruz.

.phtmljaxmenu *{margin: 0;padding: 0;} ul.phtmljaxmenu {list-style: none;line-height: 1;overflow: visible !important;} ul.phtmljaxmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;} ul.phtmljaxmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;} ul.phtmljaxmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;} ul.phtmljaxmenu li a:hover,ul.phtmljaxmenu li a.hoverover{background: #f5f5f5 !important;} ul.phtmljaxmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;} ul.phtmljaxmenu li:hover > ul{display: block;} ul.phtmljaxmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;} ul.phtmljaxmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;} ul.phtmljaxmenu ul li a:hover,ul.phtmljaxmenu ul li a.hoverover{background: #fff !important;} ul.phtmljaxmenu ul ul{display: none;left: 100%;top: 0;} /* AJAX Menu Stylings */ ul.phtmljaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;} ul.phtmljaxmenu li:hover div.submenu {display: block;} ul.phtmljaxmenu ul ,ul.phtmljaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;} ul.phtmljaxmenu ul li{background: none !important;float: none !important;} ul.phtmljaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;} ul.phtmljaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;} ul.phtmljaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;} ul.phtmljaxmenu ul.postslist li:last-child{border-bottom: none 0;} ul.phtmljaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;} ul.phtmljaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;} ul.phtmljaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;} ul.phtmljaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;} ul.phtmljaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;} #phtmljaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

Tekrar CTRL+F Yaparak Bu Sefer </head> Aratıyoruz. Aşağıda Bulunan Kodu Tekrar Bu Kodun Üstüne Yapıştırıyoruz.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="http://yourjavascript.com/94712331663/ajaxbloggermenu-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $('#phtmljaxmenu').ajaxBloggerMenu({ numPosts : 2, // Number of Posts to show defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM1LhQ3kY503i7Zk5Vni9AH47MUwLWU21mWEgvm9Mbg6xSDnZwJ5Qriv0gixEfqkUV5CwfPMU6RGKQmz-K0zdIFGwYvJpjqHftlxyLgI1mcBz5zdvlIK81ZbUiDtNryksfZYDdhyqYo7A/s120/no_image.jpg' // Default thumbnail Image }); }); </script>
Yerleşim > Gadged Ekle > HTML/JavaScript Ekle Dizinini Takip Edin. Aşağıda Bulunan Kodu Buraya Ekleyin.
<ul id="phtmljaxmenu" class="phtmljaxmenu"> <li> <a href="/">Anasayfa</a> </li> <li> <a href="#">Blogger</a> <ul> <li><a href="http://phtmldrive.blogspot.com/search/label/BloggerEklentileri">Eklentiler</a></li> <li><a href="http://phtmldrive.blogspot.com/search/label/BloggerTema">Temalar</a></li> </ul> </li> <li> <a href="#">Dersler</a> <ul> <li><a href="http://phtmldrive.blogspot.com/search/label/BloggerDersleri">Blogger Dersleri</a></li> <li><a href="http://phtmldrive.blogspot.com/search/label/HtmlDersleri">HtmlDersleri</a></li> </ul> </li> <li><a href="http://phtmldrive.blogspot.com/search/label/Script">Script</a></li> </ul>

Önemli Noktalar :

• </head> Kodunun Üstüne Yapıştırmış Olduğumuz Koddaki numPosts : 2, // Number of Posts to show Yazan Yer Kaçtane Gönderi Göstermek İstiyorsanız Okadar Yazın Mesela numPosts : 3

  İşlem Bu Kadar Basittir. Umarım İşinize Yarar Güle Güle Kullanın :)

Blogger Resimli Son yorumlar Eklentisi

  Uzun zamandır Blogger hakkında bir yazı yazmıyordum.Blogumu bu konu hakkında biraz ihmal ettiğimin farkında vardım ve tekrardan blogger ve blogger eklentileri hakkında bir yazı yazmaya karar verdim.Sonra baktım Blogger hakkında nasıl bir yazı yazabilirim die düşünmeye başladım.Baktım ki benim blogumda da olmayan Blogger da son yorumlar eklentisi ni siz değerli okuyucumlarımla paylaşmaya karar verdim.

       Blogunuzda son yorumlar eklentisini kullanmak siz blog yazarları için oldukça etkili olucaktır.Bu sayede blogunuza gelen okuyucalar son yapılan yorumlara kolayca bakacak ve en son hangi konuya yorum yapıldıysa belki o konuyu incelemeye karar verecektir.Unutmayın okuyucuya ne kadar çok seçenek sunarsanız , blogunuz için o kadar yararlı olucaktır.

        Geçelim konumuza yani blogger da resimli son yorumlar eklentisinin blogumuza nasıl uygulayacağımıza :

• Blogger panelinize giriş yapın.
• Yerleşim sekmesine tıklayanız.
• Şablonunuz ön görümünü ekrana gelecektir.Gadget ekle ye basınız .
• Html/java script kısmına tıklayınız ve aşağıda yer alan kodları açılan sayfaya yapıştırınız ve kaydet düğmesine basınız.

<style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style> <script type="text/javascript"> var numComments = 5, showAvatar = true, avatarSize = 60, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "Devamı »", defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = false; </script> <script type="text/javascript" src="http://yourjavascript.com/47621325131/sonyorum-phtml.js"></script> <script type="text/javascript" src="http://phtmldrive.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

• Kodlarımızı yapıştırdıktan sonra kaydet düğmesine tıklıyoruz.
• Kod kisminda en son da bulunan ugurturkoglu.blogspot.com adresi yerine kendi blogunuzun adresini yazmayi unutmayiniz

Blogger da Resimli son yorumlar eklentisi blogumuza uygulanmış durumda.

Herhangi bir sorunla karşılaştığınızda buradan benimle iletime geçebilirsiniz.

Blogger’da Yön Tuşlarıyla Sayfalar Arasında Geçiş Yapmak

Blogger eklentileri hızla gelişmeye devam ediyor. Bu eklentimizde ise Wordpress'te ki bazı temalarda görmüşsünüzdür bir sonraki yazıya geçmek için yön tuşlarını kullanabilirsiniz yazmakta. Bizde araştırıp bu koda ulaştık. Sizlerde blogunuzda yön tuşlarıyla (⇦ ⇨) yazılar arasında geçiş yapmak istiyorsanız hemen alttaki anlatımı iyice okuyunuz.

Alttaki kodu temanızda ki <head> kodunun altına ekliyoruz.
<script type='text/javascript'> window.onload = functionundefined) { document.onkeyup = functionundefinedevent) { if undefineddocument.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return; event = event || window.event; switchundefinedevent.keyCode) { case 37: var newerLink = document.getElementByIdundefined'Blog2_blog-pager-newer-link'); ifundefinednewerLink !=null) window.location.href = newerLink.href; break; case 39: var olderLink = document.getElementByIdundefined'Blog2_blog-pager-older-link'); ifundefinedolderLink!=null) window.location.href = olderLink.href; } }; }; </script>

Blogger Animasyonlu Buton Eklentisi

Blogunuza bir şıklık getirecek eklenti ile karşınızdayız. Bu eklentimiz ise blogunuzda paylaştığınız bağlantı linklerine verilebilecek buton örneğinden birisi. Üzerine gelince arkaplanda ki kutucukların hareketlenmesiyle şıklık veren bu butonu sitemizde sizler için paylaşıyoruz. İsterseniz anlatıma ve canlı bir demoya geçelim.

Aşağıda ki kodu temamızdan buluyoruz.
]]></b:skin>

Hemen altına aşağıda ki kodu ekliyoruz.
.buton{ font:15px Calibri, Arial, sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; background-position:bottom left; background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'); background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s; } .buton:hover{ background-position:top left; background-position:top left, bottom right, 0 0, 0 0; } .buton:active{ bottom:-1px; } /* The three butons sizes */ .buton.phtml { font-size:30px;} .buton.medium { font-size:18px;} .buton.small { font-size:13px;} /* BlueButton */ .mavi.buton{ color:#0f4b6d !important; border:1px solid #84acc3 !important; background-color: #48b5f2; background-image: url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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)); } .mavi.buton:hover{ background-color:#63c7fe; background-image: url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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 */ .yesil.buton{ color:#345903 !important; border:1px solid #96a37b !important; background-color: #79be1e; background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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)); } .yesil.buton:hover{ background-color:#89d228; background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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 */ .turuncu.buton{ color:#693e0a !important; border:1px solid #bea280 !important; background-color: #e38d27; background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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)); } .turuncu.buton:hover{ background-color:#ec9732; background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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)); } /* Orange Button */ .gri.buton{ color:#525252 !important; border:1px solid #a5a5a5 !important; background-color: #a9adb1; background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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)); } .gri.buton:hover{ background-color:#b6bbc0; background-image:url('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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('http://s6.postimg.org/a8fhgwzdp/button_bg.png'), url('http://s6.postimg.org/a8fhgwzdp/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)); }

Butonları Kullanmak için aşağıdaki kodları kullanıyoruz..
<a class="buton phtml mavi" href="LİNK/URL" target="_blank">Mavi Buton</a> <a class="buton phtml turuncu" href="LİNK/URL" target="_blank">Turuncu Buton</a> <a class="buton phtml yesil" href="LİNK/URL" target="_blank">Yeşil Buton</a> <a class="buton phtml gri" href="LİNK/URL" target="_blank">Gri Buton</a>

Mavi Buton Turuncu Buton

Yeşil Buton Gri Buton

Blogger PhtmlDrive Drop Menü

Merhaba Arkadaşlar Sizlere PhtmlDrive Drop Menü'yü Sunmaktayım. İster 2. Menü Olarak Kullanabilirsiniz. Yada Sade Blogger Siteleri İçin Çok Uygun Bir Tasarımdır. Herhangi Bir Kodunu Değiştirmediğiniz Taktirde Hiç Bir Sounla Karşılaşmıcağınızdan Emin Olabilirsiniz. Neyse Artık ben Anlatıma Geçeyim :)

Demo Görüntüsü İçin Tıklayınız.

Şablonlar > Html'yi Düzenle ye Tıklıyoruz. Hemen Ardından CTRL+F Yaparak ]]> Kodunu Aratıyoruz. Aşağıda Bulunan Kodu ]]> Üstüne Yapıştırıyoruz.

Kaynak Linki : http://phtmldrive.blogspot.com/2013/07/blogger-sosyal-media-paylasm-eklentisi.html

Şablonlar > Html'yi Düzenle ye Tıklıyoruz. Hemen Ardından CTRL+F Yaparak ]]> Kodunu Aratıyoruz. Aşağıda Bulunan Kodu ]]> Üstüne Yapıştırıyoruz.

Kaynak Linki : http://phtmldrive.blogspot.com/2013/07/blogger-sosyal-media-paylasm-eklentisi.html

Şablonlar > Html'yi Düzenle ye Tıklıyoruz. Hemen Ardından CTRL+F Yaparak ]]> Kodunu Aratıyoruz. Aşağıda Bulunan Kodu ]]> Üstüne Yapıştırıyoruz.

Kaynak Linki : http://phtmldrive.blogspot.com/2013/07/blogger-sosyal-media-paylasm-eklentisi.html

Şablonlar > Tema'yı Düzenleme ye Tıklıyoruz. Hemen Ardından CTRL+F Yaparak ]]></b:skin> Buluyoruz.

Aşağıda Vermiş Olduğum Kodları ]]></b:skin> Kodunun Üstüne Yapıştırıyoruz.

#phtmldownmenu{ background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrX82a6A7oM6C87_7y5vQVF3NvBT3jAyCTG5BoHELhUoyCN_pC1cZ04ENN9FaPH8O_WRYx5oFIN6IqJ6YNL20T7eDndd4LCxuPqgO8RBK3LcjKGBZhZToK4UR_td3yIhF7EM99_4DGkIkX/s800/navbar.gif) repeat-x top; width:702px; height:auto; margin:0; padding:0; border-top: 1px solid #AFAFAF; border-bottom: 1px solid #FFFFFF; } #phtmldownmenu ul{ float:left; list-style:none; margin:0; padding:0; } #phtmldownmenu li{ list-style:none; float:left; } #phtmldownmenu li a, #phtmldownmenu li a:link, #phtmldownmenu li a:visited{ color:#000000; font-weight:bold; display:block; text-shadow: 0px 1px 1px #fff; padding:9px 10px 9px 10px; font-size: 12px; font-family: verdana; text-decoration:none; } #phtmldownmenu li a:hover{ background:#9f9f9f; color:#ffffff; } #phtmldownmenu li ul{ z-index:10; position:absolute; height:auto; width:200px; visibility:hidden; } #phtmldownmenu li ul li a, #phtmldownmenu li ul li a:link, #phtmldownmenu li ul li a:visited{ float:none; background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrX82a6A7oM6C87_7y5vQVF3NvBT3jAyCTG5BoHELhUoyCN_pC1cZ04ENN9FaPH8O_WRYx5oFIN6IqJ6YNL20T7eDndd4LCxuPqgO8RBK3LcjKGBZhZToK4UR_td3yIhF7EM99_4DGkIkX/s800/navbar.gif) repeat-x top; width:200px; border-width:1px; border-style:solid; border-color:#575757; } #phtmldownmenu li ul li a:hover{ background:#000000; color:#ffffff; } #phtmldownmenu li:hover ul{ left:auto; visibility:visible; }

Daha Sonra,

Tekrar CTRL+F Yaparak Şu Kodu Bulucağız

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='false' title='PHtmlDrive (Üstbilgi)' type='Header'> <b:includable id='main'> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> <p class='description'> <span><data:description/></span></p> </div> </b:includable> <b:includable id='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable> </b:widget> </b:section> </div>

Bu Bulduğumuz Kodun Altına Aşağıda Bulunan Kodu Yapıştırıyoruz.

<div id='phtmldownmenu'> <ul id='phtmldownmenu'> <li><a href='http://phtmldrive.blogspot.com/'>Anasayfa</a></li> <li><a href='#'>Blogger</a> <ul> <li><a href='http://phtmldrive.blogspot.com/'>Eklentiler</a></li> <li><a href='http://phtmldrive.blogspot.com/'>Temalar</a></li> <li><a href='http://phtmldrive.blogspot.com/'>Seo</a></li> </ul> </li> <li><a href='#'>Dersler</a> <ul> <li><a href='http://phtmldrive.blogspot.com/'>Blogger Dersleri</a></li> <li><a href='http://phtmldrive.blogspot.com/'>Google Dersleri</a></li> <li><a href='http://phtmldrive.blogspot.com/'>Css Dersleri</a></li> <li><a href='http://phtmldrive.blogspot.com/'>Html Dersleri</a></li> </ul> </li> <li><a href='http://phtmldrive.blogspot.com/'>Script</a></li> <li><a href='http://phtmldrive.blogspot.com/'>WordPress</a></li> <li><a href='http://phtmldrive.blogspot.com/'>Bedava-Sitem</a></li> <li><a href='http://phtmldrive.blogspot.com/'>Filmler</a></li> <li><a href='http://phtmldrive.blogspot.com/'>PhtmlDrive</a></li> <li><a href='#'>Diğer</a> <ul> <li><a href='http://phtmldrive.blogspot.com/'>Html Kod Editör</a></li> <li><a href='http://phtmldrive.blogspot.com/'>HtmL Şifreleme</a></li> <li><a href='http://phtmldrive.blogspot.com/'>Html Renk Kodu</a></li> </ul> </li> </ul> </div>

Kodu Tam Olarak Yerine Yapıştırdıktan Sonra Üzerinde Düzenleme Yapabilirsiniz.

Umarım İşinize Yarar Güle Güle Kullanın...

Blogger Sosyal Media Paylaşım Eklentisi Yeni

Merhaba Arkadaşlar Bugün Sizlere Sosyal Media Eklentisini Göstericem. Bu Eklentiyi Diğerlerinden Ayıran Özelliklerinden Biri İse Mause Üstüne Geldiğinde Büyümesidir. Umarım Hoşunuza Gider Sizler İçin Araştırıpta Buldum.

Şablonlar > Html'yi Düzenle ye Tıklıyoruz. Hemen Ardından CTRL+F Yaparak ]]></b:skin>  Kodunu Aratıyoruz.

Aşağıda Bulunan Kodu ]]></b:skin> Üstüne Yapıştırıyoruz.
.phtmlwrap{ list-style-type:none; margin:0; padding:0; } .phtmlwrap li{ display:inline; width: 65px; height:60px; } .phtmlwrap li img{ width: 55px; height: 60px; border:0; margin-right: 12px; -webkit-transition:-webkit-transform 0.1s ease-in; -o-transition:-o-transform 0.1s ease-in; } .phtmlwrap li img:hover{ -moz-transform:scale(1.8); -webkit-transform:scale(1.8); -o-transform:scale(1.8); }

Bu Kodu Yerleştirdikten Sonra Kaydedip Çıkıyoruz.

Yerleşim > Gadget Ekle > HTML/JavaScript Ekle'ye Tıklıyoruz. Ve Aşağıda Vermiş Olduğum Kodları Buraya Yapıştırıyoruz.
<div class='phtmlwrap'> <ul> <li><a href='Facebook-URL'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkLgpPqKI/AAAAAAAAEpE/MoiG31eV3gg/facebook_thumb%5B2%5D.png' title='Facebook'/></a></li> <li><a href='Twitter-URL'><img src='http://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb%5B2%5D.png' title='Twitter'/></a></li> <li><a href='Stumbleupon-URL'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkRZT8XHI/AAAAAAAAEpU/boHguF0HbX0/stumbleupon_thumb%5B2%5D.png' title='Stumbleupon'/></a></li> <li><a href='Digg-URL'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkJCcKt5I/AAAAAAAAEo8/6LdMi30Ms0o/digg_thumb%5B2%5D.png' title='Digg'/></a></li> <li><a href='RSS Feed-URL'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkOKs2gnI/AAAAAAAAEpM/atV8KDhqKcI/rss_thumb%5B2%5D.png' title='RSS Feed'/></a></li> </ul> </div>

Düzenlenmesi Gerekenler :

• <a href='Facebook-URL'> Olan Kısımları Düzenliceksiniz.
• Not: Kod da Başka HiçBir Şeye Dokunmayın Aksi Halde Çalışmaz

Umarım Beğenmişsinizdir. Güle Güle Kullanın :)

Light Box Blogger Resim Görüntüleme Eklentisi

Light Box Blogger Resim Görüntüleme Eklentisi

Light Box, bir çoğunuzun bildiği ve belkide blogunda kullandığı ya da kullanmak istediği şık bir resim görüntüleme eklentisi. Blogger resim görüntüleme özelliği hakkında bulabildiğim türkçe kaynakları sizler ile paylaşmak ve konuyu Takip Listem penceresinden sizlere anlatmak istiyorum. Öncelikle, Light Box özelliğinin yaratıcısının, uygulamasını örnekler ile anlattığı yazısını incelemenizi tavsiye ederim; Lokesh Dhakar. Örnek resimlere tıklayarak uygulamanın nasıl çalıştığı hakkında bilgi sahibi olabilirsiniz.

Tabi bu uygulamanın blogger alt yapısına uyumluluğunu merak ediyor olabilirsiniz. Uygulamanın blogger ile uyumlu çalıştığını sizlere göstermek için bir örnek blog oluşturdum. Merak ediyorsanız, Light Box Blogger Resim Görüntüleme uygulamasını alttaki adresten kontrol edebilirsiniz;

Demo Görüntüsü

Light Box Blogger Resim Görüntüleme Uygulamasını Blogger'a Entegre Etmek

1. Blogger Kontrol Paneline Giriş Yapın.

2. Yerleşim ► HTML'yi Düzenle yolunu izleyin.

3. Alttaki kodu temanızda bulun.
</head>

4. Bulmuş olduğunuz kodun hemen bir üst satırına alttaki kodu yapıştırın;
<style> #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(http://i43.tinypic.com/mj5wyd.jpg) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(http://i44.tinypic.com/mjljmh.jpg) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } round-color: #000; } lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } round-color: #000; } </style> <script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/> <script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/> <script src='http://www.weebly.com/uploads/2/2/1/0/2210502/lightbox.js' type='text/javascript'/>

Temanızı kaydedin. Herhangi bir sorun ile karşılaşmadıysanız. İkinci adıma geçebilirsiniz. Kodun kaynağı, Blogger Widgets sitesidir. Eğer bir sorunla karşılaşırsanız, lütfen adımları tekrar edin. Sorun halen sürmekte ise, yorumlar kısmında sorununuz hakkında detaylı bilgi vererek yardım istemekten çekinmeyin.

Resimlerde Light Box Kullanımı için Resim Kodlarını Düzenleme

Birinici adımı başarı ile tamamlayarak, Blogger temanızın Light box kullanımı için geliştirilmiş oldunuz. Şimdi, temanıza yukarıda eklemiş olduğunuz kodların, blogunuzda işler hale gelmesi için resim kodlarınızda ufak bir değişiklik yapmanız gerekiyor.

Bu adımda; Light Box uygulamasını kullanacağınız resimlerinize başlık ekleyebilir, tek ya da grup halinde resimlerin görüntülenmesini sağlayabilirsiniz.

Blogger Resim Yükleme
Normal olarak blogger resim ekle özelliği ile yazılarınıza resim eklediğinizde yazınızı Oluştur kısmından HTML'yi Düzenle kısmına geçerseniz; alttaki örnek resimdeki bir kodlama ile karşılaşırsınız. Örnek resmi detaylı incelemek için resme tıklayın.

Blogger Resim Kodu Düzenleme
Yukarıdaki şekilde olan resim kodlarınızda iki küçük değişiklik yaptığınız anda o resim light box blogger resim görüntüleme özelliği ile görüntülenecektir.  Bunun için yapmanız gerekenler şöyle;

Blogger Resim Kodu Düzenleme

1 - Yukarıdaki örnek resimde de görebileceğiniz gibi Bloggerda Light Box ile Resim Görüntüleme özelliğinin aktif hale gelmesi için kodda yer alan s1600-h kısmındaki -h kısmını silmelisiniz.

2 - Yukarıdaki örnek resimde belirtilen yere alttaki kod eklemelisiniz;

► Light Box ile Tek Resim Göstermek için Alttaki Kodu Ekleyin;

rel="lightbox" title="Resim Başlığı"

► Light Box ile Resimleri Grup Halinde Göstermek İçin Alttaki Kodu Ekleyin;

rel="lightbox[albumismi]" title="Resim Başlığı"

Yukarıdaki kodda albumismi yazan yere grup halinde göstereceğiniz resimlere ait bir grup adı yazabilirsiniz. Gruba ait tüm resimlerde aynı album ismi yazılmalıdır. Resim Başlığını her resim için ayrı ayrı yazabilirsiniz.

Uygulamada kullanılan resimleri türkçe olarak bulabildiğim düşüngeç sitesinin yazısından aldım. Ve Light Box penceresi açıldığında grup resimlerine ait başlığın altında yazan kaçıncı resim olduğunu belirten kısımları tamamen türkçeleştirdim. Diğer bulduğum yazıların tam manası ile önerilmeye değer olduğunu düşünmediğim için yer vermedim. Ancak, sizlerin konu hakkında benzer site önerileriniz varsa yorumlar kısmında belirtebilirsiniz. Gözden kaçırdıklarım olabilir. Farklı sitelerin, uygulamayı kullanmak isteyenler için yol gösterici olacağını düşünüyorum.

Eğer yazıyı beğendiyseniz ve uygulama kısmında da herhangi bir soru ile karşılaşmadıysanız; Twitter, Facebook, Delicious vb. sosyal paylaşım siteleri ile yazıyı paylaşırsanız çok sevinirim.

Blogger Geri Sayım Sayacı Eklentisi

Blogger siteniz için geri sayım sayacı özel bir gününüz veya bir nedeniniz varsa ve sitenize eklemek için sayaç arıyorsanız bu eklenti tam size göre eklentiyi kurmak gayet basit eklentiyi kurmadan önce şablonunuzun yedeğini almayı unutmayınız.Eklentinin önizlemesini aşağıda göriceksiniz beğenmeniz durumunda siteye ekleyebilirsiniz.

Blogger Geri Sayım Sayacı Eklentisi

Eklentiyi eklemeye geçersek aşağıdaki kodu şablonumuzda buluyoruz.
</head>
Yukarıdaki kodu bulup hemen üzerine aşağıdaki kodları ekliyoruz.
<script language="Javascript" type="text/javascript" src="http://yourjavascript.com/71208334201/jquery-1-4-1.js"></script> <script language="Javascript" type="text/javascript" src="http://yourjavascript.com/43133702581/jquery-lwtcountdown-1-0.js"></script> <script language="Javascript" type="text/javascript" src="http://yourjavascript.com/13113784227/misc.js"></script> <style> h1 { font-size: 28pt; letter-spacing: 12px; border-bottom: 1px solid #ddd; margin: 0; } h2.subtitle { margin-top: 0px; margin-bottom: 40px; } #container { margin: 100px auto; width: 700px; color: #555; } #countdown_dashboard { height: 110px; } .dash { width: 110px; height: 114px; background: transparent url('http://dl.dropbox.com/u/51120133/countdown/dash.png') 0 0 no-repeat; float: left; margin-left: 20px; position: relative; } .dash .digit { font-size: 55pt; font-weight: bold; float: left; width: 55px; text-align: center; font-family: Times; color: #555; position: relative; } .dash_title { position: absolute; display: block; bottom: 0px; right: 6px; font-size: 9pt; color: #555; text-transform: uppercase; letter-spacing: 2px; } .dev_comment { font-size: 14pt; color: #777; text-align: center; font-style: italic; margin: 40px 10px; } #subscribe_form { position: relative; } #email_field { font-size: 16pt; padding: 6px 10px; width: 300px; } #subscribe_button { font-size: 14pt; color: #333; padding: 4px 8px; } .copyright { font-size: 9pt; color: #333; margin: 40px 0px; } .faded { color: #999; } .form_message { width: 400px; padding: 10px; margin: 15px auto; display: none; } #error_message { background-color: #ffe; border-left: 5px solid #bb3; border-right: 5px solid #bb3; color: #770; } #info_message { background-color: #f0f9ff; border: 1px solid #eef; } #loading { text-align: center; margin: 10px; display: none; position: absolute; width: 100%; top: 60px; } </style>

Daha sonra sayacı göstermek istediğiniz bölüme aşağıdaki kodu ekliyoruz isterseniz gadget olarak ekleyip deneyebilirsiniz temanızda göstermek istediğiniz yere eklemeniz yeterlidir. 

<div id="countdown_dashboard"> <div class="dash weeks_dash"> <span class="dash_title">hafta</span> <div class="digit"> 0</div> <div class="digit"> 0</div> </div> <div class="dash days_dash"> <span class="dash_title">gün</span> <div class="digit"> 0</div> <div class="digit"> 0</div> </div> <div class="dash hours_dash"> <span class="dash_title">saat</span> <div class="digit"> 0</div> <div class="digit"> 0</div> </div> <div class="dash minutes_dash"> <span class="dash_title">dakika</span> <div class="digit"> 0</div> <div class="digit"> 0</div> </div> <div class="dash seconds_dash"> <span class="dash_title">saniye</span> <div class="digit"> 0</div> <div class="digit"> 0</div> </div> </div> <div class="dev_comment"> TESKEREYE KALAN SÜRE :) </div> <script language="javascript" type="text/javascript"> jQuery(document).ready(function() { $('#countdown_dashboard').countDown({ targetDate: { 'day': 394,// hedef gün 'month': 14,// hedef ay 'year': 2013,// hedef yıl 'hour': 24,// hedef saat 'min': 60,// hedef dakika 'sec': 60//hedef saniye } }); }); </script> Yukarıdaki kodda değiştirilicek yerler kırmızı ile belirlenmiştir dilediğiniz gibi değiştirerek kullanabilirsiniz herhangi bir sorunda yorum bölümünden sorununuzu belirtebilirsiniz.

Blogger En Çok Yorum Yapanlar Eklentisi

Blogger sitenizde kullanabiliceğiniz çok güzel bir eklenti daha, eklentinin amacı sitenizde en çok yorum yapanları göstermesidir. Eklentiyi kolay bir şekilde sitenize ekleyebilirsiniz.  Eklentiden bir görüntü altta eklenmiştir önizlemesini görebilir beğenmeniz durumunda sitenize ekleyebilirsiniz. Daha fazla Blogger eklentilerini sitemizde bulabilirsiniz.

Sitenize eklemek için aşağıdaki kodu. Kumanda Paneli > Blogunuz > Yerleşim > Gadget ekle > HTML/Javascript  yolunu izleyerek sitenize ekliyorsunuz.

 <style type="text/css">
.top-commenter-line {margin: 3px 0;}
.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-avatar {vertical-align:middle;}
</style>
<script type="text/javascript">
// CONFIG:
var maxTopCommenters = 8;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 28;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi59duvcjYxDPWjsYaUgUDvBI1vS7ht6jYZ4BTsEfo7Pb_zObwSRFDXwOZtpbJcKiMqNt85UsOD2Tt1hldESWgiUQC9LP65z6-aL1YR3fOwX42nS0GPz2_GjRv_R10mEKXEwCHqxvhfFR0/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }

  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
} 
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Kodu isteğe göre ayarlayabilirsiniz

var maxTopCommenters = 8  // Kaç kullanıcının gösterilmesi gerektiğini ayarlar.

var sizeAvatar = 28;  // Kullanıcı avatarlarının boyutunu gösterir(px)

İşlemlerimiz bukadar eklentiyi başarı ile kurmuş bulunmaktasınız. Güle güle kullanın.