Cara Membuat Artikel Terkait dengan Gambar / Thumbnail. Assalamualaikum wr.wb, sobat blogger pada postingan kali ini Kang Aluha berkesempatan untuk memberikan tutorial blogger blogspot mengenai cara membuat artikel terkait dengan gambar / thumbnail. Menurut pakar SEO dengan membuat artikel terkait dengan gambar atau tanpa gambar hanya berbentuk tulisan saja akan meningkatkan jumlah pengunjung atau dalam bahasa blogger disebut Pageviews. Artikel terkait ini umumnya diletakan di akhir pembahasan atau di bawah postingan, karena letaknya efektif dan mudah dilihat oleh pembaca / pengunjung.

Artikel terkait ini dilengkapi dengan gambar dengan ukuran sedang dan judul posting yang terletak tepat di bawah gambar. Survei juga membuktikan bahwa membuat artikel terkait / related post yang dilengkapi dengan gambar ini akan lebih banyak dilihat dan diklik oleh pengunjung / pembaca artikel, karena tampilannya yang keren dan membuat pengunjung penasaran dan terpukau, Lebay :D

Penerapan CSS & JavaScript Artikel Terkait Bergambar

• Masuk / Login ke www.blogger.com 
• Pada Dashboard pilih Template → Edit HTML → Ceklis Expand Template Widget 
• Letakan CSS & JavaScript berikut ini di bawah kode ]]></b:skin> 

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3_WSiVmG0e9hdP1m_0Zj9uFmxdvNGOTiDmKzUVPtPHj1lJ2BV5XgwJmVdhEvU7xK2yBkQe3K2qyzdXkyBQs37IhrSQ9EiHFvzJM-vU1tlzJRyEkPdpaTux2TAXdniTxxxDzEFs3AORjE/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://giovanialuha.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>

Penerapan Kode HTML Artikel Terkait Bergambar

Tahap ini merupakan tahap akhir pada tutorial membuat artikel terkait dengan gambar / thumbnail yang nantinya akan memunculkan artikel-artikel terkait dengan jumlah yang sudah ditentukan atau sesuai ketentuan pengguna, caranya

• Silahkan Anda cari kode <data:post.body/>
• Kemudian letakan kode di bawah ini setelah kode <data:post:body/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div style='clear:both'/>
</b:if>

• Simpan Template (Save Template) 

Keterangan Terkait Kode Artikel Terkait Bergambar

1. Artikel terkait dengan gambar ini bekerja secara otomatis jadi Anda tidak perlu merubah atau menambahkan alamat feeds yang sudah ada.

2. Artikel terkait dengan gambar ini bekerja pada halaman postingan dan kode di atas tidak berlaku di halaman utama / Home Page.

3. Untuk merubah tampilan artikel terkait dengan gambar, Anda bisa merubah CSS sesuai keinginan jika Anda paham untuk mengeditnya,

4. var maxresults=5; Jumlah artikel terkait yang muncul pada setiap artikel / postingan.

5. var relatedpoststitle="Related Posts"; Judul artikel terkait dan muncul di bawah postingan.

Demikianlah tutorial blogger mengenai cara membuat artikel terkait dengan gambar / thumbnail. Semoga postingan yang berjudul Cara Membuat Artikel Terkait dengan Gambar / Thumbnail ini bermanfaat dan mudah dipahami dan dimengerti.

Terima kasih.

 

Oke langkah untuk menghilangkan tulisan label pada sebuah blogger adalah sebagai berikut

1. Login ke Blogger.
2. Template/Edit HTML
3. Ceklist tulisan Expand Template Widget
4. Cari kode yang sama persis seperti dibawah ini

<span class='post-labels'>
<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,
</b:if></b:loop></b:if>
</span>

Jika Sudah ketemu, maka hapus kode tersebut, save dan lihathasilnya.?

Hai Sobat kali ini Admin Update Artikel Yang Berjudul , Cara Membuat Label Keren Di Blog Dengan Efek CSS3

Cara Membuat Label:

1 . Log In Blogger
2 . Pilih Blog Yang Akan Di Edit
3 . Pergi Ke Template 
4 . Klik Edit HTML
5 . Centang Expand Template Widget
6 . Cari Tulisan ]]></b:skin> ( Tekan Ctrl + F Atau    F3 Di Keyboard Untuk Mencari )
7 . Pasang Kode Di Bawah Ini Tepat Di Atas Kode ]]></b:skin>

