Home Posts filed under Search results for Template Html
Showing posts sorted by relevance for query Template Html. Sort by date Show all posts
Showing posts sorted by relevance for query Template Html. Sort by date Show all posts

Friday, October 28, 2016

Struktur Dasar Template Blogspot

Waktu :
Kategori : ,
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 ... !!

Thursday, March 9, 2017

Cara Sticky 3 Widget Sidebar di Blogspot/Blogger

Waktu :
Kategori :
Cara Sticky 3 Widget Sidebar di Blogspot/Blogger - Fitur sticky widget ternyata tidak hanya tersedia pada situs yang full customizable seperti wordpress, pada blogspot pun kita dapat membuat sticky widget sidebar. Bukan hanya 1 widget sidebar saja yang dapat di sticky, tapi juga lebih dari 2 widget sidebar. Saya tahu anda sedang mencari cara sticky 3 (tiga) widget sidebar di blogspot / blogger, maka dari itu saya akan memberitahu anda bagaimana caranya. Sebenarnya caranya tidak berbeda jauh dengan cara sticky 1 widget sidebar atau Cara Sticky 2 Widget Sidebar di Blogspot/Blogger.

Sticky widget sidebar sering digunakan pada artikel/post yang sangat panjang dan membuat widget penting tidak terlihat jika di-scroll ke bawah. Kegunaan lain dari sticky wisget sidebar adalah membuat iklan yang terpasang pada sidebar dapat selalu terlihat oleh visitor. Tidak hanya itu, sticky widget sidebar juga dapat digunakan untuk menambah jumlah pageview user. Sticky widget arsip, label, kategori, popular post akan menambah jumlah pageview posting. Widget sidebar akan selalu terlihat oleh visitor anda jika di-sticky. Baiklah sekarang kita mulai membahas bagaimana cara sticky 3 widget sidebar di Blogspot/Blogger.

Cara Sticky 3 Widget Sidebar di Blogspot/Blogger
Cara Sticky 3 Widget Sidebar di Blogspot/Blogger

Cara Sticky 3 (tiga) Widget Sidebar di Blogspot/Blogger

Sebelum memulai edit template ada 4 hal penting yang harus anda perhatikan, karena ada kode dan value yang harus diganti menyesuaikan dengan kode ID tiga widget yang ingin anda sticky. Jarak antar satu widget dengan widget lainnya pun dapat anda atur dan customize sesuka dengan keinginan anda.

1. Menambahkan kode CSS pada Edit HTML Template Blogspot
2. Menambahkan kode JavaScript pada Edit HTML Template Blogspot
3. Merubah kode ID Widget Sidebar pada Edit HTML Template Blogspot
4. Mengubah Jarak Sticky Widget Sidebar pada Edit HTML Template Blogspot

1. Menambahkan kode CSS pada Edit HTML Template Blogspot

  • Login ke akun Blogspot/Blogger anda
  • Klik Opsi Template > Edit HTML
  • Silahkan copy kode CSS di bawah ini dan paste-kan di atas ]]></b:skin>
.sticky1 {position:fixed;top:10px;/* jarak widget ke-1 dari atas*/z-index: 100;}
.sticky2 {position:fixed;top:120px;/* jarak widget ke-2 dari atas*/z-index: 100;}
.sticky3 {position:fixed;top:230px;/* jarak widget ke-3 dari atas*/z-index: 100;}

2. Menambahkan kode JavaScript pada Edit HTML Template Blogspot

Copy dan Paste semua kode ini di atas </body>



<script type='text/javascript'>$(document).ready(function() {var stickyWidgetTop = $('#HTML5').offset().top; var stickyWidget = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyWidgetTop) {     $('#HTML5').addClass('sticky1');} else {    $('#HTML5').removeClass('sticky1'); }};stickyWidget();$(window).scroll(function() {    stickyWidget();});});</script>
<script type='text/javascript'>$(document).ready(function() {var stickyWidgetTop = $('#HTML6').offset().top; var stickyWidget = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyWidgetTop) {     $('#HTML6').addClass('sticky2');} else {    $('#HTML6').removeClass('sticky2'); }};stickyWidget();$(window).scroll(function() {    stickyWidget();});});</script>
<script type='text/javascript'>$(document).ready(function() {var stickyWidgetTop = $('#HTML7').offset().top; var stickyWidget = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyWidgetTop) {     $('#HTML7').addClass('sticky3');} else {    $('#HTML7').removeClass('sticky3'); }};stickyWidget();$(window).scroll(function() {    stickyWidget();});});</script>

3. Merubah kode ID Widget Sidebar pada Edit HTML Template Blogspot

  • Perhatikan kode javascript "Kode Sticky 1" terdapat kode ID Widget "HTML5". Ganti ketiga tulisan "HTML5" dengan kode ID Widget Sidebar yang ingin anda sticky.
  • Lakukan hal yang sama pada Kode Sticky 2. Perhatikan kode javascript "Kode Sticky 2" terdapat kode ID Widget "HTML6". Ganti ketiga tulisan "HTML6" dengan kode ID Widget Sidebar yang ingin anda sticky.
  • Pada Kode Sticky 3 rubah juga tulisan "HTML7" dengan kode ID Widget Sidebar yang akan anda sticky.

