Tampilkan postingan dengan label tutorialKhusus. Tampilkan semua postingan
Tampilkan postingan dengan label tutorialKhusus. Tampilkan semua postingan

CARA DOWNLOAD DAN PASANG TEMPLATE REDESAIN EDITBLOGTEMA

Tidak ada komentar

September 13, 2020

Kalian perhatikan navbar (Navigasi menu) di atas halaman editblogtema (Dibawah Judul Blog). Navbar itu berisikan menu yang membantu pengunjung atau berfungsi sebagai navigasi mengeksplorasi halaman blog ini. Untuk tahap ini kami hanya menyediakan template hasil redesain template default blogger yang dapat dipergunakan secara gratis. Dan dapat juga untuk kalian modifikasi lebih jauh. Cara mengedit template telah kami sediakan cukup banyak di dalam di dalam halaman ini. Misalnya kalian bisa memilih 'Tutorial dan Panduan' untuk mencari panduan yang sesuai, atau jika tidak silahkan bertanya pada kolom komentar di bawah halaman ini.

1. CARA MENDOWNLOAD TEMPLATE RE-DESAIN.
Klik atau sentuh Menu 'Download' di atas halaman akan muncul menu dropdown 'template' dan akan muncul dropdwon yang menampilkan 6 template yang dapat kalian pilih: Soho, Emporio, Contempo, Notable, Reward Theme, dan Masonry.
navbar editblogtema
Misalkan kalian memilih salah satu template yakni 'Masonry' maka klik saja 'Masonry'. Ia akan membawa kalian ke halaman download. Jika diminta prosedur izin akses silahkan ikuti saja, bagaimanapun kami harus memastikan setiap request dilakukan dengan aman, sesuai prosedur Google.
halaman download
Pada pojok kiri atas (ditunjuk oleh panah merah) ada tombol panah download kecil menghadap ke bawah berwarna putih, silahkan di klik itu untuk mendownload dan simpan hasil download tersebut ke dalam folder yang mudah di ingat. Sebenarnya bisa juga dengan cara mengcopy habis seluruh kode tapi cara ini jika tidak dilakukan dengan teliti akan mengkopy kalimat lain diluar kode HTML dan ketika di terapkan timbul error. Jadi sebaiknya lakukan download dan simpan di folder yang mudah di ingat.

2. CARA MEMASANG TEMPLATE HASIL DOWNLOAD
Sekarang buka pengaturan blogger pilih 'Tema' atau 'Theme' kalau setting dasbor kalian berbahasa Inggris.
Klik dan disebelah kanan akan muncul menu 'CUSTOMISE' dan Mata Panah menghadap kebawah, Jangan klik customise tapi pilih klik Mata Panah yang menghadap ke bawah.
pilih mata panah menghadap kebawah
Akan muncul beberapa menu, pilih menu pertama atau menu 'BackUp' jika itu dipilih kalian tinggal mengarahkannya ke folder tempat menyimpan template hasil download tadi. Pilih dan terapkan, (open/buka).

Tunggu sampai mendapat notifikasi bahwa pemasangan telah selesai.

3. LAIN LAIN
Setelah pemasangan selesai mngkin kalian harus pergi lagi ke tataletak dasbor blogger, untuk menambah widget yang diperlukan atau menghapus widget yang tidak diperlukan, mengedit menu navigasi dll. Petunjuknya juga telah kami posting di halaman blog ini. Atau silahkan bertanya langsung jika mendapatkan kesulitan melalui kolom komentar di bawah ini.

Itu simpel dan mudah. Selamat mencoba.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

SHARE YA:

Cara merombak template blogger contempo 1

2 komentar

Agustus 12, 2020

Pada kesempatan pertama ini saya ingin berbagi trik dasar merombak tampilan sekaligus meningkatkan performa empat varian template blogger terbaru. Empat varian terbaru template blogger (2017-sampai sekarang)  adalah:

cara merombak template terbaru blogger

  1. Contempo
  2. Soho
  3. Emporio
  4. Notable
Sedangkan 7 varian template blogger lama  (2008-2017) adalah:
  1. Simple
  2.  Dinamic
  3. Picture window
  4. Awesome inc. 
  5. Watermark
  6. Ethereal
  7. Travel
