Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

How can i add Quick Edit Pencil to Blogger Posts?

The "Quick Edit" pencil icon provides a link to edit our blog posts while viewing blog pages in our browser.This function is always present in Blogger's default templates. However, if you have customized your template or are using a non-standard template, you may notice this function is missing from your blog pages.

In this quick tutorial, I'll explain how you can check if the "Quick Edit" function is present in your blog template, and how this can be restored if you find it's missing.

Check the quick edit settings The first thing we should do is check that the quick editing is activated in your blog's settings. To check this, go to Settings>Basic in your Blogger dashboard and scroll down to the section which says "Show quick editing on your blog".




You should ensure this option is set to "yes" and save this setting.

Then go to Layout>Page Elements in your Blogger dashboard, and click on the "edit" link for the Blog Posts widget.

On this pop-up page, you should ensure you have checked the "Show quick editing" option which enables you to quickly edit your blog posts.








Check if the required code is present in the template
Next we need to check if the code required to make these icons appear is still present in your template.

To find out, go to Layout&Edit HTML in your Blogger dashboard. Check the "Expand widget templates" box, then search for this section of code:

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        < mg alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>
      </a>
   </span>
  </b:if>
</b:includable>

The easiest way to locate this section is to use your browser's search function and find the following phrase:

b:includable id='postQuickEdit' var='post'

If this section of code is present in your template, you're already halfway towards adding those quick edit icons again.

If this section of code is not present in your template, you will need to copy the entire b:includable section above, then paste this just before the following line of code in your template:


<b:includable id='comments' var='post'>

Once you are sure that this code is present in your template, you need to add a simple line of code to the posts section where you would like your quick edit icon to appear:


<b:include data='post' name='postQuickEdit'/>

In this template, my quick edit icon is located in the "post-footer" section, like this:

<div class='post-footer-line post-footer-line-1'>

</div>

If the "post-footer-line" section is not present in your own Blogger template, you may prefer to add the quickedit code just after this line instead:

<data:post.body />

Once you have added this line of code, preview your template. The quickedit icons will not appear in the preview, but if you have made any errors during these changes, the preview will make you aware of this.

Finally, you can proceed to saving your template. Then view your blog in your browser. Your quick edit icons should now appear below each of your blog posts which allows you to easily edit posts when you are logged in to your Blogger account.

Did this work for you?
I hope this tutorial has enabled you to restore missing quick edit pencil icons for your Blogger posts with the minimum of fuss!

Please let me know if this tutorial has been useful for you by leaving your comments and opinions below.


Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Blogger'da aynı etiket altındaki yazıları bir bölümde göstermek



Blogger tabanlı blogunuza güzellik katacak güzel bir eklentiyle karşınızdayım, yapacağımız şey şu, benim blogumdaki sağ ve sol gadgetlardaki yazı linkleri o etiket'e ait yazı girildiğinde güncelleniyor. Şimdi nasıl yaptığımı anlatacağım, şimdi istediğimiz etiket siteadresi.blogspot.com/feeds/posts/default/-/etiket1 olsun, bu linki feedburner'a rss akışı olarak ekliyoruz. Aşağıdaki resimlerde benim feedburner akışlarımı örnek gösterdim, resimlerdeki etiket linkide şu, http://furkanozden.blogspot.com/feeds/posts/default/-/blogger%20tema



Aşağıdaki adımları uygulayarak, kodunuzu alın, en son resime dikkat edin hiçbiri işaretli değil biz sadece o etikete ait yazıların liste şeklinde çıkmasını istiyoruz. Feedburner RSS akışı eklerken kullanacağınız link şu http://furkanozden.blogspot.com/feeds/posts/default/-/etiket, yanlız etiketinizde Türkçe karakter varsa onu nasıl yapacağınızı bir sonraki yazımda paylaşacağım, blogumu takipte kalın :) Şimdi aşağıdaki adımları uygulayın kodunuz hazırdır. Son bir şey, şimdi bu kodu ekleyince altında Headlines by feedburner diye bir yazı çıkıyor, eğer bu çıkmasın orjinal gibi olsun diyorsanız, şu yazıma gözamanızda fayda var.







Blogger için alternatif site içi arama kodu

