Belajar Blogging

Pemberitahuan Blog Under Construction ini, berupa script yang di dalamnya terdapat gambar dan tulisan bahwa blog atau web sedang dalam perbaikan, dan ini bermanfaat untuk kita apabila kita ingin mengedit template yang pada blog kita, Script Pemberitahuan ini masih bisa di akses untuk halaman-malaman posting kita yang telah kita publikasikan, jadi pengunjung masih tetap bisa membuka halaman-halaman posting.


Cara Adalah Sebagai Berikut :

1. Login ke account Bloger Anda.
2. klik Tab Rancangan -> Elemen Halaman -> Tambah Gadget -> Pilih HTML/JavaScript.
3. Langkah berikutnya copy Script berikut di dalamnya :

<style type="text/css">
#anima_sagita {position:fixed;_position:relative;top:10px; left:0px;clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
</style>
<script language='javascript'>
document.write(unescape('%3C%64%69%76%20%69%64%3D%22%61%6E%69%6D%61%5F%73%61%67%69%74%61%22%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%73%61%67%69%74%61%2D%63%6F%6D%2E%74%6B%2F%32%30%31%31%2F%31%31%2F%63%61%72%61%2D%6D%65%6D%62%75%61%74%2D%70%65%6D%62%65%72%69%74%61%68%75%61%6E%2D%62%6C%6F%67%2D%75%6E%64%65%72%2E%68%74%6D%6C%22%20%74%69%74%6C%65%3D%22%62%79%20%53%41%47%49%54%41%20%43%4F%4D%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%3C%69%6D%67%20%62%6F%72%64%65%72%3D%22%30%22%20%61%6C%74%3D%22%70%65%6D%62%65%72%69%74%61%68%75%61%6E%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%69%31%32%32%30%2E%70%68%6F%74%6F%62%75%63%6B%65%74%2E%63%6F%6D%2F%61%6C%62%75%6D%73%2F%64%64%34%35%31%2F%69%72%69%6C%73%61%67%69%74%61%2F%54%65%6D%70%6C%61%74%65%2F%57%65%62%73%69%74%65%2D%55%6E%64%65%72%2D%43%6F%6E%73%74%72%75%63%74%69%6F%6E%2E%70%6E%67%22%20%2F%3E%3C%2F%61%3E%0A%3C%2F%64%69%76%3E'));
</script>

4. Pada judul widget biarkan kosong dan save.
5. Lihat hasilnya dan selesai......

Semoga bermanfaat !

Cara Membuat Widget Follower Blog Valid XHTML gampang-gampang susah, kita cukup mengganti widget follower yang ada pada blog kita dengan kode page sourchnya saja, jadi untuk membuatnya kita tambahkan dulu widget followers dulu lalu klik kanan dan view page sourcenya.lihat gambar dibawah tampilan widget followers untuk blog TUTORIAL SAGITA ini!


Page source diatas bisa kita jadikan widget followers pada blog,jadi copy saja kode page source follower blog lalu hapus followers bawaan blogger. untuk lebih mudah silahkan langsung copy saja kode dibawah ini!

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<div id="

div-5444802336774040577

" scrolling="no" style="overflow:hidden;height:150px;"></div>
<script type="text/javascript">
var skin = {};skin['FONT_FAMILY'] = 'Arial';skin['BORDER_COLOR'] = 'transparent';skin['ENDCAP_BG_COLOR'] = 'transparent';skin['ENDCAP_TEXT_COLOR'] = '#33ccff';skin['ENDCAP_LINK_COLOR'] = '#33ccff';skin['ALTERNATE_BG_COLOR'] = 'transparent';skin['CONTENT_BG_COLOR'] = 'transparent';skin['CONTENT_LINK_COLOR'] = '#33ccff';skin['CONTENT_TEXT_COLOR'] = '#333333';skin['CONTENT_SECONDARY_LINK_COLOR'] = '#2D8930';skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';skin['CONTENT_HEADLINE_COLOR'] = '#2D8930';skin['NUMBER_ROWS'] = '3';google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);google.friendconnect.container.renderMembersGadget({ id: '

div-5444802336774040577

',

site:'13972492468576258974'

}, skin);</script>

Ganti yang berwarna dengan kode widget foolowers blog, untuk caranya melihat kode followers silahkan klik kanan blog dan view page sourcenya, nanti akan tertera disitu ID follower blog dan ID site, setelah itu kita buat lagi add gadget, add html/javascript dan simpan, setelah berhasil kamu hapus widget followers bawaan blog, nah sekarang coba cek di http://validator.w3.org/, dan tara......... selamat sekarang berhasil membuat valid xhtml widget followers pada blogspot atau blogger.