/*--- KxMadagascar Custom Label With CSS3 --- */ .Label a{ padding-left:20px; background:#00FFFF; padding:0 20px; color:#000!important; border-radius:100px; -moz-border-radius:100px; height:17px; line-height:17px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#fff; }

10 . Simpan
11 . Sekarang,Pergi Ke Tata Letak 
12 . Cari Label , Terus Klik Edit
13 . Sama-Kan Label Anda Dengan Gambar Di Sebelah Ini
14 . Simpan

NB : Yang Hitam Tebal Di Klik
         Yang Merah Di Cari
         Yang Orange Kotak Label Pertama
         Yang Hijau Text Label Pertama
         Yang Biru Kotak Label Berubah Warna
         Yang Pink Text Label Berubah Warna

Berikut Kodenya:

 <img src="URL gambar" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Berikut Kodenya:

 <img src="URL gambar" border="1" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>

Nah apabila sobat ingin membuat efek image hover pada semua gambar dipostingan blog secara otomatis, silahkan ikuti langkahnya dibawah ini. yang di tas adalah cara manual.

◉ Berikut cara penerapannya pada blog sobat:

• Login ke Akun Blog
• Rancangan Template Edit HTML *jangan lupa centang expand template widgate
• Cari kode ]]></b:skin>
• Copy dan pastekan kode dibawah ini tepat diatas ]]></b:skin>

◉ Berikut Kodenya:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

• Selanjutnya simpan template

Nah, mungkin sekian dulu pembahasan kali ini tentang Cara Membuat Efek Hover Pada Gambar diblog. Semoga artikel ini bermanfaat buat sobat semua. Selamat mencoba..!!

Sekian dan terimakasih.

Bisa di lihat Contoh gambar di atas apabila sudah mencoba mengarah kan mouse arah gambar , gambar akan memberikan efek zoom kalau kalian sudah melihat gambar diatas silahkan kita mulai tutorial membuat efek zoom pada gambar postingan:

1. silahkan langsung saja kalian login ke blogger.

2. silahkan menuju edit tamplate . jangan lupa untuk centang expant widget.

3. cari kode ]]</b;skin>

4. kalau sudah ketemu silahkan copy kede dibawah ini dan paste diatasnya.

.post img:hover {
-moz-trnasform: scale(1.3) ;
-webkit-transform: scale(1.3);
-o-transform: scale(1.3)  ;
-ms-transform: scale(1.2)  ;
transform: scale(1.3) ;}

NB : kalau dalam template kalian ada kode  .post img:hover sebelum kode yang kalian taruh alangkah baiknya kalau kalian hapus dulu.

1. Seperti biasanya kawan-kawan harus membuka akun blog kawan sendiri.
2. Masuklah ke Template blog kawan Pilih Edit HTML dan Lanjutkan.
3. Jangan lupa Centang Expand Template Widget
4. Carilah kode </head> (gunakan Ctrl + F untuk memudahkan pencarian.
5. Setelah ketemu kode tersebut, copylah kode scrip di bawah ini dan pastekan tepat diatas kode </head>

<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>

6. Setelah kawan menempatkan kode script di atas, lalu carilah kode <data:post.body/>
7. Sudah ketemu kah ?
8. Lalu copylah kode script di bawah ini dan tempatkanlah (paste) tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>Silahkan salin/pasang embed link di bawah ini bila Anda  ingin memasangnya di situs yang Anda inginkan:</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;HTML Link:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Forum Link:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'><a href='http://capoenk-blog.blogspot.com/' style='display:none;' target='_blank'>Widget by Bloggers </a></p>
&lt;/div&gt;<br/>
</b:if>

9. Setelah selesai, simpan template kawan. Dan lihat hasilnya seperti apa.

 

 

Cara Baru Membuat Recent Post / Artikel Terkait dengan Feed2js :

1. Masuk dahulu ke alamat situs dibawah ini

klik disini

2. Setelah masuk pada halaman utama, “isi url dengan url feed” Anda.

Contoh :http://capoenk-blog.blogspot.com/feeds/posts/default

3. Ganti url warna biru tersebut dengan url blog Anda

4. Kemudian Isi pada form – form selanjutnya :

"Show channel?...", pilih "no"

"Number of items to display..." Masukkan jumlah yang nantinya ingin ditampilkan di recent posts

“Show/hide item descriptions?..." Masukukan angka “0”

"Show item author?..." Masukkan "no"

"Use HTML in item display?..." pilih "no"

"Show item posting date?..." pilih "no"

"Target links in the new window?..." pilih "n" atau "y" terserah karena tidak terlalu berpengaruh

"UTF-8 Character Encoding..." biarkan tetap disilang

“Podcast enclosures For RSS 2.0..." tetapkan "no", untuk blog yang mempunyai niche tentang lagu, pilih “yes”

"Custom CSS Class (advanced users)..." Biarkan saja kosong

5. klik Preview Feed, Setelah hasil preview cocok, lanjutkan ke langkah no. 6, bila tidak cocok, ulangi dan setting langkah no. 4

6. klik Generate JavaScript

7. Copy paste kode tersebut yang muncul ke Widget blog Anda atau simpan

Sekian dulu artikel Cara Baru Membuat Recent Post dari saya, semoga bermanfaat dan membantu bagi semua. Terima kasih sudah menyempatkan berkunjung.