HOSTING MURAH 2014: animasi

Posts mit dem Label animasi werden angezeigt. Alle Posts anzeigen

Slide Carousel Recent Post untuk Blogger

Kawan masih ingat postingan saya tentang Slide Carousel untuk Daftar Isi, :y; sekarang masih tetap tentang Slide Carousel cuma tampilannya sangat berbeda dengan yang dulu setelah saya adakan perbaikan-perbaikan maupun pengurangan atau menghilangkan kode-kode yang tidak perlu, :z; hal ini terispirasi dari Artikel Terkait berisi Thumbnail perhatikan screenshotnya dibawah ini :q;

Tampilan Carousel sekarang

Carousel lama

Cara Membuatnya :
Bagian Template

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas Script berikut diatas ]]></b:skin>

#bbccarousel{width: 100%;height:175px;position:relative; display:block;background: transparent;margin:0 10px 8px auto;}
#bbccarousel h3{color:#00f;margin:0 2px 2px;font-size:10px;}
#bbccarousel .container{position:absolute;left:0px;width:580px; height:175px; overflow:hidden;padding:0;margin:0 auto 0;}
#bbccarousel .thumb{float:left;margin-right:10px;}
#bbccarousel .thumb:hover{filter:alpha(opacity=70);opacity:.7}
#bbccarousel ul{width:100000px;position:relative;margin-top:10px;}
#bbccarousel ul li{background:#FFF;display:inline;text-align:center; font:bold 12px Arial;width:102px;height:150px;border:1px solid #000;margin:0 2px 20px 4px;padding:6px;}
#bbccarousel ul li a.slider_title{color:#222;display:block;margin:0;padding:0;}
#bbccarousel ul li a.slider_title:hover{color:#F00;}
#bbccarousel a img{display:block;background:none;margin-top:0;}

Teks yang saya beri warna merah silahkan disesuaikan dengan lebar penempatannya
Selanjutnya Copas Script berikut dibawah ]]></b:skin> atau diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='https://sites.google.com/site/blogbegocreation/javascript/bbccarousel.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfXLcxEHXOwN0BGPVrlH4mUoszES4nUeVi5DE39QkEBaTgkPe25mP04UAy8jIUZ6jFtjSozgslFsWgahkMHgu3WXAIyyVayJhO6ShqQ9ks9hfACz7cBNpagf6fCFovp2ndLO4OVANlKlA/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
recentposts1 = 10;
function removeHtmlTag(strx,chop){
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);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < recentposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel =='alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Ags","Sep","Okt","Nov","Des"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="80" class="alignnone" src="'+img[i]+'"/></a></div><h3>'+daystr+'</h3><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Teks yang beri warna merah [jquery], kalau pada Template kawan sudah ada walau sejenisnya, jquery tersebut bisa kawan hilangkan
Teks yang berwarna Biru untuk lebar dan tinggi image
Simpan Template kawan

Bagian Tata Letak

Pada Tata Letak pilih Tambah Gadget
Pilih tanda [+] pada HTML / JavaScript
Copas Kode berikut kedalamnya

<div id='bbccarousel'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+recentposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/></div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#bbccarousel .container").bbcCarousel({
auto:800,
scroll: 1,
speed: 3000,
visible: 5,
start: 1,
circular: true,
});
})})(jQuery)
</script></div></div>

Visible: 5, adalah jumlah yang ditampilkan - disesuaikan
Simpan Blog kawan

Jquery Emoticos untuk Blogger

Unknown | 08:16 | animasi , Blog Bego , tips trik

Sebelumnya saya sudah pernah berbagi tentang Tambahkan Emoticon pada Blog, yang bisa ditampilkan baik pada Komentar maupun pada Postingan :y; dan untuk Blog yang memakai Komentar Thread hanya akan tampil pada Komentarnya saja :q; seperti Emoticons yang diciptakan oleh master DTE yang sudah saya Edit supaya kawan tidak berkecil hati karena bisa tampil baik di Komentar maupun di Postingan Blog, cuma Logo Iconnya berbeda [maaf saya belum sempat untuk meng-Editnya] agar sama :z;
Perlu kawan ketahui, pada umumnya Emoticons mempergunakan simbol misalnya :) :# atau simbol yang lainnya untuk pemanggilan, tapi saya tetap mempergunakan : [titik-dua], abjad [a s/d z] ; [titik-koma] tanpa spasi kalau tidak lain dari yang lain bukan BlogBego namanya

