Membuat Anti Copy Paste Blog Kecuali bagian tertentu di Blog

Membuat Anti Copy Paste Blog Kecuali bagian tertentu di Blog

1. Pertama ,  masuk terlebih dahulu ke editor template ( Edit Html )
2. Kemudian pasang kode css anti copas dibawah ini diatas kode  ]]></b:skin> atau </style>

memasang scroll pada komentar blog

Pada dasarnya membuat scroll pada komentar blog ini sama dengan memberikan kotak scroll widget-widget lainya , seperti popular post , archive , dan lain-lainya . Disitu kita hanya menambahkan script over flow hidden dan hight berapa pixel saja .

  Ada banyak manfaat dari memasang scroll pada komentar blog anda , diantaranya yaitu blog tidak terlalu panjang , karena sudah ada scroll di komentarnya [ berlaku untk blog yang banyak komentarnya ] , selain itu kita maupun pengunjung tidak perlu repot-repot untuk menggeser mouse ke bawah untuk berkomentar , karena seperti tadi di blog kita udah ada scrollnya . ok , jika sobat ingin lihat demonya silahkan lihat gambar dibawah ini :

Cara Mempercepat Loading Blog / Web dengan jQuery LazyLoad

Berikut Cara Mudah Mempercepat Loading Blog dengan jQuery LazyLoad

