Cara Menyembunyikan Halaman WordPress Dari Google

Pada suatu keadaan mungkin anda perlu menyembunyikan halaman dari Google untuk melindungi privasi atau untuk mengusir pengguna yang tidak diinginkan.

Nah!.,Pada artikel ini, kami akan membagikan cara menyembunyikan halaman WordPress dari Google tanpa mempengaruhi SEO situs anda secara keseluruhan.

Menyembunyikan Post atau Page Dari Google

Search engine seperti Google memungkinkan pemilik situs web untuk mengecualikan konten dari hasil pencarian, maksudnya pemilik situs web dapat menyembunyikan konten mereka dari hasil pencarian search engine. Anda dapat melakukan ini dengan menggunakan file robots.txt pada situs anda atau menggunakan HTML meta tag.

Kami akan membagikan cara melakukan hal ini di WordPress menggunakan dua metode. Pilih salah satu cara yang menurut anda itu yang terbaik bagi situs anda.

Kami juga akan membagikan cara untuk melindungi posting dan halaman dengan sandi di WordPress. Jika anda tidak ingin menggunakan dua metode pertama, maka pendekatan ini akan memungkinkan anda untuk mengontrol visibilitas posting anda dan halaman untuk semua pengguna.

Menyembunyikan Halaman WordPress dari Search Engine Menggunakan Yoast SEO

Jika anda seorang pemula?, kami sarankan untuk memilih cara ini, karena cara ini sangat mudah dilakukan.

Hal pertama yang perlu anda lakukan adalah menginstal dan mengaktifkan plugin Yoast SEO. Selanjutnya, Anda perlu mengedit posting atau halaman yang ingin Anda sembunyikan dari mesin pencari. Gulir ke bawah ke Yoast SEO meta kotak di bawah post editor dan klik pada tombol pengaturan lanjutan.

Baca juga:

Yoast SEO vs All in One SEO Pack - Plugin Mana yang lebih bagus?

Menyembunyikan Halaman WordPress dari Search Engine Menggunakan Yoast SEO

Masuk ke bagian pengaturan untuk menambahkan tag meta robot untuk posting blog atau halaman anda. Menggunakan tag meta robot, anda dapat memberitahu mesin pencari agar tidak mengindeks atau mengikuti halaman.

Pertama anda harus memilih 'noindex' dari menu dropdown di bawah pilihan 'Meta robots index'. Setelah itu, klik 'nofollow' di sebelah 'Meta robot mengikuti' pilihan.

Sekarang, silahkan menyimpan atau mempublikasikan posting atau halaman. Yoast SEO akan menambahkan baris kode seperti dibawah ini untuk posting anda atau halaman:

<meta name="robots" content="noindex,nofollow"/>

Baris ini hanya memberitahu mesin pencari untuk tidak mengikuti atau mengindeks halaman ini.

Menyembunyikan Halaman WordPress dari Search Engine menggunakan file robots.txt

Pada metode ini kita harus mengedit file robots.txt. Menambahkan petunjuk yang tidak valid dalam file ini dapat merugikan yang dapat mempengaruhi SEO pada situs anda. Karenanya, metode ini tidak direkomendasikan untuk pengguna pemula.

File robots.txt adalah file konfigurasi yang dapat anda tambahkan ke direktori root situs WordPress anda. Hal ini memungkinkan sebuah situs web untuk memberikan instruksi untuk bot mesin pencari, sebab itu namanya robots.txt.

Anda dapat mengedit file robots.txt dengan menghubungkan ke situs web anda menggunakan klien FTP atau 'File Manager' di cPanel Wordpress Hosting.

Anda akan harus menambahkan baris ini ke file robots.txt anda.

User-agent: *
Disallow: /Halaman-Anda/

Baris user-agent memungkinkan anda untuk menargetkan bot tertentu. Kami menggunakan tanda asterisk untuk memasukkan semua mesin pencari.

Baris berikutnya mendefinisikan bagian dari URL setelah nama domain anda.

Sekarang mari kita asumsikan bahwa anda ingin menyembunyikan posting blog dengan URL seperti ini:

https://duniatutorials.com/2017/01/lorem-ipsum-baru/

Berikut caranya untuk menambahkan URL ini ke file robots.txt anda.

User-agent: *
Disallow: /2017/01/lorem-ipsum-baru/

Jangan lupa menyimpan perubahan dan upload file robots.txt kembali ke server anda.

Kerugian Menggunakan robots.txt untuk Sembunyikan Konten

