Showing posts sorted by relevance for query Template Gambar. Sort by date Show all posts
Showing posts sorted by relevance for query Template Gambar. Sort by date Show all posts

Friday, October 28, 2016

Struktur Dasar Template Blogspot

Struktur Dasar Template Blogspot
Struktur Dasar Template Blogspot
Bagi File - Struktur Dasar Template Blogspot .

 Selamat datang diblog Bagi File. Pada postingan kali ini admin akan share tentang Struktur Dasar Template Blogspot. Jadi yang pengen membuat template blogspot sendiri anda bisa memulainya dengan mempelajari Struktur Dasar Template Blogspot terlebih dahulu. Tapi ingat jika anda ingin membuat template blog ada baiknya jika anda memahami sedikit tentang Javascript, CSS dan HTML.

Bisa dilihat pada gambar seperti itulah Gambaran struktur kode-nya

Keterangan :
  • Body: block paling lebar, body ini yang menampung seluruh konten dari blog atau website.
  • Outer-wrapper: kotak ini melapisi bagian template (Body lebih mirip bagian luar template), jadi kebanyakan pada umumnya outer wrapper ini sebagai wadah header, sidebar, main-wrapper dan juga footer.
  • Header: Kotak ini adalah bagian teratas dari blog mungkin dari namanya sudah bisa kita tebak dari sebuah header ini. Biasanya header ditempati oleh judul-deskripsi  blog, logo, dan juga kebanyakan dibawahnya ditempai oleh Navigasi Menu.
  • Sidebar : Block ini digunakan sebagai wadah widget blog atau aksesoris misalnya  About me, Link list, gambar slide, dan juga widget-widget lainnya
  • Main: Main-wrapper yaitu sebuah block atau kolom dalam yang paling lebar, dalam block ini juga masih menampung seperti Judul Post, Post konten, kotak komentar dan juga keterangan lainnya mengenai artikel atau posting blog.
  • Footer: adalah kotak paling bawah dari sebuah template. Seperti bagian header namun terletak dibagian bawah biasanya footer ini ditempati sebuah tautan dan juga teks keterangan hak cipta.
Nah untuk struktur kodenya sendiri menggunakan bahasa pemrograman XHTML (Extended Hyper Text Markup Language) jika anda ingin melihat susunan kodenya kurang lebih akan seperti dibawah :
<html> <--- tag pembuka untuk html

           <head> <--- tag pembuka untuk head
     
                 Disini letak dari CSS atau juga Javascript

           </head> <--- tag penutup untuk head

           <body> <--- tag pembuka untuk body
     
                Disini tempat yang akan ditampilkan yaitu HTML dan juga bisa Javascript

          </body> <--- tag penutup untuk body

    </html> <--- tag penutup untuk html
Berikut ini ada penjelasan singkat tentang kode-kode diatas :

1. HTML : <HTML></HTML>
  • Sebuah template Blog/Website selalu diawali dengan tag pembuka <html> dan harus diakhiri tag penutup </html>
  • Diantara tag inilah tag-tag atau struktur lainnya diletakkan yang akan menciptakan sebuah tampilan blog/website.
2. HEAD : <HEAD></HEAD>
  • Tepat setelah  <head>  biasanya diletakkan kode tag pengenal mulai dari tag title/judul, deskripsi, keywords dan tag-tag pengenal lainnya.
  • Diantara kode ini harus diletakkan sebuah kode CSS yang akan menampilkan sebuah tampilan model atau karakter dari template itu sendiri.
  • Sebelum kode tag penutup </head>  biasanya ditambahkan sebuah kode Javascript untuk sekedar menambahkan fitur-fitur menggunakan kode Javascript.
3. BODY : <BODY></BODY>
  • Tag body merupakan yang paling utama pada sebuah template Blog/Website karena ini akan menampung dan menampilkan semua konten blog/website itu sendiri.
  •  Pada bagian tag ini masih terbagi dalam 4 struktur penting lagi yaitu Header, Sidebar, Content dan juga Footer, di atas sudah saya jelaskan tentang struktur ini.
Jika anda sudah memahami penjelasan diatas silahkan anda cari ilmu yang lebih dalam lagi dibidang Javascript dan CSS Gampang kok cara nyari ilmu diinternet anda tinggal join keforum-forum blogger pasti banyak kok orang yang bisa membantu anda. Terima kasih telah berkunjung diblog Bagi File ... !!

Monday, October 24, 2016

