Bebas ber Expresi

Senin, 27 Juni 2011

Cara Menempatkan Sharing is Sexy dan Subscribe Box Tampil Hanya di Halaman Postingan

Sebenarnya postingan ini menindak lanjuti postingan sebelumnya tentang Cara Membuat Sharing is Sexy , nah pada tutorial blog sebelumnya bang kahar belum memberikan trik blog untuk memasang sharing is sexy itu hanya di halaman posting atau sering disebut itempage.

tutorial blog kemarin posisi sharing is sexy masih terlihat di homepage dan hal itu sangat mengganggu pemandangan para visitor 
serta membuat loading website anda menjadi lebih berat, ok bang kahar akan memberikan trik blog cara menempatkan sharing is Sexy dan Subsribe box tampil hanya di halaman postingan, nah untuk postingan ini bang kahar diajari sama guru nih, bro ladida (seorang master koding) :)

simak dan praktekan secara seksama :

Masuk Dasbor Blog Kamu
Masuk ke Rancangan Blog Kamu
Masuk ke Edit HTML Kamu
Klik Tambah Gadget
Cek kotak Expand Template Widget
Copy Kode di bawah nanti dan Paste sebelum kode <div class='sexy-bookmarks'>

 Kode :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

7. Cari Kode <input class='button' type='submit' value='Subscribe'/></p></p></p><p/><p/></form>

dan tambahkan </b:if> di belakangnya menjadi 

<input class='button' type='submit' value='Subscribe'/></p></p></p><p/><p/></form></b:if> 

8. simpan

nah, sekarang sharing is sexy yang sudah anda buat kemarin, bisa muncul hanya di halaman posting, dan hal itu lebih memperindah tampilan website anda, sekian Trik Blog bang kahar, semoga bermanfaat :)

Cara Membuat Sharing is Sexy

Sharing menurut bahasa berarti bertukar pikiran, namun makna tersebut lebih luas ketika memasuki dunia blogger. sharing dalam dunia blogger berarti saling berbagi, maksud berbagi disini adalah menyebarluaskan artikel atau postingan karya orang lain ke berbagai situs jejaring sosial maupun tempat submit lainnya.

menurut bang kahar, sharing itu juga sebagai rasa menghargai karya-karya blogger atau penulis artikel tersebut, jadi memasang widget sharing ini sangatlah penting. disamping sebagai tanda penghargaan, keuntungan lain yang di dapatkan oleh blogger adalah, postingan dia lebih tersebar di berbagai search engine, istilah simpelnya adalah submit posting.

visitor akan lebih optimal untuk berkunjung ke blog yang dishare, jadi ayo kita sama-sama memasang widget sharing sexy ini di blog atau situs kita, caranya sangat mudah.

bang kahar akan memberi tutorial, cara membuat sharing sexy, disimak dan di praktekan dengan baik ya:

Masuk Dasbor Blog Kamu
Masuk ke Rancangan Blog Kamu
Masuk ke Edit HTML Kamu
Klik Tambah Gadget
Cek kotak Expand Template Widget
Copy Kode di bawah nanti dan Paste setelah kode ]]></b:skin>

7. Copy kode di bawah dan pastekan di bawah kode <data:post.body/>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEEDSOBAT', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border: 1px solid rgb(204, 204, 204); padding: 10px; text-align: left; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizbSF7BQ6H3-SjJtQ5eGdcQQD1Kk__unHiRtqKIzoD3WM-TRV9bgkUXgasFk_VKzYk9ukrp_8SoHDnxYyG7sUKgB5rIcwpmuW-Beja9iyLgvhIatBgumIaY-Y-cI0R2zj0qJTr8fHlr6fG/s400/feedreader_2.jpg") no-repeat scroll right center rgb(255, 255, 255);' target='popupwindow'><input name='loc' type='hidden' value='en_US'/><input name='uri' type='hidden' value='NAMAFEEDSOBAT'/><p style='text-align:justify;'><p><font color='#000000'>MASUKAN KALIMAT DISINI</font></p><br/><p><p><input class='inputbox' name='email' style='width:300px;' type='text'/><input name='uri' type='hidden' value='NAMA FEED SOBAT'/><input name='loc' type='hidden' value='en_US'/><input class='button' type='submit' value='Subscribe'/></p></p></p><p/><p/></form>

Catatan : perhatikan kode berwarna merah, dan ganti sesuai feed anda.

8. Save

semoga tutorial blog ini bermanfaat ;)

