Pular para o conteúdo principal

Cara Membuat Related Post dengan Icon Gambar Keren dan Responsive Banget

Sobat. Dalam kesempatan ini, akan kita ulas beberapa hal yang berkaitan dengan "salah satu" faktor sebuah blog dikatakan SEO. Hal tersebut adalah pengelolaan desai tampilan di dalam sebuah template. Selain daripada itu, faktor user friendly menjadi pamungkas faktor tersebut.

Related Post dengan Icon Gambar Keren dan Responsive Banget

Dalam hal user friendly, hal yang sering dilupakan para pemakai template blog adalah kurang memperhatikan adanya fitur related post yang tersemat di dalam sebuah template bawaan yang mereka dapatkan dari hasil download atau murni dari blogger. Bahasan kali ini, lebih pada bagaimana cara memodifikasi link related post yang awal mula berupa teks diganti dengan gambar responsive. Tips kali ini juga salah satu tips dari mas CB.

Jika masih bingung topik bahasan kali ini, silakan sobat buka salah satu artikel di dalam blog ini. Pada bagian bawah akan terlihat bagian related postnya. Misalkan saat rekan membuka bagian judul artikel kelebihan dan kekurangan blogspot dan wordpress.

Masih belum faham juga? Hmm. Silakan simak langkah-langkahnya di bawah ini!

LANGKAH-LANGKAH MEMBUAT RELATED POST DENGAN GAMBAR
1. Buka akun blogger
2. Pilih template > Edit Html
3. Copas kode di bawah ini dan tempatkan tepat di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' /> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

***.Note: warna biru merupakan ukuran gambanya. Sobat dapat merubah sesuai selera

4. Copas kode di bawah ini dan tempatkan tepat di atas kode <div class='post-footer'> Jika kode <div class='post-footer'> ada dua, simpan di atas kode yang kedua ya.

<!-- Related Posts with Thumbnails Code Start--> <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> <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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://contohblognih.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0h5M8Wv1QzB7WZFbiPxVAFlflde8AAK4lJcObPymNMTnAQbw8dh1wXYATfs6i_166RSFvACbLJl4vdp3qBm6TBU5ZGATqIlZZy9zOhPIn8sB6sdH2vp-OrZVkBXLRZinf1MZZQqo-mr60/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->


***.Note: 
- Warna biru merupakan jumalah related post yang mau ditampilkan
- Related Posts bisa diganti menjadi Related Photos, Videos, atau "Produk Lainnya".
4. Save Template!
Demikian Guys. Mudah bukan? Semoga bermanfaat

Marcadores

Marcadores:

Comentários

Postar um comentário

Postagens mais visitadas deste blog

9 Blog Berpenghasilan Tertinggi di Indonesia dari Google Adsense

techzend.com Sobat blogger. Kemarin telah kita ketahui bahwa pendapatan para blogger di Indonesia tahun 2015 ini memang tidak bisa dianggap remeh. Karenanya mereka menjadikan blog sebagai rutinitas pekerjaan sehari-hari.  Bisa dibayangkan, hanya cukup duduk manis, ambil poisi paling enak, serta berhadapan dengan sebuah laptop/ PC disandingkan dengan segelas kopi hangat, kita bisa mendapatkan penghasilan yang insyallloh halal thoyyiban.  Kali ini akan kita lanjutkan bahasan tentang info 9 blog berpenghasilan tertinggi di Indonesia dari Google Adsen s e . Kenapa saya ulas hanya pada fokus yang berpenghasilan dari Google Adsence? Ya karena memang rata-rata para blogger menggunakan GA sebagai pemasukankan utama mereka. Seperti halnya kita tahu, ada juga yang mendapatkan penghasilan blog dari pemasangan iklan dan affiliasi . Blog Berpenghasilan Terbesar di Indonesia Data yang saya sampaikan kali ini, hanya berdasarkan hasil survei serta ulasan dari beberapa sumber lain. Setelah mel...
42 comentários
Leia mais

28 Senjata Ngeblog Wajib para Blogger

Sobat. Pada kesempatan ini akan Ane berikan "senjata pamungkas" ketika bergelut dalam dunia blog, baik blogspot maupun wordpress . Senjata ngeblog ini berupa "tools" maupun "software" yang pasti bermanfaat dan bisa membantu Sobat dalam mengembangkan dan membangun sebuah blog yang berkualitas .  Tidak hanya berkualitas dari sisi desain, namun juga berkualitas dari sisi isi konten. 28 senjata ngeblog terbaik ini sangat muda digunakan. Tidak terlalu bertele-tele dan membingungkan, namun di dalamnye termuat cara yang simpel dan sangat memerikan manfa'at yang luar biasa. Tools ini tidak sekedar saya saja yang menggunakan, namun juga para blogger terkenal lokal maupun manca negara. Senjata Ngeblog Terbaik dan Terpopuler para Blogger Sesuai dengan judul topik bahasan kali ini, maka manfaat dari penggunakan tools di bawah ini untuk membuat sebuah situs, website atau blog yang memang berkualitas. Tidak sekedar blog "asal-asalan". Masih teringat buk...
6 comentários
Leia mais

Bahaya Copy Paste Artikel pada Blog serta Solusinya

Etika Komunikasi Publik Sobat. Pagi ini iseng-iseng Saya mencoba melakukan risearch salah satu artikel bulan kemaren diterbitkan. Judul artikel tersebut yakni 9 blog berpenghasilan tertinggi di Indonesia dari Google Adsense.  Ketika muncul di halaman pertama Google, saya coba untuk menelusuri salah satu artikel dari salah satu situs.  Keingintahuan saya itu muncul manakala judul dari artikel yang dipublish di situs tersebut "sama persis" dengan artikel yang saya terbitkan. Saking penasarannya, kemudian saya buka hyperlink dari url situs tersebut. Anehnya, ketika terbuka secara utuh, saya heran, kaget dan tersenyum sipu. Alasanya kenapa? Karena artikel  9 blog berpenghasilan tertinggi di Indonesia dari Google Adsense  ini telah di copas alias copy paste di situs yang saya buka tersebut. Postingan tersebut tidak tergolong dalam istilah rewrite atau tulis ulang, melainkan copy paste secara utuh terhadap seuruh isi artikel yang saya tulis. Tidak nyaris 90 %, namun 100% c...
15 comentários
Leia mais