Home » Posts filed under Blog Tutorial
Tampilkan postingan dengan label Blog Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Blog Tutorial. Tampilkan semua postingan

Cara pasang tombol like/suka di bawah judul post

Tips berikut untuk bagaimana cara memasang Send Button dan Like Button facebook sekaligus hanya dengan menggunakan sedikit kode. tentunya cara ini bukan buatan saya ya!, hehe. saya hanya sedikit mempermudah buat blogger yang baru seperti saya. contohnya bisa sobat lihat bagian kanan atas dari blok ini.

Seperti biasa tentunya sobat harus loging ke akun blogger anda. menuju kemenu Desing >> edit html dan jangan lupa centang (Expand Widget Templates). (lihat gambar)
untuk memasang dibawah judul posting

temukan kode ini 
view plainprint?
  1. <div class='post-header-line-1'/>  

dan tempatkan kode berikut tepat di bawah kode yang sobat temukan diatas
view plainprint?
  1. <div id="fb-root"></div>  
  2. <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>  
  3. <fb:like expr:href='data:post.url' show_faces="true"   
  4. width="450" send="true">  
  5. </fb:like>  
ok anda telah selesai PREVIEW atau SAVE TEMPLATE anda dan lihat hasilnya.
03.22 | 0 komentar | Read More
di 03.22 0 komentar
Label: Blog Tutorial, Widget

Bikin label/kategori jadi 2 kolom atau lebih

Saya disini tidak akan banyak basa-basi bahkan tidak ada, jadi langsung ke pembahasan Cara Membuat Label Blogger Menjadi 2 Kolom :
1. Login ke akun Blogger
2. Klik Rancangan
3. Pada menu Elemen Halaman, klik tambah gadget di sidebar blog.
4. Pilih Widget Label dan pastikan tampilannya pada bentuk Daftar.
5. Kemudian klik Simpan.

Sampai disini, blog Anda sudah memiliki label. Namun tampilannya masih dalam bentuk default (list/ daftar dalam 1 kolom). Sekarang cara membuat label tersebut menjadi 2 kolom kita hanya menggunakan sebuah css, tidak ada script lain.
Pembagian label menjadi 2 kolom dengan menggunakan css adalah sebagai berikut :
1. Login ke akun Blogger, jika sudah login tidak perlu login lagi (karena link sign in tidak ada, yang ada hanya link sign out)
2. Pilih dan klik Rancangan
3. Selanjutnya Klik Edit HTML
4. Backup seluruh kode template ke dalam notepad.
5. Cari kode ]]>, lalu letakan kode berikut di atas kode tersebut

#Label1 li { float:left; width:45%; }

6. Klik Pratinjau dan lihat apakah terjadi perubahan pada widget label blog Anda (menjadi 2 kolom). Jika belum, coba perkecil
nilai width pada kode diatas sampai Anda menemukan nilai yang tepat, sehingga widget label dalam blog Anda menjadi 2 kolom.
7. Jika sudah selesai dan tidak terjadi kesalahan, klik Simpan.

Sekian dan terimakasih.........


06.17 | 0 komentar | Read More
di 06.17 0 komentar
Label: Blog Tutorial, Label, Widget

Cara Agar Tampil Judul Saja Ketika Label Diklik

Ketika kita memilih/klik salah satu label pada suatu blog yang mempunyai banyak postingan, seringkali tampilan homepage menjadi amat panjang ke bawah sehingga cape dehh kalo harus scroll lama-lama hanya untuk mencari artikel yang kita inginkan...

Tapi tenang saja kawan, kali ini saya akan share tentang Cara Menampilkan Judul Postingan Saja Ketika Label Diklik agar tampilan homepage blog anda tak lagi memanjang lagi ke bawah.

Baiklah, ayo kita terapkan sama - sama!
  • Pertama dan paling utama, login ke akun Blogger anda lalu masuk ke bagian Design/Rancangan kemudian pilih tab HTML/Javascript.
  • Beri centeng pada opsi 'Expand Widget Templates' agar kode yg kita cari ada di template anda.
  • Langsung saja cari kode  
