Cara Membuat Recent Post Menurut Label / Kategori

Posted by Azis Grafis on 8/30/12

Cara Membuat Recent Post Menurut Label / Kategori  - Pada kesempatan kali ini saya share tutorial / cara untuk membuat recent post berdasarkan label / kategori yang saya dapatkan ketika saya blogwalking ke salah satu blog sobat saya. Sebelum kita memasuki langkah-langkah pembuatannya, alangkah baiknya jika kita mengetahui dulu apa itu recent post. Recent post adalah sebuah widget yang berfungsi untuk menampilkan postingan terbaru pada suatu blog. Salah satu manfaat memasang Recent posts di blog adalah membuat pengunjung mengetahui topik apa yang sedang dibahas di blog kita. Bagi yang penasaran ini dia penampakannya.

Screenshoot Widget Recent Post Berdasarkan Label / Kategori


Membuat Recent Post Berdasarkan Label / Kategori

Nah itu adalah penampakan / screenshoot dari widget recent post berdasarkan label / kategori. Sekarang kita mulai pada langkah-langkah / proses pembuatan widget tersebut.

Langkah-Langkah Membuat Widget Recent Post Berdasarkan Kategori

  1. Langkah pertama tentunya Sobat harus masuk ke blogger dengan akun Sobat.
  2. Kemudian pilih halaman tata letak (Layout).
  3. Pilih elemen laman >> pilih tambah gadget ( add a gadget).
  4. Kemudian pilih HTML/Javascript.
  5. Selanjutnya silahkan salin code di bawah ini dan masukkan pada widget tersebut kemudian simpan.
<div style="overflow:auto;width:100%px;height:300px;padding:10px;border:1px solid #000000"> <span id="pbl_labels"></span> <div id="pbl_posts"> Recent Posts </div> <script type="text/javascript"> 
var jumlah_maksimum_post = 10
var dengan_ringkasan = true
var jumlah_karakter_ringkasan = 100; </script> 
<script src="http://septiamujizat.googlecode.com/files/recent-post.js"> </script>
<script src="http://alamat.bloganda.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed"> </script></div>

Keterangan :

  • Ganti huruf yang berwarna merah dengan alamat (url) blog Sobat
  • var jumlah_maksimum_post = 10 adalah jumlah maksimum post yang ingin ditampilkan
  • var dengan_ringkasan = true ganti "true" dengan "false" jika tidak mau disertai ringkasan
  • var jumlah_karakter_ringkasan = 100 adalah jumlah karakter ringkasan post Anda
Nah itu dia langkah-langkahnya Cara Membuat Recent Post Menurut Label / Kategori , sangat mudah bukan? Mudah-mudahan sukses dan berhasil Sobat blogger semua memasangkan widget tersebut. Sekian saja postingan saya kali ini mengenai cara membuat recent post berdasarkan label / kategori, mohon maaf jika masih banyak kekurangannya.

Sumber : http://septia-mujizat.blogspot.com/2012/08/cara-membuat-recent-post-berdasarkan-label-kategori.html
More aboutCara Membuat Recent Post Menurut Label / Kategori

Cara Mudah Unfollow Teman yang tidak Folback Twitter kita

Posted by Azis Grafis on 8/3/12


Cara Mudah Unfollow Teman yang tidak Folback Twitter kita - Dalam membuat akun twitter kita pasti menginginkan banyak follower, tentunya kita harus follow akun twitter orang lain sebanyak mungkin, tapi bagaimana jika orang yang kita follow tidak follback ?? Tentunya kita akan kesal dan akan unfollow akun yang tidak follback sama kita, tapi masalahnya adalah kita follow sebanyak ribuan akun sedangkan yang follback hanya ratusan saja.
Cara alami adalah kita harus unfollow satu-persatu dengan melihat profilnya dan klik unfollow, tapi cara itu memakan waktu yang sangat lama sedangkan kita ingin unfollow dengan cepat tanpa harus melihat profilnya.
  • Cara pertama untuk Unfollow Twitter Yang Tidak Follow Back adalah dengan cara kamu Sign In dulu ke twitter, lalu klik manageflitter.com setelah itu klik “Start”.
  • Lalu klik “Connect to Twitter”.
