Blog Kopi pas Teh

Cara Membuat Scroll Bar Di Posting Blog

Cara Membuat Scroll Bar di Posting Blog - Sedikit penjelasan dan pengetahuan untuk sobat tentang definisi serta fungsi dan kegunaanya Scroll Bar adalah untuk memudahkan kita apabila ada kode atau tulisan yang sangat panjang agar tidak memakan terlalu banyak tempat, intinya tampilan posting blog kita jadi singkat dan dinamis.

Cara Membuat scroll bar di posting blog sangatlah mudah, Caranya hampir sama seperti saat kita menulis postingan blog. Namun yang paling penting adalah jangan lupa sobat copy/paste atau Tulis Kode script di bawah ini pada mode Edit HTML di bagian posting blog.

Scroll Bar di Posting Blog

Berikut Kode Script Scroll Bar Posting Blog:

<div style='padding: 5px; overflow: auto; width: auto; height:200px;border:1px solid #000000'>

LETAKKAN TULISAN SOBAT ATAU APAPUN DISINI.
(Tulisan ditulis di Compose, sedangkan Kode di Tulis pada mode Edit HTML)

</div>

Catatan:

Ingat, Sobat Tulis pada mode Edit HTML, bukan Compose.!!!
Untuk melihat dan mengecek berhasil atau tidak, silahkan sobat klik Compose.
height:200px; adalah ukuran lebar atas bawah kotak scroll, silahkan sobat ganti nilainya, seperti keinginan sobat.
width: auto; adalah ukuran otomatis lebar samping kotak scroll, silahkan sobat ganti nilainya, seperti keinginan sobat.
border:1px solid adalah ukuran tebal garis kotak scroll, silahkan sobat ganti nilainya, seperti yang sobat inginkan.
#000000 adalah Kode warna pada garis kotak scroll, silahkan sobat ganti Kode warnanya seperti yang sobat inginkan.

Demikian artikel ringan tentang Cara Membuat Scroll Bar di Posting Blog, semoga bermanfaat buat sobat KUCOPAS semua.

Cara Membuat Kotak Suka Facebook di Blog

Assalamualaikum sobat semuanya .....
Alhamdullilah pada kesempatan yang berbahagia ini, saya akan bahas sedikit tentang Cara Membuat Kotak Suka Facebook di Blog atau kata lainnya adalah LIKE BOX, tentunya sobat sudah sering melihat kan di berbagai blog yang ada kotak likenya. Gimana sih cara membuatnya ????

Sebenarnya cara membuatnya sangat mudah. Pesyaratanya sobat harus punya Halaman Facebook . Karena Kotak Suka Facebook di Blog atau LIKE BOX, berkaitan dengan halaman atau page facebook sob . Kalo sobat belom punya, yuk kita buat !! begini caranya sob ::

Membuat Halaman di Facebook

1. Daftar Halaman facebook DI SINI atau DI SINI
2. Pilih salah satu kategori yang berhubungan dengan blog sobat,

3. Kalo udah, ikuti dengan benar 2 step, saya yakin sobat semua bisa . dan Untuk yang lain-lain, nanti sobat bisa utak atik sendiri, yang penting sekrarang sobat udah punya Page atau Halaman di Facebook. dan selanjutnya,, kita akan membuat Like Box Facebook .

Membuat Like Box Facebook

1. Login ke facebook sobat
2. Masuk ke pengembangan Sosial Plugins KLIK DI SINI
3. Nah disitu ada banayk pilihan , sobat pilih Like Box . baris ke 7

4. Copy URL blog sobat dan masukan di Facebook Page URL.

5. Atur sesuai dengan keinginan sobat ...
6. Kalo udah selesai Pilih Get Code, dibagian bawah ..
7. Sobat akan diberi beberapa code, pilih yang IFRAME, copy codenya dan letakkan di blog sobat,
8. cara meletakan codenya : pilih tata letak, tambah gadget, pilih HTML Java Script, Paste Code Like Boxnya.
SELESAI DEH SOB !!!! Semoga artikel ini bermanfaat ya sob ...
Cara Membuat Kotak Suka Facebook di Blog. Cara Membuat Like Box Facebook di Blog. Cara Membuat Like Fans Facebook di Blog

Membuat Artikel Terkait Dengan Fungsi Scroll

Artikel terkait betujuan agar pengunjung blog sobat lebih mudah dalam mencari artikel yang berhubungan dengan label tertentu. Pada postingan kali ini saya akan membahas cara membuat artikel terkait dengan fungsi scroll.