<b:include data='post' name='post'/> atau <div class='blog-posts feed'/>
  • Kemudian Timpa/ganti salah satu kode yg ditemukan seperti diatas dengan kode berikut: 
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0B3861;color:#F5F6CE;'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Penempatan kode HTML
Keterangan :
Teks/amgka yang berwarna merah adalah kode warna untuk background label, sementara teks yang berwarna biru adalah warna teks pada label. Klik di sini untuk mengetahui lebih banyak warna yang tersedia agar sesuai dengan latar blog anda.
  • Terakhir, jangan lupa simpan template anda...
Dan hasilnya....
Baiklah kawan, selamat mencoba :))
00.17 | 0 komentar | Read More
di 00.17 0 komentar
Label: Blog Tutorial

Membuat Read More Dengan Thumbnail (Icon)

Sesuai judulnya, kali ini kita akan membahas tentang penggunaan Read More dengan mode Thumbnail/Icon.
Sebenarnya ini adalah versi Read More punyanya  o-om (Agus Ramadhani) yang saya modifikasi dengan tambahan thumbnail. Mohon maaf bagi beliau yang tulisannya saya comot. hihii :))

Langsung saja kita mulai.
Pertama, masuk ke mode Design > Edit HTML (Expand Widget Template) lalu temukan kode </head>
dan letakkan kode berikut tepat diatasnya:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
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);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script> 

Langkah kedua,  temukan kode <data:post.body/> atau <p><data:post.body/></p>
ganti salah satu kode di atas dengan kode di bawah ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img alt='read_more' src='http://i945.photobucket.com/albums/ad291/zeromania/read_more_biru.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan: 
  • summary_noimg = 250 : berarti jumlah karakter yg dipenggal tanpa gambar
  • summary_img = 250 : berarti jumlah karakter yg dipenggal disertai dg gambar
  • img_thumb_height = 120 dan img_thumb_width = 120 : ukuran gambar dalam satuan piksel
  • http://i945.photobucket.com/albums/ad291/zeromania/read_more_biru.png : bisa sobat ganti dengan URL dimana menyimpan logo read morenya

Terakhir jangan lupa simpan template Anda dan lihat hasilnya..