Cara Mudah Unfollow Teman yang tidak Folback Twitter kita
  • Setelah itu klik izinkan/masuk agar kita dapat menggunakan aplikasi ManageFlitter.
  • Klik “Select Plan” yang terdapat di kolom “Free”.
Cara Mudah Unfollow Teman yang tidak Folback Twitter kita
  • Tunggu saja hingga twitter mengembalikan lagi ke halaman ManageFlitter, setelah itu kamu akan melihat jumlah akun twitter yang tidak follow back, dan mana saja akun twitter yang tidak aktif.
  • Setelah itu centang saja pada kotak samping akun yang ingin kita unfollow.
  • Langkah terakhir klik Unfollow (jumlah akun) Selected.
  • Selesai sudah kita unfollow akun twitter yang ngga follow back.

  • Pada saat proses ManagerFlitter selesai dan muncul semua akun yang tidak follow back, kita klik saja Quick Edit.
  • Lalu akan muncul kotak kecil foto profil akun twitter yang tidak follow back, klik aja kotak gambarnya sesuai keinginan sobat HDN untuk unfollow siapa saja, lalu klik Unfollow (jumlah akun) Selected.
  • Selesai sudah kita unfollow akun twitter yang tidak follow back, silahkan sobat HDN pilih saja mana cara yang lebih mudah dan gampang untuk unfollow akun twitter, baik dengan cara Quick Edit atau dengan cara meng-klik kolom kecil tanda check list di ManageFlitter.
Sumber : http://wanharwan.blog.com/

More aboutCara Mudah Unfollow Teman yang tidak Folback Twitter kita

Cara membuat Komentar Status Facebook yang unik

Posted by Azis Grafis


Cara membuat Komentar Status Facebook yang unik - Dalam membuat status Facebook tentunya kita berharap ada yang memberi komentar, agar status facebook kita terlihat lebih ramai dan keren. Di Facebook sendiri sudah banyak fanpage-fanpage yang bermuncul dengan nama fanpage unik juga, ada fanpage yang bernama Jempoler’s Indonesia, Perkumpulan Jempolers Sejati, dan masih banyak lagi.
Dan dibawah ini merupakan komentar status facebook yang unik :
  • ╲╭━━━━╮╲╲╭━━━━━━━━━━━━╮
    ╲┃╭╮╭╮┃╲╲┃Mampir Yah d Status Aku…..
    ┗┫┏━━┓┣┛╲╰┳ ♥jangan lp komenya.••
    ╲┃╰━━╯┃━━━╯╰━━━━━━━━━━╯
    ╲╰┳━━┳╯╲╲╲╲╲╲╲╲╲ ╲╲┛╲╲┗╲╲╲╲╲╲╲╲╲ Komen A/B .titik doaNk pun gpp…komen kosong juga
    http://wanharwan.blog.com
    —————————————————————————————————————————————————————————
  • ^^^^((((())))))^^^^
══════☑HADIR
═══════☑ Berpacu dlm
═════════☑ L I K E
═══════════☑ C O M E N T
═════════╔██████╗
═════════║█¤██¤█║
═════════║██████║
═════════║█¤██¤█║
═════════║██████║
═════════║█¤██¤█║
═════════╚║║║║║║╝
══════════║████║
══════════║║║║║║
══════════║████║
══════════║║║║║║
══════════║████║
══════════║║║║║║
══════════║████║
══════════║║║║║║
══════════║████║
══════════║║║║║║
══════════║████║
══════════║║║║║║
══════════║████║
══════════║║║║║║
══════════║████║
══════════║║║║║║
══════════║████║
══════════║║║║║║
══════════║████║
══════════║║║║║║
══════════║████║
══════════║║║║║║═══█
══════════║████║═══██
═█════════║║║║║║═══███
═██═══════║████║══██¤██
══███═════║║║║║║═██¤███
═══████═══║████║██¤███
════█████═║║║║║║█████
═════█████║████║████
════██████║║║║║║█████
══████████║████║███████
═█████████║║║║║║█████████
█████¤████║████║████¤█████
██████¤███║║║║║║███¤██████
████¤█████║████║█████¤████
═█████████║║║║║║█████████
═══████████████████████
═══════██═█═█═█═█═██
╔═╗═╔╗
║╚╬═╣╠═╦══╗
╠╗║╬║║╬║║║║
╚═╩╩╩╩╩╩╩╩╝
╔═╗═══╔═╗═╔╗══╔╗══╔╗
║╬╠═╦╦╣╚╬═╣╚╦═╣╚╦═╣╚╦═╦══╗
║╔╣╩╣╔╬╗║╬║║║╬║╬║╬║╔╣╬║╔╗║
╚╝╚═╩╝╚═╩╩╩╩╩╩╩═╩╩╩═╩╩╩╝╚╝
╔══════════════╗
║S A L K O M S E L..║║║
╚══════════════╝
http://wanharwan.blog.com
————————————————————————————————————————————————————————-
  • ¹ ² ³…
