Tampilkan postingan dengan label animasi. Tampilkan semua postingan

Tambahkan Emoticon pada Blog

Rabu, 14 November 2012 Diposting oleh friant di 08.25 0 komentar

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/AVvXsEgO1fvXGZblbYEDD2rIQ0mkJ0lVdFwBlIvPIVMLWNha3vP-nCOCB-puPjab5DaiEV_O_FI5bLNirnR6AtkWSyOSagmfPpEXbotcqpc6dRo68J5OHDILHBvfStukf89CgKFS5ggtKT4h0IA/s1600/buatD.gif'/>");
theText = theText.replace(/:y;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz5E1GoU89MjwoOddFW0w_z2P-1OdrvcXCxaNBtsIb61x6kaYlFm-1_RwFgaKS22LG1enMYEBLor2fHQVcxS6x4vGAhgbjNJbCicGATbsbrC00L3IYvTytqWtKc9FjPFFZcvOCt-r5zG8/s1600/joget.gif'/>");
theText = theText.replace(/:z;/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLi_o0OCLfcEoqNfrx_XFhfgqJJtAoQOfsZ5PjQqNtDSqIcIeB4euzC0W5RUsS5mD014-yOVK_vbEwavBOLkQl2QK6JS5mI3Ub7qgpMxI7MbJn-BvA3hiZAMrnHqcmhksutS7-woBhibQ/s1600/xKopi.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Jangan lupa simpan Template kawan

Cara Mengganti Header dengan Animasi

Rabu, 26 September 2012 Diposting oleh friant di 03.10 0 komentar

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/AVvXsEjV9YUnas07dl8WNd-Kv_tflO3pv_Vmy6sbPXl3e2M4zS2odMteu67Jy5PQnqLWue6g1Wq3QC_AsDDQkAlipjrSUYcwJqG4mx4WtSFB_HCRAqm7OTvDtZzoB_v7d6CJUVFFEugPJ8b3WKU/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/AVvXsEjV9YUnas07dl8WNd-Kv_tflO3pv_Vmy6sbPXl3e2M4zS2odMteu67Jy5PQnqLWue6g1Wq3QC_AsDDQkAlipjrSUYcwJqG4mx4WtSFB_HCRAqm7OTvDtZzoB_v7d6CJUVFFEugPJ8b3WKU/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/AVvXsEixTgQFzq6JY4hEX53XRxldqsMWeVa8WH7H1HEH1V30bB4zeuhZRF30DWWv8k-bwlL4UKa7Qzi7TqLTzpMXjry6JJUoHLJ59rWy4hG2tYjxpwA4Fc2JwgtHcgOJONbb6mEz-7qq0W1_JCk/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

Selasa, 31 Juli 2012 Diposting oleh friant di 17.00 0 komentar

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/AVvXsEgz4VfaxUxOOxG8B2V7meI3HfLOxMv03o6OsstecglOnP2b2HopkPyfrQkK7upLtPUPM8_XuPn54FeyWSZQ9vLVmJGaT47rHe6b2aUv36vAlSBHkcLL9kUbm_nPaAXyrLJO2Bw6OgCWRO4L/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/AVvXsEgSJwQYmAScWc734qoXWS9Hsbl5V0mfZW7_iXqdSJu7kbVLP-Gy3_AnIj49d2shh1ZiBSIVE7b2A4EVW3RW0DDFoonU8Gnbdgrw4TfLlzhq_Mq6iPjqnFd5flqpVpwrNe9ZhOG6sMhR8Db3/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/AVvXsEh63WSt0jH04hyphenhyphengMEjePsAKZatktU0h8RktiQWmOq4FGHRD-goc0qePt2nw1YRdLZvUb10pEpBD-vtoMW655w-soCNW-fQTYHc8Oc14ExW_l1VwEwxN6nDbktm7kuMf4wMors1PwQSbRm8/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

Slide Daftar Isi Lainnya

Minggu, 29 Juli 2012 Diposting oleh friant di 17.00 0 komentar

Kawan masih ingat dengan Artikel saya tentang Slide Daftar Isi :z; kalau ingin membacanya dipersilahkan dulu, karena yang sekarang ini bentuk dan modelnya sama cuma ini mempunyai kelebihan tersendiri pokoknya Keren [bagi saya pribadi lho] karena yang ini bisa diatur misalnya ukuran, warna huruf, untuk lihat Demonya disini

SCREENSHOT

Cara membuatnya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
Copas Script berikut kedalamnya

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 14px;
border: 1px solid #000;
}
.gfg-title {
font-size: 20px;
font-weight : bold;
font-family: Segoe Print;
color : #FF0;
text-shadow: 1px 1px 1px #F00;
background-color: #000;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
}
.gfg-title a {
color : #3366cc;
}
.gfg-subtitle {
font-size: 15px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-right: 5px;
float: left;
}
.gfg-subtitle a {
color : #3366cc;
display:none !important;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top: 3px;
padding: 5px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 480px;
height : 100%;
padding-left : 10px;
padding-right : 10px;
float: left;
margin-right: 10px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 10px;
margin-left : 5px;
margin-right : 10px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin: 0 auto 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
/*
* Easy way to get vertical mode, applicable via js options to gadget.
*/
.gfg-vertical-container {
position : relative;
}
.gfg-vertical-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-vertical-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-vertical-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-vertical-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-vertical-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-vertical-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-vertical-root .gfg-entry .gf-result .gf-snippet,
.gfg-vertical-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-vertical-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-vertical-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-vertical-root .gfg-entry .gf-result .gf-spacer,
.gfg-vertical-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 500px;
font-size: 10px;
color: #9CADD0;
}
</style>
<noscript><a href="http://blogbego-creation.blogspot.com" target="_blank">BLOGBEGO CREATION</a></noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script>
<script src="https://sites.google.com/site/blogbegocreation/javascript/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',
url:'http://blogbego-creation.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "BlogBego Creation Post"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="http://blogbego-creation.blogspot.com" target="_blank">BLOGBEGO CREATION</a></noscript>
<div id="feedGadget"><center><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiECEd9yXmEig0kEP0M3iWfeyHmt93IM59ERFP9rErZrgvR9r_3t6Ygxv4E9rwh1DJoRDrI5HkcQJytyTiSBS5wLYfA4JjwYAOxxiCgayvIdJ72JHPrx3YvQim29zPo2jhIM7_e321Xgc59/s1600/loading+(1).gif" /></center></div>
<div id="feedGadget"><a href="http://blogbego-creation.blogspot.com" target="_blank">widget</a>.</div>

Silahkan ganti teks yang saya beri warna merah sesuai URL kawan
Simpan Blog kawan

Cara Membuat Animasi Page-Loading

Jumat, 27 Juli 2012 Diposting oleh friant di 17.00 0 komentar

Sekarang saya akan berbagi dengan kawan Cara Membuat Animasi Page-Loading Blog yang saya maksud disini, kurang lebih seperti kalau kawan membuka Blog / site sebelum isinya terbuka 100% maka Animasi ini yang akan tampil dan sebagai tanda juga bahwa Loading Blog sedang berjalan :r; dan kalau sudah kebuka 100% Animasi ini dengan sendirinya akan menghilang :y;

Ok langsung saja ke cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Pakai Ctrl + F cari <body>
Hapus atau Ganti dengan Script berikut

<body onLoad='init()'>
<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Sy_yVPQ3ZVCvAiSJ7enBu_IUBnv77dmpjLIMySo8BZjJwBV5gFQomlg3In9LXizEZIVx8tRjfxz4J2-SMiJTXBCdwYdfYbotcJ__53w1WR4S_VFOw2f3UKiTU287jsoiKRFmZsSkM0UF/s1600/loading+(6).gif'/></div>
<script src='https://sites.google.com/site/blogbegocreation/javascript/preloader.js' type='text/javascript'/>

Silahkan Ganti teks yang saya beri warna merah dengan Image Loading kesukaan kawan
Untuk lokasi tampilan silahkan rubah teks yang berwarna biru
Simpan Template kawan

Disini saya berikan kawan beberapa contoh Image Loading yang bisa dipakai atau kalau kawan ingin yang lain silahkan lihat Ajaxload.info atau Preloaders.net disana ada banyak pilihan dan bisa diatur durasi ukurannya :z;

Mohon Perhatian kawan, karena mengganti tag <body> apa melanggar TOS Blogger atau tidak, saya kurang tahu karena sampai posting ini saya publish tidak ada jawaban yang pasti :w; untuk itu saran saya kalau kawan ingin mencoba sebaiknya di pasang pada Blog percobaan bukan Blog Utama kawan dan jangan salahkan saya kalau terjadi masalah di kemudian hari :x; apa yang saya sampaikan ini bertujuan untuk diketahui saja

Selamat Berkreasi

Cara Membuat Label Berputar Bag. II

Selasa, 17 Juli 2012 Diposting oleh friant di 17.00 0 komentar

Sebelumnya saya sudah berbagi dengan kawan Cara Membuat Label Berputar, yang penempatannya pada Template yang kelihatannya sedikit ribet, :x; tapi kawan jangan bersusah payah memikirkan itu karena sekarang saya akan berbagi dengan kawan Cara Membuat Label Berputar [Flash Label Cloud] yang langsung kita tempatkan di Sidebar :z;

Widget ini saya dapatkan pada Blogger W2B, tapi widget tersebut sudah modifikasi sedikit agar bisa kawan pakai maupun mencobanya untuk dipasang pada Blog kawan :

Kelebihan dari Flash Label Berputar ini yang pasti ada Hovernya yang secara otomatis menyebabkan Label tersebut seperti ada di dalam kotak, :y;

Live Demo

Cara Membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak
Pada Tata Letak pilih Tambah Gadget - HTML/JavaScript
Copas Script berikut kedalamnya

<div id="BegoFlashContent">
<div style="display: none;">
Flash Labels by <a href="http://blogbego-creation.blogspot.com/">BlogBego Creation</a></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
blogurl : "http://www.alambali.co.cc",
color : "0000FF",
hoverColor : "FF0000",
backgroundColor: "FFFFFF",
size : 12,
speed : 100,
width : 300,
height : 300,
transparency : true
};
/*]]>*/
</script>
<script src=" https://sites.google.com/site/blogbegocreation/javascript/flash_label_cloud.js " type="text/javascript">
</script>