Khusus untuk Postingan

Khusus untuk Komentar

Caranya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Scrool ke bawah sampai </body>
Copas script berikut tepat diatasnya

<style type='text/css'>
.emoWrap {background-color:#585858;border:0px solid #D3BA59;padding:10px 14px;color: black;font:normal bold 12px/normal Tahoma,Arial,Sans-Serif;text-align:center;}
.emo,.emoKey {display:inline-block; /* Penting! */ *display:inline;vertical-align:middle;}
.emoKey {border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:1px 2px;margin:0 0 0 2px;color:black;}
</style>
<strong id="dte_emo-bar">Klik untuk melihat kode:
<br/>
<style type='text/css'>
.emoWrap {background-color:#585858;border:0px solid #D3BA59;padding:10px 14px;color: black;font:normal bold 12px/normal Tahoma,Arial,Sans-Serif;text-align:center;}
.emo,.emoKey {display:inline-block; /* Penting! */ *display:inline;vertical-align:middle;}
.emoKey {border:1px solid #ccc;background-color:white;font:normal bold 11px/normal Arial,Sans-Serif;padding:1px 2px;margin:0 0 0 2px;color:black;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "#comment-editor",
emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/autoemoticons.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/Editor_Smyle.js' type='text/javascript'/>
</strong>

Simpan Template kawan
Selanjutnya cari <b:includable id='threaded-comment-form' var='post'> atau yang mirip seperti berikut ini kodenya

<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form' id='comment-form'> <!...Kotak Pesan kalau ada...>
<p><data:blogCommentMessage/></p>
<br/>
<strong id="dte_emo-bar">Klik untuk melihat kode:
</strong> <!...Kode Pesan yang kawan Tambahkan...>
<data:blogTeamBlogMessage/>
<b:if cond='data:mobile'>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src='' style='display:none;border:none;background:none;width:100%;height:300px;'/>
<b:else/> <!...Ciri yang kawan Cari...>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' id='comment-editor' name='comment-editor' src='' style='border:none;background:none;width:100%;height:300px;'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div></b:includable>

Teks yang saya beri warna merah adalah Kotak Pesan untuk Template yang sudah ditambahkan
Teks yang saya beri warna biru adalah Pesan untuk melihat Kode Emoticons - ditambahkan
Simpan Template kawan

Animasi Gadget Social Bookmark

Unknown | 16:00 | animasi , blogger , link , widget

Kali ini saya tetap berbagi tentang Gadget Social BookMarking dengan model Animasi :q; yang saya dapatkan pada tempat yang sama, terus terang sekarang ini saya lagi males membuat postingan dikarenakan saya fokus pada merancang Template, :z; sedangkan postingan harus tetap ditambah untuk mengecilkan posisi yang tempo hari membengkak hampir 200% [maaf nggak nyambung] :r;

screenshot

Cara Membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas Script berikut diatas atau sebelum </body>

<div class='shr_ss shr_publisher'/>


<script type='text/javascript'>
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>


<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

Simpan Template kawan

Refrensi : Paul Crowe

Cara Lain Mengganti Header dengan Animasi

Unknown | 08:30 | animasi , Kreasi , tips trik

Kawan masih ingat dengan Artikel saya Cara Mengganti Header dengan Animasi :z; yang sedikit agak ribet apalagi berisi mengganti dan merubah beberapa Script, tapi yang sekarang sangat gampang sekali, kawan cukup melihat lebar Header untuk membuat lebar maksimal Animasi :q;

oke langsung saja ke Cara membuatnya :

Buat Animasi Header Blog kawan
Simpan Animasi tersebut pada Hosting kawan dan ambil Link-nya
Selanjutnya masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak
Lihat kiri atas atau pada bagian Header - Edit

Masukkan Link Animasi kawan tadi pada Kotak - Dari web Tempelkan URL gambar dibawah
Pada Penempatan silahkan pilih [asal jangan Dibalik judul dan keterangan

> Selain judul dan keterangan artinya hanya Animasi saja yang tampil

> Tempatkan keterangan setelah gambar artinya dibawah Animasi ada Discreption Blog

Simpan Blog kawan

Cara Membuat Obyek Berterbangan

Unknown | 23:53 | animasi , Blog Bego , Kreasi

Sebelumnya saya sudah berbagi dengan kawan Cara Membuat Salju dan Gelembung Berjatuhan :z; sekarang masih disekitar itu, yang pasti akan lebih keren karena yang ini bisa berterbangan kesana kemari alias tidak menoton berjatuhan :y; saja dari atas

Prinsip dasar cara kerjanya kawan harus mempunyai animasi yang dipakai elemen / obyek :q; yang disimpan pada file dengan ekstrak Js [JavaScript] seandainya kawan ingin mengganti obyek elemennya silahkan simpan obyek tersebut pada hosting kawan dan ambil Linknya untuk dimasukkan pada Script Js tersebut, tentunya kawan perlu meng-Edit file js tersebut yang selanjutnya kawan simpan pada Hosting kawan dan unduh Linknya [URL Js] :r;

Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Cari ]]></b:skin>
Copas Script berikut dibawahnya

Cara Edit File Js

Perhatikan Gambar

untuk selengkapnya cara Edit silahkan baca disini »

Kawan cukup mengganti Link yang saya kurung dengan garis merah dengan Link Image kawan
Simpan Template kawan

Cara Membuat Salju dan Gelembung Berjatuhan

Unknown | 08:26 | animasi , Blog Bego , Kreasi

Kali ini saya akan berbagi dengan kawan Cara Membuat Salju dan Gelembung Berjatuhan :q; yang perlu kawan ketahui bahwa ini hanyalah selera saja dan merupakan pernak-pernik biar kelihatan Blog kita hidup :y; karena ada yang berjatuhan dari atas berterbangan :z;

Seperti kawan ketahui Salju warnanya Putih maka akan kelihatan asyik apabila warna latar belakang Blog dengan warna gelap sedangkan Gelembung dengan warna biru muda :x;

Screenshot : Gelembung dan Salju

Oke langsung saja ke cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Cari tag </head>
Copas Script berikut tepat diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/bubble.js' type='text/javascript'/><script src='https://sites.google.com/site/blogbegocreation/javascript/jsnow.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$().jSnow();
});
</script>