����� �������� ���
“berbag i jempol dan k
oment!! καяeиα šαчα мeичυκαı
šтαтυš αиđα/ καяeиα šαчα ıиgıи мeиgυ
¢αρκαи тeяıмα καšıħ κeραđα αиđα/
καяeиα šαчα ıиgıи
мeиgeиαł&вeяšαħαвαт đeиgαи αиđα
(мešκıρυи ħαичα đı đυиıα мαчα)/
καяeиα šαчα вeяαиggαραи đeиgαи ıиı
мυиgκıи вıšα мeиgħıвυя αиđα”
♥ ωαレαupuη κεςïレ ηαmuη mεmßεrï αr†ï
ßαηψακg ♥
♂МĔМРÚŃŶÁĨ ŚÁŤÚ ŚÁĤÁ฿ ÁŤ ŚĔĴÁŤĨ ĹĔ
฿ĨĤ ฿ĔŔĤÁŔĞÁ ĎÁŔĨŚĔŔĨ฿Ú ŤĔМÁŃ
ŶÁŃĞ МĔМĔŃŤĨŃĞĶÁŃ ĎĨŔĨ ŚĔŃĎĨŔĨ♀
ılıll|̲̅̅ ●̲̅̅|̲̅̅=̲̅̅|̲̅̅●̲̅̅|llılı http://wanharwan.blog.com
»-(¯’v ‘¯)-»
— — — – ̿̿̿ ‘̿ ̿’\̵͇̿̿\ з =(•̪●)= ε/̵͇̿̿ /’̿’̿ ̿ —- —– –
♪♫•*¨*•.¸¸❤¸¸ .•*¨*•♫♪
(̅_̅_̅_̅(̅_̅_̅_̅_̅_̅_̅_̅_̅̅_̅() ڪﮯ~ ~
‼ñªmµñ ªÞªß¡|ª ªñðª m€®ª$ ª t€®gªñggµ
ð€ñgªñ hª| ¡ñ¡ , $µð ¡|ªh k¡®ªñÿª ªñðª m
€mªªfkªñ $ªÿª. ðªñ $€| ªñjµtñÿª t€®$ €®ªh
ªñ𪿿
»[S ] [A] [L] ♂ [K ] [O ] [M] ♀ [S] [E] [L]«
————————————————————————————————————————————————————————-
  • HADIR . HADIR .HADIR .
    ●▬▬▬▬ஜ۩۞۩ஜ▬▬ஜ۩۞۩ஜ▬▬▬▬●
    ░░█░█▀▀  ░█▀█▀█ ░█▀█░█▀█░█░░░
    ░░█░█▀    ░ █   █   █░ █▄█░█   █    █░░░
    ▄▄█░█▄▄      █░░ █░ █░  ░█▄█░█▄▄░
    … ●▬▬▬▬ஜ۩۞۩ஜ▬▬ஜ۩۞۩ஜ▬▬▬▬●
    <***(●▬▬▬▬ஜ۩۞۩ஜ▬▬▬▬●)***>
    =LIKE BACK STATUSKU YA !!!!!!!!!!!!!!!!!!!!!!!!!!!* TERIMA KASIH
    http://wanharwan.blog.com
—————————————————————————————————————————————————————————–
  • ║████║░░║████║████╠═══╦═════╗ ╚╗██╔╝░░╚╗██╔╩╗██╠╝███║█████║ ░║██║░░░║██║╔╝██║███╔╣██══╦╝ ░║██║╔══╗║██║║██████═╣║████║ ╔╝██╚╝██╠╝██╚╬═██║███╚╣██══╩╗ ║███████║████║████║███║█████║ ╚═══════╩════╩════╩═══╩═════ Balik donkk ..
    http://wanharwan.blog.com
——————————————————————————————————————————————————————————-
  • Loading . . . . . . Please wait ███████████] 99% ๏̯͡๏
    maaf sobb saya like status punya kamu nya agak telat …
    TRUK nya mogok abiz diperbaikin
    ──────▄▌▐▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▌
    ───▄▄██▌█ ░ TRUK JEMPOLERS DATANG░| ▄▄▄▌
    ▐██▌ ███ █ ░░░░░░░copyright by bella©|| ▐ ███████▌█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▌ ▀❍▀▀▀▀▀▀▀❍❍▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ❍❍▀▀ ===oO~
    Jangan Lupa Ya mampir Di Status ku
    http://wanharwan.blog.com
———————————————————————————————————————————————————————————-
  • _дssдlдмц’дlдiкцм щя●щв
Sorry ganggu waktu rehat anda,, Numpang ngamen kawan,,
ѕγαĻαĻαĻαĻαĻα………… ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪
ѕγαĻαĻαĻαĻαĻα………… ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪
★ ☆✮ ✯ Sebagai Tanda Persahabatan Kita….
➨Saya Hadir Sobat ➨Saya Hadir Sobat
➨Saya Hadir Sobat ➨Saya Hadir Sobat
Selamat Pagi, Siang, Sore atau malam dimanapun anda berada. Saya hadir disini sekedar member jempol seperti byasa sekaligus coment sederhana. Berhubung tahun 2012 sudah tiba saya mau ngucapin “Selamat Taun Baru” met rehat met aktivitas sobz. Tengkyu…
Sempatkan mampir ke tempat Q ya sobz kalo gak sibuk , bentar aja cuman sekedar naruh jempol indah anda di status saya yg tak berguna…
ılıll|̲̅̅●̲̅̅|̲̅̅=̲̅̅|̲̅̅●̲̅̅|llılı♪♫•*¨*•.¸¸❤¸¸.•*¨*•♫♪♪♫•*¨*•.¸¸❤¸¸.•*¨*•♫♪
˙·٠•●♥ S A L K O M S E L ♥●•٠·˙˙·٠•●♥ S A L K O M S E L ♥●•٠·˙
___щдsдlдмц’дlдiкцм щя● щв
щя●щв
Sorry ganggu waktu rehat anda,, Numpang ngamen kawan,,
ѕγαĻαĻαĻαĻαĻα………… ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪
ѕγαĻαĻαĻαĻαĻα………… ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪ ♫ ♪
★ ☆✮ ✯ Sebagai Tanda Persahabatan Kita…. http://wanharwan.blog.com
➨Saya Hadir Sobat ➨Saya Hadir Sobat
➨Saya Hadir Sobat ➨Saya Hadir Sobat
Selamat Pagi, Siang, Sore atau malam dimanapun anda berada. Saya hadir disini sekedar member jempol seperti byasa sekaligus coment sederhana. Berhubung tahun 2012 sudah tiba saya mau ngucapin “Selamat Taun Baru” met rehat met aktivitas sobz. Tengkyu…
Sempatkan mampir ke tempat Q ya sobz kalo gak sibuk , bentar aja cuman sekedar naruh jempol indah anda di status saya yg tak berguna…
ılıll|̲̅̅●̲̅̅|̲̅̅=̲̅̅|̲̅̅●̲̅̅|llılı♪♫•*¨*•.¸¸❤¸¸.•*¨*•♫♪♪♫•*¨*•.¸¸❤¸¸.•*¨*•♫♪
˙·٠•●♥ S A L K O M S E L ♥●•٠·˙˙·٠•●♥ S A L K O M S E L ♥●•٠·˙
___щдsдlдмц’дlдiкцм щя● щв ht

Sumber : http://wanharwan.blog.com/
More aboutCara membuat Komentar Status Facebook yang unik

Cara Mudah Upload Foto Di Twitter

Posted by Azis Grafis on 6/21/12

Cara Upload Foto Di Twitter - Halo Sobat semua , kali ini saya akan memberikan Tips tentang Cara Upload Foto Di Twitter , pasti sudah banyak yang tau kan ..
nah bagi yang belum tau ini dia caranya :
disimakya ..

1. Login Ke Akun Twitter Kamu > www.twitter.com
2. Klik New Tweet

Cara Upload Foto Di Twitter
3. maka muncul kotak tweet
4. pilih gambar kamera di bawah kotak tweet stb.
Cara Upload Foto Di Twitter

5. klik gambar kamera tsb dan cari foto yang mau d upload lalu klik tweet
6. maka nanti akan terupload secara otomati ke twitter (lihat gambar)

 7. klik link http://pic.twitter.com/xxx nya , maka akan menuju ke foto yang telah kamu upload tadi
Cara Upload Foto Di Twitter


Mudah bukan Cara Upload Foto Di Twitter ?

Sumber : http://myhafiezers.blogspot.com/
More aboutCara Mudah Upload Foto Di Twitter

10 Cara meningkatkan Trafik Blog Ala Yaro Starak’s

Posted by Azis Grafis

10 Cara meningkatkan Trafik Blog  - Tulisan ini merupakan kutipan dari www.eblogtemplates.com yang menerangkan 10 cara untuk mendapatkan trafik blog yang banyak menurut Yaro Starak’s.
Berikut kutipan yang saya kutip :

  1. Buat Minimal 5 artikel utama (artikel berkualitas) , buatlah minimal 5 pembahasan yang menurut anda cukup baik dan berkualitas, sehingga orang lain akan merasakan manfaat dari membaca blog anda.
  2. Buat Minimal satu postingan dalam satu hari, hal ini perlu dilakukan terutama jika blog kita masih sedikit postingan, dan untuk menunjukkan kepada pengunjung bahwa blog kita selalu update sehingga membuatnya ketagihan informasi yang kita sediakan. Namun hal ini tidak perlu dilakukan secara terus menerus, hal ini dilakukan untuk mendapatkan pengunjung yang loyal kepada blog anda.
  3. Gunakan domain name yang baik, buatlah domain name yang mudah diingat oleh orang lain sehingga ia tidak perlu susah-susah mencatat alamat blog anda. dan ia akan lebih mudah menyebarkan kepada orang lain bila ia merasa puas dengan blog kita.
  4. Mulailah berkomentar pada blog lain, hal ini perlu dilakukan untuk meningkatkan rasa persaudaraan dan saling tolong-menolong pada blogger yang lain, hal ini juga akan bermanfaat bila orang yang membaca blog yang kita komentari dan melihat link blog kita mungkin ia akan tertarik untuk berkunjung ke blog kita.
  5. Buatlah Track back dan buat link ke blog lain, hal ini dilakukan selain untuk menambah wawasan kepada pembaca kita dengan sumber yang lain, ini juga akan mengundang blog yang kita buat track back untuk berkunjung ke blog kita dan membaca blog kita.
  6. Doronglah supaya pembaca memberi komentar kepada postingan kita, satu hal yang sangat penting untuk mendapatkan pembaca loyal adalah dengan memperlihatkan bahwa terdapat pembaca loyal lainnya yang membaca blog kita. Dengan melihat komentar dari yang lain maka ia juga ingin memberi komentar kepada blog kita. Tapi jangan lupa untuk selalu merespon kepada setiap komentar yang diterima.
  7. Kirim Postingan Blog anda ke Blog Carnival, blog karnival adalah sebuah situs yang membuat kumpulan dan kesimpulan tentang satu topik dari berbagai blog. untuk memulainya masuklah ke http://blogcarnival.com
  8. Kirim Blog anda ke www.blogtopsites.com, pertama-tama mungkin akan cukup membuat anda sibuk dengan mendaftar di www.blogtopsites.com, namun ketika anda sudah mendaftar anda tidak perlu melakukan apa-apa lagi selain mendapatkan 1-10 pengunjung tiap hari, namun lama-kelamaan akan terus meningkat.
  9. Kirim Blog anda  ke www.ezinearticles.com, hampir sama dengan yang sebelumnya, anda hanya perlu artikel yang menurut anda baik.
  10. Tulislah lebih banyak artikel utama, buatlah artikel utama yang membuat orang lain merasakan manfaat dari tulisan anda.
Demikian 10 Cara meningkatkan Trafik Blog  semoga bermanfaat.

More about10 Cara meningkatkan Trafik Blog Ala Yaro Starak’s

Membuat Read More Otomatis (Baca Selanjutnya) Versi terbaru

Posted by Azis Grafis on 6/7/12

Membuat Read More Otomatis (Baca Selanjutnya) Versi terbaru - Kali ini saya akan memberikan tutorial Blog cara membuat Read more otomatis di Blogspot Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript :

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template"

Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
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>


Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1 Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>

Sedangkan untuk Cara 2 Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>


Lalu simpan templates dan lihat hasilnya. Semoga Membuat Read More Otomatis (Baca Selanjutnya) Versi terbaru ini bermanfaat.
More aboutMembuat Read More Otomatis (Baca Selanjutnya) Versi terbaru

Membuat Buku Tamu Dengan Light Effect

Posted by Azis Grafis on 4/16/12

Hari ini ada sahabat Klinik Blogger yang bertanya kepada saya, Bagaimana cara membuat buku tamu seperti Shoutbox Melayang Dengan Light Effect jQuery . Buku Tamu kali ini adalah shoutbox melayang dengan jquery namun tampilannya berbeda dengan adanya light effect, dalam artian, saat button buku tamu di KLIK maka seluruh halaman akan gelap kecuali shoutbox atau buku tamunya.


Membuat Buku Tamu Melayang Dengan Light Effect



Untuk membuatnya sangat simple, kita tidak perlu mengutak-atik kode pada template kita, karena kalian tinggal memasangnya pada widget di Elemen Halaman. Untuk lebih jelasnya silahkan ikuti tahap-tahap pemasangannya dibawah ini:

1. Login Ke Blogger kalian
2. Pilih Rancangan ---> ELEMEN halaman
3. Tambah Gadget ---> Pilih HTML/Java Script
4. Simpan kode berikut dalam konten HTML/Java Scriptnya

<!-- Start Shoutbox light effect by Han -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var semahHeight = $(document).height();
var semahWidth = $(window).width();
//Set heigth and width to semah to fill up the whole screen
$('#semah').css({'width':semahWidth,'height':semahHeight});
//transition effect
$('#semah').fadeIn(1000);
$('#semah').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#semah').hide();
$('.window').hide();
});
//if semah is clicked
$('#semah').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>