Silahkan edit ulang teks yang saya beri warna merah sesuai selera kawan
Simpan Blog kawan

Cara Membuat Label Berputar

Minggu, 15 Juli 2012 Diposting oleh friant di 17.00 0 komentar

Kawan mungkin sudah sering melihat Blog orang pada Sidebarnya ada Label Berputar seperti bola yang pada dunia Blogger lazim disebut Flash Label Cloud :y; kelihatannya sangat bagus apalagi Label Blog yang kita pakai banyak akan tambah bagus seperti binatang tawon bergulung-gulung :q;

Live Demo Flash Label Cloud

Oke langsung ke cara pemasangan pada Template

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Beri tanda chech disamping Expand Template Widget
Cari <b:section class='sidebar' id='sidebar' preferred='yes'> atau <b:section-contents id='sidebar-right-1'>
Copas Script berikut dibawah salah satunya

<b:widget id='Label100' locked='false' title='Labels' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><center><object type="application/x-shockwave-flash" data="https://sites.google.com/site/javascript10/tagcloud.swf" width="100%" height="200" allowscriptaccess="always" ><param name="movie" value="https://sites.google.com/site/javascript10/tagcloud.swf" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags><b:loop values='data:labels' var='label'><a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='11'><data:label.name/></a></b:loop></tags>" /></center></div><b:include name='quickedit'/></b:includable></b:widget>