Perbedaan:
  1. Template versi baru responsif dan mobile friendly - template lama tidak, kecuali jika di desain ulang. 
  2. Template terbaru sudah mengusung gaya desain aliran tertentu misal: contempo beraliran indie, soho beraliran fancy,  emporio menganut aliran vegea,  dan notable mengikuti aliran desain bergaya rockpool. 
  3. 4 varian Template terbaru sudah dilengkapi dengan ikon svg bawaan yang walau terbatas namun cepat tidak menghambat kecepatan loading halaman web. Misalnya menuIcon, shareIcon, closeIcon dll. Sedangkan template lama tidak. 


Trik mudah merobah tampilan template contempo

a. Header. 
Template Contempo memiliki tinggi header yang dapat di ejas melalui pengaturan pada dasbor blogger. Akan tetapi pengaturan tersebut hanya sampai batas paling kecil: 100px. Tampilan header tetap melewati batas latar headernya. Bagaimana tidak? Karena pengaturan CSS groupnya adalah sebagai berikut:
<Group description="Backgrounds">
<Variable name="body.background.height" description="Background height"
type="length"
min="420px"
max="640px"
default="480px" value="480px"/>

<Variable name="body.background" description="Background"
color="$(body.background.color)"
type="background"
default="$(color) none repeat scroll top left" value="$(color) url(https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw) no-repeat scroll top center /* Credit: Michael Elkan (http://www.offset.com/photos/394244) */;"/>
<Variable name="body.background.color" description="Body background color"
type="color"
default="#eee" value="#eeeeee"/>
<Variable name="posts.background.color" description="Post background color"
type="color"
default="#fff" value="#ffffff"/>
<Variable name="body.background.blur" description="Background blur"
type="length"
min="0px"
max="50px"
default="0px" value="0px"/>
</Group>
Jika kalian ingin batas tersebut tidak melewati latar header atau sejajar dengan latar, kalian harus merombak ukurannya melalui pengaturan CSS,  dan tampaknya hanya dapat dilakukan melalui halaman editor HTML. Kalian harus menemukan kode di atas dan merobah angka yang kami beri warna merah dengan menjadi:
min="100px"
max="640px"
default="480px" value="100px"/>
Caranya masuk ke pengaturan blogger, pilih tema, lalu pilih edit HTML (dasbor blogger baru)

Kemudian Save template

b.  Ikon 

Template Blogger terbaru menggunakan model ikon SVG versi blogger itu sendiri. Inilah salah satu hal yang membedakannya dengan template blogger yang lebih lama. Dengan memiliki ikon ikon ini paling tidak kita tidak memerlukan ikon ikon pihak ketiga seperti ikon ikonnya font awesome.

Ikon svg pada Blogger dapat di ganti atau di robah. Misalnya jika kalian tidak menginginkan ikon backArrowIcon dan ingin mengganti tampilannya menjadi closeIcon
icon backArrow blogger default

Perhatikan contoh:
<b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
Kita dapat merobah ikon tersebut dengan merobah tulisan warna merah:

<b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='closeIcon'/>
Ikon tersebut berada pada sidebar untuk menutup sidebar tersebut, atau berada di header bagian halaman postingan dan jika kita merobahnya seperti instruksi di atas maka ikon tanda anah menghadapat ke kiri (🔙) akan berubah menjadi ikon close (⨲) walau sangat terbatas, template blogger terbaru memiliki sejumlah kecil ikon bawaan (default) yang dapat kita pergunakan, yakni:

  1. menuIcon ()
  2. emailIcon (📧)
  3. commentIcon (💬)
  4. flatbloggerIcon
  5. closeIcon (❌)
  6. backArrowIcon (🔙)
  7. chevronDownIcon
  8. chevronUpIcon
  9. facebookIcon
  10. forwardArrowIcon
  11. linkIcon
  12. pinterestIcon
  13. searchIcon
  14. shareIcon
  15. svgIcon
  16. twitterIcon
  17. verticalMoreIcon
  18. sharingOtherIcon
  19. defaultAvatarIcon
Adapun jenis ikon ikon tersebut yang pada telah di terapkan ke dalam 4 varian template blogger terbaru adalah:

menuIcon, backArrowIcon, svgIcon, shareIcon, emailIcon, dan searchIcon. dll.

C.  Pengaturan tampilan pagelist. 

Pagelist dapat dijadikan sebagai pengganti navbar untuk navigasi menu blogger, namun agar membuatnya lebih stylish dan beda dengan tampilan aslinya kalian harus merombak penngaturan CSSnya.

