Cara Mudah Merombak / Mengedit / Memodifikasi Template Blog / Website

Mengedit atau memodifikasi tampilan blog itu menyenangkan dan sebenarnya tidak sulit jika kita mengetahui sedikit banyak tentang script CSS (Cascading Style Sheets), HTML, dan Javascript. Hal tersebut ingin kita lakukan biasanya karena ingin membuat tampilan blog agar lebih keren, memberi warna dan suasana baru, atau mungkin kita bosan dengan tampilan blog yang itu-itu saja.

Membaca script / kode tentu adalah hal yang menyebalkan terkhusus untuk blogger pemula termasuk Saya dulunya. Namun bila kita mengerti sedikit banyak tentang kode itu, hal yang tadinya menyebalkan bisa menjadi menyenangkan loh. Langsung saja simak cara / tutorialnya berikut ini.

• Pertama-tama login ke akun blogger.com > Buka blog yang akan diedit > Pada menu bar blogger sebelah kiri, klik Template > Pada menu Template klik Edit HTML
• Jika sudah membuka Edit HTML biarkan dahulu, sekarang buka blog Sobat, kita akan melakukan pengeditan tampilan blog dari Inspect Elemen terlebih dahulu.
• Inspect Elemen/ Periksa Elemen yang akan kita edit gaya, warna, ukuran dan lain sebagainya. Klik kanan pada bagian yang akan di edit, pilih Periksa Elemen / Inspect Element. 

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

• Untuk pengeditan Saya sarankan menggunakan browser Mozilla Firefox, download disini, karena untuk memodifikasi CSS lebih mudah dan leluasa, atau Chrome juga tidak masalah.
• Kode HTML yang sebelah kiri, dan kode CSS yang disebelah kanan Inspect Element.
• Mengedit kode HTML dengan klik kanan kode HTML yang diinginkan,  kemudian Edit As HTML, atau tekan F2 saja pada kode tersebut. Maka tampilannya seperti pada Gambar 1 (Lihat di bawah postingan).
• Mengedit kode CSS yaitu klik Property / Value CSS yang ada disebelah kanan Inspect Elemen, kemudian ganti atau modifikasi sesuai keinginan. Pada contoh dibawah ini, Saya mengganti value / nilai dari warna background elemen .menu. Contoh pada Gambar 2 (Lihat di bawah postingan).
• Pengguna Firefox, pada bagian inspect element, pilih Style Editor/ Editor Gaya, untuk fokus ke pengeditan CSS. Editing HTML nya pada Inspector / Inspektur tab Inspect Element. Contoh pada Gambar 3 (Lihat di bawah postingan).
• Pilih style utama blog Sobat yang hendak diedit, atau periksa satu persatu kumpulan CSS yang ada disebelah kiri gambar berikut. Silahkan Sobat, mengotak atik CSS yang ada pada kolom tengah. Contoh pada Gambar 4 (Lihat di bawah postingan).
• Jangan sungkan untuk menghapus atau menambahkan kode pada CSS maupun HTML, karena pengeditan ini sifatnya sementara saja, dan hanya terjadi pada komputer Sobat.
• Tetap lanjutkan saja pengeditan, jika sudah menemukan atau menyelesaikan desain yang diinginkan, save atau salin kode HTML dan CSS yang baru tersebut, ke Edit HTML yang ada pada Blog sobat, search saja di blog dengan CTRL+F agar memudahkan menemukan kode yang akan diganti.
• Dan lagi lagi, jangan berhenti berusaha mencoba terus menerus, jika belum berhasil coba dan coba lagi, karena semakin sering kita menemukan masalah dan memecahkannya, semakin banyak pula pengalaman kita dalam mendesain web.
• Gunakan juga tool color generator dan editor HTML CSS blog ini, yang mungkin memudahkan Sobat dalam pengeditan.

Semoga tutorial atau penjelasan yang Saya tuliskan pada artikel ini dapat membantu Sobat blogger sekalian untuk memodifikasi tampilan blog atau websitenya. Lebih dan kurangnya Saya mohon maaf, Terima Kasih.

Membuat Tautan Ke Artikel Selanjutnya atau Sebelumnya Dengan Judul Postingan (Next Previous)

