Cara perkecil gambar postingan blog Otomatis

Blogger menawarkan sebagian besar alat yang Anda akan perlu untuk menambah dan mengubah ukuran gambar Blogger cepat dan mudah. Anda dapat meng-upload foto langsung pada platform dan bahkan mengubah dimensi berdasarkan jenis konten yang di posting.

Untuk melakukan hal ini, membuat posting dan klik pada ikon foto kecil di toolbar atas sebelah pengaturan gaya font. Sebuah pop-up akan muncul di layar Anda meminta Anda meng-upload sumber gambar. Anda memiliki pilihan antara menambahkan gambar dari:
- Komputer lokal Anda
- Sebelumnya upload gambar di blog
- Album Web Picasa
- Sebuah URL gambar

Setelah Anda memilih gambar yang ingin Anda gunakan, Anda akan melihat empat ukuran gambar untuk memilih dari - kecil, menengah, besar, dan x-besar; juga memberikan Anda pilihan untuk menentukan keselarasan. Jika Anda menemukan bahwa empat dimensi yang telah ditetapkan tidak memberikan hasil yang Anda inginkan, ada cara mudah untuk mengubah ukuran gambar ke Blogger dimensi kustom agar sesuai posting blog Anda.

Langkah # 1: Mempertahankan Kualitas Gambar
Jika Anda tahu bahwa Anda akan perlu untuk mengubah ukuran gambar Blogger setelah Anda posting ke blog Anda, pastikan bahwa Anda mulai dengan foto yang lebih besar dari 640px dimensi opsi x-besar. Sangat mudah untuk membawa gambar bawah dalam ukuran, tetapi jika Anda mencoba untuk membuat sebuah gambar kecil yang lebih besar, Anda akan kehilangan beberapa kualitas. Pastikan bahwa Anda hati-hati untuk ukuran file yang berisi gambar ; semakin besar file, semakin lambat akan memuat di website Anda.

Photoshop adalah editor gambar yang kuat yang dapat membantu Anda untuk mengubah ukuran gambar Blogger atau memodifikasi gambar Anda sebelum Anda memposting, tetapi juga merupakan investasi yang mahal. Ada juga banyak editor gambar freeware lainnya yang dapat melakukan tugas sederhana mengubah ukuran foto. Tentukan apa ukuran yang Anda ingin foto untuk ditampilkan pada halaman dan secara manual mengubah ukuran gambar Blogger untuk dimensi-dimensi; pengguna lain telah menemukan bahwa 700px adalah ukuran lebar yang cukup fleksibel yang bekerja dengan baik pada posting.

Setelah Anda punya foto Anda ukurannya dan ditambahkan ke posting Anda, klik di atasnya dan pilih 'ukuran asli' pilihan. Jika foto Anda akan melebihi post editor, itu mungkin berarti bahwa mereka lebih besar dari tubuh posting Anda, jadi mari kita memperbaikinya dan membuat gambar pas.

Langkah # 2: Memodifikasi CSS Situs ini
Selanjutnya, Anda akan ingin memodifikasi CSS template Blogger Anda untuk mengakomodasi penyesuaian. Jangan kuatir; Anda tidak perlu banyak coding pengalaman untuk menyelesaikan tugas ini.

Membuka dashboard Blogger dan pergi ke 'Template'> 'Customize'. Anda akan melihat pilihan untuk 'Advanced', klik di atasnya dan menemukan jalan ke Tambahkan CSS 'tab ... paste kode CSS berikut dalam kotak kosong:

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}

Menambahkan kode untuk bagian ini, secara otomatis menambahkan itu antara .... tag dari Template Anda (Template> Edit HTML, di atas]]> </ b: skin> tag). Jadi, tidak peduli apakah Anda menambahkannya di atas ]]> </ b: skin> atau dalam kotak CSS Tambah, efek harus sama.

Ingatlah bahwa ketika Anda membuat perubahan pada CSS Template blog, perubahan ini akan mempengaruhi setiap posting ditambahkan sebelumnya, dengan menggunakan "ukuran asli" pilihan dimensi.

Untuk merapikan pos bahkan lebih, tambahkan tiga baris terakhir yang ditampilkan di bawah ini:

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}

Kode ini akan menyingkirkan setiap perbatasan dan padding di sekitar gambar dan memberikan tampilan lebih natural dalam pos. Tekan "Terapkan ke Blog" tombol setelah Anda selesai menambahkan.

