Perpendek Komentar dengan Slide Panel

Postingan sekarang ini saya dapatkan pada master  Taufik Nurrohman pada Blognya DTE yaitu Cara Memperpendek Komentar dengan Slide Panel :q; maksudnya Formulir dan Komentar yang ada di Blog   akan menjadi Slide Buka Tutup dan akan menutup dengan sendirinya setelah beberapa detik :r; 

Oke langsung saja ke Cara membuatnya 

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML
• Sebaiknya simpan Template kawan dulu
• Temukan Tag ]]></b:skin> 
• Kalau sudah ketemu Hapus atau dengan script berikut :

a.openpanel {display:block;clear:both;width:auto;padding:0px 0px;text-align:center;
font-weight:bold;line-height:32px;background-color:#000;color:white;text-decoration:none;margin:0px 0px;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);box-shadow:0px 1px 1px rgba(0,0,0,0.2);
position:relative;}
a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px;right: 15px;border:6px solid transparent;border-top-color:white;}
a.openpanel.active {background-color:#900;}
a.openpanel.active em {top:6px;border-color:transparent transparent white transparent;}
div.paneline {height:0px;border-bottom:4px solid #800;}
div.hompiPanel {padding:10px 20px 20px;-webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);-moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);margin:0px 0px !important;}
]]></b:skin><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
    openPanelText = "Poskan Komentar",
    closePanelText = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed = 400;
//]]>
</script>
<script src='http://dte-project.googlecode.com/svn/trunk/blogger-slide-panel-comments.js'></script>

• Seandainya pada Template kawan sudah berisi jquery sejenis,  yang saya beri warna merah bisa kawan hilangkan atau hapus 
• Simpan Template kawan

Read more ...

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/AVvXsEgAH9dy09Chpwjh4oO5HUA3kSET13uhcNqyAHmHQjR17pSl0mAxFag3tC8zpkQiCxeNs5XNnjQzNDmQMfuiQMJyiDWdGV5T6S3oO6ibNCTM9NV6Fmd-nkhC7Nk-czJfFN120BqCLvHvKv0/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

Read more ...

Slide Social Bookmarking Gaya Telor

Kali ini saya akan berbagi dengan kawan Cara Membuat Slide Social Bookmarking Gaya Telor :r; yang saya dapatkan saat jalan-jalan ke Webnya Master Paul Crowe yang tampilannya tetap ditempat [fixed] dan saat mouse didekatkan maka akan terbuka untuk melihat isinya

screenshot

Cara Membuatnya :

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

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &#39;bea50586-2b9f-448d-947a-01385f28e305&#39;, onhover:false});</script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

• Selanjutnya Copas Script berikut diatas </body>

<div style='position: fixed; bottom: 2%; right: 2%;'>
<div class='shareEgg' id='shareThisOrnament'/>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisOrnament&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;pinterest&#39;,&#39;stumbleupon&#39;,&#39;linkedin&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;holiday&#39;});
</script>
</div> 

Teks yang saya beri warna merah bisa kawan ganti sesuai keinginan untuk tampilan

• Simpan Template kawan

Read more ...

Cara Membuat Featured Slide

Sebelumnya saya sudah berbagi Cara Membuat Slide dengan beberapa Mode Efek, untuk menambah pembendaharaan Slide di Blog :q; yang pada umumnya sekarang setiap Template [Blog] pasti ada Slide-nya walaupun itu sangat memberatkan loading. Seperti saya katakan di awal sekarang saya akan berbagi dengan kawan Cara Membuat Featured Slide 

Cara Membuatnya :

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

