Cara Membuat Recent Post Blog Warna - Warni

Oke sobat blogger semuanya, kembali lagi nih saya akan bagikan tutorial blog update terbaru pastinya. Kali ini akan saya share tentang cara membuar recent post warna-warni. Cara buatnya sangat mudah kok, mirip-mirip dengan tutorial membuat popular post warna-warni. Dan keuntungannya memasang widget ini tentunya untuk mempromosikan postingan terbaru kita lewat sidebar di samping blog. Sekaligus juga dengan tampilannya yang warna-warni bisa menambah keindahan blog sobat.

Bagi yang ingin memasangnya di blog sobat, segera ikuti tutorial berikut :
Tahap Pertama
1. Login akun blogger sobat
2. Masuk ke tab menu Tata Letak > Tambahkan Gadget > HTML/Javascript
3. Copypastekan kode berikut ini ke dalamnya

<div id='entrinewdjb'>
<script src="http://djangkarubumi.googlecode.com/files/SerpihanWaktuEntriNew.js"></script>
<script>var numposts = 5; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://NamaBlog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
</div>

Keterangan
Ganti kode warna merah dengan alamat blog sobat
Untuk warna biru menandakan jumlah post yang ingin ditampilkan, sesuaikan dengan selera saja
4. Klik Simpan

Tahap Kedua
1. Masuk tab menu Template > Edit HTML
2. Search kode ]]></b:skin> kemudian copypastekan kode berikut di atasnya :

#entrinewdjb ul li a:hover{color:#fff;text-decoration:none} #entrinewdjb ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #entrinewdjb ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #entrinewdjb ul li:first-child:after,#entrinewdjb ul li:first-child + li:after,#entrinewdjb ul li:first-child + li + li:after,#entrinewdjb ul li:first-child + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}#entrinewdjb ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #entrinewdjb ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #entrinewdjb ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #entrinewdjb ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #entrinewdjb ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #entrinewdjb ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #entrinewdjb ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #entrinewdjb ul li:first-child + li + li + li + li + li:after{content:"6"} #entrinewdjb ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #entrinewdjb ul li:first-child + li + li + li + li + li + li:after{content:"7"} #entrinewdjb ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #entrinewdjb ul li:first-child + li + li + li + li:after{content:"5"} #entrinewdjb ul li:first-child + li + li + li{background:#c7f25f;width:90%} #entrinewdjb ul li:first-child + li + li + li:after{content:"4"} #entrinewdjb ul li:first-child + li + li{background:#ffde4c;width:90%} #entrinewdjb ul li:first-child + li + li:after{content:"3"} #entrinewdjb ul li:first-child + li{background:#ff764c; width:90%} #entrinewdjb ul li:first-child + li:after{content:"2"} #entrinewdjb ul li:first-child{background:#ff4c54 ;width:90%} #entrinewdjb ul li:first-child:after{content:"1"} #entrinewdjb ul{margin:0;padding:0px 0;list-style-type:none} #entrinewdjb ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}      

3. Klik Pratinjau untuk lihat hasil sementaranya.

4. Jika sudah sukses berhasil tinggal klik Simpan.

http://www.djangkarubumi.com/2013/05/widget-entri-populer-berwarna.html

Cara Membuat Popular Post Warna-Warni

Pernahkah sobat lihat ada blog yang di bagian sidebarnya ada widget popular post warna-warni. Tertarik bikin yang seperti di blog sobat tidak??. Kalo sobat tertarik maka praktekin aja tutorial dari Oplosanblog kali ini.

Cara Membuat Popular Post Warna-warni
1. Login blogger
2. Masuk ke tab menu Template > Edit HTML
3. Search kode ]]></b:skin> , kemudian copypastekan kode berikut di atasnya :

/* Rainbow Popular Post Style Start */ #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#d1ffff;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#f59095;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#ff00ff;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#5faff2;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#a9ed04;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ffde4c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px} /* Rainbow Popular Post Style End */        

4. Klik Simpan.
Tutorial di atas adalah untuk Popular Post yang warna-warni. Bagi yang ingin Recent Post yang ditampilkan, coba sobat ikuti tutorial yang terbaru ini. Semoga bermanfaat.

Cara Mudah Membuat Menu Accordion di Sidebar Blog