Minggu, 26 Juni 2011

Cara Membuat Daftar Isi Otomatis Ketika Posting II

daftar isi kali ini menggunakan JS (Java Script) yang berbeda dengan JS yang bang kahar berikan pada postingan Cara Membuat Daftar Isi Otomatis 1 Kemarin, untuk membuatnya pun cukup mudah dan tidak memerlukan edit html.

Bang Kahar akan memberikan tutorial blog, cara membuat daftar isi otomatis di blog, simak dan praktekan dengan benar :

Masuk Dasbor Blog Kamu
Masuk ke Rancangan Blog Kamu
Masuk ke Elemen Blog Kamu
Klik Tambah Gadget
Klik HTML
copy dan paste kode di bawah ini ke dalam kolom HTML tersebut
Save

<div id="pbl_posts"> Recent Posts </div>

var jumlah_maksimum_post = 500;

var dengan_ringkasan = false;

var jumlah_karakter_ringkasan = 500;

</script>

</script>

</script></div>

Catatan : ubah kode berwarna merah !

width:230px; height:230 --->>> ukuran kotak widget

pxrgb(fff, fff, fff) --->>> kode warna latar belakang

var jumlah_maksimum_post = 500; --->>> jumlah posting yang ingin ditampilkan

var dengan_ringkasan = false; --->>> diskripsi postingan ubah dengan true kalau mau

var jumlah_karakter_ringkasan = 500; --->>> huruf yang dipakai di diskripsi postingan
http://www.bangkahar.co.cc/ ganti dengan alamat anda

8. Jangan lupa Simpan

semoga tutorial blog dari bang kahar bermanfaat, terimakasih.

Hujan Sebesar Ibu Jari Turun diwilayah Gambut Kabupaten Banjar Pada 26 Juni 2011 Jam 21.00

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqaGUU1Xijo0Vdh-MK8MxMZGkKKHUebdDRWSbZWc_vGsYLJnl-ntSfjYLkG4-bH947UNBMuh7HD3tsbkwR_gxrWMAK359zajWpG5uFUSDrNCV0MG4IDJwpZSuC0qfajPjSi1Gy3l8leIY/s1600/kal-sel.jpg

Gambut adalah salah satu kecamatan di Kabupaten Banjar tepatnya di Kalimantan Selatan, disinilah terjadi peristiwa hujan jempol, karena air hujan yang turun sebesar jempol. Padahal menurut kabar, bulan ini sudah masuk musim kemarau, bahkan diprediksikan bakal kemarau panjang sekitar 2 tahun, tapi kenapa masih ada hujan di dalamnya.

kejadian yang saya alami sendiri, seperti dilempari batu krikil dari atas. Daerah Gambut menuju Liang Anggang di guyur hujan jempol, merasakan sendiri ketika melintasi jalan tersebut tadi malam.

menurut hemat saya, hal ini terjadi karena dampak global warming atau pemanasan global yang sudah semakin parah saja. pasti sudah tau apa itu global warming, global warming adalah peningkatan suhu rata-rata atmosfer, laut dan daratan bumi.

penyebab pemanasan global sendiri diantaranya adalah "Efek Rumah Kaca", bumi mendapat sebagian energi dari matahari yang nantinya akan diserap oleh bumi dan sisanya akan dipantulkan kembali, namun rumah kaca membuat panas tersebut terperangkap di atmosfer bumi akibat menumpuknya jumlah gas rumah kaca antara lain uap air, karbon dioksida, sulfur dioksida dan metana yang menjadi perangkap gelombang radiasi ini.

dampak dari pemanasan global diantaranya adalah semakin meningkatnya pencemaran udara, hal tersebut juga berkaitan dengan menipisnya lapisan-lapisan pelindung bumi atau sering disebut dengan lapisan ozon, lapisan ozon adalah lapisan yang melindungi bumi dari radiasi sinar ultraviolet B matahari, kemudian karena begitu parahnya kerusakan ini, terjadi pelapukan atau pemecahan kepadatan ozon yang akhirnya ozon menjadi berlubang.

yang masih blogger katro bingung, apakah lubang-lubang pada lapisan ozon membuat air hujan tidak tersaring sempurna yang mengakibatkan air yang turun berbentuk lebih besar dari hujan-hujan beberapa tahun yang lalu, sebelum isu pemanasan global mencuat kepermukaan ?