1. Pertama Buka Blogger, dan masuk ke menu Template => Edit Html
2. Cari kode </head>, (gunakan CTRL+F, atau klik disini untuk mengetahui cara mencari kode di Edit HTML) dan letakkan/pastekan kode berikut tepat diatasnya.
   

   <script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='https://googledrive.com/host/0ByoCwyjwB1aDTXhnVVlxcTBadVk' type='text/javascript'/> <script charset='utf-8' type='text/javascript'> $(function() { $(&quot;img&quot;).lazyload({placeholder : &quot;http://bit.ly/Qv60g5&quot;,threshold : 200}); }); </script>

3. Yang Terkahir Klik Simpan template.

Catatan penting brow script lazyload ini tidak menjamin bisa mempercepat waktu loading blog 100% fast loading Anda akan tetapi menjadi lebih cepat daripada sebelumnya

Cara Agar Artikel Blog Cepat Terindex Google

memanfaatkan google webmaster tool , semua orang entah itu newbie maupun mastah bisa membuat artikel blognya dapat langsung terindex oleh google dalam hitungan detik saja . penasarankan ? ikuti tutorial berikut ini :

Tips Menghapus dan Mengatasi Komentar Spam [ Link Aktif ] di Blog / Web

Tips Menghapus dan Mengatasi Komentar Spam [ Link Aktif ] Secara Otomatis di Blog - Bagaiamana sih cara untuk menghapus link hidup [ spammer ] di blog kita ? mungkin sahabat blogger yang udah lama kenal blog udah tau cara mengatasi spammer yang nakal dengan cara ini , namun tidak ada salahnya jika saya share kepada tutorial menghapus spam otomatis pada komentar blog anda

  Dalam menghapus komentar spam secara otomatis pada blog anda , dapat anda lakukan dengan 2 cara , yaitu dengan menghapus spam dengan css dan menghapus komentar link aktif dengan javascript , tetapi dianjurkan untuk menghapus komentar spam menggunaka java script . mengapa demikian ? karena kalau kita menghapus komentar spam dengan css , link aktif tersebut masih bisa terbaca oleh browser , maka altenatifnya menggunakan javascript

Cara Membuat Kotak Scroll Widget Popular Post Blogger / Web

Cara Membuat Kotak Scroll Widget Popular Post Blogger - Sepertinya popular post , artikel popular , entri popular merupakan widget yang kalau gak di pasang itu ada yang ganjal , hehhehe . bila template blog anda spacenya sudah penuh , dan popular post anda sangat panjang , apalagi disertai gambar dan keteranganya , pasti tambah panjang . apakah anda ingin membuat widget popular post itu jadi ringkas ? jika iya maka solusinya adalah dengan menambahkan scroll box pada widget popular post.

Membuat Gambar Posting Tidak Bisa di Copy / download

Kali ini cara melindungi gambar agar tidak bisa di copas dan di klik kanan oleh orang berbeda deengan yang lain    , karena tutorial ini kita akan membuat semua gambar posting kita tidak bisa di copas , jadi kita gak perlu repot-repot untuk menambahkan oncontextmenu="return false;" pada setiap kode gambar

Cara Membuat Design Template Responsive Sendiri di Blog

3 Cara Membuat Design Template Responsive Sendiri di Blog - Bagaiamna cara membuat template menjadi responsive ? pertanyaan tersebut banyak sekali yang bertanya pada saya , ok deh kali ini  saya akan menjawab request wdr [ Web Design Responsive ] ini .

   Pada dasarnya membuat design blog menjadi responsive sangatlah mudah , kita hanya perlu mengubah satuan pixel menjadi satuan persen serta memanfaatkan media queris , kali ini ada 3 cara termudah untuk mengubah template blog anda menjadi responsive , cara ini manjur lho , kalau gak percaya silahkan cek template saya , pasti template saya responsive . anda bisa lihat screenshot dibawah ini , dibawah ini merupakan demo blog saya dilihat di tablet dan di handphone , hembs tampilanya sangat menarik bukan , hehhehhe

Cara Memasang Widget SMS Gratis pada Blog

Caranya gampang, karena kita di sini tinggal menggunakan widget yang sudah jadi dan telah disediakan oleh sms-online.web.id secara gratis, sebelumnya terima kasih kepada sms-online.web.id

Jika sobat belum tahu cara memasang widget SMS tersebut, silahkan simak langkah-langkah berikut:

Cara Agar Blog Loading Ringan Dibuka di Mobile / HP

1. Login ke blogger dashboard
2. Klik tab Design/rancangan
3. Klik edit html
4. Cari kode dibawah ini, biasanya berada di bagian atas dari template atas 

Cara Mengatasi/Memperbaiki Windows Error di SSH

Selamat berjumpa dan membaca postingan baru saya. Kepikiran untuk buat postingan soal Bitvise SSH client.
Mungkin sobat juga sudah gak asing dengan ini. Kebetulan saya juga pasang nih, hee..
Banyak temen yang sudah berhasil konek dan browsing dengan kecepatan yang bisa dibilang Ruarrrr binasaaa. Tapi ternyata ada juga nih beberapa sobat yang masih punya masalah koneksi, alias error connection. Why??
Duduk manis dan silahkan disimak ulasan saya kali ini yaaahhh..

Permasalahan koneksi SSH Client bisa dikarenakan 2 hal. Pertama, kesalahan pada settingan Bitvise client. Kedua, ada beberapa settingan dari system komputer kita yang masih menyulitkan koneksi tersebut untuk berhasil. Saya rasa untuk settingan Bitvise Client diluaran sana sudah cukup banyak ulasannya, untuk itu saya pikir gak perlu saya jelaskan soal settingan bitvise karena sobat bisa searching aja. Terus apa yang mau saya jelasin kalau begitu. Kita fokus pada kesalahan kedua, yaitu tentang bagaimana men-setting sistem komputer/laptop kita supaya koneksi SSH tersebut terdukung oleh sistem kita.

SSH gratis

Berikut cara instalasi dan konfigurasinya :

1. Download dolo binary file nya disini
2. Setelah selesai donlot langsung install aja. Ikuti saja semuanya sampai selesai (pilih default tanpa di utak atik)
3. Setelah instalasi selesai dan server ssh sudah berjalan sekarang kita setting seperti gambar dibawah :

Cara membuat template standar dari blogger menjadi responsive

Awalnya saya tidak terpikir untuk membuat artikel dengan judul diatas, tapi setelah ada seorang Anonimyang menanyakan "bagaimana cara membuat template standar ini menjadi responsive" pada salah satu artikel sebelumnya. Barulah saya mencoba untuk mempublikasikan artikel ini.

Bagi mereka yang membuat sendiri template blog dengan CSS, tentu bukan hal yang sulit untuk mengubahnya menjadi responsive, mereka cukup mempelajari konsep media screen agar template menjadi responsive, tapi bagaimana dengan kita yang menggunakan template standar dari blogger. Tentu kita harus menelusuri terlebih dahulu nama-nama CSS yang digunakan pada template tersebut, barulah mengubah isi pada nama css tersebut agar bisa menyesuaikan ukurannya pada resolusi yang diinginkan. Berikut poin-poin penting yang biasa diubah oleh para blogger.

Membuat Template Menjadi Responsive

Seiring dengan perkembangan saat ini ,kebanyakan orang sekarang lebih sering mengakses internet melalui smartphone atau sebagainya, oleh karena itu blog juga membutuhkan penampilan yang dinamis guna memudahkan pengguna mobile dalam mengakses konten yang ada di blog kita .

salah satunya yaitu dengan membuat tampilan blog kita menjadi responsive .

cara membuat template blog menjadi responsive

Jika ingin blog kalian menjadi full responsive seperti blog Shizenku Blogspot ini, jangan meninggalkan halaman artikel ini sebelum selesai membaca tulisan yang ada di postingan Cara membuat blog jadi responsive ini. Sebelum saya mulai membahas cara agar blog jadi responsive kalian cek terlebih dahulu url blog ini http://shizenku.blogspot.com sudah responsive apa belum dengan cara mengecilkan ukuran lebar browser, bisa juga dengan mengganti resolusi layar pc kalian menjadi resolusi yang lebih kecil atau di bawah resolusi asli monitor pc kalian. Cek juga menggunakan handphone atau perangkat mobile seperti : smartphone, tablet, atau hp dengan resolusi kecil. 
Bagaimana sobat sudah dicek belum. Ini cuma sebagai bukti saja, bahwa trik yang akan saya bagikan ini sudah saya terapkan pada blog ini yang alhamdulillah sekarang sudah responsive.

cara membuat template blog menjadi responsive

Jika ingin blog kalian menjadi full responsive seperti blog Shizenku Blogspot ini, jangan meninggalkan halaman artikel ini sebelum selesai membaca tulisan yang ada di postingan Cara membuat blog jadi responsive ini. Sebelum saya mulai membahas cara agar blog jadi responsive kalian cek terlebih dahulu url blog ini http://shizenku.blogspot.com sudah responsive apa belum dengan cara mengecilkan ukuran lebar browser, bisa juga dengan mengganti resolusi layar pc kalian menjadi resolusi yang lebih kecil atau di bawah resolusi asli monitor pc kalian. Cek juga menggunakan handphone atau perangkat mobile seperti : smartphone, tablet, atau hp dengan resolusi kecil. 
Bagaimana sobat sudah dicek belum. Ini cuma sebagai bukti saja, bahwa trik yang akan saya bagikan ini sudah saya terapkan pada blog ini yang alhamdulillah sekarang sudah responsive.

cara membuat template blog menjadi responsive

Jika ingin blog kalian menjadi full responsive seperti blog Shizenku Blogspot ini, jangan meninggalkan halaman artikel ini sebelum selesai membaca tulisan yang ada di postingan Cara membuat blog jadi responsive ini. Sebelum saya mulai membahas cara agar blog jadi responsive kalian cek terlebih dahulu url blog ini http://shizenku.blogspot.com sudah responsive apa belum dengan cara mengecilkan ukuran lebar browser, bisa juga dengan mengganti resolusi layar pc kalian menjadi resolusi yang lebih kecil atau di bawah resolusi asli monitor pc kalian. Cek juga menggunakan handphone atau perangkat mobile seperti : smartphone, tablet, atau hp dengan resolusi kecil. 
Bagaimana sobat sudah dicek belum. Ini cuma sebagai bukti saja, bahwa trik yang akan saya bagikan ini sudah saya terapkan pada blog ini yang alhamdulillah sekarang sudah responsive.

Membuat Tombol Share dengan Efek Slide di Blog

Ok sobat karena sekarang lagi hangat-hangatnya dengan gaya "slide" maka berikut ini saya akan membagikan tentang cara Membuat Tombol Share dengan Efek Slide di Blog, jadi tombol share ke jejaring sosial ini ada efek slidenya.

Demonya dapat anda lihat di template simplecips yang telah dibagikan sebelunya. Ok Mungkin saja sobat tertarik untuk memasang tombol share seperti ini biar templatenya lebih kelihatan keren..hehehe.. Langsung saja berikut ini adalah kode-kodenya, dan cara memasangnya di blog sobat.

Membuat Efek Gambar Bergetar di Blog

Efek Gambar Bergetar di Blog. Berikut ini seocips akan membagikan tentang Cara Membuat Efek Gambar Bergetar di Blog. Jadi untuk sobat yang suka memsang efek-efek tertentu di blognya mungkin dapat mencoba memasang efek gambar bergetar seperti ini.

Cara Membuat Efek Tooltip di Link Blog

Cara Membuat Efek Tooltip di Link Blog. Mungkinsobat sudah pernah melihat berbagai macam jenis tooltip yang tampil di blog. apa itu tooltip? Mungkin para sahabat blogger ada yang belum tahu apa itu tooltip, Nah tooltip ini layaknya seperti title pada link blog atau juga seperti title pada gambar blog, ini adalah tulisan yang muncul ketika kursor Mouse diarahkan ke link tersebut.

Cara Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog

Biasanya animasi seperti ini dipakai oleh blog untuk menggambarkan dan memberikan deskripsi pada barang  atau produk yang di promosikan. Sebelumnya juga mengenai memberikan efek seperti ini pada gambar tapi sedikit berbeda, yaitu tentang membuat gambar dengan panel deskripsi efek slide.

LIVE DEMO :

Animasi Hover dan Deskripsi

Animasi Hover dan Deskripsi Pada Gambar diBlog
[SUSHI]
1. Lorem
2. Ipsum
3. Dolor: This year for the event, my group and I thought to do 7 different cover art for our books. So it would be the same artbook, but with 7 different book covers to choose from XD! I tried to go for a cute look with my cover

VIEW

SUSHI COMIC BOOK

Widget Musik memutar lagu di blog dengan lagu pilihan sendiri

ingin memutar lagu di blog dengan lagu pilihan sendiri tapi tidak ketemu artikel yang cocok akhirnya saya memutuskan mencoba membuat widget pemutar music sendiri dan jadilah widget pemutar music yang sederhana ini.

Ok berikut ini adalah penampakan widget ini :

Widget Music Player di Blogspot

tentang widget pemutar musik yang telah di bagikan

SS:

cara memeriksa Broken link atau link rusak di Blo

Bagaimana cara memeriksa Broken link atau link rusak di Blog?

Nah untuk itulah artikel ini di ketik. Sangatlah melelahkan dan memakan waktu yang banyak ( bahkan makan waktu yang banyak sekali ) jika kita harus memeriksa satupersatu link yang ada di blog kita hanya untuk menemukan link rusak. Untuk mempermudahnya maka sobat dapat mengunjungi situs www.brokenlinkcheck.com . setelah masuk ke situsnya terus bagaiman cara memriksanya? berikut ini adalah caranya;

Mengahapus link aktif otomatis di komentar blog

Mengahapus link aktif otomatis di komentar blog 1

1. Masuk ke akun Blogger ( dasbhor ) anda

2. kemudian Pilih Menu Template
3. Setelah memilih menu Template kemudian cari dan Klik Edit HTML
4. Cari kode </head> ( Klik CTRL+F untuk memudahkan pencarian )
5. Setelah kode </head> ketemu kemudian salin kode di bawah ini tepat di atas kode </head> tersebut .

Cara Mengatasi Url diCekal Robot.Txt

Bagaimana cara mengetahui  berapa banyak url dicekal di blog anda?, Silahkan masuk ke Webmaster tools Google untuk mengetahuinya, Kemudian pilih blog anda yang ingin anda lihat url yang di cekal, kemudian pilih perayapan > Url yang dicekal. Lihat berapa banyak url yang dicekal di blog anda. Kalau belum mendaftar ke webmaster tidak akan ketahuan berapa jumlah url yang dicekal tersebut.

Animasi Loading Blog Lingkaran

Mungkin beberapa sobat blogger memilih memasang efek loading blog ini karena memiliki alasan masing-masing misalnya untuk mempercantik blog atau juga daripada waktu loading page tidak terjadi apa-apa kan bagus juga jika animasinya.

Ok sobat langsung saja berikut ini adalah Cara Membuat Animasi Loading Blog Lingkaran.

membuat Widget slider gambar

Berbicara mengenai slider, sebelumnya juga telah dibagikan mengenai membuat image slider V6 atau jika sobat tertarik ingin memasang slider otomatis di sidebar blog, sobat dapat membaca cara memasang slider di sidebar blog.

Untuk Demo slider yang ini sobat dapat melihatnya di akhir postingan ini. Ok sob berikut ini adalah kode yang dapat sobat pasang langsung ke dalam tempate atau menempatkannya ke widget misalnya diatas postingan.

Cara Menghilangkan Tulisan Powered by Blogger

Setelah sebelumnya posting tentang cara menghilangkan navbar pada blogspot, kali ini saya akan share tentang cara untuk menghapus atau menghilangkan link tulisan powered by blogger yang berada di footer blog sobat.

Apakah menghapus atau menghilangkan tulisan powered by blogger tidak melanggar TOS?

Well, saya tidak tau dan juga malas mencari tau jawabannya :D toh kenyataannya banyak kok template blog yang menghapus tulisan powered by blogger tersebut

mengatur ukuran Gambar dan element Header versi mobile Blogspot

Anda termasuk mengaktifkan template blogger versi mobile setelan khusus/custom ?, namun kebingungan ingin mengatur gambar header yang di versi mobile.

Umumnya header versi mobile blogger ketika kita menggunakan gambar sebagai header, di versi desktop pas dan cocok dengan yang di inginkan, namun ketika di versi mobile akan terlihat agak aneh atau kurang sreg gitukan.

mengubah Ukuran Lebar Blog web agar responsif

Jika ingin blog kalian menjadi full responsive seperti blog Shizenku Blogspot ini, jangan meninggalkan halaman artikel ini sebelum selesai membaca tulisan yang ada di postingan Cara membuat blog jadi responsive ini. Sebelum saya mulai membahas cara agar blog jadi responsive kalian cek terlebih dahulu url blog ini http://shizenku.blogspot.com sudah responsive apa belum dengan cara mengecilkan ukuran lebar browser, bisa juga dengan mengganti resolusi layar pc kalian menjadi resolusi yang lebih kecil atau di bawah resolusi asli monitor pc kalian. Cek juga menggunakan handphone atau perangkat mobile seperti : smartphone, tablet, atau hp dengan resolusi kecil. 
Bagaimana sobat sudah dicek belum. Ini cuma sebagai bukti saja, bahwa trik yang akan saya bagikan ini sudah saya terapkan pada blog ini yang alhamdulillah sekarang sudah responsive.

Ok, kita lanjut posting.
Kalau ditanya susah atau gampang membuat blog jadi responsive jawabannya adalah sangat mudah kawan asalkan kalian sudah paham tentang pemasangan kode-kode css.
Inilah beberapa hal yang harus diperhatikan untuk membuat blog kalian jadi responsive :

• Lebar kolom atau Column
• Gambar atau Image
• Font atau Teks

1. Lebar Kolom
Pertama kita akan membahas tentang lebar kolom. Kenapa blog tidak responsive itu karena lebar kolom melebihi lebar layar perangkat hardware yang digunakan. sebagai contoh jika lebar outer-wrapper blog kalian berukuran 900px. ketika kita membuka blog tersebut menggunakan hp yang mempunyai lebar hanya 320px, 176px, atau lebih kecil lagi maka kalian pasti sudah tahukan apa yang terjadi. ya yang terjadi adalah blog kalian tidak sepenuhnya terlihat dan yang terlihat hanya beberapa bagian saja yang sebelah kiri, sedangkan jika kita ingin melihat bagian lainnya yang sebelah kanan maka kita harus menggeser scroll bagian bawah layar. inilah yang dinamakan blog tidak responsive sedangkan blog responsive adalah blog yang bisa menyesuaikan lebar secara otomatis mengikuti lebar perangkat yang digunakan, dan blog responsive tidak mempunyai scroll bagian bawah.
Supaya kolom blog jadi responsive kalian bisa menggunakan bantuan media-query untuk mengatur kolom header, main, footer, atau sidebar.
Caranya :
tambahkan kode di bawah ini dan taruh di atasnya kode ]]></b:skin> atau </style>

@media screen and (max-width:1024px) {
kode css
}
@media screen and (max-width:940px) {
kode css
}
@media screen and (max-width:820px) {
kode css
}
@media screen and (max-width:370px){
kode css
}

Kode media-query di atas bisa ditambah atau dikurangi. Kode berwarna merah bisa diganti sesuka kalian.
Cara pengaturan media-query :
kalian ganti teks "kode css" yang berwarna merah di atas dengan kode css.
Contohnya :

#outer-wrapper {width:900px;}
#main-wrapper, #sidebar-wrapper {width:510px;margin:0 10px 0 0;float:left;}
@media screen and (max-width:330px){
#outer-wrapper {width:95%;}
#main-wrapper, #sidebar-wrapper {width:100%;margin:0 auto;float:none;}
}
</style>

Kode di atas dibaca :
"Jika di resolusi layar di bawah 330px maka outer-wrapper mempunyai lebar 95% dari ukuran layar perangkat hardware. sedangkan jika di atas 330px outer-wrapper mempunyai lebar 900px."
"Jika di resolusi layar di bawah 330px maka main dan sidebar mempunyai lebar 100% atau memenuhi outer-wrapper, margin:0 auto, float:none. sedangkan jika di atas 330px main dan sidebar mempunyai lebar 510px, margin:0 10px 0 0, float:left."
"Mungkin ada yang masih bingung di resolusi pas 330px ukuran lebar outer-wrapper nya 900px atau 95%. jawabannya adalah 900px. karena media-query mengatur resolusi di bawah 330px.

kode margin:0 auto;float:none; digunakan di resolusi kecil supaya menjadi satu kolom. sedangkan di resolusi besar seperti 800px tidak perlu dipakai.
yang di atas hanya contoh untuk outer, main, sidebar wrapper sedangkan untuk pengaturan yang lainnya seperti header, menu navigasi, post, comment, footer, dll. kalian atur sendiri sesuai template masing-masing.

Agar di resolusi kecil bisa menyesuaikan lebar kolom otomatis. gunakan pengaturan width: menggunakan % bukan px. sedangkan untuk resolusi besar gunakan px saja soalnya kalau menggunakan % takutnya nanti tampilan blog jadi berantakan. jadi % sangat cocok digunakan untuk single column.

2. Gambar
Perbedaan gambar responsive dan tidak responsive :
Gambar tidak responsive :

Shizenku.blogspot.com

Dari gambar di atas terlihat bahwa gambar melewati batas outer-wrapper sehingga muncul scroll di bagian bawah.
Gambar responsive :

Shizenku.blogspot.com

Dari gambar di atas terlihat bahwa gambar tidak melewati batas outer-wrapper dan tidak muncul scroll di bagian bawah. dan ketika lebar browser dikecilkan ataupun dibesarkan, gambar bisa menyesuaikan lebar secara otomatis.

Supaya gambar atau image bisa jadi responsive, tambahkan kode di bawah ini kedalam kode css :

img,object,embed{border:none;vertical-align:middle;max-width:98%;width:auto;height:auto;}

kode css di atas fungsinya supaya img atau gambar postingan menjadi responsive.
sedangkan gambar iklan dan iframe tidak bisa responsive, maka dari itu di resolusi kecil gambar iklan dan iframe tidak perlu ditampilkan.
Caranya : kalian harus tahu dulu kode div id htmlnya.
ketika kalian menambahkan iklan di sidebar cari kodenya di edit html bagian sidebar.
Contoh kode div di iklan-nya seperti ini :

<b:widget id='HTML1' locked='false' title='Advertisement' type='HTML'>

Maka supaya tidak tampil di resolusi 320px kalian setting media-querynya menjadi seperti ini :

@media screen and (max-width:330px){
#html1 {display:none;}
}

Kalau hanya memakai kode css saja gambar tidak akan bisa responsive karena ada faktor lain yang menyebabkan gambar tidak responsive yaitu di dalam kode html artikel. maka dari itu kalian juga harus melakukan edit artikel yang ada gambarnya dalam mode html. biasanya kode image itu seperti ini :

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-1PI9B6xRNQI/Uk94mO3F66I/AAAAAAAABPk/Sy_9YJJj7qE/s1600/image+tidak+responsive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-1PI9B6xRNQI/Uk94mO3F66I/AAAAAAAABPk/Sy_9YJJj7qE/s320/image+tidak+responsive.jpg" width="277" /></a></div>

Kalian hapus saja kode yang berwarna merah. sehingga hasilnya seperti berikut ini :

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-1PI9B6xRNQI/Uk94mO3F66I/AAAAAAAABPk/Sy_9YJJj7qE/s1600/image+tidak+responsive.jpg"><img height="320" src="http://4.bp.blogspot.com/-1PI9B6xRNQI/Uk94mO3F66I/AAAAAAAABPk/Sy_9YJJj7qE/s320/image+tidak+responsive.jpg" width="277" /></a></div>

Setelah kalian menerapkan tips di atas saya jamin gambar postingan akan menjadi responsive. fungsi menghapus kode di atas selain agar bisa responsive keuntungan lainnya agar gambar jadi valid html5 kalian hanya perlu menambahkan title dan alt-nya.

3. Font
Inilah gambar teks yang tidak responsive :

Shizenku.blogspot.com

Dari gambar di atas terlihat ada teks yang panjang dan tanpa spasi sehingga teks tersebut melewati batas outer-wrapper sehingga muncul scroll di bawahnya.
Supaya font atau text menjadi responsive kalian harus menambahkan kode css di bawah ini ke dalam kode css tepatnya satu grup dengan kode font-family.
Ini dia kode css-nya :

word-wrap:break-word;

Jadi ketika berada dalam mode edit html template tekan ctrl + f lalu cari kode font-family lalu tambahkan kode word-wrap di belakang kode font-family. 
Contoh kode css di bagian header :

#header {font-family:Arial, san-serief;}

Setelah ditambahkan kode word-wrap sekarang menjadi seperti ini :

#header {font-family:Arial, san-serief;word-wrap:break-word;}

Jadi jika di blog kalian ada banyak kode font-family maka semakin banyak juga kalian harus menambahkan kode word-wrapnya.
Jika menggunakan kode word-wrap : Maka jika ada teks yang panjangnya melebihi lebar outer-wrapper dan tanpa spasi maka teks tersebut tidak akan melewati batas kolom post sehingga kelebihan teks yang panjang akan terpotong dan akan berada di bawahnya dan hasilnya responsive.
Seperti gambar di bawah ini :

Shizenku.blogspot.com

Sekarang kita menuju tahap akhir.
Tips dan trik di atas digunakan agar responsive di dekstop. Sekarang kita akan membahas supaya blog bisa responsive di mobile version.
Walaupun kalian sudah memasang media-query. saya yakin blog kalian belum responsive di mobile version. itu karena saat kita membuka salah satu postingan di dekstop dengan url : "http://shizenku.blogspot.com/2013/03/crysis-3-pc-full-version.html"
Maka jika kita buka melalui perangkat mobile. url tersebut akan mendapat tambahan kode ?m=1 di belakang url-nya sehingga menjadi seperti ini : "http://shizenku.blogspot.com/2013/03/crysis-3-pc-full-version.html?m=1"
Supaya blog bisa responsive di mobile version ikuti panduannya di bawah ini :
1. Login ke Blogger lalu pilih Template lalu klik tombol pengaturan template seluler.

Shizenku.blogspot.com

Ubahlah pengaturan template mobile version kalian yang semula berada di Default sekarang kalian ubah menjadi Khusus.

Shizenku.blogspot.com

2. Kalian harus menambahkan kode di bawah ini dan taruh di bawahnya kode ]]></b:skin> atau </style>. berikut ini kodenya :