Silahkan adakan setting seperlunya sesuai kebutuhan
Jangan lupa simpan template kawan

Slide Daftar Isi ke- 2

Jumat, 29 Juni 2012 Diposting oleh friant di 17.00 0 komentar

Slide Daftar Isi sebelumnya dengan yang sekarang akan saya posting sudah pasti ada perbedaan-perbedaan, sebagai contoh Slide Daftar Isi yang lalu summary [beberapa kata isi dari artikelnya] bisa ditampilkan bisa tidak, :r; sedangkan yang sekarang tidak tapi punya kelebihan yaitu bisa menampilkan Daftar Isi lebih dari satu Blog :z

Daftar Isi ini kalau saya tak salah pertama kali di publish oleh dynamicdrive.com yang selanjutnya di posting oleh Blogger System Of Blog dan saya meng-Edit dikit biar sesuai selera saya tentunya :q;

Oke langsung saja ke Cara membuatnya

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

.titlefield {
text-decoration: none;
color: #09F
}
.titlefield:hover {
text-decoration: none;
}
.labelfield {
color: brown;
font-size: 120%;
}
.datefield {
color: #333;
font-size: 90%;
float: right;
padding-right: 10%;
}
#data {
width: 100%;
height: 20px;
border: 3px solid #699AB8;
padding: 5px 25px;
background-color: #95CAFF;
margin: 5px auto 0;
-moz-box-shadow: inset 0 0 10px #699AB8;
-webkit-box-shadow: inset 0 0 10px #699AB8;
box-shadow: inset 0 0 10px #699AB8;
position:fixed;_position:absolute;bottom:0px; left:-5px;
overflow: hidden;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
}
#data img {
display: block;
margin: 0 auto;
text-align: center
}

