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
++++++++++++++++++++++++++++++++++++++++++++++++++