Pada kesempatan ini, Saya menuliskan sebuah tutorial untuk membuat navigasi tautan atau alamat di bawah postingan menuju ke konten/ artikel selanjutnya (Posting baru) maupun sebelumnya (Posting lama) dengan judul artikel. Tampilan next prev posting blog tersebut seperti gambar dibawah ini.

Langsung saja, berikut kode/ script yang perlu Sobat tambahkan.

• Masuk ke akun blogger Sobat > Pilih Blog > Template > lalu Edit HTML.
• Jika belum ada source kode Jquery, copy kode berikut diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> 

• Lalu copy kode CSS tersebut diatas ]]></b:skin> atau </style> , gunakan CTRL+F untuk mempercepat pencarian.

.blog-posts{display: block;overflow: hidden;}
.blog-pager{background: #def;float:left;margin-top: 10px;width: 100%;font-family: 'roboto condensed',calibri;}
.blog-pager a{background: #25a;transition: all 0.6s ease;color: #fff;display: block;max-width: 200px;padding: 5px 20px;box-shadow: 0px 0px 1px 1px #fff;}
.blog-pager a:hover{color: #000;background: #fff;box-shadow: 0px 0px 0px 1px #000;}
#blog-pager-newer-link a:hover{margin-right: 20px!important;}
#blog-pager-newer-link a:hover:after{margin-right: 20px!important;font-size: 25px;animation: moveright 1s linear infinite;-webkit-animation: moveright 1s linear infinite;}
#blog-pager-older-link a:hover{margin-left: 20px!important;}
#blog-pager-older-link a:hover:after{margin-left: 20px!important;font-size: 25px;animation: moveleft 1s linear infinite;-webkit-animation: moveleft 1s linear infinite;}
@-webkit-keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}
@-moz-keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}
@keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}
@-webkit-keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}
@-moz-keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}
@keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}
#blog-pager-older-link, #blog-pager-newer-link{margin:30px 25px 10px 25px;position: relative;height: auto; }
#blog-pager-older-link{float: left; }#blog-pager-newer-link{float: right;}
#blog-pager-older-link:before{content:'Previous Post';position: absolute;top:-25px;}
#blog-pager-newer-link:before{content:'Next Post';right: 0;position: absolute;top:-25px;}
#blog-pager-newer-link a:after,#blog-pager-older-link a:after{transition: all 0.5s ease;color: #000;top: 0;font-size: 20px;position: absolute;font-family: fontawesome;} 
#blog-pager-older-link a:after{content:"\f100";left: -17px;position: absolute;font-family: fontawesome;} 
#blog-pager-newer-link a:after{content:"\f101";right: -17px;position: absolute;font-family: fontawesome;} 

• Selanjutnya copy kode HTML tersebut dibawah <data:post.body/> atau kode widget related post Sobat, kemungkinan ada beberapa kode <data:post.body/> , bila belum berhasil letakkan juga di bawah <data:post.body/> lainnya, karena kemungkinan ada beberapa kode tersebut pada template sobat.

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Prev Post</a>
      </span>
    </b:if>
 <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Next Post</a>
      </span>
    </b:if>
</div>

• Kemudian copy kode Jquery ini diatas </head> atau diatas </body>.

 <script type='text/javascript'>
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; h3:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; h1:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script> 

• Setelah itu buka salah satu postingan Sobat, lihat pada bawah postingan, jika sudah ada navigasi next prev maka sudah berhasil, jika belum ada, coba Inspect Element / Periksa Elemen pada title / judul postingan, Contoh :

• Pada contoh diatas, template Saya menggunakan h3 untuk judul/ title postingan. Maka perlu sobat ganti h1:first pada kode Jquery sebelumnya menjadi h3:first.

Begitu saja cara membuat navigasi tautan next prev dengan judul postingan pada blogger. Sekian informasi yang dapat Saya sampaikan, semoga dapat bermanfaat. Terima Kasih.

Menonaktifkan atau Mengganti Pengaturan Template Seluler (Mobile)

Pada artikel ini, Saya menuliskan bagaimana cara menonaktifkan atau mengganti template blog versi seluler (Mobile) atau smartphone sesuai dengan kebutuhan dan fitur yang ada pada template.

