Blogger İçin Codepen Kullanımı

Ağustos 03, 2015
Blogger Codepen Kod Okuyucusu Ekleme

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?

Blogger-Codepen

Ü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.

Blogger Codepen Kod Okuyucusu Ekleme

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

Blogger İçin Codepen Kullanımı

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

Blogger İçin Codepen Kullanımı

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

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

0 Yorum

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