Pertama, anda harus ingat bahwa file robots.txt dapat diakses secara publik. Siapa pun dapat mengaksesnya secara langsung untuk melihat apakah ada halaman yang anda coba untuk disembunyikan.

Sementara kebanyakan mesin pencari ikuti petunjuk dalam file robots.txt, banyak crawler dan bot lainnya mungkin hanya mengabaikannya. Ini adalah web bot crawler yang menyebarkan malware, situs target, atau informasi panen seperti account email, nomor telepon, dll

Memberi Password pada Post atau Halaman di WordPress

Metode ini menggunakan pendekatan yang berbeda. Alih-alih meminta mesin pencari tidak mengindeks halaman, anda juga dapat melindungi sandi itu, sehingga hanya dapat dilihat oleh pengguna dengan password.

WordPress dilengkapi dengan fitur built-in untuk melindungi posting dan halaman dengan sandi. Cukup mengedit posting atau halaman yang ingin anda lindungi.

Di bawah kotak meta publikasi, klik pada link 'Edit' atau 'Sunting' di sebelah pilihan 'Visibilitas' atas 'Kenampakan' dalam versi Bahasa Indonesia.

kotak meta publikasi

Ini akan menampilkan opsi visibilitas yang tersedia di WordPress. Anda dapat menyimpan secara publik untuk posting/halaman yang dibuat, pribadi, atau melindunginya dengan sandi.

Post pribadi hanya tersedia untuk pengguna yang sudah login yang memiliki setidaknya hak akses sebagai pengguna atau penulis disitus web anda.

Post dengan password protect dapat dilihat oleh setiap pengunjung yang memiliki password. Klik pada pilihan Dilindungi kata sandi atau Password Protected dan kemudian masukkan password yang kuat sesuai keinginan anda.

Post dengan Password Protected

Sekarang anda dapat mempublikasikan atau menyimpan posting/halamannya.

Sekarang pengunjung yang ingin mengakses posting atau halaman disitus Web anda akan diminta untuk memasukkan password untuk melihat konten, ini hanya untuk post atau halaman yang diberi password saja.

Memberi Password pada Post atau Halaman di WordPress

Mungkin hanya itu, kami berharap artikel ini membantu anda belajar bagaimana cara menyembunyikan halaman WordPress dari Google. Semoga bermanfaat 😄😄

Read more

Cara Mengembalikan Akun Google (Gmail) yang di Nonaktifkan

Ini bisa menjadi pengalaman yang membuat anda frustasi ketika akun Gmail anda tidak lagi aktif. Akun Gmail dinonaktifkan berarti kehilangan akses ke produk Google yang terkait. 

Ada beberapa alasan atau kemungkinan mengapa akun anda di nonaktifkan yang sebagian besar disebabkan karena melanggar Persyaratan kebijakan Layanan oleh Google sendiri.

Jadi, jika anda telah melanggar satu dari kebijakan baik secara sengaja ataupun tidak. Anda akan menemukan akun Gmail anda dinonaktifkan alias di disabled.

Ini membuat kita frustasi karena Google sering menonaktifkan account tanpa peringatan. Namun, kabar baiknya adalah bahwa ada metode sederhana untuk mendapatkan akun anda kembali online alias Enabled.

Akun Gmail Dinonaktifkan Sementara

Ini umumnya paling mudah untuk diatasi karena Google percaya bahwa akun anda dapat dikompromikan. Untuk memperbaiki situasi ini, anda akan diminta untuk memberikan nomor ponsel anda atau memulihkan identifikasi email. 

Jika anda melakukan keduanya, mereka akan mengirimkan pesan teks yang akan memungkinkan Anda untuk mengakses akun anda dengan cepat. Anda hanya perlu untuk melakukannya dalam waktu 48 jam jika tidak maka ini akan mempersulit untuk mendapatkan kembali akun anda.

Akun Gmail Dinonaktifkan Karena Dianggap Melanggar ToS 

Masih dianggap yaa,😄. Jika akun Gmail anda dinonaktifkan termasuk melanggar persyaratan layanan (ToS) Google, maka anda harus mengisi formulir kontak mereka sehingga proses mendapatkan akun Gmail anda dapat dimulai. 

akun gmail dinonaktifkan - Form kontak screenshot

Anda harus membaca ToS secara menyeluruh sehingga pelanggaran tidak akan terjadi lagi dan memberikan alamat email. Jika Anda tidak mendapatkan respon, ulangi langkah setiap dua hari sampai mendapatkan respon.