Kelebihan artikel terkait dengan fungsi scroll ini agar saat postingan sobat sudah banyak, sehingga tidak memakan terlalu banyak tempat.

Langsung saja ikuti langkah-langkah berikut.

1. Masuk ke akun blog sobat pilih tata letak
2. Pilih edit HTML jangan lupa Expand Template Widget. Download full template untuk menghindari kesalahan.
3. Cari kode <data:post.body/> dan letakkan kode di bawah ini sesudah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
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>

Kalau sobat sudah menggunakan fungsi read more, nanti akan ada 2 kode <data:post.body/>, pasang di bawah kode yang pertama.

4. Selanjutnya cari kode ]]></b:skin>
5. Pasang kode di bawah ini diatas kode ]]></b:skin> tadi.

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

6. Simpan template dan lihat pekerjaan sobat.

Untuk backgroundnya silahkan sesuaikan dengan template sobat.
Semoga bermanfaat.
Alhamdulillah...

Sumber

Cara mudah membuat sebuah menu navigasi horizontal dropdown

Hai sobat blogger ! sudah lama tak berjumpa ya, hampir 1 bulan saya tidak mengupdate isi postingan di blog ini, hampir sebulan itu saya mendapat kendala besar yang membuat saya jarang update. Saya memohon maaf untuk hal itu. Oke , kali ini saya akan berbagi ilmu tutorial blogging yang cukup keren sobat . Sesuai judulnya, kali ini saya akan membuat menu navigasi yang pernah saya pakai di blog ini atau bisa lihat sendiri pada gambar yang saya pasang diatas. Menu navigasi ini telah saya modifikasi sedemikian rupa sehingga menjadikannya keren dan elegan.. Bagaimana ? tertarik untuk membuatnya ? langsung saja kalau begitu kita simak dan bahas tutorialnya bersama-sama.

Lihat Versi Terbaru dari Menu Navigasi Dropdown v2 yang lebih keren ( seperti yang digunakan di blog ini ) di http://rizaldipriantama.blogspot.com/2012/12/menu-navigasi-horizontal-dropdown-versi.html

FIX + TUTORIAL PENGEDITAN ( 21 Oktober 2012 )

1.) Baca Basmallah
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda Expand Template Widget
5.) Lalu cari kode ]]></b:skin>
6.) Jika sudah ketemu, masukkan kode dibawah ini tepat diatas kode ]]></b:skin>

Kode

.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}.menus ul{position:absolute;top:-999em;width:100%}.menus ul li{width:100%}.menus li:hover{visibility:inherit}.menus li{float:left;position:relative}.menus a{display:block;position:relative}.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-wrap{padding:0;margin:0;position:relative;height:40px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV0BI224Zk2Sd9icTq-lESaH2d-v6ui-f0GGUWm9pAKNND-qDi9F8Els6RoaYDSqlxxZpZX-2zDbC-6OLf3j1KXKRGhyHWmp-o5aJk6zL-Yzj8H3sZfFCCuOrNa3FT1yxjg-6zIXuTXPg/s1600/menu-secondary-background.jpg) left top repeat-x}.menu-secondary{height:40px}.menu-secondary ul{min-width:160px}.menu-secondary li a{color:#FFF;padding:14px 15px 10px 15px;text-decoration:none;border-right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkAvZSnQpPxcVY5PDJoLoBrdel4RJDoWh1HrjXsaekfw7Z4UN5eucp2GhrXKKo3WqqzCWfMF9M5cCNn_N4tE-LVp-ZmJRH_56rIHl3nBigVjLD-K_Ag5EBUA_bN8SXd_Q5Pnnx6xxT-nQ/s1600/topmenu_border_blue.jpg) 100% 1px no-repeat;color:#fff;text-transform:uppercase;text-shadow:0 1px 0 #444;font:bold 12px Arial,Helvetica,Sans-serif}.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover >a,.menu-secondary li.current-cat >a,.menu-secondary li.current_page_item >a,.menu-secondary li.current-menu-item >a{color:#FFF;text-shadow:0 1px 0 #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLj9hnWNqn7TdipO4LPD3rnUPe3lKm8eRXihy8RqhMA2ezrMBJ761DSE3SGbeIdepzuu3eZYYxXCUF7n5P0LTWUgbqf3EYgKOUfRYdueeAzyipgoqThoWkjN5_-MFXtx7RBldBvnyhDUg/s1600/Highlight.png);left -140px repeat-x;outline:0}..menu-secondary li.home{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ7kXNLFg0m9akPhMIyC5lkn9qq4wvjgNk0pkg7H3a-m6JfkDehlVI8NmBObE_uBVww3ezubJ1wRNEcV-FHLKG8VduW1y9t9Eh-MGQKrvpCpqYXnRtzGWWwKI4M23UoJ4-eiShySa00wo/s1600/bk_menu_blue.jpg)}.menu-secondary li li a{color:#FFF;background:#3D79E1;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover >a,.menu-secondary li li.current-cat >a,.menu-secondary li li.current_page_item >a,.menu-secondary li li.current-menu-item >a{color:#000;background:#9EBCF0;outline:0}.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:12px 13px 0 0}.menu-secondary li li .sf-sub-indicator{padding:6px 13px 0 0}.menu-secondary-wrap .sf-shadow ul{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1gt2SoLS7Ny0UJCdEDH-TuiXSMprk9sOA8fLbh6O9hUYilsljX2jCflc9_IG6VyDD4IDYi8Aq8xZZEm1vQPgAOUgrK3Za8Y6jmUWFoh8ufmrcbGvyR9sYyXeI8t0GoJOu2UMBdCucdEBq/s1600/menu-secondary-shadow.png') no-repeat bottom right}

7.) Cari kode </head>, letakkan kode dibawah ini tepat diatas kode </head>