Menu Melayang Di Sudut Blog adalah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan. Di dalamnya sudah termasuk navigasi scroll to top/bottom of page (scroll ke bagian paling atas/bawah halaman web) ber-engine jQuery, dan juga tombol share Twitter dan Facebook (bila diinginkan).



Demo

Code Menu Melayang :

Letakkan kade berikut di atas kode </body>

<!-- zFPmenu START -->
<div id='zfpm_div' style='display:none;'>
<div id='zfpm_upperBox'>
<!-- Place ads, text message, or anything here. -->
</div>
<ul id='zfpm_ul'>
<!-- Your menus start -->
<li class='dir'><a href='/'>Your menu 1 </a>
<ul>
<li class='dir'><a href='/'>Your submenu 1.1</a>
<ul>
<li><a href='/'>Your sub-submenu 1.1.1</a></li>
<li><a href='/'>Your sub-submenu 1.1.2</a></li>
</ul>
</li>
<li><a href='/'>Your submenu 1.2</a></li>
<li><a href='/'>Your submenu 1.3</a></li>
</ul>
</li>
<li class='dir'><a href='/'>Your submenu 2</a>
<ul>
<li class='dir'><a href='/'>Your submenu 2.1</a>
<ul>
<li><a href='/'>Your sub-submenu 2.1.1</a></li>
<li><a href='/'>Your sub-submenu 2.1.2</a></li>
</ul>
</li>
<li><a href='/'>Your submenu 2.2</a></li>
<li><a href='/'>Your submenu 2.3</a></li>
</ul>
</li>
<!-- Your menus end -->
</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = &#39;dark&#39;
var zfpm_shareBox = &#39;no&#39;;
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://sagita-com.googlecode.com/svn/Menu-sudut.js' type='text/javascript'/>
<!-- zFPmenu END -->

Ket :
* Ganti tulisan YOUR MENU, YOUR SUBMENU 2.1, dll dengan link-link yang ada pada blog Anda, contoh :

<ul id='zfpm_ul'>
<!-- Your menus start -->
<li class='dir'><a href="http://www.sagitasoft.com/">Homepage</a>
<ul>
<li><a href='http://www.sagitasoft.com/2011/07/daftar-isi-sagita-com.html'>Daftar Isi</a></li>
</ul>
</li>

Setting/Variable

Anda dapat mengubah tema warna dan berbagi pengaturan tombol visibilitas.

var zfpm_colorTheme = 'light';
Mengatur warna tema untuk widget menu.
Valid input: 'light' or 'dark'

var zfpm_shareBox = 'no'
Show the Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget) or not.
Valid input: 'yes' or 'no'

Hallo sobat blogger, kali ini Kami akan share tentang Cara Baru Membuat Show-Hidden Comment Blog Nan Cantik berkat request dari teman-teman bloger SAGITA COM, mungkin bagi para master ini tidak asing lagi, tapi Kami akan mencoba untuk mengulasnya untuk para teman-teman yang kepingin membuatnya. penasaran.... !



Sebenarnya script ini tidak jauh beda dengan script-scrip SAGITA COM yang lain, cuma penggunaannya yang berbeda,langsung aja kita buat sama-sama yuk !

Berikut adalah langkah demi langkahnya :

1. Silahkan login ke account blogger Anda.

2. Pilih Rancangan -> Edit HTML ->Cheklist pada kotak "Expand Template Widget".

3. Download template lengkap dulu, apabila ada kesalahan dapat di kembalikan lagi seperti smula.

4. Cari kode :

<dl id='commentlist'>
<b:loop values='data:post.comments' var='comment'>

(untuk mempermudah pencarian tekan CTRL + F) Bila tidak ketemu silahkan cari kode yang merip dengan kode tersebut.

5. Jika sudah ketemu letakkan kode berikut tepat di atasnya :

<input id='cmnvOpener' name='cmnvOpener' onclick='cmnvToggleDisplay(&apos;ShowComment&apos;,&apos;10%&apos;,&apos;80%&apos;,&apos;10%&apos;,&apos;5%&apos;,&apos;90%&apos;,&apos;5%&apos;);' style='display:block; float:center;' type='button' value='Show Comment'/><script src='http://sagita-com.googlecode.com/svn/cmnviewer.js' type='text/javascript'/>
<div id='ShowComment' style='text-align: center; line-height:0;display:none;'>

6. Langkah selanjutnya silahkan scrool ke bawah sampai menemukan kode :

</b:loop>
</dl>

7. Letakkan kode di bawah ini tepat setelahnya :

</div>