MODISH Responsive Template Blogger

MODISH Responsive Template Blogger
MODISH Responsive Template Blogger
Bagi File - MODISH Responsive Template Blogger , Sebuah template keren dari Sora Template ini memang sangat cocok digunakan untuk blog Berita, Tutorial, atau Majalah. Dari Gambar diatas saja menunjukkan bahwa template ini 100% Responsif yang artinya google bakalan ngeindeks blog anda lebih cepat..!!

Fitur Blog :
- Fast Loading
- 100% Responsive Design
- SEO Accelerated
- Slot Iklan udah Siap
- Tombol Share
- Featured Posting

Masih kurang puas dengan Template blog yang ini ? Coba Cek : Galeri Template BGFILE

Link Download : MODISH Responsive Template Blogger .

Gimana sobat udah download aja ngak nyesel lu pastinya !! Jangan lupa cek Galeri Template blog ini yah sobat , Terima kasih banyak telah berkunjung dan mendownload template dari blog ini !! Sekian dulu untuk postinga kali ini Assalamualaikum wr.wb. ..!!

#TemplateBlogger #BagiFile #Bagifilex.blogspot.co.id #ResponsifTemplateBlogger #SEOFriendly

Monday, March 6, 2017

Download Gravity Responsive Blogger Template

Gravity Responsive Blogger Template , Sebuah template magazine yang sangat cocok untuk Blog Movie ataupun Majalah Online. Template blog yang satu ini bersifat Responsive dan Sudah Seo Ready jadi anda tinggal melakukan pengeditan pada struktur kodenya sedikit agar seo makin mantap, Pada gambar sangat jelaskan bahwa template yang satu ini benar-benar 100%Responsive dan simple.

Download Gravity Responsive Blogger Template
Download Gravity Responsive Blogger Template
  • DEMO : https://gravitytemplate.blogspot.com/
  • DOWNLOAD
Terima kasih banyak telah berkunjung dan menengok koleksi Template Blogger blog Bagi File (https://bagifilex.blogspot.co.id) , Janga lupa cek Template Blogger keren lainnya dan yang pasti sudah Responsive dan Seo Ready. Salam jaya dan sampai jumpa dipostingan selanjutnya.

#Download Gravity Responsive Blogger Template #Bagifilex #Bagifilex.blogspot.co.id

Tuesday, March 7, 2017

Cara Buat Breadcrumb Seo Friendly di Blog

Breadcrumb navigation adalah sebuah menu yang dipakai untuk navigasi halaman sebuah website atau blog, sehingga akan memudahkan visitor atau pembaca untuk me-navigasi halaman blog atau website sobat. Dalam SEO, pemasangan breadcrumb adalah wajib yang sangat berguna untuk mempermudah seacrh engine untuk menjelajah atau crawling halaman blog sobat sehingga blog akan menjadi SEO friendly dan disenangi oleh search engine bot, dan juga blog sobat akan cepat ter-index oleh search engine ( Google khususnya )

Cara Buat Breadcrumb Seo Friendly di Blog
Cara Buat Breadcrumb Seo Friendly di Blog
Gambar diatas adalah contoh breadcrumb navigation yang saya ambil dari screenshot blog saya ini, kebetulan judul post-nya waktu itu adalah tentang burung twitter terbang, untuk membuat dan memasang breadcrumb saya kira tidak begitu sulit jadi sobat bisa membuat nya dengan tutorial blogger yang saya berikan berikut ini:

Cara Membuat Navigasi Breadcrumb Seo Friendly di Blogspot

  • Login di Blogger
  • Pilih Design 
  • Pilih Edit Html
  • Centang pada Expand Widget Templates
  • Cari kode ]]></b:skin>
  • Copy paste kode dibawah ini tepat diatas kode ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

  • Kemudian cari kode seperti di bawah ini
<div class='post hentry uncustomized-post-template'>
Kalau kode diatas tidak ada, coba sobat cari kode yang seperti dibawah ini
<div class='post hentry'>

  • Letakkan kode dibawah ini tepat diatas salah satu kode biru diatas
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag,nofollow'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

  • Klik save dan sobat sudah berhasil membuat Breadcrumb yang SEO friendly
Terima kasih banyak telah berkunjung pada blog Bagi File (https://bagifilex.blogspot.co.id) , Jangan lupa cek artikel menarik lainnya hanya disini yah kawan !! Sekian dulu dan sampai jumpa pada postingan berikutnya