Post Game: post

Showing posts with label post. Show all posts

Wednesday, December 28, 2016

Cara Membuat Popular Post dengan Efek Hover

Selamat sore sobat blogger semua !!! Kali ini aq akan memposting tentang Cara Membuat Popular Post dengan Efek Hover.

Berikut adalah screenshotsnya :

Setelah disorot mouse akan menjadi seperti ini :

Kalau gitu langsung ajah deh :

1.Masuk ke akun blogger sobat.

2.Masuk ke dashboard blogger.

3.Pilih template kemudian edit html

4.Kemudian cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya ya !

.popular-posts ul{padding-left:0px;}.popular-posts ul li {list-style-type: none;margin: 0px 0px 5px;padding: 5px 5px 5px 20px !important;border: 1px solid #dddddd;border-radius: 30px 0 30px 0; -moz-border-radius: 30px 0 30px 0; -webkit-border-radius: 30px 0 30px 0; -o-border-radius: 30px 0 30px 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}.popular-posts ul li:hover {border:1px solid #666666; box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5); border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0;}.popular-posts ul li a:hover {text-decoration:none;}

5.Kemudian save template dan lihat hasilnya. :)

Gimana sob, keren kan ?

Keterangan :

Untuk mengatur jumlah popular post yang muncul dalam blog kita silahkan sobat masuk ke dashboard blogger kemudian pilih tata letak kemudian tambahkan gadget kemudian pilih popular post dan pada pilihan tampilkan hingga masukkan jumlah artikel yang sobat ingin tampilkan di popular post kemudian simpan setelan.
Jika ingin menampilkan thumbnail gambar dari artikel kita supaya muncul dipopular post maka centang pada thumbnail gambar yang berada di widget popular post yang terdapat di tata letak.

Go to link Download

Cara Membuat Popular Post Bergerak Ke Bawah

Ikuti langkah-langkah di bawah ini :
1. Pertama sobat harus log-in dulu ke blog
2. kalau sobat sudah log-in. lalu masuk ke menu Tata letak.
3. lalu Click Add Gadget , lalu sobat pilih Entri Populer

4. Kemudian Pilih kembali Add Gadget, dan sekarang kita pilih HTML/JavaScript
5. Kemudian Copas ( Copy Paste ) kode di bawah ini

6.Kalau sudah di Copas , Sobat Pilih Simpan dan lihat hasilnya

::Semoga Bermanfaat dan Selamat Mencoba::

Go to link Download

Cara Membuat Recent Post Berjalan di Blog

Recent post adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yangbergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.

4. Klik save dan lihat hasilnya.

Go to link Download

Cara Membuat Related Post Valid Html 5

Cara Membuat Related Post Valid Html 5 - Artikel terkait atau related post merupakan widget yang menghubungkan artikel satu dengan artikel yang lainya .sehingga memudahkan pengunjung untuk menemukan artikel terkait tersebut . nah bicara masalah valid html5 nih ya pada umunya widget related post ini hanya valid di home page saja sedangkan di halaman postingan ini widget artikel post nya belum valid .

Oh ya related post ini juga dilengkapa dengan tag alt dan tag title . jadi related post ini sangat mendukung untuk optimasi seo blog anda . Berikut simak caranya ya

Cara Membuat Related Post Valid Html 5

Masuk ke blog anda dulu
Pilih menu Template => Edit HTML
Kemudian cari kode ]]></b:skin>
Setelah ketemu kode tersebut . kemudian letakan kode css dibawah ini tepat diatas kode ]]></b:skin>

#related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}
#related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnxF1xUThm9eKursOV0NHSYB_jMy6I1MId5TFLUkLa5y-lSDeWu_msUR_58nJWuGxA-3xca_p56o-dD03C32b-VyjsKdDsM-RoLI8SJ0EcaHjTLSicSn_q8mKqKD4jB9BbpjnP4Zl1wNM0/s1600/bullet.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}
#related-post .widget{margin:0;padding:0}
#related-post ul{list-style:none;margin:0;padding:0}