Sore sobat Oplosanblog semuanya. Kali ini saya akan memberikan tutorial cara membuat menu accordion yang simple dan mudah tanpa harus Edit HTML. Untuk sumbernya saya dapat dari blognya maskolis. Untuk tampilannya sendiri bagus menurut saya karena bisa memperingkas tampilan blog sobat. Jadi lebih rapi juga. Bagi yang tertarik buat silahkan ikutin tutorial saya di bawah ya.

Cara Mudah Membuat Menu Accordion di Sidebar Blog
1. Login ke akun blogger sobat
2. Masuk ke tab menu Tata Letak > Tambahkan Gadget > HTML/Javascript
3. Kemudian tinggal sobat copypaste saja kode berikut ke dalamnya
Kode untuk template background terang

<style type="text/css"> #accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_DvGlBOffl10g6erIfRl1UqMTZsFcT5N8pZlr9HTeMDnyEqTtHgZP-vzllSieayXwDf8Uq7RJrM6c6h0XGYuSrqDwOEm65mv87XWB-u5fG1qpiy4UHoPdbJOk2KsjnN2hN0CFA3zZ3BQ/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;} #accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;} #accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;} #accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;} #accordion .content li a:hover {text-decoration:none;color:#000;} #accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3_QkDWqQFwJBDRB-9222CjkbhD-UTNcDn5y7PYJwIAWLl6dItdekj32Cim7du95MmwiI4e1sFP7zvRiu8OeX5Nj1OuFl7fx3dHJh1MOVqBhoS7TbqvT3SvtBgrics3jjLCCsCCpzsShM/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;} </style> <script type="text/javascript" src="https://googledrive.com/host/0B9SBWEZ6FHqYOHc2dnI4bDBGSjg/accordion-menu.js"></script> <script type='text/javascript'> $(function() { $('#accordion .content').hide(); $('#accordion h2:first').addClass('active').next().slideDown('slow'); $('#accordion h2').click(function() { if($(this).next().is(':hidden')) { $('#accordion h2').removeClass('active').next().slideUp('slow'); $(this).toggleClass('active').next().slideDown('slow'); } }); }); </script> <div id="accordion"> <h2> Title 1</h2> <div class="content"> Isi konten 1 </div> <div id="accordion"> <h2> Title 2</h2> <div class="content"> Isi konten 2 </div> <div id="accordion"> <h2> Title 3</h2> <div class="content"> Isi konten 3 </div> <div id="accordion"> <h2> Title 4</h2> <div class="content"> Isi konten 4 </div> <div id="accordion"> <h2> Title 5</h2> <div class="content"> Isi konten 5 </div> </div> </div> </div> </div> </div>        

Kode untuk template background gelap

<style type="text/css"> #accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3ogv5Wv1bsd05hB_kkmetQWD_5khsu98K0upGZEHLhKwcVzXTDLqf40W0humCG_YxO5Dsizu7KHnbNTeChyphenhyphenWPH2AcGejyNShhYz_3aET2LmahZMwuVDULITVh-1TrHjRmTQgOp3myN2s/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiExZv6tgAO7TGN1EOmGsS85mqdJaoCGYKVJf6g8pEpChVzn0EHhkLGUxYqPC2dI2LhLwL1z1WZibetRX3Ms4L1UYV5cZEi_1C1BEYEaruN-MjCzsBng_uhB2he9voevdB7vesUpOlh5-k/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style> <script type="text/javascript" src="https://googledrive.com/host/0B9SBWEZ6FHqYOHc2dnI4bDBGSjg/accordion-menu.js"></script> <script type='text/javascript'> $(function() { $('#accordion .content').hide(); $('#accordion h2:first').addClass('active').next().slideDown('slow'); $('#accordion h2').click(function() { if($(this).next().is(':hidden')) { $('#accordion h2').removeClass('active').next().slideUp('slow'); $(this).toggleClass('active').next().slideDown('slow'); } }); }); </script> <div id="accordion"> <h2> Title 1</h2> <div class="content"> Isi konten 1 </div> <div id="accordion"> <h2> Title 2</h2> <div class="content"> Isi konten 2 </div> <div id="accordion"> <h2> Title 3</h2> <div class="content"> Isi konten 3 </div> <div id="accordion"> <h2> Title 4</h2> <div class="content"> Isi konten 4 </div> <div id="accordion"> <h2> Title 5</h2> <div class="content"> Isi konten 5 </div> </div> </div> </div> </div> </div>        

4. Klik Simpan
Keterangan :

• Title : Judul yang ingin sobat tampilkan di menu accordion
• Isi Konten : Silahkan Isi dengan widget sembarang atau juga bisa iklan kalo ada

