Featured Post

Sampaikan Pengaduan Anda di Media Sosial Twitter

Sampaikan Pengaduan Anda di Media Sosial. Keluhkan Apa pun, kecuali saat mengadu kepada Allah SWT. TELEPON rumah mati. Otomatis Speedy ...

Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi

0 Follow @romel_tea
Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi & Responsive.

SETELAH berbagi Cara Memasang Featured Post Slider di Halaman Depan Blog, kali ini saya share cara memasang Featured Post Widget Bawaan Blogger yang sudah dimodifikasi.

Desain tampilannya seperti ini:

Featured Post Bawaan Blogger yang Sudah Dimodifikasi

Featured Post yaitu widget Blogger untuk menampilkan posting, artikel, atau konten unggulan. Widget ini dirilis Blogger 10 December 2015: Highlight the posts that matter the most.

Cara memasangny mudah, tinggal klik Layout > Add a Gadget > pilih Featured Post. Setelah itu geser (pindahkan) posisinya ke atas widget Blog Post.

Featured Post Bawaan Blogger

Kode Featured Post Bawaan Blogger yang Sudah Dimodifikasi

Jika ingin desain Featured Post Bawaan Blogger yang Sudah Dimodifikasi, pasang kode berikut ini di template blog Anda setelah Featured Post dipasang.

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.FeaturedPost .post-summary{background:#f7f7f7;position:relative;padding:0;height:auto;max-height:330px;overflow:hidden;margin-bottom:10px}
.FeaturedPost .post-summary h3{font:500 20px Oswald,serif;bottom:0;font-size:20px;margin:0;z-index:10;position:absolute;top:0;left:0;height:100%;width:36%;background:#1F1C1B;opacity:0.7;filter:alpha(opacity = 70);padding:10px}
.FeaturedPost .post-summary h3:after{content:&quot;&quot;;position:absolute;top:-0.25em;right:100%;bottom:-0.25em;width:0.25em}
.FeaturedPost .post-summary h3 a{color:#fff;background:transparent}
.FeaturedPost .post-summary h3 a:hover{color:#ff6}
.FeaturedPost .post-summary p{color:#ff6;bottom:10px;overflow:hidden;text-overflow:ellipsis;margin:0;z-index:10;position:absolute;top:55%;left:0;max-height:100px;width:36%;opacity: 0.8;filter: alpha(opacity = 70);padding: 10px;line-height: normal;}
.FeaturedPost .image{display:block;max-height:330px}
.FeaturedPost h2{display:none}
@media only screen and (max-width:480px){
.FeaturedPost .post-summary h3{font-size:18px;margin:0;width:50%}
.FeaturedPost .post-summary p{margin:0;height:auto;max-height:72px;width:50%}
}
@media only screen and (max-width:320px) {
.FeaturedPost .post-summary p {display: none;}
}
</style>
</b:if>

3. Agar tampil hanya di halaman depn, tambahkan kode tag kondisional. Caranya, cari kode widget Featured Post seperti ini:

    <b:widget id='FeaturedPost1' locked='false' title='Featured Post' type='FeaturedPost'>

Nah, di bawahnya ada kode seperti ini:

      <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <b:include name='content'/>
  </b:if>
</b:includable>

Ubah sehingga seperti kode di atas dengan menambahkan kode warna merah.

Save!

Itu dia Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi. (blogromeltea.blogspot.com).*

Cara Memasang Featured Post Slider di Halaman Depan Blog

0 Follow @romel_tea
Cara Memasang Featured Post Slider di Halaman Depan Blog

Featured Post Slider adalah widget yang menampilkan posting terbaru di hompage berupa slide gambar dan judul seperti gambar di bawah ini:

Cara Memasang Featured Post Slider di Halaman Depan Blog

Fungsinya sama dengan widget Featured Post bawaan blogger, yaitu menampilkan posting unggulan. Namun, wigdet berikut ini memunculkan posting terbaru.

Cara Memasang Featured Post Slider di Halaman Depan Blog

1. Klik Tema > Edit HTML
2. Copas kode CSS Featured Post Slider berikut ini di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.s3slider{margin:0 auto 10px;background:#333 none no-repeat 50% 50%;position:relative;overflow:hidden;}
ul.s3slider-content {padding: 0;}
.s3slider.loading{text-indent:-9999px;}
.s3slider-content,.s3slider-content li{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;list-style:none;overflow:hidden;}
.s3slider-content li{position:static;display:none;}
.s3slider-content img{display:block;width:100%;height:100%;max-width:none;max-height:none;border:none;outline:none;padding:0;margin:0;}
.s3slider-caption{position:absolute;right:0;bottom:0;left:0;height:auto;font:normal normal 13px/normal Helmet,Freesans,Sans-Serif;color:white;background-color:black;opacity:.8;filter:alpha(opacity=80);padding:17px 20px 20px;display:none;}
.s3slider-title,.s3slider-meta{display:block;}
.s3slider-title a{font-size:110%;font-weight:bold;color:white;text-decoration:none;}
.s3slider-title a:focus,.s3slider-title a:hover{text-decoration:underline;}
.s3slider-meta-comment:before{content:&quot;- &quot;}
</style>
    </b:if>

3. Cari kode:

<b:section class='main' id='main' name='Main' showaddelement='no'>

4. Copas kode HTML & JavaScript Featured Post Slider berikut ini di atas kode tersebut:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"/>
<div id="s3slider-container"> 
<div class="s3slider loading" style="width:100%;height:300px;">    Memuat...  </div>
</div>
<script>
var s3slider_config = {
url: 'https://blogromeltea.blogspot.com',
numPost: 5,
labelName: null,
monthArray: ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],
noImage:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC', 
newTabLink: false,
containerId:'s3slider-container',
slider:{width:520,height:300,
timeOut: 9000}};
</script>
<script type='text/javascript'>
//<![CDATA[
(function($) {
$.fn.s3Slider = function(vars) {
var element = this,
timeOut = (vars.timeOut != undefined) ? vars.timeOut : 5000,
current = null,
timeOutFn = null,
faderStat = true,
mOver = false,
items = $(element).find('li'),
itemsSpan = items.find('.s3slider-caption');
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut / 2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if (items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
// console.log("Poof..");
}
}, makeSlider = function() {
current = (current != null) ? current : items[(items.length - 1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if (faderStat == true) {
if (!mOver) {
$(items[currNo]).fadeIn((timeOut / 6), function() {
if ($(itemsSpan[currNo]).is(':visible')) {
$(itemsSpan[currNo]).slideUp((timeOut / 6), function() {
faderStat = false;
current = items[currNo];
if (!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut / 6), function() {
faderStat = false;
current = items[currNo];
if (!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if (!mOver) {
if ($(itemsSpan[currNo]).is(':hidden')) {
$(itemsSpan[currNo]).slideDown((timeOut / 6), function() {
$(items[currNo]).fadeOut((timeOut / 6), function() {
faderStat = true;
current = items[(currNo + 1)];
if (!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut / 6), function() {
$(items[currNo]).fadeOut((timeOut / 6), function() {
faderStat = true;
current = items[(currNo + 1)];
if (!mOver) {
fadeElement(false);
}
});
});
}
}
}
}; makeSlider();
};
})(jQuery);
(function($, w, d) {
var sc = s3slider_config,
container = d.getElementById(sc.containerId),
head = d.getElementsByTagName('head')[0],
s = d.createElement('script'),
skeleton = '<div class="s3slider" id="s3slider" style="width:' + sc.slider.width + 'px;height:' + sc.slider.height + 'px;"><ul class="s3slider-content">',
title, image, link, date, comment;
w.blogger_s3Slider = function(json) {
var entry = json.feed.entry;
for (var i = 0, ien = entry.length; i < ien; ++i) {
title = entry[i].title.$t;
date = entry[i].published.$t.split('-');
var dd = date[2].substring(0, 2),
dm = date[1],
dy = date[0];
image = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+\-c/, "/s" + sc.slider.width) : sc.noImage;
for (var j = 0, jen = entry[i].link.length; j < jen; ++j) {
if (entry[i].link[j].rel == "alternate") {
link = entry[i].link[j].href;
break;
}
}
for (var k = 0, ken = entry[i].link.length; k < ken; ++k) {
if (entry[i].link[k].rel == "replies" && entry[i].link[k].type == "text/html") {
comment = entry[i].link[k].title;
break;
}
}
skeleton += '<li><img src="' + image + '" style="display:block;width:' + sc.slider.width + 'px;min-height:' + sc.slider.height + 'px;height:auto;"><span class="s3slider-caption"><span class="s3slider-title"><a href="' + link + '"' + (sc.newTabLink ? ' target="_blank"' : "") + '>' + title + '</a></span><span class="s3slider-meta"><span class="s3slider-meta-date">' + dd + ' ' + sc.monthArray[parseInt(dm, 10) - 1] + ' ' + dy + '</span><span class="s3slider-meta-comment">' + comment + '</span></span></span></li>';
}
skeleton += '</ul></div>';
container.innerHTML = skeleton;
$('#' + sc.containerId).children().s3Slider({
timeOut: sc.slider.timeOut
});
};
s.src = sc.url.replace(/\/$/, "") + '/feeds/posts/summary' + (sc.labelName !== null ? '/-/' + sc.labelName : "") + '?alt=json-in-script&orderby=published&max-results=' + sc.numPost + '&callback=blogger_s3Slider';
head.appendChild(s);
})(jQuery, window, document);
//]]>
</script>
  </b:if>

5. Ubah alamat blognya (https://blogromeltea.blogspot.com) dengan url blog Anda.
6. Sesuaikan lebar dan tinggi gambar slider di kode kode warna merah.
7. Save! Simpan template.

Selesai. Itu dia Cara Memasang Featured Post Slider di Halaman Depan Blog. Wasalam. (https://blogromeltea.blogspot.com).*

Manchester United vs Leicester City 2-1 Video Gol & Full Highlights

1 Follow @romel_tea
Manchester United vs Leicester City 2-1 Video Gol & Full Highlights
Manchester United vs Leicester City 2-1 Video Gol & Full Highlights

 Manchester United menang 2-1 atas Leicester City pada pertandingan perdana Liga Inggris 2018/2019  di Old Trafford, Jumat (10/8/2018) atau Sabtu dini hari WIB.

Dua gol kemenagan The Red Devils dicetak oleh Paul Pogba dan Luke Shaw. Gol balasan The Foxes diciptakan Jamie Vardy.

Pogba mencetak gol pertama MU di menit ketiga melalui tendangan penalti. Shaw mencetak gol kedu United melui sontekan kaki kirinya usai menerima umpan Juan Mata.

Leicester menipiskan skor menjadi 2-1 melalui gol Jamie Vardy di masa injury time.

Manchester United vs Leicester City 2-1 Video Gol & Full Highlights



Susunan Pemain

Manchester United: David De Gea, Matteo Darmian, Eric Bailly, Victor Nilsson Lindeloef, Luke Shaw, Fred (Mc Tominay 76'), Andreas Pereira, Paul Pogba (Fellaini 84'), Juan Mata, Marcus Rashford (Romelu Lukaku 67'), Alexis Sanchez.

Leicester City: Kasper Schmeichel, Ben Chilwell, Harry Maguire, Wes Morgan, Daniel Amartey (Rachid Ghezzal 63'), Adrien Silva, Onyinye Ndidi, Demarai Gray, James Maddison (Jamie Vady 63'), Ricardo Pereira, Kelechi Iheanacho.*

Jadwal Liga Inggris 2018-2019 Pekan Pertama

0 Follow @romel_tea
Jadwal Liga Inggris 2018-2019 Pekan Pertama
Jadwal Liga Inggris 2018-2019 Pekan Pertama. Siaran Langsung RCTI & MNCTV.

Liga Inggris musim 2018-2019 segera bergulir akhir pekan ini, 11-12 Agustus 2018.

Laga Manchester United vs Leicester City menjadi pertandingan pertama yang akan digelar di Old Trafford, Jumat (10/8/2018) atau Sabtu Pkl 02.00 WIB (Live RCTI).

Jadwal Liga Inggris 2018/19 Pekan Pertama  sudah menghadirkan laga bigmatch Arsena vs Manchester City di Emirates Stadium, Minggu (12/8/2018). Duel The Gunners vs The Citizens disiarkan langsung RCTI.

Berikut ini Jadwal Liga Inggris 2018/19 Pekan Pertama dikutip dari laman resmi Premier League. Siaran Langsung Liga Inggris ditayangkan RCTI, MNCTV, BeinSport, dan Streaming.

Jadwal Liga Inggris 2018/19 Pekan Pertama

Sabtu (11/8/2018)
Manchester United Vs Leicester City, 02:00 WIB
Newcastle United Vs Tottenham Hotspur, 18:30 WIB
Bournemouth Vs Cardiff, 21:00 WIB
Fulham vs Crystal Palace, 21:00 WIB
Huddersfield Vs Chelsea, 21:00 WIB
Watford Vs Brighton, 21:00 WIB
Wolverhampton Vs Everton, 23:30 WIB

Minggu (12/8/2018)
Liverpool Vs West Ham United, 19:30 WIB
Southampton Vs Burnley, 19:30 WIB
Arsenal Vs Manchester City, 22:00 WIB

Jadwal Liga Inggris 2018/19 Pekan Pertama
Jadwal Liga Inggris 2018/19 Pekan Pertama

Cara Custom Domain Blogger di Hostinger

2 Follow @romel_tea
Cara Custom Domain Blogger di Hostinger: Membuat Blog di Blogger dengan Nama Domain Sendiri.


cek domain Hostinger


MEMBUAT blog di Blogger dengan nama domain sendiri atau mengubah alamat blog dari yang tadinya --misanya-- romelteamedia.blogspot.com menjadi www.romelteamedia.com dikenal dengan istilah Custom Domain atau Domain Kustom.

"Menyiapkan domain kustom. Saat membeli domain, Anda dapat mempersonalisasi alamat situs blog," demikian kata Google Blogger di laman panduan domain kustom.

Blog dengan nama domain sendiri akan menjadikan blog kita lebih SEO Friendly, kredibel, aman, dan lebih profesional.

Custom Domain Blogge

Selain tampak profesional dan keren, mengganti nama domain atau alamat blog dengan nama domain sendiri ini juga akan membuat blog kita "abadi", tetap ada, selama blognya tidak kita delet atau diban sama blogspot.

Jadi, kalo misalnya kita lupa memperpanjang sewa domain, maka hanya nama domain itu yang "hilang", tapi blog aslinya dengan alamat blogspot masih tetap ada. Konten atau isi blog pun aman.

Menurut para pakar SEO, blog dengan nama domain sendiri, menggunakan Top Level Domain (TLD) seperti .com atau .net, akan menjadikan blog kita lebih ramah mesin telusur (SEO Friendly) alias lebih disukai mesin pencari dan pengunjung.

Cara Custom Domain Blogger di Hostinger

Membuat blog dengan nama domain sendiri sangat mudah. Langkah mengubah alamat blog yang ada blogspot-nya menjadi dot com atau dot net sebagai berikut:
  1. Buat dulu blognya di Bogger. (Buka: Cara Membuat Blog di Blogger)
  2. Beli atau sewa nama domainnya di Hostinger Indonesia
  3. Lakukan Custom Domain
Selesai! Jadilah kini alamat blog kita, misalnya dari yang tadinya http://romelteamedia.blogspot.com menjadi www.romelteamedia.com.

Tahapan Custom Domain Blogger 

Berikut ini langkah melakukan custom domain di Blogger

1. Klik Setelan / Setting > Basic
2. Di menu Blog Adress, klik Add a custom domain, seperti gambar di bawah ini:

Cara Custom Domain Blogger di Hostinger

3. Masukkan Nama Domain Anda. Misalnya, romelteamedia.com

Cara Custom Domain Blogger di Hostinger

4. Klik Save / Simpan.

Akan muncul error dan berisi kode CNAME Blogger. Dalam contoh gambar di bawah, kode CNAME ada di kotak, yaitu:

www | ghs.google.com
6jnaxvzb4vr3 | gv-x7qwnjgw53yke4.dv.googlehosted.com (contoh saja, punya Anda nanti beda kode)


5. Copy Paste kode tersebut di Notepad.

Sampai di sini, tinggalkan dulu halaman dashboard Blogger Anda. Jangan ditutup, biarkan aja dulu, karena nanti kita akan kembali ke Blogger.

6. Buka Hostinger Indonesia
7. Login ke Akun Anda: Klik menu Masuk di kanan atas.

Akan terbuka halaman Cpanel Anda di Hostinger.

halaman Cpanel Anda di Hostinger

9. Klik KELOLA.
Akan terbuka halaman baru dan klik DNS ZONE

klik DNS ZONE

10. Centang kotak Saya paham bahwa .....
11. Klik Atur Ulang

custom domain blogger hostinger

12. Tunggu sekitar satu menit, lebihin dikit biar pasti, lalu Refresh halaman (Tekan F5). Akan terbuka halaman baru.

13. Isikan A Host dengan klik Tambah Baru, lalu masukkan 4 kode berikut ini satu per satu:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Langkah Detailnya:

  1. Klik Tambah Baru
  2. Kolom pertama (Host) isi dengan nama blog tanpa www, misalnya romelteamedia.com
  3. Kolom kedua isi dengan kode 216.239.32.21
  4. Simpan!
  5. Ulangi Tambah baru dst untuk kode kedua, ketiga, dan keempat.
  6. Hasilnya Seperti gambar di bawah ini.


custom domain blog

14. Copy Paste kode CNAME yang tadi sudah di dapatkan dari Blogger di Langkah No. 4, yang ada kode ghs.google.com.

Masukkan kode pertama di kolom pertama dan kode kedua di kolom kedua. Lihat Gambar CNAME (Alias) di bawah ini.


setting cname custom blogger

BERES!

Silakan kembali buka halaman Dashboard Bloger Anda, lalu klik tombol Save di Setting Custom Domain.

Jika masih error, sabar... tunggu beberapa saat, dan ulangi. Menurut pengalaman, dalam waktu satu-dua menit saja sudah bisa disimpan.

Jika sudah bisa di-save, centang "Alihkan domainanda.com ke www.domainanda.com" dan simpan.

Alihkan Domain Custom Blogger

Itu dia panduan detail bagi pemula tentang Cara Custom Domain Blogger di Webhosting Hostinger Indonesia, agar blog lebih kredibel, SEO, profesional, dan banyak pengunjung. Wasalam. (http://blogromeltea.blogspot.com).*