Kode

<script type='text/javascript'>
//<![CDATA[
;(function($){
$.fn.superfish = function(op){

var sf = $.fn.superfish,
c = sf.c,
$arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
over = function(){
var $$ = $(this), menu = getMenu($$);
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
out = function(){
var $$ = $(this), menu = getMenu($$), o = sf.op;
clearTimeout(menu.sfTimer);
menu.sfTimer=setTimeout(function(){
o.retainPath=($.inArray($$[0],o.$path)>-1);
$$.hideSuperfishUl();
if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
},o.delay);
},
getMenu = function($menu){
var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
sf.op = sf.o[menu.serial];
return menu;
},
addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

return this.each(function() {
var s = this.serial = sf.o.length;
var o = $.extend({},sf.defaults,op);
o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
$(this).addClass([o.hoverClass,c.bcClass].join(' '))
.filter('li:has(ul)').removeClass(o.pathClass);
});
sf.o[s] = sf.op = o;

$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
if (o.autoArrows) addArrow( $('>a:first-child',this) );
})
.not('.'+c.bcClass)
.hideSuperfishUl();

var $a = $('a',this);
$a.each(function(i){
var $li = $a.eq(i).parents('li');
$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
});
o.onInit.call(this);

}).each(function() {
var menuClasses = [c.menuClass];
if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
$(this).addClass(menuClasses.join(' '));
});
};

var sf = $.fn.superfish;
sf.o = [];
sf.op = {};
sf.IE7fix = function(){
var o = sf.op;
if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
this.toggleClass(sf.c.shadowClass+'-off');
};
sf.c = {
bcClass : 'sf-breadcrumb',
menuClass : 'sf-js-enabled',
anchorClass : 'sf-with-ul',
arrowClass : 'sf-sub-indicator',
shadowClass : 'sf-shadow'
};
sf.defaults = {
hoverClass : 'sfHover',
pathClass : 'overideThisToUse',
pathLevels : 1,
delay : 800,
animation : {opacity:'show'},
speed : 'normal',
autoArrows : true,
dropShadows : true,
disableHI : false, // true disables hoverIntent detection
onInit : function(){}, // callback functions
onBeforeShow: function(){},
onShow : function(){},
onHide : function(){}
};
$.fn.extend({
hideSuperfishUl : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
.find('>ul').hide().css('visibility','hidden');
o.onHide.call($ul);
return this;
},
showSuperfishUl : function(){
var o = sf.op,
sh = sf.c.shadowClass+'-off',
$ul = this.addClass(o.hoverClass)
.find('>ul:hidden').css('visibility','visible');
sf.IE7fix.call($ul);
o.onBeforeShow.call($ul);
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
return this;
}
});

})(jQuery);

//]]>
</script>

8.) Lalu letakkan kode dibawah ini tepat dibawah </head>

Kode