Teks yang saya beri warna merah [bottom] menandakan posisi slide di bawah, kalau kawan menginginkan supaya posisinya diatas, tinggal mengganti bottom menjadi top

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

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script src='http://system-svn.googlecode.com/svn/trunk/gfeedfetcher.js' type='text/javascript'/>
<script src='http://system-svn.googlecode.com/svn/trunk/gajaxscroller.js' type='text/javascript'/>

Simpan Template kawan
Selanjutnya pilih Tata Letak
Pilih Tambah Gadget - HTML / JavaScript atau bisa digabung dengan Gadget yang lain
Copas script berikut kedalamnya

<script type="text/javascript">
var cssfeed=new gfeedpausescroller("data", "posting", 2000, "_new")
cssfeed.addFeed("BlogBego", "http://blogbego-creation.blogspot.com/feeds/posts/default")
cssfeed.addFeed("BlogBego", "http://Nama Blog yang lain.blogspot.com/feeds/posts/default")
cssfeed.displayoptions("» date")
cssfeed.setentrycontainer("div")
cssfeed.filterfeed(20, "date")
cssfeed.entries_per_page(1)
cssfeed.init()
</script>

Silahkan Ganti URL saya dengan URL Blog kawan, sedangkan yang dibawahnya bisa dihilangkan atau masukkan URL Blog kawan yang lain
Angka 20 adalah jumlah Judul Artikel yang akan dijadikan Slide
Jangan lupa Simpan kembali Blog kawan

Slide Daftar Isi

Kamis, 28 Juni 2012 Diposting oleh friant di 17.00 0 komentar

Sebelum kelupaan, saya minta maaf pada kawan Blogger yang memposting Artikel Daftar Isi Slide yang akan saya posting ini karena sudah lama saya hapus dari Template Blog percobaan saya, setelah saya mengganti Template dengan yang baru tahu-tahu muncul script di gadget yang isinya Slide Daftar Isi :i; ini

Karena saya lihat sepertinya bagus juga untuk di posting, mudah-mudahan kawan tidak kecewa :w; silahkan lihat Demonya pada bagian bawahnya [fotter]

Sekarang mari ke Cara membuatnya :

Silahkan masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak
Selanjutnya pilih Tambah Gadget - HTML / JavaScript
Copas kode berikut ke dalamnya

