Halo sahabat bloger, ketemu lagi diblog Sibocah Dungu, pada kali ini saya akan membahas tentang blog sobat, salah satunya yaitu membuat releted post pada home page. Mungkin anda sudah tau bentuknya seperti apa, jika anda pernah mengunjungi blog, wordpress, atau semacamnya, mungkin anda sudah melihat, tentang releted Post.
Releted Post ini Bertujuan agar mempersingkat atau mempersimple dari tampilan Blog anda, yang meng-index postingan anda. ada beberapa teknik yang bisa anda gunakan untuk membuat Releted Post Pada Home Page ini.
Nah sobat setelah kesana kemari mencari tahu, tentang mebuat releted post ini, kali ini saya akan membagikan artikel ini , agar kita semua bisa belajar bersama. Oh iya sebetulnya releted post pada home page ini sudah ada , namun tampilannya saja yang kurang efektif, karena menampilkan seuruh postingan anda yang sudah anda post, bisa terbayangkan, bagaimana Panjang nya. wkwkwk.
Oke Sobat Langsung Saja cek tutorialnya Dibawah ini.
Membuat Releted Post Pada Home Page Bloger
Baik kali ini kita akan memulai untuk membuat Releted Post pada Home Page Blogger.
- Langkah pertama, sudah pastikan anda masuk ke blogger.com
- jika anda sudah masuk ke bloger, pilih pada tab menu kiri, pilih Template > Edit Html.
- jika anda sudah menemukan, dan membukanya, langkah selanjutnya yaitu mencari tag </head>, nah jika sudah menemukan tag tersebut, copy paste kan code dibawah tepat diatas tag </head>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
4. Jika Sudah, langkah selanjutnya yaitu, meng copy kan kode CSS dibawah tepat diatas kode ]]></b:skin>.
/*--------------------------------------------------------------
Membuat Bilah Menu Navigasi Di Atas Header Halaman Blog
Blog: Tulisan Sibocah Dungu
URL : https://tulisansibocahdungu.blogspot.com
Oleh: Zulfikar Ilham Febrianto
--------------------------------------------------------------*/
.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 45px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: rgb(90, 152, 252);
background-image: -moz-linear-gradient(center top , rgba(62, 96, 93, 0.91) 100%);
box-shadow: 0px 2px 0px rgb(14, 180, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kolom-utama {
-moz-transition: all 0.2s linear 0s;
width: 960px;
height: auto;
margin: 0px auto;
}
.kolom-menu {
width: 521px;
height: auto;
margin: 0px 0px 0px -41px;
float: left;
display: inline;
}
.kolom-menu ul {
height: auto;
margin-top: 0px;
}
.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
}
.kolom-menu ul li:first-child {
border-left: 1px solid rgba(30, 30, 30, 0.125);
}
.kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
background-color: rgba(255, 255, 255, 0.125);
}
5. Nah sekarang kita masuk langkah kelima, kembalike menu edit html, cari lah kode <data:post.body/>, nah jika anda sudah menemukannya, ganti kode tersebut dengan kode dibawah ini.
<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='https://tulisansibocahdungu.blogspot.com'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEN0QiaEKw9Z4ZUZrOSyhCW9Msu2W2dsbU5gqdecCMBaYZbVmjRCttuoejFpkTiOcP2qay0Hn9FD60d7-gLiU2n4UCZ9zj_qUly7VR3Ot81yEIaxltuEMGf09VLnJ0nioTKhW6Qj9oB9c/s800/Beranda.png' width='20px'/></a></li>
<li><a href='https://tulisansibocahdungu.blogspot.co.id'>ARTIKEL</a></li>
<li><a href='http://tulisansibocahdungu.blogspot.com/search/label/TUTORIAL'>TUTORIAL</a></li>
<li><a href='https://tulisansibocahdungu.blogspot.co.id'>TIPS AND TRICK</a></li>
<li><a href='https://tulisansibocahdungu.blogspot.co.id/2016/12/about.html'>ABOUT</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='URL'>Facbook</a></li>
<li><a href='URL'>Twitter</a></li>
</ul>
</div>
</div>
</div>
6. Save template kalian, dan silahkan Cek, dan hasilnya sangat memuaskan, dan berhasil, saya mencobanya sendiri pada blog saya.
Keterangan : Isikan bilah menu diatasbaik yang sebelah kiri maupun kanan, dengan seperlunya, buat semenarik mungkin untuk membuatnya, jangan lupa untuk mengganti Linknya, kehalaman yang sudah anda buat.
Oke sahabat Blogger, mungkin itu saja Tutorial Dari Saya, Mungkin ada kurang lebih nya, dan saran, harap masukkan komentar anda pada kolom komentar dibawah.
Sekian Terimakasih.
Salam Blogger Indonesia
