Membuat silsilah keluarga sebenarnya bukan hal yang sulit, sekarang ini ada banyak situs yang memberikan layanan untuk membuat silsilah keluarga, tetapi semua itu memerlukan biaya. Setelah dipertimbangkan dengan matang, saya rasa membuat silsilah keluarga menggunakan blogger adalah cara yang sangat efisien karena gratis dan akan ada terus saat tidak lagi diurus.
Membuat Silsilah Keluarga Di Blogger Tanpa Aplikasi
- Pada blog, silahkan buat postingan baru / halaman baru
- Pada mode HTML copas script berikut di bawah ini:
<Style>
ul #myUL {
list-style-type: none;
}
#myUL {
margin: 0;
padding: 0;
}
.sildata{
display:none;
}
#mysilsilah{
background: #f5f5f5;
padding: 10px;
overflow: auto;
max-height:100%px;
white-space: nowrap;
/*script tambahan khusus untuk IE */
scrollbar-face-color: #CE7E00;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #6F4709;
scrollbar-3dlight-color: #11111;
scrollbar-darkshadow-color: #6F4709;
scrollbar-track-color: #FFE8C1;
scrollbar-arrow-color: #6F4709;
border: 5px outset #599bb3;
}
}
.caret {
cursor: pointer;
cursor:hand;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
.caret::after {
content:"";
color: #599bb3;
font-weight: bold;
line-height:5px;
display: inline-block;
margin-right: 6px;
margin-left:5px;
margin-bottom:0;
padding:5px;
width:20px;
height: 20px;
border-radius: 0 0 20px 20px;
position:absolute;
top:-3px;
cursor:pointer;
cursor:hand;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgws1USx695KWuoPdai7umpablfw1Rph3r5LtX1Mh4FV8mY2yzMauBpTmJcD2xuH8Nno6QUuK60PotPqCWt2-4XnLjTltHDOw17zeF9CX1pYoALHIaxSiVQtBYCX-IuP896izhxy-tyziON/s1600/ceret.png") no-repeat;
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */'
transform: rotate(90deg);
}
.caret-down::after {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari */'
transform: rotate(180deg);
}
.nested {
display: none;
}
.SilAktif {
display: block;
}
.tree ul {
margin-left: 20px;
}
.tree li {
list-style-type: none;
margin:20px;
position: relative;
}
.tree li::before {
content: "";
position: absolute;
top:-15px;
left:-20px;
border-left: 2px ridge #599bb3;
border-bottom:2px ridge #599bb3;
border-radius:0 0 0 0px;
width:18px;
height:27px;
}
.tree li::after {
position:absolute;
content:"";
top:10'px;
left:-20px;
border-left: 2px ridge #599bb3;
border-top:2px ridge #599bb3;
padding:5px;
border-radius:0px 0 0 0;
width:8px;
height:100%;
}
.tree li:last-child::after {
display:none;
}
.tree li:last-child:before{
border-radius: 0 0 0 5px;
}
ul.tree>li:first-child::before {
display:none;
}
ul.tree>li:first-child::after {
border-radius:5px 0 0 0;
}
.tree li a {
border-radius: 5px;
padding:5px 10px 5px 10px;
text-decoration:none;
font-family: 'Roboto', sans-serif;
-moz-box-shadow: 0px 10px 14px -7px #276873;
-webkit-box-shadow: 0px 10px 14px -7px #276873;
box-shadow: 0px 10px 14px -7px #276873;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color:#599bb3;
-moz-border-radius:8px;
-webkit-border-radius:8px;
color:#ffffff!important;
font-size:16px;
font-weight:normal;
text-shadow:0px 1px 0px #3d768a;
}
.tree li a:hover, .tree li a:hover+ul li a,
.tree li a:focus, .tree li a:focus+ul li a {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.tree li a:hover+ul li::after, .tree li a:focus+ul li::after,
.tree li a:hover+ul li::before, .tree li a:focus+ul li::before
.tree li a:hover+ul::before, .tree li a:focus+ul::before
.tree li a:hover+ul ul::before, .tree li a:focus+ul ul::before{
border-color: #000; /*connector color on hover*/
}
</Style>
<!-- KodeIMG -->
<div class="mysilsilah" id="mysilsilah">
<ul class="tree" id="myUL">
<li><a href="#">ARIS STALLONE</a><span class="caret"></span>
<ul class="nested">
<li><a href="#">ANDRE STALLONE</a><span class="caret"></span>
<ul class="nested">
<li><a href="#">IVAN STALLONE</a><span class="caret"></span>
<ul class="nested">
<li><a href="#">GEORGE STALLONE</a><span class="caret"></span>
<ul class="nested">
<li><a href="#">CHAKEN STALLONE</a></li>
</ul>
</li>
<li><a href="#">ROBY STALLONE</a></li>
</ul>
</li>
<li><a href="#">MARK STALLONE</a><span class="caret"></span>
<ul class="nested">
<li><a href="#">BRAD STALLONE</a><span class="caret"></span>
<ul class="nested">
<li><a href="#">FRANS STALLONE</a></li>
<li><a href="#">JULLY STALLONE</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">CELINE STALLONE</a><span class="caret"></span>
<ul class="nested">
<li><a href="#">DEDY STALLONE</a><span class="caret"></span>
<ul class="nested">
<li><a href="#">THONY STALLONE</a></li>
<li><a href="#">ERICK STALLONE</a></li>
<li><a href="#">ARTHUR STALLONE</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<p style="color: #599bb3">Klik tanda panah untuk melihat generasi di bawahnya</p>
<script type='text/javascript'>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("SilAktif");
this.classList.toggle("caret-down");
});
}
</script>
Klik tanda panah untuk melihat generasi di bawahnya
Membuat Silsilah Keluarga Di Blogger dengan Aplikasi Silsilah Marga
Agar kalian tahu bahwa saya telah membuat aplikasi penyusun silsilah baik untuk windows maupun Android, tetapi tantangan besarnya adalah bagaimana membuat silsilah keluarga yang kita susun itu mudah diakses oleh keluarga yang lain. Kali ini Dengan menggunakan sedikit pengetahuan tentang CSS dan javascript, saya coba membuat data yang disusun di aplikasi Visual Basic dapat diexport ke fotmat HTML agar mudah untuk dibagikan
Dengan menggunakan aplikasi ini kita dengan sangat mudah membuat silsilah keluarga dan bisa diexport ke file HTML maupun Blogger. Anda hanya perlu menyusun/membuat silsilah keluarga di aplikasi Silsilah Marga yang caranya sangat mudah, lalu tinggal diexport ke HTML, dan hasilnya akan seperti contoh di atas.
Untuk download aplikasi Silsilah Marga, silahkan klik disini
Demikian pembahasan kali ini tentang cara mudah membuat silsilah keluarga di Blogger
Posting Komentar