Setelah itu Klik Save
Ettt . langkahnya belum selesai brow tinggal sedikit lagi
Langkah selanjutnya yaitu sobat cari kode <div class=post-footer-line post-footer-line-1>

<b:if cond=data:blog.pageType == "item">
<div id=related-post class=related-post/>
<script type=text/javascript>
var labelArray = [<b:if cond=data:post.labels><b:loop values=data:post.labels var=label>
"<data:label.name/>"<b:if cond=data:label.isLast != "true">,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Artikel Terkait:</h4>",
numPosts: 5,
titleLength: "auto",
containerId: "related-post",
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type=text/javascript src=https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js/>
</b:if>

Nah langkah yang terakhir baru klik save
Done ( selesai ) Taraaa kini sobat sudah bisa Membuat Related Post Valid Html 5

Untuk memastikan related post tersebut valid atau tidak silahkan cek di validator css5 dan html 5 jika tidak ada error itu bearti valid oh , ya nanti kalau udah jadi Artikel terkait nya jadinya kayak gini sob Trims spesial to +Kang Ismet

Go to link Download

Cara Membuat related Post Di Bawah Postingan

Cara mudah membuat related post - Cara Baru Membuat Artikel Terkait dibawah Posting merupakan suatu cara baru yang harus kita terapkan pada blog yang kita punya jika dalam templete yang kita gunakan tidak ada related post / artikel terkait ini.

Fungsi dari memasang artikel terkait dalam setiap posting mempunyai pengaruh yang besar terhadap jumlah pageview setiap pengunjung. Bisa dibayangkan jika satu orang pengunjung blog anda membuka 2-4 artikel anda maka trafiik pun akan meningkat dan ini semakin membuat website / blog anda lebih disukai oleh search engine seperti google.

Jika anda tidak terlalu percaya dengan apa kata saya diatas, perhatikan sekarang dengan apa yang terjadi pada blog saya ini. Lihat pada widget Statistik Blog dan perhatikan aplikasi Histat saya yang menunjukkan counter Visitor dan Page View. Jika dihitung perbandingan antara keduanya adalah 1:4. sehingga dapat disimpulkan, pengunjung blog saya ini rata – rata membuka 4 halaman artikel setiap berkunjung. Tentunya selain artikel terkait yang saya pasang, saya juga Membuat Recent Post / Artikel yang terbaru saya terbitkan.

Jika anda tertarik ingin meningkatkan page view seperti saya tersebut, maka simak saja langkah dalam membuat artikel terkait dibawah ini karena sangat mudah dilakukan.

Cara membuat Related Post Artikel Terkait :

1. Login ke Akun Blog Anda, dalam hal ini blogger karena saya menggunakan blogspot

2. Klik Templete, lalu pilih Edit HTML

3. Kemudian anda cari kode <data:post.body/>,

Gunaka CTRL+F agar pencarian lebih Mudah dan jika menemukan kode tersebut lebih dari satu, gunakan kode yang ke-2 dari atas

4. Copy-paste kode berikut ini di bawah kode <data:post.body/> yang sudah saya jelaskan pada point nomor 2

<b:if cond=data:blog.pageType == "item">
<p style=font-style:bold;>ARTIKEL TERKAIT:</p>
<div class=rbbox>
<div style=margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;>
<div id=albri/>
<script type=text/javascript>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 15;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3; function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values=data:posts var=post>
<b:loop values=data:post.labels var=label>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type=text/javascript>RelPost();</script>
</div>
</b:if>

5. Selanjutnya cari kode ]]></b:skin>

6. Copy-paste semua code berikut ini tepat diatasnya kode ]]></b:skin>

.rbbox{border: 1px solid #000000;padding: 5px;
background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}
.rbbox ul li {
display : block;
background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png) no-repeat 0px 0;
margin-left : -10px;
padding-top : 0;
padding-right : 0px;
padding-bottom : 1px;
padding-left : 20px;
margin-bottom : 5px;
line-height : 1em;
border-bottom:1px dotted #cccccc;}