<script type='text/javascript'>/* <![CDATA[ */jQuery.noConflict();jQuery(function(){ jQuery('ul.menu-primary').superfish({ animation: {opacity:'show'},autoArrows: true, dropShadows: false, speed: 200, delay: 800 }); });jQuery(function(){ jQuery('ul.menu-secondary').superfish({ animation: {opacity:'show'},autoArrows: true, dropShadows: false, speed: 200, delay: 800 }); });jQuery(document).ready(function() {jQuery('.fp-slides').cycle({fx: 'fade',timeout: 4000,delay: 0,speed: 400,next: '.fp-next',prev: '.fp-prev',pager: '.fp-pager',continuous: 0,sync: 1,pause: 1,pauseOnPagerHover: 1,cleartype: true,cleartypeNoBg: true}); });/* ]]> */</script>

9.) Cari kode <div id='header-inner'> lalu scroll / cari sedikit kebawah sampai anda menemukan kode </b:section>
10. Lalu letakkan kode dibawah ini tepat dibawah kode </b:section> tersebut atau anda bisa ganti kode navigasi yang anda gunakan di blog anda sekarang

Kode

<div class='menu-secondary-wrap'><ul class='menus menu-secondary'><li class='home'><a href='#' title='homepage'><img alt='homepage' border='0' height='18px' src='http://png-3.findicons.com/files/icons/60/doodle/24/home.png' style='center' width='18px'/></a></li><li><a href='#'>Menu Link</a><ul class='children'><li><a href='#'>Sub-Menu Link</a></li><li><a href='#'>Sub-Menu Link</a></li><li><a href='#'>Sub-Menu Link</a></li><li><a href='#'>Sub-Menu Link</a></li></ul></li><li><a href='#'>Menu Link</a></li><li><a href='#'>Menu Link</a></li><li><a href='#'>Menu Link</a></li></ul></div>

11.) Ganti # dengan URL yang akan dituju
Ganti Menu Link dengan nama yang akan ditampilkan dalam menu utama.
Ganti Sub-menu Link dengan nama yang akan menjadi menu yang berada di bawah menu utama
12.) Simpan dan lihat hasilnya

Sumber

Cara Gampang Menghapus sebuah FansPage Facebook

Salam damai bagi kita semua. Mungkin banyak sobat monfoort yang telah mencoba membuat fanspage. Namun mungkin terjadi kesalahan saat membuat fanspage tersebut. Namun fanspage yang gagal itu mungkin tidak enak dilihat, sehingga kita ingin menghapusnya. Untuk itu saya post cara menghapus fanspage di facebook yang gagal. Berikut caranya :

Buka akun facebook anda
Gunakan facebook sebagai fanspage yang ingin anda hapus
Sunting Pengaturan

Di menu paling bawah ada hapus secara permanent

Simpan

Semoga membantu sobat monfoort

Cara Menghapus FansPage Facebook 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.

Sumber

Cara Simple Menghapus sebuah Blog

Siang sobat cara mudah, kali ini admin akan membahas cara menghapus blog dari blogger.com. sebenarnya menghapus blog sangatlah mudah, tetapi saya yakin masih ada sobat cara mudah yang masih kesulitan untuk menghapus akun blognya. oke langsung saja kita mulai eksekusi :

bukan akun blogger sobat
Klik setelan ( setting ) > lainnya ( other )
kemudian pada pilihan blog ( blog tool ) pilih hapus blog ( delete blog )
dan finish, blog sobat sudah terhapus.

sekian semoga bermanfaat ya sobat :)

Sumber

Cara Cepat Membuat Arsip Blog Dengan Fungsi Scroll

Login ke blogger
Sobat harus mempunyai arsip blog, kalo sobat belom punya tinggal pasang aja, Caranya mudah. Klik Tata Letak. pilih Elemen Halaman, Tambah Gadget, Tambah Arsip Blog. Gaya arsip blog harus yang Hierarki
Setelah itu Pilih Edit HTML
Beri tanda centang pada Expand Widget Template
Cari kode <div id='ArchiveList'> gunakan Ctrl+F untuk mencari,kalau sudah ketemu letakan code berikut di atas kode tadi <div style='overflow:auto; width:ancho; height:100px;'> warna biru adalah tinggi scroll
Cari lagi code <b:if cond='data:style == "MENU"'> , perhatikan dibawah kode itu terdapat code :
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
tambah code </div> lagi, jadinya seperti ini
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
Klik Simpan

Cara Mudah Membuat Headline News di Blog

