View AllFeatured

Cara Membuat Auto Readmore Judul di Samping Gambar Thumbnail (Tanpa JavaScript)

Cara Membuat Auto Readmore Judul di Samping Gambar Thumbnail (Tanpa JavaScript)

Cara Membuat Auto Readmore Judul & Teks di Samping Gambar Thumbnail (Tanpa JavaScript)

Ada yang reques cara memasang Auto Readmore Tanpa JavaScript dengan posisi Judul di Samping Gambar Thumbnail, seperti umumnya template blog "zaman now".

Dengan kode Auto Readmore berikut ini, posisi gambar dan judul sejajar. Judul di samping gambar, diikuti snippet atau ringkasan (otomatis diambil dari alinea pertama atau teks bagian teratas postingan), seperti gambar berikut ini:

Auto Readmore Tanpa JavaScript - Judul di Samping Gambar Thumbnail

Tips membuat auto readmore judul di samping gambar thumbnail berikut ini untuk diterapkan di template blog bawaan blogger, khususnya versi Simple.

Langsung saja, ini kode dan cara memasangnya.

Auto Readmore Tanpa JavaScript - Judul di Samping Gambar Thumbnail

1. Tema > Edit HTML
2. Temukan kode <data:post.body/> yang kedua 
3. Ganti dengan kode berikut ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div class='post-snippet' expr:data-snippet='data:post.snippet'/> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> </b:if> </b:if>

4. Temukan lagi kode seperti ini di bawah kode <b:includable id='post' var='post'>

      <h3 class='post-title entry-title' itemprop='name'>
<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>

5. Hapus kode tersebut dan Ganti dengan kode berikut ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:post.thumbnailUrl'> <img class='post-thumbnails' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/> <b:else/> <img alt='no image' class='post-thumbnails' src='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'/> </b:if> </b:if> </b:if> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.title'> <h2 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> </h2> </b:if> <b:else/> <h1 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> </h1> </b:if>
    </b:if>

6. Pasang Kode CSS Autoreadmore berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <style type='text/css'> .post-body{border-top:2px solid #ddd;padding-top:10px;font:normal 14px &#39;Arial&#39;, serif;margin:1.0em 0 .75em;line-height:1.3em;} .post-snippet:before{content:attr(data-snippet);} h3.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0} h3.date-header,.post-timestamp,.post-footer,.feed-links {display:none} .post {float:left;margin:10px 5px 0;overflow:hidden;padding:7px 7px 5px;positon:relative;width:100%;height:auto;} .post h1,.post h2{line-height:1em;margin:0 0 4px;padding:0;font:bold 12px Tahoma} .post-body{font:12px arial;border-top:none;padding-top:0px;background:none;margin:0;text-align:left} .post h1,.post h2{font:24px Oswald;line-height:1.2em;color:#444;margin:.0em 0 0;padding:4px 0} .post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#444;} .post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#0a2e56} .date-header {display:none}.post-thumbnails {
    margin: 0 15px 5px 0;
    float: left;
    width: 100px;
    height: 90px;

    object-fit: cover;
}
.post h2 {
    font-size: 18px;
    line-height: 1.2em;
    color: #444;font-family:Arial,Sans-serif;
    margin: .0em 0 0;
    padding: 4px 0;
}
</style> </b:if></b:if>

Kode warna merah adalah ukuran gambar thumbnail dan ukuran huruf judul posting

7. Cari dan ganti kode kode berikut ini:

<b:includable id='mobile-index-post' var='post'>
...........  banyak kode lain di sini ..........
</b:includable>

Dengan kode berikut ini ini:

<b:includable id='mobile-index-post' var='post'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<div class='Image-thumb'>
<b:if cond='data:post.thumbnailUrl'>
<b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 350, &quot;4:3&quot;) : data:post.thumbnail' var='image_bro'><img expr:alt='data:post.title' expr:src='data:image_bro'/></b:with>
<b:else/>
<img expr:alt='data:post.title' src='https://1.bp.blogspot.com/-GlygfzLesKI/WSbC_DROQOI/AAAAAAAAAdA/XkZ-ommcuGgaJ1UEhmxMZpaq_RoDBX_OACLcB/s320/no-image.PNG'/>
</b:if>
</div>
<a expr:href='data:post.url'>
<h3 class='post-title entry-title' itemprop='name'>
<data:post.title/>
</h3>
</a>
<div class='post-info'>
<span class='post-author'><i class='fa fa-user'/>&amp;nbsp;<b:if cond='data:post.authorProfileUrl'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a><b:else/><data:post.author/></b:if></span>
<span class='post-date'><i class='fa fa-calendar'/>&amp;nbsp;<data:post.dateHeader/></span>
<span class='post-timestamp'><i class='fa fa-clock-o'/>&amp;nbsp;<abbr class='published' expr.title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span>
<span class='post-labels'><b:if cond='data:post.labels'><i class='fa fa-tag'/>&amp;nbsp;<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if></b:loop></b:if></span>
<span class='post-comm'><i class='fa fa-comment'/>&amp;nbsp;<b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;} and data:post.allowComments' data='post' name='comment_count_picker'/></span>
</div>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
<div class='post-body entry-content' expr:id='&quot;summary&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:post.snippet'>
<data:post.body/>
</b:if>
</div>
</div>
<script type='text/javascript'>
createSnippet(&quot;summary<data:post.id/>&quot;);</script>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
<div style='clear:both;'/>
</div>
</b:includable>

Save!
Simpan template.

BERESSSS....!

Jika Anda "pusing" dengan cara di atas, dan ingin yang sudah jadi, alias ingin enaknya saja, silakan download kode file xml template simple bawaan blogger yang sudah dipasang kode autoreadmore di atas. (Download).

Cara lain sudah CB share di posting cara memindahkan Judul ke Samping gambar Thumbnail

Demkian Auto Readmore Tanpa JavaScript - Judul di Samping Gambar Thumbnail. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Menampilkan Daftar Label Blog Dua Kolom Responsive Keren

Cara Menampilkan Daftar Label Blog Dua Kolom Responsive Keren

Cara Menampilkan Daftar Label Blog Dua Kolom Responsive Keren di Sidebar.

SEBELUMNYA CB sudah berbagi kode mempecantik widget label. Ada yang label efek dan label warna-warni.

Kali ini CB berbagi kode CSS untuk modifiksi tampilan label di sidebar atau footer blog berupa kotak dua kolom, seperti gambar berikut ini:

Label Blog Dua Kolom Responsive

Bagus 'kan? Simple tapi Keren! Nama-nama Label jadi tampak rapi dan profesional.

Cara Menampilkan Daftar Label Blog Dua Kolom Responsive

Ini Cara Menampilkan Daftar Label Blog Dua Kolom Responsive seperti gambar di atas.

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

