Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Cara Mudah Membuat Scrool di Komentar

Cara Mudah Membuat Scrool di Komentar - Cara Paling Mudah membuat Scrool kotak di komentar blog. Related Post adalah sebuah list artikel lainnya yang bisa dibaca oleh pengunjung blog ketika sudah membaca satu artikel, biasanya berada dibawah postingan. Related post ini biasanya diset untuk menemukan artikel sejenis dari label yang di buat oleh admin blog. berikut ini tips Cara Mudah Membuat Scrool di Komentar. 
Cara Mudah Membuat Scrool di Komentar
Cara Mudah Membuat Scrool di Komentar
Pertama silahkan Login ke blog Anda kemudian masuklah ke Edit HTML.
Setelahnya silahkan Centang Expand Widget
Ketiga tekan ctrl+f kemudian ketik <data:post.body/>, jika ada 2 pilih saja yang atas.
Setelah itu Copykan script Scrool Komentar ini di Atas cara ketiga tadi.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rscr'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>
Untuk tulisan yang berwarna merah bisa Anda sesuaikan.

Langkah berikutnya ini adalah menempatkan code CSS, cari ]]></b:skin> lalu copy script berikut diatas code tersebut.
.rscr{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rscr:hover{background-color: rgb(255, 255, 255);}
Setelahnya silahkan Save template Anda.


Membuat Animasi Gear Berputar CSS

Tutorial Cara Membuat Animasi Gear Berputar dengan CSS - Tutorial mudah bagaimana cara membuat animasi gear yang berputar memanfaatkan script dan code CSS. Anda perlu Upload sebuah image misalnnya sebuah Gambar gear untuk membuatnya.


Misalnya menggunakan Gambar diatas untuk dibuat berputar, anda bisa mencari gambar lainya dan dikombinasikan sehingga putarannya bisa seperti berantai.

Berikut ini script Membuat Animasi Gear Berputar CSS
HTML
<div class="gear" id="gear1"></div>
CSS
/* CSS3 keyframes aregnoz.blogspot.com */
@-webkit-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes ckw {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
@-moz-keyframes cckw {
    0% {
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}
/* gears aregnoz.blogspot.com*/
.gear {
    float: none;
    position: absolute;
    text-align: center;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#gear1 {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivzxS6c9SsSfLe4d8uJro85T-SB2hmLeZfxyJnijOZcU675QZe5YxWvmf8vwfyZh_Q_oYXrNLlDlG_fpanSqWTF8yT4NQFErlqh-Oeheazq-rVAeu4KNBndRIk5qcUbIzF4s4ORDAahZT-/s1600/gear.png') no-repeat 0 0;
    height: 130px;
    left:10px;
    top: 10px;
    width: 130px;
    -moz-animation-name: cckw;
    -moz-animation-duration: 16.84s;
    -webkit-animation-name: cckw;
    -webkit-animation-duration: 16.84s;
}
​Information !!! Tulisan dengan Background Merah silahkan Anda ganti dengan link Gambar Anda.


Selamat Mencoba.

Membuat Tooltip dengan CSS Manual

Membuat Tooltip dengan CSS Manual
Membuat Tooltip dengan CSS Manual - Tooltip Otomatis dengan CSS sebenarnya juga tidak sulit kita buat hanya saja sekarang saya masih ingin memposting Membuat Tooltip dengan CSS Manual Aregnoz Blog, Sharing Your Imagination.






Script HTML
<a class="tooltip" href="#">Test Demo <span>Blog tutorial CSS dan HTML 5</span></a>
Script Class
a.tooltip {
position:relative;
color:#cf2c2c;
text-decoration:none;
}
a.tooltip span {
padding:5px 10px;
background:#555;
border:1px solid #555;
min-width:140px;
position:absolute;
top:5px;
left:5px;
color:#FFF;
text-align:center;
opacity:0;
-moz-transition: opacity 1s ease,top 1s ease;
-webkit-transition: opacity 1s ease,top 1s ease;
-o-transition:opacity 1s ease,top 1s ease;
transition: opacity 1s ease,top 1s ease;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:13px;
font-weight:bold;
}
a.tooltip span:before {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #555;
z-index:5;
content: " ";
position:absolute;
top:-7px;
left:11%;
}
a.tooltip span:after {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #555;
display:block;
content: " ";
position:absolute;
top:-8px;
left:11%;
}
a.tooltip:hover span {
opacity:1;
top:25px;
Tooltip ini bekerja secara manual namun sangat ringan sekali dan lebih variatif dibandingkan dengan kebanyakan tooltip yang sudah ada dan umum sekali.

Jasa Maintenance Blog Gratis

Jasa Maintenance Blog Gratis
Jasa Maintenance Blog Gratis
Jasa Maintenance Blog Gratis - Jasa Desain Blog dan Pembenahan Blog Gratis 2012 saya dedikasikan untuk keluarga saya yang telah memberikan saya motivasi dan saling tolong menolong kepada sesama. Bagi Anda yang berminat dengan penawaran saya untuk Jasa Maintenance Blog Gratis ini silahkan Contact saya.

Jasa Maintenance Blog Gratis ini benar-benar gratis Free 90% yang 10% biaya Kopi Om, hee... dan bukan saya menyombongkan diri atau apalah, hanya saja jika memang benar-benar butuh saya akan memberikan jasa maintenance gratis ini. Hanya untuk sekedar berbagi sedikit ilmu yang sudah saya pelajari selama ini, jadi tetep keep positif thinking gan.

Tidak semua yang request akan saya layani, hanya yang benar-benar niat menurut saya pribadi dan benar-benar butuh saja. Fasilitas meliputi redesign dan penataan tata letak serta pemilihan warna yang mungkin bisa disesuaikan dengan keinginan yang request.

Jasa Maintenance Blog Gratis ini sepenuhnya saya dedikasikan untuk keluarga saya dan sahabat-sahabat saya yang terus mendukungku dalam segala keadaan. Thanks a lot of my family and All my friends.

Contact Me :  Effand  [085649905055]
Personal Blog : Mas Effand

Periode : experied 30 November 2012
++++++++++++++++++++++++++++++++++++++++++++++++++

Triks Membuat Cursor Bertabur Bintang

Triks Membuat Cursor Bertabur Bintang
Triks Membuat Cursor Bertabur Bintang - Cara membuat Cursor bertabur bintang saat digerakkan ini adalah cara agar Cursor kita selalu bertaburan Bintang ketika di gerakkan. Cara ini biasanya untuk menghias blog yang mempunyai warna-warna gelap atau selain putih karena akan terlihat lebih bagus dalam keadaan gelap.

Anda bisa mensetting Warna bintang nya dengan mengganti kode warna dalam script Javascript dibawah ini yang diberi warna berbeda.



Triks Membuat Cursor Bertabur Bintang dengan menggunakan script javascript ini bisa anda langsung praktekan sekarang juga dengan menaruh script dibawah ini di atas </head>
<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF"; /*ganti dengan warna sesukamu*/
var sparkles=40;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
 Setelah anda copy diatas </head> silahkan save template dan lihat hasilnya.


Membuat Blog Responsive Untuk Video

Membuat Blog Responsive Untuk Video
Membuat Blog Responsive Untuk Video ~ Cara agar Blog Responsive ini adalah cara agar blog kita bisa menjadi responsive tampil memanjang ketika dibuka di beberapa device yang berbeda. Dari beberapa cara yang ada di blog master responsive saya mengambil sedikit script khusu untuk saya copy disini agar saya juga bisa menggunakan jika butuh.

Membuat Blog Responsive Untuk Video Bisa membuat blog kita akan tampil dinamis ketika dibuka di browser lain dan juga device lain.




Script berikut ini khusus untuk responsive Video
Embed Script
.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.video iframe,  .video object,  .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
Anda bisa mencopy script diatas dan menaruhnya diatas ]]></b:skin>
Oke, sekedar share untuk Membuat Blog Responsive Untuk Video.