Begitu mereka merespon, langkah berikutnya yang harus dilakukan untuk mendapatkan akun Gmail anda kembali sehingga anda dapat memperoleh akses secara otomatis untuk semua produk Google termasuk AdSense. Anda juga dapat mengunjungi forum bantuan di mana anda dapat membuka topik 'Akun saya dinonaktifkan' atau 'Gmail account disabled'.

Pertama hanya fokus pada akun Gmail itu sendiri karena itu adalah kunci untuk sisa layanan Google anda. Anda pasti ingin membahas masalah yang anda hadapi dan mengapa hal ini perlu diselesaikan secepat mungkin. 

Jika Kontributor Utama ping thread anda kepada staf di Google, maka anda harus mengharapkan akun anda kembali online dalam 48 jam atau dua hari kerja.

Akun Gmail Dinonaktifkan Karena Melakukan Pelanggaran yang serius terhadap ToS

Jika akun dinonaktifkan Gmail adalah karena pelanggaran serius terhadap Persyaratan perjanjian layanan, serta kebijakan Google yang mengawasi akun anda, maka anda akan memiliki kesulitan yang besar untuk mendapatkan akun anda kembali.

Pelanggaran tersebut akan terjadi apabila akun AdSense yang terlibat dalam Kegiatan Invalid klik, misalnya. Pelanggaran serius yang jelas akan membuat hampir tidak mungkin untuk akun anda akan dipulihkan. 

Jika apa yang terjadi itu tidak dianggap sebagai pelanggaran serius, maka anda harus bisa mendapatkan akun anda dalam waktu 24 sampai 48 jam tergantung pada keadaan.

Jadi, gimana?. Anda sudah mendapatkan akun anda kembali?, jika belum, silahkan coba lagi ataupun buat yang baru aja.

Read more

Menyisipkan Adsense Setelah Paragraf Pertama

Ingin tahu bagian mana dari situs atau blog yang akan membawa anda mendapatkan keuntungan lebih banyak?. Tambahkan AdSense dalam posting dan kemudian periksa heat map Google AdSense yang terkenal. 

Studi terbaru, bagaimanapun penempatannya, menunjukkan bahwa menempatkan AdSense setelah paragraf pertama dari sebuah situs atau blog merupakan salah satu penempatan AdSense terbaik. 

Menyisipkan Adsense Setelah Paragraf Pertama

Sayangnya, platform default Blogger yang ditawarkan oleh Google tidak mengizinkan penempatan iklan setelah paragraf pertama. Tapi karena sudah menjadi salah satu daerah yang paling menguntungkan, banyak webmaster telah mencoba untuk mengambil keuntungan dari penempatan AdSense terbaik. 

Bagaimana kita dapat menikmati keuntungan yang sama?

Untuk mengatasi masalah tersebut, kita hanya akan memindahkan lokasi iklan yang akan ditampilkan dengan menambahkan JavaScript dan DIV. Dengan script berikut, anda dapat dengan mudah memilih paragraf atau heading yang ingin kita tempatkan iklan setelahnya.

Dengan cara ini, anda tidak perlu mengubah setiap posting secara manual seperti tutorial sebelumnya yang harus kita sisipkan anotasinya.

Cara Menampilkan Iklan AdSense setelah Paragraf Pertama di Blogger

Langkah 1. Masuk ke akun Blogger anda, pilih blog anda dan klik tab "Template" di sisi kiri. Buka Template Editor menggunakan tombol "Edit HTML". 

Langkah 2. Setelah editor template terbuka, klik di mana saja di dalam area kode dan tekan tombol CTRL + F (atau Command + F) pada keyboard anda untuk membuka kotak pencarian. 

Cari tag berikut (tekan Enter untuk menemukannya):

<data:post.body/>

Catatan: Anda akan menemukan 2 atau 3, yang pasti lebih dari 1, tetapi kita berhenti pada baris yang kedua, atau jika anda tidak melihat perubahan apapun, uji pada baris yang terakhir. 

Langkah 3. Tambahkan tag DIV dibawah ini yang berwarna merah sebelum dan setelah baris yang kita temukan, seperti ini:

<div id='adsense-target'><data:post.body/></div>