Jadi kita harus masuk ke pengaturan blogger pilih tema, pilih sesuaikan, kemudian cari menu 'Tambahkan CSS, dan pada blanko CSS tersebut silahkan masukan kode overrade CSS berikut:
.blog-name .PageList{
background: transparent;
border-top:double; border-color: #fff;
border-bottom:double; border-color: #fff;
margin-top:1px;
padding-top:0px;
text-align:center
}
.blog-name .PageList .overflowable-contents{
width:90%
}
.blog-name .PageList h3.title{
color:$(blog.title.color);
margin:8px auto;
text-align:center;
width:100%
}
Save template.

Itu belum selesai sampai kalian ketemu kode berikut di dalam halaman editor HTML, silahkan masuk kepengaturan blogger dan pilih tema lalu pilih opsi edit HTML, cari kode berikut, terdapat dua kode yang sama pada template contempo, pilih yang kedua:

<a><data:messages.moreEllipsis/></a>

Hapus kode tersebut dan ganti dengan kode berikut:

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>

Kemudian Save template.

d. Menambahkan sidebar menu pada sidebar blog. 

Jika kalian lebih suka tampilan minimalis dan ingin agar tampilan navigasi menu pada bagian sidebar, maka kalian dapat menyembunyikannya dan menampilkannya dengan cara mengklik ikon menu pada bagian homepage blogger contempo. Caranya:
  1. Masuk ke pengaturan dasbor blogger
  2. Pilih tata-letak atau layout
  3. Pilih layout bilah sisi nomor dua dari atas dan klik tambahkan gagdet/widget
  4. Pilih tambahkan HTML/Javascript.
Pada blanko kosong HTML/Javascript kosong yang muncul pastekan saja kode berikut:
<style>
body {
font-family: &quot;Lato&quot;, sans-serif;
}