dapat ditarik kesimpulan, bumi yang kita ini sudah semakin tua. sudah seharusnya kita peduli kepadanya, tidak merusak dan selalu mengambil keuntungan darinya. di dalam Al-Qur'an juga dijelaskan bahwa kebinasaan itu akibat ulah tangan manusia sendiri, maka sadarlah wahai para pengeruk isi perut bumi, karena bumi itu milik kami, bukan milik kalian. kami ingin menjaga dan merawat tidak seperti kalian yang hanya peduli dengan isi perut kalian sendiri.

TTD : Software | Entertainment | Hobi Ngeblog | Artikel Bebas | Tutorial Blog

Sabtu, 25 Juni 2011

Cara Membuat Related Post Marquee

Artikel Terkait atau Related Post adalah Artikel atau postingan yang memiliki label sama, misalkan saja artikel ini yang bang kahar kasih label "Tutorial Blog", nanti pada akhirnya postingan bang kahar lainnya yang memakai label "Tutorial Blog" juga akan menjadi artikel terkait dengan artikel yang ini.

disini ada sedikit menambahkan sedikit variasi, agar artikel terkait tersebut tidak statis atau hanya diam saja, disini artikel terkait akan bergerak kekanan dan kekiri atau menggunakan settingan marquee, tujuannya untuk memperindah blog dan mempermudah visitor mencari artikel yang diinginkan dengan label yang sama. 

Disini bang kahar akan memberikan Tutorial Blog, Cara Membuat Artikel Terkait Bergambar Berjalan, simak dan praktekan :

Login ke Blogger.
Di halaman Dasbor, kita pilih Rancangan.
Kemudian pilih Edit HTML
Beri tanda centang pada Expand Template Widget
Cari kode </head>
Taruh (copy paste) kode berikut ini di atasnya

<!--Related Posts with thumbnails Scripts and Styles Blogger Katro Start-->
<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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles Blogger Katro End-->

7. Cari kode di bawah ini 

 <div class='post-footer-line post-footer-line-1'>


Atau jika tidak menemukannya cari kode berikut ini


 <p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)

 <!-- Marquee Bang Kahar Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://kep-katro.blogspot.com/2011/06/cara-membuat-related-post-marquee.html' style='display:none;'>Related Post Marquee</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Bang Kahar Related Posts with Thumbnails Code End-->


9. Simpan

catatan : var maxresults=10 bisa kalian ganti dengan angka berapapun, 10 adalah jumlah posting yang akan ditampilkan di related post yang dibuat.

Demikian tutorial blog dari bang kahar, semoga bermanfaat :)

Cara Membuat Daftar Isi Otomatis Ketika Posting I

Daftar isi mempunyai urgensi sangat besar pada sebuah blog, visitor atau pengunjung lebih nyaman berada di blog/ website yang memiliki daftar isi ketimbang harus mencari lagi di google.

daftar isi membantu mereka untuk menemukan hal-hal yang dicari selain dari keyword yang mereka ketik via google, karena memang lebih efektif dan efisien, pembaca atau visitor juga merasa lebih dilayani dengan adanya daftar isi.

di blogspot dulunya membuat daftar isi masih manual, dengan settingan link per link, hal tersebut cukup merepotkan para blogger. sekarang daftar isi sudah bisa dibuat dengan otomatis, jadi ketika postingan itu di publish, maka judul postingan tersebut langsung muncul di daftar isi tanpa harus utak-atik link lagi, tentu saja dengan proses "feedsternisasi" (hallllllaaahhh,,,bahasa apa itu :), atau sering dikenal dengan pemanggilan kembali postingan terdahulu/ recent post.

sekarang bang kahar akan memberikan tutorial blog, cara mudah untuk membuat daftar isi otomatis, simak dan praktekan secara cermat :

Masuk Dasbor Blog Kamu
Masuk ke Rancangan Blog Kamu
Masuk ke Elemen Blog Kamu
Klik Tambah Gadget
Klik HTML
copy dan paste kode di bawah ini ke dalam kolom HTML tersebut

<div style="border: 1px solid #000; overflow: auto; height: 250px;">
<script style="text/javascript" src="https://sites.google.com/site/bloggermyblog/TableOfContents.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 1000;
var standardstyling = true;
var shownumposts = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>

Catatan : yang berwarna merah bisa kamu edit sesuai selera, #000 adalah kode warna, 250 px adalah ukuran kotak daftar isi (sesuaikan dengan template kamu), 1000 adalah jumlah postingan yang dimuat di daftar isi tersebut, false bisa kalian ganti dengan true (date adalah pemunculan tanggal di daftar isi, summary adalah pemunculan icon/gambar posting dan numpost adalah penomeran posting di daftar isi)

    7. Simpan

