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 :)