Cara Membuat Related Post dengan Gambar di Blogspot

Pembahasan tutorial blogspot kali ini membuat related post atau artikel terkait menggunakan thumbnails hampir sama dengan widget kepunyaan Link within .Bedanya tidak adanya backlink seperti yang ada di link within jadi blog sobat akan tampak lebih profesional. Langkah pertama login ke blogger >> pilih template >> pilih edit HTML >> Expand di centang cari kode

</head>

letakkan kode di bawah ini di atas nya

<!--Related Posts with thumbnails Scripts and Styles Start--><br /><!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><style type='text/css'><br />#related-posts {<br />float:center;<br />text-transform:none;<br />height:100%;<br />min-height:100%;<br />padding-top:5px;<br />padding-left:5px;<br />}<br /><br />#related-posts h2{<br />font-size: 1.6em;<br />font-weight: bold;<br />color: black;<br />font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;<br />margin-bottom: 0.75em;<br />margin-top: 0em;<br />padding-top: 0em;<br />}<br />#related-posts a{<br />color:black;<br />}<br />#related-posts a:hover{<br />color:black;<br />}<br /><br />#related-posts a:hover {<br />background-color:#d4eaf2;<br />}<br /></style><br /><script type='text/javascript'><br />var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDO3Lj8yhvk_jDi-MYU4Y_XzZWW27FiIGvexwPdtmjgsnDMWCZuId2BjoUp_eThn_4yu_xlU_BirclYVyZx5VMeh21JcWAjyEHVMtnfot-9sUWLxMmVJS7cRcdyI1j6Mvxxgv4APCJ-Ms/s400/noimage.png&quot;;<br />var maxresults=5;<br />var splittercolor=&quot;#d4eaf2&quot;;<br />var relatedpoststitle=&quot;Related Posts&quot;;<br /></script><br /><script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/><br /><!-- remove --></b:if><br /><!--Related Posts with thumbnails Scripts and Styles End--><br />

Cari kode di bawah ini (gunakan control F untuk memudahkan pencarian lalu copy paste kode )

<div style='clear: both;'/> <!-- clear for photos floats -->

Kalau sudah ketemu letakkan kode di bawah ini tepat di atas kode tadi

<!-- Related Posts with Thumbnails Code Start--><br /><!-- remove --><b:if cond='data:blog.pageType == "item"'><br /><div id='related-posts'><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast != "true"'><br /></b:if><br /><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop><br /><script type='text/javascript'><br />removeRelatedDuplicates_thumbs();<br />printRelatedLabels_thumbs("<data:post.url/>");<br /></script><br /></div><div style='clear:both'/><br /><!-- remove --></b:if> <br /><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><br /><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a><br /></b:if></b:if><br /><!-- Related Posts with Thumbnails Code End-->

Setelah selesai klik Save

Untuk mengatur jumlah kotak thumbnails ubah kode

var maxresults=5;

Selamat mencoba.

Read More

Cara Memasang Recent Post dengan Thumbnails

Post terbaru yang akan di buat kali ini menggunakan variasi thumbnails untuk mempercantik tampilan dan membuat blog makin menarik.Dengan begitu di harapkan trafik dari pageviews akan meningkat

Langkahnya adalah :
Login ke blogger >> Layout >> add gadget >> HTML/java script
copy paste kode di bawah

<div id='bp_recent'></div><div class='bp_footer'><small><a id='bp_recent_link' target='_blank' href='http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html?utm_src=BP_recent' style='padding: 1px 0px 0px 19px;text-decoration:none;'><img src='http://image.bloggerplugins.org/blogger-widgets.png' alt='Recent Posts with Thumbnails for Blogger' style='border:none' /></a>Powered By <a href='http://www.bloggerplugins.org/?utm_src=BP_recent' target='_blank' title='blogger widgets'>Blogger Widgets</a></small></div> <script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script> <script style='text/javascript'> var numberOfPosts = 10; var showPostDate = true; var showSummary = true; var summaryLength = 200; var titleLength = 100; var showCommentCount = true; var showThumbs = true; var showNoImage = true; var imgDim = 100; var imgFloat = 'left'; var myMargin = 5; var mediaThumbsOnly = true; var showReadMore = true; var readMore = 'Baca Selengkapnya'; </script> <script src='http://nama blog anda/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

Tulisan warna merah silahkan di ganti alamat blog sobat

Lalu pilih save

Sobat bisa mengatur setingan sesuai selera
number of post akan menampilkan berapa post yang akan tampil
show post date akan menampilkan tanggal posting kalau mau di hilangkan ganti tulisan 'true' dengan tulisan 'false'
show summary akan menampilkan ringkasan silahkan pilih 'true' atau 'false'
show comment count menampilkan angka pengunjung yang komentar
show thumbs menampilkan gambar thumbnails.
Sobat bisa juga memasang widget recent post (posting terbaru) dengan cara kedua lebih simpel
Cara kedua

Read More

Memasang Tombol Share ke Sosial Bookmark Di Blogspot

Tombol share bisa mempercantik tampilan blog anda dan memudahkan pengunjung untuk membagikannya dengan rekan

Berikut ini cara untuk memasang tombol share artikel sosial bookmark di blogspot.

1. Login ke blogger .
2. Klik Rancangan » Edit HTML. Centang pada Expand Widget Template
3. Ada baiknya di backup dulu template anda.
4. Cari kode <data:post.body/> biasanya kode tersebut ada 2 jika anda menggunakan script readmore. Copy paste script di bawah ini, dan letakkan di bawah <data:post.body/> yang kedua.Untuk meletakkan tombol share di bawah postingan.
   
   

   <!-- AddThis Button BEGIN --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='addthis_toolbox addthis_default_style'> <a class='addthis_button_facebook_like' fb:like:layout='button_count'/> <a class='addthis_button_tweet'/> <a class='addthis_button_google_plusone' g:plusone:size='medium'/> <a class='addthis_button_preferred_1'/> <a class='addthis_button_preferred_2'/> <a class='addthis_button_preferred_3'/> <a class='addthis_button_preferred_4'/> <a class='addthis_button_compact'/> <a class='addthis_counter addthis_bubble_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4eeec94d11af9e4c' type='text/javascript'/> </b:if> <!-- AddThis Button END -->

   Simpan template dan lihat hasilnya dan bisa di coba.Semoga bermanfaat bagi anda yang hobi ngeblog
   

Read More