Cara Mudah Membuat Headline News di Blog – Pada Postingan Kali ini Blog CaraBaru.Info Akan Begikan Informasi Terbaru Khusus Buat Anda semua yakninya tentang Cara Mudah Membuat Headline News di Blog, semoga bisa Bermanfaat ya. dan Silahkan Baca Dibawah ini

Cara Mudah Membuat Headline News di Blog – Cara/trik gampang memberi headline news atau news update atau hotnews berita terbaru berjalan dan bergerak di blog atau cara menambah headline news atau news update atau hotnews di blog dengan mudah dan cepat.

Hot+News+Bergerak+di+Blog Cara Mudah Membuat Headline News di Blog

Postingan Blogaul kali ini akan membahas bagaimana cara memberi headline news di blog. Setelah sebelumnya saya juga membahas artikel mengenai tutorial blog yaitu artikel cara membuat recent post dengan thumbnail, maka di kesempatan yang baik ini, saya akan mengulas artikel mengenai cara membuat news update di blog. Sobat pastinya sudah tau semua kan apa itu headline news/news update/hot news dan bagaimana bentuk sebenarnya?

icon smile Cara Mudah Membuat Headline News di Blog

Ok, bagi yang belum tau, saya jelaskan sedikit. Headline news adalah sebuah bagian/elemen di blog yang berisi link-link artikel terbaru dari blog tersebut yang biasanya selalu bergonta-ganti tiap berapa detik sekali dan umumnya terletak di bagian atas dari sebuah blog. Untuk contohnya, bisa dilihat di bagian atas di bawah header blog ini. Tujuan utama pembuatan fasilitas ini menurut saya adalah untuk membuat blog lebih tampil profesional, lebih menarik, membuat betah pengunjung dan pastinya meningkatkan pageviews. Ok, bagi yang tertarik untuk membuat headline news/news update/berita terbaru di blog silahkan ikuti langkah-langkah cara membuat headline news/news update/berita terbaru bergerak di blog di bawah ini:

1. Login ke akun Blogger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).

3. Cari kode ]]></b:skin> (gunakan tombol CTRL + F atau F3 untuk memudahkan pencarian kode).
4. Letakkan kode berikut tepat diatas kode ]]></b:skin>

/* Headline News
——————-*/
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxs99ArWnU1nWo2MTeyVyla4H_Vb-KBiwfZd4eDtkUYK-EgTAye3ir4DnF9p9shPUXZvEIXfQ5-SeZZJ_6cIs43Nz-sgSh5IUV7Q-uL-NyxMlUVsN9Gl_0jCV-5rJqz5g6Q33XI9J7oGA/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}

Keterangan :
> Warna merah adalah ukuran panjang headline news.
> Warna biru adalah ukuran tinggi headline news.
5. Next cari kode </head>
6. Lalu copas kode berikut tepat diatas kode </head>