4. Mengubah Jarak Sticky Widget Sidebar pada Edit HTML Template Blogspot

  • Jarak widget ke-1 dari atas. Perhatikan kode CSS. Ganti nilai dari "jarak widget ke-1 dari atas" tepatnya pada kode top:10px;/* jarak widget ke-1 dari atas*/, silahkan anda ganti nilainya sesuka anda, bisa 10px, 15px, 20px atau berapapun.
  • Jarak widget ke-2 dari atas. Perhatikan kode CSS tepatnya pada kode "top:120px;/* jarak widget ke-2 dari atas*/. Rumusnya adalah "jarak widget ke-1 dari atas" + tinggi/width widget + jarak widget ke-1 dan ke-2 + 10px
  • Jarak widget ke-3 dari atas. Lihat code CSS, tepatnya pada kode top:230px;/* jarak widget ke-3 dari atas*/. Rumusnya adalah Jarak widget ke-1 dari atas + tinggi/width widget ke-1 + jarak widget ke-1 & ke-2 + tinggi/width widget ke-2 + jarak widget ke-2 dan ke-3 + 10px
Terima kasih telah membaca artikel Cara Sticky 3 Widget Sidebar di Blogspot/Blogger. Semoga dengan sticky widget sidebar blog anda menjadi semakin nyaman untuk dijelajahi. Untuk mendapatkan artikel-artikel tutorial, tips, trik blogspot terbaru lainnya tetap kunjungi Bagifilex.blogspot.co.id.

Cara Sticky 2 Widget Sidebar di Blogspot/Blogger

Waktu :
Kategori :
Cara Sticky 2 Widget Sidebar di Blogspot/Blogger - Sticky 1 widget sidebar blogspot sudah banyak yang memberikan tips, trik dan tutorialnya, tapi bagaimana cara sticky dua widget sidebar blogspot akan saya share kepada anda. Pengertian Sticky menurut Bahasa Indonesia artinya adalah menempel. Dalam istilah dunia blog dan website, Sticky adalah statis muncul di halaman browser, berada di depan atau selalu tetap terlihat mengikuti walaupun mouse komputer terus di scroll ke bawah. Sedangkan Sticky Widget Sidebar Blogspot berarti membuat widget sidebar blogspot yang selalu terlihat walaupun mouse kita scroll ke bagian bawah blog atau website.

Untuk melihat DEMO Sticky 2 Widget Sidebar di Blogspot/Blogger, silahkan scroll ke bawah dan lihat ke bagian kanan atau sidebar blog ini. Anda akan melihat beberapa widget yang selalu muncul terlihat mengikuti, jadi itulah yang disebut 'Sticky Widget Sidebar Blogspot'. Coba lihat lagi sidebar blog ini, anda akan melihat lebih dari 2 widget sidebar blogspot tidak bergerak atau statis diam terlihat pada layar komputer atau laptop anda jika mouse di-scroll ke bawah. Sekarang saya asumsikan anda sudah mengerti tentang maksud Sticky Widget Sidebar Blogspot dimana widget sidebar blogspot selalu tidak bergerak dan terlihat terus menerus di browser. Karena tips ini sangat pentig maka pada kesempatan selanjutnya, saya akan share Cara Sticky lebih dari 2 Widget Sidebar di Blogspot/Blogger, Cara Sticky 3 Widget Sidebar di Blogspot/Blogger, dan Cara Sticky 4 Widget Sidebar di Blogspot/Blogger.

Cara Sticky 2 Widget Sidebar di Blogspot/Blogger
Cara Sticky 2 Widget Sidebar di Blogspot/Blogger

Apa saja keuntungan dengan penggunaan sticky widget sidebar yang harus anda ketahui, antara lain jika widget sidebar yang di-sticky adalah widget iklan adsense, maka jumlah CTR akan meningkat drastis sehingga pendapatan anda tentu akan meningkat. Selain itu, sticky widget sidebar pada widget related post juga dapat meningkatkan jumlah pageview blog anda sehingga jumlah presentase bounce rate akan turun.

Baiklah sekarang kita mulai untuk membahas cara membuat sticky dua widget sidebar di blogspot/blogger. Untuk membuat Sticky widget sidebar blogspot ini, ada 4 langkah mudah yang harus kita lakukan, silahkan ikuti satu persatu langkah di bawah ini.

Cara Sticky 2 (dua) Widget Sidebar di Blogspot/Blogger

Sebelum memulai edit template ada 4 hal yang harus anda perhatikan, karena ada kode dan value yang harus ganti menyesuaikan dengan kode ID dua widget yang ingin anda sticky. Jarak antar 2 widget pun dapat anda atur dan customize sesuka hati anda.

