ATUR THEMA BLOGGER AGAR TAMPIL RESPONSIVE SECARA EFEKTIF PADA SMARTPHONE

Modernisasi digital sekarang ini sangat lah keren salah satunya mobile atau kerennya SmartPhone yang lama sudah beredar dimasyarakat kita dan hampir 90 persen menggunakannya.

Responsive dan Frendly Template

Dulu bahasa situs dekstop sangatlah berkembang pesat sekarang berganti proses migrasi dari situs desktop ke situs mobile sudah tidak lagi menjadi perbincangan utama. Sedangkan masah utama adalah mengoptimalkan tampilan dekstop ke tampilan smartphone atau Mobile ini adalah opsi pengembang saja, Namun seiring perubahan waktu kita yang ingin mengirim sesuatu ke alam dunia maya juga akan berpikir untuk mengatur tampilan bisa responsiv atau menyesuaikan dengan sendirinya. salah satunya adalah Website.

Dalam proses optimasi website versi dekstop ke website versi mobile agar memiliki performance yang baik, terutama masalah kecepatan dikarenakan website yang baru dibangun hampir seluruhnya sudah menggunakan fitur mobile friendly ( kemudahan digunakan oleh peranggkat mobile / smartphone ) termasuk Website Blogger yang kita bicarakan ini.

Bagi pengguna blogger pemula yang belum memahami seluk-beluk pengaturan blogger sepenuhnya harus lebih jeli lagi dalam mencari panel-panel setting/ pengaturan. Pengaturan tampilan blogger diatur pada halaman theme (sebelumnya template).

Pada Pengatauran versi mobile sangat diperlukan setting thema tersebut agar tampilan di perangkat smartphone menjadi tampilan yang diharapkan baik tampilan standar dari blogger ataupun thema tampilan responsive yang digunakan sesuai dengan versi desktop yaitu menggunakan kode Html jika theme yang digunakan menggunakan kode dari luar.

Bloger merupakan salah satu layanan blog terbesar yang memancing banyak web designer untuk mendesain website berbasis blogger agar tampilannya lebih responsive dan friendly. Blogger sendiri telah menyediakan berbagai thema standar dan gratis yang bisa digunakan oleh pengguna blogger. Namun pengguna boleh menggunakan thema lain dari codingan html lain jika yang tersedia tidak sesuai dengan kebutuhan, Sayangnya, proses pembuatan theme blogger melalui kode merupakan pekerjaan yang membutuhkan keahlian khusus.

Baca Juga : buat related post pada blogspot

Searching di google ketik Template Blogger atau theme blogger maka akan muncul sebagian besar hasilnya merupakan penyedia theme blogger baik gratis maupun berbayar. Proses instalnya pun hanya perlu melakukan copy paste kode di kolom Edit HTML atau Restore file.xml secara langsung.

yang menjadi perhatian adalah dalam poin setelah merestore file.xml karena pada halaman theme dashboard blogger diharuskan kita untuk mengatur settingan untuk versi Mobile yang sering dilewatkan oleh blogger-bloger pemula. Padahal, pengaturan ini merupakan salah satu kunci agar website / blog tampil di perangkat mobile dengan baik mengikuti tampilan versi desktop tetapi bentuk responsivenya bisa menyesuaikan dengan layar smartphone, apabila tidak melakukan settingan tersebut maka blog ketika diakses di perangkat mobile yang akan tampil adalah versi mobile default blogger, bukan versi mobile dari theme yang diinstal.

Lakukan Langkah-langkah seperti berikut agar yang tampil di perangkat mobile satu tema dengan versi desktopnya:

Pilihlah menu Thema - Customize biasanya ada pilihan combo botton di ujung sebelah kanan kemudian Klik Mobile Setting maka akan diarahkan ke tampilan lain yang ada pilihan MOBILE dan DEKSTOP.

• Pilihan Mobile akan diarahkan ke tampilan Mobile standar bloger.
• Pilihan Dekstop akan diarahkan ke tampilan Mobile yang sama persis dengan Dekstop yang disesuaikan bentuk otomatis dengan smarphone yang digunakan.
• Jangan lupa untuk Klik Save/Simpan seperti gambar dibawah ini.