.Label {display: block;width: 100%;background: #fff;margin: 0 auto;padding:10px 0;}
.Label a:link,.Label a:visited {color:#2b2b2b}
.Label .widget-content { padding: 5px 0; margin: 0;}
.Label ul {list-style-type: none;margin: 0 0px;padding: 0; }
.Label ul li {float: left;width: 42.5%;margin: 0 7px 5px 0;color:#616060;text-decoration: none;padding: 6px;display: block;text-align: left;text-indent: 0px;font-size: 14px;background: #FFF;border: 1px solid #EFEFEF;text-transform: capitalize;border-radius: 1px;-moz-border-radius: 1px;-webkit-border-radius: 1px;}

3. Save!
4. Pasang Widget Labelnya: Add a Gadget > pilih Label
5. Klik "List" seperti dalam gambar ini:

Add a Gadget > pilih Label

Save!

Demikian Cara Menampilkan Daftar Label Blog Dua Kolom Responsive. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Mengaktifkan HTTPS untuk Blog Custom Domain

Cara Mengaktifkan HTTPS untuk Blog Custom Domain

Cara Mengaktifkan HTTPS untuk Blog Custom Domain
Cara Mengaktifkan HTTPS untuk Blog Custom Domain.

Di posting sebelumnya CB sudah ulas ringkas pengertian dan perbedaan http dan https. Intinya, HTTPS lebih aman dan lebih SEO Friendly.

Jika ingin pengunjung mengakses blog melalui HTTPS saja, Anda dapat mengaktifkan pengalihan HTTPS. Blogger sudah memandunya di laman Mengaktifkan pengalihan HTTPS untuk blog.

Kelebihan HTTPS

Disebutkan, ada tiga manfaat utama menggunakan HTTPS dibandingkan HTTP untuk mengakses blog Anda:
  1. Membantu memeriksa bahwa pengunjung Anda membuka situs yang benar dan tidak dialihkan ke situs berbahaya.
  2. Membantu mendeteksi jika ada penyerang yang mencoba mengubah data yang dikirim oleh Blogger ke pengunjung.
  3. Menambahkan langkah-langkah keamanan yang membuat lebih sulit bagi orang lain untuk mendengarkan percakapan pengunjung Anda, melacak aktivitas, atau mencuri informasi mereka.

Bila mengaktifkan pengalihan HTTPS, pengunjung selalu menjangkau versi terenkripsi blog Anda di https://contohblognih.blogspot.com.

Untuk mengaktifkan pengalihan HTTPS di blog belum Custom Domain
  1. Masuk ke Blogger.
  2. Pilih blog untuk diperbarui.
  3. Di menu sebelah kiri, klik Setelan > Dasar.
  4. Di sebelah kanan, pilih Ya di bagian "HTTPS" > "Pengalihan HTTPS".

Jika Anda menonaktifkan pengalihan HTTPS, pengunjung memiliki dua pilihan untuk melihat blog:
Melihat versi tidak terenkripsi blog Anda di http://contohblognih.blogspot.com
Melihat versi terenkripsi blog Anda di https://contohblognih.blogspot.com

Cara Mengaktifkan HTTPS untuk Blog Custom Domain

Blogger sudah menyediakan fitur HTTPS untuk blog Custom Domain atau blog dengan nama domain sendiri. Misalnya, http://www.cbblogger.com diubah atau dialihkan menjadi https://www.cbblogger.com.

Jika pengunjung membuka http://www.cbblogger.com atau http://cbblogger.com atau cbblogger.com, maka akan dialihkan otomatis ke https://www.cbblogger.com

Untuk mengaktifkan HTTPS di Blog Custom Domain, berikut ini langkahnya:

1. Login ke Blogger
2. Buka Draft Blogger (https://draft.blogger.com/)
3. Klik Setting > Basic > pilih Yes di HTTPS Availability


Cara Mengaktifkan HTTPS untuk Blog Custom Domain


4. Halaman akan refresh otomatis
5. Tunggul 5-10 menit.
6. Refresh halaman (Tekan F5)
7. Pilih Yes di menu HTTPS Redirect

Hasil akhirnya seperti dalam gambar ini:

Cara Mengaktifkan HTTPS untuk Blog Custom Domain

Demikian Cara Mengaktifkan HTTPS untuk Blog Custom Domain.

PASTIKAN!
Agar blog tampil normal setelah https diaktifkan, pastikan SEMUA kode atau link http di dalam widget dan template diubah juga menjadi https.

Namun, untuk kode yang disimpan di http://yourjavascript.com tidak bisa diubah menjadi https://yourjavascript.com karena alamat url yang digunakan yourjavascript http, bukan https.

RISIKO
Karena blog kita menggunakan alamat baru, yakni tadinya http menjadi https, maka Google butuh waktu untuk menyesuaikan hasil perambahan dan indeksinya (crawling and indexing). 

Dalam satu-dua hari atau lebih, trafik kemungkinan menurun. Demikian juga penghasilan AdSense. Namun, setelah itu akan normal kembali, bahkan bisa naik karena https lebih ramah mesin pencari (seo friendly).

Demikian Cara Mengaktifkan HTTPS untuk Blog Custom Domain. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Membuat Featured Post Slider di Halaman Depan Blogger

Cara Membuat Featured Post Slider di Halaman Depan Blogger

Cara Membuat Featured Post Slider di Halaman Depan Blogger. Penampakannya seperti gambar di bawah ini. Cek demonya yang jadi sumber kode.

Featured Post Slider di Halaman Depan Blogger

Cara Membuat atau Memasangnya

1. LINK
Simpan di bawah kode <head>

<link href='http://s3.envato.com/files/376136/css/siteFeature.style_screen.css' rel='stylesheet' type='text/css'/>
<link href='http://s3.envato.com/files/376136/css/demo.css' rel='stylesheet' type='text/css'/>

2. CSS
Simpan di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#slider {width:99%;padding:15px 0 5px;float:left;}
#siteFeature {width:100%!important;}
#siteFeature #imgBgContainer div {}
#siteFeature.left #imgBgContainer {}
#siteFeature.left #tabContainer {width:200px !important;}
#siteFeature #tabContainer a:link, #siteFeature #tabContainer a:visited {width:200px !important;}
#siteFeature.left #tabContainer a.selected span {width:200px !important;}
#siteFeature-nav #SF-n-prev {top:210px !important;}
#siteFeature-nav #SF-n-next {top:496px;}
</style>
</b:if>

3. JavaScript
Simpan di atas kode </head>

<script src='http://s3.envato.com/files/376136/js/jquery-1.3.2.min.js' type='text/javascript'></script>
<script src='http://s3.envato.com/files/376136/js/jquery.siteFeature.pack.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#preFeature').siteFeature({
autoPlay: true,
autoPlayInterval: 5000,
tabBgImg: "http://s3.envato.com/files/376136/images/arrow-left.png" });
}); // end $(document).ready

//]]>
</script>
<script src='http://s3.envato.com/files/376136/js/demo.js' type='text/javascript'/>

4. HTML
Simpan di bawah kode <div id='main-content'> atau <div id='content-wrapper'> atau <div id='main'> dan sejenisnya (area postingan utama).

<div id='slider'>
<div id='preFeature'>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.' width='540px !important'/>
<h3>Tab number #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
</div>
<!-- // end --></div>
</b:if>

Ganti tulisan warna merah

CARA KEDUA
Cara kedua ini dengan menyimpan kode HTML di Layout agar memuahkan edit link gambar dan deskripsnya.

Langkah 1 s.d. 3 sama dengan langkah di atas. Yang beda cuma langkah ke 4 dan ditambah langkah 5 dan 6.

4. Membuat Widget Baru

Simpan kode berikut ini di bawah kode <div id='main-content'> atau <div id='content-wrapper'> atau <div id='main'> dan sejenisnya (area postingan utama).

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slider'>
<b:section class='slider' id='slider' showaddelement='yes'>
</b:section>
</div>
</b:if>


5. Save Template!
6. Klik Layout/Tata Letak.

Akan muncul area widget baru seperti ini. Jika belum muncul, refresh halaman (Tekan F5)

widget baru slider

7. Klik Add a Gadget > Pilih HTML/JavaScript
8. Masukkan kode berikut ini:

<div id='slider'>
<div id='preFeature'>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.' width='540px !important'/>
<h3>Tab number #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image01.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image02.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image03.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
<div>
<img alt='alt text' src='http://s3.envato.com/files/376136/images/image04.jpg' title='This is a much shorter text description.'/>
<h3>Tab number #8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.</p>
<a href='#'>Read more</a>
</div>
</div>
<!-- // end --></div>
</b:if>

Ganti kode warna merah

9. Save!

Demikian Cara Membuat Featured Post Slider di Halaman Depan Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*

Top 10 Situs Berita Terpopuler Dunia & Indonesia

Top 10 Situs Berita Terpopuler Dunia & Indonesia

Top 10 Situs Berita Terpopuler Dunia & Indonesia
Top 10 Situs Berita Terpopuler Dunia & Indonesia. Terbanyak Dibaca/Dikunjungi.

Didorong rasa ingin tahu situs berita (media online, media siber, news site) terbanyak dibaca, dikunjungi, atau terpopuler di dunia dan di Indonesia, CB buka Alexa.

Kayaknya Alexa masih jadi rujukan utama soal peringkat situs web dunia.

Situs berita terpopuler di Indonesia, Alexa menempatkan Tribunnews dan Detik sebagai dua situs berita terbanyak dikunjungi.

Tribunnews unggul dari kategori Trafik dari Pencarian (56%), Detik  20%. Namun, untuk tiga kategori lainnya, Detik yang unggul: Daily Times on Site 10:6, Daily Pageviews 7:3, Link 93:41.

Dapat dimengerti kenapa Tribunnews unggul di trafik pencarian karena nulis bertanya "niat banget" untuk diindeks Google dengan baik, khususnya dalam hal Internal Linking dan Multiple Page untuk meningkatkan PageViews.

Top 10 Situs Berita Terpopuler di Indonesia

1. Tribunnews
2. Detik
3. Kompas
4. Liputan6
5. Merdeka
6. Sindonews
7. IDN Times
8. Kumparan
9. Okezone
10. Tempo

Sumber

Top 10 Situs Berita Terpopuler di Dunia


  1. CNN
  2. NY Times
  3. The Guardian
  4. Washington Post
  5. BBC
  6. India Times
  7. Forbes
  8. FOX News
  9. Huffington Post
  10. Bloomberg


Sumber

Demikian Top 10 Situs Berita Terpopuler Dunia & Indonesia. (www.contohblog.com).*

Meta Open Graph Twitter & Facebook untuk Munculkan Gambar & Deskripsi Saat Share Medsos

Meta Open Graph Twitter & Facebook untuk Munculkan Gambar & Deskripsi Saat Share Medsos

Berikut ini kode Meta Open Graph (OG) Twitter & Facebook. Fungsinya untuk memunculkan gambar & deskripsi posting saat share di medsos Twitter dan FB.

Meta Open Graph Twitter & Facebook untuk Munculkan Gambar & Deskripsi Saat Share Medsos

Meta Open Graph Twitter & Facebook

Meta Open Graph Twitter & Facebook

Jika postingan Anda tidak tampil lengkap --judul, link, gambar, dan deskripsi-- saat dibagikan di Facebook dan Twitter, silakan pasang kode berikut ini di bawah kode <head> atau sebelum kode CSS Template <b:skin>

<!-- Twitter Card Start -->
<meta content='summary' name='twitter:card'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='URL Gambar Alternatif' name='twitter:image:src'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<!-- Twitter Card End -->
<!-- Facebook OG Meta Tag Start -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta content='blog' property='og:type'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL Gambar Alternative' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='xxxxxxx' property='fb:admins'/>
<meta content='xxxxxxx' property='fb:app_id'/>
<!-- Facebook OG Meta Tag End --> 

Ganti kode warna merah dengan versi Anda. Demikian Meta Open Graph Twitter & Facebook untuk Munculkan Gambar & Deskripsi Saat Share Medsos. Good Luck! (www.contohblog.com).*

Cara Pasang Iklan di Awal Postingan, Bawah Judul, dan di Bawah Artikel

Cara Pasang Iklan di Awal Postingan, Bawah Judul, dan di Bawah Artikel

Berikut ini cara memasang iklan (Google AdSense atau Iklan Apa Pun) di awal postingan, di bawah judul tulisan, dan di akhir artikel blog.

Untuk iklan di awal postingan, penampakannya seperti dalam gambar berikut ini:

Cara Pasang Iklan di Awal Postingan, Bawah Judul, dan di Bawah Artikel


Cara Pasang Iklan di Awal Postingan

1. Tema > Edit HTML
2. Simpan kode CSS iklan di awal postingan berikut ini di atas kode ]]></b:skin>