7. Klik Save/Simpan Templete

KETERANGAN TAMBAHAN:

*ARTIKEL TERKAIT, = bisa diganti sesuai keinginan. misal: Related Post, Baca Juga, Read more ataupun yang lain terserah

*maxNumberOfPostsPerLabel = 50; = jumlah posting atau artikel terkait yang ingin Anda tampilkan

*maxNumberOfLabels = 3; = jumlah label terkait yang ingin ditampilkan

*background-color: #F2F2F2; = warna background kotakan artikel terkait dan bisa diganti sesuai selera

*background-color: #EFFBEF; = warna background saat kursor menyorot olom tersebut

*http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png = icon didepan link

Go to link Download

Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog Terbaru

Pada kesempatan kali ini Zerone Blog akan memberikan Tutorial Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog, Random post sendiri berguna untuk menampilkan artikel secara acak,dengan tujuan menarik pengunjung agar berminat untuk membaca artikel sobat yang sudah lalu maupun yang baru saja di tulis.

Random post yang akan saya bagikan kali ini sangat keren dan Responsive dan juga mudah untuk penerapanya sobat tidak harus mengutakatik Template sobat, Untuk sobat yang ingin menggunakan Random Post Bergerak dengan gambar responsive ini silahkan di simak langkah - langkahnya di bawah ini.

Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog

Silahkan sobat masuk ke blogger

Lalu sobat pilih menu Tata letak > Tambahkan Widget/Gatget > HTML/javascript

Kemudian Copy kode di bawah ini

JS<style>
#BDRSimage-slide { height:112px; overflow:hidden; padding:0; background-color:#fff; width:auto; border:solid #ddd 1px; box-shadow:0 0 5px #eee; }
#BDRSimage-slide:hover { height:325px; overflow:hidden; padding:0;width:auto; border:solid #ccc 1px; box-shadow:none; }
#BDRSimage-slide ul { list-style-type:none; margin:0; padding:0; }
#BDRSimage-slide li { list-style:none; height:80px; padding:10px; border:dashed #ddd 1px; margin:5px; background-color:#FFFFFF; }
#BDRSimage-slide li:hover { border:solid #ddd 1px; }
#BDRSimage-slide a { color:#222; font-family:Verdana; font-size:12px; font-weight:bold; text-decoration:none; }
#BDRSimage-slide .news-title { margin-bottom:5px; font-size:12px; color:#990000; }
#BDRSimage-slide .news-text { font-size:10px; color:#333; text-align:left; font-family:Verdana; font-style:italic; font-weight:normal; padding-bottom:10px; }
#BDRSimage-slide img { float:left; margin-right:10px; margin-top:10px; width:60px; height:60px; border-radius:50%; border:1px solid #e06666; box-shadow:0 0 2px #e06666; }
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/rp2-seocips.js"></script>
<!-- script start -->
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rivaiscript();
interval = setInterval(rivaiscript, pause);
});
</script>
<div >
<ul id="BDRSimage-slide">
<script style="text/javascript">
var numposts = 50;
var numchars = 0;
</script>
<script
src="http://zeroneblogg.blogspot.com/feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost"></script>
</ul>
</div> <!-- script end -->

Ganti tulisan yang berwarna merah dengan alamat Blog sobat

Kemudian Save widget.

Demo Click here

Demikian Tutorial Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog Terbaru yang dapat Zerone Blog berikan semoga bermanfaat. Terimakasih

Go to link Download

Cara Membuat All Post Bergerak Ke Atas