<!--New Featured Slider From http://blogbego-creation.blogspot.com -->
.bbc-slider {background: none repeat scroll 0 0 #FFFFFF;height: 329px;margin-bottom: 0;margin-left: 0;margin-right: 0;overflow: hidden;padding: 0;position: relative;width: 850px;}
.bbc-slides-container {border:5px solid #999;}
.bbc-slides, .bbc-thumbnail, .bbc-prev-next, .bbc-nav {width: 630px; /*Set The Width Of Slider Here*/}
.bbc-slides, .bbc-thumbnail {height: 280px; /*Set The Height Of Images Here*/overflow: hidden;padding-top: 0;position: relative;}
.bbc-title {color: #FFFFFF;font: bold 18px Arial,Helvetica,Sans-serif;margin: 0;
padding: 0 0 2px;text-shadow: 0 1px 0 #000000;}
.bbc-title a, .bbc-title a:hover {color: #FFFFFF;text-decoration: none;}
.bbc-content {background: none repeat scroll 0 0 #111111;bottom: 0;left: 0;opacity: 0.7;overflow: hidden;padding: 10px 15px 5px;position: absolute;right: 0;}
.bbc-content p {color: #FFFFFF;line-height: 18px;margin: 0;padding: 0;text-shadow: 0 1px 0 #000000;}
.bbc-more, .bbc-more:hover {color: #FFFFFF;font-weight: bold;}
.bbc-nav {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzxnkR2AhnsRlOrd0A4CtnD0rgYSG4-CzVfSYQeocdp9-jv_uYW6Bv3BjlfFdouAMeTTw35vUZBg2LQxITvQUKI-7RIPoBspYlSuVpH-xypdCk7vMVaVAzrn9nNmvVrJpF5XKvv2SW29E/s1600/h2.png") repeat-x scroll 0 0 transparent;height: 12px;padding: 10px 0;text-align: center;}
.bbc-pager a {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhmu8A55f0keQT_uelH204sBbc5Kts_5HIk_Jb7bJhV5SA1eZHlVuJH9nJUWJZtE6UzALZ84b92PuSQApmYjUExW1iTeTGK_yT_qmEd4qvnaTJUdSr-s_skG9ejc6xIyk9XlSeVcTh8Eu/s1600/featured-pager.png");
background-position: 0 0;cursor: pointer;display: inline-block;float: none;height: 12px;line-height: 1;margin: 0 4px 0 0;opacity: 0.7;overflow: hidden;padding: 0;text-indent: -999px;width: 12px;}
.bbc-pager a:hover, .bbc-pager a.activeSlide {background-position: 0 -112px;opacity: 1;text-decoration: none;}
.bbc-prev-next-wrap {position: relative;z-index: 200;}
.bbc-prev-next {bottom: 130px;height: 37px;left: 0;position: absolute;right: 0;}
.bbc-prev {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ_tEZb0hmEWUUYV-dqOTlFfl_53hzZEpfW3QZEy8PVlqE9HLw3aMKDJnjQs6C2zp8rsd_tV9DTWfazHKUxagvTKlLU8usI0C3vBF9cx_IwLVrh_vmc3fWE10Tpdc3LvjEm26Z6zMedUYC/s1600/featured-prev.png") no-repeat scroll left top transparent;float: left;height: 37px;margin-left: 5px;margin-top: -100px;
opacity: 0.6;width: 37px;}
.bbc-prev:hover {opacity: 0.8;}
.bbc-next {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ZigMTzs8t3oM4vheAmVqRfsVipovN3y0XrMRosR7w6GPPD0EJBsP0GzXVlyRLTtrp1CPcFTnZxN2VbEUIH8VRWsb4UiCOh6OC4WBOCSPT5MNhadryXLUCWymwnl1Tc4zOYYM1JhpG8d-/s1600/featured-next.png") no-repeat scroll right top transparent;float: right;height: 37px;margin-right: 5px;margin-top: -100px;opacity: 0.6;width: 37px;}
.bbc-next:hover {opacity: 0.8;}
<!--New Featured Slider From http://blogbego-creation.blogspot.com -->

• Teks yang saya beri warna merah untuk merubah ukuran Image Slide, silahkan disesuaikan 
• Selanjutnya Copas Script berikut dibawah ]]></b:skin> atau diatas  </head>

<!--New Featured Slider From http://blogbego-creation.blogspot.com -->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(document).ready(function() {
jQuery('.bbc-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.bbc-next',
prev: '.bbc-prev',
pager: '.bbc-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
}
);
}
);
/* ]]> */
</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/slider-code-3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/slider-code-1.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/slider-code-2.js' type='text/javascript'/>
<!--New Featured Slider From http://blogbego-creation.blogspot.com -->

• Simpan Template kawan
• Selanjutnya pilih Tata Letak - Tambah Gadget 
• Pilih {+] pada HTML / JavaScript 
• Copas Kode berikut kedalamnya

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--New Featured Slider From http://blogbego-creation.blogspot.com -->
<div class='bbc-slider clearfix'>
<div class='bbc-slides-container clearfix'>
<div class='bbc-slides'>
<!-- Slide 1 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Z443KoVD93MtswSBcFCRQI61YaMYdbMJSI6LVuFrlGl4v9xlVtjpbsTRqdL1MwwHabD8ZlsjAl3vRYLTgs0yOFb6gYp76pL2KyQW6GtFAf26pyVz1Eax_QYe709w1lbq9uzD_gKEs6Y/s1600/1.+Kolam+air+terjun.gif"/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Panorama</a></h3>
<p> Air Terjun yang dibawahnya ada Kolam dengan air sangat jernih. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 1 Code End -->
<!-- Slide 2 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLpZaM80zMbMN1L10vylDqgUd_R0eUOasSKawrg-TOuwDl2L2wT6mcQ_8vTRfqjO5LrKChJmf2fOvkmrIr2jdq0UXxVrE5afGkPLoKPTD4VbDoSse8ZHaVHQvYPn2tAGKB9oRVmzGowI/s1600/2.+Jalan+Pegunungan.png "/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Alam Pegunungan </a></h3>
<p> Pemandangan di Daerah Pegunungan yang Hijau. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 2 Code End -->
<!-- Slide 3 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivjNz0eRzGU7AOgMduwpg2EW6nopS0ME_vjdujMni3WgkY5h56GXJinXWnHEI3Rghw_AxTdc8dKpc04WVedZbEjCUEvgqWTKoY1fQL97k_GZ7ksWrHdNN2deSSCnFmgXJyQ2uj_jYnYMk/s1600/3.+Kaca+Pecah.png "/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Seni Designer </a></h3>
<p> Kaca Pecah tapi berbentuk Seni Design Tinggi. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 3 Code End -->
<!-- Slide 4 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJTYtUWhAii_RrT7lBa_OmONVlbYnsXonNt49Jmn9RpROYCzEoJKyrg0tXAuKobZyGgDF2rHPlZSEk9l_6AnuaaI2449P2kDRK_iaUDajoxuuqgPq1qbDrlMTiPpcSWLFxmdcgludQyd8/s1600/4.+Laut+dan+langit.png "/></a>
</div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Pemandangan Tepi Laut </a></h3>
<p> Tempat untuk Defresing di Tepi Laut yang Asri. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 4 Code End -->
<!-- Slide 5 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBLPXiRYaJN7F5zRtiK5LmhtE53D2BIyNFpLXXJk0AVehIm_gXsqFpMMJJrprGFybkMCxDTO2H0so40iC9DnUIcZ5Wj2o8Od8PXY4nynpi4AGt-iz3CxyOQLl3vDAe6ucAhRSDAqpGm8/s1600/5.+Panorama.png "/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Alam Pedesaan dekat Pegunungan </a></h3>
<p> Pemandangan yang Asri, Sejuk Pedesaan di Kaki Pegunungan. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 5 Code End -->
</div>
<div class='bbc-nav'>
<span class='bbc-pager'/>
</span></div>
</div>
</div>
<div style='clear:both;'/>
<!--New Featured Slider From http://blogbego-creation.blogspot.com --></div>
</b:if>

Setting / Edit terakhir :
Silahkan ganti teks yang berwarna Merah [URL Blog dan Link Image] saya dengan punya kawan
sedangkan teks yang berwarna Biru adalah Penjelasan singkat dari Image Slidenya

• Kalau semuanya sudah selesai jangan lupa simpan Blog kawan

Read more ...

Cara Membuat Slide dengan beberapa Mode Efek

Sekarang saya akan berbagi dengan kawan Cara Membuat Slide dengan bermacam-macam mode :q; disamping pembuatannya sangat simpel sekali alias dengan istilah tak pakai ribet, karena penempatannya semua pada gadget yang berarti tidak menyentuh Template kawan :y;

Caranya :

• Masuk Account Blogger dengan ID kawan 
• Pada Dasbor pilih Tata Letak - Tambahkan Gadget
• Pilih tanda [+] pada HTML / JavaScript
• Copas Kode berikut kedalamnya 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="https://sites.google.com/site/blogbegocreation/file/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'scrollDown'
});
});
</script>
<style type="text/css">
#content-slider {position: relative; width: 260px; height: 250px; overflow: hidden; margin:0 auto; border:0px solid #333;}
#content-slider img {display: block; width: 260px; height: 250px;}
</style>
<div id="content-slider">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqms3-PBmasKbCkUQr0kywQkTpZzOiSvHkE_ihOTdt_SN1FOKZqERKfCleb2EDMqCFqOVmHfTihqEnJ4JRtRRNjww7hrcY0gHDtaLcoL-h9Sd9tYPNoK8GVtklrR-mASfQN8evfV3H0hI/s1600/Kreasi+BB2+GPLUS.png" /><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbu3M1uPEJL6fx9eMNaQZC5Z56ZzWASg7vVHfMzl9hpfnAfdL2Uw2DokEiZNsvyxrTTzYND_eDKKCvstTSZWb65kKjRN2l9CrryvKz92m6h7mkFXaMx6v3R0GzCPYdcCZv11U-VSJoBq8/s1600/Kreasi+BB1.png" /><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3qFTbiT0km_U5K-oVKNUR1vRo7TE9i9Vii6zaVBx905vHGXd4dbSKOfsHo4WVAtHhC4lbtYl5hRSxmnxx4iYO0OPFNRnY-nvhr9D79oKxgxHmAPu4Pqr0LTWCVDiKnvZ9jBR6nERaZA/s1600/Kreasi+BB2.png" /><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1N3UVut4lJIOS6qADrzIpRom1J4IuE5wja1NhL1ULK9pGS2oxN5WDSnqBYFFDh47_JP4_GbPEWYGpHrb0fajnRSkYgwSTW-pe3VIOfITnTB0r0MfeWU08Ng6y7eUvflGCFxK5Civ-Gw/s1600/Kreasi+Kolom.png" /></div></div>

Silahkan kawan ganti teks yang saya beri warna merah seperti width dan height sesuai penempatan dan selera kawan
Ganti URL image saya yang berwarna violet dengan image kawan, soal banyak silahkan disesuaikan
Teks yang berwarna Biru adalah Mode Efek Slide silahkan ganti dengan pilihan berikut :

scrollUp - scrollDown - scrollLeft - scrollRight - slideX - slideY - shuffle - turnUp - turnDown - turnLeft - turnRight - zoom - fadeZoom - blindX - blindY - blindZ - growX - growY - curtainX - curtainY - cover - uncover - toss - wipe - fade

Refrensi : Zhinto 

Read more ...

Slide Daftar Isi ke- 2

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("&#187; 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

Read more ...

Slide Daftar Isi

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 

1. var showpostdate = true; [untuk menampilkan tanggal] 
2. var showpostsummary = true; [untuk menampilkan isi]
3. var numchars = 350; [untuk jumlah huruf yang akan tampil] 
4. 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

Read more ...

Cara Meng-Edit PagePeel

Artikel saya sebelumnya tentang Cara Membuat Pojok Blog Menggulung dan janji saya untuk peng-Editan yang diperlukan, :w; biar tidak kelamaan saya berjanji nanti kelupaan, untuk itu mari kita bahas tuntas apa saja yang perlu kawan edit, dan kenapa tampilannya bukan di pojok :x; 

• Pertama yang perlu kawan siapkan 2 Gambar / Image dengan ukuran kurang lebih  500x500px dan simpan di Hosting penyimpanan atau bisa dimana saja untuk kawan ambil nanti Link Gambar kawan tersebut 

berikut adalah contoh Gambar

Gambar - 1

Gambar - 2

• Perhatikan URL / Link Js 

<script type='text/javascript'>var untuk =&#39;http://Nama Blog kawan.blogspot.com/&#39;</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/PagePeel.js' type='text/javascript'/>

• Copas URL / Link js yang saya beri warna biru pada browse pencarian, untuk kawan simpan pada Notepad atau tempat lainnya dengan Nama yang sesuai 
• Edit file js tersebut yang isinya sebagai berikut :

var jaaspeel = new Object();
jaaspeel.ad_url = escape(untuk);
jaaspeel.small_path = 'http://www.digie.co.id/peel/small.swf';
jaaspeel.small_image = escape('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibZAodfIQejVqMWAatH7CnEh9tRkDN05vphI40f9lAhS987AHsXWGXfZS8t1tKGD3ktUDGRkttrrfFfbT3Wh55_TEKdZD_jAeXRoeMeyQNib_mmeUIDYhjLcaG6f-WEQ9j8GO0awPD9hg/s1600/bali-.gif');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;
jaaspeel.big_path = 'http://www.digie.co.id/peel/large.swf';
jaaspeel.big_image = escape('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRpwOJNFliYEPhhFrNxQkSPNSxg1E6hM-Uf_rJyNe7zrbpLQeVIg8HdQw-uIFIvtXdRhD0jYzjJilSYE5FhhFo66-C385-lFL2ODsjuNgUZSNEHEnGcJeWVj7-4dud_CL9xQePRuuu21M/s1600/BBC.png');
jaaspeel.big_width = '550';
jaaspeel.big_height = '550';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;
function sizeup987(){
document.getElementById('jcornerBig').style.top = '150px';
document.getElementById('jcornerSmall').style.top = '-1000px';
}
function sizedown987(){
document.getElementById("jcornerSmall").style.top = "150px";
document.getElementById("jcornerBig").style.top = "-1000px";
}
jaaspeel.putObjects = function () {
// <jcornerSmall>
document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:150px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerSmallObject" width="'+jaaspeel.small_width+'" height="'+jaaspeel.small_height+'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.small_path +'?'+ jaaspeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+jaaspeel.small_params+'"/>');
// embed
document.write('<embed src="'+ jaaspeel.small_path + '?' + jaaspeel.small_params +'" name="jcornerSmallObject" wmode="transparent" quality="high" width="'+ jaaspeel.small_width +'" height="'+ jaaspeel.small_height +'" flashvars="'+ jaaspeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
document.write('</script>');
// </jcornerSmall>
// <jcornerBig>
document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:150px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerBigObject" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.big_path +'?'+ jaaspeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ jaaspeel.big_params +'"/>');
// embed
document.write('<embed src="'+ jaaspeel.big_path + '?' + jaaspeel.big_params +'" id="jcornerBigEmbed" name="jcornerBigObject" wmode="transparent" quality="high" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'" flashvars="'+ jaaspeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
// </jcornerBig>
setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000);
}
jaaspeel.putObjects();

• Teks yang saya beri warna biru adalah Gambar - 1
• Teks yang saya beri warna violet adalah Gambar - 2 
• Sedangkan Teks yang saya beri warna merah adalah posisi atas [150px dari atas], kalau kawan menginginkan agar betul-betul di pojok atas ganti 150px; menjadi 0px; 
• Selanjutnya jangan lupa menyimpan perubahan tersebut :r; 
• Yang terakhir simpan file js tersebut pada Hosting kawan, dan jangan lupa diambil Linknya untuk mengganti Link yang saya beri warna biru diatas

Selamat Berkreasi, mudah-mudahan kawan dapat menangkap apa yang saya maksudkan, karena saya juga bingung cara menyampaikannya biar singkat dan lugas :y;

Read more ...

Cara Membuat Pojok Blog Menggulung

Sudah banyak para Blogger membahas cara membuat Pojok Halaman Blog seperti Menggulung yang dalam bahasanya mbah Google dikatakan Pagepeel, disini saya akan berbagi dengan kawan yang saya beri judul Cara Buat Pojok Blog Menggulung :z;

Cara Membuatnya :

• Masuk ke Account Blogger dengan ID kawan
• Pada Dasbor pilih Template
• Cari Tag ]]></b:skin>
• Copas Script berikut dibawah ]]></b:skin>

<script type='text/javascript'>var untuk =&#39;http://Nama Blog kawan.blogspot.com/&#39;</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/PagePeel.js' type='text/javascript'/>

• Ganti text yang berwarna merah [Nama Blog kawan] dengan URL blog kawan
• Simpan Template kawan

screenshot

• Sekarang buka Blog kawan untuk melihat hasilnya :y 
• Kalau tak ada masalah hasilnya seperti pada Blog Demo saya itu

Karena sekarang saya sedikit ada kesibukan untuk peng-Editan lebih lanjut tunggu postingan saya berikutnya, tapi jangan lupa berikan Pendapat / Komentar / Saran kawan :r;

Read more ...

Slide sebagai Background Blog

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

Read more ...

Buat Slide dengan PhotoScape Free

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

Read more ...

Slide Daftar Isi Blog

Sebelumnya saya berbagi dengan kawan Cara Membuat Daftar Isi Plus Komentar Berjalan, sekarang saya akan lanjutkan lagi berbagi dengan Artikel yang hampir sama, cuma bedanya kalau yang ini model slide :y
Model ini di publish oleh System of Blog  dan sekarang saya akan publish di Blog ini dengan sedikit pengeditan tentunya.
Okey cukup sekian ceritanya, mari kita lanjutkan 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;  
    font-size: 16px;
    }
.titlefield:hover {
    text-decoration: none;
    font-size: 16px;
    text-shadow:2px 2px 2px #09f;
    }
.labelfield {
    color: brown;
    font-size: 14px;
    }
.datefield {
    color: #333;
    font-size: 14px;
    padding-left: 30px;
    }

#data {
    width: 100%;
    height: 17px;
    border-top: 3px solid black;
    padding: 5px 20px;
    background-color: #CED0D1;
    margin: 5px auto 0 auto;
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
    }

#data img {
    display: block;
    margin: 0 auto 0;
    text-align: center;  
    }

Ganti teks yang berwarna merah agar sesuai dengan selera kawan, misalnya agar tampil diatas Header [top menjadi bottom, 5px menjadi 0 dan bottom menjadi top] 

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

<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 kawan pilih Tata Letak untuk memanggilnya  :r 

• Pilih Tambah Gadget
• Pilih tanda Plus [+] pada HTML / JavaScript
• Copas Script berikut kedalamnya

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

Ganti Angka 100 dengan jumlah Judul Blog yang mau kawan tampilkan sebagai Slide
Simpan Blog kawan dan lihat hasilnya :z

Read more ...