<script src=’http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA’></script>
<script type=’text/javascript’>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions=”";this.sortstring=”date”;document.write(‘<div id=”‘+c+’” class=”‘+a+’”></div>’);this.feedcontainer=document.getElementById(c);this.itemcontainer=”<li>”}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!=”undefined”){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer=”<”+a.toLowerCase()+”>”};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML=’<img src=”‘+gfeedfetcher_loading_image+’” /> Loading news…’;var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf(“datetime”)!=-1)?d.toLocaleString():(c.indexOf(“date”)!=-1)?d.toLocaleDateString():(c.indexOf(“time”)!=-1)?d.toLocaleTimeString():”";return”<span class=’datefield’>”+b+”</span>”};gfeedfetcher._sortarray=function(a,b){var b=(b==”label”)?”ddlabel”:b;if(b==”title”||b==”ddlabel”){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:”";if(d==”"){alert(“Google Feed API Error: “+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer==”<li>”)?”<ul>n”:”";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d=’<a href=”‘+a[c].link+’” target=”‘+this.linktarget+’” class=”titlefield”>’+a[c].title+”</a>”;var b=/label/i.test(this.showoptions)?’<span class=”labelfield”>['+this.feeds[c].ddlabel+”]</span>”:” “;var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?”<br />”+a[c].content:/snippet/i.test(this.showoptions)?”<br />”+a[c].contentSnippet:”";e+=this.itemcontainer+d+” “+b+” “+g+”n”+f+this.itemcontainer.replace(“<”,”</”)+”nn”}e+=(this.itemcontainer==”<li>”)?”</ul>”:”";this.feedcontainer.innerHTML=e}; var gfeedfetcher_loading_image=”indicator.gif”;function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer=”<div>”;this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent(“onunload”,function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f==”<li>”)?”<ul>n”:”";for(var e=0;e<d.length;e++){var h=’<a href=”‘+d[e].link+’” target=”‘+g+’” class=”titlefield”>’+d[e].title+”</a>”;var j=/label/i.test(b)?’<span class=”labelfield”>['+d[e].ddlabel+”]</span>”:” “;var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?”<br />”+d[e].content:/snippet/i.test(b)?”<br />”+d[e].contentSnippet:”";c+=f+h+” “+j+” “+k+”n”+a+f.replace(“<”,”</”)+”nn”}c+=(f==”<li>”)?”</ul>n”:”";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type=’text/css’>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 16px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>

7. Terakhir cari kode <div id=’header-wrapper’> atau <div id=’header-outer’> (pilih salah satu saja)
8. Lalu letakkan kode berikut tepat di bawah kode nomor 7 tadi

<div class=’newspic’>
<div style=’float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;’>
<script type=’text/javascript’>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://www.amronbadriza.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style=’clear:both;’/>
</div>

> Ganti kode yang berwarna biru dengan URL blog sobat.
9. Simpan template dan lihat hasilnya.
Nah, mudah sekali bukan?

Demikianlah postingan mengenai cara mudah membuat headline news di blog. Semoga bermanfaat buat semua. Sampai jumpa.. ^_^

Blogaul

Sumber : http://www.amronbadriza.com/feeds/posts/default

Cara sederhana memasangkan Komentar Facebook Dan Blogger Berdampingan

Seperti janji saya yang sudah lama tertulis DISINI, bahwa saya akan membuat artikel mengenai cara membuat/memasang kolom komentar facebook dan blogger berdampingan seperti yang sudah saya gunakan di Dusunblog ini, kali ini saya ingin menepatinya.

memasang komentar facebook berdampingan dengan komentar blogger

Memasang kolom komentar facebook di blog ternyata sangat membantu. Bukan cuma untuk pengunjung blog, tapi juga bagi pemilik blog itu sendiri. Tapi ada masalah lain ketika kolom tersebut dipasang berurutan (bawah atas) dengan kolom komentar bawaan blogger. Memakan ruang yang mengakibatkan halaman blog berambah panjang.

Ada trik sederhana agar kolom komentar facebook tampil di blog, tapi tidak memakan banyak tempat, karena diletakkan berdampingan dengan kolom komentar bawaan blogger.

Untuk memasang kolom komentar facebook dan blogger berdampingan, yang harus dipersiapkan yaitu, ID facebook kamu dan ID aplikasi facebook. Bagi yang belum mempunyai ID facebook bisa mendapatkannya dengan mengikuti cara yang saya tulis DISINI (klik langsung untuk melihat).

Sekarang kita langsung pada cara memasangnya :

1-Login ke akun blogger
2-Pilih blog yang ingin dipasang komentar facebook
3-Klik Template dan lanjutkan..
4-Edit HTML dan jangan lupa untuk centang Expand Widget Templates.
5-Cari kode ]]></b:skin> (tekan F3 untuk mempermudah pencarian kode HTML nya)
6-Letakkan kode berikut ini diatas kode ]]></b:skin>.

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

7-Lalu cari kode <head> masukkan kode ini dibawah kode <head>, kalau saya sendiri meletakkannya dibagian paling bawah meta. Berikut kode yang harus dipasang.

<meta property="fb:admins" content="ID Facebook"/>
<meta property="fb:app_id" content="App ID"/>

Ganti yang berwarna biru dengan ID facebook dan App ID facebook kawan sedusun. Caranya lihat disini : Cara Agar Komentar Facebook Di Blog Ada Pemberitahuan.

8-Cari kode </head>, lalu letakkan kode berikut ini diatasnya

<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

9-Lanjutkan dengan mencari kode <div class='comments' id='comments'>. Biasanya didalam template akan terdapat dua kode <div class='comments' id='comments'>.

10-Letakkan kode berikut ini dibawah dua kode <div class='comments' id='comments'>. (Pasang dibawah kode <div class='comments' id='comments'> yang pertama dan kedua)

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://s-static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://lh5.googleusercontent.com/--vu5gE3yh1E/UA333Ytm5hI/AAAAAAAAAnM/nbi9p0of21o/h120/favicon.ico'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Angka 2 menunjukkan jumlah komentar yang tampil, sedangkan angka 400 menunjukkan ukuran lebar kolom komentar facebook. Ganti atau sesuaikan dengan keperluan kawan sedusun.