Contoh :

</b:loop>
</dl></div>

8. Save template, dan silahkan lihat hasilnya.

View Button adalah widget atau script untuk menampilkan konten artikel/post dengan efek fade-in/fade-out dalam sebuah window yang fokus. Konten ditampilkan tanpa embel-embel elemen lainnya yang biasanya ada pada sebuah webpage selain konten artikel seperti header, sidebar dan footer. Kira-kira seperti Safari Reader.

Demo

Apabila anda ingin memanjakan pengunjung blog/website anda dengan menyediakan opsi untuk hanya menampilkan konten artikel saja, silahkan gunakan widget/atau script View Button ini. Tujuannya adalah agar pengunjung lebih nyaman membaca isi artikel/post dengan tampilan yang fokus.

Script View Button Focused Content ini bukan hanya untuk konten artikel/post, tapi bisa juga digunakan untuk konten lainnya, misalnya :

1. Cara Membuat Tombol Skip-AD Blog Sebelum Ke Link Tujuan.

2. Animasi Buku Tamu / Chat Box + Go To Top - Go To Down.

3. Show-Hidden Comment Blog Nan Cantik.

4. Iframe Facebook Page.

5. Zoom image, dll.

Selanjutnya terserah Anda sob, asalkan ditentukan ID elemen containernya.

View Button Code :

<input id="sgtvOpener" name="sgtvOpener" onclick="sgtvToggleDisplay('YOUR-CONTAINER-ID','10%','80%','10%','5%','90%','5%');" value="YOUR-NAME-BUTTON" style="display:block; float:right;" type="button" />
<script type="text/javascript" src="http://sagita-com.googlecode.com/files/sGTviewer.js"></script>

Wajib Diganti/Ditentukan:

Ganti 'YOUR-CONTAINER-ID' dengan ID elemen container konten artikel yang akan ditampilkan. Salah satu cara untuk mengetahui ID sebuah elemen container konten adalah dengan cara melihat source code halaman web anda di browser (klik kanan halaman web, lalu klik ‘View Page Source’).

Contoh Container ID CONTENT/ARTIKEL :

<div id='content'/>

Maka script nya menjadi :

<input id="sgtvOpener" name="sgtvOpener" onclick="sgtvToggleDisplay('content','10%','80%','10%','5%','90%','5%');" value="Fokuskan Artikel" style="display:block; float:right;" type="button" />
<script type="text/javascript" src="http://sagita-com.googlecode.com/svn/sGTviewer.js"></script>

Sebagai catatan, di sini perlu ditekankan bahwa yang diperlukan adalah ID container, bukan elemen konten itu sendiri. Elemen container adalah elemen yang di dalamnya terdapat elemen-elemen konten (container = parent dari elemen konten).
Optional

Pada kode di atas terdapat variable Left, Width, Right, Top, Height, dan Bottom. Variabel ini adalah untuk menentukan letak tampilan ‘jendela’ atau ‘window’ viewer. Bila diinginkan, silahkan ganti besaran variabel-variabel tersebut.

* Left: Valid input: example: '50px' or '10%' or 'auto' (satuan px, % atau auto).
* Width: Valid input: example: '700px' or '80%' or 'auto' (satuan px, % atau auto).
* Right: Valid input: example: '50px' or '10%' or 'auto' (satuan px, % atau auto).
* Top: Valid input: example: '25px' or '5%' or 'auto' (satuan px, % atau auto).
* Height: Valid input: example: '600px' or '90%' or 'auto' (satuan px, % atau auto).
* Bottom: Valid input: example: '25px' or '5%' or 'auto' (satuan px, % atau auto).

Semua variabel tersebut berupa string (teks di dalam tanda kutip/bukan nomor).

Notes :

Kode tersebut bisa ditempatkan di mana saja pada bagian body sebuah halaman web. Tapi mungkin sebaiknya ditempatkan di antara konten itu sendiri (di atas atau di bawahnya), agar pengunjung bisa dengan mudah melihatnya.

Selama seminggu lebih saya cari-cari di mbah google tak ketemu juga Cara Membuat Label Breadcrumb Cepat Terindex Google, akhirnya saya kirimkan email ke pemilik blog yang label breadcrumb-nya terindex oleh google, itupun melelui proses yang panjang, dan tak terjawab emailku beberapa kali, dan akhirnya aku utak-utik mencoba dan mencoba ketemu juga kodenya, maka dari itu jika Anda seorang blogger yang bingung untuk mengoptimal label breadcrumb kami share disini.


Untuk itu silahkan ikuti caranya dibawah ini :

1. Masuk ke dasbord >> rancangan >> edit HTML.

