<b:include name='quickedit'/>Mungkin cukup itu saja untuk menjaga Blog agar tetap Valid HTML 5 dan SEO 100%.
Apa itu Tattoo? Dalam Bahasa Indonesia disebut dengan istilah "Rajah".
Tattoo merupakan produk dari Body Decorating dengan menggambarkan kulit tubuh dengan menggunakan (jarum,tulang & sebagainya), kemudian bagian tubuh yang digambar tersebut diberi zat perwarna atau pigmen berwarna-warni.
Tattoo dianggap sebagai kegiatan seni karena didalamnya terdapat kegiatan pola atau design tattoo.
Tattoo merupakan Seni Rajah yang permanent, adapun artikel dibawah ini adalah agar untuk membantu agar tidak salah dalam menentukan gambar tattoo, karena tattoo memiliki arti-arti yang menggambarkan sesuatu dari visual.
Artikel dibawah ini hanya sebagai kerangka arti tattoo secara umum atau masing-masing tertentu punya presepsi sendiri tentang motif tattoo yang di inginkan.
Artikel ini saya sadur dari buku
"The Body Modification Black Book" by Richard Le May.
Salah satu bagian yang cukup sulit untuk me-responsif-kan sebuah situs adalah bagian menu navigasi nya, karena tidak sedikit orang yang sedemikian rupa tidak teliti dalam mengerjakan bagian ini untuk di-responsif-kan. Mengapa menu navigasi cukup penting untuk di-responsif-kan? Jawaban nya sederhana.. karena bagian ini sudah menjadi faktor penting bagi aksesibilitas sebuah situs. Menu navigasi yang responsif tentu akan mempercepat sekaligus mempermudah pengunjung anda menelusuri halaman apapun yang dibutuhkan.
<nav class="clearfix">Struktur HTML di atas digunakan sebagai markup dari navigasi. Seperti yang anda lihat, disana ada menu utama yang berisi beberapa kategori 'level'.
<ul class="clearfix">
<li><a href="#one">Intro</a></li>
<li><a href="#two">Summary</a></li>
<li><a href="#three">Skills</a></li>
<li><a href="#four">Experience</a></li>
<li><a href="#five">Education</a></li>
<li><a href="#six">Contact</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
<div class="container">
<div class="panel" id="one"></div>
<div class="panel" id="two"></div>
<div class="panel" id="three"></div>
<div class="panel" id="four"></div>
<div class="panel" id="five"></div>
<div class="panel" id="six"></div>
</div>
<style type='text/css'>Pada bagian ini, kita dapat mengatur penampilan navigasi. Walau hanya sebagai dekorasi, namun dengan penampilan yang baik akan mampu menarik perhatian pengunjung anda nantinya. Tetapi disini saya hanya akan menggunakan tampilan (warna dan bentuk) yang sederhana, yaaa paling tidak apa yang saya maksudkan sudah tersampaikan.
.container {
//container
}
/* Basic Styles */
nav {
height: 40px;
width: 100%;
background: #262626;
font-size: 11pt;
position: fixed;
top: 0;
}
nav ul {
padding: 0;
margin: 0;
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
padding: 9px 0;
}
nav a#pull {
display: none;
}
@media screen and (max-width: 800px) {
nav {
width: 100%;
height: auto;
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav li {
width: 100%;
float: left;
position: relative;
border-bottom: 1px solid #262626;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
background: #2e2e2e;
}
nav a:hover {
background: #444;
}
nav a#pull {
display: block;
background-color: #262626;
width: 100%;
position: relative;
}
nav a#pull:after {
content: "";
background: url(nav-icon.png) no-repeat;
width: 30px;
height: 30px;
color: #FFF;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
.panel {
width: 100%;
height: 450px;
}
#one {
background: #9FF;
}
#two {
background: #9F6;
}
#three {
background: #9F0;
}
#four {
background: #CF0;
}
#five {
background: #CF9;
}
#six {
background: #F93;
}
</style>
<script type='text/javascript>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(this).width();
if (w & gt; 800 & amp; & amp; menu.is(':hidden')) {
menu.removeAttr('style');
}
});
$('li').on('click', function(e) {
var w = $(window).width();
if (w & lt; 800) {
menu.slideToggle();
}
});
$('.panel').height($(window).height());
});
</script>
Kita akan berbicara sedikit tentang pseudo-elemen dan melihat empat contoh yang menggunakan beberapa teknik khusus untuk mencapai berbagai efek. Empat contoh berikut diciptakan untuk topik tertentu. Hal ini jelas bahwa ada cara lain untuk mencapai efek visual yang sama, tetapi untuk kepentingan percobaan ini, kita tentu saja akan menggunakan pseudo-elemen jadi di ingat bahwa ini hanya bekerja pada browser yang mendukung animasi dan transisi pseudo-elemen.
<div class="drop"> </div>Meskipun hanya memiliki satu unsur tapi bisa memiliki
.container lain yang membantu perubahan skala.*,Berikut adalah dua tips untuk mendapatkan animasi lebih naturalistik:
*:before,
*:after {
box-sizing: border-box;
}
.drop {
background: rgba(255, 255, 245, 1);
border: 4px solid rgba(255, 245, 235, 1);
border-radius: 100%;
box-shadow: inset -0.1em 0 2em 0.5em rgba(255, 255, 255, 0.5),
inset -0.1em 0 0.5em 0 rgba(0, 0, 0, 0.8);
position: relative;
margin: 0 auto;
width: 15em;
height: 15em;
overflow: hidden;
}
.drop:before,
.drop:after {
content:"";
display:block;
position:absolute;
}
/* Drop */
.drop:before {
background: rgba(167, 217, 234, 1);
border-radius: 100%;
/* Drop start */
box-shadow: 0 0 0 0.1em rgba(167, 217, 234, 0.8),
0 0 0 0.15em rgba(167, 217, 234, 0.8),
0 0 0 0.2em rgba(167, 227, 234, 0.8),
0 0 0 0.25em rgba(167, 227, 234, 0.8),
0 0 0 0.3em rgba(167, 227, 234, 0.8),
0 0 0 0.35em rgba(167, 227, 234, 0.8),
0 0 0 0.4em rgba(167, 227, 234, 0.8),
0 0 0 0.45em rgba(167, 227, 234, 0.8),
0 0 0 0.5em rgba(167, 227, 234, 0.8);
top: 0%; left: 50%;
/* The "width" and "height" of the division must be smaller than the "box-shadow" total size. So we can control different variant sizes. */
width: 0.2em;
height: 0.2em;
animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
}
/* Surface */
.drop:after {
background: rgb(52, 152, 219);
background: linear-gradient(rgba(52, 255, 255, 1) 0%, rgba(52, 152, 219, 1) 10%, rgba(152, 252, 219, 1) 100%);
border-radius: 100% 0 50% 0;
left: 0;
bottom: 0;
width: inherit;
height: 3em;
opacity: 0.7;
animation: surface 3s linear infinite;
}
/* Drop animation */
@keyframes fall {
/* Drop form */
5%, 15% {
box-shadow: 0 -1.4em 0 0.1em rgba(167, 217, 234, 1),
0 -0.8em 0 0.15em rgba(167, 217, 234, 1),
0 -0.3em 0 0.2em rgba(167, 217, 234, 1),
0 -0.1em 0 0.25em rgba(167, 217, 234, 1),
0 0 0 0.3em rgba(167, 217, 234, 1),
0 0.2em 0 0.35em rgba(167, 217, 234, 1),
0 0.4em 0 0.4em rgba(167, 217, 234, 1),
0 0.6em 0 0.45em rgba(167, 217, 234, 1),
0 0.8em 0 0.5em rgba(167, 217, 234, 1);
}
/* Drop fall */
16% {
top: 80%;
}
/* Contact surface */
18% {
top: 80%;
box-shadow: 1em -8em 0 0.2em rgba(177, 227, 234, 1),
-2.2em -3.8em 0 0.1em rgba(177, 227, 234, 1),
3em -2.85em 0 0.3em rgba(177, 227, 234, 1),
-3.5em -4em 0 0.2em rgba(177, 227, 234, 1),
0 0 0 0.3em rgba(177, 227, 234, 1),
2em -2em 0 0.2em rgba(177, 227, 234, 1),
-0.3em -3em 0 0.2em rgba(177, 227, 234, 1),
0.5em -5em 0 0.35em rgba(177, 227, 234, 1),
-3em -1em 0 0.3em rgba(177, 227, 234, 1);
}
/* Dispersion */
30% {
top: 90%;
box-shadow: 1.5em 0 0 0.2em rgba(252, 252, 255, 0.1),
-2em 0 0 0.15em rgba(252, 252, 255, 0.1),
3em 0 0 0.2em rgba(252, 252, 255, 0.1),
-2em 0 0 0.25em rgba(252, 252, 255, 0.1),
0 0 0 0.2em rgba(252, 252, 255, 0.1),
2.35em 0 0 0.3em rgba(252, 252, 255, 0.1),
-0.5em 0 0 0.2em rgba(252, 252, 255, 0.1),
1em 0 0 0.3em rgba(252, 252, 255, 0.1),
-4em 0 0 0.4em rgba(252, 252, 255, 0.1);
}
/* Hidden */
40%, 100% {
top: 95%;
background: rgba(255, 255, 255, 1);
box-shadow: 1.8em 0.5em 0 0.2em rgba(255, 255, 255, 0),
-3em 0.5em 0 0.1em rgba(255, 255, 255, 0),
4em 0.5em 0 0.1em rgba(255, 255, 255, 0),
-3.5em 0.5em 0 0.1em rgba(255, 255, 255, 0),
0 0 0 0.3em rgba(255, 255, 215, 0),
2.45em 0.5em 0 0.1em rgba(255, 255, 255, 0),
-0.8em 0.5em 0 0.2em rgba(255, 255, 255, 0),
1.5em 0.5em 0 0.3em rgba(255, 255, 255, 0),
-4.5em 0.5em 0 0.2em rgba(255, 255, 255, 0);
}
}
/* Animation of water surface */
@keyframes surface {
50% {
border-radius: 0 75% 0 75%;
opacity: 0.5;
height: 3.5em;
}
}
<div class="circle">Di sini hanya memiliki
<h1>Anarchyta</h1>
</div>
.container dan judul untuk memisahkan teks dari yang lain..circle {
background: rgb(255,255,255);
border-radius: 100%;
cursor: pointer;
position: relative;
margin: 0 auto;
width: 15em;
height: 15em;
overflow: hidden;
transform: translateZ(0);
}
.circle h1 {
color: rgba(189, 185, 199,0);
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 1.6em;
line-height: 8.2em;
text-align: center;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
user-select: none;
transition: color 0.8s ease-in-out;
}
.circle:before,
.circle:after {
border-radius: 100%;
content:"";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2),
inset 0 10.6em 0 rgba(30, 140, 209, 0.2),
inset -10.6em 0 0 rgba(30, 140, 209, 0.2),
inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
transition: box-shadow 0.75s;
}
/* We rotate the :after pseudo-element to get the edge from the corner, we could also just do that with box-shadows. */
.circle:after {
transform: rotate(45deg);
}
/* There is no problem using "pseudo-class + pseudo-element" :) */
.circle:hover:before,
.circle:hover:after {
box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.86em 0 rgba(252, 150, 0, 0.5),
inset -0.86em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}
.circle:hover > h1 {
color: rgba(185, 185, 185,1);
}Anda harus menggunakan hanya satu warna, untuk menghindari pencampuran warna yang tidak diinginkan dengan (.overlay ketika memicu hover / mengarahkan mouse pada object.<div class="loading"></div>CSS
.loading {
background: rgba(0, 50, 250, 0);
position: relative;
margin: 5em auto 0 auto;
width: 3em;
height: 3em;
animation-name:rotate;
}
.loading,
.loading:before,
.loading:after {
border-radius: 100%;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
.loading:before,
.loading:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
}
.loading:before {
background: rgba(200, 250, 100, 0);
animation-name: ring;
}
.loading:after {
background: rgba(250, 0, 200, 0);
animation-name: ring2;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
85%, 100% {
/* 360deg * 10 */
transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@keyframes ring {
0% {
transform: scaleX(0.1) scaleY(0.5);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
75%, 100% {
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);
}
}
@keyframes ring2 {
0% {
transform: scaleX(0.5) scaleY(0.1);
box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5),
inset 0 0.8em 0 rgba(252, 150, 0, 0.5),
inset -0.8em 0 0 rgba(0, 255, 0, 0.5),
inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
}
/* hidden */
65%, 100% {
transform: scaleX(2) scaleY(2.1);
box-shadow: inset 0 0 0 rgba(255, 0, 0, 0),
inset 0 0 0 rgba(252, 150, 0, 0),
inset 0 0 0 rgba(0, 255, 0, 0),
inset 0 0 0 rgba(0, 150, 255, 0);
}
}Ini adalah contoh yang bagus untuk bereksperimen dengan timing dan kecepatan untuk mendapatkan animasi yang baik.<div class="pojoro">●</div>CSS
.pojoro {
background: rgba( 255, 255, 255, 1);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 40%,rgba(51,51,51,1) 100%);
border-radius: 100%;
/* box-shadow: secondary color, body, eyelash */
box-shadow: 0 0 0 0.2em rgb(146,89,149),
0 0 0.1em 0.55em rgb(176,89,179),
inset 0 0.2em 0 0 rgb(136,79,139);
/* ojo (eye) */
color: rgba( 40, 40, 40, 0.8);
line-height: 1.1em;
padding-left: 0.18em;
-webkit-font-smoothing: antialiased;
user-select: none;
/* usability, position and transition */
cursor: pointer;
position: relative;
margin: 5em auto 0 auto;
width: 1em; height: 1em;
transform-origin: center;
transition: all 0.8s ease-in-out;
/* Separate the animations to have a better control over the eye and the body */
animation: eye 2.2s ease-in-out infinite, body 1.15s 1.8s linear infinite;
}
/* Elevate and distort the creature. */
.pojoro:hover {
transform: scaleY(0.9) scaleX(0.95) translateY(-3em) translateZ(0);
}
/* wings */
.pojoro:before,
.pojoro:after {
background: rgba(0,0,0,0);
border-radius: 100%;
content: "";
/* display:none, hide wings */
display: none;
position: absolute;
width: 1em; height: 0.1em;
-webkit-filter: blur(1px);
transition: all 0.2s;
animation-duration: 0.2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.pojoro:before {
top: 25%; left: 1.45em;
margin-left: -1em;
transform-origin: left;
transform: rotate(-60deg);
animation-name: wings;
}
.pojoro:after {
top: 25%; left: -2.2em;
margin-left: 1em;
transform-origin: right;
transform: rotate(60deg);
animation-name: wings2;
}
.pojoro:hover:before,
.pojoro:hover:after {
background: rgba(100,100,100,0.8);
/* display:block, we allow the wings to appear and the animation starts */
display: block;
margin-left: 0em;
width: 2em; height: 0.3em;
}
@keyframes eye {
/* Eye movement */
5%, 10% {
line-height: 1.2em;
padding-left: 0em;
}
15%, 20% {
line-height: 1.15em;
padding-left: 0.4em;
}
/* Eyelash movement */
25% {
box-shadow: 0 0 0 0.2em rgb(146,89,149),
0 0 0.1em 0.55em rgb(166,89,169),
inset 0 1em 0 0 rgb(136,79,139);
}
23%, 27% {
box-shadow: 0 0 0 0.2em rgb(146,89,149),
0 0 0.1em 0.55em rgb(166,89,169),
inset 0 0.2em 0 0 rgb(136,79,139);
}
}
@keyframes body {
50% {
width: 1.4em; height: 1.4em;
}
}
@keyframes wings {
50% {
transform: rotate(65deg);
}
}
@keyframes wings2 {
50% {
transform: rotate(-65deg);
}
}Dan itu adalah contoh terakhir!
var originalTitle = document.title;Untuk membuat Blog tetap Valid HTML 5 dan SEO 100% setelah Anda menambahkan Widget hapus Kode ini pada --> Edit HTML
var dian_config = {
home_page: "http://afowles.blogspot.com/",
max_result: 18,
t_w: 40,
t_h: 40,
summary: 9999,
new_tab_link: false,
ct_id: "comments-container",
new_dian: " Komentar Baru!",
interval: 30000,
alert: true,
alert: function (a) {
.....................
<b:include name='quickedit'/>Mungkin cukup itu saja untuk menjaga Blog agar tetap Valid HTML 5 dan SEO 100%.
Seperti yang kita ketahui bahwa widget Random post mampu menampilkan artikel blog kita secara acak dan bergantian pada saat widget tersebut kita load (bekerja), dimana Script widget tersebut akan menampilkan beberapa artikel/postingan blog kita sesuai dengan pengaturan yang kita terapkan pada Script widget tersebut dengan cara mengatur nilai yang akan di tampilkan, sebagai contoh maxResults = 7; script tersebut akan menampilkan artikel/postingan acak sebanyak (7) artikel.
Akan tetapi mau tidak mau Saya harus mengatakan bahwa widget random post itu sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak:
<script src='/feeds/posts/default?alt=json-in-script&max-results=99999&callback=randomPosts'></script>Bagi Anda para pemakai mungkin tidak pernah tahu mengenai ini, tetapi sebenarnya setiap pemakai widget random post termasuk juga widget artikel terkait tanpa sadar telah menerima beban begitu besar. Ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter
max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil (diusahakan, karena jumlah posting yang kita terbitkan tidak mungkin mencapai angka sebesar itu).start-index pada feed sehingga posting yang dimuat bisa dimulai dari urutan sembarang:function randomPosts(json) {
// Ubah JSON menjadi HTML...
}
var startIndex = Math.round(Math.random() * 9999); // Membuat angka acak
document.write('<scr' + 'ipt src="/feeds/posts/summary?alt=json-in-script&start-index=' + startIndex + '&max-results=7&callback=randomPosts"></scr' + 'ipt>');Ada satu masalah kecil yang mungkin akan mengganggu. Jika angka acak yang tercipta nilainya lebih besar dari total posting blog Anda saat ini, maka widget random post ini tidak akan bekerja. Oleh karena itu kita harus membatasi angka acak yang tercipta, yaitu tidak boleh kurang dari 1 dan tidak boleh lebih dari “total posting dikurangi jumlah posting yang ingin ditampilkan”.json.feed.openSearch$totalResults.$t:// KonfigurasiMuat ulang widget Anda berkali-kali. Seharusnya Anda akan melihat pesan log indeks pemanggilan posting yang berubah-ubah seperti ini:
var homePage = 'http://nama_blog.blogspot.com',
maxResults = 7;
// Fungsi untuk menggenerasikan angka acak dengan batasan minimal dan maksimal
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Mendapatkan indeks pemulai yang aman untuk memanggil feed utama
function createRandomPostsStartIndex(json) {
// Buat angka acak dengan nilai tidak boleh kurang dari `1` dan tidak boleh lebih dari `total posting - posting yang ingin ditampilkan`
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
// Tampilkan pesan log
console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
start-index seperti ini:function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}Pada bagian akhir URL feed terdapat parameter callback=randomPosts. randomPosts di sini merupakan fungsi utama yang akan kita buat untuk mengubah JSON Blogger menjadi widget:function randomPosts(json) {
var link, ct = document.getElementById('random-post-container'),
entry = json.feed.entry,
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}Sentuhan akhir, acak urutan posting yang ditampilkan menggunakan fungsi pengacak array sehingga daftar posting yang ditampilkan nantinya akan semakin acak urutannya:// Fungsi untuk mengacak array
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
// Widget
function randomPosts(json) {
var link, ct = document.getElementById('random-post-container'),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
<div id='random-post-container'>Memuat...</div>
<script type="text/javascript">
//<![CDATA[
// Feed configuration
var homePage = 'http://nama_blog.blogspot.com',
maxResults = 7,
containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
var link, ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>
<div id='random-post-container'>Memuat...</div>
<script type="text/javascript">
//<![CDATA[
// Feed configuration
var homePage = 'http://nama_blog.blogspot.com',
maxResults = 7,
summaryLength = 170,
noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png',
containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
var link, summary, img,
ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '…' : "";
img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li>';
skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
skeleton += '<span>' + summary + '</span>';
skeleton += '<span class="clear"></span></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>
<style type='text/css'>
#random-post-container {
width: auto;
margin-left: 15px;
}
#random-post-container ul {
margin: 7px 0 0;
padding: 0;
}
#random-post-container li {
list-style: none;
margin: 0 0 2px;
background-color: #e5e5e5;
padding: 0 7px 0 7px;
line-height: 24px;
height: 24px;
overflow: hidden;
border-bottom: 1px dotted #ccc;
}
#random-post-container a {
text-decoration: none;
}
#random-post-container a:hover {
text-decoration: underline;
}
#random-post-container strong {
font: normal bold 13px/1.4 Arial,Sans-Serif;
}
</style>
<div id='random-post-container'>Memuat...</div>
<script type='text/javascript'>
//<![CDATA[
/* Performa Widget Random Post
* By Anarchyta
* http://bit.ly/anarchyta
* http://plus.google.com/118396814444756975267/posts
*/
var homePage = 'http://nama_blog.blogspot.com',
maxResults = 7,
containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
var i = arr.length,
j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
// console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
var link, ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<strong>Random Post</strong><ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li>❖ <a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt><div id="itempager" style="position:relative;"><a title="Dharla Ferdana" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:14px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://www.dhf.web.id" target="_blank">►DH-F</a></div>');
//]]>
</script>
<style type='text/css'>
#random-post-container {
margin-bottom: 5px;
background-color: #333;
border: 4px solid #ddd;
width: 400px;
// Style by: www.dhf.web.id/;
}
#random-post-container a {
text-decoration: none;
color: #fff;
}
#random-post-container a:hover {
text-decoration: underline;
}
#random-post-container ul {
padding: 0 7px;
}
#random-post-container li {
border-top: 1px solid #444;
border-bottom: 1px solid #222;
padding: 5px 7px;
color: #aaa;
list-style: none;
overflow: hidden;
}
#random-post-container img {
display: block;
float: left;
margin: 2px 7px 5px 0;
padding: 4px 4px;
background-color: #222;
border: 1px solid #111;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #444;
-moz-box-shadow: 0 1px 0 #444;
box-shadow: 0 1px 0 #444;
}
#random-post-container a {
font-weight: bold;
font-size: 110%;
}
#random-post-container .clear {
display: block;
clear: both;
}
</style>
<div id='random-post-container'>Memuat...</div>
<script type='text/javascript'>
//<![CDATA[
/* Performa Widget Random Post
* By Anarchyta
* http://bit.ly/anarchyta
* http://plus.google.com/118396814444756975267/posts
*/
// Feed configuration
var homePage = 'http://nama_blog.blogspot.com',
maxResults = 5,
summaryLength = 150,
noImageUrl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj2gNwU9yjLzfgb8-acPhmzZ-H5r4dftmFgi0IYS_aeT418axbZInGZAKgtWwlGS4uyl74bntkT922XdZo-fFPiO3QOX8ATH9j0eNmlL2xUj5_XVryCwsi788SNfzv1y_x0eG0YsUKH6Ea/s1600/dHF-logo1.png',
containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
var i = arr.length,
j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
var link, summary, img,
ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '…' : "";
img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl;
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li>';
skeleton += '<img src="' + img + '" alt="" width="72" height="72">';
skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>';
skeleton += '<span>' + summary + '</span>';
skeleton += '<span class="clear"></span></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt><div id="itempager" style="position:relative;"><a title="Dharla Ferdana" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:18px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://www.dhf.web.id" target="_blank">►DH-F</a></div>');
//]]>
</script>
