Blogger İçin Codepen Kullanımı

Blogger Codepen Kod Okuyucusu Ekleme. Kod oyucu HTML, CSS, Jawascript gibi kodları okuyan bir programdır.

Sizde benim gibi blogger bloglar için içerik üreten biriyseniz codepen kod oyucu işinize çok yarayacaktır. Peki codepen ne işe yarar, codepen nasıl kullanılır? Mesela blogunuzda bir eklenti paylaşıyorsunuz diyelim bu eklentinin html ve css kodları var bu kodları codepen ekranında gerekli yerlere yazıyorsunuz ve bu sayede eklentinizin kodlarını başka kod kutusuna falan gerek kalmadan hem paylaşmış oluyorsunuz hem de eklentinizin önizlemesini demo blog kullanmadan yazı sayfanızda göstermiş oluyorsunuz.

Codepen kod okuyucusu blogger kod paylaşım kutusu yerine kullanılabilmesi ve önizleme blogunun yerini alması açısından iyi bir program.

Codepen'e nasıl kullanılır?

Codepen kod okucu programını online kullanıyorsunuz. Bunun için Codepen'in kendi sitesine gidiyoruz ve üye oluyoruz.

Codepen'e nasıl üye olunur?

Öncelikle www.codepen.io tıklayarak siteye gidiyoruz.

Sağ üst köşede Sign Up butonuna tıklayarak üyelik seçeneğimize tıklıyoruz. Ücretsiz üyelik için sayfanın altında Free Plan seçeneğine tıklıyoruz.

İsmini, kullanıcı adınızı, şifrenizi ve mail adresini yazarak üye oluyorsunuz.

Artık sizinde codepen sitesinde bir hesabınız var.

Codepen'da kod paylaşımı nasıl olur?

Üyeliğinizi yaptıysanız hesabınıza giriş yapın ve New Pen butonuna basın. karşınıza aşağıdaki gibi bir ekran gelecek.

Kırmızıyla işaretlediğim alanlara eklentinizin kodlarını yazacaksınız ve hemen altında önizlemesini göreceksiniz.

Save butonuna basıp kaydettikten sonra share butonuna basıp embed kodlarımızı alıyoruz.

Kırmızıya aldığım kutu içinden embed kodlarımızı kopyalıyoruz yalnız dikkat edin iframe seçeneği var onu işaretleyip alıyoruz ve yazı sayfamızda HTML kısmına kodlarımızı yapıştırıyoruz. Aşağıdaki gibi olacak eklenti.

Blogger blogunuza codepen eklemek ve codepen kullanımı aslında çok basit. Ben biraz yardımcı olmaya çalıştım umarım faydalı olmuşumdur. Codepenle ilgili sorularınızı yorumdan sorabilirsiniz. İyi bloglamalar. Takip et :)

http://blogbakkali.blogspot.com.tr/2015/08/blogger-codepen-kullanimi-ekleme.html