/* Fixed sidenav, full height */
.sidenav {
height: 100%;
width: 300px;
position: relative;
z-index: 1;
top: 0;
left: 0;
background-color: transparent;
border-radius: 1%;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a, .dropdown-btn {
padding: 6px 18px 6px 18px;
text-decoration: none;
font-size: 20px;
color: #FFFFFF;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}


/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color:purple;
}

/* Main content */
.main {
margin-left: 2px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
background-color: pink;
color: white;
}
.dropdown-container {
display: none;
background-color: indigo;
padding-right: 0px;
}

.fa-caret-down {
float: right;
padding-left: 10px;
}
/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

</style>
<div class="sidenav">
<a href="#privasi">Privasi</a>
<a href="#services">Servis</a>
<a href="#clients">Klien</a>
<a href="#contact">Disclaimer</a>
<button class="dropdown-btn">JENIS TEMPLATE:
<svg style="width:24px;height:24px" viewbox="0 0 24 24">
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</path></svg>
</button>
<div class="dropdown-container">
<a href="#">Contempo</a>
<a href="#">Soho</a>
<a href="#">Emporio</a>
<a href="#">Notable</a>
<a href="#">Masonry</a>
</div>
<a href="https://youtu.be/ShZuW2uWXhY">Demo Video</a>
</div>
<script>
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>

E. Gambar profile penulis di atas setiap postingan

Trik ini kami muat pada postingan dengan Judul:

Silahkan ikuti karena trik tersebut berlaku untuk semua template terbaru kecuali notable tidak perlu karena sudah memiliki fitur bawaan avatar atau gambar penulis di atas setiap postingan.

Pada tutorial selanjutnya saya akan menunjukan trik yang lebih seru tentang bagaimana:

2. Trik mudah merombak tampilan dan meningkatkan performa template soho
3. Trik mudah merombak tampilan dan meningkatkan performa template emporio
4. Trik mudah merombak tampilan dan meningkatkan performa template notable


Ikuti terus trik, tips, teknik hack dan kefabar terupdate dari blog ini! Share:

(Bersambung)

SHARE YA:

untuk template blogger
Bicara template memiliki sejarah tersendiri. Sejarah adalah jejak dan catatan di dalam waktu, dan di dalamnya ada buah karya mendasar dari para desainer template blog. Tapi yang akan kita bahas disini adalah bagaimana  ujud dari template template tersebut menurut versinya masing masing. Mari kita mulai.

Sepanjang sejarahnya blogger telah memiliki 3 jenis layout template blogger, apa sajakah itu?

1. Template klasik. (Theme dan layout versi 1 - versi pertama)
Template blogger yang pertama adalah template klasik, dipergunakan sejak tahun 2004 semenjak Blogger tidak lagi berada ditangan Pyra Labs. Hingga kini template ini masih ada pada pengaturan blogger dalam bentuk dokumen HTML. Sampai tahun  2009 tema klasik adalah satu satunya bentuk muka halaman blog yang dikenal orang.

Template ini tentu saja tidak responsive, dan pada waktu itu belum ada gagdet hape dan tablet bahkan yang punya laptop saja masih terbatas. Maka banyak orang yang ngeblog melalui kantor tempat mereka bekerja. Kalau di hitung hitung saya baru kenal blogger tahun 2012, itupun belum ngeblog seperti sekarang. Jadi template klasik memang tidak perlu responsive menurut masanya. Template responsive itu datang setelah ukuran layar perangkat (secreen) dibuat berbeda beda dengan berbagai ukuran.

Dan template responsive menemukan bentuknya ketika tiba tiba orang menyadari bahwa mereka bisa mengakses internet melalui layar mobile dalam genggaman mereka (hape).

Cara melihatnya adalah, pada setiap kali penggantian template default (bukan template berbeli) sobat scroll pilihan template sampai ke template paling bawah karena disana hingga kini masih ditampilkan opsi atau pilihan kembali ke template klasik:
Kembali ke template klasik
Sobat bisa memlih "kembali ke tema klasik" atau "tampilkan tema klasik" untuk melihat kode kodenya secara keseluruhan.
dinamakan template versi 1

Kembali ke tema klasik
Jika sobat memilihnya maka tampilan blog sobat akan nampak seperti link demo dibawah ini:
DEMO 
Pada setting dasbor terdapat perbedaan template layout versi pertama ini dengan versi ke 2 dan ketiga, yakni tidak terdapat opsi PENGATURAN TEMA, tidak terdapat opsi DESIGNER BLOGGER.

Namun ketika memilih tema klasik Google melalui pengaturan telah memberikan peringatan. Template ini memang sudah sangat tidak direkomendasikan lagi sesuai dengan zaman, template ini sudah layak masuk musium. Namun jika sobat merasa template klasik itu antik dan membuatnya atau memodifikasinya menjadi responsive tentu saja tema akan terlihat unik, jadul namun bernilai historis!

Saya sedang menggarap satu template klasik sehingga memiliki kemampuan adaptive layaknya template versi 2 dan template blogger versi 3.

Template itu saya bayangkan akan menjadi unik: Klasik murni, dinamis dan modern sekaligus!

Tampak struktur kode sangat sederhana dan sintaks sintaksnya terlihat sudah tua dan ditinggalkan, namun dasar kode kodenya masih terpakai hingga ke versi template versi 3.

2. TEMPLATE DINAMIS (Layout versi 2)
Tahun tahun setelah tahun 2004-2009 adalah tahun perubahan disebut juga sebagai tahun millineal, ketika laptop semakin umum dipergunakan bahkan oleh pelajar. para desainer website mulai membayangkan sebuah halaman yang dapat ditampilkan dengan mudah dan responsive pada setiap ukuran layar. Pada kode CSS tampaknya manipulasi untaian kode @media Screen mulai umum dipakai. Mulailah desain template baru dibuat. Dan template versi ke 2 diperkenalkan dan ditambahkan kedalam dasbor blogger dengan  varian varian yang lumayan banyak juga, yakni sebanyak 7 jenis dengan varian varian yang berbeda beda:
  1. Template simple atau sederhana (7 varian warna)
  2. Template dynamic atau dinamis (7 varian gaya)
  3. Template Jendela gambar atau windows picture (3 varian)
  4. Template awsome inc. atau PT. Keren Sekali (6 varian warna dan gaya)
  5. Template watermark atau tanda air (3 varian warna)
  6. Template ehteral atau kelembutan (3 varian warna)
  7. Template Travel atau perjalanan (4 varian warna)
Berdasarkan template template inilah para pembuat template pihak ketiga melakukan modifikasi ulang dan menjual kembali kepada blogger dalam bentuk dan fitur yang lebih dinamis, responisve dan tampak lebih modern.

Template template ini masih banyak dipakai hingga sekarang namun dalam bentuk fitur yang jauh lebih responsive setelah dimodifikasi ulang oleh pihak ketiga termasuk editblogtema. Untuk mengetahui apakah template sobat support "layout" versi ke-2 amatlah mudah: Masuk kepengaturan blogger, pilih tema atau theme, pilih edit HTML, maka pada halaman paling atas editor HTML template blog akan terlihat kode berikut:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
Perhatian kode HTML XML "layout"  yang saya merahkan jelas menunjukan itu. Sedangkan pada template terbaru seperti Contempo, Soho, Emporio dan terkemuka kita akan akan melihat format HTML XML sebagai berikut:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:view.title.escaped/></title>
<b:include data='blog' name='all-head-content'/>
Saya masih memakai template ini (yang tentu saja saya kombinasikan dengan widget widget dengan layout versi 3)

3. New template (Layout versi 3)
Tahun 2017 Google mengumumkan template jenis terbaru yang jauh lebih responsive dan mobile friendly. Template ini sangat adaptive, mampu tampil sama baiknya baik melalui layar desktop, laptop, tablet hingga layar hape. Tempalte ini tentu saja sangat baik bagi blogger pemula yang menginginkan konten kontennya cepat terindex Google.

Seiring dengan dirilisnya template ini Google juga memperkenalkan sebuah project template baru yang sangat mobile: Template AMP (Accelerate Mobile Page) Namun secara umum template terbaru diatas sudah sangat baik buat blogging modern. Dari template yang cantik, modern hingga struktur yang baik berisikan tag tag yang sangat mudah terbaca oleh robot robot txt. Saya tidak akan membahas perihal template AMP ini karena saya telah menulisnya cukup panjang lebar pada artikel:
Baca juga: PANASARAN SEPERTI APA SIH TEMPLATE AMP ITU?
Google kemudian mengumumkan akan menendang halaman web yang tidak responsive, ini tentu saja menjadi peringatan bagi blognya yang masih menggunakan template klasik (template versi pertama)

Jika sobat ingin lebih jelas Template template dengan layout versi 3 ada 4 jenis dengan masing masing terdiri dari 5 varian dan warna, sebagai berikut:
  1. CONTEMPO, terdiri dari 5 varian dan warna
  2. SOHO, terdiri dari 5 varian dan warna
  3. EMPORIO, terdiri dari 5 varian dan warna
  4. ETHERAL (terkemuka) terdiri dari 5 varian dan warna
template versi 3
Demikianlah  tiga versi layout template blogspot dari masa ke masa hingga saat ini. karena saya membangun blog ini berdasarkan bagaimana cara memodifikasi template buat blogging di blogspot, maka saya menyediakan tutorial tutorial yang sobat butuhkan untuk memodifikasi dua versi layout template bawaan (default) blogspot. Yakni layout versi 2 dan versi 3. Jika nanti "projek" saya selesai memodifikasi template versi pertama agar dapat digunakan jadi lebih responsive dan mobile, tentu akan saya tuliskan juga tutorialnya.

Salam.

www.editblogtema.net

SHARE YA:

Ini hanya buat percobaan, namun cara ini terbilang ringan dan ringkas. Hanya menampilkan tombol profile namun jika tombol "PERIHAL SAYA" tersebut di klik akan memunculkan profile pemilik blogger dengan ukuran yang hampir memenuhi ukuran halaman.
Sebenarnya saya ingin melengkapinya dengan link Php, misalnya dibawah profile ada form yang dapat dimanfatkan untuk chatting atau koresponden, akan tetapi saya masih menunggu beberapa masukan dari teman teman.

Kita langsung saja kepada cara pemasangannya:

1. TAMBAHKAN CSS

Langkah pertama masuk ke pengaturan blogspot:

  1. Masuk kepengaturan blogspot
  2. Pilih Tema atau "theme"
  3. Dibagian bawah Live on blog atau "langsung di blog" ada dua pilihan: Customize atau Sesuaikan dan Edit HTML
  4. Pilih Edit HTML
Cari kode </head> letakan kode CSS berikut tepat diatasnya:

<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius:50px
z-index=1200;
}