Bildiğinizi üzere Blogger'ın site içi arama kutusu istendiği gibi çalışmıyor. Bana göre yazıyı bulmak için yazının adını tam olarak yazmak veya içerdiği bir kelimenin aynısını yazmak gerekiyor ama ziyaretçiden ziyaretçiye bu değişir, yani yazacağı şey yazmak istediği şey.



Bunun kolay bir yolu var, ben nereden bulduğumu da unuttum :) Temanızın kendi arama kutusuna Google Aramasını entegre edeceğiz.



Normalde bir searchbox kodu şöyle birşey olur.



<div id='searchbox'>
<form action='search/' method='get'>
<div class='content'>
<input class='textfield' name='q' size='24' type='text' value=''/>
<input class='button' type='submit' value=''/>
</div>
</form>
</div>


Şimdi bu kısmı aşağıdaki kod ile değiştireceğiz. Öncelikle http://www.furkanozden.blogspot.com/ yazan kısmı kendi sitenizin adresi ile değiştirin.



Aşağıdaki kod:



<form action='http://www.google.com/search' id='searchform' method='get'>
<div id='searchbox'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Arama yapmak için tıklayınız&quot;;}' onfocus='if (this.value == &quot;Arama yapmak için tıklayınız&quot;) {this.value = &quot;&quot;;}' type='text' value='Arama yapmak için tıklayınız'/>
<input alt='Arama' id='searchsubmit' name='sitesearch' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDkMNYlxiaRFTPvi0WF9uxxiNiSe-XOaT-UbJ9RqnDKhIh2xi8BPUlKfXaGJfjuhe7zRMZ7EG7CDqlj-DnlLPsbB5342xHpMRVhApzMtuZiLm_5HGkRZeFAdyLXXpzr6KI-Lcmsry2GT0Q/s1600/search.png' style='margin: 2px 0 0 0;' title='Arama' type='image' value='furkanozden.blogspot.com'/>
</div>
</form>


Burada ben size kendi temamda kendi düzenlediğim kodu verdim mesela method kısmı site kısmı felan kendinize göre değiştirmeniz lazım, kod uydurma yani başka yerde bulamazsınız :) Buradaki koda bakıp kendi kodunuzu düzenleyin. Ben size nasıl birşey yapmanız gerektiğini açıkladım sadece :) Kalın sağlıcakla.

Blogger title ayarları



Blogger Seo açısından güzel bir sistem ama şu yazı başlıkları yok mu ? Adamı deli ediyor :) Aşağıdaki adımları uyguladıktan sonra sizin blogunuzun da title ayarları seo ile uyumlu hale gelmiş olacak.



Blogger sitelerinde normal başlık şu şekildedir.



Site Başlığı: Yazının Başlığı


Google'ın sevdiği başlık tipi



Yazı Başlığı - Site Başlığı


Şimdi bizde aşağıdaki adımları tamamen gerçekleştirdiğimizde Blogger sitemizin başlıklarını SEO bakımından iyi bir konuma getirmiş olacağız.





Blogunuzun HTML Düzenle bölümüne girin. Şablonunuzun hemen başındaki aşağıdaki kodu bulun.



<title><data:blog.pageTitle/></title>


Yukarıda bulduğunuz kodu şu kodla değiştirin.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/>-<data:blog.title/></title>
</b:if>


Kırmızıyla yazdığım kısım Yazı Başlığı - Site Başlığı arasındaki çizgidir (pageName/>-<data:blog). İsteğinize göre farklı şekiller yerleştirebilirsiniz.

Yukarıdaki işlemleri tamamladıktan sonra şablonunuzu kaydedin. İşlemimiz bu kadar kalın sağlıcakla :)

Resimler siteyi açtıkça görünsün LazyLoad



Arkadaşlar bunu blogumu güzelleştirmek için arama yaparken buldum, bu eklentinin faydası bir ziyaretçi sitenize girdiğinde tüm resimlerin yüklenmesini beklemeden sitenizde dolaşmaya başlar, aşağılara indikçe yeni resimler görünür ve o zaman yüklenmeye başlar. Bi nevi siteyi hızlanırıyor diyebiliriz. Şimdi kod kısımlarına geçelim, yapmamız gereken tek şey sitemizin kod kısmında



<head>


kodunu bulup peşine aşağıdaki kodları ekliyoruz.