Kalau kawan berkeinginan akan menampilkan satu saja, kawan cukup menghapus salah satu teks yang berwarna merah atau teks yang berwarna biru

Jangan lupa simpan template kawan

Cara Membuat Image Berputar

Unknown | 16:00 | animasi , Blog Bego , blogger , tips trik

Sebelumnya saya sudah pernah berbagi dengan kawan Cara Membuat Komentar Avatar Berputar dan Cara Membuat Avatar Komentar Tampil Miring :y; yang khusus pada Komentar saja, sedangkan yang akan saya bahas sekarang ini Cara Membuat Image Berputar yang bisa berubah di halaman Posting dan Sidebar :q;

Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Cari ]]></b:skin>
Copas script berikut diatasnya

.post img:hover {border:2px solid #333;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}

Keterangan tambahan :

Perhatikan teks yang saya beri warna merah, itu menandakan semua image pada posting akan berputar bila mouse kawan dekatkan
Kalau kawan ingin agar bisa Image di Sidebar berputar khususnya pada PopularPost kawan cukup mengganti teks yang berwarna merah [.post img:hover] dengan [.PopularPosts:hover]
Jangan lupa simpan Template kawan :r;

Cara Membuat Tulisan Berjalan di Sidebar

Unknown | 05:21 | animasi , Blog Bego , tips trik , widget

Selamat malam semuanya, apa khabar semuanya, moga-moga semua dalam keadaan sehat walafiat dan masih dalam lindungan Nya :a; Amin
Sekarang saya akan mencoba berbagi tentang Cara Membuat Tulisan Berjalan di Sidebar :z;
untuk Demo kawan bisa lihat disini
Langsung saja ke Caranya :

Masuk ke Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambah Gadget
Pada HTML / JavaScript pilih tanda (+)
Copas script berikut kedalamnya

<script language="JavaScript">
var max=0;
function textlist()
{
max=textlist.arguments.length; for (i=0; i<max; i++) this[i]=textlist.arguments[i];
}
tl=new textlist
(
" SUATU KEBANGGAAN APABILA DENGAN BERBAGI KAMI DAPAT MEMBANTU KAWAN....!!! " // Geben Sie hier den zu scrollenden Text ein
);
var x=0; pos=0;
var l=tl[0].length;
function textticker()
{
document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
if(pos++==l)
{
pos=0;
setTimeout("textticker()",1000);
x++;
if(x==max)
x=0;
l=tl[x].length;
} else
setTimeout("textticker()",100);
}
// end -->
</script>
<script language="JavaScript">
</script></div></div>

Ganti tulisan warna merah sesuai dengan selera kawan
Angka 90 warna biru disesuaikan dengan panjangnya kalimat / tulisan yang kawan buat
Tulisan akan tampil dari kiri ke kanan seperti kita sedang menulis
Jabgan lupa Simpan Blog kawan

Tambahkan Emoticon pada Blog

Unknown | 08:25 | animasi , Blog Bego , tips trik

Sekarang ini saya berbagi untuk kawan Blogger yang suka pernak pernik seperti emoticon pada Blog yang biasanya disisipkan dipostingan maupun pada Komentar :z; seperti pada Blog saya ini, bagaimana kawan suka, kalau kawan suka ikuti caranya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Copas Script berikut dibawah ]]></b:skin> atau diatas </body>