Halo sobat blogger. Apa kabar? pastinya baik. ok tutorial kali ini saya memberikan tutorial mengenai Recent Post. Tentunya para blogger sekalian sudah tau apa itu recent post. Itu,,tuh,, daftar posting terbaru sobat blogger sekalian. Nah memang blogger sudah menyediakan widget Recent Post yang standar, tetapi ini berbeda Recent Post ini bergerak dari atas ke bawah jika ingin demonya silahkan liat sendiri di blog saya. Berhubung saya tidak pandai berbicara panjang lebar kita langsung aja PRAKTEK.

Login ke akun blogger masing masing
Dari dashboard ke Rancangan
Klik Add Gadget/Tambah Gadget
Pilih HTML/Javascript
Masukkan kode berikut

<style type="text/css">
.gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 14px;padding:4px; background:none;border: 0px solid #363636;}
.gfg-title {font-size: 20px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;}
.gfg-subtitle {font-size: 20px;font-weight: bold;color: #333;background-color: none;line-height : 1.4em; overflow : hidden;white-space : nowrap;margin-bottom : 0px;}
.gfg-subtitle a {color : #a43434;display:none !important;}
.gfg-entry {background-color: none;width : 100%;height : 9.9em;position : relative;overflow : hidden;text-align : left;margin-top : 0px;}
/* To allow correct behavior for overla80ff00y */
.gfg-root .gfg-entry .gf-result {position : relative;background-color:none;width : auto;height : 100%;padding-left : 5px;padding-right : 5px;}
.gfg-list {position : relative;overflow : hidden;text-align : left; margin-bottom : 15px;display:none !important;}
.gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;display:block;color:#80ff00;font-weight:bold;line-height: 1.2em;overflow : hidden;white-space : nowrap;text-overflow : ellipsis;-o-text-overflow : ellipsis;margin-top : 4px;}
.gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;color: #333;margin-top : 3px;font-size: 12px;}
.clearFloat {clear : both;}
#feedGadget { margin-top: 3px;margin-left: auto;margin-right: auto;width: auto;font-family:verdana, arial;font-size: 10px;color: #333;}
</style>
<script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [
{title:title,
url:http://elangshared.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999},
];
new GFdynamicFeedControl(feeds, feedGadget,
{numResults : 500, stacked : true,
title: " "});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Load Post...</div>

KETERANGAN:

Silahkan sobat ganti URL yang berwarna merah dengan URL blog sobat
Jika sudah silahkan klik Simpan
Lihat hasilnya

DEMO ALL POST :

Load Post...

SEMOGA BERMANFAAT :)

Go to link Download

Cara Membuat Random Post Tampilan Text Biasa

Cara Membuat Random Post Tampilan Text Biasa. Artikel saya yang bertemakan mengedit blog sangat banyak. Misalkan yang baru kemarin saya posting Cara Memasang Kotak Search Di Blog atau Drop Down. Artikel ini akan memberi tau anda untuk memasang widget Random Post dengan menampilkan Text biasa. Saya memilih memasang widget yang polos ini, agar blog saya menjadi ringan.

Untuk tampilannya, memang polos. Tetapi ini lah yang saya suka karena tidak membuat berat dan masih bisa dibaca pengunjung. Seperti gambar diatas, saya telah menambahkan fungsi scroll agar widget bisa digulung dan tidak memanjang kebawah yang bisa memakan tempat. Kalau widget blog ini, saya tidak tau mengapa tulisannya kecil dan terlalu mepet. Mungkin jika di pasang di blog anda tampilannya akan berubah.

Cara Membuat Random Post Tampilan Text Biasa

1. Login ke akun blogger anda
2. Pada dashboard pilih blog anda lalu masuk ke menu Tata Letak
3. Klik Tambah Gadget pada lokasi yang anda inginkan untuk menampilkan widget ini
4. Muncul jendela Tambah Gadget, cari gadget yang bernama HTML/Javascript lalu pilih
5. Copy kode script dibawah ini lalu paste di kolom konten.

<div style="overflow:auto; width:100%px; height:250px; padding:0px; border:0px;">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=30;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write(<ul>);
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel==alternate){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write(</ul>);}
</script>
<script src="http://jonarendra.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>
</div>

Keterangan :
* 250px bisa diganti dengan angka yang lain jika widget terlalu tinggi atau terlalu pendek
* jonarendra.blogspot.com bisa diganti dengan alamat blog anda

6. Klik Simpan dan dicoba buka blog anda lagi

Itu tadi postingan saya Cara Membuat Random Post Tampilan Text Biasa, jika menurut anda kurang menarik, bisa dilihat postingan saya yang widget ini sudah di beri tampilan bergerak di Cara Membuat Random Post Berjalan Dengan Gambar.

Begitulah keseluruhan artikel saya kali ini yang berjudul Cara Membuat Random Post Tampilan Text Biasa. Semoga bermanfaat untuk anda yang ingin mempunyai widget random post ini. Jika ada masalah saat penerapan Cara cara diatas, silahkan poskan komentar dengan memberikan pertanyaan mengenai masalah anda.

Go to link Download

Cara Membuat Widget Recent Post By Label

Go to link Download

Cara Membuat Related Post Berupa Gambar Thumbnail

UNTUK melengkapi posting Cara Membuat Recent Post (Lates Post, Posting Terbaru) dengan Gambar yang cocok buat blog foto dan toko online, kali ini CB share tentang Related Postnya (Posting Terkait) yang juga dengan gambar (thumbnail image).

Jenis Posting Terkait ini HANYA berupa gambar. Judul akan muncul saat cursor mouse diarahkan ke gambar.

Ini penampakan Related Posts dengan gambar yang sudah coba diterapkan dan berhasil di CB Blogger Lab.

Untuk blogger biasa --bukan blog foto/toko online, sebaiknya tidak menggunakan Related Post dengan Thumbnail Image biar lebih cepat loadingnya.

Related Post sendiri adalah bagian dari navigasi dan internal link blog yang bagus buat seo dan user. Google menganjurkan navigasi dan internal linking di halaman situs web. Related Post juga memudahkan user mencari informasi lain denga tag, label. atau topik yang sama.

Cara Membuat Related Post Berupa Gambar Thumbail di Blogger

1. "Template" > "Edit HTML"
2. Copy & Paste kode berikut ini di atas kode ]]></b:skin>