/* Set a style for all buttons */
button {
background-color: #FFB6C1;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius:30px;
}

button:hover {
opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: ;
}

/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
border-radius:50px;
}

img.avatar {
width: 40%;
border-radius: 50%;
}

.container {
padding: 16px;
}

span.psw {
float: right;
padding-top: 16px;
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 50px;
border-radius:30px;
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: red;
cursor: pointer;
}

/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
z-index=1200;
}
}
</style>


2. TAMBAHKAN HTML

Langkah kedua
  1. Masuk kepengaturan blogspot
  2. Pilih Tataletak atau Lay out
  3. Tambahkan atau add gadget
  4. Pilih JavaScrit/HTML
Copy seluruh kode dibawah dan pada blanko kosong JavaScript/HTML yang telah terbuka dan lalu pastekan ke dalamnya.

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">PERIHAL SAYA</button>

<div id="id01" class="modal">

<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
<img src="https://1.bp.blogspot.com/--mHPjlgbUmc/XJZYFv6C1pI/AAAAAAAAAA0/AuR33XWQ0ZMuxNxhtGMbqbVrf_DOQI3MwCK4BGAYYCw/s113/images%2B%252816%2529.jpeg" alt="Avatar" class="avatar" />
</div>

<div class="container">
<label for="uname"><b>BVANIE</b></label>
<input type="text" placeholder="mandiri, lembut, sensitif, suka pengatahuan" name="uname" required />