Untuk pilihan icon Read More, bisa menggunakan beberapa tombol berikut:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzATiEickLRRAklT5ABfrg-Ra2CcA0EE-EADigR6cT8-SrHwz6qkW-P4UVn7YlUJbj3LBah0MXbxw2yD-IDFbevL6Zmie6ixwtshAart_onmG75dJoEUgse_XGMh8POiE0IuyZXyJvfYg/s1600/readmor5.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjHiDjIRpjdF05Jj155F1jQCpciBohRZZ0Zp_jcVA1fcyLK-S0FnMDpj4DZ8XeMlsZIyzaQeV9GHbo9j9KArwyHS9zFuPMiEJ6s4534HdA1bYAucfUf8M53lNcy2pMuw-baLoUwow97xw/s1600/readmor6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY7nSyn-1XlmEfEpMbzaKjxusuY2AoGjCBZSmXg8uFQz26L-9aaN9Swl7vasIReV8MEsh-Bjtt5ui9HNhEx-MYO8T5s6LfivP58rNZhVw_9DbgHPedc5zusozp-IZpSv_fNsPrv35sV3A/s1600/readmor7.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj84wwvSW4jPQzdqYNweYqhWDhfkW4WZARYbx59qxe_eYGw3xhtB6fzNalPCzxwIGc7li2rbdjmRXgIEHN8ziiJtcmYAnMPUEUYiRvQVEsqhL2WJDQ-ja4PsuhU7zfBlRUfXDfaNDKHHlg/s1600/readmor8.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4jG-ziK2or-1VUV1jQVXueGTeF1Ha28-mPNtn-dzZ1sgmZQaANr7n7YJZQ8bSstJqc67Y2SVTlfEmEpU2Hk8BASDfVxBkP015EGyMaBblGgktVQoOVJOKXbdNmv9TJyfAry79T2ANtiM/s1600/readmore2.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE3uXmxfXos7Fi6PAgz8Iq5fU9_dQFDq6jsP2nb66ihxBRpPtu6-TJIH3y5gwTiLsIrwUW8rbjCWhyphenhyphenk-fWUWPdXsyUhRjT8C7zPCs5l9HxrZAb7I_H941RuAUGBKvs8BgZSHEUSAmNSzI/s1600/readmor10.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7JIqdlqOa8IwZpZz8AWEFKPc9_maiLkdZIt23caQ0G-zSHYxHyo82xLZFDl0CaxP-lQxYeKVviQ_A15tttr_X2KnvPeqz6w63rGefb5sUK0SVG2yV0cnIKX8F7JQOvMcK7H7A17nPGBo/s1600/readmore1.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4jG-ziK2or-1VUV1jQVXueGTeF1Ha28-mPNtn-dzZ1sgmZQaANr7n7YJZQ8bSstJqc67Y2SVTlfEmEpU2Hk8BASDfVxBkP015EGyMaBblGgktVQoOVJOKXbdNmv9TJyfAry79T2ANtiM/s1600/readmore2.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzlBO8KJ7GVejHnI9WDH3O0FVJm5RrM-p8sTb3bCDG9nlHdm36PIbTjKoEPulGCpxkbZBgslidXKHzLe8WzzHAGiUU1n8DqH_LnCjLy55u8C3RspeKmFKOTi67fYlV0mRc8lQJqJoG6T0/s1600/readmore3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWsCJe9O2-lOqAz5ZQdSVYWGOCAdKtDDlZgrzHyuyNax4EuFqrzVkS6dncANeVvsnIGSB7KnIk7s83UH21ej5Cu-ky1woZZZ4klYXJUlbae1n5lALHJo7DuIcNcGkbQx7-6HB_FAPO9c8/s1600/readmore4.png


Selamat mencoba :))
 
23.58 | 0 komentar | Read More
di 23.58 0 komentar
Label: Blog Tutorial

Panduan Mengganti Icon Default Blogger (Favicon)


Favicon. Apa itu?
Yap, Favicon adalah sebuah icon yang muncul disamping kiri Address Bar ketika kita mengunjungi situs/blog tertentu. Sedangkan Blogger sendiri punya Favicon default seperti gambar diatas. sebuah logo warna orange yang mirip huruf B itu.

Logo tersebut bisa kita ubah dengan logo lain yang kita inginkan. Misalnya foto, atau gambar lain bahkan bisa berupa animasi gif (gambar bergerak).

Baiklah, mari kita mulai!
Pertama, kita harus memiliki gambar yang akan kita pasang sebagai Favicon. Gambar bisa berformat *JPG, *GIF, *PNG, atau eksetensi gambar lainnya. Usahakan ukuran Favicon tidak lebih dari 50 x 50 piksel.
Upload gambar yang sudah jadi ke Photobucket atau situs penyimpan file lain yang Anda miliki.
Sekarang kita coba memasang gambar ini sebagai Favicon.

Login ke Blogger > Design > Edit HTML.
Letakkan kode berikut tepat di atas kode </head> (gunakan perintah Ctrl + F3 untuk memudahkan pencarian)

<link rel="shotcut icon" href="alamat link/gambar"/>
Penempatan Kode

Sekarang ganti kode yang berwarna merah dengan link dimana sobat menyimpan gambar.
Sekarang kita litat perbedaan sebelum dan sesudah Favicon diubah:
Sebelum

Sesudah
Nah, bagaimana? sangat mudah bukan?
Sok mangga atuh dicoba di blog masing-masing :))
19.59 | 0 komentar | Read More
di 19.59 0 komentar
Label: Blog Tutorial

Memasang Search Engine Di Blog