/* Related Posts dengan Gambar */
.related-post .post-thumbnail {
z-index: 1;
position: relative;
width: 98px;
height: 98px;
margin: 0;
display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left;
position: relative;
width: 98px;
height: 98px;
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;
float: left;
background: #000;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
}
.related-post:hover .related-post-title {display: block;}

Keterangan:

Yang berwarna merah adalah ukuran gambar.

2. Cari (Ctrl+F) kode yang seprti berikut ini:

3. Copy & Paste kode berikut ini di bawah kode tersebut:

<div id=related-posts>
<b:if cond=data:blog.pageType == "item">
<script type=text/javascript>//<![CDATA[
var ry=<h3>Related Posts</h3>;rn=<h3>   No related post available</h3>;rcomment=comments;rdisable=disable comments;commentYN=no;
var dw=;titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(thr$total in d){commentsNum[titlesNum]=d.thr$total.$t+ +rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if(media$thumbnail in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmGuZt_XD7lgxAtb0yxjQy8taeluRg1KG9Bo-f5mQfYE4WeVK5_Tcr2qj8hkE9HdjzK_5QNzhPXpARDiRcHBbcBXib5A-n7SlOrjz6h6-3CvQam2Xx8C4eObjap7sru_8MN6y2-3rUKm76/};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf(?m=0);if(y!=-1){a=a.replace(/?m=0/g,)}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+=<div class="clear"/></div><ul>;while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+?m=0}if(commentYN==yes){comments[c]= - +commentsNum[c]}else{comments[c]=};dw+=<div class="related-post"><div class="related-post-title">+titles[c]+</div><a href="+urls[c]+" rel="nofollow"><img border="0" class="post-thumbnail" alt="+titles[c]+" src="+thumb[c]+"/></a></div></div>;if(c<titles.length-1){c++}else{c=0}b++}dw+=</ul>};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById(related-posts).innerHTML=dw};
//]]></script>
<b:loop values=data:post.labels var=label>
<script expr_src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels" type=text/javascript/>
</b:loop>
<script type=text/javascript>varmaxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</b:if>
</div>
<div class=clear/>