<label for="psw"><b>website</b></label>
<input type="password" placeholder="https://bvanie2.blogspot.com" name="psw" required />

<button type="submit">Login</button>
<label>
<input type="checkbox" checked name="remember" /> Remember me
</label>
</div>

<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="
https://1.bp.blogspot.com/--mHPjlgbUmc/XJZYFv6C1pI/AAAAAAAAAA0/AuR33XWQ0ZMuxNxhtGMbqbVrf_DOQI3MwCK4BGAYYCw/s113/images%2B%252816%2529.jpeg">password?</a></span>
</div>
</form>
</div>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>


Ganti link Gambar yang saya sorot kuning dengan gambar profile sobat sendiri, cara mengambil gambarnya adalah dengan mengklik profile blogspot kita dan membukanya melalui halaman baru di browser, pada bar alamat web akan terlihat link gambar dengan awalan alamat: https://1.bp.blogspot.com/....DST pastekan sebagai pengganti link Nona BVANE ini.
LIHAT DEMO
www.editblogtema.net

SHARE YA:

Sebenarnya ini bisa di terapkan ke dalam template blogspot yang lebih lama. Namun karena sebaiknya sobat menggunakan templat terbaru blogspot yang sudah dibuat otomatis responsive dan mobile, maka cara ini sangat baik diterapkan.
untuk template blogspot terbaru

1. CSS

Tidak ada JavaScript. Hanya elemen CSS yang kita butuhkan disini dengan syarat hanya 3 link saja yang saya sarankan itupun dengan judul link yang singkat seperti: privasi, perihal, dan kontak atau menurut selera sobat  karena layar hape yang kecil hanya bagus menampung panjang posisi inline sedemikian.

Masuk ke pengaturan blogspot>>Tema>>Masuk ke opsi edit HTML, lalu cari kode: </head> dan letakan kode berikut tepat diatasnya:

<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: grey;
  color: black;
}

.navbar a.active {
  background-color: transparent;
  color: #333;
}

.main {
  padding: 16px;
  margin-bottom: 30px;
}
</style> 

Save templat sobat.

2. HTML
Masuk kepengaturan blogspot>>tataletak>>tambahkan gagdet>>pilih gagdet JavaScript/HTML, lalu pada kotak atau blank yang muncul kopi seluruh kode berikut dan pastekan kedalam blanko tersebut.

<div class="navbar">
  <a href="LINK SOBAT">Privasi</a>
  <a href="LINK SOBAT">Tentang</a>
  <a href="https://api.whatsapp.com/send?phone=masukan saja nomor telepon disini">Kontak</a>
</div>

Catatan: instruksi yang saya sorot merah harus diisi dengan nomor telepon misalnya: 08127020xxxx maka 0 harus diganti dengan 62 (kode Indonesia) menjadi sbb: 628127020xxxx

Save templat

Selamat negeblog, semoga sukses.

Contoh pembuatan:

  W3SCHOOL 

setelah masuk Klik RUN untuk melihat hasilnya

www.editblogtema.net

SHARE YA:

CONTOH BAGAIMANA CARANYA MEMBUAT BLOG SENDIRI

6 komentar

November 24, 2018

Tutorialkhusus
cara membuat blog sendiri
Sebelumnya kita telah membahas cara pembuatan website secara umum. Sekarang kita mencoba membahas cara membuat blog plus demo HTMLnya melalui blog ini:

Perhatikan image dibawah ini dibuat berdasarkan HTML sehingga anda dapat mengeksplorasinya:


EB

Judul heading

deskripsi judul, 24 Nov 18
Image
Tulisan..
Bla bla bla bla bla bla.

Saya

GBR
Tulis disini bla bla bla bla..

Popular Post

GBR

GBR

GBR

follow

Tulisan..
Contoh kode diatas diatas adalah sebagai berikut:

1. CONTOH TATALETAK:

<div class="header">
<h2>Blog Name</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg"style="height:200px;">Image</div>
<p>Some text..</p>
</div>
<div class="card">
<h2>JUDUL HEADING</h2>
<h5>Title description, 24 nov 18</h5>
<div class="fakeimg"style="height:200px;">Image</div>
<p>Some text..</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg"style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div><br>
<div class="fakeimg">Image</div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>