@media screen and (max-width:370px){
kode css
}
</style>
<b:if cond='data:blog.isMobile'>
<style type='text/css'>
#header h1, #header p, #header h1 a:link, #header h1 a:visited, #comments h4, #comments-block .comment-footer, #comments-block .comment-author, #comments h5, #footer h6, #comments-block .comment-body, .owner-Body, #nav ul li {font-size:100%;}
#nav ul li a:link, #nav ul li a:visited {padding:2px 4px;}
#main, #sidebar {width:100%;margin:0 auto;float:none;}
.post blockquote, .post-body blockquote {margin:0 auto;font-size:90%;}
.post, .post-body, #comments {font-size:100%;padding:5px;}
.comment-timestamp {font-size:65%;}
#sidebar {display:none;}
</style>
</b:if>

Kode berwarna merah adalah kode yang harus ditambahkan. sedangkan kode berwarna orange adalah kode pengaturan css yang saya gunakan pada blog shizenku ini di versi mobile. jadi untuk kode yang berwarna orange ini hanya sebagai contoh saja dan kalian harus mengaturnya sendiri.
Untuk cara pengaturannya sama saja dengan mengatur media-query, saya rekomendasikan agar disamakan saja dengan media-query resolusi 330px atau resolusi di bawahnya.

Supaya responsive di Internet Explorer tambahkan script di bawah ini :