Keterangan:

Yang berwarna merah adalah jumlah Related Post atau Jumlah Thumbnail Image yang ingin ditampilkan.

4. Baca basmalah biar berhasil dan berkah... dan Save Template!

Mestinya, jika keempat langkah di atas dilakukan dengan baik dan benar, maka Related Post berupa Thumbnail Image (gambar) akan muncul di postingan blog. Good Luck!

Sumber

Go to link Download

Cara Membuat Recent Post Keren Horizontal

Dengan Memasang Recent Post atau Artikel Terbaru yang Berkaitan dengan Artikel yang Sedang Di Baca Oleh Pengunjung Membuat Pengunjung akan Penasaran Dengan Blog Anda . Karena Semua yang Pengunjung Cari Berada di Blog Anda Sendiri . Memasang Artikel Terbaru atau Recent Post di Blog sangat Berguna Untuk Membuat Pengunjung Nyaman dan Betah Berlama - Lama di Blog. Recent Post ini Juga Ada Fitur dengan Thumbnail Jadi Pengunjung Akan Merasa Penasaran dengan Artikel yang Dia Lihat Tersebut . Cukup Sampai di sini Penjelasan Tentang Recent Post atau Yang Biasa Kita Sebut Dengan Artikel Terbaru di Blog ini.

Semoga Dengan Tutorial Membuat Cara Membuat Recent Post Keren Horizontal ini Bermanfaat Buat Blog Anda Termasuk Pengunjung Anda Sendiri.
Langkahnya Sebagai Berikut.

1. Login Ke Akun Blogger Anda Sendiri.

2. Masuk Ke Menu Tata Letak Blogger

3. Klik Tambah Gadget > Klik Tambah HTML/Javascript

4. Setelah itu Copy Kode dibawah dan Pastekan.

<center><script type=text/javascript>
imgr = new Array();
imgr[0] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[1] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[2] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[3] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[4] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[5] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[6] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[7] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[8] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
imgr[9] = "http://i897.photobucket.com/albums/ac180/kukuhcdh/no_image1.gif";
showRandomImg = true;
tablewidth = 900;
cellspacing = 2;
borderColor = "#eeeeee";
bgTD = "transparant";
imgwidth = 110;
imgheight = 100;
fntsize = 12;
acolor = "Black";
ahover = "#444444";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 100;
summaryFontsize = 10;
summaryColor = "gray";
icon2 = " ";
numposts = 5;
home_page = "http://bocahporis.blogspot.com/";
</script>
<script src="https://sites.google.com/site/kukuhcdh/home/javascript/recentposts_horizontal_title_below_no.js" type="text/javascript"> </script></center>

5. Terakhir Klik Simpan

Langkah Terakhir Sekarang Anda Tinggal Mengecek Hasilnya Pada Blog Anda .

Go to link Download

Cara Membuat Artikel Terkait Related Post di Blog dengan Thumbnail

Hai sobat blogger semua !!! Kali ini fahrurrozi18 akan berbagi cara untuk membuat daftar Artikel Terkait / Related Post. Humh... Udah pada tau nggk, yang mana itu Related Post. Yang belum tau, silahkan lihat screenshot di bawah ini :

Nah... Gimana sob, udah tau kan ?!?!

Ya sudah deh, gak pakek lama, langsung aja sob terjun ke langkah-langkahnya !!!

Cara Membuat Artikel Terkait / Related Post :

1. Login BLOGGER sobat.

2. Klik Template => Edit HTML.

3. Cari kode di bawah ini :

</head>