<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#wadah .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#wadah #kid53 {
background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:56px 0 20px 5px;
}
#tutupan {
padding:2px 0 0 0;
}
</style>

<ul><center> <a href="#kid53" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>

<div id="wadah">
<!-- Start Shoutbox -->
<div id="kid53" class="window">

SIMPAN SCRIPT Cbox KALIAN DISINI

<div id="tutupan"><input type="button" value="Close" class="close" />
</div></div><!-- End Shoutbox -->
<div id="semah"></div></div>
<!-- End of Shoutbox light effect by Han-->
</div>



5. Jangan lupa disimpan


Catatan
  • Untuk ukuran shoutbox/shoutmix/cbox kalian bisa kalian sesuaikan dengan background gambar.
  • Untuk Shoutmix ukurannya Height: 380px dan Width: 261px
  • Untuk Cbox ukurannya height:300px width:250px , untuk width yang bawah samakan dengan width pertama, karena di cbox ada 2 width
  • untuk ukuran tidak harus terpaku pada punya saya diatas, kalian boleh menyesuaikannya sendiri.
untuk background gambar bisa kalian ganti dengan gambar kalian sendiri, namun jika ingin gambar buatan saya bisa menggunakan gambar dibawah ini :

http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png
http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png
http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png
http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png


TAMBAHAN :

Tampilan button shoutbox diatas letaknya didalam sidebar, dan karena ada permintaan salah satu sahabat blogger, yang meminta untuk memasang buttonnya disamping,

gan saya mau nanya ni, bisa gak bmbrnya di tempel di kanan gtu atw di kiri? mohon bntuannya ya :)
Supaya gambar berada melayang disamping silahkan kalian ganti kode ini:

<ul><center> <a href="#kid53" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>
dengan kode ini :
<ul><div style='display:scroll; position:fixed; top:5px; right:3px;'>
<a href="#kid53" name="modal"><img src="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png" width="158" height="58" /></a>
</div>
</ul>
Untuk gambarnya juga saya sudah buatkan, dan silahkan tinggal digunakan.



Semoga Membuat Buku Tamu Melayang Dengan Light Effect ini bisa membantu dan Semoga bermanfaat.
More aboutMembuat Buku Tamu Dengan Light Effect