Tampilkan postingan dengan label Blogspot Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Blogspot Tutorial. Tampilkan semua postingan

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!

2011-11-12

Pada dasarnya sebuah mesin pencari akan mengidentifikasi atau membaca konten sebuah blog atau website melalui Meta Tag entah Meta Deskripsi atau Keywords dan meta tag lainnya. Pada blog yang kita buat di Blogspot secara default belum memiliki meta deskripsi atau keywords melainkan hanya title saja contohnya seperti ini <title><data:blog.pageTitle/></title> meta tersebut hanya akan mengidentifikasi judul blog dan halamannya saja jadi menurut saya kurang memiliki kekuatan dalam masalah SEO. Sekarang silahkan cek punya anda caranya Masuk Ke Tata Letak >> Edit HTML dan lihat dibagian bawah area kode <head>  apakah sudah dirubah atau masih seperti diatas, jika tidak ada kemungkinan jika sudah dirubah akan seperti pada postingan yang ini namun ternyata itu saja masih kurang bagus jadi saya sarankan anda menggunakan Meta Tag Otomatis di setiap halaman anda.

Fungsi dari Meta tag yang akan saya posting ini yaitu akan memanggil secara otomatis setiap Judul postingan anda dan kemudian akan memasukkannya kedalam Deskripsi dan Keywords Blog anda. Jadi blog anda akan memiliki format seperti dibawah ini :

Sebelum dirubah :
Setelah Dirubah :

Nah untuk merubahnya dibawah ini caranya!
1. Masuk ke Rancangan / Tata Letak >> Edit HTML




2. Cari kode <title><data:blog.pageTitle/></title> letakknya dibawah area <head> 


3. Kemudian Hapus dan ganti dengan kode dibawah ini :
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Ini meta otomatis halaman utama -->
<title><data:blog.title/></title>
<meta expr:content='data:blog.title + &quot; Sebuah blog yang menyediakan berbagai macam informasi.&quot;' name='description'/>
<meta expr:content='data:blog.title + &quot;, Komputer, Internet, News, Berita, Politik, Fasion, Ekonomi, Musik, Game, Olah Raga, Artis&quot;' name='keywords'/>
<b:else/>
<!-- Ini meta otomatis pada setiap halaman posting -->
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot;, Adalah sebuah artikel yang mungkin sedang anda cari.&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Komputer, Internet, News, Berita, Politik, Fasion, Ekonomi, Musik, Game, Olah Raga, Artis, Bola, Blogging, Bisnis dan Keuangan&quot;' name='keywords'/>
</b:if>
4. - Ubahlah teks warna Ungu sesuai dengan deskripsi dan keyword blog anda
    - Ubahlah teks warna Hijau sesuai dengan deskripsi dan keyword halaman posting blog anda
    - Jika bingung ganti terserah anda atau biarkan seperti itu saja. anda bisa mengubahnya kapan saja kalau sudah tidak bingung.,.,,hehehe.


4. Kemudian simpan

Definisi :
- <data:blog.title/> : Ini berfungsi untuk memanggil Judul Blog Anda
- <data:blog.pageName/> : Ini berfungsi untuk memanggil judul posting atau judul setiap halaman anda.

Ngomong-ngomong saya juga pake ini lho... sekiranya hanya itu yang bisa saya bagikan hari ini, semoga bermanfaat...!!! Semoga Sukses...!!!

2011-10-14

Dulu saya pernah memposting artikel dengan topik yang sama tentang menambahkan Rating Bintang dari Outbrain yang saya posting disini, tetapi yang lama tersebut tampilannya kurang menarik dan susah diubahsuaikan, nah kali ini ada Rating Bintang yang tampilannya menarik dan tentunya lumayan ringan untuk loading blog, Rating Bintang yang ini kodenya dari js-kit.com.

Berikut contoh Star Rating atau contoh langsungnya ada Demo Star Rating


Tutorial ini telah saya perbarui dan saya tambahkan dengan satu model lagi, karena kemaren banyak yg bs tampil tp sekarang mudah-mudahan bisa tampil pada semua template.
1. Masuk ke Dasboard Blogger ► Tata Letak ► Edit HTML dan beri klick pada "Expand widget template"

2. Cari kode  </body>  dan tambahkan kode berikut diatasnya!
<!-- JS-KIT FOR STAR RATINGS SHOW -->
<script src='http://js-kit.com/ratings.js'/>
3.Sekarang menampilkan rating bintang dan ada dua jenis model pilih salah satu kode dibawah ini dan letakkan dibawah kode <data:post.body/>

Kode 1 (Rating bintang biasa)
<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title"></div>
Kode 2 (Like / Unlike) gambar Jempol
<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title" view="score"></div>
5. Sekarang Lihat halaman postingnya sudah ada Star Ratingnya apa belum.

Langkah diatas menampilkan Star Rating pada halaman postingan saja, bagaimana jika ingin Pasang Star Rating di halaman depan atau homepage berikut langkah yang bisa diikuti!

Keterangan :
Diatas akan menampilkan Rating Bintang dibawah posting jika ingin menampilkan Rating bintang cukup meletakkan kode pada langkah 3 tepat dibawah  <div class='post-header-line-1'/> 
Posisi bisa disesuaikan dengan keinginan dengan cara merubah kode CSS lihat berikut ini :
float:left; margin-right:3px; kamu bisa merubah menjadi float:right; margin-left:3px;
CSS ini juga bisa kamu tambahkan sedikit modifikasi jika kamu sudah mengerti tentang CSS.

2011-09-18

Fitur Gallery Template
Tutorial ini menanggapi pertanyaan melalui komentar di halaman sini dari seseorang yang tak menyebutkan mamanya, pertanyaan kiranya seperti ini "Bagaimana membuat postingan dua kolom" sebenernya ini juga kebetulan juga karena saya cari lewat search belum banyak yang membuat artikel seperti ini jadi pesaingnya masih sedikit juga, akhirnya saya jawab "Kalau bersedia menunggu tutorialnya silahkan" dan sekarang artikel ini spesial deh buat beliau mas Anomin walaupun sebenarnya saya sendiri bingung untuk menjelaskannya tapi seadanya dan sebisanya akan saya jelaskan. oke sekarang langsung aja dibahas tentang cara membuat posting dengan fitur gallery atau postingan dengan 2 kolom.  Kamu juga bisa melihat demo yang sudah jadi Disini

Sebagai bahan percobaan saya sarankan untuk membuat blog baru saja untuk uji coba ini, kemudian template yang akan kita gunakan yaitu template minima bawaan blogger karena simple dan mudah untuk di ubahsuaikan, untuk template minimanya saya sudah persiapkan Template Minimaxs yaitu template hasil nodifikasi dari Minima Template yang bisa didownload terlebih dahulu di sini...!!!
Kalau sudah di download silahkan upload template tersebut di blog uji coba yang tadi dibuat. 
Jika kamu belum Memasang Auto Read more silahkan terapkan dulu langkahnya ada disini.

1. Tetap berada dalam Edit HTML
2. Kemudian cari kode  ]]></b:skin>
3. Jika sudah ketemu letakkan kode CSS berikut tepat dibawah kode ]]></b:skin>
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>

/*homepage styles
--------------------------------------------------------*/
#main-wrapper {
width:625px;
float:left;
margin-right:0px;
margin-top:0px;
background:none;
overflow:hidden;}

.post {
width:295px;
height:210px;
margin:0px 10px 10px 0;
padding:5px 0 0 5px;
border:1px solid #ccc;
display:inline;
float:left;
overflow:hidden;
position:relative; background-color:#F5F5F5; font-family:arial; font-size:12px; }

.post h3 {
width:290px;
font-family:arial;
font-weight:bold;
font-size:12px;
color:#424242;
text-align:left;
margin:0px; border-bottom:1px solid #ccc;
position:absolute;}

.post-body {
width:290px;

height:240px;
overflow:hidden;
padding:0px;
margin:25px 0 0;}

.post img {
height:100px;
width:100px;

margin-top:5px;
padding:1px;}

</style>
</b:if>
4.  Kemudian simpan template dan lihat hasilnya.

Penjelasan Kode Element yang wajib di Sesuaikan :

Yang perlu diperhatikan yaitu kode  #main-wrapper dan kode .post karena jika tidak hasilnya akan sangat buruk dan kolom saling bertabrakan.

1. #Main-wrapper yaitu yang akan ditempati kolom posting atau .post, dari kode diatas lebar #main-warpper 625px perhatikan dibawah ini.

2. .post kode ini yang akan dibagi menjadi 2 kolom dan akan menentukan tiap kolom posting yang akan tampil dalam area #main-wrapper diatas yaitu 625px maka lebar post dibagi menjadi 2 dan dikurangi margin 10px + 10px dan padding 5px + 5px  = maka hasilnya 295px dan tinggi 210px (tinggi bisa disesuikan) perhatikan kode .post (anda bisa membuat menjadi 3 kolom jika angka 295px diperkecil lagi)

3. .post h3 Ini kode judul posting anda bisa merubah angka  width:290px; dengan menyesuaikan lebar posting.

4.  .post-body  Ini kode untuk menyimpan  kontent post atau post body sesuaikan width:290px; dan height:240px;

5. .post img  kode ini menentukan besar kecil gambar thumbnail posting bisa disesuaikan dengan merubah nilai   height:100px; dan width:100px;



Tambahan :
Mungkin langkah diatas akan mudah dan langung bisa dilihat hasilnya, karena memang template Minimaxs sudah saya sesuaikan untuk dibuat fitur gallery atau posting 2 kolom atau lebih.
Sekarang yang jadi pertanyaan yaitu bagaimana menerapkan fitur gallery atau posting 2 kolom ini jika menggunakan template selain Minimaxs yang saya buat, mungkin jika anda menggunakan template bawa'an blogger masih mudah untuk di sesuaikan, tetapi kalau template yang anda gunakan bukan bawa'an blogger mungkin saya akan sulit untuk menjelaskannya dikarenakan Kode Element yang mungkin berbeda dan kemungkinan telah dirubah oleh pembuat template tersebut jadi saya sarankan anda menggunakan template Minimaxs tersebut atau template bawa'an blogger.

Jika anda ingin membuat dengan template yang bukan bawa'an blogger maka yang harus dilakukan yaitu :
  • Menambahkan Fitur Readmore Thumbnail Image (jika belum ada) anda bisa membaca di sini
  • Anda  harus tau kode Main-wrapper dan kode Post pada template anda karena kode ini bisa juga berbeda-beda
  • Kemudian ikuti dengan langkah-langkah diatas.
Seperti itulah yang bisa saya jelaskan tentang membuat fitur gallery atau 2 kolom postingan, semoga mudah dimengerti, jika ada kesulitan atau mungkin ada kekeliruan pada tutorial diatas silahkan tinggalkan komentar.

2011-09-10

Sekarang Blogger telah meluncurkan tampilan barunya, tampilan baru ini lebih bagus dan memiliki tampilan yang Modern dan Clear selain itu rasanya juga enak dipandang mata bagi saya tampilan ini sangatlah menarik dan saya lebih suka dengan tampilan barunya walaupun masih pada status Uji Coba atau BETA, akan tetapi banyak juga yang mengatakan tampilan yang baru sedikit lebih berat ketimbang tampilan lama.
Berikut cara merubah dari tampilan lama ke tampilan baru :

1. Masuk ke blogger
2. Pada bagian dasboard lihat atas dan klik "Try the updated Blogger interface" atau "Coba antar muka blogger Baru" 


3. Dibawah ini tampilannya "Blogger Baru"

Cara yang sangat mudah untuk diterapkan, sebenarnya diatas tidak perlu saya terangkan saya yakin anda sudah mengerti dan bisa melakukannya akan tetapi mengapa saya membahasnya tidak lain yaitu untuk menambah koleksi artikel saya saja.

2011-08-21

Membuat halaman navigasi dengan angka atau kalau bahasa gaulnya "numbered page navigation"  widget seperti ini saya pernah posting yang bisa dibaca atau dilihat dihalaman sini. tapi sekarang saya punya script yang baru dengan tampilan yang sudah saya modif  lagi dengan tampilan yang cantik dan menarik. jika sudah memasang dengan tampilan yang lama saya sarankan sebaiknya ganti dengan script yang ini karena lebih ringan.


Untuk cara pemasangannya sama dengan posting yang halaman navigasi dengan angka yang dulu disini, tetapi saya akan tulis tutorial nya ulang dari langkah awah agar tidak membingungkan berikut tutorialnya :

1. Login ke blogger.com anda!
2. Masuk ke Dasboard>>Rancangan>> Edit HTML (tidak perlu memberikan klik pada Expand template widget)
3. Cari kode ]]></b:skin> Kemudian Copy dan paste kode CSS berikut tepat diatas kode ]]></b:skin>
/* -- AWAL HALAMAN NAVIGASI DENGAN ANGKA -- */
.totalpages{color:#333; padding-right:7px;}
.showpageArea a{text-decoration:none;}
.showpageNum a{
padding:4px 8px;
margin:0 4px;
text-decoration:none;
color:#000;
text-shadow:#fff 1px 1px 1px;
border:1px solid #CDCDCD;
background:#DADBDB url('http://4.bp.blogspot.com/-CgpDqc6_cM0/Tk_wWF7v2jI/AAAAAAAABV4/bAnNYbSO-1I/s1600/off.png') repeat-x ;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px}
.showpageNum a:hover{ color:#000;
text-shadow:#fff 1px 1px 1px; border:1px solid #CDCDCD; background:#C4C4C4 url('https://lh5.googleusercontent.com/-jswtHbAaIMA/Tk_zszeutVI/AAAAAAAABWA/jhYqRdzLxlU/s104/pghover.png') repeat-x ;}
.showpagePoint{color:#333;
text-shadow:#fff 1px 1px 1px;
padding:4px 8px;
margin:2px;
font-weight:bold;
border:1px solid #cccccc;
background:#959494 url('http://2.bp.blogspot.com/-N0_-xRfXkdk/TlAJFaD2gWI/AAAAAAAABWE/qXSZQ6hmw1w/s1600/pgoff.png') repeat-x ;
text-decoration:none;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
.showpageOf{margin:0 8px 0 0; padding:4px 8px; color:#333;
text-shadow:#fff 1px 1px 1px; background:#DADBDB url('http://4.bp.blogspot.com/-CgpDqc6_cM0/Tk_wWF7v2jI/AAAAAAAABV4/bAnNYbSO-1I/s1600/off.png') repeat-x ;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
.showpage a{padding:1px 8px; color:#333;
text-shadow:#fff 1px 1px 1px;
margin:0 2px;
text-decoration:none;
border:1px solid #CCC;
background:#DADBDB url('http://4.bp.blogspot.com/-CgpDqc6_cM0/Tk_wWF7v2jI/AAAAAAAABV4/bAnNYbSO-1I/s1600/off.png') repeat-x ;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px}
.showpage a:hover{color:#000;
text-shadow:#fff 1px 1px 1px;
padding:4px 8px;
margin:2px;
font-weight:bold;
border:1px solid #CDCDCD;
background:#C4C4C4 url('https://lh5.googleusercontent.com/-jswtHbAaIMA/Tk_zszeutVI/AAAAAAAABWA/jhYqRdzLxlU/s104/pghover.png') repeat-x ;}
text-decoration:none;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px; border-radius:4px}
.showpageNum a:link, .showpage a:link{text-decoration:none; color:#333}
/* -- AKHIR HALAMAN NAVIGASI DENGAN ANGKA -- */

4. Kemudian tuju bagian paling bawah dan cari kode </body>  kalau sudah ketemu, letakkan kode berikut tepat diatas kode  </body>

<!-- awal navigasi angka u-sup.blogspot.com -->
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=6;
var numshowpage=5;
var upPageWord ='&#9668;';
var downPageWord ='&#9658;';
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 G;5 i;5 b;5 n;1f();x 1g(15){5 6=\'\';H=I(K/2);3(H==K-H){K=H*2+1}J=b-H;3(J<1)J=1;o=I(15/j)+1;3(o-1==15/j)o=o-1;L=J+K-1;3(L>o)L=o;6+="<4 e=\'1y\'>1z "+b+\' 1A \'+o+"</4>";5 16=I(b)-1;3(b>1){3(b==2){3(i=="w"){6+=\'<4 e="1B"><a f="\'+y+\'">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">\'+M+\'</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+16+\');A B">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+16+\');A B">\'+M+\'</a></4>\'}}}1h(5 g=J;g<=L;g++){3(b==g){6+=\'<4 e="1C">\'+g+\'</4>\'}c 3(g==1){3(i=="w"){6+=\'<4 e="k"><a f="\'+y+\'">1</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">1</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+g+\');A B">\'+g+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+g+\');A B">\'+g+\'</a></4>\'}}}5 17=I(b)+1;3(b<o){3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+17+\');A B">\'+1i+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+17+\');A B">\'+1i+\'</a></4>\'}}5 C=u.1D("C");5 18=u.1E("1F-1G");1h(5 p=0;p<C.P;p++){C[p].1j=6}3(C&&C.P>0){6=\'\'}3(18){18.1j=6}}x 1a(Q){5 R=Q.R;5 1k=I(R.1H$1I.$t,10);1g(1k)}x 1f(){5 d=m;3(d.9("/r/s/")!=-1){3(d.9("?S-7")!=-1){n=d.D(d.9("/r/s/")+14,d.9("?S-7"))}c{n=d.D(d.9("/r/s/")+14,d.9("?&7"))}}3(d.9("?q=")==-1&&d.9(".6")==-1){3(d.9("/r/s/")==-1){i="w";3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l("<h T=\\""+y+"U/V/W?7-l=1&X=Y-Z-h&11=1a\\"><\\/h>")}c{i="s";3(d.9("&7-l=")==-1){j=1J}3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l(\'<h T="\'+y+\'U/V/W/-/\'+n+\'?X=Y-Z-h&11=1a&7-l=1" ><\\/h>\')}}}x N(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x O(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W/-/"+n+"?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x 1b(Q){1c=Q.R.1K[0];5 1w=1c.1x.$t.D(0,19)+1c.1x.$t.D(1L,1M);5 1d=1N(1w);3(i=="w"){5 1e="/r?S-7="+1d+"&7-l="+j+"#E="+G}c{5 1e="/r/s/"+n+"?S-7="+1d+"&7-l="+j+"#E="+G}1O.f=1e}',62,113,'|||if|span|var|html|max||indexOf||nomerhal|else|thisUrl|class|href|jj|script|jenis|postperpage|showpageNum|results|urlactivepage|lblname1|maksimal|||search|label||document|newInclude|page|function|home_page|onclick|return|false|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|mulai|numshowpage|akhir|upPageWord|redirectpage|redirectlabel|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>
<!-- akhir navigasi angka u-sup.blogspot.com -->

5. Dan simpan template

6. Sekarang beri randa centang pada expand widget template
-Kemudian cari kode : 'data:label.url'
-dan rubahlah dengan kode : 'data:label.url + &quot;?&amp;max-results=6&quot;'
-kemudian simpan template.

Keterangan tambahan :
  • Jika tidak menemukan kode  'data:label.url' langkah no.6 tidak perlu dilakukan jadi bisa melewati langkah no.06]
  • var postperpage=6; >> angka 6 menunjukkan berapa jumlah posting yang akan ditampilkan dalam setiap halamannya silahkan sesuaikan selera
  • var numshowpage=5; >> angka 5 menunjukkan berapa jumlah tombol navigasi yang akan tampil, silahkan sesuaikan selera
Cukup sampai disini tutorial membuat halaman navigasi dengan angka sudah selesai, jika ada kusulitan atau hal lainnya silahkan tuliskan komentar.

2011-08-20

Semakin ramainya pengguna twitter di seluruh penjuru dunia membuat mereka para webmaster berinovasi dan mengekspresikan kemampuan mereka dibidang bahasa pemograman dengan membuat berbagai macam widget blog atau fitur-fitur blog agar dapat ditampilkan di blog atau website dengan harapan dapat menarik pengunjung. salah satunya dengan widget twitter terbang (flying bird), widget twitter ini akan mengikuti layar dimanapun layar monitor, ketika halaman blog di scroll kebawah maka burung lucu yang membawa akun twitter kamu. seperti kita ketahui mencari follower / pengikut twitter lebih sulit ketimbang facebook karena di twitter orang yang kita follow belum tentu memfollow kita balik, sangat berbeda jika di facebook orang yang kita follow secara otomatis dia juga memfollow kita.
Nah dengan twitter terbang yang lucu kesana-kemari ini mungkin dapat membantu kita untuk mencari pengikut twitter, dibawah ini kode untuk widget twitter terbang dengan 5 jenis pilihan warna jadi kita bisa menyesuaikan dengan warna blog ataupun selera warna kita. sebelumnya difollow dung twitter saya hehe.... http://twitter.com/usupnew

1. Silahkan masuk ke akun blogger
2. Klik Rancangan >> Edit HTML
3. Kemudian letakkan kode berikut ini tepat diatas  </head>   (gunakan CTRL+F untuk mempermudah pencarian)
 <!--- AWAL KODE TWITTER --->
<script type="text/javascript" src="http://u-sup.googlecode.com/files/twitterbang.js"></script>
<script type="text/javascript">
var birdSprite="http://3.bp.blogspot.com/-9cH3-UmUwQE/Tk_YNBtBFjI/AAAAAAAABVA/N9STrmj3L-s/s1600/u-sup-birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/IDTwitterKamu";var tweetThisText = "Twitter - IDTwitterKamu http://www.url-kamu.blogspot.com/";tripleflapInit();</script>
<!--- AKHIR KODE TWITTER --->
  • Gantilah teks hijau dengan ID twitter kamu 
  • Gantilah teks Kuning dengan url blog kamu yang dipasang widget ini
 Contoh untuk kode punya saya :
<script src='http://u-sup.googlecode.com/files/twitterbang.js' type='text/javascript'/>
<script type='text/javascript'>
var birdSprite=&quot;http://3.bp.blogspot.com/-9cH3-UmUwQE/Tk_YNBtBFjI/AAAAAAAABVA/N9STrmj3L-s/s1600/u-sup-birdsprite.png&quot;; var targetElems=new Array(&quot;img&quot;,&quot;hr&quot;,&quot;table&quot;,&quot;td&quot;,&quot;div&quot;,&quot;input&quot;,&quot;textarea&quot;,&quot;button&quot;,&quot;select&quot;,&quot;ul&quot;,&quot;ol&quot;,&quot;li&quot;,&quot;h1&quot;,&quot;h2&quot;,&quot;h3&quot;,&quot;h4&quot;,&quot;p&quot;,&quot;code&quot;,&quot;object&quot;,&quot;a&quot;,&quot;b&quot;,&quot;strong&quot;,&quot;span&quot;); var twitterAccount = &quot;http://twitter.com/usupnew&quot;;var tweetThisText = &quot;Twitter &#8211; usupnew http://u-sup.blogspot.com/&quot;;tripleflapInit();
</script> 
5.  Kemudian simpan template dilihat dulu hasilnya.

13 Pilihan warna untuk  twitter terbang
Gantilah URL/teks warna merah diatas dengan memilih salah satu URL dibawah ini kemudian simpan.

- Warna Standar (biru muda)
 http://3.bp.blogspot.com/-9cH3-UmUwQE/Tk_YNBtBFjI/AAAAAAAABVA/N9STrmj3L-s/s1600/u-sup-birdsprite.png
- Warna Pelangi :
http://1.bp.blogspot.com/-aMeTsotQmFM/Tk_WgXoEFpI/AAAAAAAABU8/IKfvftm4p_c/s1600/u-sup-pelangi.png 
- Warna Biru tua : 
  http://3.bp.blogspot.com/-o4UXTtWbEuw/Tk_YgP35YxI/AAAAAAAABVI/WCed-hTu0y4/s1600/u-sup-Blue.png
- Warna Merah :
http://1.bp.blogspot.com/-Ubs0elhrJ7U/Tk_czfvGnvI/AAAAAAAABVw/iHjtJdJihBM/s320/u-sup-red.png
- Warna Ungu : 
  http://2.bp.blogspot.com/-C4X-nvtYNps/Tk_ZKw2zjmI/AAAAAAAABVc/PpxEMcuFaME/s1600/u-sup-ungu.png
- Warna Purple :
http://3.bp.blogspot.com/-cIaTsAHYvjY/Tk_Y4Wr9u5I/AAAAAAAABVU/dZjhT3GkJvQ/s1600/u-sup-purple.png 
- Warna hitam :
http://4.bp.blogspot.com/--VVn07xwLx4/Tk_YZWjS2QI/AAAAAAAABVE/NKWXizpAViA/s1600/u-sup-black.png 
- Warna hijau :
http://3.bp.blogspot.com/-myDjb4qRehM/Tk_YvYIEPRI/AAAAAAAABVQ/dn6zuYjgwVU/s1600/u-sup-Green.png 
- Warna Kuning :
  http://1.bp.blogspot.com/-PKS3MOEheU8/Tk_Z5z8C0UI/AAAAAAAABVo/2NfvEq1n_YI/s1600/u-sup-yellow.png   
- Warna Putih :
http://4.bp.blogspot.com/-fgg0FOOKIXU/Tk_Zy8PpQUI/AAAAAAAABVk/L0TL5BXtcoQ/s1600/u-sup-white.png
- Warna Transparan :
http://2.bp.blogspot.com/-aOtYtgcHXT8/Tk_ZAhPZ3YI/AAAAAAAABVY/phAI1idc7Co/s1600/u-sup-transparan.png 
- Warna Cokelat :
http://4.bp.blogspot.com/-ew1ys1HCFcM/Tk_YnpD4ZtI/AAAAAAAABVM/wpKqoCMUJqg/s1600/u-sup-brown.png 
- 2 Warna Ungu - Oren
http://2.bp.blogspot.com/-rBz_gBwRM0s/Tk_fmfOs0QI/AAAAAAAABV0/jNwG_ZAXaTI/s1600/u-sup-ungu-orange.png
Semoga mudah dipahami....!!!

2011-06-24

Membuat menu breadcrum b, menu broadcumb yaitu menu yang sama dengan menu navigasi horizontal yang biasanya dibawah header atau diatas header, trus bedanya apa? nah bedanya dari menu breadcrumb ini terletak dipaling atas blog mirip seperti toolbar dan lebarnya selalu memenuhi lebar layar komputer , menu ini dapat kita gunakan untuk menempatkan link-link halaman atau blog kita yang lain, contohnya dibawah ini :


Untuk membuatnya cukup mudah hanya menambahkan sedikit CSS dan javascript dibawah ini :

1. Pertama silahkan Login ke blogger
2. Masuk ke Rancangan >> Edit HTML
3. Letakkan kode berikut ini diatas ]]></b:skin> (gunakan CTRL+F untuk mempermudah pencarian)
/* ---- Breadcrumb Menu source 1st by u-sup.blogspot.com ----*/
.usup-breadcrumb {
position:relative;
height:30px;
width:100%; }

.usup-breadcrumb ul {
position:relative;
margin:0 5px 0 5px;
padding:0;
height:30px;
background:url ('http://2.bp.blogspot.com/-3NPO5mKoPE4/TbH2Qw7bvXI/AAAAAAAAAfE/5dJ5f9Rmvpg/s320/breadcrumbImage.png') 0px -30px repeat-x; }

.usup-breadcrumb ul li {
padding:0; margin:0;
list-style:none;
float:left;
height:30px
display:inline;}

.usup-breadcrumb ul li a {
font:12px Arial, Helvetica, sans-serif; color:rgb(255,255,255);
text-decoration:none;
line-height:30px;
display:block;
background:url ('http://2.bp.blogspot.com/-3NPO5mKoPE4/TbH2Qw7bvXI/AAAAAAAAAfE/5dJ5f9Rmvpg/s320/breadcrumbImage.png') 100% -60px no-repeat;
padding:0 17px 0 15px; }

.usup-breadcrumb ul li a:hover {text-decoration:underline; color:rbg(255,255,255);}
.usup-breadcrumb ul li a.active{background:none; color:rgb(255,255,255);}
.usup-breadcrumb ul li a.active:hover {text-decoration:none;}

.usup-breadcrumb .left {
position:absolute; top:0px; left:0px; width:10px; height:30px; display:block; z-index:1;
background:url ('http://2.bp.blogspot.com/-3NPO5mKoPE4/TbH2Qw7bvXI/AAAAAAAAAfE/5dJ5f9Rmvpg/s320/breadcrumbImage.png') 0% 0px no-repeat;}

.usup-breadcrumb .right {
position:absolute; top:0px; right:0px; width:10px; height:30px; display:block; z-index:1;
background:url ('http://2.bp.blogspot.com/-3NPO5mKoPE4/TbH2Qw7bvXI/AAAAAAAAAfE/5dJ5f9Rmvpg/s320/breadcrumbImage.png') 100% -90px no-repeat; }
4. Selanjutnya, letakkan kode berikut tepat dibawah kode  <body> 
<div class='usup-breadcrumb'>
<span class='left'/>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://www.blogger.com/'>My Profil</a></li>
<li><a href='http://facebook.com/usupdotnet'>My Facebook</a></li>
<li><a href='http://twitter.com/usupnew'>My Twitter</a></li>
<li><a href='http://zonablogger.com/'>Zona Blogger</a></li>
<li><a href='http://article.azuli.org/'>My Article</a></li>
<li><a href='http://templatemaxs.com/'>Templatemaxs</a></li>
</ul>
<span class='right'/>
</div> 
5. Simpan pekerjaan kamu, dan kamu sudah selesai

Comment:

  • Ubahlah teks warna hijau dengan link yang kamu punya
  • Kamu dapat menyesuaikan warna dari menu breadcrumb tersebut dengan blog kamu, caranya silahkan simpan gambar diatas ini kemudian edit dengan aplikasi photoshop atau yang lainnya, dan uploadlah gambar tersebut mengenai bagaimana cara upload gambar di blogger bisa baca Disini .
  • Jika gambar sudah diupload rubahlah URL gambar (yang berwarna merah) tersebut dengan URL gambar kamu

2011-06-12

Rasanya kurang menarik jika sebuah posting / artikel yang anda buat tak ada gambar ataupun foto yang menggambarkan dari artikel tsersebut, supaya artikel yang kita posting lebih nampak hidup dan tentunya lebih menarik perhatian pembaca blog sebaiknya postingan artikel anda disisipkan sebuah gambar atau foto yang berhubungan atau menggambarkan dari inti posting tersebut.
Apakah kita harus selalu mengupload gambar di blogger agar sebuah gambar atau foto bisa tampil dalam postingan kita? jawabannya tidak. kita tidak harus mengupload gambar diblogger untuk ditampilkan dipostingan kita misalnya di photobucket.com, tinypic.com dll. namun pada postingan ini saya akan jelaskan tentang mengupload gambar di blogger untuk disisipkan pada artikel yang akan kita posting.

1. Masuk ke dasboard blogger 
2. Buatlah sebuah posting (Entri baru)
3. Jika sudah pada form editor klik "Compose"




4. Klik ikon kecil kotak (lihat gambar dibawah ini)


5. Dan akan muncul jendela baru Klik tombol "Pilih File" dan silahkan pilih gambar atau foto dari komputer yang akan diupload, gambar bisa diupload secara bersamaan sekaligus. tunggu sampai gambar atau foto muncul seperti dibawah ini.


6. Jika sudah manteb dengan gambar yang mau diupload klik "Add selected"
Seperti itulah kurang lebihnya upload gambar di blogger cukup mudah bukan? kamu bisa menambahkan gambar atau foto kamu yang ganteng dan cantik lebih banyak lagi.





Mengatur posisi dan besar kecil gambar :
Klik pada gambar yang telah terupload dan akan muncul sebuah kotak kecil untuk mengatur ukuran dan posisi gambar pada posting.
Lihat gambar dibawah ini :

pada bagian yang saya tandai dengan kotak merah itu untuk mengatur besar/kecil juga posisi gambar.

Jika ingin mengambil Kode gambar atau URL gambar, cara ini digunakan bila ingin menampilkan gambar  di blog lain atau disedebar, klik pada tab Edit HTML maka akan terlihat kode dan URL dari gambar tersebut


Kode lengkap gambar :
<a href="http://1.bp.blogspot.com/-JNVzmv4LHRc/ThcR54BeRDI/AAAAAAAABRM/yQ-wuoUDuJU/s1600/upload+gambar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-JNVzmv4LHRc/ThcR54BeRDI/AAAAAAAABRM/yQ-wuoUDuJU/s1600/upload+gambar.png" /></a>
Kode URL gambar saja :
 http://1.bp.blogspot.com/-JNVzmv4LHRc/ThcR54BeRDI/AAAAAAAABRM/yQ-wuoUDuJU/s1600/upload+gambar.png
Keterangan :
  • Upload : Upload foto atau gambar dari drive komputer anda sendiri
  • From this blog : Upload gambar atau foto dari blog andasendiri yang pernah anda upload sebelumnya, jadi tidak perlu mengupload dari awal.
  • From Picasa Web Albums : upload gambar atau foto dari situs Album Picasa
  • From a URL : Upload gambar dari situs lain, jadi kamu tinggal menyantumkan URL gambar yang dimaksud misalnya kamu mengupload gambar dari photobucket.com
  • Semua gambar atau foto yang kamu upload diblogger dapat kamu lihat di Album Web Picasa, karena Album picasa merupakan salah satu produk google, kamu tinggal login dengan akun google kamu, disitu kamu dapat mengedit gambar atau menghapus gambar yang pernah diupload.
Seperti itulah kurang lebihnya mengenai cara  upload gambar di blogspot

tag : cara unggah gambar ke blog, upload gambar ke blogspot, cara upload gambar ke blogger, upload gambar di posting blog.

2011-05-22

Jika kemarin saya posting tentang cara pasang artikel berhubungan/terkait biasa artinya hanya teks judul saja yang tampil, tetapi sekarang saya posting tentang cara pasang artikel berhubungan dengan gambar dan judulnya, dengan artikel berhubungan beserta gambar akan semakin mempercantik tampilan blog anda pada bagian halaman single postnya. Nah artikel berhubungan dengan gambar ini akan mengambil judul posting dan gambar pertama dari postingan tersebut dengan menampilkan artikel yang terkait mengambil dari sebuah kategori-kategori yang sama dari artikel yang sedang ditampilkan.
Jika blog sudah memiliki artikel berhubungan versi biasa atau tanpa gambar, sebaiknya hapus dulu agar lebih rapi! kamu bisa menghapus melalui tertarik membuatnya? silahkan ikuti caranya dibawah ini:

1. Masuk ke akun blogger kamu
2. Klik Template ---> Edit HTML
3. Beri tanda check  pada  ""
4. Cari kode </head> "untuk mempermudah pencarian tekan Ctrl+F"
5. Jika sudah ketemu letakkan kode berikut tepat diatasnya "langkah 4"
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://u-sup.googlecode.com/files/artikelberhubungandengangambar.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6. Cari kode <div class='post-footer-line post-footer-line-1'>
-Jika tidak ketemu cari <p class='post-footer-line post-footer-line-1'>
-Atau jika tidak ketemu lagi cari saja <data:post.body/> (jika anda sudah memakai readmore ada dua kode <data:post.body/> jadi letakkan setelah kode yang kedua)

7. Jika sudah letakkan kode berikut tepat dibawah kode tersebut "langkah 6"
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

8. Sekarang simpan template kamu
9. selesai lihat hasilnya!


Keterangan :
var maxresults=5 rubahlah angka 5 untuk menentukan jumlah artikel yang akan ditampilkan
- var relatedpoststitle="Related Posts" anda bisa merubah dengan sesukamu misalnya : "Artikel yang terkait" dll
- Kamu juga bisa merubah tampilannya dengan mengedit / memodifikasi kode CSSnya kode CSS terletak pada "langkah 5"

2011-05-21

Membuat artikel berhubungan (related posts) dibawah ini sangat mudah, anda tinggal salin dan tempel kode dibawah kedalam sumber HTML blog anda maka artikel berhubungan pada setiap posting blog anda akan muncul, artikel berhubungan mengambil judul artikel yang berhubungan atau memanggil artikel tersebut berdasarkan kategori-kategori yang dimasukkan dalam posting itu sendiri jadi artikel berhubungan yang tampil masih ada sangkut pautnya dengan artikel yang sedang dibaca. nah untuk menampilkan kedalam blog anda bisa menggunakan kode dibawah ini atau kamu lebih suka dengan artikel berhubungan dengan gambar bisa masuk Kesini :

1. Login ke blogger
2. Klik Rancangan
3. Edit HTML
4. Beri tanda check pada
5. Cari kode <data:post.body/> 
6. Dan letakkan kode berikut tepat dibawah kode tersebut "langkah 5"! (jika anda sudah menggunakan fitur readmore ada 2 kode <data:post.body/> jadi letakkan setelah kode yang kedua)
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
Artikel lain yang mungkin ingin anda baca!
<div class='similiar'>
<div class='widget-content'>
<div id='data2007'/><br/><br/>
<ol>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 2;
var maxNumberOfLabels = 11;
maxNumberOfPostsPerLabel = 11;
maxNumberOfLabels = 1;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</ol>
</div>
</div>

</b:if>
    7. Simpan template anda dan lihat hasilnya

    Keterangan :
    - Rubahlah teks berwarna hijau dengan sesukamu
    - Rubahlah angka seperti dibawah ini dengan angka sesukamu, ini yang akan menentukan berapa banyak artiikel berhubungan yang akan ditampilkan
    var maxNumberOfLabels = 11
    maxNumberOfPostsPerLabel = 11


    Selamat mencoba!!!

    2011-04-03

    Efek hujan salju di blog, mungkin sudah bisa membayangkan seperti apa hujan salju, tidak jauh berbeda dari aslinya efek dari hujan salju ini karena memiliki tingkah laku yang hampir persis hujan salju beneran "walaupun belum pernah liat hujan salju yang beneran sih cuma liat di tipi aja". jadi jika anda memasang efek hujan salju ini blog anda akan ada butiran-butiran putih melayang berjatuhan secara bergantian layaknya hujan salju, tetapi efek ini menarik diterapkan pada blog yang memiliki latar belakang selain putih, karena warna daipada efek salju ini berwarna putih jika latar blog anda putih tidak keliatan "percuma dong jadinya". Tampilan yang menarik bisa dilihat pada tampilan blog yang memiliki latar Biru muda, Hijau muda ataupun warna yang muda selain putih!

    Lihat Demo

    Cara membuat efek tersebut :
    1. Masuk ke Blogger
    2. Klik Tanda anak panah
    3. Klik Template
    4. Klik Edit HTML >> Proceed (Lanjutkan)
    5. Salin dan tempel kode berikut diatas </head>
    6. Klw sudah simpan dan lihat hasilnya.
    Silahkan lihat hasilnya akan tetapi sedikit menambah beban blog, menarik atau tidak tergantung anda yang menilai, jika merasa kurang menarik anda bisa menghilangkan efek salju tersebut dengan menghapus kode yang telah terpasang.
    Seperti itulah tutorial sederhana Cara Pasang Hujan Salju di blog.
    Saya pernah memposting artikel tentang cara membuat teks berjalan yang bisa diterapkan pada bagian blog mana saja bisa postingan, sidebar ataupun elemen halaman yang lain, tetapi kali ini saya posting tentang bagaimana membuat teks berjalan pada Tab browser...? Teks berjalan pada tab browser ini membuat afek teks pada bagian tab browser anda berjalan, artinya jika ada yang membuka blog anda akan terdapat sebuah teks berjalan pada tab browsernya,.

    Dari pada penasaran sebaiknya praktekkan saja langsung pada blog anda karena sangat simpel sekali untuk memuat efek teks berjalan pada tab browser ini atau bisa melihat demonya secara langsung:

    Cara membuatnya :
    1. Login ke blogger
    2. Klik Rancangan
    3. Klik Edit HTML
    4. Kemudian letakkan kode berikut tepat dibawah kode <head>  
       <script type='text/javascript'>
      //<![CDATA[
      msg = "Text berjalan 2";
      msg = "Text berjalan 1" + msg;pos = 0;
      function scrollMSG() {
      document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
      if (pos > msg.length) pos = 0
      window.setTimeout("scrollMSG()",200);
      }
      scrollMSG();
      //]]>
      </script>
    5. Dan simpan pekerjaan anda sob!
    6. Sekarang lihat hasilnya
    Keterangan :
    -Rubahlah teks berwarna merah dengan teks yang anda kehendaki!
    -Angka 200 bisa anda rubah untuk mengatur kecepatan, semakin rendah nilainya maka akan semakin cepat!

    Sekarang anda telah berhasil membuat teks berjalan pada tab browser untuk blog anda, cukup mudah bukan?

      2011-02-22

      Lama gak upade diblog ini, bukan karena males tapi kesibukan dilingkungan membuat lupa sebagai seorang netter yang berkiprah di dunia blog! postingan ini akan membahas bagaimana cara membuat navigasi halaman menggunakan angka berbeda dengan navigasi bawa'an/default dari template blogger original yang hanya menampilkan sebuah link Older post dan Newer post tetapi secara fungsi sama saja, perbedaannya terletak pada angka-angka tersebut dengan demikian pengunjung akan merasa nyaman dan selain itu blog juga akan terlihat lebih rapih...karena jumlah posting yang akan kita tampilkan dalam tiap perhalaman bisa kita ubah suaikan dengan keinginan kita.


      Caranyapun cukup mudah karena saya sudah upload JavaScripnya khusus buat anda jadi tidak perlu pusing-pusing ngelihat JavaScript yang ngejelimet karena tinggal copy paste gitu...hehe... saya yakin anda pasti bisa menerapkannya. untuk contohnya lihat gambar diatas atau pada blog ini dibagian bawah posting itu ada angka-angka dalam beberapa tombol kotak! itulah yang saya maksud dengan Navigasi halaman dengan angka!

      1. Login ke blogger anda!
      2. Masuk ke Dasboard>>Rancangan>> Edit HTML (tidak perlu memberikan klik pada Expand template widget)
      3. Cari kode  ]]></b:skin> Kemudian Copy dan paste kode CSS berikut tepat diatas kode  ]]></b:skin>
       /* -- NUMBER PAGE NAVIGATION -- */
      .showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
      .showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
      .showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
      .showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
      .showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}
      4. Cari kode </body> kemudian Copy dan paste kode dibawah ini tepat diatas kode </body>
       <!-- PAGE NAVIGATION START-->
      <script type='text/javascript'>
      var pageCount=4;
      var displayPageNum=4;
      var upPageWord =&#39;&#171; &#39;;
      var downPageWord =&#39; &#187;&#39;;
      </script>
      <script src='http://u-sup.googlecode.com/files/page_num.js' type='text/javascript'/>
       <!-- PAGE NAVIGATION END-->
      5. Sekarang cari 'data:label.url'
      6. Dan ganti kode langkah 5 dengan ini 'data:label.url + &quot;?&amp;max-results=7&quot;'
      7. Klik SIMPAN TEMPLATE silahkan lihat hasilnya!

      Catatan :
      Perhatikan pada kode yang dicetak hijau itu dapat anda sesuaikan dengan keingin anda kode tersebutlah yang menentukan berapa jumlah posting yang akan ditampilkan pada setiap halamannya, contoh saya akan menampilkan 10 Posting  dan 5 tombol angka navigasi berarti kode saya sebagai berikut :
      var pageCount=10;
      var displayPageNum=5;
      Dan untuk merubah Tampilan silahkan rubah kode CSSnya sesuai dengan selera anda, jika merasa tampilannya kurang cantik menurut anda!

      Selamat mencoba, dan semoga berhasil membuat halaman navigasi dengan angka!!