• Pertama, login terlebih dahulu ke akun blogger, klik blog yang bersangkutan, pada tab/ menu sebelah kiri pilih Template. 
• Jika Anda menggunakan template Responsive, namun tidak support template khusus untuk versi mobile nya, maka template versi mobile seharusnya dinonaktifkan saja, contoh template yang Saya gunakan ini. Klik icon setting pada template seluler, kemudian pilih Tidak, kemudian simpan untuk menonaktifkan template mobile.

• Jika template yang Anda pakai adalah template Responsive yang support template Mobile maka lebih baik pilih Ya pada pilihan template seluler, lalu pilih opsi Khusus, kemudian simpan.
• Untuk Anda pengguna template tidak Responsive dan tidak support versi seluler, disarankan untuk memilih opsi template seluler yang lain, seperti Default, Sederhana, dan lain sebagainya. Agar tampilan blog dapat lebih baik pada seluler.

Sedikit tips, jika Anda baru saja mengubah template tidak responsive menjadi responsive, dan template tersebut tidak support versi seluler, maka pilih Tidak pada pengaturan template seluler, dan tambahkan kode dibawah ini, diatas </head>.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Ini bertujuan agar blog tidak terlihat dengan tampilan seperti pada komputer/ desktop, yang memungkinkan pengunjung untuk membesar kecilkan layar gadget nya. Dengan ini template akan menyesuaikan ke responsive an dengan seluler.

Sekian artikel ini Saya buat, semoga dapat bermanfaat, Terima Kasih.

Mengatur Gambar Postingan Blog Agar Lebih Seo dan Valid HTML5

Halo blogger, Pada kesempatan ini, Saya menuliskan sedikit informasi mengenai bagaimana mengatur / memasang gambar postingan yang benar, agar lebih SEO dan merupakan salah satu syarat agar artikel valid HTML5. Hal kecil demikian mungkin saja sering terlewatkan oleh para blogger dalam membuat artikel termasuk Saya sendiri.

Langsung saja, berikut ini hal yang harus dilakukan :

• Jangan lupa selalu sertakan Title (Judul) dan Alt(Deskripsi) pada gambar yang Anda posting didalam artikel. Klik gambar yang akan diberi title dan deskripsi, lalu klik Properties. title text isi dengan judul gambar , dan alt text isi dengan deskripsi atau penjelasan gambar. Contoh klik Tampilan ini.

• Hal sederhana ini tentunya dapat meningkatkan kualitas SEO artikel kita, karena beberapa orang mungkin melakukan pencarian konten melalui gambar.

• Selanjutnya, klik tab HTML pada menu diatas, lalu temukan gambar yang kita upload/ masukkan ke dalam artikel, pada tag <a > gambar, temukan kode imageanchor="1" , hapus kode tersebut atau gunakan CTRL+F untuk mencari.
• Lalu temukan pula dalam tag <img kode border="0", kemudian hapus juga kode tersebut. Contoh lihat GAMBAR berikut.

Demikianlah sedikit tips mengatur atau memasang gambar pada artikel blogger, semoga dapat bermanfaat, Terima Kasih.

Tips Memperindah Tampilan Blog

Mungkin sobat blogger sekalian memiliki cara masing-masing untuk memperindah tampilan blog nya. Seperti menggunakan efek menu bar melayang, kursor mouse diikuti dengan text berjalan, widget jam, gambar-gambar bergerak, mp3 yang langsung otomatis terputar saat blog dikunjungi, dan lain sebagainya.

Semua hal tersebut tentu dibuat dengan tujuan untuk memperindah tampilan blog, yang nantinya juga dapat meningkatkan kualitas SEO, bisa membuat kita rajin ngeblog, dan juga dapat membuat pengunjung betah dan sering berkunjung ke blog kita.

Namun diantara sobat blogger sekalian yang baru saja masuk ke dunia blogger seperti Saya tentu tidak mudah dan tidak sebentar untuk bisa menghias tampilan blog sampai dengan sesuai keinginan kita. Nah pada postingan kali ini Saya akan mencoba untuk menjelaskan beberapa tips / cara untuk memperindah tampilan blog.

Mengganti Template

Salah satu hal yang biasanya dilakukan pertama kali oleh seorang blogger untuk memperindah tampilan blognya adalah dengan mengganti Template Blog, dikarenakan template bawaan blog yang disediakan pertama kali setelah mendaftar berbentuk standar dan lumrah digunakan, mungkin diantara sobat blogger memiliki alasan tersendiri dalam mengganti template, seperti agar blognya terlihat lebih elite, lebih dinamis, atau responsif dll. Untuk mengganti template blog baca selengkapnya pada artikel Cara Mengganti Template Blog. 