.iklan_atas{display:inline-block;width:auto;height:auto;margin:0 15px 15px 0;float:left}
.iklan_atas img{width:100%;max-width:336px;max-height:280px}

3. Simpan kode HTML iklan di awal tulisan ini di atas kode <data:post.body/> yang ketiga atau keempat.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='iklan_atas'>
<div style="width:336px;height:280px;line-height:280px;text-align:center;background-color:darkgreen;color: white;">336x280</div>
</div>
</b:if>
4. Ganti kode warna merah dengan kode iklan yang akan Anda pasang.

Catatan: ukuran Iklan di atas 336x280. Anda bisa ubah misalnya menjadi 300x250 Pixel.

Cara Pasang Iklan di Bawah Judul dan di Bawah Artikel

Iklan di bawah judul dan di akhir postingan, demonya seperti di blog CB ini. Cara memasangnya sebagai berikut.

1. Untuk memasang iklan di bawah judul, simpan kode berikut ini di atas kode <data:post.body/> yang ketiga atau keempat.

<div style='margin:15px 0'>
<!-- KODE IKLAN DI SINI-->
</div>

2. Untuk memasang iklan di akhir postingan, copas kode berikut ini di bawah kode <data:post.body/> yang ketiga atau keempat.

<div style='margin:15px 0'>
<!-- KODE IKLAN DI SINI-->
</div>