Itulah cara melakukan Optimalisa tampilan Bloger agar template yang kita instal bisa terbaca pada Website dekstop walaupun dengan menggunakan smarphone. Semoga artikel ini bermamfaat untuk kita semua.

Read More

Buat Related Post pada Blogspot

Cara Membuat Related Post di Blogspot . 

Umumnya template blogger sekarang sudah di katakan rata-rata telah memenuhi kreteria sebagai template user friendly, salah satu komponen pada template yang user friendly adalah related post, tapi berbeda dengan template  standar bawaan dari blogger, template tersebut belum di sertai dengan komponen related post sehingga anda harus menambahkan sendiri konten tersebut ke dalah template html. sudah bicara panjang lebar tapi belum tahu related post itu yang seperti apa, dan apa fungsinya untuk blog kita.

Tidak perlu berlama-lama lagi, langsung saja simak dan pelajari artikel di bawah ini. (Sekali lagi saya sebutkan, apabila template blog anda sudah menyajikan Related Post, abaikan saja ini). Sekedar berbagi saja untuk kawan-kawan.


Cara Membuat Related Post di Bawah Postingan
1. Bukalah akun blogger anda dengan tenang dan damai sejahtera.
2. Pilihlah Elemen Template. Lalu Pilit Edit HTML, jangan lupa centang Expand Template Widget <<<== cara edit html lawas.... lewati langkah ini / langsung lakukan langkah no 3 yah... (update)
3. Carilah kode </head> (Gunakan Ctrl+F untuk mempermudah pencarian), setelah anda menemukannya, letakkanlah kode javascript di bawah ini (Copy) persis di atas kode </head> tadi (Pastekan)

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCvTwHv6yhcs8j8J6vW_IpPylNXNnuzk0GxfbOupyuNil06sceyXuLLsJo2ETB1e2KP_M7OJ-CFRidXpLtlrzNi5M5ZP0yroTtCcOSgPKOwlk96GdJ323JN-JlYdTGQsObW5j4zlbQEk4//") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/>

4. apabila cara no 3 diatas sudah anda lakukan, selanjutnya cari lagi kode berikut : <data:post.body/>, kalau sudah ketemu, letakkan lagi kode di bawah ini (copy) tepat di bawah kode <data:post.body/> (jika data"<data:post.body/>" maka pastekan pada yang kedua)

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

5. Setelah selesai, lalu simpan template blog anda.
6. Lihat hasilnya seperti apa. ( perhatikan pada bagian bawah blog tulisan Related Post :)

Ok, demikian tutorial mengenai Buat Related Post pada Blogsport kali ini. Selamat mencoba, semoga berhasil.

Read More

Cara Menghilangkan Tanda Tang Dan Obeng Pada Blog

Mungkin anda akan bertanya-tanya untuk apa tanda obeng dan Tang atau dengan kata lain Quick Edit di tampilkan, jawabannya sudah pasti untuk mengedit widget-widget di blog kita tanpa harus masuk ke dasbor blog pastinya untuk pengeditan widget lebih cepat pada Blog. 

Pada dasarnya gambar tersebut bukanlah sebuah masalah untuk pengguna blog karena tampilan obeng dan tang tersebut hanya terlihat pada saat pemilik blog sedang login setelah sing out semuanya akan nampak normal alias tidak nampak obeng dan tang lagi.he...he...!

Tapiiiii......!  bagi sobat yang tetap merasa terganggu dengan adanya icon ini dan ingin menghapusnya, maka silakan ikuti caranya di bawah ini:

1. Masuk ke dasbor blog > klik “Template” > klik “Edit HTML”   Seperti gambar di bawah

2. Tekan CTRL+F dan cari kode  dibawah ini di pada template Kemudian hapus kodenya: 

<b:include name='quickedit'/>

Lengkap nya seperti dibawah ini

NOTE: Jumlah kode tersebut biasanya lebih dari satu. Jika icon yang muncul ada lima, maka kodenya juga ada lima. Hapus saja semuanya.
 

3. Klik “Simpan template”  Selesai….. Wassalam

  .........Selamat Bekerja Ya Semoga Sukses.........

Read More