1. Menambahkan kode CSS pada Edit HTML Template Blogspot
2. Menambahkan kode JavaScript pada Edit HTML Template Blogspot
3. Mengganti kode ID Widget Sidebar pada Edit HTML Template Blogspot
4. Mengganti Jarak Sticky Widget Sidebar pada Edit HTML Template Blogspot

1. Menambahkan kode CSS pada Edit HTML Template Blogspot


  • Login ke akun Blogspot/Blogger
  • Klik Opsi Template > Edit HTML
  • Silahkan copy kode CSS di bawah ini dan paste-kan di atas ]]></b:skin>

.sticky1 {position:fixed;top:10px;/* jarak widget ke-1 dari atas*/z-index: 100;}
.sticky2 {position:fixed;top:120px;/* jarak widget ke-2 dari atas*/z-index: 100;}

2. Menambahkan kode JavaScript pada Edit HTML Template Blogspot

Copy dan Paste semua kode ini di atas </body>



<script type='text/javascript'>$(document).ready(function() {var stickyWidgetTop = $('#HTML5').offset().top; var stickyWidget = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyWidgetTop) {     $('#HTML5').addClass('sticky1');} else {    $('#HTML5').removeClass('sticky1'); }};stickyWidget();$(window).scroll(function() {    stickyWidget();});});</script>
<script type='text/javascript'>$(document).ready(function() {var stickyWidgetTop = $('#HTML6').offset().top; var stickyWidget = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyWidgetTop) {     $('#HTML6').addClass('sticky2');} else {    $('#HTML6').removeClass('sticky2'); }};stickyWidget();$(window).scroll(function() {    stickyWidget();});});</script>

3. Mengganti kode ID Widget Sidebar pada Edit HTML Template Blogspot

  • Perhatikan kode javascript "Kode Sticky 1" terdapat kode ID Widget "HTML5". Ganti ketiga tulisan "HTML5" dengan kode ID Widget Sidebar yang ingin anda sticky.
  • Lakukan hal yang sama pada Kode Sticky 2. Perhatikan kode javascript "Kode Sticky 2" terdapat kode ID Widget "HTML6". Ganti ketiga tulisan "HTML6" dengan kode ID Widget Sidebar yang ingin anda sticky.

4. Mengganti Jarak Sticky Widget Sidebar pada Edit HTML Template Blogspot

  • Jarak widget ke-1 dari atas. Perhatikan kode CSS. Ganti nilai dari "jarak widget ke-1 dari atas" tepatnya pada kode top:10px;/* jarak widget ke-1 dari atas*/, silahkan anda ganti nilainya sesuka anda, bisa 10px, 15px, 20px atau berapapun.
  • Jarak widget ke-2 dari atas. Perhatikan kode CSS tepatnya pada kode "top:120px;/* jarak widget ke-2 dari atas*/. Rumusnya adalah "jarak widget ke-1 dari atas" + tinggi/width widget + jarak widget ke-1 dan ke-2 + 10px
Terima kasih telah membaca artikel Cara Sticky 2 Widget Sidebar di Blogspot/Blogger. Semoga dengan sticky widget sidebar blog anda menjadi semakin menarik. Untuk mendapatkan artikel-artikel tutorial, tips, trik blogspot terbaru lainnya tetap kunjungi Bagifilex.blogspot.co.id .

Tuesday, March 7, 2017

Cara Buat Tombol Back To Top di Blogspot

Waktu :
Kategori :
Cara membuat/memasang tombol back to top/go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali´pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini
Cara Buat Tombol Back To Top di Blogspot
Cara Buat Tombol Back To Top di Blogspot
Fitur back to top yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek back to top ini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan ikuti tips & tricks blogger berikut.

Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

  • Silahkan login di Blogger
  • Pilih Template > Edit HTML > klik Expand Widget Template
  • Cari kode </body>  (gunakan CTRL+F)
  • Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
  • Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas
<script src='https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC52WLs324C_ay-fg7Jg4DB3PfiZP5_pDA1E9q0Uj2saaa6vxn-2se1ber7fYuBLUQBlfl2zXZYRdtzT6fOYT_7xwNboQIWgfGdpk1GcqLmcqKWyUa-vraCrgxj2gwAYChlacWfFnLqxQ/s1600/back-to-top.gif'/></a>
  • Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai
Gimana Berhasil ngak kawan ? kalau iya saya ucapkan Alhamdulillah kalau gagal saya minta maaf tapi trik ini sih saya rasa 100% work jadi jika ada kesalahan harap periksa dulu penulisan kode yang anda isikan pada kolom konten yah.

#Cara Buat Tombol Back To Top di Blogspot #Bagifile #Bagifilex.blogspot.co.id

Cara Buat Breadcrumb Seo Friendly di Blog

Waktu :
Kategori :
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
Subscribe to: Posts (Atom)