Langkah 4. Salin kode AdSense yang ingin anda tampilkan dan parse code adsense terlebih dahulu dari html ke xml atau menjadi teks biasa. Setelah konversi, tambahkan HTML dibawah ini dan ganti teks "KODE ADSENSE DISINI" dengan kode iklan yang sudah dikonversi tepat di atas garis yang baru saja kita temukan:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='adsense-content' style="display:block;text-align: center">KODE ADSENSE DISINI</div></b:if>

Ingat: Element diatas ditambahkan di atas tag div .

Menyelaraskan AdSense Kiri atau Kanan

Secara default, unit iklan Google AdSense akan muncul di tengah-tengah setelah paragraf pertama. Jika anda tidak puas dengan hasil tersebut dan ingin untuk membungkus teks di sekitar iklan, Anda dapat memilih salah satu opsi di bawah ini: 

a) Sejajarkan AdSense di sebelah kiri - ubah <div id='adsense-content' style="display:block;text-align: center"> dengan:

<div id='adsense-content' style="display: inline-block;float: left;margin:15px 15px 15px 0px">

Setelah modifikasi, iklan akan terlihat seperti ini:

Adsense sejajar di sebelah kiri

b) Sejajarkan iklan AdSense di sebelah kanan konten - ubah <div id='adsense-content' style="display:block;text-align: center"> dengan:

<div id='adsense-content' style="display:inline-block;float:right;margin:15px 0px 15px 15px">

Setelah modifikasi, iklan akan terlihat seperti ini:

Adsense sejajar di sebelah kiri

Langkah 5. Akhirnya, tepat setelah <div id='adsense-target'><data:post.body/></div> pada langkah 2, tambahkan script ini:

<script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition); 
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById(&quot;adsense-content&quot;);
var target = document.getElementById(&quot;adsense-target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>

Catatan:

- Untuk menyisipkan iklan setelah paragraf kedua, ubah"0" pada baris merah dengan "2". 

- Jika Anda ingin menempatkan AdSense tepat di bawah post h2 atau h3, ganti br dari &quot; br &quot; dengan h2 atau h3 . 

Langkah 6. Klik Tombol "Simpan template" untuk menyimpan perubahan dan selesai. 

Dengan trik ini, anda dapat memasukkan AdSense setelah paragraf pertama secara otomatis di Blogger dengan mudah. Sekarang giliran anda untuk memutuskan format yang bekerja dengan baik atau terbaik di situs anda itu gimana, silahkan beritahu kami di kotak Komentar.

Read more

Menambahkan Iklan Adsense di Tengah Post Blogger

Dalam posting sebelumnya, kita sudah mengetahui apa yang harus dilakukan sebelum mendaftar Adsense. Nah jika anda sudah mendaftar adsense dan sudah di approve alias disetujui sama adsense, kali ini kita akan membagikan tutorial Menambahkan Iklan Adsense Di Tengah Post Blogger atau dimana saja yang kita inginkan.

Jadi, Bagaimana kita menampilkan iklan AdSense di tengah posting?

Kita dapat memanipulasi lokasi iklan yang akan ditampilkan dengan menambahkan script dalam template dan menggunakan tag di dalam posting kita pada tempat yang kita ingin munculkan iklan AdSense. Setelah ditambahkan, kita dapat menempatkan iklan di mana saja, baik itu antara paragraf atau di tengah-tengah post, dan lain-lain.

Baca Juga: Menyisipkan Adsense Setelah Paragraf Pertama

Memasukkan Iklan Adsense di tengah postingan secara manual itu sangatlah mudah, ikuti saja langkah-langkah dibawah ini:

Menambahkan Iklan Adsense Di Tengah Post Blogger

Sebelum melanjutkan, ada baiknya bahkan dianjurkan untuk backup template anda: Masuk ke tab "Template" dan klik pada Tombol "Backup/Restore" untuk menyimpan salinan pada hard drive anda.

Menambahkan script

Langkah 1. Hal pertama yang perlu kita lakukan adalah untuk Parse kode AdSense dan mengubahnya menjadi teks biasa. Lalu masuk ke tab "Template", klik pada tombol "Edit HTML" dan klik di mana saja di dalam area kode untuk mencari tag dibawah ini dengan menggunakan tombol CTRL + F:

<data:post.body/>

Catatan: anda akan menemukan 3 atau bahkan 4 kali, namun kita berhenti pada yang kedua, atau jika anda tidak dapat melihat perubahan apapun, uji yang ketiga.

Find <data:post.body/>

Langkah 2. Ganti <data:post.body/> dengan kode dibawah ini:

<div expr:id='"adsmiddle1" + data:post.id'></div>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="clear:both; margin:10px 0">
<!-- Tambahkan kode iklan disini --></div>
</b:if>
</b:if>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Langkah 3. Tambahkan kode Adsense yang sudah dikonversi dengan mereplace tulisan yang berwarna merah atau menaruh dibawahnya "<!-- Tambahkan kode iklan disini -->" , lalu simpan perubahan dengan mengklik tombol "Simpan Template".

Ingat!!!: Kode yang sudah dikonversi.

Catatan: Untuk menengahkan iklan, tambahkan tag <center></center> sebelum dan setelah kode AdSense, seperti ini:

<div style = "clear: both; margin: 10px 0">
<center>
<!-- Tambahkan kode iklan disini -->
</center>
</div>

Menambahkan Anotasi AdSense untuk menampilkan iklan

Langkah 4. Ketika anda membuat New Post, Tambahkan anotasi ini dalam "HTML" dimana anda ingin iklan Google AdSense itu muncul:

<!--Adsense-->

Sebagai contoh:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/><br/<!--Adsense--> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Anotasi adsense di tengah-tengah postingan

Perlu diketahui bahwa jika anda tidak menambahkan anotasi ini untuk menentukan di mana ingin menampilkan iklan, maka akan muncul di bawah judul secara default.

Jadi ini adalah cara kita dapat menambahkan iklan AdSense di tengah atau di mana saja di dalam postingan Blogger kita. Jangan khawatir tentang pelanggaran Persyaratan Layanan Google karena menerapkan metode ini tidak akan mengubah struktur iklan.

Read more

Membuat Tampilan Magazine dengan Ringkasan Artikel dan Thumbnail di Blogger

Template dengan magazine atau newspaper style adalah menampilkan ringkasan atau cuplikan di homepage dengan block kolom di atas satu sama lain. Jenis template ini sangat populer saat ini, apakah itu berita atau blog teknologi, semua orang membutuhkan tata letak magazine style untuk blog mereka.

Ada beberapa cara untuk membuat posting muncul dengan seperti gambaran diatas. Sebuah pilihan akan menggunakan script readmore untuk menampilkan ringkasan post dan menambahkan tag kondisional untuk menambahkan gaya yang berbeda dari posting baru atau pertama, sehingga akan memiliki ukuran width yang lebih besar dari posting lama. 

Jadi, tutorial ini akan menunjukkan cara membuat magazine style untuk Template blogger. Dengan mengikuti tutorial ini, anda dapat membuat template Blogger yang membosankan dan sederhana menjadi lebih menarik dengan tata letak magazine style.

Menambahkan Magazine/Newspaper style pada Template Blogger

Langkah 1. Sebelum melangkah lebih jauh, silakan membuat backup dari template anda saat ini terlebih dahulu untuk memastikan bahwa anda tidak akan kehilangan sesuatu yang penting dari template sebelumnya, caranya login ke Dashboard blogger, pilih blog dan masuk ke tab Template , kemudian klik pada tombol Cadangkan/Pulihkan di sudut sebelah kanan. Setelah anda menyimpan salinan template .xml, klik pada tombol Edit HTML:

Edit Html

Langkah 2. Klik di mana saja di dalam kode area dan buka kotak pencarian dengan menggunakan tombol CTRL+F, lalu cari shortcode dibawah ini:

<data:post.body/>

Catatan: anda menemukan beberapa atau lebih dari satu untuk baris diatas, maka cukup berhenti pada baris yang kedua.

Langkah 3. Hapus baris tersebut dan tambahkan kode dibawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
</b:if>
</span>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a>
</span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Catatan: Anda dapat mengganti tulisan Read More, dengan teks lain seperti 'lebih lanjut', 'lanjutkan membaca', ataupun lainnya. 

Langkah 4. Sekarang cari (CTRL + F) baris dibawah ini:

<b:include data='post' name='post'/>

Langkah 5. Hapus baris itu juga dan gantikan dengan menambahkan code dibawah ini:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
</div> </div>
<b:else/>
<b:include data='post' name='post'/> </b:if>
<b:else/>
<b:include data='post' name='post'/> </b:if>

Catatan: Anda juga dapat mengubah teks Read More di sini, dengan teks yang ingin anda tampilkan. 

Langkah 6. Cari tag </ head> dan paste script dibawah diatasnya:

<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" 
width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}

  var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" 
width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}

var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}
//]]> </script>