<div style="overflow: hidden;width:600px;padding:5px ; margin:0; height:125px; background:transparent;border: 0px solid #95CAFF;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 0px 0px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 0px 0px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 0px 0px;">
<script type="text/javascript">
var billboardeffects=["GradientWipe(GradientSize=1.0 Duration=0.7)", "Inset", "Iris", "Pixelate(MaxSquare=5 enabled=false)", "RadialWipe", "RandomBars", "Slide(slideStyle='push')", "Spiral", "Stretch", "Strips", "Wheel", "ZigZag"]
//var billboardeffects=["Iris"] //Uncomment this line and input one of the effects above (ie: "Iris") for single effect.
var tickspeed=5000 //ticker speed in miliseconds (2000=2 seconds)
var effectduration=500 //Transitional effect duration in miliseconds
var hidecontent_from_legacy=1 //Should content be hidden in legacy browsers- IE4/NS4 (0=no, 1=yes).
var filterid=Math.floor(Math.random()*billboardeffects.length)
document.write('<style type="text/css">\n')
if (document.getElementById)
document.write('.billcontent{display:none;\n'+'filter:progid:DXImageTransform.Microsoft.'+billboardeffects[filterid]+'}\n')
else if (hidecontent_from_legacy)
document.write('#blogbegowrapper{display:none;}')
document.write('</style>\n')
var selectedDiv=0
var totalDivs=0
function contractboard(){
var inc=0
while (document.getElementById("billboard"+inc)){
document.getElementById("billboard"+inc).style.display="none"
inc++
}
}
function expandboard(){
var selectedDivObj=document.getElementById("billboard"+selectedDiv)
contractboard()
if (selectedDivObj.filters){
if (billboardeffects.length>=2){
filterid=Math.floor(Math.random()*billboardeffects.length)
selectedDivObj.style.filter="progid:DXImageTransform.Microsoft."+billboardeffects[filterid]
}
selectedDivObj.filters[0].duration=effectduration/1000
selectedDivObj.filters[0].Apply()
}
selectedDivObj.style.display="block"
if (selectedDivObj.filters)
selectedDivObj.filters[0].Play()
selectedDiv=(selectedDiv<=totalDivs-2)? selectedDiv+1 : 0
setTimeout("expandboard()",tickspeed)
}
function startbill(){
while (document.getElementById("billboard"+totalDivs)!=null)
totalDivs++
if (document.getElementById("billboard0").filters)
tickspeed+=effectduration
expandboard()
}
if (window.addEventListener)
window.addEventListener("load", startbill, false)
else if (window.attachEvent)
window.attachEvent("onload", startbill)
else if (document.getElementById)
window.onload=startbill
</script>
<script>
function rp(json) {
document.write('<div id="blogbegowrapper">');
for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {
document.write('<div id="billboard' + i + '" class="billcontent">');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k <= entry.link.length - 1; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdday = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdyear = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</div>');
}
document.write('</div>');
}
</script>
<script>
var showpostdate = true;
var showpostsummary = true;
var numchars = 350;
</script>
<script src="http://Nama Blog Kawan.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>
</div>

Silahkan kawan menyesesuaikan teks yang saya beri warna merah dengan kondisi Blog kepunyaan kawan, karena disini saya berikan ukuran lebar 600px dan ketinggian 125px :r;

Sedangkan untuk teks

var showpostdate = true; [untuk menampilkan tanggal]

var showpostsummary = true; [untuk menampilkan isi]

var numchars = 350; [untuk jumlah huruf yang akan tampil]

Sedangkan untuk tidak menampilkan, kawan cukup mengganti true menjadi false

Kalau kawan ingin menaruh scriptnya di Template silahkan di Parse dulu dan simpan diatas </body> maka hasilnya seperti pada Blog Demo saya itu :z;

Jangan lupa simpan Template / Blog kawan

Slide sebagai Background Blog

Kamis, 21 Juni 2012 Diposting oleh friant di 17.00 0 komentar

Tempo hari ada kawan Blogger menanyakan cara menampilkan Slide / Animasi pada background Blog, karena kesibukan saya yang paling senang utak-utik Template makanya kelupaan [kejelekan saya sering ganti Template untuk kawan jangan diikuti, karena sangat jelek search engine] :w hehehe lupa nggak nyambung ya............!!!

Kembali ke pokok Artikel yaitu Cara Menampilkan Slide pada background Blog. :z;

Sebenarnya kalau kita mau mencoba saya rasa Slide dimana saja bisa ditampilkan sebagai Background, misalnya pada latar belakang Blog, Postingan, Sidebar caranyapun sangat mudah asal sabar dan belajar dari kesalahan yang kita temui :x;

OK langsung saja ke Cara dan persiapan yang diperlukan :