Mengubah/ Memodifikasi Template

Tak jarang, termasuk Saya adalah salah satu blogger yang suka memodifikasi template blog yang Saya pakai. Tentu kita memiliki alasan tersendiri untuk memodifikasi, mungkin dikarenakan template sudah banyak digunakan pada blog lain, mungkin ada bagian yang tidak disukai, atau ingin menyempurnakan tampilannya sesuai keinginan kita. Untuk memodifikasi atau merombak template kita harus memahami sedikit banyak tentang kode HTML dan CSS (Cascading Style Sheets). Baca cara mengedit/modifikasi template.

Memasang Widget-Widget

Jika sobat ingin memperindah tampilan blog dengan kalendar, fanspage like box, buku tamu, jam, pemutar musik, gambar bergerak atau animasi, dan lain lain, hal yang dilakukan ialah menambah widget pada blog. 

Demikianlah postingan ini Saya tulis, semoga dapat bermanfaat dan menjadi referensi bagi sobat blogger sekalian. Terimakasih

Cara Mengganti Template Blog

Template merupakan halaman website yang sudah didesain sedemikian rupa, yang telah mencakup semua kemampuan dasar yang ada pada website/ blog. Template juga bisa dianalogikan sebagai wajah / tampilan fisik dari sebuah blog, jika tampilan suatu blog sudah bagus dan menarik, tentu menjadi nilai lebih bagi pengunjung yang datang, selain dari kualitas konten dari blog itu sendiri.

Setiap blogger pasti memiliki gaya / jenis template yang disukai, namun beberapa pemula seperti Saya mungkin ada yang belum mengetahui cara mengganti template blog, maka dari itu simak caranya disini.

• Login ke akun Blogger Sobat, kemudian buka blog yang ingin diganti templatenya.
• Lanjut klik/ buka tab Template di menu bar sebelah kiri blogger, lalu klik Cadangkan / Pulihkan.

• Kemudian siapkan template yang akan digunakan, download terlebih dahulu di btemplates.com , deluxetemplates.net , soratemplates.com dan masih banyak lagi situs penyedia template gratis di mbah google. 
• Setelah mendownload dan mendapatkan template yang ingin digunakan pada blog Sobat, kembali lagi ke blogger.com tadi, pada Cadangkan / Pulihkan klik Pilih File, cari file template yang ber-ekstensi .xml yang telah didownload tadi, kemudian klik Unggah.
• Selesai, sekarang coba buka blog Sobat, bagaimana? sudah puas dengan tampilan barunya? kalau belum cari dan upload lagi. Untuk membackup atau menyimpan template yang kita gunakan tadi dari blog, klik pada Cadangkan / Pulihkan klik Unduh template lengkap.

Demikianlah artikel mengenai Cara Mengganti Template Blog. Semoga membantu dan bermanfaat bagi Sobat blogger sekalian.

Membuat Gambar Postingan Blog Berubah Menjadi Bulat / Lingkaran

Halo sobat blogger!, pada artikel kali ini Saya mencoba membuatkan tutorial bagaimana membuat gambar pada postingan blog berubah menjadi bulat atau lingkaran ketika kursor diarahkan ke gambar. Langsung saja harap disimak tutorial dibawah ini.

• Pertama-tama tentu kita sudah login terlebih dahulu di blogger.com kemudian buka blog sobat sekalian.
• Kemudian buka tab Template di menu bar sebelah kiri blogger, lalu klik Edit HTML.
• kemudian Search/Cari kode .post-body img  atau .post img menggukanakan tombol CTRL+F.
• Jika sudah ditemukan kode .post-body img  atau .post img selanjutnya letakkan kode dibawah ini dibawah kode .post-body img {...} atau .post img {...} disesuaikan saja.

Script/Kode

.post-body img:hover {

border-radius:1000px;
transition:all 0.3s ease;
}<!--Gunakan ini jika yang ditemukan kode .post-body img-->

.post img:hover {

border-radius:1000px;

transition:all 0.3s ease;

}<!--Gunakan ini jika yang ditemukan kode .post img-->

Penjelasan