<div class="footer">
<h2>Footer</h2>
</div>


2. CONTOH MENAMBAHKAN CSS:

body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}

/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}

.leftcolumn {
float: left;
width: 75%;
}

/* Right column */
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}

/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}

/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}

@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}


Apakah anda mendapatkan gambarannya?

SHARE YA:

Tutorial khusus
cara membuat website
PRAKATA
Dulu, sewaktu baru mulai membuat blog saya juga berfikir membuat website sendiri itu pasti susah banget. Jadi saya hanya ikut ikutan menggunakan tema tema dan cara standar yang ada. Saya fikir itu tidak memuaskan. Bukankan tidak semua orang memiliki cara berfikir yang sama?

Akan tetapi berusaha membuat web kita sendiri dan belajar keras adalah sebuah nilai lebih dan tentu saja akan sangat berguna untuk diri kita dan secara pribadi saya telah merasakannya. Ternyata sulit atau tidak sulit itu hanyalah pikiran atau cara berfikir kita sendiri.

MEMBUAT WEB SENDIRI?
Membuat suatu halaman web pada dasarnya adalah seperti contoh dibawah ini (image dibawah ini dibuat berdasarkan HTML, jadi anda bisa menyentuhnya untuk melihat reaksinya):
Page Title

EB

editblogtema.

perihal

Gambar kami:
Gambar
Teks:Bla bla bla bla bla bla bla bla bla bla..

TExt disini

Bla bla bla bla bla bla.
Gambar

Gambar

Gambar

JUDUL KEPALA

Keterangan judul, 24 nov 2018
Gambar
Teks disini...
Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla.

BAGAIMANA CARA KERJANYA?

Perhatikan strukturnya:

<html lang="en">

<head>

<title>Page Title</title>

<style>

* {

box-sizing: border-box;

}

/* Style the body */

body {

font-family: Arial, Helvetica, sans-serif;

margin: 0;

}

/* Header/logo Title */

.header {

padding: 80px;

text-align: center;

background: #1abc9c;

color: white;

}

/* Increase the font size of the heading */

.header h1 {

font-size: 40px;

}

.navbar {

overflow: hidden;

background-color: #333;

position: sticky;

position: -webkit-sticky;

top: 0;

}

/* Style the navigation bar links */

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

}

/* Right-aligned link */

.navbar a.right {

float: right;

}

/* Change color on hover */

.navbar a:hover {

background-color: #ddd;

color: black;

}

/* Active/current link */

.navbar a.active {

background-color: #666;

color: white;

}

/* Column container */

.row {

display: -ms-flexbox; /* IE10 */

display: flex;

-ms-flex-wrap: wrap; /* IE10 */

flex-wrap: wrap;

}

/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */

.side {

-ms-flex: 30%; /* IE10 */

flex: 30%;

background-color: #6495ED;

padding: 20px;

}

/* Main column */

.main {

-ms-flex: 70%; /* IE10 */

flex: 70%;

background-color: white;

padding: 20px;

}

/* Fake image, just for this example */

.fakeimg {

background-color: #aaa;

width: 100%;

padding: 20px;

}

/* Footer */

.footer {

padding: 20px;

text-align: center;

background: #6495ED;

}

@media screen and (max-width: 700px) {

.row {

flex-direction: column;

}

}

@media screen and (max-width: 400px) {

.navbar a {

float: none;

width: 100%;

}

}

</style>

</head>

<body>

<div class="header">

<h1>

EditBlogTema</h1>

A <b>responsive</b> kami membantu dengan tulus.<br />

</div>

<div class="navbar">

<a class="active" href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Beranda</a>

<a href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Link</a>

<a href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Link</a>

<a class="right" href="https://draft.blogger.com/blogger.g?blogID=3894474860842702694#">Link</a>

</div>

<div class="row">

<div class="side">

<h2>

perihal</h2>

<h5>

Gambar kami:</h5>

<div class="fakeimg" style="height: 200px;">

Image</div>

Some bla bla bla bla.<br />

<h3>

More Text</h3>

Lorem ipsum dolor sit ame.<br />

<div class="fakeimg" style="height: 60px;">

Image</div>

<br />

<div class="fakeimg" style="height: 60px;">

Image</div>

<br />

<div class="fakeimg" style="height: 60px;">

Image</div>

</div>

<div class="main">

<h2>

JUDUL KEPALA</h2>

<h5>

Keterangan judul, 24 nov 2018</h5>

<div class="fakeimg" style="height: 200px;">