akhirnya selesai juga dengan sangat mudah, metode ini tidak mengutak-atik  kode html yang terlalu rumit, hanya penambahan widget di element menggunakan kode JS biasa, semoga bermanfaat. 

Senin, 20 Juni 2011

Cara Membuat Recent / Related Post jQuery ( Berkedip Bergantian dan Slider)

Tips Trik Membuat Slider Related Post jQuery

Setelah beberapa hari kemarin kami saling sharing seputar belajar seo blogspot,kini saatnya kembali utak atik blog seputar tutorial jquery kembali.

Ketinggalan terlalu banyak materi jquery dalam blog ini?,jangan kuatir sob,tutorial blog ini baru memposting beberapa posts kok :D

Sebelum posting tentang bagaimana membuat recent post jQuery ini,biar kami share kembali beberapa tutorial jQuery dalam blog ini beberapa waktu lalu,diantaranya:

Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery
Membuat Widget Gambar Slide Show / Slideshow Javascript dan Css di Blogger
Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget
Membuat Menu Navigasi dengan jQuery (Kwicks jQuery Sliding Navigation Menu for Blogger)

Nah,belum terlalu banyak khan sob,sedot buruan ya :D

Langkah Cara Membuat Related Post / Recent Post jQuery untuk Blogger

Bagi yang masih bingung seperti apa sih related post yang dimaksudkan,sobat bisa lihat contoh gambarnya dibawah ini:

Contoh yang sudah diterapkan sobat bisa lihat di sini.
Gimana sob,pingin ga punya widget kaya gitu?yuk intip gimana sih cara bikin recent post jquery blogger ini..

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard,lalu Tata Letak / Rancangan kemudian klik tulisan Add New Widget atau Tambah Gadget dan pilih HTML/Javascript,lihat Gambar:

Cara Membuat jquery related post blogger blogspot.

.

Kemudian letakkan kode berikut sob:


<script src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script><center><strong>Artikel Acak</strong></center>
<center>
    <style type="text/css" media="screen">
    <!--

    #spylist {
    overflow:hidden;
    margin-top:1px;
    padding:0px 0px;
    height:300px;
    }
    #spylist ul{
    width:100%;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #spylist li {
    width:100%;
    padding: 0px 0px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:70px;
    overflow: hidden;
    background:#fff url() repeat-x;
    border:1px solid #ddd;
    }

    #spylist li a {
    text-decoration:none;
    color:#4B545B;
width:100%;
    font-size:10px;
    height:12px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #spylist li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    .spydate{
    overflow:hidden;
    font-size:8px;
    color:#0284C2;
    padding:2px 0px;
    margin:1px 0px 0px 0px;
    height:12px;
    font-family:Tahoma,Arial,verdana, sans-serif;
    }

    .spycomment{
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:8px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }

    -->
    </style>

        <script language='javascript'>

    imgr = new Array();

    imgr[0] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

    imgr[1] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

    imgr[2] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

    imgr[3] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

    imgr[4] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";
    showRandomImg = true;

    boxwidth = 200;

    cellspacing = 6;

    borderColor = "#232c35";

    bgTD = "#000000";

    thumbwidth = 50;

    thumbheight = 50;

    fntsize = 9;

    acolor = "#666";

    aBold = true;

    icon = " ";

    text = "comments";

    showPostDate = true;

    summaryPost = 40;

    summaryFontsize = 10;

    summaryColor = "#666";

    icon2 = " ";

    numposts = 100;

    home_page = "http://pelajaran-blog.blogspot.com/";

    limitspy=4
    intervalspy=4000

    </script>

    <div id="spylist">
        <script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/recentpostthumbspy-min.js' type='text/javascript'></script>
    </div></center>

Lalu Simpan dan sobat dah bisa lihat hasilnya :D
(klo ada keluhan sobat bisa komentar pada Facebook Fan Page-nya ya)

**Ket
- untuk :
Artikel Acak gantilah dengan judul widget jQuery related post ini.
- untuk :
http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox gantilah dengan url gambar default (gambar ini akan muncul saat sebuah posting tidak mengunggah sebuah gambar)
- untuk :
http://pelajaran-blog.blogspot.com/ gantilah dengan alamat url blog sobat.
-untuk :
yang lain,pr aja ya,kabuuuuuuuuuur!