Catatan: Ini hanya akan mengubah gambar diatur ke ukuran asli. Untuk mengubah ukuran gambar dengan ukuran yang berbeda dan menerapkan perubahan ini pada semua gambar ditambahkan ke posting Anda, tambahkan CSS ini sebagai gantinya:

.post-body img {
width: 100%;
height: 100%;
display: block;
}

Silakan mempertimbangkan bahwa, jika Anda memiliki posting dengan foto mengambang baik di sebelah kanan atau kiri konten, mereka secara otomatis akan lebar penuh.

Langkah # 3: Buat Posting
Setelah membuat penyesuaian untuk kedua ukuran file dan CSS, Anda dapat kembali ke editor posting dan ulangi Langkah 1 untuk menambahkan gambar. Ketika Anda kembali ke layar yang meminta ukuran, klik pada "ukuran asli" pilihan dan mengkonfirmasi pilihan Anda. Gambar Anda baru ditambahkan kemudian akan ditampilkan dengan penyesuaian yang Anda buat, sehingga cocok baik lebar area posting.

Validasi HTML5 pada Link Google Font

Sebetulnya cara validasi HTML5 pada Link Font di Head sudah dijelaskan pada postingan Kompi Ajaib (baca : Link Font di Head Blog Error Validasi HTML5). Kalau saya simpulkan yaitu dengan dua alternatif yaitu :
1. Memisahkan masing-masing font.
2. Menggunakan @font-face pada CSS.

Rasa penasaran menyelimuti perasaan saya, kenapa bisa error validasi? Sebelum kepada penyebab error, saya contohkan link font yang error seperti ini :

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald' rel='stylesheet' type='text/css'/>

Pesan yang muncul pada validator seperti ini :

Bad value http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald for attribute href on element link: Illegal character in query: not a URL code point.

Selidik punya selidik ternyata permasalahannya ada pada tanda pembatas antar font (|) harus di escape menjadi %7C. Permasalahnnya sama dengan tanda & harus dirubah menjadi &. Jadi dari kode error di atas harus dirubah menjadi

Itulah solusi yang saya tambahkan dari postingan Kang Adhy "Kompi Ajaib" Suryadi. Silahkan sobat memilih cara mana yang akan digunakan.

Semoga bermanfaat...

Reupload Template Flatter Magz (Cloning)

Malem gan , akhirnya ReEdit lagi nih Cloning nya , buat yang mau template ini silahkan , sudah penuh seo Responsive nih..

ada yang mau ,,, wuahahahahah.

UPDATE FULL

Cara Meredirect Blog ke Web

1. Redirect dengan Javascript
Pengalihan dengan javascript ini bisa dipasang pada halaman web yang bertipe PHP maupun HTML.

<script language=javascript>
setTimeout("location.href='alamat-tujuan'", waktu-tunda);
</script>

Waktu-tunda disini menggunakan satuan mili detik.
Script diatas bisa dipasang diantara tag <head> dengan </head> maupun <body> dengan </body>

2.Redirect dengan HTML
Adapun script untuk mengalihkan suatu webpage menggunakan script HTML adalah sebagai berikut:

<meta http-equiv="Refresh" content="waktu-tunda; URL=alamat-tujuan">

Waktu-tunda kita ganti dengan seberapa lama waktu yang diinginkan untuk tetap berada di halaman tersebut sebelum dialihkan ke alamat-tujuan.
Waktu tunda ini menggunakan satuan sekon atau detik, script diatas kita letakkan setelah tag <head> dan sebelum tag </head>

3. Redirect dengan PHP
Sobat taruh script dibawah ini di sembarang tempat pada webpage PHP sobat

<?php
header("location:alamat-tujuan");
?>

Note: Dari ke-3 script diatas yang perlu di rubah adalah alamat-tujuan lalu ganti dengan Url tujuan sobat.

4. Redirect dengan XML
Sobat taruh script berikut ini di template blogspot sobat, sebelumnya kosongkan dulu jika ada peringatan hapus widget hapus saja. Utamakan backup terlebih dahulu

<!DOCTYPE html>
<html 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>
<script type='text/JavaScript'> location.replace('http://vanzdy.blogspot.com'); </script>
<meta charset='UTF-8'/>
<title><data:blog.title/></title>
<b:skin><![CDATA[]]></b:skin>
</head>
<body>
<b:section class='main section' id='main'/>
</body>
</html>