Tampilkan posting dengan label Blogspot Tutorial. Tampilkan semua posting
Tampilkan posting dengan label Blogspot Tutorial. Tampilkan semua posting

2014-03-13

Tutorial Cara Membuat Template Blogger Sendiri

Bosen dengan template buatan orang lain dan ingin membuat template sendiri yang elegant...??? Mulailah membangun template blogger kamu sendiri dengan mengikuti tutorial membuat template blogspot/blogger dibawah ini atau tidak mau repot-repot alias terima bersih baca disini:

  1. Mengenal Struktur Dasar Template Blogger
  2. Bagian 1 dasar element / Pola
  3. Bagian 2 Body dan Outer Wrapper
  4. Bagian 3 Header
  5. Bagian 4 Block Sidebar
  6. Bagian 5 Main Wrapper, Post dan Kotak komentar
  7. Selesai Bagian 6 Footer 
  8. Mengganti header dengan gambar
  9. Pnyempurnaan (bersambung)

Diatas merupakan list tutorial sederhana bagaimana membuat template blogger sendiri, menciptakan template blogspot, cara membuat blogger template.

2012-11-30

Blogger Lightbox image viewer, fitur ini berfungsi ketika pengunjung blog mengklik gambar pada postingan kita, lightbox ini sebenarnya cukup menarik juga karena tidak mengalihkan ke halaman baru ketika gambar pada postingan diklik melainkan akan menampilkan dalam bentuk overlay slideshow , namun ternyata banyak yang tidak suka dengan fitur tersebut, secara default fitur ini sudah aktif akan tetapi kita bisa menonaktifkannya dari Pengaturan Format> dengan memilih "Tidak" di samping "gambar Open Lightbox".



Berikut cara menonaktifkan lightbox viewer blogger :


Rubahlah pengaturan Open images in Lightbox menjadi "No" lallu simpan.

2012-09-25



Auto Slide Show dengan Nivo Slider untuk blogger, Widget slide show image ini akan secara otomatis menampilkan gambar yang dipanggil dari postingan di blog kamu, slideshow ini lebih tidak membosankan dibanding dengan slideshow manual memasukkan URL satu persatu dan selain itu akan terlihat membosankan karena tampilan yang monoton atau itu-itu saja.
 Tetapi dengan Auto Slide Show menggunakan Nivo Slider blog akan terlihat jadi lebih kelihatan lebih hidup karena slide show akan secara otomatis terus berganti dari setiap posting yang ada di blog dengan sendirinya. Trik Auto Slide Show dengan Nivo Slider ini diterapkan oleh Abu Farhan yang memiliki blog disini.



Cara menerapkan Auto Slide dengan nivo slider dibawah ini, atau auto slider lainnya yang pernah saya posting ada disini.

1. Masuk ke blogger, silahkan pilih blog mana yang akan dikasih Slide
2. Lihat navigasi kiri klik "Template"
3. Klik Edit HTML
4. Lalu klik lanjutkan
5. Letakkan kode berikut tepat diatas ]]></b:skin>

/* START
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/
/*-----START Default Theme ----------------------------------------*/
.theme-default .nivoSlider {
 position:relative;
 background:#fff url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/loading.gif) no-repeat 50% 50%;
 -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
 -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:absolute;top:0px;left:0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-default .nivo-controlNav {
 position:absolute;left:50%;bottom:-42px;
 margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
 display:block;width:22px;height:22px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/bullets.png) no-repeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 background-position:0 -22px;
}
.theme-default .nivo-directionNav a {
 display:block;width:30px;height:30px;
 background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/arrows.png) no-repeat;
 text-indent:-9999px;border:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-default a.nivo-prevNav {
 left:15px;
}
.theme-default .nivo-caption {
 font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
 color:#fff;
 border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*----- END Default Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;top:0px;left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;
 padding:0;margin:0;z-index:6;display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:8;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:9;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}
.theme-default #slider {
 margin:100px auto 50px auto;
 width:618px; /* Jika dirubah samakan dengan ukuran bawah langkah 9  */
 height:246px; /* Ini juga harus sama dengan langkah 9 */
}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 margin-top:150px;
}
.clear {
 clear:both;
}
/* END
--------------------------------------------------------------------
 Automatic Content Slider for Blogger using Nivo Slider
 By http://www.abu-farhan.com
--------------------------------------------------------------------
 Nivo Slider
*/

6. Letakkan kode dibawah ini tepat diatas </body>


<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
 <script src='http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js' type='text/javascript'/>
 <script type='text/javascript'>
 $(window).load(function() {
 $(&#39;#slider&#39;).nivoSlider();
 });
 </script>

7. Simpan template / Save Change

8. Klik Layout >> Add a Gadget >> pilih HTML/Javascript
9. Masukkan kode dibawah ini kedalam form gadget HTML/Javascript tadi

<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
 <script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;   //jumlah post yang tampil
 var image_height = 246; //lebar  gambar
 var image_width = 618;  //tinggi atau besar gambar
</script>
<script src="http://nama-blog-kamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
</div>

9. Simpan Gadget.
10. Silahakan lihat slideshownya.

Perhatikan kode yang saya cetak merah, itu adalah yang harus disesuaikan dengan kepunyaan blog kamu sob. Selamat mencoba.

2012-07-22

Membuat menu breadcrumbs dengan CSS3, menu bredcrumb bisa dikatakan sebagai menu petunjuk arah atau lokasi pada sebuah postingan blog atau website, manfaat navigasi breadcrumbs ini juga dapat memperbaiki SEO suatu situs yang memasang navigasi breadcrumbs ini. Menurut pakar SEO navigasi breadcrumbs ini membuat postingan blog kan cepat terindeks karena mempermudah Search Engine mengidentifikasi halaman blog. Manfaat lain breadcrumbs menu ini juga untuk mempermudah pengunjung mengetahui lokasi dia dalam sebuah halaman blog untuk kembali ke lokasi urutan dari halaman tersebut.

Saya juga pernah memposting menu hampir seperti ini namun yang dulu berbeda dengan yang ini yang dulu hanya sebuah menu Breadcrhumbs Navigasi kalau mau lihat silahkan lihat dihalaman :
Bikin breadcrumb navigasi menu
Bikin breadcrumb navigasi plus dropdown submenu

Contoh navigasi breadcrumb seperti dibawah ini :
Contoh tampilan breadcrhumbs yang akan kita buat seperti dibawah ini, dan akan nampak di atas judul posting.

Nah jika blog kamu belum memiliki breadcrumb segeralah pasang menu navigasi breadcrumb tersebut, caranya dibawah ini :

1. Masuk ke Template >> Edit HTML dan klik "Expand Widget Template"

2. Cari kode dibawah ini :

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

3. Letakkan kode berikut ini tepat di bawah kode no.2 (kode no.2 ada 2 letakkan setelah kode yang pertama)


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul id='breadcrumbs'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li> <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li><b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> </b:loop> </b:if>
<li><a class='current' expr:href='data:post.url'><data:post.title/></a></li>
</ul>
</b:if>

4. Cari kode ]]></b:skin> dan letakkan kode berikut tepat diatas ]]></b:skin>

Kode CSS Breadcrumb :
ul#breadcrumbs {
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs{
background: #eee;font-size:11px;
border-width: 1px;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);
box-shadow: 0 0 2px rgba(0,0,0,.2);
/* Clear floats */
overflow: hidden;
width: 100%;
}

#breadcrumbs li{
float: left;
}

#breadcrumbs a{
padding: 3px 12px 3px 17px;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, right bottom, from(#f5f5f5), to(#ddd));
background-image: -webkit-linear-gradient(left, #f5f5f5, #ddd);
background-image: -moz-linear-gradient(left, #f5f5f5, #ddd);
background-image: -ms-linear-gradient(left, #f5f5f5, #ddd);
background-image: -o-linear-gradient(left, #f5f5f5, #ddd);
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}

#breadcrumbs li:first-child a{
padding-left: 1em;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

#breadcrumbs a:hover{
background: #fff;
}

#breadcrumbs a::after,
#breadcrumbs a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}

#breadcrumbs a::after{
z-index: 2;
border-left-color: #ddd;
}

#breadcrumbs a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}

#breadcrumbs a:hover::after{
border-left-color: #fff;
}

#breadcrumbs .current,
#breadcrumbs .current:hover{
font-weight: normal;
background: none;
}

#breadcrumbs .current::after,
#breadcrumbs .current::before{
content: normal;
}

5. Simpan template

Sekarang lihat hasilnya pada posting kamu, jika berhasil breadcrumb ini akan tampil diatas judul postingan blog kamu...!

2012-07-18

Sexy Image Hover Efek dengan CSS3, sebuah hover efek pada gambar yang menarik menggunakan CSS3, jadi gambar ini akan menampakkan tingkah laku yang sangat bagus tanpa menggunakan Javascript jadi tidak terlalu menambah berat beban loading blog kamu.
Supaya tidak terlalu penasaran silahkan lihat demonya : Demo Image Hover CSS3

Ini kode untuk membuat efek image hover tersebut.
#Ini untuk CSSnya :
/* IMAGE HOVER EFEK */
.gambar{
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
float:left;
margin-left:-50px;
margin-right:-50px;
margin-top:-10px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
}
.gambar img{
padding:10px;
border:1px solid #fff;
}
.gambar:hover{
-webkit-transform:scale(0.8);
-webkit-box-shadow:0px 0px 30px #ccc;
-moz-transform:scale(0.8);
-moz-box-shadow:0px 0px 30px #ccc;
-o-transform:scale(0.8);
-o-box-shadow:0px 0px 30px #ccc;
}
.gambar .mask{
width: 100%;
background-color: rgb(0, 0, 0);
position: absolute;
height: 100%;
opacity:0.6;
cursor:pointer;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
}
#img-1:hover .mask{
height:0%;
}
#img-2:hover .mask{
height:0%;
margin-top:130px;
}
#img-4:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
}
#img-3 #mask-1 {
width:50%;
}
#img-3 #mask-2{
width:50%;
margin-left:211px;
}
#img-3:hover #mask-1{
width:0%;
}
#img-3:hover #mask-2{
margin-left:430px;
width:0%;
}
#img-5:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateX(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(-360deg);
}
#img-6:hover .mask{
margin-left:219px;
margin-top:135px;
height:0%;
width:0%;
-webkit-transform: rotateZ(750deg);
-moz-transform: rotateZ(750deg);
-o-transform: rotat(750deg);
}

#Ini untuk kode HTMLnya :
<div class='gambar' id='img-1'>
<div class='mask'>
</div>
<img src='http://4.bp.blogspot.com/-WSD5fzD4yOc/UAawLa6-dKI/AAAAAAAACA8/AyTo4soq_EI/s1600/01.jpg' />
</div>
<div class='gambar' id='img-2'>
<div class='mask'>
</div>
<img src='http://2.bp.blogspot.com/-mlRUwrWwiLY/UAawMWT8QXI/AAAAAAAACBg/-_ZEaIwrk8k/s1600/07.jpg' />
</div>
<div class='gambar' id='img-3'>
<div class='mask' id='mask-1'>
</div>
<div class='mask' id='mask-2'>
</div>
<img src='http://4.bp.blogspot.com/-h57wte0tlQI/UAawLmLd36I/AAAAAAAACBI/iPoeUnuCe-8/s1600/05.jpg' />
</div>
<div class='gambar' id='img-4'>
<div class='mask'>
</div>
<img src='http://1.bp.blogspot.com/-aYX6nTbt5g0/UAawfTo7ZZI/AAAAAAAACB4/BM9KzC4vdhA/s1600/04.jpg' />
</div>
<div class='gambar' id='img-5'>
<div class='mask'>
</div>
<img src='http://3.bp.blogspot.com/-LYgXKRiXbUg/UAawMNxSKxI/AAAAAAAACBU/yGpGF3L_E48/s1600/06.jpg' />
</div>
<div class='gambar' id='img-6'>
<div class='mask'>
</div>
<img src='http://2.bp.blogspot.com/-coQCCz2NZSY/UAawMhzbkeI/AAAAAAAACBs/Gi3eXblLVuQ/s1600/08.jpg' />
</div>
Lalu bagaimana menerapkannya di blogger ?
Masuk ke >> Dasboard >> Template >> Edit HTML
1. Copy kode CSS (kode yang pertama) dan letakkan tepat diatas ]]>< /b:skin>
2. Lalu Copy kode HTML (kode yang kedua) dan tempatkan dimana gambar akan ditampilkan? Dipostingan bisa atau di sidebar juga bisa.
3. Jangan lupa untuk mengganti teks warna merah yaitu URL gambar yang akan ditampilkan
4. Kalau tampilan belum sesuai dengan layout sampean silahkan otak-atik sendiri sambil bereksperimen, jangan manja ya supaya Mandiri....hehehe

Bagaimana bingung ya? mudah mudahan bisa dicerna, maaf karena belum cukup punya banyak waktu untuk membuat artikel lebih terperinci.

Credit : http://www.nikesh.me/

2012-07-10

Auto Slide Show Images - Widget ini akan menampilkan slide show gambar secara otomatis dari gambar pertama postingan blog kamu, nah jadi gambar ini akan secara otomatis tampil sebagai slide show kita tidak perlu repot-repot memasukkan satu per satu gambar yang akan dijadikan gambar Slide.

Auto Slide Show Images

Demo Bisa lihat disini >>


Bagaimana cara membuat Image Slide di atas? caranya lumayan mudah ikuti berikut ini :

1. Masuk ke blogger >> Template >> Edit HTML >> Proceed/Lanjutkan
2. Tambahkan CSS berikut ini diatas kode : ]]></b:skin>
/* IMAGES AUTO SLIDER - u-sup.blogspot.com
============================================================ */
#featuredContent{
float:left;
width:290px;
margin-right:10px;
display:inline;
}
#featured-slider{
position:relative;
overflow:hidden;
width:290px;
height:210px;
}
#featured-slider .sliderPostInfo{
position:absolute;
bottom:5px;
width:290px;
min-height:30px;
height:auto!important;
background:url(http://4.bp.blogspot.com/-Q79zfZN6nGA/T-A6TfnXHmI/AAAAAAAABuI/lqJtRvYfX1w/s1600/transparant.png);
}
#featured-slider .sliderPostInfo p{
color:#fff;
font-size:0.9em;
padding:0 5px 5px;
line-height:0.9em;
}
#featured-slider .sliderPostInfo h4{
color:#FFF;
font:bold 14px Tahoma;
text-transform:none;
padding:0 5px;
}
#featured-slider .contentdiv{
visibility:hidden;
position:absolute;
left:0;top:0;
z-index:1;
}
#paginate-featured-slider{
display:block;
background-color:#f0f0f0;
margin-bottom:0;
padding:0 0 5px;
}
#paginate-featured-slider ul{
width:290px;
padding-bottom:0;
list-style:none;
}
#paginate-featured-slider ul li{
display:inline;
width:50px;
float:left;
margin-left:0;
margin-right:8px;
margin-bottom:3px;
}
#paginate-featured-slider img{
padding-top:5px;
background:#f0f0f0;
}
#paginate-featured-slider a img{
border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{
border-top:4px solid #357798}
3. Lalu ttambahkan juga script berikut tepat diatas </head>
Lihat Kode:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 100;
summaryTitle = 25;

numposts3 = 5;

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 showrecentposts3(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

for (var i = 0; i < numposts3; 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","Aug","Sep","Oct","Nov","Dec"];

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 = '<div class="contentdiv"><a href="'+posturl+'"><img width="290" height="210" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h4 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h4><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);


j++;
}

}

function showrecentposts4(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

for (var i = 0; i < numposts3; 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","Aug","Sep","Oct","Nov","Dec"];

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><a class="toc" href="#"><img width="50" height="40" class="alignnone" src="'+img[i]+'"/></a></li>';
document.write(trtd);

j++;
}

}

//]]>
</script>
4. Simpan Template

5. Lihat Navigasi kiri klik "Layout"
6. Klik "Add Gadget"
7. Pilih "HTML/javascript"
8. Letakkan kode berikut pada form yg  terlihat
<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label Disini?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul><script>
document.write("<script src=\"/feeds/posts/default/-/Label Disini?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script> </ul>
<div class='clear'>
</div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
# Rubah teks warna merah (Label Disini) dengan lebel post yang akan dijadikan slide show
9. Simpan

Keterangan :
- Pada langkah no 2 terdapat angka yang saya cetak pink, itu adalah lebar dari body slide rubahlah angka tersebut jika belum sesuai dengan lebar kolom kamu.
- Pada kode langkah no 3 ada teks yang saya cetak biru, itu merupakan lebar dan tinggi dari gambar yang akan tampil.

Silahkan masukkan komentar jika mengikuti tutorial di atas tidak berhasil.
Terima kasih.

2012-06-26

Sebuah tutorial yang akan membahas tentang bagaimana menampilkan recent posts berdasarkan label atau kategory yang kita inginkan, pada widget ini kita isa menentukan apa saja posting dalam kategory apa saja yang akan kita tampilkan dan kita dapat mengatur Thumbnail, Ringkasan dan juga judul, meta dan lain-lain. kurang lebihnya seperti dibawah ini.


Untuk menampilkan posting tiap label dengan gambar tersebut kita cuma butuh beberapa script, dibawah ini yang bisa kita lakukan untuk menerapkannya :

1. Login ke blogger
2. Klik Template >> Edit HTML
3. Letakkan CSS berikut diatas ]]></b:skin>
/* LABEL CHOOSE
================================================ */
img.label_thumb{
float:left;
padding:5px;
border:1px
solid #F3F3F3;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{
float:left;
width:100%;
min-height:70px;
margin:0px 10px 2px 0px;
padding:0}
ul.label_with_thumbs li{
padding:8px 0;
min-height:65px;
margin-bottom:10px;
list-style:none;
}
.label_with_thumbs a{}
.label_with_thumbs strong{}
4. Selanjutnya cari kode </head>
5. Kemudian letakkan kode berikut tepat atas </head>
<script src='http://u-sup.googlecode.com/files/newslabelchoice.js' type='text/javascript'/>
6. Save Template
7. Lihat navigasi kanan dan Klik "Layout"
8. Klik Add Gadget >> pilih "HTML/javascript"
9. Letakkan kode dibawah pada form yang muncul dan isikan judul sesuai keinginan
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Category Here?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
# Rubahlah teks merah (Category Here) dengan kategori yang ingin ditampilkan.
10. Simpan

Sekarang lihat blog apakah sudah tampil atau belum, apabila posting label belum tampil dibawah ini kemungkinan yang biasanya terjadi :
1. Kesalahan menulisakan label/kategory, atau penulisan yang tidak sesuai (huruf besar/kecil mempengaruhi)
2. Peletakkan Script langkah no.4
3. Penyalinan kode yang tidak sempurna

Beberapa masalah diatas yang biasanya terjadi dalam penerepan sebuah script baik di blog maupun website, jadi silahkan cermati dengan seksama karena memang butuh ketelitian.

2012-05-17

Membuat Contact Form, Hubgungi saya atau Contact Us, menambahkan sebuah halaman contact form atau hubungi admin blog memang perlu juga untuk diberi apalagi jika blog memiliki layanan khusus semisal sebuah jasa dan lain-lain. Halaman contact akan memudahkan pengunjung mengajukan pertanyaan-pertanyaan yang diperlukan secara pribadi langsung ke alamat email Admin blog.
Sebagai alternatif contact form ini sebenarnya bisa juga dengan Shout Box, atau komentar akan tetapi menghubungi secara pribadi melalui email biasanya lebih suka dilakukan pengunjung karena mungkin bisa lebih diperhatikan dari admin itu sendiri ketimbang melalui Shoutbox, untuk itu kali ini sebuah tutorial membuat Halaman Contact Us / Hubungi Kami menggunakan layanan gratis dari emailmeform.com dengan fitur gratisnya :

1. Pertama silahkan masuk ke : https://www.emailmeform.com/v-signup.html
2. Maka akan muncul form seperti dibawah ini :


- Isikan Username, password dan juga email Jika sudah diisi semua klik "Create Account" akan muncul seperti dibawah ini :
Signup Confirmation
Thank you for signing up!


To prevent automated registrations, a message was sent to the email address that you provided. Please check your inbox and click on the verification link to activate your account.
3. Silahkan buka email yang dikirim untuk dikonfirmasi klik saja link yang diperintahkan
4. Kalau sudah silahkan Login ke Emailmeform
5. Klik Myform >> Add Form >> dan pilih yang no 1 1. Go to the Template section. I'd like to choose from a list of pre-made forms.

6. Pilih yang Contact Form


7. Klik Customize

8. Sementara langsung saja Klik "Save Form" (masih bisa di edit lain waktu)
9. Sekarang klik "My form" lihat menu atas. dan Klik "Code"
10. Klik HTML with Javascript/CSS dan copy seluruh kode.


Langkah selanjutnya yaitu meletakkan kode Kontak Emailmeform ke postingan blog, caranya :
Buatlah satu posting / halaman dengan judul Hubungi Saya atau Contact Us.
Kalau sudah letakka kode yang tadi kamu copy dari emailmeform kedalam postingan tersebut, dan terbitkan posting.

Sekarang Contact form sudah jadi, silahkan dicoba maka jika ada pengunjung yang menggunakan Contact form tersebut pesan akan masuk / diforward ke email yang kamu untuk mendaftar Emailmeform, tetapi pesan juga bisa dilihat pada account kamu di Emailmeform.com.
Mungkin tampilan diatas yaitu tampilan standart Contact Form tetapi kamu bisa memodifikasinya atau membuat tampilan dengan yang lebih menarik dan bervariasi karena sudah disediakan banyak template atau model Contact Form yang bagus, silahkan mencobanya sendiri, kamu dapat membuaat maksimal 5 form untuk member gratis dan 200 form untuk member premium.
selamat mencoba

2012-03-23

Bismillahirrohmanirrohim....
Mumpung lagi semangat ngetik jadi mau bikin artikel sederhana mudah-mudahan aja ada yang lagi nyari ni topik, ya mumpung belum ilang status semangatnya ni!!! yaitu tutorial Membuat Toolbar Iframe. kegunaan dari toolbar iframe ini biasanya digunakan pada sebuah halaman demo / preview templates dan juga halaman download. Saya yakin kamu pasti pernah menemui sebuah link dengan Toobar Iframe ini kebanyakan memang pada sebuah Link Demo templates atau Link Download file.

Yang akan kita buat disini yaitu Membuat Toobar Iframe dengan menggunakan Blog di Blogspot, kita bisa menggunakan sebuah subdomain ataupun membuat sebuah blog baru untuk dijadikan halaman kosong sebagai halaman iframe dengan toolbar tersebut, sebenarnya Toolbar Iframe ini bisa diterapkan di halaman Posting atau pada Halaman Mandiri Blogger tetapi yang ini akan saya bahas berikutnya.

Contoh yang pernah saya buat : http://toolbariframe.blogspot.com/?url=zonablogger.com

Nanti kita cukup manambahkan URL yang akan dijadikan sebagai halaman Iframe misalnya http://blogkamu.blogspot.com/?url=u-sup.blogspot.com (teks seperti berwarna merah yang nantinya perlu kita tambahkan ).

Berikut cara membuat Toolbar Iframe untuk halaman Live Demo.
1. Buatlah blog baru di blogspot (cara membuat blog bisa dibaca disini)

2. Kemudian download Template Blank Toolbar Iframe yang telah saya buat Di sini...! (Template ini sudah saya sertakan Menu Toolbar jadi kamu tidak perlu membuatnya)

3. Sekarang Masuk ke Dasboard >> Layout >> Edit HTML untuk mengganti template dengan template blank Toolbar Iframe (cara mengganti template bisa baca disini)

4. Jangan lupa untuk menghapus semua widget.

5. Kalau sudah berhasil diganti templatenya berarti sekarang sudah selesai.

Bagaimana cara menggabungkan antara URL iframe dengan URL tujuan, mudah saja berikut caranya :
Misalnya URL utama : http://blogkamu.blogspot.com/
Maka ditambah menjadi : http://blogkamu.blogspot.com/?url=u-sup.blogspot.com  
(warna kuning nama blog kamu)
(warna merah yaitu URL target yang perlu ditambahkan) 
(warna hijau yaitu tambahan wajib setiap ingin menampilkan halaman menggunakan iframe) 

Bagaimana cukup mudah kan untuk diterapkan, untuk berikutnya saya akan posting tentang cara membuat Toolbar Iframe dengan menggunakan JavaScript untuk halaman live demo atau download.

2012-03-20

Auto read more memang fitur ringkasan artikel yang menarik dan mudah diterapkan pada blogger sebagian besar template blogger menggunakan fitur ini yang pernah saya bahas Di Sini, akan tetapi tanpa disadari fungsi halaman statis blog kita jadi bermasalah yaitu tidak bisa terlihat penuh melainkan hanya terlihat ringkasan dari halaman tersebut karena ikut terkena efek dari fungsi script Auto Readmore tersebut, tidak cukup memuaskan kalau masalah tersebut terjadi pada blog kita, nah untuk mengatasi masalah Halaman Statis tersebut sangat mudah kita hanya perlu menambahkan beberapa baris kode dibawah ini :

1. Masuk ke Dasboard klik tanda anak panah lalu klik "Template"
2. Klik "Edit HTML"  >> Klik  "Proceed"
3. Klik "Expand Widget Template"
4.Car kode readmore yang telah terpasang, kurang lebihnya seperti dibawah ini!
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>Read more...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 
5. Tambahkan kode berikut tepat diatas kode berwarna merah (lihat langkah 4)
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
6. Kemudian tambahkan kode penutup berikut tepat dibawah kode berwarna hijau (lihat langkah 4)
</b:if>
7. Simpan template

Semoga dengan tips diatas masalah dapat mengatasi fungsi halaman yang tidak berjalan dengan baik.

2012-03-12

Coda Bubbles dengan jQuery, sebuah widget dengan script jQuery  yang cukup simpel namun menarik dan mudah diterapkan pada blog maupun website, Widget ini akan memberikan efek bubble PopUp apabila image atau ikon tersebut disorot, PopUp bisa berisi isi keterangan dari sebuah gambar yang dimaksud misalkan saja pada sebuah tombol download file.

Keterangan : 
- Warna hijau : URL atau link target yang akan dituju (harus diubah dengan link download kamu)
- Warna biru : URL tombol (boleh diganti boleh tidak)
- Warna merah : Keterangan dari file / link yang dimaksud silahkan dirubah sesuai dengan punya anda.
- Setiap akan menampilkan Coda Bubble ini cukup meletakkan kode langkah 8) pada postingan.

2012-03-10

Sitemap atau Peta Situs menjadi sangat penting pada sebuah blog atau website karena search engine juga akan mengindeks halaman blog secara keseluruhan melalui Sitemap atau  Peta Situs / Daftar isi ini, secara default atau bawa'an semua blog sudah disertai dengan Peta situs untuk blogspot yaitu dengan format http://blog-anda.blogspot.com/atom.xml. namun kita bisa menambahkan sendiri Sitemap tersebut dan membuatkan halaman mandiri/posting pada blogger kamu.

Cara membuat Sitemap - Daftar Isi

1. Buatlah satu halaman posting dan berilah judul Sitemap

2. Kemudian masukkan kode dibawah ini pada bagian kolom posting
<script src="http://u-sup.googlecode.com/files/site-map.js.txt">
</script>
<script src="http://u-sup.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
 - Ganti URL warna merah dengan url kamu
 - Ganti juga angka 500 dengan jumlah yang diinginkan (maksimal jumlah item ditampilkan)

3. Pada bagian label bisa dikosongkan atau diisi juga bisa misalnya isi saja "sitemap" (tanpa tanda petik)

3. Jika sudah memiliki banyak posting sebaiknya atur tanggal penerbitannya agar bs menjadi posting yang paling awal caranya :
- Klik "Post Option" pada kolom label
- Lihat pada bagian "Post date and time" klik "Set date and time" 
- Lalu rubahlah tanggal dan dan jamnya ke tanggal yang lalu

4. Kalau sudah klik Publish

Sebenarnya Sitemap ini lebih tepat dipostkan pada bagian Halaman Mandiri blogger akan tetapi jika template sudah menggunakan Auto Readmore Thumbnail  Image "Halaman mandiri" ini tidak bisa muncul dan tidak berfungsi dengan baik jadi menggunakan halaman posting untuk sitemap ini sebenarnya hanya alternatif bagi yang menggunakan Auto Readmore Thumbnail image, jangan kuatir ini tidak akan mempengaruhi pada Lalu lintas blog kamu.
Menampilkan Icon Label Posting Tertentu? Apa maksudnya dan seperti apa hasilnya apabila diterapkan kelihatannya cukup menarik untuk dibahas.Ya sebuah tips sederhana untuk blog tetapi cukup menarik untuk diterapkan, Icon label ini akan muncul pada postingan tertentu berdasarkan Label yang di kehendaki - Lihat Demo Disini juga ada Lihat!
Contoh sederhana saja posting saya ini memiliki kategori "Blog Tutorial" dan saya ingin menampilkan sebuah Icon label akan tetapi Icon label tersebut hanya akan muncul pada semua posting dengan kategori "Blog Tutorial" dan tidak akan muncul dilain kategori, akan tetapi diluar kategori "Blog Tutorial" Saya memiliki Kategori "Software" dan juga "Komputer" dll.
Q : Apakah bisa juga diberi ikon lebel?
A : Ya kita bisa menambahkan lebih dari 1 atau 2 atau bahkan semua label/kategori bisa kita beri ikon sendiri-sendiri!

Berikut untuk menampilkan Icon Pada postingan tertentu! Tapi sebaiknya siapkan dulu gambar atau ikon yang akan digunakan sesuai kategori yang dimaksud.
1. Masuk ke Dasboard klik tanda anak panah lalu klik "Template"
2. Klik "Edit HTML"  >> Klik  "Proceed"
3. Klik "Expand Widget Template"
4. Cari kode <div class='post-header'> (semua template blogger memiliki kode ini) kemudian letakkan kode berikut tepat dibawahnya.
<div style='position:absolute;top:0px;right:0px;z-index;200;'>
<!-- BATAS AWAL -->
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;Blog Tutorial&quot;'>
<img src='http://4.bp.blogspot.com/-6kEqK0IVlus/T1sIPU5h1OI/AAAAAAAABxM/__66aMaoD8A/s1600/tr.png'/>
</b:if>
 </b:loop>
<!-- BATAS AKHIR -->
</div>
5. Simpan Template.

Keterangan :
  • Teks Biru :  Sesuaikan angka top:0px dan right:0px menjadi angka yang diinginkan apabila posisi tidak sesuai
  • Teks Hijau : Rubahlah dengan label/kategori yang akan menampilkan Ikon, Teks harus sesuai dengan label apabila label diawali huruf besar maka harus ditulis juga diawali dengan huruf besar apabila tidak, ikon tidak akan muncul. contoh label : Blog Tutorial jika ditulis blog tutorial maka ikon tidak akan muncul
  • Teks kuning : Ganti dengan URL Gambar / Icon yang diupload ke. cara upload gambar bisa baca disini
  •  Jika ingin menambahkan Label lagi Salin kode mulai dari <!-- BATAS AWAL --> sampai <!-- BATAS AKHIR--> kemudian letakkan dibawahnya atau diatas </div> 
  • Begitu seterusnya dan jangan lupa untuk merubah nama label dan juga URL Gambarnya

2012-01-01

Membackup template, hal yang penting dalam urusan blogging tetapi banyak juga yang mengabaikannya. Membackup template akan sangat membantu kita ketika kita melakukan Edit atau melakukan perubahan pada blog kita dan saat itu juga terjadi kesalahan pada blog kita sendiri, dengan demikian kita memiliki salinan template yang masih bagus atau belum memiliki kerusakan pada Script walaupun nantinya tidak terjadi kesalahan kita sudah berusaha mengantisipasinya.
Membackup template sangatlah mutlak perlu dilakukan sebelum kita melakukan perubahan atau bereksperiment pada blog kita, atau kita bisa membuat blog baru khusus untuk percobaan apabila tidak ingin melakukan Backup Template.
Berikut sebuah Tutorial Sederhana Membackup Template Blogger. tutorial dibawah ini menggunakan tampilan baru silahkan rubah dulu ketampilan baru kamu bisa membaca Disini :

1. Silahkan masuk ke blogger
2. Klik Tanda Panah >> lalu Klik Template atau Layout



3. Cari dan Klik Tombol "Backpup / Restore" (dibagian kanan atas)

4. Pada jendela yang baru yang muncul Klik tombol "Download Full Template"




5. Unduh template dan simpanlah pada komputer kamu dan klik "Close"


Mungkin suatu saat kamu membutuhkan template hasil backup tersebut jadi simpanlah template blogger kamu. Cara yang sangat mudah bukan,,,? jadi jangan sampai hal ini dilewatkan jika suatu saat ingin melakukan edit atau melakukan perubahan Script pada template kamu.
Ini dia yang ditungg-tunggu bagi para Blogger Mania, seperti kita ketahui selama ini bahwa blogger tidak atau belum mendukung system kotak komentar Threaded Comments atau Trackback system (kotak koemntar seperti wordpress) tetapi sekarang Blogger telah mendukung system kotak komentar tersebut. walaupun dulu waktu belum mendukung kita bisa menggunakan Disqus Comments yang memungkinkan merubah system kotak komentar blogger menjadi System Threaded atau trackback tetapi cara tersebut sedikit rumit rasanya apalagi bagi yang baru memulia blogging.
Nah sekarang kita bisa membuat system komentar Trackback atau Threaded Comments dengan sangat mudah, akan tetapi cara ini tidak akan berfungsi atau tidak akan berjalan pada kode system komentar yang sudah dimodifikasi? Trus bagaimana solusinya? Solusinta yaitu dengan mengembalikan "Kode Widget Template Ke Default" berikut cara merubah menjadi Threaded Comments :

Tutorial dibawah ini menggunakan gambar blogger tampilan baru jadi silahkan rubah dulu ke tampilan baru supaya tidak membingungkan caranya cukup login dan lihat bagian atas lalu klik "Try the updated Blogger interface" atau "Coba antar muka Blogger Baru" maka tampilan akan berubah ke tampilan dasboard baru. atau bisa melihat yang pernah saya bahas Disini.
Jangan lupa juga untuk membackup template yang sudah saya bahas Di sini (untuk mengantisipasi yg tidak diinginkan)
 
Ada dua cara untuk membuat Threaded Comments ini :
- Threaded Comments dengan Edit Kode
- Threaded Comments tanpa Edit Kode

1. Threaded Comments dengan Edit Kode
Saya sarankan gunakan yang ini agar tampilan posting tidak terpengaruh.

1. Masuk ke halaman Dasboard klik tanda panah dan klik "Template" :


Sekali lagi saya ingatkan untuk membackup template dengan mengklik tombol "Backup / Restore"

2. Klik "Edit HTML" 


- Jika muncul  sebuah peringatan berikut klik  "Proceed"

3. Akan terlihat kode script template kamu. Klik  "Expand Widget Template"
4. Kemudian carilah kode dibawah ini. gunakan Ctrl + F pada keyboard untuk memudahkan pencarian:
 <b:include data='post' name='comments'/>
5. Terdapat 4 kode seperti diatas, ganti kesemua-4 kode tersebut diatas dengan kode dibawah ini
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
5. Jika ke 4 kode yang saya maksud pada langkah (4) diatas telah diganti semua Klik "Save Template" / "Simpan Template"

Sekarang lihat hasilnya, tapi mungkin tampilannya masih kurang menarik karena masih bawa'an untuk tampilan yang lebih menarik silahkan tunggu tutorial berikutnya saya akan membuat Tampilan / Style untuk Threaded Comments ini.

2. Threaded Comment Tanpa Edit Kode 
Saya lebih menyarankan menggunakan cara 1 karena langkah 2 akan mempengaruhi tampilan posting area blog.

1. Masuk ke halaman Dasboard klik tanda panah dan klik "Template" :


Sekali lagi saya ingatkan untuk membackup template dengan mengklik tombol "Backup / Restore"

2. Klik "Edit HTML" 


- Jika muncul sebuah peringatan klik  "Proceed"

3. Akan terlihat kode script template kamu. Klik  "Revert widget templates to default"
 


4. Kemudian klik "OK" maka script untuk widget akan dikembalikan kesemula

5. Silahkan lihat hasilnya dan test tampilan komentar kamu yang baru.
6. Jika perubahan template mempengaruhi Halaman Judul Posting dan Post meta dll kamu bisa sedikit merubahnya melalui Halaman Pengaturan atau juga bisa dengan mengedit Template.

Sampai disini kamu sudah berhasil merubah kotak komentar lama dengan System Threaded Comments tetapi dengan tampilan yang masih bawa'an atau standar kamu bisa memodifikasi kode CSSnya. klw bersedia silahkan tunggu tutorialnya saya akan membuat Style untuk kotak komentar Threaded Comments ini.

2011-12-31

Kali ini Bang U-sup pingin menulis sebuah artikel tentang Tutorial Membuat Spinning icons dengan CSS3 transform, widget sebuah icons dengan efek yang apabila disorot akan berputar secara otomatis, widget ini bisa diterapkan sebagai link social seperti Facebook, RSS, Twitter.

Berikut demonya coba arahkan kursor pada icon dibawah ini:

- socialicons1 360 degree spin onMouseover dan onMouseout

- socialicons2 60 degree spin onMouseover and onMouseout

- socialicons3 360 degree spin onMouseover ONLY


Sekarang cara membuat Spinning icons dibawah ini :

1. Login ke Blogger
2. Pada dasboard cari dan Klik Edit HTML
div#socialicons1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

div#socialicons1 img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

div#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

div#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

div#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

div#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg); }
3. Cari kode ]]></b:skin> lalu Salin dan tempel CSS berikut tepat diatasnya ]]></b:skin>
4. Jangan lupa simpan template.
5. Sekarang masuk ke Design >> Page Elements
<div id="socialicons1"> <!-- angka 1 bisa dirubah dengan angka 2 atau 3 untuk model yg berbeda -->
<a href="http://urlanda.com/RSS"><img border="0" src="http://1.bp.blogspot.com/-aFoaagR_vc0/Tv3m_2_OLBI/AAAAAAAABm8/MEmujyAi4Ag/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="http://4.bp.blogspot.com/-ZUhz4ru6RBs/Tv3m_X4XuYI/AAAAAAAABmo/6LQ4IolE0W0/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="http://4.bp.blogspot.com/-qWEX1j-tXHA/Tv3m_u0aWII/AAAAAAAABm0/AwN9Qkkl-Us/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="http://2.bp.blogspot.com/-tyZhlZfCKjQ/Tv3m_0e3ovI/AAAAAAAABnM/MjE8VOFkO7M/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="http://1.bp.blogspot.com/-x4DBFqxf3Jo/Tv3nAadEdNI/AAAAAAAABnY/Q3onklhZIEc/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>
6. Klik Add Gadget kemudian pilihlah HTML/Javascript
6. Sekarang salin dan tempel kode dibawah ini pada form yg tersedia kemudian simpan
7. Coba lihat blog kamu.

Model dan Penyesuaian :
  • Mengganti model diatas ada 3 pilihan model ganti saja <div id="socialicons1"> dengan angka misalnya socialicons2 atau socialicons3 
  • Jika gambar terlalu besar untuk ditampilkan pada Sidebar, dan lebih suka dengan tampilan yang lebih kecil silahkan unduh gambarnya Di sini, kemudian kecilkan gambar tersebut menggunakan Photosop atau Photo Editor lainnya, lalu uploadlah gambar ke blogger dan gantilah URL gambar dengan URL yg kamu Upload (URL gambar yg berwarna Kuning). bisa membca Di-sini bagaimana mengupload gambar di blogger
  • Kamu bisa bereksperiment sendiri untuk menghasilkan model efek dengan cara mengedit angka pada kode CSSnya, jika masih belum faham dengan css sebaiknya cara ini tidak usah
  • Ubahlah URL / URL dengan punya kamu lihat teks warna Hijau
  • Tutorial diatas bisa kamu baca langsung pada sumbernya : http://www.dynamicdrive.com dalam bahasa Inggris

2011-12-06

Karena banyak yang tanya cara buat menu seperti punya Bang Usup diatas tu.... jadi saya bkinin aja tutorialnya untuk diposting biar kalau ada yang nanya lagi jadi lebih mudah...!
Menu ini persis seperti punya blog saya di atas coba jadi suka atau tidak bisa nyoba test langsung menunya, menu tersebut memiliki submenu tersembunyi yang bilamana disorot menggunakan cursor akan keliatan tu menu yang gak keliatan alias tersembunyi...tertarik gak.....???

Kalau tertarik berikut cara mudah nya :
1. Masuk ke Blogger
2. Ke Page Element >> Edit HTML
3. Tempatkan kode berikut tepat diatas ]]></b:skin>

/* --------------------- WILAYAH BREADCRHUMB MENU ------------------------ */
* html #breadcrumb{position:absolute}
#breadcrumb{
background:#fff url(http://3.bp.blogspot.com/-PxFdHeIcjNg/TnMIwVeQW-I/AAAAAAAABXA/myvjGj8uJfk/s1600/bgtopnav.png) repeat-x ;
border-bottom:1px solid #CDCDCD;
z-index:100;
padding-bottom:1px;
width:100%; top:0;
left:0;
overflow:auto;
height:35px; overflow:hidden;
}

#breadcrumb .maxs_logo{
background:url('http://u-sup.blogspot.com/favicon.ico') 7px 9px no-repeat;
float:left;
padding-left:7px;
text-align:left;
font-family:Arial; font-size:16px; font-weight:bold; font-style:normal;
color:#4E4E4E; width:125px;
padding-left:30px; padding-top:8px}
#breadcrumb .maxs_logo a{text-decoration:none; color:#ccc; padding-left:21px}
#breadcrumb .maxs_search{float:left; padding-top:7px; margin:0px; text-align:left; font-family:tahoma; font-size:14px; font-weight:bold; font-style:normal; color:#ccc; width:142px}
#breadcrumb .maxs_search a{text-decoration:none; color:#ccc; padding-left:10px; padding:0}
#breadcrumb .maxs_search a:hover{text-decoration:underline; color:#ccc}
#breadcrumb .maxs_navbarmenuleft{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#999; width:468; padding:3px 1px}
#breadcrumb .maxs_addthis {float:left; padding-top:9px;}
#breadcrumb .maxs_fblike {float:left; padding-top:6px; margin-left:5px;}

/* -------------------- KOTAK PENCARIAN ATAS ----------------------- */
#search{border:1px solid #CDCDCD; height:20px; width:130px; padding:0; background:#f6f4f4; }
#search input{border:0; background:none; color:#575757}
#s{font-size:12px; width:120px; padding-left:4px; margin:0; background:none}
#topsearch #search{margin-top:0px;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
background-color:#EDEDED;
border:1px solid #CDCDCD;}
#topsearch #s{width:105px}

/* --------------------- BEGIN DROPDOWN MENU ------------------------ */

#ini-menu-label {float:right; margin:0px; padding:0; }
.text-style{background:url(http://3.bp.blogspot.com/-Si67GEL10RA/Tf4l3kWsDtI/AAAAAAAABP8/fG2LS8dM8jo/s1600/separatortop.png) no-repeat;color:#4E4E4E;
display:block;
font-size:12px;
font-family:arial,verdana,georgia;
font-weight:normal;
text-transform:normal; margin:0;
border-left:0px solid #CDCDCD;
padding:8px 5px 13px 7px; height:14px
}
.text-style:hover{color:#0378B2; cursor:pointer;height:14px}

#ini-menu-label ul{float:left; list-style:none; margin:0px; padding:0}
#ini-menu-label li{list-style:none; margin:0px; padding:0px}
#ini-menu-label li a, #ini-menu-label li a:link, #ini-menu-label li a:visited{color:#494949;
display:block;
font-size:12px;
font-family:arial,verdana,georgia;
font-weight:bold;
text-transform:normal;
margin:0; border-left:1px solid #CDCDCD;
padding:1px 8px 6px 8px}

#ini-menu-label li a:hover, #ini-menu-label li a:active{
color:#494949;
padding:1px 8px 6px 8px;
text-decoration:none}

#ini-menu-label li li a, #ini-menu-label li li a:link, #ini-menu-label li li a:visited{
background:#F3F3F3;
width:90px; color:#4E4E4E; font-size:11px;
font-family:arial,Times New Roman;
font-weight:normal;
text-transform:normal;
float:none; margin:0;
padding:1px 8px 1px 8px;
border-top:1px solid #FFF;
border-bottom:1px solid #D5D5D5;
border-left:1px solid #CDCDCD;
border-right:1px solid #CDCDCD;}

#ini-menu-label li li a:hover, #ini-menu-label li li a:active{
background:#D1D2D1;
color:#0378B2;
padding:1px 8px 1px 8px;
border-bottom:1px solid #B2B1B1;}

#ini-menu-label li{float:left; padding:0}
#ini-menu-label li ul{
z-index:999;
position:absolute;
left:-999em;
height:auto;
width:100px;
margin:0;
padding:0}
#ini-menu-label li ul a{width:100px}
#ini-menu-label li ul ul{margin:-31px 0 0 100px}
#ini-menu-label li:hover ul ul, #ini-menu-label li:hover ul ul ul, #ini-menu-label li.sfhover ul ul, #ini-menu-label li.sfhover ul ul ul{left:-999em}
#ini-menu-label li:hover ul, #ini-menu-label li li:hover ul, #ini-menu-label li li li:hover ul, #ini-menu-label li.sfhover ul, #ini-menu-label li li.sfhover ul, #ini-menu-label li li li.sfhover ul{left:auto}
#ini-menu-label li:hover, #ini-menu-label li.sfhover{position:static}

4. Kemudian Tempatkan kode berikut tepat di bawah <body>
<div id="breadcrumb">
<div class="breadcrumb maxs_logo">
<i>Nama Blogmu</i></div>
<div class="breadcrumb maxs_search">
<div id="topsearch">
<div id="search">
<form action="/search'" id="searchform" method="get" name="searchform">
<input class="keyword" id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
<input src="http://2.bp.blogspot.com/-2st6ac1Y9qs/Tf9hPW2tdbI/AAAAAAAABQM/-v-1ZhdSrVU/s1600/search_c.png" style="border: 0pt none; padding-top: 4px; vertical-align: top;" type="image" /></form>
</div>
</div>
</div>

<div class="breadcrumb maxs_addthis">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/pages/Templatemaxscom/115692038493808&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;amp;colorscheme=light&amp;height=30" style="border: none; height: 21px; overflow: hidden; width: 85px;"></iframe></div>

<div class="breadcrumb navbarmenuleft">
<ul id="ini-menu-label">
<li>
<div class="text-style">
Downloads ▼</div>
<ul>
<li>
<a href="http://www.blogger.com/search/label/Software?max-results=10">Software</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Games?max-results=10">Games</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Blogger%20Templates?max-results=10">Blogger Templates</a>
</li>
</ul>
</li>
<li>
<div class="text-style">
Tutorials ▼</div>
<ul>
<li>
<a href="http://www.blogger.com/search/label/Blogspot%20Tutorial?max-results=10">Blogspot</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Wordpress%20Tutorial?max-results=10">Wordpress</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Websites?max-results=10">Website</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Komputer?max-results=10">Komputer</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Internet?max-results=10">Internet</a>
</li>
</ul>
</li>
<li>
<div class="text-style">
Info Web ▼</div>
<ul>
<li>
<a href="http://www.blogger.com/search/label/Google?max-results=10">Google</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Yahoo?max-results=10">Yahoo</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Bing?max-results=10">Bing</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Facebook?max-results=10">Facebook</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Twitter?max-results=10">Twitter</a>
</li>
<li>
<a href="http://www.blogger.com/search/label/Windows?max-results=10">Windows</a>
</li>
</ul>
</li>
<li>
<div class="text-style">
Komputer ▼</div>
<ul></ul>
</li>
<li>
<div class="text-style">
Layanan ▼</div>
<ul>
<li>
<a href="http://u-sup.blogspot.com/2010/06/parse-html-for-blogger-xml-templates.html">Parse HTML</a>
</li>
<li>
<a href="http://u-sup.blogspot.com/2011/08/jasa-pembuatan-blogger-template.html" title="Jasa Pembuatan Blogger Template">Jasa Template</a>
</li>
<li>
<a href="http://u-sup.blogspot.com/search/label/Premium%20Templates" rel="tag" title="Premium Blogger Templates">Premium Templates</a>
</li>
</ul>
</li>
<li>
<div class="text-style">
Partner ▼</div>
<ul>
<li>
<a href="http://vidzoner.com/" target="_blank">Vidzoner</a>
</li>
<li>
<a href="http://www.templatemaxs.com/" target="_blank">Templatemaxs</a>
</li>
<li>
<a href="http://zonablogger.com/" target="_blank">Zonablogger</a>
</li>
</ul>
</li>
<li>
<div class="text-style">
Profil ▼</div>
<ul>
<li>
<a href="http://www.blogger.com/profile/ID-BLOGGER-DISINI.html" rel="nofollow" target="_blank">Blogger</a>
</li>
<li>
<a href="http://zonablogger.com/user/profile/usupnew/" rel="nofollow" target="_blank">Zonablogger</a>
</li>
<li>
<a href="http://twitter.com/usupnew" rel="nofollow" target="_blank">Twitter</a>
</li>
<li>
<a href="http://facebook.com/usupdotnet" rel="nofollow" target="_blank">Facebook</a>
</li>
<li>
<a href="http://www.facebook.com/pages/Blog-tutorial-Komputer-Internet/163155847051719" rel="nofollow" target="_blank">Facebook Fans</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

5. Simpan template dan lihat hasilnya

Keterangan :
- Jika sudah mengenal CSS Anda bisa merubah tampilan dengan mengedit kode CSSnya, yaitu langkah no.3
- Cari dan rubah http://u-sup.blogspot.com/favicon.ico dengan URL Blog kamu, ini bisa ditemukan pada script langkah no.3
- Jangan lupa untuk untuk merubah URL dan facebook ID, ini bisa ditemukan pada Script langkah 4
- Berhasil atau belum berhasil kasih komentarnya ya...terima kasih!