Bagi yang ingin menyimpan javascript menu accordion silahkan download link dibawah :

Download Javacript Menu Accordion

http://www.maskolis.com/2012/12/membuat-menu-accordion-tanpa-edit-html.html

Cara Membuat Widget Parse HTML di Blogspot

Dalam dunia blogging pasti akan dibutuhkan yang namanya koding. Misal untuk memasang iklan, atau mengubah tampilan template blognya. Kadang kala kode HTML yang ingin dipasangkan akan menjadikan template error/tidak terbaca, supaya kode-kodenya bisa klop dan terbaca maka perlu di parsekan lewat widget yang akan kita buat ini. Untuk tampilannya setelah jadi akan seperti ini nanti :

Cara Membuat Widget Parse HTML di Blogspot
1. Login ke blogger sobat
2. Masuk ke menu tab Pos
3. Buat postingan seperti biasa namun untuk kode di bawah ini pakai mode HTML yah :

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=350&h=200&title=Code+HTML+Converter&border=%23ffffff%7C0px%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+%23DD7777%7C0px%2C2px+solid+%23EE8888&output=js"> </script>      

4. Simpan dan kemudian Publikasikan.

Cara Membuat Artikel Terkait di Bawah Postingan dengan Gambar Part II

Melanjutkan postingan saya yang terdahulu tentang cara menampilkan artikel terkait dengan gambar, kali ini tutorialnya mirip-mirip dengan yang dulu itu namun tampilannya berbeda lebih memanjang ke bawah, bukan ke samping. Tentunya lebih enak dilihat lah kalo saya nilai sih. wkwkwk..

Dan disini saya bikin versi part II nya yah karena judulnya sendiri sama dengan postingan yang terdahulu. Jadi silahkan sobat pilih saja sendiri mau pakai tutorial yang lama atau tutorial yang baru ini. Monggo pikir-pikir dulu, sementara untuk hasil jadinya bisa dilihat lewat gambar di bawah ini

Tutorial singkatnya sebagai berikut :

1. Login ke akun blogger terlebih dahulu

2. Masuk ke tab menu Template > Edit HTML

3. Search kode </head> dan kemudian copypastekan kode berikut di atasnya  

<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(){return'\\w+'};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>       

4. Selanjutnya cari kode <data:post.body/> dan copypastekan kode berikut di bawahnya

<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>     

Kalo kode <data:post.body/> sobat temukan lebih dari satu, maka coba sobat pasang pada kode <data:post.body/> yang paling bawah.

5. Simpan. 

Bagi yang kesulitan bisa berkomentar di bawah. Terima kasih semoga bermanfaat.

Cara Membuat Artikel Terkait di Bawah Postingan dengan Gambar

Setelah dulu sempat saya posting mengenai cara membuat artikel terkait di bawah postingan yang biasa dan yang menggunakan random post, kali ini Oplosanblog akan membagikan tutorial artikel terkait yang ada gambarnya. Jadi kelihatan menarik kan. Dan tentunya pageview sobat akan ikutan bertambah kalau nantinya dipasang widget ini. Penasaran enggak sobat gimana cara bikinnya, ayuk dah, tanpa panjang lebar lagi, langsung ke tekape aja sob!!

Membuat Related Post dengan Gambar

1. Login ke Blogger

2. Klik tab menu Template > Edit HTML

3. Copypastekan kode berikut di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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, &#8220;Times New Roman&#8221;, 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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_hLDSIAVR3wmuIlgoTG9uobIu9bSG1evhPfBNism6_tgc955OAUwJRpY_tBwYyqVnCRNgmzlJoN2aHoDXcmgr5xM1XhMZALnMwX8VkZXaRtx6C9qhQRkcyIwxzAUydiBMvpPDV6274Yw/s400/noimage.png&quot;;
var maxresults=8;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://bloggergubug.googlecode.com/files/grelposttumb.js' type='text/javascript'/>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Kemudian cari lagi kode <data:post.body/>, terus copypastekan kode berikut di bawahnya

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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=7&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'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

Pemasangan kode di atas ini bisa juga dipasang di bawah footer blog sobat atau setelah <div class='post-footer'>, tinggal sesuaikan saja dengan template sobat.

5. Klik Simpan. Semoga bermanfaat.

http://www.bloggergubug.com/2013/05/membuat-artikel-terkait-di-bawah.html

Cara Membuat Random Post di Sidebar Blog