• Ukuran border radius bisa disesuaikan dengan keinginan kita, tapi dengan catatan agar bisa membuat gambar menjadi lingkaran penuh ukuran border radius harus setengah atau lebih besar dari lebar (width) dan tinggi (height) dari gambar.
• Gambar yang bisa dibentuk menjadi lingkaran penuh hanya gambar dengan lebar dan tinggi yang sama, jika tidak gambar mungkin berubah bentuk menjadi elips.
• Sobat bisa juga menjadikan perubahan gambar dari bulat menjadi persegi dengan cara meletakkan kode "border-radius: 1000px;" di dalam .post-body img { bisa diletakkan diawal, atau diletakkan setelah semicolon ";" } , kemudian gunakan kode diatas tersebut juga, namun ganti ukuran border radiusnya menjadi 0, contoh : border-radius: 0px;.
• Fungsi kode "transition:all 0.3s ease;" adalah untuk memberikan efek perubahan bentuk yang lebih lembut, "0.3s" disini berarti perubahan dari gambar bulat ke persegi maupun sebaliknya berlangsung selama 0.3 Second/Detik, ukuran ini bisa diganti sesuai keinginan. Kode tersebut juga diletakkan di dalam .post-body img {...}, agar ketika kursor terlepas dari gambar, gambar akan kembali ke bentuk semula dengan efek perubahan yang sama. Lihat contoh dibawah ini.

• Jika sudah meletakkan kode tersebut, selanjutnya klik Simpan Template

Contoh Gambar Postingan Setelah Diberi Kode Diatas

Demikianlah artikel Membuat Gambar Postingan Blog Berubah Menjadi Bulat / Lingkaran ini Saya buat, semoga dapat bermanfaat bagi pembaca dan Sobat Blogger sekalian.

Membuat Gambar Membulat / Membentuk Lingkaran Menggunakan Border-Radius

Hai Sobat Blogger!, pada postingan kali ini Saya membuat tutorial yaitu cara membuat gambar membulat atau membentuk lingkaran. Langsung saja berikut ini cara membuatnya.

Contoh gambar yang tidak menggunakan style border-radius



Script/Kode

<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="height: 100px;" />

Penjelasan

"https://www.facebook.com/images/fb_icon_325x325.png" ganti dengan link gambar yang ingin kita gunakan.

Membuat Lingkaran Penuh

Contoh gambar yang menggunakan style border-radius

Script/Kode

<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 50px; height: 100px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 70px; height: 140px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 90px; height: 180px;" />

Penjelasan

Contoh gambar diatas memiliki tinggi 100px, untuk membuat gambar berbentuk lingkaran penuh harus menggunakan ukuran border-radius setengah atau lebih dari ukuran tinggi (height) atau lebar (width). Maka penulisan style nya : "border-radius : 50px;" jika menggunakan gambar berukuran tinggi dan lebar 100px.

Membuat Lingkaran Tidak Penuh

Script/Kode

<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 40px; height: 100px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 60px; height: 140px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 80px; height: 180px;" />

Penjelasan

Gambar tidak membentuk lingkaran penuh karena ukuran border-radius tidak mencapai setengah atau lebih dari ukuran tinggi dan lebar.

Demikianlah artikel Membuat Gambar Membulat / Membentuk Lingkaran Menggunakan Border-Radius ini. Semoga bermanfaat.

Cara Menghilangkan NAVBAR Bawaan Blogger

Cara Menghilangkan NAVBAR Bawaan Blogger

Cara Ke-1 : 

Cara pertama dapat dilakukan langsung melakui widget Navbar di Layout / Tataletak. Ikuti langkah berikut:

1. Login/masuk ke blogger.com -> klik blog yang akan diedit.
2. Klik Tata Letak/Layout 
3. Klik Edit pada widget Navbar.
4. Pilih/beri tanda tik pada Off
5. Simpan. Selesai.

Cara Ke-2: 

Kalau Anda ingin menghilangkan atau menyembunyikan navbar tersebut, caranya cukup mudah sebagai berikut:

1. Login/masuk ke blogger.com -> klik blog yang akan diedit.
2. Klik Template -> Edit HTML -> Lanjutkan
3. Cari kode ]]> </b:skin>
4. Letakkan kode berikut tepat diatas kode ]]> </b:skin>

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}

5. Klik Simpan Template. Selesai. 

Semoga berhasil  J