tag:blogger.com,1999:blog-78294755431717804862024-03-21T09:02:24.583+03:00Blog BakkalıBlogger ipuçları, eklentileri ve şablonlarıAnonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.comBlogger41125tag:blogger.com,1999:blog-7829475543171780486.post-12059534311970181972017-01-04T15:41:00.005+03:002017-01-04T15:43:07.814+03:00Filografi Sanatıyla Tanıştınız mı?<h2>
<span style="background-color: white; font-family: "verdana" , sans-serif;">Filografi Sanatı Nedir?</span></h2>
<span style="background-color: white; font-family: "verdana" , sans-serif;"><span class="first-letter">F</span>ilografi Ortadoğu'da doğmuş ve Avrupa'dan Uzak Doğu'ya kadar yayılmış ancak yapımının zor olduğu düşüncesiyle yok olmaya yüz tutmuş bir el sanatıdır.</span><br />
<span style="background-color: white; font-family: "verdana" , sans-serif;"><br />
</span> <span style="background-color: white;"><span style="font-family: "verdana" , sans-serif;">Çivi ve tel… İkisinin maharetli ellerde şekillendiği bir el sanatı; <i><b>filografi</b></i>… Çivilerin arasından tellerin geçirilmesi ile objelere estetik görününüm kazandırılması işlemi olarak tanımlanan filografi de belli örgü teknikleri kullanılarak hat yazıları, simetrik desenler, amblemler, çiçekler ve çizgi film karakterleri panolar haline getirilebiliyor.Yeteri kadar uygulanmadığı için giderek yok olan bir sanattır. </span></span><br />
<span style="background-color: white;"><span style="font-family: "verdana" , sans-serif;"><br />
</span></span> <span style="background-color: white;"><span style="font-family: "verdana" , sans-serif;">Eğer siz de bu nadide sanatın yok olmasına razı değilseniz sorularınızı <b><a href="http://blogbakkali.blogspot.com.tr/p/iletisim.html" target="_blank">buradan</a></b> sorabilir nasıl yapıldığıyla ilgili bilgiler alabilirsiniz. Kendiniz de evde hobi olarak başlayabilirsiniz. </span></span><br />
<span style="background-color: white;"><span style="font-family: "verdana" , sans-serif;"><br />
</span></span> <span style="background-color: white;"><span style="font-family: "verdana" , sans-serif;"><b><i>Asaf Filografi</i></b> aracılığıyla istediğiniz ölçü ve boyutlarda, dilediğiniz motif,amblem,marka,hat vs. şekillerde tablo sipariş edebilir; ücretsiz kargosundan Türkiye'nin her yerine tablonuzu isteyebilirsiniz (Kapıda Ödemeli).</span></span><br />
<span style="background-color: white;"><span style="font-family: "verdana" , sans-serif;"><br />
</span></span> <span style="font-family: "verdana" , sans-serif;"><span style="background-color: white;">Yapımı bitmiş bazı sanat ürünlerinin fotoğrafları aşağıda sıralanmıştır. Bunlara bakarak fikir edinebilirsiniz.</span></span><br />
<span style="font-family: "verdana" , sans-serif;"><span style="background-color: white;"><br />
</span></span> <span style="font-family: "verdana" , sans-serif;"><span style="background-color: white;">Evlilik Yıldönümü, Sevgililer Günü, Doğum Günü veya Hediye olarak ne alacağınızı düşünüyor bulamıyorsanız bundan daha iyi bir hediyeyi ben düşünemiyorum. Sipariş vermek için bize mail atabilirsiniz.</span></span><br />
<span style="font-family: "verdana" , sans-serif;"><span style="background-color: white;"><br />
</span></span> <br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blogbakkali.blogspot.com.tr/p/iletisim.html" target="_blank">SİPARİŞ VER</a></li>
</ul>
<div style="text-align: left;">
<br />
<br />
<br /></div>
<div style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;">Resimleri büyütmek için üzerine tıklayın.</span><br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEweyXRrGqihp6AhATCg5DXuTFjLWJ82y1ORtdL9bpSNeiifb58ZDhCng44LQy6gRx9hXWTVl2zpkdmQ5WhbPU-zFUzlBlDQspTh2hFDjNbhzyxDIoNeBrh6juOHh8YYjspDbp4muR2Qg/s1600/filografi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Filografi Sanat" border="0" height="636" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaEweyXRrGqihp6AhATCg5DXuTFjLWJ82y1ORtdL9bpSNeiifb58ZDhCng44LQy6gRx9hXWTVl2zpkdmQ5WhbPU-zFUzlBlDQspTh2hFDjNbhzyxDIoNeBrh6juOHh8YYjspDbp4muR2Qg/s640/filografi.jpg" title="Filografi Sanat" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhRZI3QJKtHyxbskJL0cSvkWq5XO5Glv7MH2XxOiI2Kz71VtVyliAPBcuzBZwNw7N9a-SYL6NVOlsAhaHdSRNjk-nD7dmMM_N89XPMdU80weR46hHFFruvuT_7v88aW9w0eAinxS0BvTCR/s1600/filografi2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Filografi Sanat" border="0" height="504" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhRZI3QJKtHyxbskJL0cSvkWq5XO5Glv7MH2XxOiI2Kz71VtVyliAPBcuzBZwNw7N9a-SYL6NVOlsAhaHdSRNjk-nD7dmMM_N89XPMdU80weR46hHFFruvuT_7v88aW9w0eAinxS0BvTCR/s640/filografi2.jpg" title="Filografi Sanat" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZHVHEzyJro0O4CM2l-cxCMPoSHMV-BhLdLLXMa04xiCcXTHbEIs8ryDb8RpzzMB4njf_c8tT1R3RHiuNoFvEJ2TndzaCNAK_nTWYPB_VR5EfYqPjuYfaMNqw31u8wRmDWePwrI_sHAPTz/s1600/filografi-eserleri.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Filografi Sanat" border="0" height="424" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZHVHEzyJro0O4CM2l-cxCMPoSHMV-BhLdLLXMa04xiCcXTHbEIs8ryDb8RpzzMB4njf_c8tT1R3RHiuNoFvEJ2TndzaCNAK_nTWYPB_VR5EfYqPjuYfaMNqw31u8wRmDWePwrI_sHAPTz/s640/filografi-eserleri.jpg" title="Filografi Sanat" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80W-a98rQewXTHu__FBJCTrzUH24SJJwCZIL19XcodHsm_CLPJ4SRymTmoHjKEKFEblsaG5CG_PxmiPSAOS4G8I6oxwPI6E3-UhOYM_4WCtRnbXzGtxIzh6xDWO2o_XLFkZ09cuLitfcx/s1600/filografi-sanati-ile-kabe.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Filografi Sanat" border="0" height="424" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80W-a98rQewXTHu__FBJCTrzUH24SJJwCZIL19XcodHsm_CLPJ4SRymTmoHjKEKFEblsaG5CG_PxmiPSAOS4G8I6oxwPI6E3-UhOYM_4WCtRnbXzGtxIzh6xDWO2o_XLFkZ09cuLitfcx/s640/filografi-sanati-ile-kabe.jpg" title="Filografi Sanat" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb5EhNWarxmI6ThOs2vLLJ72Xe4mgb-e5SzVLwJefrXOMdKfCBJcLpQR_LQczQgovgNZgNBrlGHIM2W2I1kypZh7SxILB-G4-9wBH25ER0Y8z6A4dIn6VEFkpH4GiF3uTTceTDX9qKVfLG/s1600/filografisanati.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Filografi Sanat" border="0" height="624" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb5EhNWarxmI6ThOs2vLLJ72Xe4mgb-e5SzVLwJefrXOMdKfCBJcLpQR_LQczQgovgNZgNBrlGHIM2W2I1kypZh7SxILB-G4-9wBH25ER0Y8z6A4dIn6VEFkpH4GiF3uTTceTDX9qKVfLG/s640/filografisanati.jpg" title="Filografi Sanat" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYt_0B_2UX7BFkNER0I5AY2LiGVECnB2B28tOd5t61eTZwpAN_IUXMOhVlGjInxV_FtSRV9zGnI15nT1EEDQflZHoVcRQiO3nsa88bBFjBwfJZzKSU4SEjIDnTASQ6eEhflZlyQH2azxzx/s1600/gs-filografi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Filografi Sanat" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYt_0B_2UX7BFkNER0I5AY2LiGVECnB2B28tOd5t61eTZwpAN_IUXMOhVlGjInxV_FtSRV9zGnI15nT1EEDQflZHoVcRQiO3nsa88bBFjBwfJZzKSU4SEjIDnTASQ6eEhflZlyQH2azxzx/s640/gs-filografi.jpg" title="Filografi Sanat" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-size: x-small;">Etiketler: <b><i>Filografi sanatı nedir, filografi nasıl yapılır, filografi tablo siparişi, galatasaray amblemi şeklinde filografi tablo yapımı, fenerbahçe tablosu yap, hat sanatı filografi tel ve çivi ile yapımı, sarma sanatı, filografi malzemeleri nedir, tablo siparişi ver, kapıda ödemeli, doğum günü hediyesi ne alabilirim, evlilik hediyesi ne alınır?</i></b></span></div>
</div>
</div>
<div class="clear">
</div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com18tag:blogger.com,1999:blog-7829475543171780486.post-64138287403822826812016-02-12T21:06:00.001+02:002016-02-12T21:06:03.066+02:00Yıldız Değerlendirmeli Popüler Yayınlar Eklentisi<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj94YNeguK6SydclWZnaAP_rwpymw0VyuG_Rn-Jyu3lSxwdSRoM1wRbeMy3_EFt9t1xCElfJovFI8CRp9jxv68blOJRNlYAYqtn1L2_gNv78OJCgsZWHpOPuaOhic7T3VKRbmXY4Zt8A6GC/s1600/blogger-populer-yayinlar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger-popular-yayinlar-yildizli" border="0" height="436" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj94YNeguK6SydclWZnaAP_rwpymw0VyuG_Rn-Jyu3lSxwdSRoM1wRbeMy3_EFt9t1xCElfJovFI8CRp9jxv68blOJRNlYAYqtn1L2_gNv78OJCgsZWHpOPuaOhic7T3VKRbmXY4Zt8A6GC/s640/blogger-populer-yayinlar.png" title="Yıldız Değerlendirmeli Popüler Yayınlar Eklentisi" width="640" /></a></div>
<br />
<br />
<span style="font-family: "verdana" , sans-serif;"><span class="first-letter">B</span>logger bloglarımıza eklediğimiz <b>popüler yayınlar</b> widgetının daha şık görünmesi için bir takım modifiyeler yapmıştık, şimdi bir farklı tarz daha deneyeceğiz, isteyen bunu da uygulayabilir.</span><br />
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">Daha önceki paylaştığım popüler yayınlar modifiyeleri aşağıdakiler. (İsterseniz bir göz atın onlara da).</span><br />
<br />
<ol>
<li><span style="font-family: "verdana" , sans-serif;"><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-populer-yayinlar-modifiyesi.html" target="_blank">Popüler Yayınlar Modifiyesi</a></span></li>
<li><a href="http://xn--yeni%20popler%20yaynlar%20gadgetimiz-n0d73r/" target="_blank"><span style="font-family: "verdana" , sans-serif;">Yeni Popüler Yayınlar Gadgetimiz</span></a></li>
</ol>
<div>
<span style="font-family: "verdana" , sans-serif;">Şimdi yeni eklentimiz hakkında konuşalım. Bu popüler yayınlar düzenlemesini halihazırda benim bloğumda görmeniz mümkün. (Bkz:sağ tarafta)</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">O hafta veya ay en çok tıklanan yazınız hangisiyse otomatik olarak o yazıya beş yıldız veriyor. İkinciye dört, üç, iki diye gidiyor. Yıldız değerlendirmesi oluyor ya onun gibi birşey.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">Buradaki amaç popüler yayınlarımızın biraz daha şık durması ve dikkat çekmesidir.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">Şimdi anlatıma geçelim.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">1. Blogger giriş.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">2. Şablon</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">4. Açılan kodlar üzerine tıkla CTRL F tuşlarına bas arama kutusuna <span style="color: red; font-weight: bold;"></head> </span>yaz ve bul.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">5. Bu kodun alt satırına aşağıdaki kodları ekle. </span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
</div>
<pre data-codetype="HTML"><link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/></pre>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">6.Şimdi </span><span style="background-color: white; color: red; font-family: "verdana" , sans-serif; font-size: 14px; font-weight: bold; line-height: 23.8px;">]]></b:skin> </span><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 14px; line-height: 23.8px;">kodunu bulun ve üst satırına aşağıdaki kodları ekleyin.</span><br />
<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 14px; line-height: 23.8px;"><br />
</span><br />
<pre data-codetype="CSS">/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}</pre>
<br />
<span style="font-family: "verdana" , sans-serif;">7. Şablonu kaydedin.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">İşlem bu kadar basit. Bir de bu eklentinin yıldızlarıyla ilgili farklı yorumları var. Onları da denemek isterseniz bunun yerine aşağıdaki herhangi birini ekleyebilirsiniz. Aynı CSS kodlarını defalarca eklemeyin he ya yukarıdakini ekleyin yada aşağıdakilerden birini :)</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span><span style="font-family: "verdana" , sans-serif;"><b>Stil 2</b> </span><br />
<pre data-codetype="CSS">/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}</pre>
<br />
<span style="font-family: "verdana" , sans-serif;"><b>Stil 3</b></span><br />
<pre data-codetype="CSS">/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}</pre>
<br />
<span style="font-family: "verdana" , sans-serif;">Arkadaşlar destek olmak için bloğumu izleyin ve lütfen yorumlarınızla güzellik katın. İyi bloglamalar :)</span>Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com11tag:blogger.com,1999:blog-7829475543171780486.post-78206292573738382412016-01-11T11:57:00.000+02:002016-01-11T11:59:08.432+02:00Blogger Işıklı Numaralı Sayfa Navigasyonu<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLjmMFmMlIPKn2y-sGl7QRqVSfdShocPfAbowoxCChLGy1GRjoyuqdFZNxSqPuuPbzsTWj2n_Hs7AZp4WM0GI12ZiOKKZqSj-EFhidj0zFB_Ti51YxJkaOwp9dGwItPVwz3IxE0_9FucXB/s1600/blogger-numarali-sayfa-navigasyonu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger-numarali-sayfa-navigasyonu" border="0" height="425" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLjmMFmMlIPKn2y-sGl7QRqVSfdShocPfAbowoxCChLGy1GRjoyuqdFZNxSqPuuPbzsTWj2n_Hs7AZp4WM0GI12ZiOKKZqSj-EFhidj0zFB_Ti51YxJkaOwp9dGwItPVwz3IxE0_9FucXB/s640/blogger-numarali-sayfa-navigasyonu.png" title="Numaralı Sayfa Navigasyonu" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: Verdana, sans-serif;"><span class="first-letter"><br /></span></span>
<span style="font-family: Verdana, sans-serif;"><span class="first-letter">H</span>epimizin bildiği üzere standart blogger şablonlarında sayfalar arasında geçiş yaparken <b>daha eski kayıtlar</b>, <b>daha yeni kayıtlar</b> gibi uzun ve bana göre saçma linkler vardır.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Ben bunların yerine daha şık ve kullanışlı olacağını düşündüğüm ışıklı numaralı sayfa navigasyonunu sizlerle paylaşmak istedim. İsterseniz nasıl yapılacağına geçelim.</span><br />
<h2>
<span style="font-family: Verdana, sans-serif;">Blogger Işıklı Numaralı Sayfa Navigasyonu Nasıl Yapılır?</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Blogger yönetici paneline girin.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. Şablon - HTML'yi Düzenle yolunu akip edin açılan kodlar üzerine tıklayın.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. CTRL F tuşlarına basarak arama kutusunu açın ve <span style="background-color: white; color: red; font-size: 14px; font-weight: bold; line-height: 23.8px;">]]></b:skin> </span><span style="background-color: white; font-size: 14px; line-height: 23.8px;">kodunu bulun.</span></span></div>
<div>
<span style="background-color: white; font-family: Verdana, sans-serif; font-size: 14px; line-height: 23.8px;">4. Bu kodun üst satırına aşağıdaki CSS kodlarını ekleyin.</span><br />
<span style="background-color: white; font-family: verdana, sans-serif; font-size: 14px; line-height: 23.8px;"><br />
</span> <br />
<pre data-codetype="CSS">/* Blog Bakkalı Sayfa Navigasyonu */
.showpageArea{overflow:hidden;margin:10px 0}
.showpageOf{display:inline-block;background:#fff;padding:6px 8px;color:#222;border:1px solid #e3e3e3;margin-right:2px;border-radius:2px}
.showpagePoint{background:#f76253;border:1px solid #e2574a;color:#fff;display:inline-block;padding:6px 8px;margin-right:2px;border-radius:2px}
.showpage a,.showpageNum a{display:inline-block;background:#fff;padding:6px 8px;color:#222;border:1px solid #e3e3e3;margin-right:2px;border-radius:2px}
.showpage a{margin:0;margin-left:2px;}
.showpage a:hover,.showpageNum a:hover{background:#f76253;color:#fff;border-color:#e2574a;}</pre>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">5. Şimdi <b><span style="color: red;"></body></span></b> kodunu bulun ve aşağıdaki kodları bir üst satırına yapıştırın.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<pre data-codetype="JavaScript"><b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=3;
var upPageWord =&#39;&#171;&#39;;
var downPageWord =&#39;&#187;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span class="showpageOf"> Pages '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span class="showpageOf"> Pages '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>
</b:if>
</b:if></pre>
<br />
<span style="font-family: Verdana, sans-serif;">6. Şablonunuzu kaydedin. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Tebrikler! <b><i><a href="http://blogbakkali.blogspot.com.tr/2016/01/blogger-isikli-numarali-sayfa-navigasyonu.html">Blogger ışıklı numaralı sayfa navigasyonu</a></i></b>nuz hazır. Şimdi bloğunnuzu açın ve kontrol edin :) </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">Destek olmak için bloğumu izlemeyi ve yorumlarınızla güzellik katmayı unutmayın. İyi bloglamalar.</span></blockquote>
</div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com6tag:blogger.com,1999:blog-7829475543171780486.post-64130798479987828172015-12-14T23:32:00.000+02:002015-12-14T23:32:33.477+02:007 Adımda Otomatik Slider Yapımı<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjINKzKBa2idrHPvS66BULwcuj6VJ8pD6gBiiCACIHNhq8ToQ8zh8qrl_UQvlaD2B-P8i9GNAsOpqNj4FZEI5QZSeBbPTvabB48YB-7ykxjV9MHjDNDK9f8o1xzlzX96wfnq712rwUutJq/s1600/blogger-slider.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger Otomatik Slider" border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjINKzKBa2idrHPvS66BULwcuj6VJ8pD6gBiiCACIHNhq8ToQ8zh8qrl_UQvlaD2B-P8i9GNAsOpqNj4FZEI5QZSeBbPTvabB48YB-7ykxjV9MHjDNDK9f8o1xzlzX96wfnq712rwUutJq/s640/blogger-slider.png" title="Otomatik Slider" width="640" /></a></div>
<span style="font-family: "verdana" , sans-serif;"><b><br /></b></span>
<span style="font-family: "verdana" , sans-serif;"><b>Blogger otomatik duyarlı slayt kutusu yapımı</b>. Bloğunuza gadget olarak ekleyebileceğiniz bir slayt alanı oluşturmak için bu yazımı okuyun.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br /></span>
<span style="font-family: "verdana" , sans-serif;">Gadget olarak istediğiniz yere ekleyebilirsiniz. </span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">Paylaşacağım bu <i>slayt eklentisi</i> duyarlıdır, yani gadget olarak eklediğiniz yerin boyutuna göre otomatikman küçülür veya büyür. Aynı şekilde değişik ekran boyutlarına göre şekil alması anlamına gelir. </span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">Slaytlar arası geçişlerde değişik efektler var ki bu şık olmasında bir etken.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">Bu <b>slider</b>i bloğunuzda vitrin olarak kullanabilirsiniz yani böyle de düşünebiliriz zaten çok şık bir yapısı var. </span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">Slayt alanında son yazılarınız otomatik gösterilir. Kaç yazınızın görüneceğini siz ayarlayabilirsiniz. </span><br />
<span style="font-family: "verdana" , sans-serif;">Blog başlığınızın altında güzel duracağını düşündüğüm bu slayt alanının nasıl yapıldığına geçelim isterseniz. Yapımı çok basit bakmayın kodların uzun olmasına. Kopyala yapıştır yapacaksınız yani :)</span><br />
<br />
<div id="wrap">
<a class="btn-slide" href="http://codepen.io/blogbakkali/full/JGYgar/" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span><br />
<span class="title">DEMO</span><br />
<span class="title-hover">Buraya Tıkla</span><br />
</a></div>
<br />
<h2>
<span style="font-family: "verdana" , sans-serif;">Blogger Otomatik Slayt Alanı Nasıl Yapılır?</span></h2>
<div>
<span style="font-family: "verdana" , sans-serif;">1. Blogger giriş.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">2. Şablon</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">4. Kodlar üzerinde bir yere tıklayın CTRL F tuşlarına basarak arama kutusunu açın ve <span style="background-color: white; color: red; font-size: 14px; font-weight: bold; line-height: 23.8px;">]]></b:skin> </span><span style="background-color: white; font-size: 14px; line-height: 23.8px;">kodunu bulun.</span></span></div>
<div>
<span style="background-color: white; font-size: 14px; line-height: 23.8px;"><span style="font-family: "verdana" , sans-serif;">4. Bu kodun üst satırına aşağıdaki kodları yapıştırın.</span></span></div>
<div>
<span style="background-color: white; font-size: 14px; line-height: 23.8px;"><span style="font-family: "verdana" , sans-serif;"><br />
</span></span><br />
<pre data-codetype="CSS">/* Blog Bakkalı Slayt Alanı */
#skitterslideshow{padding:4px;border:1px solid #DDD;box-shadow:0 1px 5px rgba(0,0,0,.15)}
#slider-wrapper-indzign{padding:0;background-color:#FDFDFD;box-shadow:0 1px 5px rgba(0,0,0,.15);border-radius:3px;height:250px;position:relative;z-index:8888}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button,.box_skitter_home.indzign-theme .info_slide_dots{background-color:#fbfbfb;transition:background-color linear .3s}
.box_skitter ul{display:none}
.box_skitter .container_skitter{overflow:hidden;position:relative;width:100%;height:100%}
.box_skitter .image{overflow:hidden;max-width:100%;max-height:100%}
.box_skitter .image img{display:none;width:100%;height:100%}
.box_skitter .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.box_skitter img{max-width:none}
.box_skitter .box_clone img{position:absolute;top:0;width:620px;height:310px;max-width:630px;left:0;z-index:19}
.box_skitter .prev_button{position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px}
.box_skitter .next_button{position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px}
.box_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:padding:5px 0 5px 5px;border-radius:5px;opacity:0.75}
.box_skitter .info_slide .image_number{background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;border-radius:2px}
.box_skitter .info_slide .image_number_select{background:#c00;float:left;padding:2px 10px;margin:0 5px 0 0}
.box_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}
.box_skitter .info_slide_thumb{border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0}
.box_skitter .info_slide_thumb .image_number{overflow:hidden;width:70px;height:40px;position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute;top:-50px;left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:#ccc;width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;border-radius:20px;cursor:pointer;border:1px solid #333}
.box_skitter .info_slide_dots{position:absolute;bottom:-40px;z-index:151;padding:5px 0 5px 5px;border-radius:50px}
.box_skitter .info_slide_dots .image_number{background:#333;float:left;margin:0 5px 0 0;cursor:pointer;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden}
.box_skitter .info_slide_dots .image_number_select{background:#c00;float:left;margin:0 5px 0 0}
.box_skitter .label_skitter{z-index:80;position:absolute;bottom:0;left:0;display:none}
.loading{position:absolute;top:50%;right:50%;z-index:10000;margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:#FFF no-repeat left top;width:32px;height:32px}
.label_skitter{z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.9;background:#000}
.label_skitter p{padding:5px;margin:0}
.box_skitter .progressbar{background:#000;position:absolute;bottom:5px;left:10px;height:5px;width:940px;z-index:99;border-radius:20px}
.preview_slide{display:none;position:absolute;z-index:999;bottom:40px;left:-40px;width:100px;height:50px;border:3px solid #FFF;background:rgba(0,0,0,.5);box-shadow:rgba(0,0,0,0.7) 0 0 10px;overflow:hidden}
.preview_slide ul{width:100px;height:50px;padding:0;overflow:hidden;margin:0;list-style:none;display:block;position:absolute;top:0;left:0}
.preview_slide ul li{width:100px;height:55px;overflow:hidden;float:left;margin:0;padding:0;position:relative;display:block}
.preview_slide ul li img{position:absolute;top:0;left:0;height:55px;width:100px}
#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}
.box_skitter_home{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnxsuCnonVEaCTFG_Ry_ql2ME6DQfQiZc8lS9qXRz2l2TN4GRFf07S8tE7Rj-7PSUma487wR4ljC9UMQ_r_dc4h97iLQNcxzNmGfPSQu-c7f8MBgKGJeO9euEI6dWXyqWA2UAVE5JIM9UY/s1600/skitterloading.gif);background-position:center center;background-repeat:no-repeat}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button,.box_skitter_home.indzign-theme .info_slide_dots{border:1px solid #FFF;box-shadow:0 1px 3px rgba(0,0,0,0.3);border-radius:0}
.box_skitter_home.indzign-theme .info_slide{}
.box_skitter_home.indzign-theme .info_slide_dots{bottom:-16px;width:110px;left:50%!important;margin-left:-65px;height:30px;padding:0 8px;z-index:99}
.box_skitter_home.indzign-theme .info_slide_dots span{transition:background linear .3s;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XEKRM2Ca7W6O1eEC5dc5FLphx4yU5wTITXlZLJsFIa4a84XKNL9SWc-dIWdq07ficMxFhnh4ewNvqaaqBJoCpr-Lq6AQ-75sXoozR-oA0WIeqW-U8KfYmS6vXMr-it00fIMqogO9xMjS/s1600/light-overlay.png);background-repeat:repeat-x;background-position:left -13px;background-color:#d1d1d1;color:#777;border-radius:50%;border-bottom:1px solid #FFF;display:block;width:10px;height:10px;text-indent:-9999px;float:left;margin:10px 6px 0 6px}
.box_skitter_home.indzign-theme .info_slide_dots span:hover{background-color:#666}
.box_skitter_home.indzign-theme .info_slide_dots span.image_number_select{background-color:#5ebc00;border:none;width:14px;height:14px;margin:8px 3px 0 3px;box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1)}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button{display:block;width:75px;height:22px;line-height:30px;text-decoration:none;font-size:10px;text-transform:uppercase;transition:none;text-indent:0;bottom:-12px;top:auto;color:#777;z-index:98;cursor:pointer}
.box_skitter_home.indzign-theme .prev_button:hover,.box_skitter_home.indzign-theme .next_button:hover,.box_skitter_home.indzign-theme .prev_button:active,.box_skitter_home.indzign-theme .next_button:active{opacity:1!important}
.box_skitter_home.indzign-theme .next_button{right:28.5%;padding-right:5px;text-align:right;line-height:22px;opacity:1!important}
.box_skitter_home.indzign-theme .next_button span{padding-right:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBmOM7kG6fiMINWchMQ7aZf_Q710xwxBVswtG3GBRf96kCSV1Z-917hjeYpU12dAVYDQhA055K_POQ2U4tGd8CHIJ3KPh2FgBZDG-GVSMwoKv-2r7ARCpYvA2Eej8uH5qSWO0fsbG8G0GA/s1600/nav-next.png) no-repeat left top;background-position:right center;padding-bottom:1px;display:block}
.box_skitter_home.indzign-theme .prev_button{left:28.5%;padding-left:5px;text-align:left;line-height:22px;opacity:1!important}
.box_skitter_home.indzign-theme .prev_button span{padding-left:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlERFUO8fBqxKO1GLfGthrhzrvll15mVt83nMm9ssbfuzgqqP6kZPgnZ72H3aYEwfNPLWi4i9MVHGQSog9I8eD1TC-fISLv9TDtikuKYXoNg9y6lflvYdcyLI5uW7dpiN10BiLSlf-bwWf/s1600/nav-prev.png) no-repeat left top;background-position:left center;padding-bottom:1px;display:block}
.box_skitter_home.indzign-theme .label_skitter{background:#49afcd;width:90%;padding:5px 8px 5px;left:50%;margin-left:-45%;bottom:10%;text-align:left;height:auto;border-right:2px solid #fff;border-left:2px solid #fff;color:#fff;font-size:12px}
.box_skitter_home.indzign-theme .label_skitter p{padding:0;margin:0;text-shadow:0 1px 0 rgba(0,0,0,0.3)}
.box_skitter_home.indzign-theme .label_skitter h4{margin:0;font-size:135%;text-shadow:0 1px 0 rgba(0,0,0,.3);color:white;padding:0 0 10px}
.box_skitter_home.indzign-theme .label_skitter a{color:#fff;text-decoration:none}
.box_skitter_home.indzign-theme .label_skitter a:hover{color:#eee}
.box_skitter_home.indzign-theme .info_slide_thumb{background-color:#fff}
.box_skitter.indzign-theme .info_slide_thumb .image_number{margin:5px}
.box_skitter .container_skitter .date,.box_skitter .container_skitter .cm{font-size:100%}
.box_skitter .container_skitter .date span{margin-right:3px}
@media only screen and (max-width:960px){.box_skitter_home.indzign-theme .next_button{right:20.5%}.box_skitter_home.indzign-theme .prev_button{left:20.5%}}
@media only screen and (max-width:768px){#slider-wrapper-indzign{height:220px}.box_skitter .box_clone img{width:422px;height:220px}.box_skitter_home.indzign-theme .next_button{right:19.5%}.box_skitter_home.indzign-theme .prev_button{left:19.5%}}
@media only screen and (max-width:640px){.box_skitter_home.indzign-theme .next_button{right:26.5%}.box_skitter_home.indzign-theme .prev_button{left:26.5%}}
@media only screen and (max-width:480px){#slider-wrapper-indzign{height:200px}.box_skitter .box_clone img{width:280px;height:220px}.box_skitter_home.indzign-theme .next_button{right:20.5%}.box_skitter_home.indzign-theme .prev_button{left:20.5%}}
@media screen and (max-width:320px){.box_skitter_home.indzign-theme .label_skitter p{display:none}.box_skitter_home.indzign-theme .next_button{right:5.5%}.box_skitter_home.indzign-theme .prev_button{left:5.5%}}</pre>
<br />
<span style="font-family: "verdana" , sans-serif;">5. Şimdi <b><span style="color: red;"></body></span></b> kodunu bulun, üst satırına aşağıdaki kodları yapıştırın. </span><br />
<pre data-codetype="JavaScript"><script src="http://yourjavascript.com/815401201522/vitrin.js" type="text/javascript"/></pre>
<br />
<span style="font-family: "verdana" , sans-serif;">6. Şablonu kaydedin.</span><br />
<span style="font-family: "verdana" , sans-serif;">7. Şimdi Yerleşim/Gadget Ekle/HTML Jawascript Ekle yolunu takip ederek aşağıdaki kodları ekleyin ve kaydedin. </span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">Slayt alanınızın nerede görünmesini istiyorsanız gadget i o kutucuğa doğru sürüleyip <b><span style="color: orange;">Düzenlemeyi Kaydet</span></b> diyebilirsiniz.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<pre data-codetype="HTML"><div id='skitterslideshow'></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
pengaturan({
blogURL: '<span style="color: red;">http://blogbakkali.blogspot.com.tr/</span>',
MaxPost: <span style="color: blue;">5</span>,
RandompostActive: false,
ImageSize: 620,
NumCharacter: 150,
idcontaint: "#skitterslideshow",
cmtext: "Yorum",
NoCmtext: "Yorum Yok",
pBlank: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7dW5904l-10wfimFNh_FvbISxfIh788WNueyQac9KbXxcBqZM2HQQOnhltZ2V0hPVJ7vqUPzDVZsxYe60Zxd3OOkIFyML19aZqzo-wrwTDyLsTbLSLEEdwMwFStXD1S0BA2cO6fH2Qjs/s1600/noimage.jpg",
tagName: false
});
});
//]]>
</script></pre>
<br />
<blockquote class="tr_bq">
<span style="font-family: "verdana" , sans-serif;">Kırmızıyla boyadığım yere kendi blog adresinizi veya hangi blogtan yayın göstermek istiyorsanız onun adresini yazın.</span><span style="font-family: "verdana" , sans-serif;">5 gösterilen slayt yazı sayısı siz istediğinizle değiştirin.</span></blockquote>
<span style="font-family: "verdana" , sans-serif;">8. Eveet <b><i>blogger otomatik slayt alanı</i></b>mız hazır. İyi günlerde kullanın. Yorumunuzla güzellik katın veya sormak istediğiniz yerleri sorun. İyi bloglamalar :D</span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com21tag:blogger.com,1999:blog-7829475543171780486.post-42695187606030895012015-12-07T11:21:00.000+02:002015-12-14T21:08:20.013+02:00Blogger Renkli Dünyam Teması 2016<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNY-6BaVKJtKy-6T3T0-_VVaM7xRShWYf32TXZuw55vEJ3-WcyqO8dusgAxhI0rJzvqNNj_6kiMithWP8u44inqxCDG-s0cel1rFBZSE_SI3DlbCLSbLkKRuOqDsJJmv2qdJFaNABsu4Wy/s1600/Renkli+D%25C3%25BCnyam1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Renkli Dünyam Teması" border="0" height="524" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNY-6BaVKJtKy-6T3T0-_VVaM7xRShWYf32TXZuw55vEJ3-WcyqO8dusgAxhI0rJzvqNNj_6kiMithWP8u44inqxCDG-s0cel1rFBZSE_SI3DlbCLSbLkKRuOqDsJJmv2qdJFaNABsu4Wy/s640/Renkli+D%25C3%25BCnyam1.png" title="Blogger Renkli Dünyam Teması" width="640" /></a></div>
<span style="font-family: "verdana" , sans-serif;"><b><br />
</b></span> <span style="font-family: "verdana" , sans-serif;"><b>Blogger Renkli Dünyam Teması indirin.</b> Arlina Desing'in paylaştığı bu tema Blog Bakkalı okuyucuları için tarafımca düzenlenmiş ve Türkçeleştirilmiştir. Özellikle bayan blogcu arkadaşlarımın işine yarayacak olan bu tema moda, makyaj, yemek tarifleri blogu gibi sitelerde çok kullanışlı olacaktır. </span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6nETXRCUExwpal9CIKfuEjVvDOp49VKRDnzSIiBX_cFPQSMBIYM3La1FnJugMWZoeY1KDTltXrYnWVYd6G53XlABVTohG5IgZ5675icfulns3XXBkTMiNEwtAB7FGoGOalV2Vcsi5k0No/s1600/blogger-tema-2016.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Renkli Dünyam Teması" border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6nETXRCUExwpal9CIKfuEjVvDOp49VKRDnzSIiBX_cFPQSMBIYM3La1FnJugMWZoeY1KDTltXrYnWVYd6G53XlABVTohG5IgZ5675icfulns3XXBkTMiNEwtAB7FGoGOalV2Vcsi5k0No/s640/blogger-tema-2016.png" title="Blogger Renkli Dünyam Teması" width="640" /></a></div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;"><br />
</span><span style="font-family: "verdana" , sans-serif;">2016 model profesyonel tasarımı ve duyarlı olma özelliğiyle birçok <b>blogger </b>temasından ayrılan bir yapısı vardır. Temanın duyarlı olması tüm ekranlara göre otomatikman boyutlanması anlamına gelmektedir. </span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1zzPmxe9jfAOfFOLvO0aRyIoGHygqoyDNu6LJOG6hJsfuAqKuncoOGQb0Zt2gu1FNKd4OkGye30eyw9-NpOiwhJcecTFAmR0-3RVV-T3BsAmO8SXzh-L7vG6XwH4W9IA_H-49HsAI2HRx/s1600/arama-kutusu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Renkli Dünyam Teması" border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1zzPmxe9jfAOfFOLvO0aRyIoGHygqoyDNu6LJOG6hJsfuAqKuncoOGQb0Zt2gu1FNKd4OkGye30eyw9-NpOiwhJcecTFAmR0-3RVV-T3BsAmO8SXzh-L7vG6XwH4W9IA_H-49HsAI2HRx/s640/arama-kutusu.png" title="Blogger Renkli Dünyam Teması" width="640" /></a></div>
<br />
<br />
<span style="font-family: "verdana" , sans-serif;">Arama kutusunun açılır pencere şeklinde olması, sidebarına eklenen hakkımda bölümünün sosyal medya hesaplarıyla bağlantılı olması, popüler yayınlar gadgetinin özelleştirilmiş olması, benzer yazılar bölümün farklı ve şık yapısı vs. vs. birçok güzel yanı bulunmaktadır.</span><br />
<div id="wrap">
<a class="btn-slide" href="http://renklidunyamtemasi.blogspot.com.tr/" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span><br />
<span class="title">Demo</span><br />
<span class="title-hover">Buraya Tıkla</span><br />
</a></div>
<br />
<span style="font-family: "verdana" , sans-serif;">Bu temayı düzenlemek ve Türkçeleştirmek için baya bir uğraştım. Eh artık bir teşekkürü hakettim :) Bir sürü emek veriyorsun gelen alıyor gidiyor ne bir yorum yazan var ne de bloğu izleyen. Arkadaşlar burada para almıyorum ben bir birlik olsun diye uğraşıyorum. Sessiz kalmayın yorum falan yapın yahu.</span><br />
<blockquote class="tr_bq">
<span style="color: #eeeeee; font-family: "verdana" , sans-serif;">Temayı sadece bu yazıya yorum yapan arkadaşlara vereceğim. Yoruma mail adresinizi da eklemeyi unutmayın.</span></blockquote>
<span style="font-family: "verdana" , sans-serif;">Evet temayı indirmeye karar verdiyseniz yorumlarınızla belirtin. Zorlanan arkadaşlar için temayı bloğunuza nasıl uyarlayacağınızı bir sonraki yazımda anlatacağım. İyi bloglamalar.</span>Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com64tag:blogger.com,1999:blog-7829475543171780486.post-80461050730941883042015-11-28T15:14:00.000+02:002015-11-28T15:14:31.738+02:00Metro Tarzı Sosyal Paylaşım Butonları Yapımı<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHutK9lQKNcGkDgwprWGtZAvLSn9hzDLalhGYYL5Ev0A9S-_q7Oa60yxKwrjb4ecSGZBSBN88gKCje4VtkJYfaqRrFxNNga-VUVuxIf1jsZC60mh2tkbEdLM9FY5Xr10O5r6ZxxcY9RBns/s1600/sosyal-paylasim-butonlari.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Metro Tarzı Sosyal Paylaşım Butonları Yapımı" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHutK9lQKNcGkDgwprWGtZAvLSn9hzDLalhGYYL5Ev0A9S-_q7Oa60yxKwrjb4ecSGZBSBN88gKCje4VtkJYfaqRrFxNNga-VUVuxIf1jsZC60mh2tkbEdLM9FY5Xr10O5r6ZxxcY9RBns/s1600/sosyal-paylasim-butonlari.png" title="Metro Tarzı Sosyal Paylaşım Butonları Yapımı" /></a></div>
<span style="font-family: "verdana" , sans-serif;"><b><br />
</b></span> <span style="font-family: "verdana" , sans-serif;"><b>Blogger Metro Tarzı Sosyal Paylaşım Butonları Yapımı. </b></span><br />
<span style="font-family: "verdana" , sans-serif;">Bloğunuzun kenar çubuğuna (sidebar) widget olarak ekleyebileceğiniz bu sosyal paylaşım düğmeleri sayesinde Facebook, Twitter, Youtube, Linkedin, Pinterest ve Google üzerindeki sosyal ağlarınıza bağlantı verebilirsiniz. Bu sayede bloğunuzdan sosyal ağdaki hesaplarınıza ziyaretçi çekebilir ve takipçi sayınızı kasabilirsiniz.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">Hepsi bir arada bulunan sosyal butonlar bloğunuza şık bir hava katacaktır. Gelelim nası yapıldığına.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://codepen.io/blogbakkali/full/YymzdK/" target="_blank">DEMO</a></li>
</ul>
</div>
<div class="clear">
</div>
<br />
<h2>
<span style="font-family: "verdana" , sans-serif;">Metro Tarzı Sosyal Paylaşım Butonları Yapımı</span></h2>
<div>
<span style="font-family: "verdana" , sans-serif;">1. Blogger giriş.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">2. Yerleşim</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">3. Gadget Ekle</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">4. HTML/Jawascript</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">5. Aşağıdaki kodları kopyalayıp açılan pencereye yapıştırın ve <span style="color: red; font-weight: bold;"># </span>işareti olan yerlere kendi hesap adalrınızı yazın.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span><br />
<pre data-codetype="HTML"><div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/<span style="color: red;">#</span> rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/<span style="color: red;">#</span>></a></li>
<li><a class="gp" href="https://plus.google.com/<span style="color: red;">#</span>"></a></li>
<li><a class="pi" href=http://pinterest.com/<span style="color: red;">#</span>rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/<span style="color: red;">#</span>rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/<span style="color: red;">#</span>></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/<span style="color: red;">#</span>rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbDiUwmTE3wcyyR9McU8R8K1WrMIzejMQsZ8socPe6HPnDWnHXsvoG9rd2kfD2eRw_5nyBKDebCC0huSfZUwdxo79kkuBoDD8_p5NyFyxYeS6jDe3FY7e64_UH0C2YwNzfMm_mFNtRFwNp/s75/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinod6TxQv9XZEGzyZ67W1ofs40DTGa_5dkvcD5jFlj4ZFGm0FpiqU_SHzPlqjrKHVO1h7Jisbsf8B0lVghY51UDiJcGO9zx2gvsyuNpDpQCoNeVo72Gg1IC24jkjjvbGkdw1PJf_lA9Sok/s60/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGvJnZ20gKaacCPI9q61MWTT2z82oHiCKbBF1n3Ch34Ru5qZ6LbvuBom3P6kYeo0PIlah4-5OA-FXnipI77U6EKcoA8lAo3T1ahcYuV4kwRu8yfkOXf-x9rMj1Ll8dniVRGYcnmSxOPJwW/s50/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM83FjDgEoluCsPwluBjojAuMXtNAyZ5kM3fLtb2pENjUlslBLPJ6p1irXEtM4pnEKBLKmzfeNRNW1zugxsD9qKZom7cFwX26cjeYtxNYX5KG6UPJocctUFXUbEsnC_rnAxdc8XFMQ9AE/s40/pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLx6GGvrSrl-srb8_rxE8KccdzyDWfEHlsIYhihhyKyMx2oEL68frIf0DxJczVdvhg0THLWuTzuHcPD_JU0EdS9JocNCegks2aZmjcxW7tpPOZJ78lqwilHnw7yaUibgMOMRi1mEi1Io/s40/linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiREUHEiy0VsJzwF_E_LLqogkGKNBwhpNnvBlpXh3IkASvpx2xViCm_077oGndBJAIcQ8oqR6k6AHPPZZdUq4fJZLKn6BM5Q1afIgomucMl8u1Wi8YF9JibzEu8iSfunLOx313tlwwJgao/s40/youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrk7lJ_Fnu29aFnUP2gNOamQfhl007DzY1NH2Woet_CGrT-1PH20p0poxxEIuobrWXxCcK4IgSuwCt4UqQ36rhaYk3h71BGn9_Z2lQuMQEc86DVQoKTuM3vWqnzNff26uQiH1RI-N2K2Mg/s40/feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbDiUwmTE3wcyyR9McU8R8K1WrMIzejMQsZ8socPe6HPnDWnHXsvoG9rd2kfD2eRw_5nyBKDebCC0huSfZUwdxo79kkuBoDD8_p5NyFyxYeS6jDe3FY7e64_UH0C2YwNzfMm_mFNtRFwNp/s200/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinod6TxQv9XZEGzyZ67W1ofs40DTGa_5dkvcD5jFlj4ZFGm0FpiqU_SHzPlqjrKHVO1h7Jisbsf8B0lVghY51UDiJcGO9zx2gvsyuNpDpQCoNeVo72Gg1IC24jkjjvbGkdw1PJf_lA9Sok/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGvJnZ20gKaacCPI9q61MWTT2z82oHiCKbBF1n3Ch34Ru5qZ6LbvuBom3P6kYeo0PIlah4-5OA-FXnipI77U6EKcoA8lAo3T1ahcYuV4kwRu8yfkOXf-x9rMj1Ll8dniVRGYcnmSxOPJwW/s200/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM83FjDgEoluCsPwluBjojAuMXtNAyZ5kM3fLtb2pENjUlslBLPJ6p1irXEtM4pnEKBLKmzfeNRNW1zugxsD9qKZom7cFwX26cjeYtxNYX5KG6UPJocctUFXUbEsnC_rnAxdc8XFMQ9AE/s45/pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLx6GGvrSrl-srb8_rxE8KccdzyDWfEHlsIYhihhyKyMx2oEL68frIf0DxJczVdvhg0THLWuTzuHcPD_JU0EdS9JocNCegks2aZmjcxW7tpPOZJ78lqwilHnw7yaUibgMOMRi1mEi1Io/s45/linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiREUHEiy0VsJzwF_E_LLqogkGKNBwhpNnvBlpXh3IkASvpx2xViCm_077oGndBJAIcQ8oqR6k6AHPPZZdUq4fJZLKn6BM5Q1afIgomucMl8u1Wi8YF9JibzEu8iSfunLOx313tlwwJgao/s45/youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrk7lJ_Fnu29aFnUP2gNOamQfhl007DzY1NH2Woet_CGrT-1PH20p0poxxEIuobrWXxCcK4IgSuwCt4UqQ36rhaYk3h71BGn9_Z2lQuMQEc86DVQoKTuM3vWqnzNff26uQiH1RI-N2K2Mg/s45/feed.png) no-repeat center center #e9a01c}
</style></pre>
<br />
<span style="font-family: "verdana" , sans-serif;">6. Kaydet deyin ve bloğunuza bakın. Tebrikler! Hepsi bir arada sosyal paylaşım butonlarınız sidebarınıza eklendi.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">Destek için bloğumu izlemeyi unutmayın. Yorumlarınızla yazılarıma güzellik katın. Teşekkürler.</span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com14tag:blogger.com,1999:blog-7829475543171780486.post-85527331841405354122015-11-19T13:36:00.000+02:002015-12-12T19:43:46.918+02:00Boş Blogger Şablonu<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIlyC5eaVoaGxbchSwvWXEkNl_6x-PLtdN1J5-qci_8BIApZaCrAUybUpAEeFWH1nycUG2JBzV6g5k8sW6pMjkWrWwWh_pZLYlBYCJt0ZoJsePHE5y5HKx-IYNyN3PUZ6OeMEWLJBt5Os5/s1600/bos-blogger-sablonu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="BOS-BLOGGER-SABLONU" border="0" height="341" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIlyC5eaVoaGxbchSwvWXEkNl_6x-PLtdN1J5-qci_8BIApZaCrAUybUpAEeFWH1nycUG2JBzV6g5k8sW6pMjkWrWwWh_pZLYlBYCJt0ZoJsePHE5y5HKx-IYNyN3PUZ6OeMEWLJBt5Os5/s640/bos-blogger-sablonu.png" title="Boş Blogger Şablonu" width="640" /></a></div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">Kendi blog temanızı kodlamak istiyorsanız alın size <b><i>boş blogger şablonu</i></b> . Kendinize ait tema yapmak istiyorsanız eklentilerini falanını fiştanını gerekli kodların altına veya üstüne yapıştırın. Bu işten anlıyorsanız yapın bakalım temalarınızı.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <span style="font-family: "verdana" , sans-serif;">İşte <i>blogger </i>şablonunun temel taşları bunlar . Tüm eklenti ve Widget şu bu ne varsa bu kodların içerisine eklenir. Aşağıdaki kodları blogger sitenizin temel iskeleti olarak adlandırabiliriz.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<h2>
<span style="font-family: "verdana" , sans-serif;">Boş Blogger Şablonu</span></h2>
<div>
<span style="font-family: "verdana" , sans-serif;"><br /></span></div>
<div>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://codepen.io/blogbakkali/full/WrQpKb/" target="_blank">DEMO</a></li>
<li><a class="download" href="https://drive.google.com/file/d/0BzufoqnwviZMZmNBbWtlaUZPX3M/view?usp=sharing" target="_blank">İNDİR</a></li>
</ul>
</div>
<div class="clear">
</div>
<br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<span style="font-family: "verdana" , sans-serif;">Benden bu kadar. hadi hayırlı işler.</span>Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com5tag:blogger.com,1999:blog-7829475543171780486.post-20198898730894567382015-11-03T23:32:00.000+03:002015-11-03T23:32:37.844+03:00Oltayla Balık Tutar Gibi! Sayfa Başına Dön Butonu Yapımı<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBbG2sD7cPqcv_RqYi3lri7OOHM8KaLBsx4-lvSOc2Db0M-aCeg-CC3zA7pKLPCY_sR_yTlB0ZzRVVrZqfXXVmRvB-98LAbc51H8oKhBTDRXgbiQtyAEvb69_59fDj1zPuIjVSrfOzfgqu/s1600/balik-yukari-cik-dugmesi-yapimi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="balik-yukari-cik-dugmesi-yapimi" border="0" height="343" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBbG2sD7cPqcv_RqYi3lri7OOHM8KaLBsx4-lvSOc2Db0M-aCeg-CC3zA7pKLPCY_sR_yTlB0ZzRVVrZqfXXVmRvB-98LAbc51H8oKhBTDRXgbiQtyAEvb69_59fDj1zPuIjVSrfOzfgqu/s640/balik-yukari-cik-dugmesi-yapimi.png" title="Yukarı Çık Butonu" width="640" /></a></div>
<span style="font-family: "verdana" , sans-serif;"><b><br />
</b></span> <span style="font-family: "verdana" , sans-serif;"><b>Blogger </b>bloğunuz için daha önce <b><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-tombul-roket-yukari-cik-butonu-yapimi.html">roket şeklinde yukarı çık butonu yapımı</a></b>nı anlatmıştım. Şimdiki Yukarı çık butonumuz olta şeklinde. Siz blog sayfanızda aşağı doğru indikçe otomatik olarak olta bloğunuza atılın, oltanın ucundaki solucan ise "beni kurtarııın yukarı çek yukarıııı" diye bağırır :)</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<h3>
<span style="font-family: "verdana" , sans-serif;">Sayfa başına dön butonu ne işe yarar?</span></h3>
<div>
<span style="font-family: "verdana" , sans-serif;">Ziyaretçiniz özellikle uzun yazılarınızı okuduktan sonra tekrar yukarı çıkmak istediğinde iki saat o güzel parmaklarını yormasın diye oltanın ucuna tek tıklamayla sayfayı yukarı çıkarır. Anlatıma geçelim.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;"><br />
</span></div>
<h4>
<span style="font-family: "verdana" , sans-serif;">Oltayla Balık Tutar Gibi! Sayfa Başına Dön Butonu Yapımı</span></h4>
<div>
<span style="font-family: "verdana" , sans-serif;">1. Blogger panelize girin.</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">2. Şablon</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: "verdana" , sans-serif;">4. Kodlar üzerine tıklayın CTRL F tuşlarına basın arama kutusunu açın.</span></div>
<span style="font-family: "verdana" , sans-serif;">5. </span><span style="background-color: white; line-height: 23.8px;"><span style="font-family: "verdana" , sans-serif;"><span style="color: red;"><b>]]></b:skin> </b></span>kodunu bulun ve üst satırına aşağıdaki kodları yapıştırın.</span></span><br />
<span style="background-color: white; line-height: 23.8px;"><span style="font-family: "verdana" , sans-serif;"><br />
</span></span><br />
<pre data-codetype="CSS">/* Blog Bakkalı Yukarı Çık Butonu */
.umpanikan{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgup1ed2hbZMHNts54zOZLLZPB16a6woTWylmY6CvekTXMjljVzKbqqj5dTanSWWqakytzfo2VXjHShCdX7KuPakSCY5dimiF_wBcpvkzGfhKcXO_-CeUylFgFU3bM6qNjSHzuEdtNOwxQ/s1600/blogbakkali.png);background-repeat:no-repeat;position:relative}
#umpanikan{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-700px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#umpanikan-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#umpanikan:hover > #umpanikan-bubble,#umpanikan:hover > #umpanikan-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#umpanikan-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:0%;left:10px;width:0;height:0;z-index:99}</pre>
<br />
<span style="font-family: "verdana" , sans-serif;">6. <b><span style="color: red;"></body></span></b> kodunu bulun. Yine üstüne aşağıdaki kodları ekleyin.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span> <br />
<pre data-codetype="JQuery"><script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(n){n(window).on("scroll",!1,function(){var o=n(window).scrollTop();o>700?n("#umpanikan").css("top","0"):n("#umpanikan").css("top",o-700+"px")}),n("#umpanikan").unbind("click").click(function(){n("html,body").animate({scrollTop:n("#umpanikanTOP").offset().top},"slow")})});
//]]>
</script></pre>
<br />
<span style="font-family: "verdana" , sans-serif;">7. <b><span style="color: red;"><body></span></b> kodunu bul ve altına aşağıdaki kodları kopyala ve yapıştır.</span><br />
<span style="font-family: "verdana" , sans-serif;"><br />
</span><br />
<pre data-codetype="HTML"><div id="umpanikanTOP"></div>
<div class="umpanikan" id="umpanikan">
<div id="umpanikan-bubble">Anaam köpek balığı! Çek yukarıı çeeek.</div>
</div></pre>
<br />
<span style="font-family: "verdana" , sans-serif;">8. Şablonu kaydedin. </span><br />
<br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://codepen.io/blogbakkali/full/ojMQGm/" target="_blank">DEMOSUNA BURADAN BAKABİLİRSİN</a></li>
</ul>
<div style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;"><b><i><br />
</i></b></span></div>
<div style="text-align: left;">
<span style="font-family: "verdana" , sans-serif;"><a href="http://blogbakkali.blogspot.com.tr/2015/11/blogger-sayfa-basina-don-butonu-yapimi.html"><b><i>Olta şeklinde back to top yani sayfa başına dön butonu yapımı</i></b> </a>bu kadar basit. Yorumunuzla güzellik katmayı ve bloğuma üye olup destek olmayı unutmayın :) İyi bloglamalar.</span></div>
</div>
<div class="clear">
</div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com2tag:blogger.com,1999:blog-7829475543171780486.post-355270174731800732015-11-02T00:30:00.000+03:002015-11-02T00:32:01.297+03:00Resimli İlgili Yazılar Eklentisi <div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj61E-5YqmLObI8uqQcyTI9gzy6zeqylypTIhOl09nztdcCFZiJDz6I2KDEkkSrysetHmSHkw_XOUmCKDpSuKO3YaihFbRldwm_GJ5Ah111L9Csn08c5LHaWzAlH1ON45-yh7f-o5GuikHc/s1600/blogger-benzer-yayinlar-yapma.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger-benzer-yayinlar-yapma" border="0" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj61E-5YqmLObI8uqQcyTI9gzy6zeqylypTIhOl09nztdcCFZiJDz6I2KDEkkSrysetHmSHkw_XOUmCKDpSuKO3YaihFbRldwm_GJ5Ah111L9Csn08c5LHaWzAlH1ON45-yh7f-o5GuikHc/s640/blogger-benzer-yayinlar-yapma.jpg" title="Benzer Yayınlar" width="640" /></a></div>
<b><br />
</b> <span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/11/resimli-ilgili-yazilar-eklentisi-kurma.html">Blogger Resimli İlgili Yazılar Eklentisi</a></b>. Benzer yazılar eklentisi de denilen bu şey yazılarınızın sonuna otomatik olarak eklenir ve o yazınızla alakalı diğer yazıları alt alta sıralar ve site içi bağlantı verir. Benim bloğumda da bu eklentinin resimsiz olanı var yazı sonuna gelince göreceksiniz. Bu eklentinin çalışma mantığı etikete bağlı diğer yazılarınızı da otomatikman gösterir. Benim bu yazımın etiketi "<i>blog eklentileri</i>" ve yazımın sonunda bu etikete bağlı diğer yayınları da göreceksiniz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<h3>
<span style="font-family: Verdana, sans-serif;">
İlgili yazıların gösterilmesinin faydası nedir? </span></h3>
<div>
<span style="font-family: Verdana, sans-serif;">Bloğunuza benzer yazılar eklentisini kurduğunuz zaman ziyaretçilerinizin blogta daha fazla zaman geçirmesini sağlayabilir, konuyla alakalı diğer yazılarınızın da okunmasının yolunu açabilirsiniz. Okuyucularınızın blogta uzun süre kalması seo açısından çok önemlidir. Google bu konuya dikkat ediyor. Sadece bir yazısı kısa süre okunup diğer yazılarına geçiş yapılmayan blogları kayda değer görmüyor ve dikkat çekici değil diyerek sıralamada aşağı çekiyor. Bu yüden ziyaretçilernizin diğer yazılarınızı da okuması ve zaman geçirmesi çok önemli.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Yazı sonlarında aynı kategoriye ait diğer yazıları görüntülememize yarayan bu canım eklentinin yapım aşamalarını on adımda anlattım. Sırayı iyi takip edin çok basit kurarsınız. Hadi bakalım.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<h2>
<span style="font-family: Verdana, sans-serif;">
Resimli Benzer Yazılar Eklentisi Nasıl Kurulur?</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Blogger yönetici panelinize girin.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. Şablon</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">4. CTRL F tuşlarına basarak <b style="-webkit-font-smoothing: antialiased; background-color: white; border: 0px; color: red; font-family: Verdana, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 23.8px; margin: 0px; padding: 0px; text-rendering: optimizeLegibility; vertical-align: baseline;"><span style="color: red;">]]></b:skin></span> </b><span style="-webkit-font-smoothing: antialiased; background-color: white; border: 0px; font-family: Verdana, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 23.8px; margin: 0px; padding: 0px; text-rendering: optimizeLegibility; vertical-align: baseline;">kodunu bulun</span></span></div>
<div>
<span style="-webkit-font-smoothing: antialiased; background-color: white; border: 0px; font-family: Verdana, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 23.8px; margin: 0px; padding: 0px; text-rendering: optimizeLegibility; vertical-align: baseline;">5. Bu kodun üst satırına aşağıdaki kodları kopyalayıp yapıştırın.</span></div>
<div>
<span style="-webkit-font-smoothing: antialiased; background-color: white; border: 0px; font-family: Verdana, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 23.8px; margin: 0px; padding: 0px; text-rendering: optimizeLegibility; vertical-align: baseline;"><br />
</span><br />
<pre data-codetype="CSS">/* Blog Bakkalı Benzer Yazılar Eklentisi */
#related_posts{margin:20px 0;}
#related_posts h4{background:#4f93c5;color:#fff;padding:12px;margin:0 0 5px;font-size:110%;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px;}
#related_img img{background:#fefefe;float:left;margin-right:10px;width:60px;height:60px;max-width:100%;border-radius:4px;}</pre>
<br />
<span style="font-family: Verdana, sans-serif;">6. Şimdi aynı arama kutusunu kullanarak <b><span style="color: red;"></head></span></b> kodunu bulun.</span><br />
<span style="font-family: Verdana, sans-serif;">7. Bu kodun üst satırına aşağıdaki kodları ekleyin.</span><br />
<br />
<pre data-codetype="JavaScript"><script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf8wVufBUGuwwFB8JXrD7r1bDqyZlT-cJ_7TU03HHFautr8sjH4QMKyhXaCgD-P0pAiU3Ol0zDsi4QkCyzzRIiuDy3OGo6Vh_-yJg2LOAItRyQgYUbNzg5SC-aRdt-0hxs-VQOQSvfhFmR/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script></pre>
<br />
<span style="font-family: Verdana, sans-serif;">8. Şimdi <b style="color: red;"><data:post.body/> </b>kodunu bulun ve bu kodun bittiği yere yani sağ tarafına aşağıdaki kodları ekleyn. Bu koddan karşınıza birkaç tane çıkacak ikincisinin veya diğerlerinin sağına ekleyeceksiniz. (Hangisine ekleyeceğiniz kendi temanızın kodlanmasına bağlı olduğu için net değil sırayla deneme yanılmayla eklemekte fayda var).</span><br />
<span style="font-family: inherit;"><br />
</span><br />
<pre data-codetype="HTML"><div id='related_posts'>
<h4>Benzer Yazılar</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='related_img'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div></pre>
<br />
<span style="font-family: Verdana, sans-serif;">9. Şablonu kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;">10. Tebrikler <i>benzer yayınlar</i> eklentiniz hazır.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b><span style="color: lime;">Bonus:</span></b> Bu kadar emek karşılıksız değil tabiki sağdan izleyicilere katıl. Parayla değil yahu <i class="icon-smile icon-large"></i> </span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com11tag:blogger.com,1999:blog-7829475543171780486.post-8845384627725536922015-10-30T22:58:00.000+03:002015-10-30T23:06:49.320+03:0010 Adımda Farklı Tarzda Hakkımda Sayfası Yapımı<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_G-P2hFeaKiM1KrFzef3rkIBt5BORqXQFhmVYG5SjvnIL3zNHbcqdMCBbINRwcVEDyiDCvFig3Ybjg4nhVZGtW_bmkk4pTrm15Qh5H5AkfhfLzmB8qhX6xW6xLncjEy2Hxilg0gIV03p/s1600/blogger-hakkimda-popup.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger-hakkimda-sayfasi-yapimi" border="0" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_G-P2hFeaKiM1KrFzef3rkIBt5BORqXQFhmVYG5SjvnIL3zNHbcqdMCBbINRwcVEDyiDCvFig3Ybjg4nhVZGtW_bmkk4pTrm15Qh5H5AkfhfLzmB8qhX6xW6xLncjEy2Hxilg0gIV03p/s640/blogger-hakkimda-popup.png" title="10 Adımda Farklı Tarzda Hakkımda Sayfası Yapımı" width="640" /></a></div>
<span style="font-family: Verdana, sans-serif;"><b><br />
</b></span><span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/10/blogger-popup-hakkimda-sayfasi-yapimi.html">Blogger Popup Açılır Hakkımda Sayfası Yapımı</a>.</b> Tüm blogların ve internet sitelerinin vazgeçilmezleri arasındadır hakkımda sayfaları. Yazar burada kendisi hakkında veya bloğu hakkında bilgiler verir; sosyal medya hesaplarını gösterir, okuyucularının kendisine ulaşabilmesi için telefon numarasını veya mail adresini verir. Tüm bunları dağınık şekilde okuyucuya aktarmak yerine derli toplu bir şekilde sunar ki rahatça ulaşma imkanı olsun.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Hakkımda sayfalarını gösteren link yolu kolayca görülebilsin diye genelde üst yatay menüde bir buton ekleme yoluyla işe koşulur.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Şimdi sizinle paylaşacağım <i>pop up açılır</i> <i>hakkımda sayfası</i>da bir buton yardımıyla açılıyor. Bunun faydası okuyucu sayfanıza geldiğinde kendiliğinden açılmaz ve sıkıcı bir hal almaz. Biliyorsunuz bazı blog sayfaları varki sağdan soldan fışkıran popup pencelerinden kına getiriyor. Bu yüzden hakkımda sayfasına buton eklemek çok akıllıca ve insaflıca :)</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blogbakkalideneme.blogspot.com.tr/" target="_blank">DEMO</a></li>
</ul>
</div>
<div class="clear">
</div>
<br />
<h2>
<span style="font-family: Verdana, sans-serif;">Hakkımda Sayfası Nasıl Yapılır?</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Blogger yönetici panelini açın.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. Şablon</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">4. Açılan kodlar üzerinde bir yere tıklayın ve CTRL F tuşlarına basarak arama kutucuğunu açın.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">5. <b style="-webkit-font-smoothing: antialiased; background-color: white; border: 0px; color: red; font-family: Verdana, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 23.8px; margin: 0px; padding: 0px; text-rendering: optimizeLegibility; vertical-align: baseline;">]]></b:skin> </b><span style="-webkit-font-smoothing: antialiased; background-color: white; border: 0px; font-family: Verdana, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 23.8px; margin: 0px; padding: 0px; text-rendering: optimizeLegibility; vertical-align: baseline;">kodunu bulun.</span></span></div>
<div>
<span style="-webkit-font-smoothing: antialiased; background-color: white; border: 0px; font-family: Verdana, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 23.8px; margin: 0px; padding: 0px; text-rendering: optimizeLegibility; vertical-align: baseline;"><span style="font-family: Verdana, sans-serif;">6. Bu kodun üst satırına aşağıdaki CSS kodlarını yapıştırın</span>.</span><br />
<span style="-webkit-font-smoothing: antialiased; background-color: white; border: 0px; font-family: Verdana, sans-serif; font-size: 14px; font-stretch: inherit; line-height: 23.8px; margin: 0px; padding: 0px; text-rendering: optimizeLegibility; vertical-align: baseline;"><br />
</span> <br />
<pre data-codetype="CSS">/* Blog Bakkalı Hakkımda Sayfası */
.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#333;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#555}
kepala{background:#00adca;height:50px;width:100%;position:inherit}
#textlogo{color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;background:#00bcdc;height:70%;width:61%}
#left{background:#333;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#aaa;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6{cursor:pointer;font-size:15px;padding:15px 25px;color:#aaa;border-bottom:1px solid #444;}
.taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#D92121;color:#fff}.taber3:hover{background:#0B76B9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#FFD100;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a{color:#fff}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}
#aboutus img{margin:15px auto;display:table;border-radius:100%;max-width:200px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{display:none;}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:relative;top:18px;border-radius:50px;left:5px;margin:0 auto;padding:4px 7px;font-size:13px;text-decoration:none;line-height:1;color:#fff}
a.popup-close:hover{color:#fff}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}</pre>
<br />
<span style="font-family: Verdana, sans-serif;">6. Şimdi <b><span style="color: red;"><body></span></b> kodunu bulun.</span><br />
<span style="font-family: Verdana, sans-serif;">7. Bu kodun alt satırına aşağıdaki kodları yapıştırın.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<pre data-codetype="HTML"><div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'/>
<div class='circle'/>
<div class='circle'/>
<div class='contentbox'>
<kepala><span id='textlogo'>HAKKIMDA</span>
<a class='popup-close' href='#closed' title='Close'>X Kapat</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img src='<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3yxEKvVz1aY4buQhFxoXx7ex43ElU2cy6677a0BcH380NbLpzIvrlRhXuWxfJsMCVQ2JKbx_YgEE6UgrmmhejSwZG7f3p93guQX0LxDD_8wXdwe_4Nr0TEb5P6mx7-iscANkG_fXklKbP/s1600/indzign.jpg</span>'/><br/>
<b><span style="color: red;">Blog Bakkalı</span></b><br/><br/>
<span style="color: red;">Blog Bakkalı bloğumu 2015 yılının Temmuz ayında açtım.</span><br/><br/>
<span style="color: red;">Beş yıldır blog işleriyle uğraşıyorum, edindiğim tecrübeleri sizlerle paylaşıyorum. Blog Bakkalı bloğumda Blogger eklentileri ve ipuçları hakkında yazılar hazırlıyorum. Blog Bakkalı'na hoşgeldiniz.</span><br/><br/>
</div></div></div>
<div id='left'>
<div class='taber1'><a href='<b>http://blogbakkali.blogspot.com</b>' target='_blank' title='<span style="color: red;">blogbakkali.blogspot.com</span>'><span style="color: red;">blogbakkali.blogspot.com</span></a></div>
<div class='taber2'><a href='<span style="color: red;">https://plus.google.com/u/0/117314262477655253180/about</span>' target='_blank' title='Takip Et Google Plus'>Google Plus</a></div>
<div class='taber3'><a href='<span style="color: red;">https://www.facebook.com/blogbakkali</span>' target='_blank' title='Takip Et Facebook'>Facebook</a></div>
<div class='taber4'><a href='<span style="color: red;">https://twitter.com/blogbakkali</span>' target='_blank' title='Takip Et Twitter'>Twitter</a> </div>
<div class='taber5'><i class='fa fa-phone'/>Telefon: <span style="color: red;">012345xxx</span></div>
<div class='taber6'><a href='/' target='_blank' title='email'><span style="color: red;">mail@outlook.com</span></a></div>
</div></div></div></div></div></pre>
<br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">Kırmızıyla işaretlediğim yerleri kendi bilgilerinizle değiştirin.</span></blockquote>
<span style="font-family: Verdana, sans-serif;">8. Şimdi aşağıda paylaştığım link yolunu istediğiniz yere koyabilirsiniz. Bu link hakkımda sayfasına götüren buton linki. Tavsiyem üst yatay menünüz varsa oraya eklemenizdir.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<pre data-codetype="HTML"><li><a class='popup-link' href='#popup'>Hakkımda</a></li></pre>
<br />
<span style="font-family: Verdana, sans-serif;">9. Şablonu Kaydediyoruz.</span><br />
<span style="font-family: Verdana, sans-serif;">10. Tebrikler Popup Açılır Hakkımda Sayfanız hazır.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;"><b>Blogger bloglar için hakkımda sayfası yapımı</b>nı anlattım. Takıldığınız yerleri yorumla lütfen sorun. Karmaşık gelmesin adımları uyglayın çok basit. </span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Bloğumu izlemeni istiyorum bedava bu ya :) İyi bloglamalar.</span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com14tag:blogger.com,1999:blog-7829475543171780486.post-51185906809472877762015-10-18T19:18:00.001+03:002015-10-18T19:22:29.403+03:00Resimlerinizi Bloğunuza Duyarlı Hale Getirin<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjphFe2CMDxIz3q_gdNzCeAXQKfRKsJi9bjx5LdYYsm9EiQyO1woFiJthoD21kJ6uQLW2SXbzc_cVC9QqCzxJAnxuY-YSnWSfDyWhCZBTdlP-9W7vgI1cPGJ3sZswZ6iYYNu-MDxObGhuQ/s1600/blog-bakkali-boyut.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Resimlerinizi Bloğunuza Duyarlı Hale Getirin" border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjphFe2CMDxIz3q_gdNzCeAXQKfRKsJi9bjx5LdYYsm9EiQyO1woFiJthoD21kJ6uQLW2SXbzc_cVC9QqCzxJAnxuY-YSnWSfDyWhCZBTdlP-9W7vgI1cPGJ3sZswZ6iYYNu-MDxObGhuQ/s640/blog-bakkali-boyut.png" title="Resimlerinizi Bloğunuza Duyarlı Hale Getirin" width="640" /></a></div>
<br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;"><b>Blogger resimleri otomatik boyutlandırma</b>. </span><span style="font-family: Verdana, sans-serif;">Bloğumuza eklediğimiz görseller çok büyük olduğu zaman demodaki gibi taşıyor. Bu olumsuz duruma engel olmanın bir yolu var.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Birkaç CSS kod yardımıyla bloğunuzdaki resimleri duyarlı hale getirebiliriz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Blogger bloğunuza eklediğiniz tüm resimleriniz otomatik olarak duyarlı hale gelir. Duyarlı olmak ne demek? Diye sorduğunuzu duyar gibiyim. Şöyle anlatayım mesela bloğunuzun yazı alanı 500px genişliğinde ama yazınıza eklediğiniz görsel 800px değerinde. Dolayısıyla taşmalar meydana gelecek.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">İşte bu taşmalara engel olmak için blog kodlarımız arasına bu CSS kodlarını eklemek zorundayız.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Bu kodları ekledikten sonra artık bloğunuza istediğiniz boyutta resim atın hepsi otomatikman sizin yazı alanınızın genişliğine göre ayarlanacak.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://codepen.io/blogbakkali/full/zvPavb/" target="_blank">DEMO</a></li>
</ul>
<div>
</div>
</div>
<div class="clear">
</div>
<br />
<h2>
<span style="font-family: Verdana, sans-serif;">Resimler Duyarlı Hale Nasıl Getirilir?</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Şablon</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. Açılan kodlar üzerinde herhangi bir yere tıklayın ve CTRL F tuşlarına basın. Arama kutusu açılacak. Bu kutu yardımıyla </span><span style="background-color: white; line-height: 23.8px;"><span style="font-family: Verdana, sans-serif;"><b style="color: red;">]]></b:skin> </b>kodunu bulun.</span></span></div>
<div>
<span style="background-color: white; line-height: 23.8px;"><span style="font-family: Verdana, sans-serif;">3. Bulduğunuz bu kodun üst satırına aşağıdaki CSS kodlarını yapıştırın.</span></span> <br />
<pre data-codetype="CSS">.post-body img {
max-width:100%;
height:auto;
}</pre>
<span style="font-family: Verdana, sans-serif;">4. Şablonu kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;">5. Tebrikler artık bloğunuza eklediğiniz tüm resimler otomatik olarak boyutlandırılıyor. </span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com14tag:blogger.com,1999:blog-7829475543171780486.post-52380915505626027572015-10-10T13:21:00.000+03:002015-10-10T13:24:35.559+03:00Slayt Demo ve Download Butonları Yapımı<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJauQZZxrmLsHcrW3AI3rorH4clXW-xjM6TZerDOgaTFtg6h7MAB7gkKqQA3TM2do1L6ADVsVbh9SDEVhh5OYT4SZDfUvK2tV-w9fwGBoLUzq8BNRfKTtfeQyM-H9QMRjl8OQgoF57_5i/s1600/blogger-demo-download-butonlari.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Slayt Demo ve Download Butonlari Yapimi" border="0" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJauQZZxrmLsHcrW3AI3rorH4clXW-xjM6TZerDOgaTFtg6h7MAB7gkKqQA3TM2do1L6ADVsVbh9SDEVhh5OYT4SZDfUvK2tV-w9fwGBoLUzq8BNRfKTtfeQyM-H9QMRjl8OQgoF57_5i/s640/blogger-demo-download-butonlari.png" title="Slayt Demo ve Download Butonları Yapımı" width="640" /></a></div>
<span style="font-family: Verdana, sans-serif;"><b><br /></b></span>
<span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/10/blogger-slayt-demo-ve-download-butonlari-yapimi.html">Blogger Slayt Demo ve Download Butonları Yapımı</a>. </b>Blogger bloğumuzda okuyucularımızla bazen bir şablon, word dosyası veya powerpoint sunusu gibi içerikler paylaşma isteği duyuyoruz. Okuyucularınızın indirmesi gereken bir dosyayı gösterirken <u style="font-weight: bold;">burayı tıklayın indirin</u> gibi basitçe indir linki yolunu göstermektense şimdiki paylaşacağım butonlar aracılığıyla gösterirseniz bloğunuzun daha profesyonel ve anlaşılır görünmesini sağlayabilirsiniz. Uzatmadan anlatmaya başlayayım</span> <i class="icon-smile icon-large"></i><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://codepen.io/blogbakkali/full/KdqYRG/" target="_blank">DEMO</a></li>
</ul>
</div>
<div class="clear">
</div>
<h2>
<span style="font-family: Verdana, sans-serif;"><br />
</span></h2>
<h2>
<span style="font-family: Verdana, sans-serif;">Blogger için Demo ve İndir Butonları Nasıl Yapılır?</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Blogger giriş.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. Şablon</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">4. Açılan kodlar üzerinde herhangi bir yere tıklayın CTRL ve F tuşlarına aynı anda basarak arama kutusunu açın.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">5. </span><span style="font-family: Verdana, sans-serif;"><span style="background-color: white; color: red; font-weight: bold; line-height: 23.8px;">]]></b:skin> </span><span style="background-color: white; line-height: 23.8px;">kodunu bulun. Bu kodun üst satırına aşağıdaki kodları ekleyin.</span></span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><span style="background-color: white; line-height: 23.8px;"><br />
</span></span><br />
<pre data-codetype="CSS">#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}</pre>
<br />
<span style="font-family: Verdana, sans-serif;">6. Şablonu kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;">7. Gelelim bu butonları yazı aralarımızda nasıl kullanacağımıza. </span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Diyelimki sadece demo butonunu kullanmak istiyoruz. O zaman aşağıdaki kodları yeni yayın sayfamızda yani bu yazıları yazdığımız yerde sol üstte Oluştur ve HTML butonları var HTML yazana tıklıyoruz ve eklemek istediğimiz yere aşağıdaki kodları yapıştırıyoruz. Bu yazının sonuna ekleyeceksem eğer HTML kodları içerisinde bu parağrafı buluyorum ve oraya yapıştırıyorum.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<pre data-codetype="HTML"><div id="wrap">
<a href="<b><span style="color: red;">#</span></b>" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Buraya Tıkla</span>
</a>
</div></pre>
<br />
<span style="font-family: Verdana, sans-serif;">Eğer Sadece İndir butonunu kullanmak istiyorsak bu kez aşağıdaki kodları yapıştırıyoruz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<pre data-codetype="HTML"><div id="wrap">
<a href="<span style="color: red;"><b>#</b></span>" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Buraya Tıkla</span>
</a>
</div></pre>
<br />
<span style="font-family: Verdana, sans-serif;">Eğer her iki butonu birden kullanmak istiyorsak aşağıdaki kodları yapıştırıyoruz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<pre data-codetype="HTML"><div id="wrap">
<a href="<b><span style="color: red;">#</span></b>" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Buraya Tıkla</span>
</a>
<a href="<b><span style="color: red;">#</span></b>" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Buraya Tıkla</span>
</a>
</div></pre>
<br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><b style="color: red;"># </b>işaretli yerleri indirme veya demo linkinizle değiştirin.</span></blockquote>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">8. İşlemler bu kadar. </span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Blogger için slayt şeklinde <i>indir butonu</i> ve <i>demo butonu</i> nasıl yapılır konusu anlattım. Takıldığınız yerleri yorumla sormaktan çekinmeyin lütfen.<b> Destek olmak için <span style="color: magenta;"><a href="https://www.blogger.com/follow-blog.g?blogID=7829475543171780486" rel="nofollow" target="_blank">buradan </a></span>bloğumu izlemen yeterli parayla değil hani</b> . </span><i class="icon-smile icon-large"></i></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com8tag:blogger.com,1999:blog-7829475543171780486.post-39879809694315155972015-10-02T20:56:00.003+03:002015-10-02T20:58:17.390+03:00Yeni Popüler Yayınlar Gadgetimiz<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZwiFGaNfqulJls2cAZBOW2z0raP4Ly5Th4H8DXZyVhAlloN8j532Ged1tokdQI73uIpq0tPHV7UtxVXFh8XVcNILZY_V-HX1MH97TCr9rTWvPTbXFvFGQsOkhZRmpNgxdLOebORh9Viy/s1600/popular-yayinlar-css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Yeni Popüler Yayınlar Gadgetimiz" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZwiFGaNfqulJls2cAZBOW2z0raP4Ly5Th4H8DXZyVhAlloN8j532Ged1tokdQI73uIpq0tPHV7UtxVXFh8XVcNILZY_V-HX1MH97TCr9rTWvPTbXFvFGQsOkhZRmpNgxdLOebORh9Viy/s640/popular-yayinlar-css.png" title="Yeni Popüler Yayınlar Gadgetimiz" width="328" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/10/blogger-yeni-populer-yayinlar-duzenlemesi.html">Blogger popüler yayınlar düzenlemesi</a></b>. Bu eklentiyi bloğunuza kurduğunuz zaman popüler yayınlar listenizde ilk sırada olan yayının resmi sidebarınızın genişliğinde büyük oluyor ve üzerine fare imlecini getirince o yayın hakkında kısa bir bilgi kutucuğu beliriyor. Popüler yayınlarda iki, üç ve diğer sırada yer alan yayınlar ise alt alta küçük resim ve yazı başlığıyla birlikte sıralanıyor. Popüler yayınlar modifiyemizin önizlemesi yukarıdaki resimde olduğu gibidir.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Daha önce popüler yayınlar modifiyesiyle ilgili bir güzel eklenti daha paylaşmıştım ona da <b><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-populer-yayinlar-modifiyesi.html">buradan </a></b>ulaşabilirsin.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<h2>
<span style="font-family: Verdana, sans-serif;">Popüler Yayınlar Widgeti Eklemek İçin Ne Yapmalıyım?</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Blogger giriş.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. Şablon </span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">4. Kodlar üzerinde bir yere tıkla CTRL ve F tuşlarına aynı anda basarak arama kutusunu aç ve <span style="background-color: white; color: red; font-weight: bold; line-height: 23.8px;">]]></b:skin> </span><span style="background-color: white; line-height: 23.8px;">kodunu bul.</span></span></div>
<div>
<span style="background-color: white; line-height: 23.8px;"><span style="font-family: Verdana, sans-serif;">5. Bu kodun üst satırına aşağıdaki CSS kodlarını yapıştır.</span></span></div>
<div>
<span style="background-color: white; font-family: Verdana, sans-serif; font-size: 14px; line-height: 23.8px;"><br />
</span><br />
<pre data-codetype="CSS">/* Popülar Yayınlar Style 1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;left:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 10px 0 0;overflow:hidden;float:left}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:18px;line-height:1.3em;font-weight:700}</pre>
<br />
<span style="font-family: Verdana, sans-serif;">6. Şimdi <b><span style="color: red;"></body></span></b> kodunu bul ve yine üst satırına aşağıdaki Jquery kodlarını yapıştır.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<pre data-codetype="JQuery"><script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script></pre>
<br />
<span style="font-family: Verdana, sans-serif;">7. Şablonu kaydet ve tebrikler yeni popüler yayınlar eklentin hazır :)</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Bloger için popüler yayınları yeni ve farklı tarzda nasıl dizayn edeceğinizi anlattım. Takıldığınız yerler varsa yorumla sormaktan çekinmeyin.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Umarım faydalı olmuşumdur. Destek için bloğumu izlemeniz ve arada bir yazılarıma yorumunuzla güzellik katmanız yeterli. Teşekkürler. İyi bloglamalar.</span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com1tag:blogger.com,1999:blog-7829475543171780486.post-55839747941930416532015-09-19T23:10:00.001+03:002015-09-19T23:12:10.313+03:00Bloğunuzun Renklerini Değiştirmek Bu Kadar Kolay!<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxGYpAWNGxmGr8y45ckFVUrbalh6Hu5ySFNQaRlylyN3H01sRxMuEtTIADjDwk7ESyuzc9jX8ICWA-6PO14_k-fU6M2gtMU-HU6XR1phY0syHJPARAsjGouHJLwrc_uGc4klvKkTF56nXe/s1600/blog-renk-degistirme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger blog renklerini değiştirmenin en kolay yolu." border="0" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxGYpAWNGxmGr8y45ckFVUrbalh6Hu5ySFNQaRlylyN3H01sRxMuEtTIADjDwk7ESyuzc9jX8ICWA-6PO14_k-fU6M2gtMU-HU6XR1phY0syHJPARAsjGouHJLwrc_uGc4klvKkTF56nXe/s640/blog-renk-degistirme.png" title="Blogger blog renklerini değiştirmenin en kolay yolu." width="640" /></a></div>
<b><span style="font-family: Verdana, sans-serif;"><br /></span></b>
<b><span style="font-family: Verdana, sans-serif;"><a href="http://blogbakkali.blogspot.com.tr/2015/09/blog-site-renkleri-degistirmenin-hizli-basit-yolu.html">Blogger blog renklerini değiştirmenin en kolay yolu</a>.</span></b><br />
<span style="font-family: Verdana, sans-serif;">Blogger bloğunuzun veya sitenizin renklerini en basit yoldan nasıl değiştirebilirim? Diyorsanız bu Chrome eklentisi tam size göre. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><b>Color Zilla </b>sayesinde bloğunuzun renklerini çok kolay bir şekilde değiştirebilirsiniz. Öncelikle eklentiyi kurmak için Chrome Web Mağazası'ndan Color Zilla eklentisini kurun. <b><span style="color: red;"><a href="https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp" rel="nofollow" target="_blank">Buraya </a></span></b>tıklayarak mağazaya ulaşabilirsiniz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Eklentiyi kurunca adres çubuğunun sağında küçük bir dolgu aracı simgesi çıkacak bu simgeye tıkladığınızda dolgu aracınız fare imlecinizde olacak. Fare imlecini sitenizdeki herhangi bir yere getirdiğinizde dolgu aracınız oradaki zeminin rengini kodlarla size söyleyecek. </span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Bu kodları blogger panelinizden Şablon-HTML'yi Düzenle-Kodlar üzerinde herhangi bir yeri tıklayarak CTRL F tuşlarına aynı anda basın arama kutusu açılacak bu arama kutusuna renk kodunu yazın ve aratın rengini değiştirmek için seçtiğiniz bölgenin rengini bulursunuz. </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Renk kodu denen şey Atıyorum <b>#000000</b> bunun gibi. Daha fazla renk kodu için <b><span style="color: red;"><a href="http://blogbakkali.blogspot.com.tr/2015/07/html-renk-kodlari.html" target="_blank">burayı </a></span></b>tıklayın. </span><br />
<br />
<span style="font-family: Verdana, sans-serif;">Sitenizin renklerini en hızlı şekilde basitçe değiştirmek için dinleyin:</span><br />
<h2>
<span style="font-family: Verdana, sans-serif;">Blog Renkleri Nasıl Değiştirilir?</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">Örnek olarak benim bloğumun sidebar renklerini kodlar arasında bulup değiştireyim.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">1. Öncelikle bloğumu açıyorum. Color Zilla simgesine tıklayarak dolgu aracını açıyorum ve sidebarımda rengini belirlemek istediğim bölgeye tılıyorum. Resimdeki gibi bir sonuç alacaksınız.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZ3iwuBNBFKVg4k_r6BMl3LaPw4BDAhGdKDZeA2Q6UnyyayzY8fjo0zmfG5Ck01C1LFUO-tR2Nm0_gXC3Co_qVZLqAgBBTmErmlFLE2VSOVhVPkv3zWjYatNuyu-wnyGfVqZTvwF2kg5w/s1600/blog-renk-degistirme1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger blog renklerini değiştirmenin en kolay yolu" border="0" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYZ3iwuBNBFKVg4k_r6BMl3LaPw4BDAhGdKDZeA2Q6UnyyayzY8fjo0zmfG5Ck01C1LFUO-tR2Nm0_gXC3Co_qVZLqAgBBTmErmlFLE2VSOVhVPkv3zWjYatNuyu-wnyGfVqZTvwF2kg5w/s640/blog-renk-degistirme1.png" title="Blogger blog renklerini değiştirmenin en kolay yolu" width="640" /></a></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. Rengini belirleyeceğiniz yere tıkladıktan sonra tekrar Color Zilla simgesine tıklayın ve aşağıdaki resimde olduğu gibi pencere açılacak. Copy to clipboard yazısına tıklayın. Sonra en alttaki kodu seçin. Seçtiğiniz renk kodunu kopyalamış olacaksınız. O hafıza da dursun şimdilik.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWohhyyKA-HjbtXA2jYlop7rGWkxJEihjvTsBOwMjpApdZDfIjBisnZw6IaNm1airHI_aPdk5Md-AodyQIMu6_u9aoGWta792sZLMgTJt72a5fv-tPNZdN1TPKwZ4a84hh_qBWTGT2LdZA/s1600/blog-renk-degistirme2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger blog renklerini değiştirmenin en kolay yolu" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWohhyyKA-HjbtXA2jYlop7rGWkxJEihjvTsBOwMjpApdZDfIjBisnZw6IaNm1airHI_aPdk5Md-AodyQIMu6_u9aoGWta792sZLMgTJt72a5fv-tPNZdN1TPKwZ4a84hh_qBWTGT2LdZA/s400/blog-renk-degistirme2.png" title="Blogger blog renklerini değiştirmenin en kolay yolu" width="235" /></a></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. Şimdi <b>blogger </b>yönetici panelimden Şablon>HTML'yi Düzenle yolunu takip ediyorum ve açılan kodlar içerisinde herhangi bir yere tıklayarak CTRL F tuşlarına aynı anda basarak arama kutumu açıyorum.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">4. Hafızaya eklediğim renk kodunu arama kutusuna yapıştırıyorum ve aratıyorum.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG43I1_3zlPF-LcogQjb2iu1uABzCLpGA2IC8Z7qwbsFxsXocfePhlH-h8eTeGYCIz9hXNXZL7yr8fLkM2j300TWt2F57V22z5RAzfeYmkJv1OqpQ05DPtOpRgpSLJMYj1zK15MbTD1JbQ/s1600/blog-renk-degistirme3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger blog renklerini değiştirmenin en kolay yolu" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG43I1_3zlPF-LcogQjb2iu1uABzCLpGA2IC8Z7qwbsFxsXocfePhlH-h8eTeGYCIz9hXNXZL7yr8fLkM2j300TWt2F57V22z5RAzfeYmkJv1OqpQ05DPtOpRgpSLJMYj1zK15MbTD1JbQ/s640/blog-renk-degistirme3.png" title="Blogger blog renklerini değiştirmenin en kolay yolu" width="640" /></a></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">5. Bulduğum renk kodunu istediğim renkle değiştirebilirim. Bunun için <b><span style="color: red;"><a href="http://blogbakkali.blogspot.com.tr/2015/07/html-renk-kodlari.html" target="_blank">buradaki </a></span></b>skaladan bir renk kodu seçiyorum ve onla değiştiriyorum. Şablonumu kaydediyorum ve işlemlerimi bitirmiş oluyorum işte sonuç:</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEA8YT0EwU4db2buEP2O6Fqt0XMxjKEJhgPywN-guMITKP_zACKKIxbuCd-x9DdQUajcnHScvG0rj6KpyBFZOHrhdUEd9rd6lPTOSDZHf-kGTQBm1a671qgBFI4OcDhxT6HxnDcJjnzHfa/s1600/blog-renk-degistirme4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger blog renklerini değiştirmenin en kolay yolu" border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEA8YT0EwU4db2buEP2O6Fqt0XMxjKEJhgPywN-guMITKP_zACKKIxbuCd-x9DdQUajcnHScvG0rj6KpyBFZOHrhdUEd9rd6lPTOSDZHf-kGTQBm1a671qgBFI4OcDhxT6HxnDcJjnzHfa/s640/blog-renk-degistirme4.png" title="Blogger blog renklerini değiştirmenin en kolay yolu" width="640" /></a></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;">Gördüğünüz gibi <i><b><a href="http://blogbakkali.blogspot.com.tr/2015/09/blog-site-renkleri-degistirmenin-hizli-basit-yolu.html">blog veya site renklerinizi değiştirmenin en hızlı ve basit yolu</a></b></i> bence bu. Sizde renklerinizi arada bir değiştirerek bloğunuzu mevsimlere göre renklendirebilirsiniz. </span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><i>Blogger blog renkleri değiştirme</i> konusu bu kadar. Anlamadığınız yer varsa lütfen yorumla sormaktan çekinmeyin. Ayrıca destek olmak için <b><span style="color: red;"><a href="https://www.blogger.com/follow-blog.g?blogID=7829475543171780486" target="_blank">bloğumu izleyin </a></span></b>anacım baay :)</span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com6tag:blogger.com,1999:blog-7829475543171780486.post-33155027619407710482015-09-17T02:07:00.000+03:002015-09-17T02:08:14.547+03:00Slayt Şeklinde Dikey Açılır Sosyal Widget Yapımı<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHYET33FNy0LQYYqO3QFtv-ZE3nwCfnpx0dNlfkx_HGcsCb3sepPUnsJVTQfSgTS445O4MRg_84r6nqGXnxodCzU8Dv-1MlW0KqVt2Jgla5mxIFq9t0Chfh-gFzi7jFZOSPYeFfNaFaJjp/s1600/slayt-sosyal-kutular.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Slayt Şeklinde Dikey Açılır Sosyal Widget Yapımı" border="0" height="563" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHYET33FNy0LQYYqO3QFtv-ZE3nwCfnpx0dNlfkx_HGcsCb3sepPUnsJVTQfSgTS445O4MRg_84r6nqGXnxodCzU8Dv-1MlW0KqVt2Jgla5mxIFq9t0Chfh-gFzi7jFZOSPYeFfNaFaJjp/s640/slayt-sosyal-kutular.png" title="Slayt Şeklinde Dikey Açılır Sosyal Widget Yapımı" width="300" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<b style="font-family: Verdana, sans-serif;"><a href="http://blogbakkali.blogspot.com.tr/2015/09/blogger-slayt-dikey-acilir-sosyal-widget.html">Blogger Renkli Slayt Şeklinde Dikey Açılır Sosyal Widget Yapımı</a></b><span style="font-family: Verdana, sans-serif;">. Sidebarınıza ekleyeceğiniz bu widget sayesinde sosyal hesaplarınızı Facebook, Google+ , E-Mail Aboneliği ve kategorilerinizi , takip listenizi hepsini bir arada renkli bir şekilde gösterebilirsiniz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Fare imlecini eklentinin üzerine getirdiğinizde aşağı doğru slayt şeklinde açılır menü tarzında hazırlanmış bu eklenti hoşunuza gidebilir.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blogbakkalideneme.blogspot.com.tr/" target="_blank">DEMO</a></li>
</ul>
</div>
<div class="clear">
</div>
<br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Blogger sosyal kutuları sidebarınıza eklemek için aşağıdaki adımları izleyin.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">1. Blogger yönetici panelinize giriş yapın.</span><br />
<span style="font-family: Verdana, sans-serif;">2. Şablon</span><br />
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span><br />
<span style="font-family: Verdana, sans-serif;">4. Açılan kodlar üzerinde bir yere tıklayın ve CTRL+F tuşlarına basarak arama kutusunu açın.</span><br />
<span style="font-family: Verdana, sans-serif;">5. <span style="background-color: white; color: red; font-weight: bold; line-height: 23.8px;">]]></b:skin> </span><span style="background-color: white; line-height: 23.8px;">kodunu bulun ve üst satırına aşağıdaki kodları yapıştırın.</span></span><br />
<span style="background-color: white; font-family: Verdana, sans-serif; font-size: 14px; line-height: 23.8px;"><br />
</span><br />
<pre data-codetype="CSS">#slide-vertical{text-align:left; width:98%;}
.slideHolder {height:460px; width:100%; margin:0;padding:2px;font-family:georgia, serif; border:1px solid #888; float:left;}
.slideOuter {height:460px; width:100%; overflow:hidden; margin:0;}
.slideOuter .slide {padding:0; margin:0; list-style:none;height:800px; width:100%; overflow:hidden;}
.slideOuter .slide li {display:block; float:left; height:98px;border-bottom:2px solid #fff; width:100%; overflow:hidden;transition: 0.75s;}
.slideOuter .slide li.p5 {height:318px;}
.slideOuter .slide.current li {height:43px;}
.slideOuter .slide.current li.current {height:280px;}
.slideOuter .slide.current li.p5 {height:318px;}
.slideOuter .slide li.p1{background:#3173d1;}
.slideOuter .slide li.p2{background:#ef7f67;}
.slideOuter .slide li.p3{background:#83ce69;}
.slideOuter .slide li.p4{background:#20c1ea;}
.slideOuter .slide li.p5{background:#b724fb;}
.slideOuter .slide:hover li.p1,
.slideOuter .slide:hover li.p2,
.slideOuter .slide:hover li.p3,
.slideOuter .slide:hover li.p4 {height:43px;}
.slideOuter .slide:hover li.p1:hover {height:315px;}
.slideOuter .slide:hover li.p4:hover {height:280px;}
.slideOuter .slide:hover li.p2:hover {height:280px}
.slideOuter .slide:hover li.p3:hover {height:150px}
.slideOuter .slide li span {padding:0 15px; margin:0; font-size:24px;font-weight:700;line-height:43px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);cursor:pointer}
.slideOuter .slide li {color:#fff;}
.slideOuter .slide li.p2 span,
.slideOuter .slide li.p3 span,
.slideOuter .slide li.p4 span,
.slideOuter .slide li.p5 span {color:#fff;}
.slideOuter .slide li p {font-weight:bold; padding:0 5px 20px 15px;margin:0; font-size:12px; line-height:17px; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6)}
.slideOuter .slide li a {display:block; color:#fff; padding:0 15px;margin:0; font-size:14px; line-height:25px; width:100%;font-weight:bold; text-decoration:none; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6)}
.slideOuter .slide li a:hover {color:red}
.slideOuter .slide li.p2 .content {padding:0 15px;margin:0;width:100%;}
.submitbutton {background: #FF8000;border: 1px solid #F66303;font: bold 12px Arial, sans-serif;color: #fff;height: 25px;padding: 0 12px;margin: 0 0 0 5px;cursor: pointer;}
.enteryouremail {background: #fff !important;border: 1px solid #d2d2d2;padding: 0px 8px 0px 8px;color: #a19999;font-size: 12px;height: 25px;width: 165px;margin: 0px;}
.enteryouremail:focus{outline:none}
.clear {clear:left;}</pre>
<br />
<span style="font-family: Verdana, sans-serif;">6. Şablonunuzu kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Eklentimizin şeklini boyutunu ve renklerini ayarlamış olduk şimdi:</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">7. Blogger panelinizden Yerleşim-Gadget Ekle- HTML/Jawascript yolunu takip ederek aşağıdaki HTML kodlarını yapıştırın ve kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<pre data-codetype="HTML"><div id="slide-vertical">
<div class="slideHolder">
<div class="slideOuter">
<ul class="slide current">
<li class="p1">
<div>
<span><span style="color: blue;">Facebook</span></span>
<p>Facebook Sayfamıza buyurun</p>
<span style="color: red;">FACEBOOK PAGE PLUGİN KODLARINIZ BURAYA</span></li>
<li class="p2 current">
<div>
<span><span style="color: blue;">Google+ Followers</span></span>
<p>Google+'da arkadaşım olun</p>
<div class="content">
<div class="g-plus" data-action="followers" data-height="200" data-href="<span style="color: red;">https://plus.google.com/u/0/117314262477655253180/posts</span>" data-source="blogger:blog:followers" data-width="300"></div>
</div>
</div></li>
<li class="p3">
<div>
<span><span style="color: blue;">E-Posta Abonelik</span></span>
<p>Yeni yazılarım e-posta adresinize ücretsiz postalansın</p>
<div class="content">
<form style="padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;">blogbakkali</span>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="enteryouremail" name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email....&quot;;}' onfocus='if (this.value == &quot;Enter your email....&quot;) {this.value = &quot;&quot;;}' type='text' value='Email adresinizi yazın....'/>
<input type="hidden" value="KompiAjaib" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submitbutton" type="submit" value="Abone Ol" /></form>
</div>
</div>
</li>
<li class="p4">
<div>
<span><span style="color: blue;">Kategoriler</span></span>
<p>Bloğumda yayınladığım yazılar genel olarak alttaki kategorilere ayrılmıştır..</p>
<a href="#" title="Blog Eklentileri"><span style="color: blue;">Blog Eklentileri</span></a>
<a href="#" title="Blog İpuçları"><span style="color: blue;">Blog İpuçları</span></a>
<a href="#" title="Blog Şablonları"><span style="color: blue;">Blog Şablonları</span></a>
<a href="#" title="Blogger SEO"><span style="color: blue;">Blogger SEO</span></a>
<a href="#" title="Misafir Yazarlık"><span style="color: blue;">Misafir Yazarlık</span></a>
<a href="#" title="Blogger Destek"><span style="color: blue;">Blogger Destek</span></a>
</div>
</li>
<li class="p5">
<div>
<span><span style="color: blue;">Takip Edilesi Bloglar</span></span>
<p>Listemdeki blogları takip etmeniz sizin faydanıza olacaktır.</p>
<a href="http://blogbakkali.blogspot.com.tr/" title="Blog Bakkalı">Blog Bakkalı</a>
<a href="#" title="Örnek Blog"><span style="color: blue;">Örnek Blog</span></a>
<a href="#" title="Örnek Blog 2"><span style="color: blue;">Örnek Blog 2</span></a>
<a href="#" title="Örnek Blog 3"><span style="color: blue;">Örnek Blog 3</span></a>
<a href="#" title="Örnek Blog 4"><span style="color: blue;">Örnek Blog 4</span></a>
<a href="#" title="Örnek Blog 5"><span style="color: blue;">Örnek Blog 5</span></a>
</div>
</li>
</ul>
</div>
</div>
</div></pre>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Bu adımda da eklentimizi sidebarımıza eklemiş olduk. Şimdi Sosyal kutularımızın bloğumuzun neresinde görünmesini istiyorsak Gadgetı oraya sürükleyip <b><span style="color: orange;">Düzenlemeyi Kaydet</span></b> diyerek işlemimizi tamamlamış oluyoruz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Uyarılar:</span><br />
<span style="font-family: Verdana, sans-serif;">1. Kırmızıyla belirttiğim yerleri kendi hesaplarınızla değiştirin. İlk sıradaki yere kendi facebook page plugin kodlarınızı yapıştırın (Page Plugin kutunuzun width değerini yani genişliğini 270 olarak belirleyin. Bu genişlik sizin sidebar genişliğinizle alakalı olarak değişebilir tam ortalayacak değeri bulun). İkinci yeri kendi blogger+ profilinizin urlsiyle değiştirin. Üçüncü kırmızıdaki <span style="color: red;">blogbakkali</span> ibaresini kendi feedburner hesabınızın adıyla değiştirin.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">2. Mavi renkli yerler başlıklarımız. Buraları kendi isteğinize göre başlıklarla değiştirebilirsiniz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">3. <b># </b>işareti olan yerleri kategorilerinizin ve takip listenizdeki blogların urlsiyle değiştirin.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span><span style="font-family: Verdana, sans-serif;"><i><a href="http://blogbakkali.blogspot.com.tr/2015/09/blogger-slayt-dikey-acilir-sosyal-widget.html">Blogger hepsi bir arada sosyal kutular ve kategori yapımı</a></i> için işlemler bu kadar. Biraz karışık gibi gelebilir ama aslında çok basit. Sıralamayı iyi takip ederseniz kolayca yapabilirsiniz. Anlamadığınız yada yapamadığınız yerleri yorumla sorabilirsiniz. Bloğumu izlemeyi unutmayın :) iyi bloglamalar.</span>Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com1tag:blogger.com,1999:blog-7829475543171780486.post-36605430649698413262015-09-11T23:42:00.003+03:002015-10-10T11:41:59.600+03:00Blogger İçin Ajax Menü Yapımı<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGU_OvOe7QoSxeOR9gr-ml1ygX8lK8YqoMBW7dMQh1FGvZh-KhexFbL-B2z7I4dlYi8fWH73nMFLryZA5zu2llbGn47vR1FlAYjavlOty-KuUePpAZmwJE6a9uRBCH7UT8ZRGNC7GRBpQy/s1600/blogger-ajax-menu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger İçin Ajax Menü Yapımı" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGU_OvOe7QoSxeOR9gr-ml1ygX8lK8YqoMBW7dMQh1FGvZh-KhexFbL-B2z7I4dlYi8fWH73nMFLryZA5zu2llbGn47vR1FlAYjavlOty-KuUePpAZmwJE6a9uRBCH7UT8ZRGNC7GRBpQy/s640/blogger-ajax-menu.png" title="Blogger İçin Ajax Menü Yapımı" width="640" /></a></div>
<span style="font-family: Verdana, sans-serif;"><b><br />
</b></span> <span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/09/blogger-ajax-resimli-menu-yapimi.html">Blogger resimli ajax drop down menü yapımı</a></b>. Blogger bloğunuzu için bu zamana kadar pek çok farklı şekilde menü yapımı anlatıldı. Bunların hepsi basit menülerdi. Şim benim size anlatacağım menüde linklerin kategorilerin üzerine fare imlecini getirdiğinizde drop down şeklinde belirlediğiniz kategoriye ait yazılar resimleriyle birlikte menüde gösterilir.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Ayrıca bu menüde şık bir arama kutusu da var.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Benim kullandığım menü sade şekilde hazırlanmıştır. Siz bu ajax menüyü bloğunuza eklediğinizde mesela benim blog eklentileri diye bir kateğorim varya üzerine imleci getirince bu kategoriye ait yazılar resimleriyle birlikte gösterime açılır. Aşağıdaki demoya bakınca ne demek istediğimi daha iyi anlarsınız.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://codepen.io/blogbakkali/full/vNYGqN" target="_blank">DEMO</a></li>
</ul>
</div>
<div class="clear">
</div>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Gördüğünüz üzere menümüz resimli şekilde kategorilere ayrılıyor. Siz bu kategori sayısını dilediğinizce artırabilir veya eksiltebilirsiniz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Anlatıma geçelim:</span><br />
<span style="font-family: Verdana, sans-serif;">1. Blogger giriş</span><br />
<span style="font-family: Verdana, sans-serif;">2. Şablon</span><br />
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span><br />
<span style="font-family: Verdana, sans-serif;">4. Kodlar üzerinde bir yere tıklayıp CTRL+F tuşlarına basarak arama kutusunu açın ve <span style="color: red; font-weight: bold;"><head> </span>kodunu bulun.</span><br />
<span style="font-family: Verdana, sans-serif;">5. Bu kodun alt satırına aşağıdaki kodları yapıştırın.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<pre data-codetype="HTML"><link href = 'https: //maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel = 'stylesheet' type = 'text / css' />
<link rel = "stylesheet" type = "text / css" href = "https://googledrive.com/host/0BxB51PrIeBaiVzZhNU9BM3o1a28" /></pre>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">6. Şimdi <b><span style="color: red;"></body></span></b> kodunu bulun ve üst satırına aşağıdaki kodları yapıştırın.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<pre data-codetype="JavaScript"><script src='https://googledrive.com/host/0BxB51PrIeBaieVdkOHptSFIyZ0U' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){$('#adajaxmenu').ajaxBloggerMenu({numPosts:4,defaultImg:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6eyKa0KrtV6V7S1mpFe_b7bXd0h6ML2ifPnMDd3igDVCmLOcNppZprc-UNIElGwHE17jiLNwUIJ5yLcj7vMMpRTcw7yYwQlJEe_VpaxhQsU0Lo9SyvBVXezkpyms5xja6uc6aG2UGSs/s1600/no_image_available.png'})});$(function(){$('.searchblog').submit(function(e){if($('.search-form .searchbar').val().length==0){$('.search-form .search-alert').fadeIn().css('display','inline-block');e.preventDefault()}})});
</script></pre>
<br />
<span style="font-family: Verdana, sans-serif;">7. Şimdi aşağıdaki HTML kodlarını menüyü göstermek istediğiniz yere yapıştırın. Mesela blog başlığının altında olsun diyorsanız siteniz şablon kodları açıkken üstteki menüden Widget'a atla butonundan Header1 şeçeneğine tıklayın ve onun alt satırına yapıştırın.</span><br />
<br />
<pre data-codetype="HTML"><ul id="adajaxmenu" class="admenus">
<li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>
<li>
<a href="#"><span style="color: red;">Webtools</span></a>
<ul>
<li><a href="kategori linki buraya"><span style="color: red;">Tricks</span></a></li>
<li><a href="kategori linki buraya"><span style="color: red;">AD Convertor</span></a></li>
<li><a href="kategori linki buraya"><span style="color: red;">HTML Editor</span></a></li>
<li><a href="kategori linki buraya"><span style="color: red;">Code Encode</span></a></li>
</ul>
</li>
<li>
<a href="#"><span style="color: red;">Widgets</span></a>
<ul>
<li><a href="kategori linki buraya"><span style="color: red;">Widgets</span></a></li>
<li><a href="kategori linki buraya"><span style="color: red;">SEO</span></a></li>
<li><a href="kategori linki buraya"><span style="color: red;">CSS</span></a></li>
</ul>
</li>
<li>
<a href="#"><span style="color: red;">Tutorials</span></a>
<ul>
<li><a href="kategori linki buraya"><span style="color: red;">Tutorials</span></a></li>
<li><a href="kategori linki buraya"><span style="color: red;">Blogger</span></a></li>
<li><a href="kategori linki buraya"><span style="color: red;">WordPress</span></a></li>
<li><a href="kategori linki buraya"><span style="color: red;">Earning</span></a></li>
<li><a href="kategori linki buraya"><span style="color: red;">Domain Finder</span></a></li>
</ul>
</li>
<li><a href="kategori linki buraya"><span style="color: red;">Password Maker</span></a></li>
<li><a href="kategori linki buraya"><span style="color: red;">Contact</span></a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/></pre>
<br />
<span style="font-family: Verdana, sans-serif;">8. Şablonu kaydedin.</span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">Kırmızya belirtiğim yerleri kendi kategori isimlerinizle değiştirmeyi unutmayın. kategori linki buraya yazan yere de ait olan kendi kategori linklerinizi yazın.</span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">Örnek kategori linki: http://<span style="color: blue;">blogbakkali.blogspot.com.tr</span>/search/label/<span style="color: blue;">Blog Eklentileri</span>?max-results=5 </span><span style="font-family: Verdana, sans-serif;">Mavi yerlerine kendinize göre belirleyin</span></blockquote>
<span style="font-family: Verdana, sans-serif;">9. Tebrikler ajax drop down menü hazır:) </span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;"><i><a href="http://blogbakkali.blogspot.com.tr/2015/09/blogger-ajax-resimli-menu-yapimi.html">Blogger için açılır resimli kategorili menü yapımı</a></i>nı anlattım. Aklınıza takılan yerleri yorumla sormaktan çekinmeyin. Destek için bloğumu izleyin arada yorum atın yeter :) İyi bloglamalar canlar.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Ne demiştik en iyi bloglar için Blog Bakkalı :)</span>Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com12tag:blogger.com,1999:blog-7829475543171780486.post-91955035216756011772015-08-28T00:14:00.000+03:002015-09-17T02:15:46.314+03:00Popüler Yayınlar Modifiyesi<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpPHN_3qQzTQBsAdgRacj_XQZBLB6O8xaD3prYfG8Xwr4AQgHj9XfzBHMRYHfGSGf7HYP390vQYqQN-CaGh_tnlQKN6WIJMLYKNaQFoREicju0tMSJZU61Byq68J4FFZ8hIOIoxuMGb9w/s1600/populer-yainlar-modifiye.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Popüler Yayınlar Modifiyesi" border="0" height="347" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDpPHN_3qQzTQBsAdgRacj_XQZBLB6O8xaD3prYfG8Xwr4AQgHj9XfzBHMRYHfGSGf7HYP390vQYqQN-CaGh_tnlQKN6WIJMLYKNaQFoREicju0tMSJZU61Byq68J4FFZ8hIOIoxuMGb9w/s640/populer-yainlar-modifiye.png" title="Popüler Yayınlar Modifiyesi" width="640" /></a></div>
<span style="font-family: Verdana, sans-serif;"><b><br />
</b></span> <span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-populer-yayinlar-modifiyesi.html">Blogger Popüler Yayınlar Modifiyesi</a>.</b> Eminim ki böyle bir eklenti görmediniz. Blogların vazgeçilmez eklentisidir popüler yayınlar. Bloggerın kendisine bırakırsak düz sade bir eklenti verir bize ama biz onu şekillendirip çekici bir hale sokabiliriz. Popüler yayınlarınızı numaralandırabilir, renklendirebilir ve onlara bazı efektler verebilirsiniz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Benim şimdi anlatacağım yöntemde <b>popüler yayınlarınızı</b>;</span><br />
<span style="font-family: Verdana, sans-serif;"><i class="icon-ok-circle icon-large"></i> <b>Renklendireceğiz</b>,</span><br />
<span style="font-family: Verdana, sans-serif;"><i class="icon-ok-circle icon-large"></i> <b>Numara ekleyeceğiz</b>,</span><br />
<span style="font-family: Verdana, sans-serif;"><i class="icon-ok-circle icon-large"></i> <b>Yayın resimlerine Jquery ile zoom efekti uygulayacağız</b>.</span><br />
<span style="font-family: Verdana, sans-serif;"><i class="icon-ok-circle icon-large"></i> <b>Hover efekt vereceğiz</b>.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blogbakkalideneme.blogspot.com.tr/" target="_blank">DEMO</a></li>
</ul>
</div>
<div class="clear">
</div>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<h2>
<span style="font-family: Verdana, sans-serif;">Popüler Yayınlar Modifiyesi Nasıl Yapılır?</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Blogger giriş.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. Şablon</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">4. Kodlar üzerinde bir yere tıklayın CTRL+F tuşlarına basarak arama kutusunu açın ve </span><span style="background-color: white; color: red; font-family: Verdana, sans-serif; font-size: 14px; font-weight: bold; line-height: 23.7999992370605px;">]]></b:skin> </span><span style="background-color: white; font-family: Verdana, sans-serif; line-height: 23.7999992370605px;">kodunu bulun.</span></div>
<div>
<span style="background-color: white; font-family: Verdana, sans-serif; line-height: 23.7999992370605px;">5. Bu kodun üst satırına aşağıdaki kodları yapıştırın.</span><br />
<span style="background-color: white; font-family: Verdana, sans-serif; line-height: 23.7999992370605px;"><br />
</span></div>
<br />
<pre data-codetype="CSS">/* Popular Yayınlar */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}
.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}
.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}
.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}
.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}
.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}
.PopularPosts .item-snippet{display:none;}
.PopularPosts ul li .item-content{position:relative;overflow:hidden;}
.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}
.PopularPosts .widget-content ul li{position:relative;padding:10px 0;overflow:hidden;max-height:100px;transition:all .4s;}
.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}
.PopularPosts .widget-content ul li:hover:before{right:-55px;}
.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}
.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}
.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}
.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}
.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}
.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}
.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}</pre>
<br />
<span style="font-family: Verdana, sans-serif;">6. Şimdi <span style="color: red; font-weight: bold;"></body> </span> kodunu bulun ve bununda üst satırına aşağıdaki kodları yapıştırın.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<pre data-codetype="JQuery"><script type='text/javascript'>
// Popular Post Thumb
$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});
//<![CDATA[
// Custom Popular Post
$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});
//]]>
</script></pre>
<br />
<span style="font-family: Verdana, sans-serif;">7. Şablonu kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;">8. Popüler yayınlarınızın düzgün gözükmesi için ayarlarını aşağıdaki resimde olduğu gibi yapın.</span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLXTI2uQKjZiVHcVcUfDl-dUAITBJG-5KQFj9HT3QTBilANRGE4PnuBZQ57w6GAp2rCcWbo4klEdiPiBni18lTo-iqryF1WBVXo_mYqGQzlliaKYjrrxApPLnvvGvFEZAY-a8cz6aiA1CE/s1600/blogger-populer-yayinlar-modifiye.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Popüler Yayınlar Modifiyesi " border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLXTI2uQKjZiVHcVcUfDl-dUAITBJG-5KQFj9HT3QTBilANRGE4PnuBZQ57w6GAp2rCcWbo4klEdiPiBni18lTo-iqryF1WBVXo_mYqGQzlliaKYjrrxApPLnvvGvFEZAY-a8cz6aiA1CE/s400/blogger-populer-yayinlar-modifiye.png" title="Popüler Yayınlar Modifiyesi " width="400" /></a></div>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Blogger bloğunuzun için <b><i><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-populer-yayinlar-modifiyesi.html">popüler yayınlar nasıl özelliştirilir</a></i></b> konusunu anlattım. Sizde popüler yayınlarınıza <i>numara, zoom efekt ve hover efekt vermek</i> istiyorsanız bunları kolayca yapabilirsiniz. </span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Anlatımımdan aklınıza takılan yerleri yorumla sorabilirsiniz. İyi bloglamalar. Uğraşım için bloğumu izlemeyi ihmal etmeyin. </span>Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com13tag:blogger.com,1999:blog-7829475543171780486.post-87245120953493794682015-08-25T22:38:00.000+03:002015-08-25T23:10:49.530+03:00Tombul Roket Yukarı Çık Butonu Yapımı<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhxKztCHndPjTei6ngoK3RxvpIpQ9pt4PrES1Z0RbJIbL8eYM6Q6z3sIl0P8vRidX144t0lECx3Ejr6m-ipl7dJy8_eTstXsfKcIDVXRdTpXmygFEt9eKUPvcvt48OvyRKqtMQ3Aq75tKa/s1600/blogger-roket-yukar%25C4%25B1-cik-butonu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tombul Roket Yukarı Çık Butonu Yapımı" border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhxKztCHndPjTei6ngoK3RxvpIpQ9pt4PrES1Z0RbJIbL8eYM6Q6z3sIl0P8vRidX144t0lECx3Ejr6m-ipl7dJy8_eTstXsfKcIDVXRdTpXmygFEt9eKUPvcvt48OvyRKqtMQ3Aq75tKa/s400/blogger-roket-yukar%25C4%25B1-cik-butonu.jpg" title="Tombul Roket Yukarı Çık Butonu Yapımı" width="400" /></a></div>
<span style="font-family: Verdana, sans-serif;"><b><br />
</b></span> <span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-tombul-roket-yukari-cik-butonu-yapimi.html">Blogger Tombul Roket Yukarı Çık Butonu Yapımı</a></b>. Bazen blog yazılarımız alabildiğine uzun oluyor ziyaretçimiz sonuna kadar okuduğu yazımızda tekrar başa dönmek istediğinde farenin çemberini döndürmekten başı dönüyor olabilir <i class="icon-smile icon-large"></i> Okuyucumuzu bu eziyete maruz bırakmamak için bu eklentinin gerekli olduğunu düşünüyorum.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://codepen.io/blogbakkali/full/Xbvydr" target="_blank">DEMO</a></li>
</ul>
</div>
<div class="clear">
</div>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Yukarı çık ya da diğer ismiyle sayfa başına dön butonumuz şirin bir tombul roket şeklinde. Yazı sayfamızda aşağıya doğru indiğimizde otomatik olarak sağ alt köşede belirir, üzerine imleci getirdiğimizde roket şekline dönüşür ve tık tık yapınca yukarıya doğru tıpkı roket gibi uçar gider. Giderken de sayfayı da yanında götürür </span><i class="icon-smile icon-large"></i><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<h2>
<span style="font-family: Verdana, sans-serif;">Tombul Roket Yukarı Çık Butonu Nasıl Yapılır?</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Blogger</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. Şablon</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">4. Kodlar üstünde herhangi bir yere tık tık CTRL+F tuşlarına aynı anda basarak arama kutusunu açın.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">5. <span style="background-color: white; color: red; font-weight: bold; line-height: 23.7999992370605px;">]]></b:skin> </span><span style="background-color: white; line-height: 23.7999992370605px;">kodunu bulun. Bu kodun üst satırına aşağıdaki CSS kodlarını yapıştırın.</span></span></div>
<div>
<br /></div>
<div>
<pre data-codetype="CSS">/* Tombul Roket Yukarı Çık Butonu */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}</pre>
<br />
<span style="font-family: Verdana, sans-serif;">6. Şimdi <b><span style="color: red;"></body></span></b> kodunu bulun ve üst satırına aşağıdaki kodları yapıştırın.</span><br />
<br />
<pre data-codetype="HTML"><a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a></pre>
<pre data-codetype="JQuery"><script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script><span style="font-family: Verdana, sans-serif;"> </span></pre>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">7. Şablonu kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;">8. Tebrikler tombul roket uçmaya hazır </span><i class="icon-smile icon-large"></i><br />
<br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">Roket resmini kendi hesabınıza yükleyin silinmeye karşı korumuş olursunuz. </span><span style="font-family: Verdana, sans-serif;">http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png</span></blockquote>
<span style="font-family: Verdana, sans-serif;">Blogger blog için <i><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-tombul-roket-yukari-cik-butonu-yapimi.html">tombul roket/füze şeklinde yukarı çık butonun yapımı</a></i>nı anlattım. Çok şirin durduğunu düşündüğüm bu eklentiyi bloğunuza uygulamanızı isterim. Yazımın uzunluğuna bakmayın aslında iki hamlede ekliyoruz bu kadar basit yani. </span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">İyi bloglamalar. Yorumunuzla güzellik katın; anlamadığınız birşey varsa sormayı ihmal etmeyin. Bu arada bloğumu izlemeyi unutmayın </span><i class="icon-smile icon-large"></i></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com2tag:blogger.com,1999:blog-7829475543171780486.post-40497080226200564792015-08-24T01:32:00.000+03:002015-08-24T01:33:58.036+03:00Hover Efektli Sosyal Takip Butonları<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL2gBhhX8sRQ6mYdDPkzltYGR6qcaC6cUddlUaDvx1mmkF6PacSEf6tcex1bW4sEgZbeHkqK4aZKhSsejRDHLCFMgdszCpApZSJQ_XxOtAZ8sYO_R-EPiHktZHi9EGru4bVaBS7H2u-IHK/s1600/hover-efektli-sosyal-butonlar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Hover Efektli Sosyal Takip Butonları" border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL2gBhhX8sRQ6mYdDPkzltYGR6qcaC6cUddlUaDvx1mmkF6PacSEf6tcex1bW4sEgZbeHkqK4aZKhSsejRDHLCFMgdszCpApZSJQ_XxOtAZ8sYO_R-EPiHktZHi9EGru4bVaBS7H2u-IHK/s320/hover-efektli-sosyal-butonlar.png" title="Hover Efektli Sosyal Takip Butonları" width="320" /></a></div>
<span style="font-family: Verdana, sans-serif;"><b><br /></b></span>
<span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-hover-efektli-sosyal-takip-butonlari-yapma.html">Hover Efektli Animasyonlu Sosyal Takip Butonları Yapımı</a></b>. Ziyaretçilerinizin blogger bloğunuzdan sosyal medya sayfalarınıza ulaşımını kolaylaştırmak için bu eklentiyi kurmak isteyebilirsiniz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Birçok blogger arkadaşımın blog sayfaları için oluşturduğu bazı sosyal medya hesapları var. Blogu üzerinden bu hesaplarına bağlantı vermek istediklerinde bu eklentiyi işe koşmalarının sebebi en güzeli ve profesyoneli olması diyebilirim.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Sizde blogger bloğunuza animasyonlu ve hover efektli sosyal takip butonlarını eklemek istiyorsanız aşağıdaki adımları izleyin.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><img alt="blogger sosyal butonlar" src="https://i.imgflip.com/pyr70.gif" title="blogger sosyal butonlar" /></span></div>
<div style="text-align: center;">
<span style="font-family: Verdana, sans-serif;"><br />
</span></div>
<h2 style="text-align: left;">
<span style="font-family: Verdana, sans-serif; font-size: small;">Hover Efektli Sosyal Takip Butonları Yapımı</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Blogger</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. Şablon</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">4. Kodların üzerinde herhangi bir yere tıklayıp CTRL+F tuşlarına aynı anda basın ve arama kutusunu açın.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">5. <span style="background-color: white; color: red; font-weight: bold; line-height: 23.7999992370605px;">]]></b:skin> </span><span style="background-color: white; line-height: 23.7999992370605px;">kodunu bulun</span></span></div>
<div>
<span style="background-color: white; line-height: 23.7999992370605px;"><span style="font-family: Verdana, sans-serif;">6. Bu kodun üst satırına aşağıdaki kodları yapıştırın.</span></span><br />
<span style="background-color: white; line-height: 23.7999992370605px;"><span style="font-family: Verdana, sans-serif;"><br />
</span></span><br />
<pre data-codetype="CSS">ul.cbttopshare { float: right; margin: -4px 0; } ul.cbttopshare li {float:left;list-style: none outside none;border:none;} ul.cbttopshare li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisL_y6Wai6lfMPH8I01RBUZOReZ5UomQaCmK-uuTQZvvtA9U5hn2kllr8DrC1jnyAg1qkndF8CyCAbrgOrnWXeNko8qKBvaVl3V4U-luXEOWlvCDhOpUPMjRASDw3NviugycTE-bIs2clK/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px} .ie7 ul.cbttopshare li a, .ie8 ul.cbttopshare li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisL_y6Wai6lfMPH8I01RBUZOReZ5UomQaCmK-uuTQZvvtA9U5hn2kllr8DrC1jnyAg1qkndF8CyCAbrgOrnWXeNko8qKBvaVl3V4U-luXEOWlvCDhOpUPMjRASDw3NviugycTE-bIs2clK/s1600/spice-social-gadget-sprite.png)} ul.cbttopshare li.facebook a{ background-position:0 0} ul.cbttopshare li.flickr a{ background-position:-32px 0} ul.cbttopshare li.dribbble a{ background-position:-64px 0} ul.cbttopshare li.googleplus a{ background-position:-96px 0} ul.cbttopshare li.linkedin a{ background-position:-128px 0} ul.cbttopshare li.pinterest a{ background-position:-160px 0} ul.cbttopshare li.rss a{ background-position:-192px 0} ul.cbttopshare li.skype a{ background-position:-224px 0} ul.cbttopshare li.twitter a{ background-position:-256px 0} ul.cbttopshare li.vimeo a{ background-position:-288px 0} ul.cbttopshare li.youtube a{ background-position:-320px 0} ul.cbttopshare li.facebook a:hover, #sidebar ul.cbttopshare li.facebook a:hover{ background-position:0 -32px} ul.cbttopshare li.flickr a:hover, #sidebar ul.cbttopshare li.flickr a:hover{ background-position:-32px -32px} ul.cbttopshare li.dribbble a:hover, #sidebar ul.cbttopshare li.dribbble a:hover{ background-position:-64px -32px} ul.cbttopshare li.googleplus a:hover, #sidebar ul.cbttopshare li.googleplus a:hover{ background-position:-96px -32px} ul.cbttopshare li.linkedin a:hover, #sidebar ul.cbttopshare li.linkedin a:hover{ background-position:-128px -32px} ul.cbttopshare li.pinterest a:hover, #sidebar ul.cbttopshare li.pinterest a:hover{ background-position:-160px -32px} ul.cbttopshare li.rss a:hover, #sidebar ul.cbttopshare li.rss a:hover{ background-position:-192px -32px} ul.cbttopshare li.skype a:hover, #sidebar ul.cbttopshare li.skype a:hover{ background-position:-224px -32px} ul.cbttopshare li.twitter a:hover, #sidebar ul.cbttopshare li.twitter a:hover{ background-position:-256px -32px} ul.cbttopshare li.vimeo a:hover, #sidebar ul.cbttopshare li.vimeo a:hover{ background-position:-288px -32px} ul.cbttopshare li.youtube a:hover, #sidebar ul.cbttopshare li.youtube a:hover{ background-position:-320px -32px} blockquote { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #FBFBFB; border-color: #DDDDDD #DDDDDD -moz-use-text-color; border-image: none; border-style: solid; border-width: 1px 1px 2px; padding: 5px; clear: both; }
</pre>
<br />
<span style="font-family: Verdana, sans-serif;">7. Şablonu kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;">8. Yerleşim>Gadget Ekle>HTML/JawaScript yolunu takip ederek aşağıdaki kodları açılan pencereye yapıştırın ve kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<pre data-codetype="HTML"><!--Social Icons Started --> <ul class='cbttopshare'> <li class='facebook'> <a href='<span style="color: red;">http://www.facebook.com/</span>' rel='nofollow' target='_blank' title='facebook'> </a></li> <li class='googleplus'> <a href='<span style="color: red;">https://plus.google.com/</span>' rel='nofollow' target='_blank' title='googleplus'> </a></li> <li class='pinterest'> <a href='http://pinterest.com/' rel='nofollow' target='_blank' title='pinterest'> </a></li> <li class='twitter'> <a href='http://twitter.com/' rel='nofollow' target='_blank' title='twitter'> </a></li> <li class='rss'> <a href='http://feedburner.com/' rel='nofollow' target='_blank' title='rss'> </a></li> <li class='skype'> <a href='http://www.skype.com/' rel='nofollow' target='_blank' title='Skype'> </a></li> <li class='vimeo'> <a href='http://www.vimeo.com/' rel='nofollow' target='_blank' title='vimeo'> </a></li> <li class='flickr'> <a href='http://www.flickr.com/' rel='nofollow' target='_blank' title='flickr'> </a></li> <li class='linkedin'> <a href='http://www.linkedin.com/' rel='nofollow' target='_blank' title='linkedin'> </a></li> <li class='youtube'> <a href='http://www.youtube.com/' rel='nofollow' target='_blank' title='youtube'> </a></li> </ul> <!--Social Icons End--></pre>
<br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">Kırmızıyla belirttiğim adresleri ve diğerlerini kendi hesaplarınızın adresleriyle değiştirmeyi unutmayın. </span></blockquote>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">9. İşlemler bu kadar. Tebrikler :)</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">Blogger için <b><i><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-hover-efektli-sosyal-takip-butonlari-yapma.html">hover efektli animasyonlu sosyal takip butonlarının yapımı</a></i></b>nı anlattım. Anlatamamış da olabilirim. Siz aklınıza takılan yerleri yorum yaparak sorabilirsiniz. İyi bloglamalar. Bloğumu izlemeyi unutmayın :)</span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com1tag:blogger.com,1999:blog-7829475543171780486.post-26942507904427972902015-08-22T01:16:00.000+03:002015-08-22T01:17:59.490+03:00Blogunuzdaki Tüm Linkleri Yeni Sekmede Açılır Yapmak<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiolx2MMBqATwcFAUb4RUzv_0sX361_0uWglwkmk7jSia7MNKyR9o9Qm1vQUTM-cqWZCIPSHQVJKFwpN6O4w-OpTHEQB2B7hOfSYZPok6hWV5Fnb_Gs-d6KLPKvHyyKxgmAOOlllhGhjPa6/s1600/blogger-linkleri-yeni-sekmede-acmak.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger-tum-linkleri-yeni-sekmede-acmak" border="0" height="428" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiolx2MMBqATwcFAUb4RUzv_0sX361_0uWglwkmk7jSia7MNKyR9o9Qm1vQUTM-cqWZCIPSHQVJKFwpN6O4w-OpTHEQB2B7hOfSYZPok6hWV5Fnb_Gs-d6KLPKvHyyKxgmAOOlllhGhjPa6/s640/blogger-linkleri-yeni-sekmede-acmak.png" title="Tüm Linkleri Yeni Sekmede Açılır Yapmak" width="640" /></a></div>
<span style="font-family: Verdana, sans-serif;"><b><br /></b></span>
<span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-tum-linkleri-yeni-sekmede-acmak.html">Blogger Tüm Linkleri Yeni Sekmede Açılır Yapmak</a>.</b> Ziyaretçi bir yazınızı okurken verdiğiniz bir bağlantı linkinize veya benzer yazılarınızdaki linklerden birine tıkladığı zaman mevcut okuduğu sayfa kapanır ve tıkladığı sayfaya yönlendirilir. Bunu engellemek için birazdan paylaşacağım kodu bloğunuza ekleyin ve <b>linkleriniz yeni sekmede açılsın</b>.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Blogtaki linklerin yeni sekmede açılması ne işe yarar?</span><br />
<span style="font-family: Verdana, sans-serif;">Ziyaretçiniz o andaki okuduğu sayfayı kapatmadan herhangi bir bağlantı linkini otomatik olarak yeni sekmede görüntüler ve okuduğu sayfayı kaybetmez. Ziyaretçiler herhangi bir sayfanızda ne kadar uzun süre kalırsa bu o sayfanın arama motorları tarafından önemli olarak indekslenmesini sağlar. Seo ve istatistikler açısından sayfanızın uzun süre açık kalması öenmlidir.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Tek tek her linke yeni sekmede açılması komutu vermektense ekleyeceğiniz ufak bir kod sayesinde tüm linklerinizin yeni sekmede açılmasını sağlayabilirsiniz. Nasıl mı?</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<h2>
<span style="font-family: Verdana, sans-serif;">Tüm Linleri Yeni Sekmede Açmak</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Blogger</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. Şablon</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">4. CTRL+F tuşlarına aynı anda basarak arama kutusunu açın</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">5. <b><span style="color: red;"></head></span></b> kodunu bulun</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">6. Aşağıdaki kodu bulduğunuz bu kodun alt satırına yapıştırın.</span><br />
<br />
<pre data-codetype="HTML"><base target='_blank' /></pre>
<br />
<span style="font-family: Verdana, sans-serif;">7. Şablonu kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Tebrikler artık <i>bloğunuzdaki tüm linkler otomatik olarak yeni sekmede açılıyor</i>. Bu gibi basit ipuçlarının ve eklentilerin devamının gelmesi için bloğumu izleyin ve yazılarıma yorumlarınızla güzellik katın. Unutmayın birbirimize destek olarak büyüyebiliriz. İyi bloglamalar ;) </span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Kaynak: http://blogbakkali.blogspot.com.tr/2015/08/blogger-tum-linkleri-yeni-sekmede-acmak.html</span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com1tag:blogger.com,1999:blog-7829475543171780486.post-2045250514343388082015-08-19T22:32:00.000+03:002015-08-19T22:32:54.697+03:00Etikete Bağlı Son Yayınlar Galerisi Yapımı<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-MOuq90ni0Y1j4IQ1wBTSblaApSD6NATg5Ky6fiKzJ4trO2WxjCEd8C37QjUnfzS__z5_CdwPGR-1Vh5JIFhgLk6d9CbJKX_uzDzQ98sxMgeLYHNbMiWHC7x-VBTEXHQrn9WRCed5_Bni/s1600/blogger-etikete-bagli-galeri.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Etikete Bağlı Son Yazılar Galerisi Yapımı" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-MOuq90ni0Y1j4IQ1wBTSblaApSD6NATg5Ky6fiKzJ4trO2WxjCEd8C37QjUnfzS__z5_CdwPGR-1Vh5JIFhgLk6d9CbJKX_uzDzQ98sxMgeLYHNbMiWHC7x-VBTEXHQrn9WRCed5_Bni/s400/blogger-etikete-bagli-galeri.png" title="Etikete Bağlı Son Yazılar Galerisi Yapımı" width="323" /></a></div>
<span style="font-family: Verdana, sans-serif;"><b><br />
</b></span> <span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-etikete-bagli-son-yayinlar-galerisi-yapimi.html">Blogger Etikete Bağlı Son Yazılar Galerisi Yapımı</a>. </b>Daha önce blogger son yazılar eklentisini slider şeklinde vitrin olarak nasıl yapabileceğinizi <a href="http://blogbakkali.blogspot.com.tr/2015/07/blogger-slider-duyarli-son-yazilar-yapma.html" target="_blank"><span style="color: red;">şuradaki </span></a>yazımda anlatmıştım. Şimdi sizlerle yine <b>bloger </b>için <b>son yayınlar</b> eklentisini paylaşacağım ama bunda biraz daha fark var:</span><br />
<span style="font-family: Verdana, sans-serif;">1. Etikete göre son yazıları gösterir</span><br />
<span style="font-family: Verdana, sans-serif;">2. Son yazıları galeri şeklinde gösterir.</span><br />
<span style="font-family: Verdana, sans-serif;">Bu sayede blogunuz sidbarına rahatlıkla eklersiniz ve blogunuza şıklık ve kolaylık katarsınız.</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">Mesela yayınlarınız arasında "blogger" etiketine sahip yazılar var işte bunların son 9 tanesini veya sizin belirleyeceğniz adetini gösteren bir galeri yapacağız.</span><br />
<br />
<span style="font-family: Verdana, sans-serif;">Blogger etikete bağlı son yayınları kutucuklar içerisinde satır ve sütunlara bölerek göstermek isterseniz buyurun anlatıyorum.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<h2>
<span style="font-family: Verdana, sans-serif;">Blogger etikete bağlı son yazılar galerisi nasıl yapılır?</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Blogger</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">2. Şablon</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">4. CTRL+F tuşlarına basarak <span style="color: red; font-weight: bold;"></head> </span>kodunu bulun ve hemen alt satırına aşağıdaki kodları yapıştırın.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<pre data-codetype="JavaScript"><script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="ad-item">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script></pre>
<br />
<span style="font-family: Verdana, sans-serif;">5. Şimdi <span style="background-color: white; color: red; font-weight: bold; line-height: 23.7999992370605px;">]]></b:skin> </span><span style="background-color: white; line-height: 23.7999992370605px;">kodunu bulun ve üst satırına aşağıdaki kodları yapıştırın. </span></span><br />
<span style="font-family: Verdana, sans-serif;"><span style="background-color: white; line-height: 23.7999992370605px;"><br />
</span></span><br />
<pre data-codetype="CSS">/* CSS son yazılar galerisi */
.recent-gallery {padding:0;clear:both;}
.recent-gallery:after {content:"";display:table;clear:both;}
.recent-gallery .ad-item{display:inline-block;position:relative;margin:6px 0;overflow:hidden;}
.recent-gallery .ad-item a{position:relative;float:left;margin:0 6px;text-decoration:none}
.recent-gallery .ad-item .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-gallery .ad-item:hover .ptitle{visibility:visible;opacity:1}
.recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-gallery a:hover img {border-color:#bbb;}</pre>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">6. Şablonu kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;">7. Şimdi Yerleşim-Gadget Ekle HTML/JawaScript yolunu takip ederek aşağıdaki kodları yapıştırın ve kaydedin.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span><br />
<pre data-codetype="HTML"><script>
var arlina_thumbs = 72;
var arlina_title = true;
</script>
<script src="/feeds/posts/summary/-/<span style="color: red;">BLOGGER</span>?max-results=<span style="color: red;">9</span>&amp;alt=json-in-script&amp;callback=arlinagrid"></script></pre>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><span style="color: red;">BLOGGER </span>etiketi yerine göstermek istediğiniz kendi etiketinizi yazın. <span style="color: red;">9 </span>sayısı gösterilecek yazıyı belirler. </span></blockquote>
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;"><i>Blogger bloglar için etikete bağlı son yayınları galeri şeklinde sidebarda göstermek</i> için yapılması gerekenler bu kadar. Daha fazla blogger eklentisi ve blogger ipuçlarına ulaşmak için bloğumu izle ve yorumlarla katkıda bulun. İyi bloglamalar ;)</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Kaynak: http://blogbakkali.blogspot.com.tr/2015/08/blogger-etikete-bagli-son-yayinlar-galerisi-yapimi.html</span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com6tag:blogger.com,1999:blog-7829475543171780486.post-267407054565076912015-08-13T13:49:00.000+03:002015-08-13T13:53:49.539+03:00Resimlerinize Pinterest Butonu Ekleyin<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj7kSeAAiDe0d-c9IMopYZVO7G2QdRkmtBGYRNk4TV1sZne-UMFpk-MhtdYVZ4eXG2a0RpAUNYbY3KEec0kszljmSokOhHHQl9wc7q9i1hEmdUt3ae4V-xuuKthBSzo7g5-sMk0RFUkoK_/s1600/blogger-pinterest.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Resimlerinize Pinterest Butonu Ekleme" border="0" height="325" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj7kSeAAiDe0d-c9IMopYZVO7G2QdRkmtBGYRNk4TV1sZne-UMFpk-MhtdYVZ4eXG2a0RpAUNYbY3KEec0kszljmSokOhHHQl9wc7q9i1hEmdUt3ae4V-xuuKthBSzo7g5-sMk0RFUkoK_/s400/blogger-pinterest.png" title="Blogger Resimlerinize Pinterest Butonu Ekleme" width="400" /></a></div>
<span style="font-family: Verdana, sans-serif;"><b><br /></b></span>
<span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/08/blogger-resimlere-pinterest-butonu-ekleme.html">Blogger Resimlerinize Pinterest Butonu Ekleme</a>.</b> Blog yazılarımız arasında resim kullanmayanımız yoktur. Resim kullanımının yazılarımızın okunabilirliğini artırdığını daha önce <b><a href="http://blogbakkali.blogspot.com.tr/2015/08/basarili-bir-blog-yazisi-olusturmak.html">şu </a></b>yazımda anlatmıştım. Yazılarımızın düz kuru bir görüntüde olmasındansa konusuyla alakalı fotoğraflarla desteklenmesi görsellik ve google resimlerden gelecek ziyaretçi açısından da önemlidir. Tüm bunların yanına resimlerinize Pinterest paylaşım butonuda eklerseniz, buradan da blogunuza ziyaretçi çekebilirsiniz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Resimlerinize ekleyeceğimiz <i>Pinterest paylaş düğmesi</i>nin çalışma mantığı şöyle: Ziyaretçi blog yazınızda kullandığınız herhangi bir resmin üzerine fareyi getirdiğinde otomatikman paylaş butonu belirecek. Resimlerinizi beğenen kullanıcı rahatlıkla pinterest hesabında sizin resmini paylaşacak. Bu da size yeni ziyaretçiler çekecek.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<h3>
<span style="font-family: Verdana, sans-serif;">Pinterest paylaş butonunu bloğumuza eklemek için aşağıdaki adımları izleyin.</span></h3>
<span style="font-family: Verdana, sans-serif;">1. Blogger</span><br />
<span style="font-family: Verdana, sans-serif;">2. Şablon</span><br />
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span><br />
<span style="font-family: Verdana, sans-serif;">4. CTRL+F tuşlarına basarak <b><span style="color: red;"></body></span></b> kodunu bulun.</span><br />
<span style="font-family: Verdana, sans-serif;">5. Bu kodun üst satırına aşağıdaki kodları yapıştırın.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<pre data-codetype="JavaScript"><script>
//<![CDATA[
var custom_pinit_button = "<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLEeZwk2wKfc2SqKq6cT-ZfAX-cgVNLquCUwKLPyljmaBeaB5UtpPX0-WkprapxQHwL7ajlFgIjPjhi3CQYYpfKGmGcVhyj3rxk-z0l47f7zq0G8JN43uY99qz9bEmfL4T2jpwZ1KbuLxk/s1600/pinit-button.png</span>";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='http://helplogger.googlecode.com/svn/trunk/pinterest-button1.js' type='text/javascript'>
// Visit blogbakkali.blogspot.com.tr for more widgets and tricks.
</script></pre>
<br />
<span style="font-family: Verdana, sans-serif;">6. Şablonu kaydedin.</span><br />
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;">Kodlar içerisinde kırmızıyla belirttiğim buton resmini kendi hesabınıza yüklerseniz kaybolmaya karşı korursunuz.</span></blockquote>
<span style="font-family: Verdana, sans-serif;">Blogger bloğunuza <b><i>pinterest butonu eklemek</i></b> için yapmanız gereken bu kadar. Umarım faydalı olmuşumdur. Anlamadığınız yerleri yorumla sorabilirsiniz. Destek için bloğumu izleyin. İyi bloglamalar ;)</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Kaynak: http://blogbakkali.blogspot.com.tr/2015/08/blogger-resimlere-pinterest-butonu-ekleme.html</span>Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com3tag:blogger.com,1999:blog-7829475543171780486.post-78860568424980446652015-08-12T15:25:00.001+03:002015-08-12T15:26:15.898+03:00Linklerinize Gökkuşağı Efekti Verin<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_lmOqs5pxKRPou07tio3BAbiQ29aI6oZVU9XexGvySLykqG-wUYEkcXceB7zY0cgKwgxf1bnJqShgybsHjvY6-2Af4-ZiwxatSpfFpHOmNdAkx2i2l9pbeRIUwhgiL2YIB2IUwUHxIa3/s1600/linklerinize-gokkusagi-efekti-verme.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Linklerinize Gökkuşağı Efekti Verin" border="0" height="392" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_lmOqs5pxKRPou07tio3BAbiQ29aI6oZVU9XexGvySLykqG-wUYEkcXceB7zY0cgKwgxf1bnJqShgybsHjvY6-2Af4-ZiwxatSpfFpHOmNdAkx2i2l9pbeRIUwhgiL2YIB2IUwUHxIa3/s640/linklerinize-gokkusagi-efekti-verme.jpg" title="Linklerinize Gökkuşağı Efekti Verin" width="640" /></a></div>
<span style="font-family: Verdana, sans-serif;"><b><br /></b></span>
<span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/08/linklere-gokkusagi-efekti-verme.html">Blog Linklerinize Gökkuşağı Efekti Verin</a>. </b>Merhaba arkadaşlar bu eklentimiz bloğumuzda bulunan bağlantı linklerine gökkuşağı efekti verir. Blogunuza eklemek çok basit bunu şu şekilde yapabilirsiniz:</span><br />
<span style="font-family: Verdana, sans-serif;">1. Blogger</span><br />
<span style="font-family: Verdana, sans-serif;">2. Şablon</span><br />
<span style="font-family: Verdana, sans-serif;">3. HTML'yi Düzenle</span><br />
<span style="font-family: Verdana, sans-serif;">4. Ardından <b><span style="color: red;"></body></span></b> kodunu bulun. Üst satırına aşağıdaki kodları yapıştırın.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<pre data-codetype="JavaScript"><script type='text/javascript'>
//<![CDATA[
function doRainbow(e){0==act&&(act=1,objActive=e?e:event.srcElement,clrOrg=objActive.style.color,TimerID=setInterval("ChangeColor()",100))}function stopRainbow(){act&&(objActive.style.color=clrOrg,clearInterval(TimerID),act=0)}function doRainbowAnchor(){if(0==act){for(var e=event.srcElement;"A"!=e.tagName&&"BODY"!=e.tagName&&(e=e.parentElement,"A"!=e.tagName&&"BODY"!=e.tagName););"A"==e.tagName&&""!=e.href&&(objActive=e,act=1,clrOrg=objActive.style.color,TimerID=setInterval("ChangeColor()",100))}}function stopRainbowAnchor(){act&&"A"==objActive.tagName&&(objActive.style.color=clrOrg,clearInterval(TimerID),act=0)}function Mozilla_doRainbowAnchor(e){if(0==act){for(obj=e.target;"A"!=obj.nodeName&&"BODY"!=obj.nodeName&&(obj=obj.parentNode,"A"!=obj.nodeName&&"BODY"!=obj.nodeName););"A"==obj.nodeName&&""!=obj.href&&(objActive=obj,act=1,clrOrg=obj.style.color,TimerID=setInterval("ChangeColor()",100))}}function Mozilla_stopRainbowAnchor(){act&&"A"==objActive.nodeName&&(objActive.style.color=clrOrg,clearInterval(TimerID),act=0)}function ChangeColor(){objActive.style.color=makeColor()}function makeColor(){return 0==elmS?(elmR=elmV,elmG=elmV,elmB=elmV):(t1=elmV,t2=(255-elmS)*elmV/255,t3=elmH%60,t3=(t1-t2)*t3/60,60>elmH?(elmR=t1,elmB=t2,elmG=t2+t3):120>elmH?(elmG=t1,elmB=t2,elmR=t1-t3):180>elmH?(elmG=t1,elmR=t2,elmB=t2+t3):240>elmH?(elmB=t1,elmR=t2,elmG=t1-t3):300>elmH?(elmB=t1,elmG=t2,elmR=t2+t3):360>elmH?(elmR=t1,elmG=t2,elmB=t1-t3):(elmR=0,elmG=0,elmB=0)),elmR=Math.floor(elmR).toString(16),elmG=Math.floor(elmG).toString(16),elmB=Math.floor(elmB).toString(16),1==elmR.length&&(elmR="0"+elmR),1==elmG.length&&(elmG="0"+elmG),1==elmB.length&&(elmB="0"+elmB),elmH+=rate,elmH>=360&&(elmH=0),"#"+elmR+elmG+elmB}var rate=20;document.getElementById&&(window.onerror=new Function("return true"));var objActive,act=0,elmH=0,elmS=128,elmV=255,clrOrg,TimerID;document.all?(document.onmouseover=doRainbowAnchor,document.onmouseout=stopRainbowAnchor):document.getElementById&&(document.captureEvents(Event.MOUSEOVER|Event.MOUSEOUT),document.onmouseover=Mozilla_doRainbowAnchor,document.onmouseout=Mozilla_stopRainbowAnchor);
//]]>
</script></pre>
<br />
<span style="font-family: Verdana, sans-serif;">5. Şablonu kaydedin ve sonuçlarını izleyebilirsiniz.</span>Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com3tag:blogger.com,1999:blog-7829475543171780486.post-52135149055072022952015-08-09T02:35:00.000+03:002015-08-09T02:43:15.173+03:007 Adımda Başarılı Bir Blog Yazısı Oluşturmak<span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/08/basarili-bir-blog-yazisi-olusturmak.html">Başarılı bir blog yazısı nasıl olmalıdır?</a></b> Yıl oldu 2015 blog sayısı oldu milyon. Bedava blog açma servisleri sayesinde blogların sayısı hızla arttı. Hemen her konuda açılan yüzlerce blog var. Bunlardan pek azı istenilen başarı seviyesine ulaşıyor. Peki sizin bloğunuz başarılı mı? Sizin bloğunuzu bunca blog arasından nasıl sıyırıp çıkaracağız. Ne gibi özellikleri olmalı ki bloğunuz ön sıralara çıksın?</span><br />
<div>
<span style="font-family: Verdana, sans-serif;"><br />
</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><b>Başarılı bir blog nasıl olur?</b> Teması güzel olan bloga başarılı mı demek gerekir? Elbette temanızın güzelliği başarı için bir etken fakat daha önemli olanı yayınladığınız yazılardır. Yazınızın özgün olması, gerçekten işe yarayacak bilgilerle dolu olması, ziyaretçilerinizin faydalanabileceği konularda olması vs. başarılı bir blog yazısının ön koşulları. </span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br />
</span></div>
<div>
<span style="font-family: Verdana, sans-serif;">Şimdi ben sizlerle başarılı bir <b><i>blog yazısı nasıl olmalıdır</i></b> konusu üzerine tartışmak istiyorum. Konuyla ilgili aşağıda birkaç ipucu vereceğim umarım faydalı olur.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br />
</span></div>
<h3>
<span style="font-family: Verdana, sans-serif;">Başarılı Bir Blog Yazısı Nasıl Olmalıdır?</span></h3>
<h4>
<span style="font-family: Verdana, sans-serif;">1. İlgi Çekici Başlık</span></h4>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ50qZhe_258Qd_uwVIufi24tHYk9wIlF0W4Zem2c9hfBZuJLOObuFNf5N5QnWCmaAEnCw6_U0vUrm6F8zYpNZsCBSDumcZtzHSdBgLd-P0wParrZWA-YhXg_Df1nqbcMunak5QjRCho-r/s1600/blogger-baslik.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ50qZhe_258Qd_uwVIufi24tHYk9wIlF0W4Zem2c9hfBZuJLOObuFNf5N5QnWCmaAEnCw6_U0vUrm6F8zYpNZsCBSDumcZtzHSdBgLd-P0wParrZWA-YhXg_Df1nqbcMunak5QjRCho-r/s200/blogger-baslik.jpg" title="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" width="200" /></a><span style="font-family: Verdana, sans-serif;">Güçlü bir blog yazısı oluşturmanın ilk adımı ilgi çekici, ilginç bir başlık bulmaktır. Yazdığınız başlık konu içeriğini tek kelimeyle anlatacak kadar kısa ve öz olmalı, insanların merak edip tıklayacağı kadar da ilgi çekici olmalıdır. Mesela "<i>7 Adımda Başarılı bir Blog Yazısı Oluşturmak</i>" başlığı ilgi çekicidir. Sen şuan bu yazıyı okuduğuna göre başarılı sayılır :) Yani başlıklarınızda 5 adımda, 10 adımda, 10 derste gibi sayı bildirmeniz yazılarınızın okunabilirliğini artırıyor.</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<br />
<h4>
<span style="font-family: Verdana, sans-serif;">2. Yazınıza Fotoğraf ve Grafikler Ekleyin</span></h4>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu6NBFSOuHsprELNL1syJVtWblScRJIIc-s2iD-okjeKllCdfdEm6sM4Dv5WWHC1blgjtlpiYAfUaoHKEpJLSEk3y-01OCSIX4CujlvoICra9rqb_BHx-acrY2_FMfby-4vPawFG8BUnlP/s1600/blogger-seo.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu6NBFSOuHsprELNL1syJVtWblScRJIIc-s2iD-okjeKllCdfdEm6sM4Dv5WWHC1blgjtlpiYAfUaoHKEpJLSEk3y-01OCSIX4CujlvoICra9rqb_BHx-acrY2_FMfby-4vPawFG8BUnlP/s320/blogger-seo.png" title="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" width="320" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu6NBFSOuHsprELNL1syJVtWblScRJIIc-s2iD-okjeKllCdfdEm6sM4Dv5WWHC1blgjtlpiYAfUaoHKEpJLSEk3y-01OCSIX4CujlvoICra9rqb_BHx-acrY2_FMfby-4vPawFG8BUnlP/s1600/blogger-seo.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu6NBFSOuHsprELNL1syJVtWblScRJIIc-s2iD-okjeKllCdfdEm6sM4Dv5WWHC1blgjtlpiYAfUaoHKEpJLSEk3y-01OCSIX4CujlvoICra9rqb_BHx-acrY2_FMfby-4vPawFG8BUnlP/s1600/blogger-seo.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /></a></div>
<div>
<span style="font-family: Verdana, sans-serif;">Ziyaretçilerin ilgisini artırmak için yazılarınızda resimlere ve grafiklere yer verin. Unutmayın insanlar gördükleri şeyleri daha çok hatırlarlar. Kendi çektiğiniz resimlere ve yaptığınız grafiklere yer vermeniz onları daha değerli kılacaktır.</span></div>
<div>
<br /></div>
<div>
<br /></div>
<h4>
<span style="font-family: Verdana, sans-serif;">3. Temiz ve Basit Bir Tasarımınız Olsun</span></h4>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOapmi1Q-MqGu7bIJdc7ct4ZGvycvwuZf46KaOtLNXKBCpDUaxpvtQG1sRM4V8GhJQNzZaNQFLh8VIBiB34fe3MGovH0k9X2-LZ63a1BecdgPj-Dh101-b69RImRuCIaniODGfUvqiYU6L/s1600/blogger-seo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOapmi1Q-MqGu7bIJdc7ct4ZGvycvwuZf46KaOtLNXKBCpDUaxpvtQG1sRM4V8GhJQNzZaNQFLh8VIBiB34fe3MGovH0k9X2-LZ63a1BecdgPj-Dh101-b69RImRuCIaniODGfUvqiYU6L/s200/blogger-seo.png" title="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" width="200" /></a><span style="font-family: Verdana, sans-serif;">İnsanlar bloğunuzu ziyaret ettiğinde karma karışık menüler, etiketler, başlıklar, her yerden fışkıran reklamlarla karşılaşmasınlar. Öyle bir temanız olsun ki ziyaretçi böyle bir bakışta ben burada aradığım şeyleri kolaylıkla bulabilrim desin. Temanız sade, kolay, anlaşılır olsun. Ziyaretçinin öfkelerini kabartmayacak bir tasarım olsun. Ayrıca duyarlı şablonlar kullanmanızı öneririm. Temanızı düzenlemek için <b><a href="http://blogbakkali.blogspot.com.tr/2015/07/blogger-arka-plan-resim-degistirme-resimleri.html" target="_blank">buradaki </a></b>yazıma bakabilirsiniz.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<br /></div>
<h4>
<span style="font-family: Verdana, sans-serif;">4. Özgün İçerik</span></h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC2HKFcWlqjY5-t4tGeUZd2XqgZl14AUju0qNoqQ0yUbQQR7nHt1yjnP1LTjtweV-MuphnhJXOrwskF7wPyTRgVHZvkyPsyspg-3B1FhEMjoMQTI4-sF6mZMkbM31mwisVinS77l2YxssK/s1600/blogger-seo-yazi.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC2HKFcWlqjY5-t4tGeUZd2XqgZl14AUju0qNoqQ0yUbQQR7nHt1yjnP1LTjtweV-MuphnhJXOrwskF7wPyTRgVHZvkyPsyspg-3B1FhEMjoMQTI4-sF6mZMkbM31mwisVinS77l2YxssK/s200/blogger-seo-yazi.png" title="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" width="200" /></a></div>
<div>
<span style="font-family: Verdana, sans-serif;">Yazınız başka bir siteden kopya edilmiş olmasın. Ne anlatırsanız anlatın kendi cümlelerinizle anlatın. </span><span style="font-family: Verdana, sans-serif;">Blog yazılarınızın ön sıralarda çıkmasını istiyorsanız kesinlikle kopyala-yapıştır yapmayın. Bu numarayı arama motorları yemiyor ve direkt sitenizi banlıyor. Ön sıralara çıkacağınız varsa da artık kalmıyor. </span><span style="font-family: Verdana, sans-serif;">Yazılarınız anlamlı ve eğitici olmalıdır. Bir konuyu anlatırken sanki bir çocuğa anlatırmış gibi basit ve anlaşılır bir dil kullanmanız gerekir. </span></div>
<div>
<br /></div>
<div>
<br /></div>
<h4>
<span style="font-family: Verdana, sans-serif;">5. Video Anlatımı</span></h4>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLA-ZPBJDIzDVneU_oJMaGUi6vExeEj3iIbqeQKDGCIdGrcLEzlpvpraN7BKsWvxx6L7gaq6VcDgiQ-m1zOS0yohrhqnTWRBJDh0mKeJbQ_jsFtK8jO_7YN7IFBTHfvyb0mbFMPyFXPkC2/s1600/blogger-video-seo.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLA-ZPBJDIzDVneU_oJMaGUi6vExeEj3iIbqeQKDGCIdGrcLEzlpvpraN7BKsWvxx6L7gaq6VcDgiQ-m1zOS0yohrhqnTWRBJDh0mKeJbQ_jsFtK8jO_7YN7IFBTHfvyb0mbFMPyFXPkC2/s200/blogger-video-seo.jpg" title="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" width="193" /></a><span style="font-family: Verdana, sans-serif;">İnsanlar yazıları okumaktansa izlemeyi tercih ediyor. Eğer videolu anlatımlar yapabilirseniz bu sizi öne geçirecektir. Videolu anlatımlar ziyaretçi trafiğinizi artırmanın yanında youtube izleyici kitlenizin artmasına ve video reklamlarından para kazanmanıza imkan sağlar. Eğer youtube'da kendi kanalınız yoksa başkalarının videolarınıda blogunuzda paylaşabilirsiniz. Bu dahi yazınızın hitini artıracaktır.</span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<br /></div>
<div>
<br /></div>
<h4>
<span style="font-family: Verdana, sans-serif;">6. Sosyal Medya ile Bağlayın</span></h4>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLHCV_8HKHL9vnYsedLjoVzNPYO0jvK5zWd1h8ArbSjYrXqlWedcPpfsg5b910HznIhTCy7_WcQE1jnjoraxryOnYxKJO29ZVPmTGYQuaqkTiThZvO-PGUPo0tiJVDh2NfUo1iFP1jDdQx/s1600/blogger-sosyal-butonlar.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLHCV_8HKHL9vnYsedLjoVzNPYO0jvK5zWd1h8ArbSjYrXqlWedcPpfsg5b910HznIhTCy7_WcQE1jnjoraxryOnYxKJO29ZVPmTGYQuaqkTiThZvO-PGUPo0tiJVDh2NfUo1iFP1jDdQx/s200/blogger-sosyal-butonlar.png" title="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" width="200" /></a></div>
<div>
<span style="font-family: Verdana, sans-serif;">Yayınlarınızı Facebook, Twitter gibi sosyal ağlardaki sayfalarınızda paylaşmak ziyaretçi sayınızın artmasına yarayacaktır. Ayrıca yazılarınız sonunda sosyal paylaşım düğmelerini bulundurursanız, ziyaretçinin hoşuna giden bir yazınızı paylaşması onun arkadaşlarını da blogunuza yönlendirir. Paylaştıkça hitiniz artacaktır. Yazı sonlarında sosyal paylaşım düğmeleri eklemek için <b><a href="http://blogbakkali.blogspot.com.tr/2015/07/blogger-yazi-altinda-sosyal-paylasim-butonlari-yapma.html" target="_blank">buradaki</a></b> yazıma göz atabilirsiniz. </span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<h4>
<span style="font-family: Verdana, sans-serif;"><br /></span></h4>
<h4>
<span style="font-family: Verdana, sans-serif;">7. Benzer Bloglara Yorum Atın</span></h4>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiktJkOYP0LxeMBX1Xbsc0DlEhZS7rEe6U265TkVNDmgMksIOB3bJQFwNqyuFQaJkHpOZ9-3xtHoFlWDxl2VVMveBlKwUauE0dSU-qO86te-OSDlIjJJn5RwGfA9CpKIr6mNAYmfLsJ1fcH/s1600/blogger-seo-yap.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiktJkOYP0LxeMBX1Xbsc0DlEhZS7rEe6U265TkVNDmgMksIOB3bJQFwNqyuFQaJkHpOZ9-3xtHoFlWDxl2VVMveBlKwUauE0dSU-qO86te-OSDlIjJJn5RwGfA9CpKIr6mNAYmfLsJ1fcH/s200/blogger-seo-yap.jpg" title="7 Adımda Başarılı Bir Blog Yazısı Oluşturmak" width="198" /></a><span style="font-family: Verdana, sans-serif;">Sizin bloğunuzla aynı konulara yer veren blogları ziyaret edin ve onların yazılarına yorumlar bırakın. Yorumlarınız siteme beklerim, takibe takip gibi saçma sapan ve itici olmasın. Mesela yazar bir konuyu anlatmış sizde beğendim demek yerine bu konunun şöyle şöyle tarafları da var diyebilirsiniz. Veya konuya yapılmış bir yorumda soru soran ziyaretçi varsa ona cevap verilerek size karşı merak uyandırabilirsiniz. Bu yöntemde bloğunuza ziyaretçi çekecektir.</span></div>
<div>
<br /></div>
<div>
<span style="font-family: Verdana, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Verdana, sans-serif;"><span style="color: red;">Şimdi söz sizde.</span> Konuya eklemek istediğiniz şeyler varsa yorumla lütfen bildirin. Paylaşarak bildiklerimizi artırabiliriz. İyi bloglamalar, takipte kalın ;)</span><br />
<span style="font-family: Verdana, sans-serif;"><br /></span>
<span style="font-family: Verdana, sans-serif;">Kaynak: http://blogbakkali.blogspot.com.tr/2015/08/basarili-bir-blog-yazisi-olusturmak.html</span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com4tag:blogger.com,1999:blog-7829475543171780486.post-89196316471259004542015-08-06T12:59:00.000+03:002015-08-06T13:01:14.410+03:00Youtube Videolarını TV İçerisinden Göstermek<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiOgBHEHRIZqdtQecO2gNrHh8sZsluoLgdGaEs9QgkdlHoCxqHBbkT15ad3UrlHc1fVt5GBsQO5F5PzUfvw1j2S0OlzneKrG3NTEvlhfhA0i4q-HaDro3t_1_jeclhwCC2bDzbdVqlKOz/s1600/psd-samsung-p2370-monitor+3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger-youtube-video-tv-gibi-goster" border="0" height="458" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihiOgBHEHRIZqdtQecO2gNrHh8sZsluoLgdGaEs9QgkdlHoCxqHBbkT15ad3UrlHc1fVt5GBsQO5F5PzUfvw1j2S0OlzneKrG3NTEvlhfhA0i4q-HaDro3t_1_jeclhwCC2bDzbdVqlKOz/s640/psd-samsung-p2370-monitor+3.png" title="Youtube Videolarını TV İçerisinden Göstermek" width="580" /></a></div>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;"><b><a href="http://blogbakkali.blogspot.com.tr/2015/08/youtube-videolarini-tv-icinden-gostermek.html">Blogger bloğunuzda Youtube Videolarını TV İçerisinden Göstermek</a></b> için ne yapılmalı bunu anlatacağım.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Birçoğumuz bloğumuzda youtube kanalımızdaki videoları veya herhangi bir videoyu paylaşıyoruz. Direkt embed kodlarını yapıştırıp paylaştığımız zaman açıkçası bu çok şık durmuyor.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Ben blogger için youtube videolarına bir çerçeve eklemeye karar verdim. Bu çerçevede resim çerçevesi gibi olmasın, konuya uygun olsun diye videoyu bir televizyonun içerisinden göstermek istedim. Yani youtube videolarıma TV çerçevesi ekledim. Çok güzel olduğunu düşündüğüm için bunu da sizlerle paylaşmak istedim.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blogbakkali.blogspot.com.tr/2015/07/blogger-sablon-yukleme-videolu-anlatim.html" target="_blank">DEMOSUNA BURADAN BAKABİLİRSİNİZ</a></li>
</ul>
</div>
<div class="clear">
</div>
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Bazı bloggerlar blog sayfalarında yaptıkları düzenlemeleri nedense bir sır gibi saklıyorlar ben bunu uygun görmüyorum. Sanki o eklentiler kendilerinde var diye bloglarına girip okuyacağız. Ben bloguma eklediğim güzel şeyleri sizlerle de paylaşmak istiyorum ki takipçileriminde temaları güzelleşsin. Youtube videolarını televizyon içinden göstermekte bunlardan biri. Anlatıma geçelim:</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <br />
<h2>
<span style="font-family: Verdana, sans-serif;">Blogger için Youtube videolarını TV içerisinden göstermek için</span></h2>
<div>
<span style="font-family: Verdana, sans-serif;">1. Blogger kumanda panelimizden Şablon-HTML'yi Düzenle yolunu takip ederek </span><span style="background-color: white; font-family: Verdana, sans-serif; font-size: 14px; font-weight: bold; line-height: 23.7999992370605px;"><span style="color: red;">]]></b:skin></span></span><span style="background-color: white; color: #444444; font-family: Verdana, sans-serif; font-size: 14px; font-weight: bold; line-height: 23.7999992370605px;"> </span><span style="background-color: white; font-size: 14px; line-height: 23.7999992370605px;"><span style="font-family: Verdana, sans-serif;">kodunu buluyoruz bu kodun üst satırına aşağıdaki CSS kodlarımızı yapıştırıyoruz.</span></span><br />
<pre data-codetype="CSS">.video-player{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEich7ZyWGWVKdj7OdQFIBJknaDVIMwGnvthxN4IrgPO73cyoxnzdL3nBT65DvSg9pxe9NzhUJURfFBPMxTdHW2kXKtnYiQmVHNEi4I8CqMXKAs7qJhMu_zC99HTiRihfwhMzFGb9GHcgpH0/w580-h458-no/) no-repeat top center;height:458px;width:580px;padding-top:35px;margin-left:0px}</pre>
<br />
<span style="font-family: Verdana, sans-serif;">2. Şablonumuzu kaydediyoruz.</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span><span style="font-family: Verdana, sans-serif;">3. Şimdi normal yazı sayfamızda yayın oluştururken bir video eklemek istedik bunun için aynı sayfada sol üstteki HTML butonuna basıyoruz ve aşağıdaki kodları yapıtırıyoruz. </span><br />
<pre data-codetype="HTML"><center><div class="video-player">
<iframe height="281" src="<b><span style="color: red;">VİDEO URL</span></b>" width="500"></iframe>
</div></center></pre>
<blockquote class="tr_bq">
<span style="font-family: Verdana, sans-serif;"><span style="color: red;">VİDEO URL</span> yazan yeri paylaşacağımız videonun embed kodlarının içerisindeki urlesiyle değiştiriyoruz. Şuna benzer bir url olacak: https://www.youtube.com/embed/QqGCHyuYaE8</span><span style="font-family: Verdana, sans-serif;"> </span></blockquote>
<span style="font-family: Verdana, sans-serif;">4. Evet blogger bloğunuza eklediğiniz youtube video televizyon içerisinden gösteriliyor. Tebrikler :) </span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;"><i>Blogger blog için youtube videolarını Televizyon içinden göstermek</i> bu kadar basit. Olumsuz bir durum ve sorularınız varsa yorumla bildirin. İyi bloglamalar. Takipte kalın ;)</span><br />
<span style="font-family: Verdana, sans-serif;"><br />
</span> <span style="font-family: Verdana, sans-serif;">Kaynak: http://blogbakkali.blogspot.com.tr/2015/08/youtube-videolarini-tv-icinden-gostermek.html</span></div>
Anonymoushttp://www.blogger.com/profile/10718094535400200708noreply@blogger.com0