<script charset='utf-8' src='http://mcdmedya.com/file/kr/jquery.min.js' type='text/javascript'></script>
<script src='http://mcdmedya.com/file/kr/jquery.lazyload.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
$("img").lazyload({
placeholder : "http://mcdmedya.com/file/kr/grey.gif",
effect : "fadeIn"
});
});
</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>


Kodları ekledikten sonra, işin en önemli yanı kodun içerisindeki .js dosyalarını felan yani size ait olmayan hosttaki dosyaları kendi hostunuza alın, gün gelir adam cart diye dosyaları siler sonra n'olcak ? O yüzden sağlama alın rahat edin. Sağlıcakla kalın :)

facebook, twitter, yahoo, Digg — Social media Complete wallpaper — , Mixx, Technorati, orkut, Reddit, Entrecard, StumbleUpon, Friendster, Blogger

Blogger or Blogspot, making photo zoom



FancyZoom 1.1

Update: Version 1.1 released 2/8/08. Good bug fixes + Opera compatibility!

...so I fought back the charging Guanaco, immediately hopped on my paraglider, and basically caught the first flight out of Chile — but not without dealing with some cantankerous customs inspectors while drinking a cool glass of chicha. Really sorry it took so long! But hey, two years later, it's finally done!

Smooth Javascript Image Zooming For Your Web PagesThis much-requested chunk of Javascript to zoom images inline, originally written for this blog but later rolled out to the Panic website and used for screenshots, is now polished up, bug-fixed, available for you to use on your website!

Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom's raison d’être (French for "raisin-determination") is providing a smooth, clean, truly Mac-like effect, almost like it's a function of Safari itself. Since I originally wrote this script, there are now a lot of image zoomers to choose from (including a similar effect now on Apple's own site!), such as the popular (and inspiring) Lightbox. So you might be asking: "Cabel, why use FancyZoom?" Well, here's why!

Focused on the smoothest, most polished zooming animation possible
Automatically scales images from any image link, with no HTML changes
Preloads full-size images in the background on link mouseover
No resource-heavy Javascript libraries — 100% coded from scratch to zoom
Draws a nice drop shadow under the full-size image to offset it from the page
Uses Safari 3's "box-shadow" feature to draw the drop shadow natively, no images required
Requires only two new lines of code in your HTML
Tested and works with Safari, Firefox, IE7, and IE6. (Looks better in modern browsers.)

Since FancyZoom is so easy to add to a web page, I encourage you to give it a try!
InstructionsInstalling FancyZoom on your web pages should be dead simple.


1 Download the FancyZoom package, right here:


FancyZoom 1.1.zip (53 KB)


2 Using Transmit (or your favorite FTP client), upload the two folders inside the package to the root of your webserver.

3Add the following two lines of code to the section at the top of your web page(s):




4Add onload="setupZoom()" inside your page's existing tag. For example:



5Whoah. You're done! The rest is automatic — links to images in your page will automatically zoom the images. For example:

will zoom up image.jpg when clicked.
Additional DetailsThere are a few extra notes that you might find useful.

Want to add a caption? Add a title tag in your href. That's it!

FancyZoom will use the size of the first element in the href to determine the initial size and location of the zoom.

FancyZoom works best if you wrap your href around a thumbnail, but also works from text-only links to images.

FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.

If you're a Javascript hacker, FancyZoom's flexible fadeIn and fadeOut functions can be used for all sorts of fun stuff.

If you explicitly don't want an image to zoom, add a rel="nozoom" tag to your href.
ExampleIt's both an example, and some random pictures from Macworld Expo 2008!



Release NotesVersion 1.1 released 2/8/2008.
Improved Opera compatibility
Fixed an issue that would cause crazy infinite zooming
Improves caption behavior in certain situations
Now returns any alt-clicks and command-clicks back to the browser, for standard behavior (open in new tab, etc.)
LicenseFancyZoom is totally free for your non-commercial website.

In a bit of an experiment: if your website is commercial (i.e. makes you money), you can license FancyZoom for $39 per site, a one-time fee. Instantly add nice image zooming to your site. Click here to instantly and securely buy a license.

EnjoyI hope you and your websites enjoy FancyZoom. If you make any cool changes or improvements, let me know! And if you have awesome feedback, or find weird bugs, drop word in the comments.


PS: Yes, you can even hold shift when you click an image. The Apple tradition continues!