Jika kedua kode tersebut digabungkan, maka hasilnya seperti ini:

<div style='margin:15px 0'>
<!-- KODE IKLAN DI SINI-->
</div>
<data:post.body/>
<div style='margin:15px 0'>
<!-- KODE IKLAN DI SINI-->
</div>

Mudah 'kan Cara Pasang Iklan di Awal Postingan, Bawah Judul, dan di Bawah Artikel? Good Luck and Hapy Blogging! (www.contohblog.com).*


Cara Membuat Tulisan yang Baik untuk Blog

Cara Membuat Tulisan yang Baik untuk Blog

Cara Membuat Tulisan yang Baik untuk Blog agar Ramah Pengguna.
Cara Membuat Tulisan yang Baik untuk Blog agar Ramah Pengguna.

Format posting merupakan isu penting dalam desain blog atau website. Ini menyangkut aspek scannability dan readability.

Bagaimana format posting blog yang baik? Salah satunya adalah gunakan rata kiri (text align left)!

Perhatikan tampilan posting blog Anda. Apakah tampilan teks (naskah tulisan)-nya rata kiri ataukah rata kiri-kanan (justify)?

Jika rata kiri-kanan (justify), sehingga tampilannya seperti format teks tulisan di koran, buku, atau surat resmi, itu artinya blog Anda menganut "aliran resmi-formal" dan "kaku".