Kadangkala beberapa template hasil instalan tak dilengkapi dengan fitur Search Engine. Lalu bagaimana, apakah kita bisa membuat sendiri? Ya, tentu saja bisa. berikut langkah-langkahnya:

Masuk ke mode Design > Add Gadget > HTML/JavaScript. Pastekan kode berikut di dalamnya:

<form id="searchform" action="http://NamaBlogAnda.blogspot.com /search" name="searchform" method="get"><input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>



Jangan lupa mengubah kata NamaBlogAnda dengan alamat blog sobat serta  Search dengan kata yang akan muncul di samping kolom search.
Simpan Gadget anda.

Selamat mencoba :))

05.56 | 0 komentar | Read More
di 05.56 0 komentar
Label: Blog Tutorial

Memasang Tombol Share Di Bawah Setiap Postingan

Keberadaan tombol share di blog sangat berarti demi perkembangan blog kita. dengan tombol sahre tersebut kita bisa menyebarkan artikel yang telah kita psting ke berbagai social media seperti Facebook, Twitter dan masih banyak lagi.

Untuk itu, marilah kita coba sama-sama memasang tombol share button di blog masing-masing.
Terlebih dahulu silahkan login ke akun Blogger masing-masing.

Pilih Design > Edit HTML. Jangan lupa beri tanda centang pada Expand Widget Template..

Temukan kode berikut:
<div class='post-footer-line post-footer-line-1'>
Letakkan kode berikut tepat di bawah kode berwarna biru di atas:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4ca5cb001917823d" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4ca5cb001917823d"></script>
<!-- AddThis Button END -->

 Jangan lupa untuk menyimpannya. Kita lihat  contoh di bawah ini:
Penempatan Kode

 Dan hasil akhir akan seperti ini. Tombol Share sudah muncul di bawah setiap postingan .
Sebelum

Sesudah

 NB: untuk mendapatkan jenis dan gaya tombol share yang lain sobat bisa ke situs www.addthis.com,
beri centang pada salah satu gaya yang diinginkan, lalu klik tombol Get Widget.


 Selamat mencoba! Semoga bermanfaat :))

05.22 | 0 komentar | Read More
di 05.22 0 komentar
Label: Blog Tutorial

Panduan Mengganti Template Blogger

Pilihan template Blogger memang banyak, apalagi kini sudah disediakan fitur Template Designer untuk mengotak-atik template bawaan. Namun adakalanya kita kurang puas dengan tampilah template sekarang.
Jawabannya adalah menggantinya dengan template baru. Di internet, banyak sekali website penyedia template gratisan yang sangat bagus.

Beberapa diantaranya:
- http://www.zoomtemplate.com
- http://www.blogtemplate4u.com
- http://www.deluxetemplates.net
- http://www.dhetemplate.com
- http://btemplates
- http://www.premiumbloggertemplates.com
Dan masih banyak lagi, semua template diatas bisa didownload gratis tissss :))

Baiklah, mari kita mulai mengganti template blogspot kita
Sebelumnya pastikan sobat sudah mendownload salah satu template uang dirasa cocok dan bagus di salah satu situs diatas lalu ekstract. Bagaimana cara mengekstrack template?
Perhatikan gambar berikut:
Mengekstract Template Blogger

Klik kanan pada file *zip > ekstract here > ok
Sehingga muncul folder baru hasil ekstrack file zip tadi.

Folder Baru 
Selanjutnya masuklah ke Dashboard > Design > Edit HTML > Browse. Kemudian pilih template hasil ekstract tersebut disimpan lalu klik Upload.

Mengupload Template Baru

Jika ada pesan seperti ini, maka klik saja Keep Widget Template untuk mempertahankan agar widget/gadget yang telah kita tambahkan tidak hilang begitu template diganti.

 

Klik view blog untuk melihat hasil template kita. Bagaimana? Apakah sudah berubah tampilannya?
Selamat mencoba.. ^^
23.17 | 0 komentar | Read More
di 23.17 0 komentar
Label: Blog Tutorial
Langganan: Postingan (Atom)