4. Kalau sudah menemukan kode di atas, Copy script di bawah ini lalu paste di atas kode </head>

<b:if cond=data:blog.pageType == "item">
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C}
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type=text/javascript>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 150;
var morelink = "selengkapnya";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?:e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){returnw+};c=1};while(c--)if(k[c])p=p.replace(new RegExp(b+e(c)+b,g),k[c]);return p}(2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==1o){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=H-A 1u>";h+="<a v="+5[r]+" U=1v I=J A="+4[r]+"><1w 1x="+b[r]+" /></a>";h+="<a v="+5[r]+" I=J>"+4[r]+"</a>";h+="<17 G=H-18>"+9[r]+" ... <a v="+5[r]+" I=J>"+1y+"</a><17 G=H-18>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}},62,98,||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write.split(|),0,{}))
//]]></script>
</b:if>

5. Selanjutnya cari kode di bawah ini, Gunakan Ctrl+F untuk mempermudah pencarian :

<data:post.body/>

6. Lalu, copy script di bawah ini tepat di bawah kode tadi. Dalam pencarian, sobat akan menemukan beberapa script yang sama... Gunakan script yang Kedua atau Ketiga :

<b:if cond=data:blog.pageType == "item">
<div id=related_posts style=margin-top:35px;>
<h4 style=color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;>Artikel Terkait</h4>
<b:loop values=data:post.labels var=label>
<script expr_src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgthum&max-results=50" type=text/javascript/>
</b:loop>
<ul id=relpost_img_sum>
<script type=text/javascript>relatpost();</script>
</ul>
</div>
</b:if>

7. Klik Simpan.

Nah... Sudah selesai deh membuatnya, sekarang coba lihat blog sobat... :)
Sekian dulu ya tips dariku, Bye... bye... :)

Keterangan :

var relmaxposts = 5, jumlah artikel terkait yang ditambilkan
var numchars = 150, jumlah dari ringkasan artikel
Untuk mengubah style dari widget seperti ukuran huruf, warna, dll. Edit pada script yang ada didalam tag <style> ... </style>

Go to link Download

Post Game

Wednesday, December 28, 2016

Cara Membuat Popular Post dengan Efek Hover

Cara Membuat Popular Post dengan Efek Hover

Tuesday, December 13, 2016

Cara Membuat Popular Post Bergerak Ke Bawah

Cara Membuat Popular Post Bergerak Ke Bawah

Tuesday, December 6, 2016

Cara Membuat Recent Post Berjalan di Blog

Cara Membuat Recent Post Berjalan di Blog

Thursday, December 1, 2016

Cara Membuat Related Post Valid Html 5

Cara Membuat Related Post Valid Html 5

Cara Membuat Related Post Valid Html 5

Saturday, November 26, 2016

Cara Membuat related Post Di Bawah Postingan

Cara Membuat related Post Di Bawah Postingan

Cara membuat Related Post Artikel Terkait :

Friday, November 25, 2016

Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog Terbaru

Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog Terbaru

Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog

Cara Membuat All Post Bergerak Ke Atas

Cara Membuat All Post Bergerak Ke Atas

Thursday, November 24, 2016

Cara Membuat Random Post Tampilan Text Biasa

Cara Membuat Random Post Tampilan Text Biasa

Sunday, November 20, 2016

Cara Membuat Widget Recent Post By Label

Cara Membuat Widget Recent Post By Label

Cara Membuat Related Post Berupa Gambar Thumbnail

Cara Membuat Related Post Berupa Gambar Thumbnail

Cara Membuat Related Post Berupa Gambar Thumbail di Blogger

Thursday, November 17, 2016

Cara Membuat Recent Post Keren Horizontal

Cara Membuat Recent Post Keren Horizontal

Sunday, November 13, 2016

Cara Membuat Artikel Terkait Related Post di Blog dengan Thumbnail

Cara Membuat Artikel Terkait Related Post di Blog dengan Thumbnail