Image</div>

Text disini..<br />

Bla bla bla bla<br />

<br />

<h2>

JUDUL KEPALA</h2>

<h5>

Penjelasan judul, 24 November 2018</h5>

<div class="fakeimg" style="height: 200px;">

Image</div>

Text disini..<br />

Blab bla bla bla bla bla.<br />

</div>

</div>

<div class="footer">

<h2>

Footer</h2>

</div>

</body>

</html>


Perhatian!:
  1. Struktur ini tidak bisa langsung di masukan kedalam pengaturan blogger default melalui editHTML tanpa modifikasi, ini hanya standar penggunaan web biasa.
  2. Opsi sticky, atau navigasi lengket di kepala blog tidak berlaku untuk browser yang lebih tua seperti Internet Explorer dst.
  3. Anda dapat menerapkannya melalui postingan dengan memilih diantara 2 opsi: "compose" dan atau "HTML" jadi pilih saja HTML dan copy pastekan saja kode diatas lalu "view" untuk melihat hasilnya (lihat gambar)
  4. Tutorial ini walaupun sifatnya gratis memiliki hak cipta "tersembunyi" yang  kami jalin dalam algoritma terbaru pada jaringan web terdalam dan mungkin akan berakibat buruk bagi blog yang mengkopi-paste-nya. Silahkan mengkopi setelah mendapatkan ijin dari kami melallui komenter dibawah ini.

SHARE YA:

Serial tutorial khusus
contoh cara membuat menu sticky

Mari kita coba sticky Menu Navigasi dibawah ini, dan membuktikan apakah kita dapat menerapkannya pada template blogger kita.
Perhatikan cara membuatnya:

Sebaiknya back up template anda terlebih dahulu untuk berjaga jaga
  1. Masuk ke pengaturan blogger
  2. Pilih Tema
  3. Pilih opsi editHTML
Langkah pertama: Cari kode </header> lalu copy kode dibawah ini dan pastekan diatas kode tadi.
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
Langkah kedua: Cari kode ]]></b:skin> lalu copy kode dibawah ini dan pastekan diatas kode tadi.
/* Style the navbar */
#navbar {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}

/* Page content */
.content {
padding: 16px;
}

.sticky {
position: fixed;
top: 0;
width: 100%;
}

.sticky + .content {
padding-top: 60px;
}
Langkah ketiga: Tambahkan kode JavaScript dibawah ini letakan diatas kode </body>:
<script>window.onscroll = function() {myFunction()};var navbar = document.getElementById("navbar");var sticky = navbar.offsetTop;function myFunction() { if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}</script>

Save tema

Catatan tidak semua templat dapat menerapkan ini, pada beberapa kasus khusus harus diformat terlebih dahulu.

SHARE YA:

Serial Tutorial khusus:
Membuat template blog tidak akan terlepas dari 3 kode "dasar" yang akan kami berikan contoh. Penulis minta maaf karena baru belajar membuat toturial, selama ini taunya hanya mempraktikan, bukan mengajarkannya he he he, yang paling sulit itu pasti kepada bagian "Mengajar" tidak percaya tanya pada blogger yang profesinya adalah seorang guru. Sulit untuk membuat seorang pelajar memahami apa yang mau kita sampaikan tanpa pengalaman, pendidikan dan teknik mengajar itu sendiri.

Maka itulah pada editblog tema kami selalu menekankan kepada "Contoh-contoh" yang langsung bisa dipraktikan bahkan ketika anda mencoba membuat sebuah template blog anda sendiri.
HTML
Karena sebuah contoh jauh lebih baik daripada seribu kata kata yang ditulis, saya memberikan contoh untuk tutorial dasar pelajaran JavaScript:

JavaScript:

Lihat Demo:

Pelajaran JS pertamaku

Perhatikan Kodenya:

<!DOCTYPE html>
<html>
<body>

<h2>Pelajaran JS pertamaku</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html> 


CSS

adalah singkatan dari CASCADING STYLE SHEETS

Gunanya untuk membuat suatu tampilan web menjadi menarik, css adalah elemen yang sangat penting bagi seorang desainer web jika merujuk kepada estetika atau keindahan suatu tampilan web apabila di tampilkan pada layar monitor baik PC, tablet maupun hape.

Contoh DEMO:

Ini biru

Kode diatas sebenarnya tampak sebagai berikut:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Ini biru Heading</h1>

</body>
</html>

Atau:


Ini merah


Kodenya sebagai berikut:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:red;">Ini merah</h1>

</body>
</html>


SHARE YA: