Tips dan Trik Memasang Widget di sudut blog

18 Maret 2009 at 3:13 pm | In Tips dan Trik, blogger hack, widget | Leave a Comment

Setelah meminta izin ke yang empunya posting, kembali Kojek menulis tentang sebuah ide sederhana untuk mempercatik tampilan blog. Adapun trik kali ini adalah bagaimana caranya kita memasang sebuah widget/aksesoris,image atau banner ke salah satu sudut blog seolah olah widget/aksesoris,image atau banner itu tadi seakan-akan melayang-layang di blog kita. Bukan cuma satu sudut saja yg bisa kita hias dengan trik ini, keempat sudut blog bisa kita pasangi berbagai gadget atau widge/aksesoris. Namun pertimbangkanlah dari segi estetika (ceaellah … ). Jangan malah membuat pengunjung bingung dan yang pasti perhatikan loading pagenya. Jadi Inga’ .. Inga’ ….

Untuk demonya, klik disini

A. WIDGET/ AKSESORIS DI SUDUT KIRI BAWAH

1. Login dulu ke blogger lalu klik “Layout –>> Edit HTML

2. Cari kode ]]></b:skin> kemudian tempatkan kode di bawah ini di atas kode ]]></b:skin>

#trik_kiribawah {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

Kode yang berwarna biru adalah nama dari script ini, kode bottom yang berwarna kuning bisa di ganti dengan top kemudian kode left yang berwarna hijau bisa di ganti dengan right

4. Langkah selanjutnya yaitu letakkan script berikut ini sebelum kode </body>

<div id=’trik_kiribawah‘>
<script src=’http://widgets.amung.us/classic.js’ type=’text/javascript’/><script type=’text/javascript’>WAU_classic('hu1vhdkrz2pe')</script><br/>
<a href=’ymsgr:sendIM?entobet’> <img src=’http://opi.yahoo.com/online?u=entobet&amp;m=g&amp;t=9&amp;l=us’/></a>
</div>

5. Kode yang berwarna biru adalah kode widget yang bisa diganti dengan widget lain sesuai selera.

6. klik save lalu view blog untuk melihat hasilnya.

B. WIDGET/ AKSESORIS DI SUDUT KANAN BAWAH

Nah, sekarang kita akan memasang widget/aksesoris lain ke sudut kanan blog kita. Langkah pemasangannya sama dengan langkah langkah di atas. Hanya perlu mengedit beberapa kode saja. Agar lebih jelas saya uraikan aja di sini akal-akalan kita …

Perhatikan baik baik perubahan 2 buah script/kode di bawah ini :

a. Kode Pertama :

#trik_kananbawah {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

a. Kode Ke dua :

<div id=’trik_kananbawah‘>
<script src=’http://widgets.amung.us/classic.js’ type=’text/javascript’/><script type=’text/javascript’>WAU_classic('hu1vhdkrz2pe')</script><br/>
<a href=’ymsgr:sendIM?entobet’> <img src=’http://opi.yahoo.com/online?u=entobet&amp;m=g&amp;t=9&amp;l=us’/></a>
</div>

Pada kode pertama perubahannya bisa di lihat seperti di bawah ini :

kode #trik_kiribawah { berubah menjadi #trik_kananbawah {

lalu left berubah menjadi right

Pada kode ke dua, nama kodenya yang kita rubah yaitu

<div id=’trik_kiribawah‘>


menjadi

<div id=’trik_kananbawah‘>

Jangan lupa menggati kode yang berada di antara kode <div id=’trik_kananbawah‘> dan kode </div> dengan kode widget/aksesoris yang lain.

Anda juga tinggal mengedit sedikit saja kode-kode tersebut bila ide Anda sama nyelenehnya denganku yaitu “MEMASANG WIDGET/AKSESORIS DI KEEMPAT SUDUT BLOG”. Ada yang mau nyoba …????

Catatan : Terima Kasih untuk KENDHIN yang telah memberi izin untuk mencatut scriptnya.

Back to Top


Subscribe with Bloglines

Membuat blog untuk profil (2)

10 Februari 2009 at 1:05 pm | In Blogging, Tips dan Trik | Leave a Comment

etap dengan maksud yang sama, yaitu bikin blog untuk profile seperti postingan terdahulu. Kali ini kita memanfaatkan Layout generator yang disediakan masih oleh www.pimp-my-profile.com. Kita bisa mengutak atik bakcground, warna huruf dan sebagainya dengan generator yang satu ini. Youk Praktek …

Meluncurlah ke http://www.pimp-my-profile.com/ maka kamu akan melihat tampilan berikut ini :

Lalu klik Layouts seperti tampak pada gambar berikut :

Lalu kita di bawa ke tampilan berikut :

Pada Tab Layout Editor, klik Blogger Editor seperti tampak bada gambar berikut :

Nah, sampailah kita pada ruang Blogger Template Generator

klik tombol start. Tapilannya akan jadi kayak gini nih :

Keterangan :

Masukkan url gambarmu dalam kotak Image URL (dalam contoh, aku pasang url http://www.halloween.co.uk/images/wallpapers/skull1024×768.jpg)

Tentukan Letak gambar pada kotak Position (dlam contoh aku memilih center, dengan menconteng bulatan yang paling tengah)

Atur apakah background tersebut kita buat Fixed atau repeat pada kotak Repeat (dalam contoh aku memilih none, artinya gambarnya tetap di tempat bila kita menggerakkan mouse)

Selanjutnya, klik tab next yang berwarna merah atau tab table untuk pengaturan selanjutnya. atur sesuai seleramu

bila telah selesai, klik lagi next atau tab text/heading untuk mengatur ukuran, jenis dan warna huruf. Klik Preview My Layout untuk melihat tampilan sementara.

Kalu sudah pas, klik lagi tombol next atau tab Scrollbar, atur sesuai seleramu. Lihat hasil sementara pekerjaanmu dengan mengklik tombol Klik Preview My Layout

Selanjutnya, klik lagi tombol next atau tab Graphic untuk mengatur background Header. Masukkan URL gambarmu ke dalam kotak Header Image URL dan tentukan lebar serta tinggi header pada kotak Width dan
Height Namun jika sobat merasa tidak perlu memasang image pada header, abaikan saja bagian ini.

Klik tobol Finish.

Klik tombol Klik Preview My Layout untuk melihat hasil tampilan sementara. bila di rasa kurang atau masih perlu diadakan perubahan-perubahan, sobat tinggal kembali ke tab-tab sebelumnya untuk melakukan pengaturan.

Kalau semua sudah beres dan pas alias OK, klik tombol Generate my code. Lihat hasilya seperti tampak pada gambar berikut :

Nah, kodenya udah jadi tuch. Tinggal sobat copy dan pastekan ke ruang edit HTML blogmu, atau bisa di simpan dalam format txt terlebih dahulu.

Nasi Bungkus :

Agar tata letak yang sudah sobat buat tetap seperti tata letak atau layout terakhir yang telah di buat, simpan dulu layoutnya. Tapi sebelumnya sobat harus Register terlebih dahulu alias buat accout di www.pimp-my-profile.com. Saya yakin, untuk register pasti bloggers semua udah pada bisa.

Oh iya, selain untuk blogspot, di situs ini kita juga bisa mendownload atau membuat layout untuk Friendster, Myspace, hi5 dan sebagainya. Silahkan coba deh satu persatu.

Ok, selamat berkarya …

kembali ke atas

var authorId = "0C17D2F8-035F-4FF4-BDEE-6A2446DBE565";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";

Membuat Blog Untuk Profile

30 Januari 2009 at 2:58 pm | In Blogging, Tips dan Trik | Leave a Comment

Untuk membuat blog profil, maksudku untuk membuat profile bisa kita terapkan dengan langsung membuat postingan seperti biasanya kemudian beri judul “About me” misalnya. Tergantung selera dan gaya masing-masing blogger. Begitu selesai mempercantik “About Me” tadi, publish postingan tersebut, klik readmorenya atau klik kanan pada judul postingan lalu open link in a new tab. Tengok di atas browser, di address barmu, kopi linknya untuk kamu pasangkan pada Tab menu blogmu.

Cara lain yang tak kalah asyiknya adalah dengan membuat blog baru. Terserah URL nya nanti mau diksaih nama apa, asal nyerempet-nyerempet dikit dengan Profile atau “About Me” tadi.

Kalo blogmu udah jadi. Buat postingan tentang diri kamu dengan judul Profile atau About me. Publish postinganmu. Lalu kita ganti template blog tadi dengan template dari www.pimp-my-profile.com . Cari Logo blogspot kemudian klik tulisan Blogger Template diatas tulisan tersebut.

Maka Kamu akan di bawa ke tampilan berikut :

Pilih template sesukamu, asal yang asyik dan ngga terlalu meriah (saranku), Setelah kamu ketemu dengan template yang cocok, klik detail & kode yang terletak di bawah gambar template,

maka kamu akan di bawa lagi ke tampilan seperti tampak pada gambar berikut :

Kopi seluruh kode yang ada di dalam kotak yang disediakan untuk kemudian kamu pastekan ke ruang edit htmlmu.

Mudah bukan …

Ok Bloggers, selamat mencoba

kembali ke atas

var authorId = "0C17D2F8-035F-4FF4-BDEE-6A2446DBE565";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";

Mengedit Template

29 Januari 2009 at 12:18 pm | In Blogging, Tips dan Trik, article | Leave a Comment

Mengasyikkan memang, mengutak atik template blog. Baik yang html maupun yang xml. Menggonta-ganti backround, menambah elemen halaman dan sebagainya, sampai hal-hal yang lebih spesifik dan membuat jidat sedikit berkerut.

Kali ini aku cuma hanya bercerita doank, sedangkan untuk praktenya, sobat silahkan langsung meluncur ke link yang aku sediakan.

Template yang aku pakai aku dapatkan ddi sini , dengan sedikit modal kelincahan tangan mencopy paste berbagai kode ke dalam struktur templateku, alhamdulillah akhirnya jadi kayak gini. Gak bagus-bagus amat. Tapi Aku puas. Contoh blog bisa sobat lihat di sini. dan template blog yang aku pakai sekarangpun, tak luput dari kejahilanku.

Dimulai dengan menabah 3 kolom di bawah posting yang ilmunya aku dapet dari sini, lalu 3 kolom footer dari sini, terus 2 kolom di atas posting yang aku pelajari di sini

Klik salah satu label di blogku, maka akan muncul judul postingannya saja. trus di bawah barisan label, terdapat menu baru “Show all post”, jurusnya kupelajari di sini dan di sini. Sementara untuk social bookmark yang terpasang di setiap posting ku pelajari di sini.

Silahkan sobat mencobanya. Saranku selalu sama. Jangan lupa membackup template, atau buat blog baru saja sebagai tempat untuk praktek. Ok Bloggers, selamat berexperiment …

kembali ke atas

var authorId = "0C17D2F8-035F-4FF4-BDEE-6A2446DBE565";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";

Tabbed Feed Reader V2 dari VisionJinx.net

30 Desember 2008 at 7:21 am | In Tips dan Trik, widget | Leave a Comment

Untuk menampilkan feeds di tempat yang sempit dalam jumlah banyak dapat kita akali dengan memanfaatkan Tabbed Feed Reader V2 dari VisionJinx.net . 5 buah feed dapat kita tampilkan sekaligus dalam satu tab, dan beberapa tab bisa kita pasang di tempat yang berbeda di blog kita. Kemudahan setting dan pengaturan ukuran tab yang fleksibel membuat gadget satu ini layak anda coba.

1. Meluncurlah ke http://www.visionjinx.net/
2. Pilih Tabbed Feed Reader
3. Klik Get This Gadget
4. Pilih Add This Your Websites, maka kamu akan dibawa ke tampilan berikut :

Pengaturan Tampilan :

Judul : ganti dengan judul atau nama sesuai keinginanmu
Lebar : tentukan sesuai lebar sidebarmu
Tinggi : tentukan pula sesuai keinginanmu
Batas Tepi : pilih pula sesukamu

Pengaturan Gadget :

Gadget Name : Ganti pula ( misalnya ) dengan nama blogmu.

Ngga semua feed harus kamu isi, kamu bisa menampilkan satu aja. atau biar lebih sip bisa kita pasang alamt feeds posting, alamat feeds label dan alamt feeds komentar.

Alamat feed posting kita

http://blogkamu.blogspot.com/feeds/posts/default

alamat feeds labels

http://blogkamu.blogspot.com/feeds/posts/default/-/labelname
perhatikan besar kecilnya huruf pada label

alamat feed komentar
http://BlogKamu.blogspot.com/feeds/comments/default

(ganti tulisan berwarna biru dengan nama blogmu)

Masukkan pada kotak Feed 1, Feed 2, Feed 3 dan seterusnya.

Sesuaikan nama feed pada kotak Tab 1 Name dan seterusnya.

Untuk mengatur jumlah feed yang akan kita tampilkan, tinggal tentukan saja jumlahnya pada kotak Number of Entries:

Panjang deskripsi yang bakal ditampilkan bisa di atur pada kotak Summary Length:

Untuk mengatur link tampil di jendela yang sama atau di jendela baru bisa kamu atur pada kotak Link Target

Setelah semuanya siap, klik tombol “Lihat DuluPerubahan” dan untuk mendapatkan kode yang akan

var authorId = "0C17D2F8-035F-4FF4-BDEE-6A2446DBE565";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";

Tips dan Trik Membuat Nomor Halaman di blogspot

1 November 2008 at 3:25 pm | In Celoteh, Tips dan Trik | Leave a Comment

Membuat nomor halaman di blogspot.com? kenapa tidak. Tentunya lebih asik dan menarik serta memudahkan pengunjung memjelajah blog kita. Trik Ini saya dapat dari http://rias-techno-wizard.blogspot.com. Dan saya mencoba menterjemahkan dan mempostingnya untuk di praktekkan rekan blogger.

1. Backup templatemu seperti biasa
2. Login ke Blogspot.com
3. Klik Customize
4. Klik Layout
5. Klik Edit HTML
6. Conteng kotak Expand Widget Templates
7. Cari kode seperti ini ]]></b:skin>
8. Lalu Copy kode di bawah ini dan pastekan diatas kode ]]></b:skin>

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

9. Klik Save

10. Lepaskan tanda chek list di kotak Expand Widget Templates

11. Setelah itu, cari kode seperti ini :

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>

12. Tambahkan kode di bawah ini di ujung kode : </b:section>

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';

var labelHtml = '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&amp;max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&amp;max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'&lt;/a&gt;&lt;/span&gt;';
}else{
upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
}
}else{
upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;'+thisNum+'&lt;/u&gt;&lt;/span&gt;';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1&lt;/a&gt;&lt;/span&gt;';
}else{
html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;';
}
}else{
html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +' &lt;/a&gt;&lt;/span&gt;';
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;'+ firstPageWord +' &lt;/a&gt;&lt;/span&gt;'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' &lt;/a&gt;&lt;/span&gt;'+upPageHtml+' '+html +' ';
}
}

html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page '+thisNum+' of '+(postNum-1)+': &lt;/span&gt;'+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
html += '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[htmlMap.length-1]+'&quot;&gt; '+endPageWord+'&lt;/a&gt;&lt;/span&gt;';
}

if(postNum==1) postNum++;
html += '&lt;/div&gt;';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

<div style=’text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;’> <a href=’http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html’>Grab this Widget ~ Blogger Accessories</a></div>

Simpan templatemu.

Bagian yang bisa kamu edit adalah :

1 : var pageCount = 5;
Ini adalah jumlah postingan kamu yang akan tampil dalam satu halaman

2 : var displayPageNum = 3;
Ini adalah jumlah halaman yang akan ditampilkan

Edit sesuai dengan keinginanmu. Selamat Mencoba Bloger

Sumber : http://rias-techno-wizard.blogspot.com/

Bermain-main dengan background ( 2 )

1 November 2008 at 3:24 pm | In Tips dan Trik, background | Leave a Comment


Nah blogger, kali ini gwa mo berbagi tips mengganti background blog dengan kode script dari infoservemedia.com Hasilnya lumayan bagus untuk mempercantik tampilan blog kita. Sederhana namun asik. yang terpenting, blog kita bisa tampil sedikit berbeda dengan blognya rekan-rekan blogger yang lain. Kali ini penerapannya gak melulu dengan template Minima Classic, tapi boleh sobat coba dengan template-template yang lain. Penasaran? lihat dulu di sini, disini atau yang ini.

Ok, kalau kepengen nyoba silahkan ikuti langkah-langkahnya di bawah ini:

1. Meluncurlah ke http://www.infoservemedia.com/

2. Klik Design

3. Klik Web Design Resources


4. Klik Background

5. Pilih kategori yang disediakan


6. Klik Lagi Kategor pada sub galerry


7. Pilih Click Here di bawah image yang kamu senangi


8. Copy kode yang disediakan dalam kotak pilihan Blogger Background Code


9. Copy kode yang disediakan :


Langkah selajutnya, ayo kita pasang ke blog. Setelah kita back up terlebih dahulu template blog kita atau kita siapkan blog baru. Ayo Coy ….

1. Login ke Blogspot.com
2. Klik Customize
3. Klik Add a Gadget
4. Pilih HTML/Javascript
5. Pastekan kode yang tadi kita copy ke ruang Content
6. Save
7. Klik Save yang ada di ruang edit layout
8. Klik View Blog

Lihat dech hasilnya, selamat mencoba …

Bermain-main dengan background ( 1 )

1 November 2008 at 3:20 pm | In Tips dan Trik, background | Leave a Comment

Begini deh jadinya kalo lagi jahil, seneng gonta-ganti background, dari utak-atik langsung ke kode-kode html di ruang edit HTML sampe berburu backgroud gratis dengan bantuan si google. Alkisah …. pada suatu hari, aku nongkrong di thecutestblogontheblock.com . Wuihhh … seneng baget. Ada banyak pilihan Background yang bisa kita pakai. Tinggal pilih sesukamu. Nah, sekarang youk kita iseng-iseng sebentar.

Sebelumnya backup dulu tamplatemu, biar aman kalo terjadi hal-hal yang tak kita inginkan. Malah lebih baik buat blog baru aja. Pake template minima kalasik ya, biar efeknya terasa lebih nyata (ceaellah …). Namanya juga iseng … ok coy !!!

  • Meluncurlah ke http://www.thecutestblogontheblock.com/

  • Klik Backgrounds

  • Cari gambar yg sobat sukai dengan memilih salah satu kategori yg disediakan
  • Pilih image atau gambar yg kamu sukai dgn mengklik gambar pilihanmu
  • Copy barisan kode yang berada di bawah tulisan It’s that easy!



Sekarang youk kita coba menerapkannya ke blog :

  • Login ke Blogspot
  • Klik Customize
  • Klik Add a Gadget
  • Klik HTML/JavaScript
  • Paste-kan hasil copy-an tadi ke ruang Content
  • Klik Save
  • Klik juga Save di ruang edit Layouynya

Nah, lihat hasilnya. Kalo belum berhasil klik sekali lagi Customize, lalu klik View blog ….

Selamat mencoba sobat.

NB : (Nasi Bungkus)

Kode css-nya bisa kita utak atik lagi lho. Tapi ngga gwa anjurkan untuk diterapkan di blogmu, takut dituduh mengajak blogger untuk MELANGGAR HAK CIPTA. Berabe khan ……

Youk …. utak atik …

Perhatikan barisan kode berikut :

<style type=”text/css”>
body {background-image: url(“http://i342.photobucket.com/albums/o401/Thecutestblogontheblock/RedHotByNaturecopy.jpg”); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
</style>
<div id=”tag” style=”position:absolute; left:0px; top:30px; z-index:50; width:150px; height:45px;”>
<a href=”http://www.thecutestblogontheblock.com” target=”_blank”>
<img src=”http://www.thecutestblogontheblock.com/images/tag.jpg” border=”0″/>
</a></div>

Kalo pengen mengganti imagenya dengan image lain, tinggal sobat ganti kode berikui ini dengan (di antara dua tand petik) alamat URL gambarmu :

body {background-image: url(“http://i342.photobucket.com/albums/o401/Thecutestblogontheblock/RedHotByNaturecopy.jpg”);

Bannernya, bisa kamu ganti lho, hapir sama caranya. Perhatikoan kode berikut :

</style>
<div id=”tag” style=”position:absolute; left:0px; top:30px; z-index:50; width:150px; height:45px;”>
<a href=”http://www.thecutestblogontheblock.com” target=”_blank”>
<img src=”http://www.thecutestblogontheblock.com/images/tag.jpg” border=”0″/>

alamat URL pertama, ganti dengan alamat URL Blogmu. Alamat URL yang ke-dua, ganti dengan alamat URL Bannermu.

Tapi jika sobat ingin menghapus bannernya, hapus saja kode di bawah ini :

</style>
<div id=”tag” style=”position:absolute; left:0px; top:30px; z-index:50; width:150px; height:45px;”>
<a href=”http://www.thecutestblogontheblock.com” target=”_blank”>
<img src=”http://www.thecutestblogontheblock.com/images/tag.jpg” border=”0″/>

Ok …. selamat berexperiment Blogger …

Tips dan Trik membuat Read More

1 November 2008 at 2:52 pm | In Tips dan Trik, blogger hack | Leave a Comment

Bikin readmore di blog emang kayaknya wajib nih. Biar tampilan blog jadi rapi. Dan kita bisa nampilkan beberapa postingan untuk kita taruh di halaman depan sekaligus bikin browser gak kelamaan membuka front page atau halaman depan blog kita. Namun, terkadang kita kesulitan saat mau bikin posting dimana kode-kode saling bertabrakan, misanya kode untuk meratakan paragraf atau kode untuk menapilkan huruf gontol-gontokan dengan kode <span class=”fullpost”> dan kode </span>

Nah, berikut aku mau berbagi jurus bikin Readmore yang ngga ngerepotin, Readmorenya bekerja secara otomatis bro. Langsung aja ngetik di ruang posting pada mode compose. Atur warna huruf, tebal, miring atau perataan parangrafnya sesuka hati, tanpa khawatir readmorenya ngga bekerja.

Ok blogger, … youk ngilikin template sebentar …

1. Back up dulu templatemu
2. Login ke blogspot.com
3. Klik Customize
4. Klik Layout
5. Klik Edit HTML
6. Conteng kotak Expand Widget Templates
7. Cari kode seperti di bawah ini :

</head>

Selanjutnya, kopi kode di bawah ini lalu letakkan di bawah kode </head> tadi

<script type=”text/javascript”> var thumbnail_mode = “no-float” ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src=”http://syahenimkojek.googlepages.com/readmore_keren_bro.js” type=”text/javascript”></script>

Selanjutnya, cari kode seperti di bawah ini :

<data:post.body/>

Ganti kode tersebut dengan kode seperti di bawah 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 “<data:post.title/>”</a></span> </b:if> <b:if cond=’data:blog.pageType == &quot;item&quot;’><data:post.body/></b:if>

Klik save. Dan mulailah memposting

Selamat mencoba

Cara memasang buku tamu

1 November 2008 at 2:32 pm | In Tips dan Trik, widget | Leave a Comment


Dalam membangun sebuah blog, tak lengkap rasanya bila kita tidak memasang buku tamu ke blog, di samping untuk mempercantik blog, buku tamu merupakan sarana berinteraksi antar sesama blogger. Kita bisa saling mengunjungi dan bersilaturrahmi. Bisa buka kita melakukan sarana promosi lewat buku tamu tersebut, misalnya kita bisa menitipkan link atau email blog bisnis kita di buku tamu blog lain agar pengunjung lain dapat melihat link yang kita berikan dan berkunjung ke blog kita

Kali ini kita akan mencoba memasang buku tamu dari Shoutmix,com. Udah siap ? let’s go bloggers ….

1. Meluncurlah ke http://www.shoutmix.com/
maka kita akan di bawa ke tampilan seperti di bawah ini :

2. Klik menu Create, lalu kita akan di bawa ke ruang registrasi seperti di bawah ini :

3. Isi keterangan yang diminta

Shoutbox ID: isi misalnya dengan namamu kecilmu misalnya. nama ini nantinya untuk login ke shoutmix

Choose password: isikan passwordmu

Retype password: isikan dengan password yang sama dgn yang kamu isi sebelumnya

Name: isikan kotak ini dengan namamu

Email: isikan dengan alamat emailmu

Centeng/tandai kotak kecil disamping I have read and agree to the Terms of Service.

Klik CONTINUE

Maka kita akan dibawa ke tampilan berikut :

4. Pilih salah satu model tampilan kotak shoutbok dengan menekan/memberi tanda pada bulatan kecil di samping nama style

5. Klik CONTINUE

Kita di bawa ke tampilan berikut :

5. Klik Control Panel
Kita akan di bawa ke ruang seperti gambar berikut :

6. pada sub menu display, klik Style & Colors untuk mengatur warna dan huruf sesuai keinginanmu. Secara default telah tersedia mode warna pada kotak “Load from preset:” Bila semua pengaturan telah selesai, klik “Save Settings”

7. Klik Settings pada menu paling atas, kemudian pada sub menu display, “klik Date & Time” untuk melakukan pengaturan waktu. Pada kota “Timezone:” cari waktu sesuai nama kota tempat tinggalmu. Tentukan format waktu pada kotak “Format:” lalu simpan dengan mengklik “Save Settings”

8. Klik kembali Sttings di menu paling atas, lalu pada sub menu “Quick Start” pilih “Get codes”. maka kita akan di bawa ke tampilan seperti di bawah ini :

Atur tinggi dan lebar pada kotak “Width” dah “Heigt”. Sesuaikan dengan tinggi dan lebar sidebar blogmu.

9. Copy selur kode yang berada di dalam kotak Generated codes. Lalu simpan dalam dokumen TXT. Tapi kamu juga bisa langsung memasangnya ke blogmu.

Sampai di sini, kita telah meyelesaikan tahap pertama dimana kita telah mendapatkan script yang akan kita pasang ke blog. Langkah selanjutnya adalah memasangnya ke blog.
Youk … kita utak-atik lagi…

a. Login ke blogspot
b. klik customize
c. klik layout
d. Klik Add d Gadget
e. pilih HTML/JavaScript
d. Isi kotak “Title” dengan nama sesukamu, misalnya “Buku Tamu”
e. Pastekan kode yang kotak copy dari shoutmix.com tadi ke ruang “Content”
f. Klik save untuk menyimpan
g. atur letak shoutboxmu dengan aksi drag n drop pada ruang edit conten
h. klik save
i. klik view blog untuk melihat perubahan

Selamat bloggers … anda sekarang telah punya buku tamu. Selamat Mencoa …


Halaman Berikutnya »

Blog pada WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.