Untuk mempermudah mencari dua buah kode <div class='comments' id='comments'>, tekan F3, tuliskan kode tersebut. Tambahkan angka 1 di belakang kode yang dicari tadi (contoh : <div class='comments' id='comments'1>), dan langsung letakkan kode komentar facebook dibawah kode yang ditemukan pertama. Kembali ke pencarian menggunakan F3 tadi dan cari <div class='comments' id='comments'>. Letakkan kode komentar facebook. Dan kembali lagi ke kolom pencarian menggunakan F3, cari <div class='comments' id='comments'1>, hapus angka 1 dan klik "Save Template".

Selesai, bila semua langkah diikuti dengan benar dan kolom komentar facebook belum juga tampil di blog kawan sedusun. Tutup dulu browser, atau log out sekalian. Buka kembali/login ke akun blogger. Buka blog yang sudah dipasang komentar facebook berdampingan dengan komentar blogger/blogspot. Di kolom komentar sudah tampak di halaman blog kawan sedusun, lengkap dengan pemberitahuan bila ada pengunjung yang memberi komentar melalui akun facebook.

Sekedar tambahan : Bila kawan sedusun memang sudah niat ingin memasang komentar fabeook yang berdampingan dengan kolom komentar blogger. Baca dan ikuti cara diatas disetiap langkahnya. Akan lebih baik jika sambil membaca caranya, kawan sedusun sambil praktek di blognya. Selain menghindari ada langkah yang terlewat, cara ini juga efektif untuk mempercepat proses pemasangan kolom komentar facebook di blog kawan sedusun.

Semoga tulisan saya bisa dipahami dengan mudah dan bisa bermanfaat untuk kawan sedusun semuanya.

Description: Membuat dua pilihan komentar di blog, facebook dan blogger dengan posisi berdampingan dan Rating: 5

Cara Mudah Memasang Like Facebook, Tweet, Google+1

Membuat, Memasang dan Menambahkan Like Facebook, Tweet, Google+1 di Postingan Blog.

Share button / tombol berbagi seperti facebook like, tweet dan Google+1 merupakan salah satu aspek penunjang dalam meningkatkan traffic kunjungan ke blog kita. Apalagi blogger pemula seperti Saya yang masih Nol Besar pemahamannya tentang SEO, mungkin hanya mimpi untuk menjadi nomor 1 di pencarian google. Maka dari itu kita bisa maksimalkan traffic kunjungan blog kita lewat social bookmarking seperti facebook dan twitter.

Cara Membuat memasang menambah like facebook twitter google di bawah postingan blog

Langsung saja ya gak usah basa basi lagi dah, hehehe....

Masuk ke akun blogger Anda/ dasbor
Klik Menu template > Edit HTML> centang Expand Template Widget. Jangan lupa untuk memback up template sobat dengan cara mendownloadnya.
Masukkan dulu kode di bawah ini tepat di atas kode </head>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

kode ini adalah kode javascript untuk memunculkan tombol Google+1, jika kode tersebut sudah ada, maka tidak perlu dimasukkan lagi.

4. Kemudian Copy kode di bawah ini ;

<b:if cond='data:blog.pageType == "item"'>
<table border='0'><tbody><tr>
<td><a class='twitter-share-button' data-count='horizontal' data-via='supergaptech' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=85&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:85px; height:22px;'/></td>
<td>
<script src='http://www.lintas.me/assets/scripts/widget_v2.js?uid=4f49908afb8252a83a003d79' type='text/javascript'/>
<script type='text/javascript'>
lintasme.init('right'); // options : left, top, bottom, right
</script>
</td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
</b:if>

Ganti kode twitter supergaptech dengan nama akun twitter sobat. Sobat juga bisa menghapus kode berwarna biru, jika mau. Widget tersebut adalah kode javascript untuk web directory lintas.me

5. Masukkan kode di atas pada kode-kode ini:

jika ingin memasang share button di bawah postingan blog cari kode berikut, dan masukkan kode tadi, tepat dibawahnya kode ini.

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
</div>

Jika ingin memasang share button diatas postingan / di bawah judul postingan, masukkan tepat di bawahnya kode berikut,

<div class='post-header'>
<div class='post-header-line-1'/>
</div>