<script src='https://sites.google.com/site/blogbegocreation/javascript/Editor_Smyle.js' type='text/javascript'/>

Untuk Template dengan Komentar Default / standar [Template yang belum beralih ke Thread] bisa ditampilkan pada posting dan Komentar, sedangkan Template kawan yang sudah beralih ke Thread Comment cuma bisa pada postingan saja
Cara pemanggilan atau penulisan :[Titik dua] Abjad/huruf kecil [a - z] ;[titik koma] tanpa spasi

:a ;

:b ;

:c ;

:d ;

:e ;

:f ;

:g ;

:h ;

:i ;

:j ;

:k ;

:l ;

:m ;

:n ;

:o ;

:p ;

:q ;

:r ;

:s ;

:t ;

:u ;

:v ;

:w ;

:x ;

:y ;

:z ;

[INGAT TANPA SPASI]

Khusus untuk Template yang sudah beralih ke Thread Comment, Copas Kode berikut diatas </body> sedangkan untuk pemanggilan / penulisannya sama seperti diatas

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, "");
theText = theText.replace(/&feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed>");
theText = theText.replace(/:a;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>");
theText = theText.replace(/:b;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>");
theText = theText.replace(/:c;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'/>");
theText = theText.replace(/:d;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>");
theText = theText.replace(/:e;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>");
theText = theText.replace(/:f;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>");
theText = theText.replace(/:g;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>");
theText = theText.replace(/:h;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/>");
theText = theText.replace(/:i;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/>");
theText = theText.replace(/:j;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/>");
theText = theText.replace(/:k;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/>");
theText = theText.replace(/:l;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/>");
theText = theText.replace(/:m;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>");
theText = theText.replace(/:n;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/>");
theText = theText.replace(/:o;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif'/>");
theText = theText.replace(/:p;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>");
theText = theText.replace(/:q;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>");
theText = theText.replace(/:r;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>");
theText = theText.replace(/:s;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/>");
theText = theText.replace(/:t;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/>");
theText = theText.replace(/:u;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>");
theText = theText.replace(/:v;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif'/>");
theText = theText.replace(/:w;/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif'/>");
theText = theText.replace(/:x;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETJqZuKFYclVzuVY-wheh5ebZEEnOCJtFKqbUbt_H1KUVqngvOUL4WSutY7iqHAc5GgxsGBoFwarqOe0sMZudqc3FEeQe7uL1ZQji8_i79Gsdxhy2RD-xaUsioyrNjVDnbWljlKO9zFg/s1600/buatD.gif'/>");
theText = theText.replace(/:y;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ5c3kvq0CKSEehf8u-qUssSXaWeNTJtkIjKvAzQQcDOKcBBGoGYJfJ43FSaFpfnpu484mIkk9sd1vp42eGZqRM-5UcfGiqT2JunAPqXQnIo58GXDqTI_fNmI5Yhz3Rvi76Iyu4XSk2EM/s1600/joget.gif'/>");
theText = theText.replace(/:z;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL_JR5p2fImYYjUAEWbvZxjmb7cidsHjINNS7JLG4n-ddSIAsLNMkZgX7Gu3v2GWgpWUzbjnfnrKijby3PLB4ijjsNtpuRr-m84m74oBR3VEksp5VY0S4QOh7MgcLlO5kC9RQG4ln5MzA/s1600/xKopi.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Jangan lupa simpan Template kawan

Cara Mengganti Header dengan Animasi

Unknown | 03:10 | animasi , Blog Bego , Kreasi

Sekarang saya akan berbagi dengan kawan hasil Kreasi alias Percobaan saya yang berhasil dengan sukses untuk kawan Blogger yang setia mengunjungi BlogBego Creation ini yaitu "Cara Mengganti Header dengan Animasi" yang kawan bisa lihat pada Header Blog saya ini :y;

Langsung ke caranya :

Siapkan dan buat Animasi silahkan baca disini
Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Cari #header-wrapper { yang biasanya terletak dibawah sekitar body {

Contoh pada Template saya sebagai berikut :

#header-wrapper {width: 100%;margin: 0 auto 0;background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJ1ViRtqC3xdtdTW2r5jAhXaN3EyyZ8P9A1srqQje4plU5ylxxsrYH2gwgCuEFBmN1WHgVYzD9Ne4YpsLsFK836z4NiGxl-WOj2SiLxnewlIhFN0kAcFSHJJtprxRk4wu1y8jrFz8uJo/s1600/headerbg.jpg) no-repeat center center;padding: 5px 0 10px 10px; height: 90px;border-bottom: 0px solid rgb(10, 115, 154);}
#head-inner {width:400px;background-position: left; margin: 15px auto 0; padding: 5px; float:$startSide;}
#header {margin: 0; text-align: left; color: $pagetitlecolor;}
#header h1 {color: $pagetitlecolor; margin: 0; padding: 10px 0 0 20px; text-decoration: none; font: $pagetitlefont;}
#header h1 a, #header h1 a:visited {color: $pagetitlecolor; margin: 0; padding: 0;text-decoration: none; }
#header h1 a:hover {color: $pagetitlecolor;}
#header .description {color: $descriptioncolor;margin-left: 12px;padding: 10px 0 0 10px;font: $descriptionfont;}
#header img {margin-left:auto;margin-right: auto;}
#headerright{width: 500px;float: right;padding: 10px 20px 0 10px;margin: 0 auto 0;text-align:center;font-size:12px;}
#headerright h2{display:none}
#headerright a, #headerright a:hover, #headerright a:visited{color:$linkcolor;}

Teks yang berwarna hitam adalah warna latar utama Header

Ganti semua dengan :

#header-wrapper {width: 100%;margin: 0 auto 0;background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJ1ViRtqC3xdtdTW2r5jAhXaN3EyyZ8P9A1srqQje4plU5ylxxsrYH2gwgCuEFBmN1WHgVYzD9Ne4YpsLsFK836z4NiGxl-WOj2SiLxnewlIhFN0kAcFSHJJtprxRk4wu1y8jrFz8uJo/s1600/headerbg.jpg) no-repeat center center;padding: 5px 0 10px 10px; height: 90px;border-bottom: 0px solid rgb(10, 115, 154);}
#header {height: 90px;margin:0 auto 0;}
#header h1 {clear: both;float: left; padding: 10px 0 0 25px;}
#header h1 a {display: block;text-indent: -9999px;outline: none;width: 400px;height: 55px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjur1IyOzwwWNrrEGrQNfEI8wmGAAU3MMTcTe8KzfdR-TL9gVdFxbhxNYxh6RdoB3D2aSvKdYEcnc9j9qgTP9Nqq_HGPTUJlEDArAhc5bwYm8kTiioajQdRRE7Ecgs1Rm7-X8C3nH-f6gc/s1600/Header+BBC.gif) no-repeat 0 0;}
#header .ad {width: 500px;float: right;padding: 15px 6px 0 0;}

Teks yang berwarna merah [width:400px;height:55px;] untuk Header Animasi, sedangkan [width:500px;] untuk Banner Iklan Sponsor 468x60.
Teks yang berwarna putih dengan background biru adalah URL Animasi saya, silahkan diganti dengan URL Animasi kawan :z;

Simpan sementara Template kawan sebelum menlanjutkan

Selanjutnya cari <div id='header-wrapper'> yang letaknya dibawah </head><body> yang selengkapnya kurang lebih seperti berikut :

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='BLOGBEGO CREATION (Header)' type='Header'/>
</b:section>
</div>
<div id='headerright'>
<b:section class='headerright' id='headerright' showaddelement='yes'/>
</div></div>

Ganti semua dengan :

<div id='header-wrapper'><div id='header'>
<div class='break'/>
<h1><a expr:href='data:blog.homepageUrl'>My Blog</a></h1>
<div class='ad'>
<b:section class='headeradsense' id='headeradsense' preferred='yes' showaddelement='no'/>
[Tempatkan Banner Iklan Sponsor 468x60 atau yang lainnya disini] </div></div></div>

Simpan Template kawan, :x;

AGAR DIPERHATIKAN :

Saat menyimpan Template terjadi masalah, disebabkan oleh </div> bisa kelebihan dan bisa kekurangan yang diletakkan sebelum 

Selamat Ber-Kreasi

Slide Carousel untuk Daftar Isi

Unknown | 17:00 | animasi , Blog Bego , link , tips trik , widget

Cara Membuat Animasi Daftar Isi Otomatis yang pernah saya posting disini dan disini yang Demonya disini, yang kalau dipraktekkan hasilnya selalu gagal [atau kemungkinan diperlukan Template khusus] tapi kawan tak usah berkecil hati karena saya sudah menemukan Cara Membuat Slider Carousel Otomatis Berdasarkan Label yang modelnya hampir sama dengan Animasi Daftar Isi Otomatis karena sudah saya modifikasi dari Berdasarkan Label menjadi Daftar Isi yang model tampilannya seperti Image berikut :

Untuk Demonya kawan bisa lihat

Setelah kawan melihat Demonya, mari kita langsung ke Cara Membuatnya

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Cari tag ]]></b:skin>
Copas Script berikut diatas ]]></b:skin>

#bbccarousel{
width: 980px;
height:125px;
border-bottom:1px solid #ccc;
position:relative;
display:block;
background:#5599e6;
margin-bottom:8px;
}
#bbccarousel h3{
color:#555;margin:2px;
}
#bbccarousel .container{
position:absolute;left:24px;
width:930px;
height:125px;
overflow:hidden;
}
#bbccarousel .thumb{float:left;margin-right:5px;}
#bbccarousel #previous_button{
position:absolute;
width:24px;height:125px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxdV6td-uwnqvliVXlzyBXp-CMpZZ12hs4RQDwu1a5RpYoi-3-OjawqPmo3-xn_c1xQMNmcDcZ065rchA3kTB1lmMFTf6jzPAN-zkOs3ALtm1E9iB0V1kfCJUJZzbryM7iuCzLcHCtKaJo/s1600/previous.png) center;z-index:100;cursor:pointer;}
#bbccarousel #next_button{
position:absolute; right:0;
width:24px;height:125px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx1WqgwFlArSgo1lw2KMkZNn7QzFFOFBDszL11HwxjCVUgJaBvUQnCCRHLkMSNtDu0wENYRTgAVJWQ6Xz_0Vx8JyfHKjCZfo2XG_eYwkuu2NsZUdZeDmT3kClteT2TV7VR0SK8sElXRW2K/s1600/next.png) center;z-index:100;cursor:pointer;}
#bbccarousel #next_button:hover,#bbccarousel .thumb:hover,#bbccarousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#bbccarousel ul{
width:100000px;
position:relative;
margin-top:10px;
}
#bbccarousel ul li{
background:#ebebeb;
display:inline;
float:left;text-align:left;
font:bold 11px Arial;
border:0px solid #ccc;
width:212px;
height:90px;
margin:0 2px 20px 6px;
padding:6px;
}
#bbccarousel ul li a.slider_title{
color:#222;
display:block;
margin-top:0;
padding-top:0;
}
#bbccarousel ul li a.slider_title:hover{color:#1b5d97}
#bbccarousel a img{
display:block;
background:#fff;
margin-top:0;
}

Selanjutnya Copas script berikut dibawah ]]></b:skin> atau diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/bbccarousel.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfXLcxEHXOwN0BGPVrlH4mUoszES4nUeVi5DE39QkEBaTgkPe25mP04UAy8jIUZ6jFtjSozgslFsWgahkMHgu3WXAIyyVayJhO6ShqQ9ks9hfACz7cBNpagf6fCFovp2ndLO4OVANlKlA/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 50;
function removeHtmlTag(strx,chop){
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);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Ags","Sep","Okt","Nov","Des"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h3>'+daystr+'</h3><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Simpan Template kawan
Teks yang saya beri warna merah, seandainya pada Template kawan sudah berisi walaupun serialnya berbeda - bisa dihilangkan, cukup pasang satu saja
Teks yang saya beri warna Kuning adalah jumlah Posting yang dipakai Slider, bisa dirubah

Langkah terakhir adalah memanggil Slide, disini kawan ada dua cara » Langsung di Template dan » Tambah Gadget [INGAT Pilih salah satu]
Kalau langsung pada Template :

Beri tanda check disamping Expand Template Widget
Cari <div id='main-wrapper'>
Copas script berikut diatasnya [sebelumnya di Parse dulu]

Kalau kawan ingin menaruhnya di Gadget :

Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript
Copas script berikut kedalamnya

<div id='bbccarousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/></div>
<div id='next_button'/></div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#bbccarousel .container").bbcCarousel({
auto:4000,
scroll: 3,
speed: 800,
visible: 4,
start: 1,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button",
});
})})(jQuery)
</script></div></div></div>

Simpan Kembali Template / Blog kawan

Kelebihan Slider Carousel untuk Daftar Isi ini selain bisa dipanggil lewat Gadget juga bisa dipakai untuk Slider berdasarkan Label / Katagori :q;

Caranya sebagai berikut :

misalnya kawan ingin Slide dengan Label tutorial maka

numposts1 =50, bisa kawan sesuaikan dengan jumlah Label yang ingin dipakai Slide
Tambahkan label1="tutorial", dibawah numposts1 = 50;
Ganti <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"> dengan <script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\">
Simpan Template kawan

HOSTING MURAH 2014

468x60 Ads

Slide Carousel Recent Post untuk Blogger

Jquery Emoticos untuk Blogger

Animasi Gadget Social Bookmark

Cara Lain Mengganti Header dengan Animasi

Cara Membuat Obyek Berterbangan

Cara Membuat Salju dan Gelembung Berjatuhan

Cara Membuat Image Berputar

Cara Membuat Tulisan Berjalan di Sidebar

Tambahkan Emoticon pada Blog

Cara Mengganti Header dengan Animasi

Slide Carousel untuk Daftar Isi

Future Video

Blog Archive

Populer Post

Recent Post

Text

Comments

Followers

Ads