Siapkan Image / Gambar dengan ukuran minimal 1020px x 700px paling sedikit 2 Gambar untuk dijadikan Slide [atau dengan kata lain siapkan sebuah slide width=1020px; height=700px;]
Copy Link Slide kawan pada tempat penyimpanan
Masuk Account Blogger ID kawan
Pada Dasbor pilih Template - Edit HTML - lanjutkan
Simpan Template kawan dulu untuk jaga-jaga
Scroll kebawah pelan-pelan sampai pada » body {
Kawan bisa menempatkan Link Slide yang sudah dipersiapkan tadi pada background.

Contoh :

body {
color: #333; font-family: Cherry Cream Soda, Arial, Tahoma, Verdana;
font-size:13px;
background: rgba(0,16,107,1) none repeat scroll 0 0; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0,16,107,1)', endColorstr='rgba(217,235,249,1)');background:-moz-radial-gradient(top, rgba(0,16,107,1), rgba(217,235,249,1));background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,16,107,1)), to( rgba(217,235,249,1))) no-repeat top center;}

atau seperti ini :

body{
margin:0 auto 0;
font-family: Cherry Cream Soda, Arial, Tahoma, Verdana;
font-size:13px;
color: #333;
background: #236C95;}

Kawan cukup mengganti backgroundnya saja dengan Link Slide tadi, maka selengkapnya menjadi :

body {
margin: 0 auto 0;
color: #333;
font-family: Cherry Cream Soda, Arial, Tahoma, Verdana;
font-size:13px;
background: url(http://2.bp.blogspot.com/-tMY2Y27rvM4/T-CCPOsXfBI/AAAAAAAAC4Q/4pt6uzJsItc/s1600/background.gif) no-repeat fixed center center; }

Jangan lupa simpan Template kawan

Buat Slide dengan PhotoScape Free

Rabu, 20 Juni 2012 Diposting oleh friant di 17.00 0 komentar

Membuat Slide dengan Photo / Gambar kepunyaan kita sendiri merupakan suatu kebanggan bagi kita sendiri, cuma bagaimana caranya ??? :y;

Banyak bertebaran Program / Software tersebut di Dunia Maya yang kita geluti ini, apalagi kalau kita punya dana lebih untuk membelinya, :z; Untuk kawan yang seperti saya ini, jangankan untuk membeli Software, untuk agar bisa Internet saja pakai Program Unlimated, tapi kawan jangan berkecil hati karena sekarang saya akan berbagi cara mendapatkan Software Gratis [Free] seperti yang saya pakai ini, namanya » PhotoScape sekali lagi saya sampaikan banyak sekali ada Software seperti ini, cuma yang paling simple dan gampang bagi saya yang bodoh ini PhotoScape sekali lagi maaf bukan Promosi :a;

Sebelum kawan mulai membuat Slide / Animasi atau sejenisnya silahkan Download dulu softwarenya atau bisa » disini kawan akan langsung diberikan 3 pilihan Download seperti slide saya diatas

Hasil Download tadi silahkan di Install di Komputer kawan
Selesai di Install, silahkan kawan mencobanya

Perhatikan tanda panah biru dengan bingkai merah untuk membuat Slide / Animasi

Gambar / Image yang saya kurung dengan warna merah [sebelah kanan] adalah untuk memanggil Photo / Image, untuk banyaknya photo bebas dan bisa ditambahkan lagi nanti, dan untuk setting seperti : durasi, ukuran photo, warna latar slide dan sebagainya, termasuk juga seandainya Slide sudah jadi kawan pilih simpan [save] di Komputer dengan nama default Anigif [Ganti sendiri Namanya]
Gambar / Image diatas yang sebelah kiri untuk setting Slide caranya Klik kanan pada salah satu Photo Slide maka akan keluar banyak pilihan seperti : Hapus salah satu photo / semua, memutar photo, maupun merubah tampilan Slide [keatas, kebawah, kanan dan kiri].
Hampir lupa PhotoScape teranyar adalah PhotoScape_V3.6.2,

Selamat ber-Kreasi agar tampilan Blog lebih Menarik

iklan blogger