Langkah 7. Dan paste script css dibawah diatas tag </head> juga:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.first-post-thumb {
    margin-right: 10px;
}

.summary {
    height: 100%;
}

#first { /* Styles for the First Post Container */
    width: auto;
    height: 250px;
    float: left;
    margin-bottom: 10px;
    background-color: #F4F4F4; /* background color for the first post */
    border: 1px solid #E5E5E5; /* border for the first post */}

.first-body { /* Style for the First Post summary */
    color: #545454;
    font-size: 13px;
    text-align: justify;
    padding: 5px 10px;
    line-height: 1.5em;
}

#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
    border-bottom: 2px solid #DFDFDF;
    color: #515151;
    font-size: 20px;
    display: block;
    margin: 10px auto;
    width: 95%;
    font-size: 20px;
    padding: 0px 0px 4px 0px;
    font-weight: bold;
    text-align: left;
    line-height: 1.4em;
    background: none;
}
#first h3 a:hover { /* Color on mouseover for the First Post Title */
    color: #1061A1;
}

.post { /* Styles for the small posts container */
    float: left;
    margin: 0px 6px 2% 5px;
    width: 46%;
    height: 230px;
    padding: 0px 5px 5px 5px;
    background: #FCFCFC; /* background color for the small posts */
    border: 1px solid #E5E5E5; /* border for the small posts */
    overflow: hidden;
}
.posts-thumb { /* Style for the small posts thumbnails */
    margin-right: 10px;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

h3.post-title a{ /* Style for the small posts titles */
    font-size: 14px;
    color: #747474;
    text-transform: uppercase;
}

h2.date-header { /* Hide the post date */
    display: none;
}
.post-footer {
    display: none;
}
h3.post-title {
    margin: 0px;
}
.readmorebutton {
    margin-top: 5px;
}

.readmorebutton a { /* Styles for the Read More link */
    color: #767676;
    border: 1px solid #E1E1E1;
    background: #EAEAEA; /* Background color for the Read More link */
    text-decoration: none;
    padding: 3px 5px;
    font-weight: bold;
    font-size: 11px;
    float: right;
    position: relative;
}
.post-comment-link { /* Style for the comment bubble of posts below */
    position: absolute;
    top: -35px;
    right: -10px;
    display: block;
    border: 1px solid #E1E1E1; /* border for the comment bubble */
    background: #EAEAEA; /* background color for the comment bubble */
    font-size: 11px;
    position: absolute;
}

#first .post-comment-link { /* Style for the comment bubble of first post */
    position: absolute;
    top: 10px;
    right: 0px;
}
.post-comment-link a { /* Link color for the comments bubble*/
    padding: 10px;
    color: #6A6A6A;
    text-decoration: none;
    font-weight: bold;
}

#blog-pager {
    clear: both;
}</style>
</b:if>
</b:if>

Menyesuaikan Tata Letak Magazine

1. Pada awal script dari langkah 6, kita mengambil bagian ini:

posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;

• Angka pertama pada baris pertama adalah jumlah karakter untuk pos-pos singkat ketika tidak ada gambar yang tersedia
• Nomor kedua atau baris kedua adalah jumlah karakter yang akan muncul bila post singkat memiliki gambar.
• baris 3 dan 4 adalah untuk tinggi dan lebar thumbnail(gambar) pada post singkat.
• pada tulisan yang biru juga memiliki perlakuan yang sama seperti diatas, hanya saja yang berwarna biru untuk posting terbaru/pertama.

2. Dan akhirnya, kita memiliki style CSS. Itu kode yang menentukan bagaimana posting akan terlihat pada homepage dan juga pada halaman arsip, kecuali untuk posting pertamanya.

Untuk mengubah lebar dan tinggi, masing-masing ukuran untuk field posting pertama, ubah pada baris ini:

width: auto;
height: 250px;

Di bawah posting pertama nilai-nilai untuk posting lainnya, cari bagian ini: 

width: 46%;
height: 230px;

Lebar 46% dari lebar kolom utama dan tinggi diatur ke 230px. Di sini Anda mungkin perlu bereksperimen sedikit dengan ukuran untuk membuat mereka lebih bagus, jangan seperti di blog demo. 

Demo

Akhirnya, atur jumlah posting untuk ditampilkan di homepage, sehingga tidak akan ada ruang kosong. Pergi ke Setelan> Pos, komentar dan berbagi > Tampilkan sebanyak mungkin dan pilih jumlah posting yang ingin ditampilkan.

Read more