Tutorial: READMORE UNTUK BLOG 2

READMORE UNTUK BLOG 2

Cara Membuat Read More Otomatis Tanpa Javascript - Ketika membuat blog baru, biasanya tampilan blog masih biasa-biasa saja. Artinya kita masih menggunakan tampilan blog yang diberikan oleh Blogger sendiri. Seiring dengan waktu, muncul kebosanan dan ingin menggantinya dengan yang lain. Ada yang menggunakan template yang dinamis, atau mengutak-atik tampilan blog sesuai keinginan. 

Cara Membuat Read More Otomatis Tanpa Javascript

Read More atau baca Selanjutnya dibuat agar tampilan blog terlihat lebih rapi dan elegan. Tujuannya agar tampilan blog ketika pertama kali dibuka bisa terlihat banyak cuplikan artikel. (Baca disini Cara mempercantik Blog). Dengan begitu, pengunjung bisa melihat cuplikan-cuplikan yang ada di dalam blog kita dan memilihnya satu persatu. Perlu diketahui, bahwa cara membuat read more dibedakan menjadi dua, yaitu read more otomatis dan manual. 

Read More cara menual, dengan memanfaatkan Insert Jump Break pada posting blog, dimana setiap kali ingin posting artikel baru, kita akan mengklik icon / fasilitas Insert Jump Break. Cara ini pastinya kita harus melakukannya setiap menulis artikel (bila lupa maka read more tidak muncul) --> Baca Disini selengkapnya mengenai Membuat Read More Cara Manual. 

Sementara Cara Membuat Read More Otomatis ada dua juga, yaitu dengan menggunakan Javascript dan Tanpa Javascript. Read More Otomatis dengan menggunakan Javascript biasanya memanfaatkan pihak ketiga tempat penyimpanan data script. Seperti .JS dan lain-lain. Info yang Bos Tutorial himpun, bahwa menggunakan cara ini, Google sendiri tidak menyukainya. Bisa jadi alasannya banyak. Oh iya, apabila anda menggunakan template yang dinamis, biasanya sudang menggunakan cara ini. So... tidak usah lagi anda menggantinya dengan yang baru. (abaikan saja tulisan ini).

Cara Membuat Read More Otomatis Tanpa Javascript inilah yang akan kita paparkan disini. Cara ini tidak menggunakan situs pihak ketiga, karena langsung masuk ke script HTML blog kita. Menggunakan cara ini ada manfaatnya, dimana template blog anda akan menjadi lebih SEO Friendly dan ringan. Cara atau trik ini kita akan memanfaatkan kode yang digunakan oleh tampilan mobile blogspot, yaitu post snippet. Oleh karena itu, dalam script HTML blog kita, dilakukan penambahan kode. Ikuti beberapa langkah di bawah ini.

Langkah / Cara Membuat Read More Otomatis Tanpa Javascript

1. Bukalah Akun Blog anda yang sebenarnya (jangan blog orang lain) bila anda memiliki banyak blog dalam satu akun, silahkan pilih salah satu blog saja. 

2. Pilih Elemen Template, kemudian lanjutkan dengan klik Edit HTML

3. Lalu cari kode ]]></b:skin>, untuk mempermudah silahkan menggunakan ctrl+f

4. Copy / salin kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin>

.post-thumbnail{float:left;margin-right:20px}

5. Jangan beranjak dulu, masih seoutar edit HTML. 

6. Cari kode <data:post.body/> apabila sudah ketemu silahkan Copy kode di bawah ini. 

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div>

<b:if cond='data:post.thumbnailUrl'>

<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>

</b:if>

<data:post.snippet/>

</div>

<div class='jump-link'>

<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>

</div>

<b:else/>

<data:post.body/>

</b:if>

<b:else/>

<data:post.body/>

</b:if>

7. Setelah di copy, gantilah kode <data:post.body/> dengan kode yang barusan di copy.

8. Selesai. Simpan template blog anda.

9. Lihat hasilnya.

credit : BosTutorial

Tutorial: Nak center kan BLOG TITLE

Nak Center kan BLOG TITLE

Rujuk sini ya

If you uploaded your header image via Page Elements, Blogger will automatically align it to the left. There are no options for middle and right alignment. So then, it possible to align the image in at the center or to the right of the header?

Yes it is possible -using CSS (Cascading style sheet). But to define a HTML element in CSS you must first know the element ID or class name. After some checking I found out that “header-inner”  is the ID for the content of header widget. So what’s next?

You need to check the image placement method you chose when you uploaded the header image to Blogger in the first place. Different method handled the image differently, thus requiring different codes for alignment.

Once header image placement is known, it’s time to add in the code snippet.

1. Go to Dashboard > Template > Edit HTML.
2. Look for ]]></b:skin> line in your HTML code and add the appropriate CSS code snippet right before it.

Update: Now, instead of the steps above, there is an easier and safer way of adding CSS snippet in your template (opens in a new tab/window). Check it out!

Below are a list of CSS code snippets for you to choose from. Copy and paste them as explained above.

1. If you selected “Behind title and description” option

When you chose this option, Blogger added the banner image as a background to the header. To align it you need to reposition the background image by adding one of these CSS snippets:
(These snippets will not move the header title and description. For header title and description, see Aligning header texts).

• To center

  #header-inner {background-position: center !important; width: 100% !important;}

• To align right

  #header-inner {background-position: right !important; width: 100% !important;}
  

2. If you selected “Instead of title and description” or “Have description placed after the image” option

With this option, the image was added as a <img> HTML element. Use these snippets are to align the element:

• To center

  #header-inner img {margin: 0 auto !important;}
  #header-inner {text-align:center !important;} /*include this line if you are using Template Designer*/

  Use only the first line for normal Layout template. Use both lines if you are using Template Designer.
• To align right

  #header-inner img {margin: 0 auto 0 300px;}

  You need to adjust the left margin (300px in this example) to “push” the image to the right.
• To align vertically
  To align the the image vertically, apply top padding to push it down, like this:

  #header-inner img {padding-top: 50px ;}

  Adjust the value until you get the desired position.

For option 1 and 2 to work, your header image width (plus margin and padding if any) must be equal or less than the container (such as header-wrapper, outer-wrapper etc.) width.

3. Aligning header texts (title and description)

The snippets below are for aligning header title and description. They will work with both text-only header and the text in “Behind title and description” image placement option.

• To center

  #header-inner {text-align: center ;}

• To align right

  #header-inner {text-align: right ;}

• To align vertically
  Apply top padding:

  .titlewrapper {padding-top: 50px  !important;}

  Adjust the value until you get the desired position. For the description, use.descriptionwrapper.

4. Placing image and texts side by side

Use one of these if you want split the header into two parts -an image and a text parts, positioned side by side. These snippets are only applicable to “Behind title and description” image placement option.

• To place image on the left and texts on the right

  #header-inner {background-position: left !important; width: 100% !important;}
  .titlewrapper, .descriptionwrapper {padding-left: 100px !important;}

  Increase left padding to push away texts to the right the header image.
• To place image on the right and texts on the left

  #header-inner {background-position: right !important; width: 100% !important;}
  .titlewrapper, .descriptionwrapper {padding-right: 100px !important;}

  Increase right padding to push away texts to the left of header image.