Kemudian klik pratinjau terlebih dahulu, jika tidak error berarti share button sudah terpasang di blog. Klik Simpan Template. Share button ini akan ditampilkan di halaman posting bukan di menu utama / homepage. Oleh karena coba buka salah satu postingan blog sobat untuk melihatnya apakah sudah bekerja dengan baik.

Oke, Bagaimana... sudah terpasang? Jika belum bisa, Julak siap membantu. Selamat Berblogging mania, hehehe. Salam Blogger. Jangan lupa di share, hehehe...

Cara Kecil untuk Membuat Artikel Terkait dengan Thumbnail

Cara Membuat Artikel Terkait dengan Thumbnail – Pada Postingan Kali ini Blog CaraBaru.Info Akan Begikan Informasi Terbaru Khusus Buat Anda semua yakninya tentang Cara Membuat Artikel Terkait dengan Thumbnail, semoga bisa Bermanfaat ya. dan Silahkan Baca Dibawah ini

Cara Membuat Artikel Terkait dengan Thumbnail – Cara memberi/menciptakan related post dengan thumbnail gambar atau cara menjadikan artikel terkait muncul dengan gambar

Artikel+Terkait+dengan+Thumbnail Cara Membuat Artikel Terkait dengan Thumbnail

Halo sobat, bagaimana kabar kalian hari ini? Saya harap kalian baik-baik saja

icon smile Cara Membuat Artikel Terkait dengan Thumbnail

Setelah beberapa waktu Blogaul tidak update artikel tentang tips trik blog dikarenakan admin lagi sibuk di dunia nyata, maka di kesempatan yang baik ini saya akan mulai kembali posting artikel-artikel seputar tips trick blog dan SEO. So, stay with Blogaul ya..

icon biggrin Cara Membuat Artikel Terkait dengan Thumbnail

Kali ini saya akan posting artikel tentang cara membuat related post dengan thumbnail gambar di blog. Beberapa waktu lalu saya juga sudah update artikel tentang related post, tapi waktu itu related post biasa, tapi bagi yang tertarik boleh juga koq mencobanya. Silahkan dibaca: cara membuat related post atau artikel terkait. Tapi, membuat related post dengan thumbnail gambar pastinya lebih keren dan membuat pengunjung lebih betah di blog kita, silahkan lihat contoh di atas. Nah, bagi yang tertarik untuk membuatnya, silahkan ikuti langkah-langkah di bawah ini: 1. Login ke akun Blogger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).

3. Dengan menggunakan CTRL+F atau F3, cari kode berikut: </head>

4. Pastekan kode di bawah tepat di atas kode nomor 3 di atas

<!–Related Posts with thumbnails Scripts and Styles Start–>
<!– remove –><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/AVvXsEjTven492nsj5AP-sCgnQwqT8-gWzD7ziCUpJDIqMv4wuuq-AnKfqzcsBTsa6YdQM8CvHeHVkck_OY2cEZvKPETRAb9d1TJ_4T63XTgRM3B9_PZ5dLJPDO6pn8yBSY_skIKy6l9SAXvhq4/s400/noimage.png”;
var maxresults=5;
var splittercolor=”#d4eaf2″;
var relatedpoststitle=”Related Posts”;
</script>
<script src=’http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js’ type=’text/javascript’/>
<!– remove –></b:if>
<!–Related Posts with thumbnails Scripts and Styles End–>

5. Lanjutkan dengan mencari kode <data:post.body/> dan pastekan kode berikut tepat di bawah kode <data:post.body/> tadi

<!– Related Posts with Thumbnails Code Start–>
<!– remove –><b:if cond=’data:blog.pageType == "item"’>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != "true"’>
</b:if>
<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>
<script type=’text/javascript’>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style=’clear:both’/>
<!– remove –></b:if>
<!– Related Posts with Thumbnails Code End–>

6. Simpan template sobat dan lihat hasilnya

Keterangan :
var maxresults = 5 adalah jumlah artikel akan ditampilkan di related post blog sobat.
var relatedpoststitle=”Related Posts”; kamu bisa ganti kata Related Posts atau kalimat lain yang sobat inginkan.

Sumber : http://www.amronbadriza.com/feeds/posts/default
Nah Itu Tadi informasi yang dapat CaraBaru.Info sampaikan. Semoga bermanfaat dan Beguna Hendaknya Buat anda semua pengunjung Blog Ini. dan Terima kasih Telah membaca artikel yang Berjudul Cara Membuat Artikel Terkait dengan Thumbnail

Entri Pertama

asalamualaikum blogger