Tampilan posting rata kiri-kanan alias full-justified tidak lazim. Selain membuat kaku, memperlambat user untuk membacanya, tampilan teks justify ini juga akan tampak buruk jika ada di kolom sempit.

Sebaliknya, tampilan posting atau teks rata kiri (align-left), akan lebih mudah dibaca, lebih enak dilihat (dipindai/scanned), dan ini artinya memenuhi aspek "readability naskah online".

Bandingkan kedua format posting ini

format posting


Agak sulit mencari referensi soal text-alignment ini. CB menemukan salah satu yang "agak lengkap" di forum Stack Exchange: Best Way to Align Text on a Website.

Disebutkan, rata kiri digunakan secara umum di situs-situs populer, termasuk Google dan Facebook. User membaca dari kiri ke kanan, kecuali dalam bahasa Arab. Sehingga, jika posting blog kita tidak menggunakan rata kiri, maka itu akan mengurangi tingkat keterbacaan (decrease readability).

Kebiasaan user membaca format naskah rata kiri ini jangan diubah di blog kita. Maka, gunakan rata kiri di format posting blog Anda.

Cara mengeditnya, cari kode berikut ini atau yang mirip, lalu ubah justify menjadi left

.post {margin:.5em 0 1.5em;border-bottom:1px dotted $bordercolor;padding-bottom:1.5em;text-align:justify;}

HURUF KAPITAL