2. jika blog Anda sudah ada breadcrumb-nya hapus saja, caranya cari kode : breadcrumb pada template kemudian hapus semuanya hingga tak ada kode breadcrumb lagi (gunakan 'ctrl+f' untuk mempermudah pencarian).

3. Jika sudah cari kode HTML ]]></b:skin>.

4. Masukan kode CSS dibawah tepat di atas kode ]]></b:skin>

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}

5. Setelah itu cari kode ini :

<b:include data='top' name='status-message'/>

Note :
- Setiap template berbeda,terkadang kode <b:include data='top' name='status-message'/> ini ada dua,nah jika di template anda kode <b:include data='top' name='status-message'/> terdapat 2, maka cari kode <b:include data='top' name='status-message'/> yang dekat dengan kode <data:defaultAdStart/> lalu letakan kode <b:include data='posts' name='breadcrumb'/> ini tepat dibawah <b:include data='top' name='status-message'/> . Hasilnya nanti seperti ini.

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

<data:defaultAdStart/>

- Jika di template anda kode <b:include data='top' name='status-message'/> ini hanya terdapat satu,maka cari kode <b:includable id='post' var='post'> . Setelah ketemu letakan kode <b:include data='posts' name='breadcrumb'/> ini tepat dibawah kode <b:includable id='post' var='post'> . Hasilnya Seperti ini .

<b:includable id='post' var='post'>
<b:include data='posts' name='breadcrumb'/>

6. Langkah selanjutnya silahkan cari kode :

<b:includable id='main' var='top'>

7. Letakkan kede berikut tepat diatasnya :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url' rel='tag'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' href='' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a></span>
</b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; All posts
<b:else/>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl'><span itemprop='title'>Home</span></a></span> &#187; Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Sekarang klik save lalu cek hasilnya disini

Selamat pagi sobat blogger, kalau dulu SAGITA COM pernah membahas tentang Cara Buat Buku Tamu Blog Hidden Show Secara Perlahan, untuk kali ini Kami akan melanjutkan penyempurnaannya. Bukutamu yang kami maksut kali ini berada di pojok kanan bawah blog dan kami tambahkan tobol Go to top - go to down yang sering di cari para blogger, karena pergeserannya yang sangat lembut dan tampak slider.

Sering kita jumpai bahwa jika kita membuka blog maka akan membuka Buku tamu juga, walaupun itu tampak tak terlihat di layar, dan itu akan memperberat loading blog kita, untuk itu mari kita kurangi berat loading blog kita supaya pengunjung betah untuk berlama-lama di blog kita.

Demo

Script ini benar-benar menyembunyikan Bukutamu blog dan membukanya setelah di klik tombolnya, suatu contoh Anda bisa lihat di blog ini, jika tombol bukutamu di klik maka browser akan me-load bukutamu, jadi blog tak terasa berat saat di buka awal, bila pengunjung tak menghendaki blogwalking atau sekedar ingin mengetahui apa isi dari konten blog tak akan terasa berat saat di load.



Berikut Adalah Urutan Cara Membuatnya :

<!-- Menu START -->
<div id='zfpm_div' style='display:none;'>
<div id='zfpm_upperBox'>
</div>
<ul id='zfpm_ul'>
<!-- Your menus start -->
<li><div id='ShoutMix' style='text-align: center; line-height:0;display:none;'>

<iframe allowtransparency='yes' frameborder='0' height='500' scrolling='no' src='http://sagita-com.cbox.ws/' width='775'></iframe>

</div>
<input id='sgtvOpener' name='sgtvOpener' onclick='sgtvToggleDisplay(&apos;ShoutMix&apos;,&apos;10%&apos;,&apos;80%&apos;,&apos;10%&apos;,&apos;5%&apos;,&apos;90%&apos;,&apos;5%&apos;);' style='display:block; float:center;' type='button' value='Chat Box'/>
<script src='http://sagita-com.googlecode.com/svn/sGTviewer.js' type='text/javascript'/></li>
<!-- Your menus end -->
</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = &#39;dark&#39;
var zfpm_shareBox = &#39;no&#39;;
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://sagita-com.googlecode.com/svn/Menu-sudut.js' type='text/javascript'/>
<!-- Menu END -->

Ket :
* Letakkan kode di atas tepat di atas kode </body>.
* Sesuaikan width dan height pada style buku tamu agar sesuai dengan template blog Anda.
* Ganti tulisan yang berwarna biru dengan alamat BUKU TAMU Anda.
* Ganti tulisan yang berwarna merah dengan kata-kata sesuka Anda.
* Save dan lihat hasilnya.