Untuk bantu mempromosikan postingan lama di blog kita salah satunya adalah dengan menampilkan postingan secara acak atau random post. Bisa dipasang di bawah postingan ataupun di bagian sidebar seperti yang akan coba kita praktekan ini. Dan kenapa promosikan postingan lama sangat penting, karena bisa memberikan kesempatan pengunjung untuk mengetahui info-info yang mungkin dulu pernah dishare oleh adminnya namun sudah tenggelam oleh ratusan postingan terbarunya. Alasan lainnya bisa nambahin juga pageview di blog sobat tentunya.

Oke langsung saja yah tutorialnya :
1. Login ke akun blogger
2. Pilih Tata Letak > Tambahkan Gadget > HTML/Javascript
3. Copypaste kode berikut ini

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;var numofpost=7;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://oplosanblog.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Keterangan :
oplosanblog.blogspot.com diganti dengan alamat blog sobat
&num=7 angka 7 berarti 7 judul yang akan di tampilkan secara acak (random)
4.  Terakhir klik Simpan.

Cara Membuat Dropdown Menu atau Pulldown Menu di Postingan Blog

Untuk menghemat tempat di blog, selain menggunakan scroll dan spoiler ada cara lainnya loh. Apa itu? Yakni dengan membuat menu dropdown. Dengan cuma butuh tempat sebaris saja menu ini bisa kita pajang di blog sobat. Dan menurut saya sendiri menu ini termasuk paling ringkas daripada dua fitur lainnya yakni scroll dan spoiler. Bagi yang sudah tidak sabar pengen nyoba praktekin bikin menu dropdownnya langsung saja ya.

Caranya cukup mudah yakni
1. Sobat login dulu ke akun bloggernya
2. Masuk ke menu tab Tata Letak > Tambahkan Gadget > HTML/Javascript
3. Tinggal copypastekan saja kode-kode berikut

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="0" selected>Teman-Teman</option>
<option value="http://oplosanblog.blogspot.com"> Oplosan </option>
<option value="http://www.maniakdonlot.com"> Maniakdonlot </option>
<option value="http://boeztanoel21.blogspot.com"> Seputar Jogja </option>
.... dst ....
</select>

4. Yang di blok warna merah silahkan ganti sesuai keinginan sobat.
5. Terakhir tinggal Simpan.
Untuk hasilnya yang di atas tadi akan seperti ini :
Teman-Teman Oplosan Maniakdonlot Seputar Jogja .... dst ....

Cara Mengganti Judul Blog dengan Judul Postingan

Untuk meningkatkan SEO di blog kita ataupun untuk meningkatkan traffik pengunjung salah satunya yakni dengan cara mengganti judul blog dengan judul postingan. Karena dengan cara ini dapat membuat blog kita optimal dalam meraih page rank di search engine. Bagi sobat tertarik untuk membuatnya, silahkan ikuti tutorial berikut.

Cara mudah mengganti judul blog dengan judul postingan
1. Pertama login dulu ke akun blogger sobat tentunya
2. Klik menu tab Template > Edit HTML
3. Search kode <data:blog.pageTitle/>
4. Bila sudah ditemukan ganti dengan kode berikut ini 

<b:if cond='data:blog.pageType == &quot;index&quot;' >
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

5. Terakhir Simpan.

Cara Membuat Widget Label Tampil Jadi 2 Kolom

Bosen dengan tampilan widget label yang memanjang ke bawah sob, pengen tidak kalo widget label tersebut dijadikan 2 atau 3 kolom... Dengan dibuat 2 atau 3 kolom tentunya bisa menghemat tempat di blog sobat. Selain itu juga bisa bikin yang memandang juga enak. Kalo memanjang ke bawah kan harus scroll juga, pasti ribet deh. :D

Oke bagi yang berminat bikin tampilan widget tabel 2 atau 3 kolom bisa langsung praktek saja :

1. Login dulu ke akun blogger sobat

2. Masuk ke menu tab Template > Edit HTML

3. Kemudian sobat cari kode ]]></b:skin>

4. Taruh kode berikut ini di atasnya

#Label1 li { float:left; width:45%; }

5. Kode di atas untuk membagi ke dalam 2 kolom ya, dan kode di bawah ini untuk membagi ke dalam 3 kolom 

#Label1 li {float:left;width:33%;}
#Label2 li {float:left;width:33%;}

6. Simpan Template. Dan lihat hasilnya.
Jika masih belum berhasil, ubah saja bagian width nya. Sesuaikan dengan template di blog sobat.