Selain soal rata kiri, jangan gunakan ALL CAPS atau semua huruf kapital, baik buat judul posting (post title) maupun isi posting (post body).
Full capitalisation is more tiring and slower to read, because it reduces recognition by making all letters a similar size.

Banyak penulis hebat kurang memperhatikan soal format posting ini di blognya atau di media sosialnya. Tulisan mereka bagus, namun kurang diminati karena soal format naskahnya yang tidak scannable dan readable.

Baca: Jangan Gunakan Huruf Kapital Semua di Judul Tulisan Blog

Hal penting lainnya

  • Gunakan alinea pendek. Hindari anak kalimat.
  • Perbanyak ruang kosong atau ruang putih (white space), yakni gunakan jarak antar alinea. 
  • Gunakan bullet-point dan/atau numbering biar lebih enak dibaca.
  • Gunakan huruf tebal (bold) untuk poin penting.
  • Gunakan subjudul (Subheading) untuk membagi isi posting panjang menjadi beberapa bagian
Format Posting Blog yang Baik disukai user. Apa pun yang disukasi user, disukai pula oleh mesin pencari. Dan apa yang disuka mesin pencari, itulah SEO Blog!

Demikian Cara Membuat Tulisan yang Baik untuk Blog agar Ramah Pengguna. Good Luck and Happy Blogging! (www.contohblog.com).*

Jangan Gunakan Semua Huruf Kapital (All Caps) di Judul Posting Blog

Jangan Gunakan Semua Huruf Kapital (All Caps) di Judul Posting Blog

Selain Tidak User Friendly karena Sulit Dibaca, Penggunaan Semua Huruf Kapital (ALL CAPS) di Judul Posting Blog juga melanggar etika internet.

BANYAK template blog menggunakan "semua huruf kapital" (ALL CAPS) di judul posting. Tidak ada yang salah, tapi penggunaan All Caps di judul posting, sangat tidak dianjurkan oleh para pakar usability & visibility web.

Banyak juga blogger yang masih membuat judul tulisan dengan menggunakan huruf semua kapital semua.

Ini contoh template blog yang menggunakan ALL CAPS di judul posting:

template blog yang menggunakan ALL CAPS

Silakan bandingkan dengan judul yang sudah diubah menjadi "normal" (tidak All Caps):

tidak All Caps

Jelas bedanya. Judul yang "normal" (tidak All Caps) lebih scannable, readable, dan visible sehingga user friendy, mudah dibaca, nyaman di mata, dan mudah dicerna.

All Caps Tidak User Friendly & Langgar Etika Internet

Alasan utama kita harus menghindari judul tulisan semua huruf kapital adalah:
  1. All Caps sulit dipindai mata (scan), sulit dibaca, sehingga tidak user friendly.
  2. All Caps dalam dunia tulis-menulis berarti "berteriak". All Caps means Shouting!
Kode etik menulis email melarang penggunan All Caps. Wikipedia juga melarang All Caps dalam penulisan naskahnya.

Penggunaan "semua huruf kapital" juga melanggar kode etik internet (netiket). Salah satu etika internet (netiquette) menyebutkan: "Don't use All Caps". Selengkapnya silakan simak: How Capital Letters Became Internet Code for Yelling.

Bahan telaah atau referensi lainnya, guna meyakinkan kita bahwa kita harus menghindari All Caps (Semua Huruf Kapital) dalam judul posting blog, cukup banyak, antara lain sbb:

Demikian ulasan "ringkas" tentang penggunaan huruf kapital semua (All Caps) dalam judul berita, judul tulisan, judul posting blog, ataupun judul & isi email.

Baca Juga: Cara Menulis Posting Blog yang Baik