<!--[if IE]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

Semoga artikel ini membawa manfaat. Amin.
Selesai.

Terima kasih atas kunjungan anda, semoga artikel yang berjudul Cara membuat blog menjadi full responsive 100% work ini bisa memberi manfaat buat kita semua.

Jika anda ingin mengutip sebagian atau keseluruhan dari isi artikel ini harap menyertakan tautan dofollow menuju http://shizenku.blogspot.com/2013/10/cara-membuat-blog-menjadi-full.html.

Tetapi jika blog anda ketahuan mengutip artikel di blog ini tanpa izin dan link sumbernya maka saya akan melaporkannya menuju DMCA Takedown tanpa pemberitahuan terlebih dahulu. Atas perhatiannya saya ucapkan terima kasih.

pasang artikel terkait di blogger versi mobile dengan gambar

kalangan Pribadi , Akhirnya dengan berbekal unsur usaha, dan juga kesengajaan artikel terkait di blogspot muncul juga di versi mobile atau hp dengan gambar.Tetapi related post ini tidak saya terapkan di blog saya karena ada beberapa alasan,mungkin loading pagenya agak berat karena harus meloading gambar, tapi kalau menurut saya tidak juga berat loadingnya . 

Artikel terkait ini sangat bermanfaat bagi blog/web, karena Artikel terkait ini dapat memudahkan pengunjung blog dalam membaca artikel yang terkait dengan postingan dan juga membuat pengunjung betah berlama-lama di blog. Apalagi artikel terkait ini muncul di versi hp yang secara default bloger tidak menanamkan artikel terkait ini di dalam template.

Berikut screenshotnya artikel terkait di blogger versi hp dengan gambar melalui opera mini phone.

copyGOcopy.blogs