Semoga kita tercerahkan. (http://www.contohblog.com/).*

Cara Membuat Breaking News di Blog

Cara Membuat Breaking News di Blog

Cara Membuat Breaking News di Blog

Breaking News atau Headline News yaitu widget blog berisi posting terbaru yang tampil di bagian header, di atas logo atau di bawah menu. Desainnya seperti running text (teks berjalan).

Cara Membuat Breaking News di Blog


Breaking News ini biasanya dipasang di template blog magazine style atau blog berita. CB sih tidak menganjurkan pasang. Soalnya, selain hanya bikin loding blog jadi berat, juga kayaknya gak penting dipasang.

Namun, masih aja ada blogger yang mau pasang, seperti klien layanan premium CB. Maka, jaga-jaga ada yang mau pasang lagi, CB simpan kodenya berikut ini plus cara memasangnya.

Cara Membuat Breaking News di Blog

Kode CSS:
Dipasang di atas kode ]]></b:skin>

#breakingnews {
  float: left;
  height: 40px;
  line-height: 42px;
  overflow: hidden;
  width: 100%;
  background: #eee;
  box-shadow: 0 2px 7px -3px #000;
  -ms-box-shadow: 0 2px 7px -3px #000;
  -moz-box-shadow: 0 2px 7px -3px #000;
  -o-box-shadow: 0 2px 7px -3px #000;
}
#recentpostbreaking li a {
color:#949494;
font-family: sans-serif;
font-weight: bold;
}
#recentpostbreaking li a:hover {
color:#e91b23;
}
 #breakingnews .tulisbreaking {
background:#e91b23;
}
 #breakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
#breakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: left;
font-family: sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
  background: url(http://3.bp.blogspot.com/-xD-8rredGa0/VYhMCriYg2I/AAAAAAAAF1U/8-DoLAjUM04/s1600/ticker-bg.png) no-repeat right center;
  color: #fff;
  float: left;
  font: 700 20px/20px 'Oswald',sans-serif;
  max-width: 155px;
  height: 20px;
  padding: 10px 25px 10px 20px;
  text-transform: uppercase;
}
#recentpostbreaking {
    float: left;
    margin-left: 155px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
div#fontoo {
width: 100%;
display: block;
line-height: 0;
overflow: hidden;
border-bottom: 1px solid #dfdfdf;
}
div#fontoo p {
margin: 0px 30px;
font-size: 16px;
text-shadow: 0 1px 0 #fff;
color: #333;
font-family: 'Ubuntu', Arial, Lucida, sans-serif;
}

Kode HTML:
Pasang di posisi di mana breakingnews ini mau ditampilkan, misalnya di bawah kode menu navigasi.

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='fontoo section' id='fontoo'>
   <div id='breakingnews'>
            <span class='tulisbreaking'>
              DON&#39;T MISS
            </span>
            <div id='recentpostbreaking'>
              Loading...
            </div>
          </div>
          <script type='text/javascript'>
            //<![CDATA[
            $(document).ready(function () {
              var url_blog = 'https://contohblognih.blogspot.com/', // Replace With your Blog Url
                  numpostx = 20; // Maximum Post
              $.ajax({
                url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
                type: 'get',
                dataType: "jsonp",
                success: function(data) {
                  var posturl, posttitle, skeleton = '',
                      entry = data.feed.entry;
                  if (entry !== undefined) {
                    skeleton = "<ul>";
                    for (var i = 0; i < entry.length; i++) {
                      for (var j=0; j < entry[i].link.length; j++)
                      {
                        if (entry[i].link[j].rel == "alternate")
                        {
                          posturl = entry[i].link[j].href;
                          break;
                        }
                      }                       posttitle = entry[i].title.$t;
                      skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
                    }
                    skeleton += '</ul>';
                    $('#recentpostbreaking').html(skeleton);
                    // kode untuk efek pada breaking news
                    function tick(){
                      $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
                    }
                    setInterval(function(){ tick () }, 5000);
                  } else {
                    $('#recentpostbreaking').html('<span>No result!</span>');
                  }
                },
                error: function() {
                  $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
                }
              });
            });
            //]]>
          </script>
      </div>
      </b:if>

3. Ganti alamat blognya.
4. Save Template!

Demikian Cara Membuat Breaking News di Blog. Good Luck & Happy Blogging! (www.contohblog.com).*

Contact Form

Name

Email *

Message *