Mengalihkan Link dengan JavaScript - Pada postingan sebelumnya saya memberikan persembahan bagi top komentator berupa pengalihan link dari Google Plus menuju blog. Banyak sahabat yang bertanya bagaimana caranya? sebenarnya script ni telah saya posting sebelumnya yaitu : Mengganti Link URL dengan JavaScript.javascript

Intinya untuk mengalihkan satu link ke link yang lain, sobat bisa menyimpan script ini di atas </body>
<script type="text/javascript">
jQuery("a[href='URL-Asli']")
.attr('href', 'URL-Pengganti')
</script>
atau
<script type="text/javascript">
$("a[href='URL-Asli']")
.attr('href', 'URL-Pengganti')
</script>

Mengalihkan Komentator Google Plus ke Blog


Yang saya lakukan untuk sahabat adalah mengalihkan link komentator aktif, menuju Blog. Hal ini saya lakukan untuk mempermudah blogwalking, dan supaya pengunjung lain mudah menemukan blog komentator.

Script yang saya pakai adalah script diatas, konsepnya seperti contoh ini :
<script type="text/javascript">
$("a[href='http://www.blogger.com/profile/07706142952405337288']")
.attr('href', 'http://blog.kangismet.net/')
$("a[href='url-profil-google-plus-seperti-di-atas']")
.attr('href', 'url-blog-seperti-di-atas')
$("a[href='url-profil-google-plus-seperti-di-atas']")
.attr('href', 'url-blog-seperti-di-atas')
$("a[href='url-profil-google-plus-seperti-di-atas']")
.attr('href', 'url-blog-seperti-di-atas')
</script>
tambahkan saja terus URL Profil Google Plus, dan bawahnya blog tujuan. simpan di atas </body>.

Apabila terlalu banyak, silahkan simpan di Google Drive. Untuk menyimpan di google drive, hilangkan tulisan <script type="text/javascript"> dan </script> copy kode seperti ini :
$("a[href='http://www.blogger.com/profile/07706142952405337288']")
.attr('href', 'http://blog.kangismet.net/')
$("a[href='url-profil-google-plus-seperti-di-atas']")
.attr('href', 'url-blog-seperti-di-atas')
$("a[href='url-profil-google-plus-seperti-di-atas']")
.attr('href', 'url-blog-seperti-di-atas')
$("a[href='url-profil-google-plus-seperti-di-atas']")
.attr('href', 'url-blog-seperti-di-atas')
paste di Notepad, kemudian Save As, pada Save as Type pilih All Files. Simpan dengan akhiran ekstensi .js, misalkan ganti-url.js kemudian upload ke Google Drive.

Untuk menyimpan di template, simpan kode di atas </body> :
<script src='url-file-di-google-drive' type='text/javascript'/>
Semoga bermanfaat....

88 komentar

tap mantap .. sangat informatif banget kang
hatur thankyu

Balas

Sudah saya praktekin mas, ternyata memang gampang mas... hehehe di bandingkan belajar CSS yang dari dulu gak mudeng-mudeng, aku malah mudeng dengan JavaScript yang ini. bisa di bilang ini adalah JavaScript pertama yang aku bener-bener paham cara kerjanya. hahahaha

Balas

kunjungan malam Kang :), Kang boleh bertanya gak?bagaimana cara menambah tombol like di bawah posting blog(seperti di blog akang ini) itu yang diatas "Kunjungi juga artikel lainnya". Klo bisa,saya mohon dikasi tutorialnya.Thanks :)

Balas

tambah ilmu lagi :)
kang mau tanya nih, apa perbedaan dari :

<script src='http://blablabla.com' type='text/javascript'/>

dan

<script src='http://blablabla.com' type='text/javascript'/>
</script>


apakah tag penutup </script> itu di perlukan??

Balas

mantap dehhhh, kang blogku baru redesign, apakah responsive? xixixixi xD

Balas

wah lumayan buat di pelajari.... siapa tau bisa buat yang aneh2 :D

Balas

Bookmark → Tidur → Ke Jamban → Nyalain PC → Launch Modem + Open Browser + Open Bookmark → Login Blogger ! ( Intinya : Izin sedot kang ) #mangstaaab :D

Balas

wah,,,,boleh juga nich infonya kang,,,,
haturnuhun!

Balas

tapi kenapa kadang2 error(nggak bisa disimpan) ya mas kalo nggak di tutup pake </script> ??

Balas

seueur pisan atuh kang lamun hiji rw di alihkan sadaya..hahahay
cobi miluan anggo nalika sunda kang hahahay

Balas

sebenrnya gampangan CSS malah... congratz deh udah faham JS sekarang :)

Balas

Cari kode :
<div class='post-footer-line post-footer-line-3'>
....
</div>

Simpan kode ini, dibawahnya :
<div style='float:left;width:98.5%;background:#f2fabd;border:1px solid #ccc;;padding:11px 0 5px 10px;margin:5px 0 5px 0'>
<span style='float:left;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></span>
<span style='margin-left:15px'><a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='medium'/></span>
</div>

Balas

penutup tag </script> itu diperlukan, kalau tidak ditutup pasti error...
tag script yang sudah ditutup contohnya seperti ini :

[img]http://4.bp.blogspot.com/-9f9M8l113os/Ue74gWn7WnI/AAAAAAAAE7Y/_mlMlb_u_1I/s1600/penutuptag1.png[/img]
atau
[img]http://1.bp.blogspot.com/-tdmZasIaZ7A/Ue74jY94w3I/AAAAAAAAE7g/Pnf6gpgt_jQ/s1600/penutuptag2.png[/img]

Balas

pasti responsive... xxixiixi

Balas

kalau punya yang aneh ditunggu sharingnya

Balas

iraha sahurna ateuh :0

Balas

sama2 ki... eta teu cangkeul ngiceup?

Balas

pasti seueur... ngan resiko ;)

Balas

Apa nda nda alternatif lain Kang seandainya setiap pengunjung yang berkomentar dengan menggunakan profil google plus nya langsung di arahkan ke url tertentu tanpa memasukan segitu banyak url google plus pada kode tersebut.

Balas

Untuk sementara saya pake dulu cara yang ini Kang dan alhamdulillah hasilnya udah sukses... :D


<script type="text/javascript">
$("a[href='URL-Asli']")
.attr('href', 'URL-Pengganti')
</script>

Balas

Oh jadi seperti itu.. kreatif bgt kang..

Balas

Alhamdulillah lagi ya Kang coz beberapa url profil blog sobat2 saya yg sering berkunjung ke blog saya udah saya alihkan ke url homepage blog mereka masing2 dan saya sdh menggunakan cara kode js nya udah saya upload di akun google drive saya. Untuk kesekian kalinya, makasih banyak ya Kang. Moga ilmunya tambah berkah deh di Bulan Ramadhan ini... :)

Balas

hehe yaa gitu lah mas kadang masih suka rada bingung kalo liat CSS. moga aja kedepannya bisa .... :D

Amin ..

Thanks Kang Ilmunya ...

Balas

ini dia yang saya tunggu.. thank mas

Balas

Ini ya yang kemarin ditanya sama teman blogger cara membuat url google plus lansung mengarah keblognya.Sepertinya ini jadi jawaban besar Kang :)

Balas

maaf kalo out of topic.. apa akang dan sobat2 disini pernah ngalami pengomentar dengan openid seperti ini?
[catatan][img]http://i.imgur.com/5fgqm9N.png[/img][/catatan]
anonymous & name/url emang sudah tidak saya berlaku, lahh itu bisa begitu layaknya name/url -_- solusinya kira-kira apa kang.. selain harus menggunakan sistem komentar dengan akun google

Balas

lumayan lieur diajar JS teh, kira-kira tempat belajar JS dimana kang ?
Salah sedikit kadang tidak berfungsi JSnya.. :)
kang maksud .attr sma $ apa ? trus a[href, kenapa gk pisahin sama spasi..

Balas

kayaknya gk bisa ngilangin OpenID doang, soalnya itu bawaan blogger. Solusinya cuman sistem komentar dengan akun google. :)


Balas

mungkin kita bisa memanipulasi JS diatas untuk mengatasi komentar OpenID seperti halnya pengalihan URL. :)

Balas

hampir sama dengan punya saya yang ini ya kang

http://www.fullblogdesign.com/2013/02/link-aktif-di-komentar-menjadi-url-home.html

Balas

kalo saya harus pake sistem komentar akun google, mending saya pake sekalian saja Google+ Comment fungsinya lebih mumpuni, bisa hashtag #, menandai dengan + (pake @ kalo di fb mah), sudah threaded comment, text formatting kyk Bold-Italic, tautan[gambar,video,link tertaut]

Balas

inilah yang saya tunggu sob.. daritadi ane cari tw gimana caranya supaya link komentar openid yang seperti itu menjadi :
format : namablog.host.domain/dir/permalink
- nama openid jadi namablog
- link openid jadi namablog.host.domain

walaupun sebenarnya cara manipulasi pada postingan kang ismet diatas bisa diterapkan untuk ini, tapi itu manual banget sob :(

Balas

hatur nuhun kang.. ilmuna bermanfaat :)

Balas

saya coba pake yang ada dipostingan sebagai inputan dari saya, mungkin bisa membantu melanjutkan kerjasamanya :
format : namablog.host.domain/sub/*/* dan seterusnya
misalkan : $1.$2.$3/$4/$5

var URL-link = // kode yg bisa menerjemahkan/membaca URL dari http sampai html //
var URL-ganti = // kode yg bisa membaca dari var URL-link dan menangkap bagian namablog.host.domain ($1.$2.$3) //
var nama blog = // menangkap namablog atau $1 //
jQuery("a[href='URL-link']")
.attr('href', '$1.$2.$3')
.text('$1')

Balas

pertanyaan yang bagus ... :D Tolong dijawab kang dimana tempat belajar JS ... :)

Balas

Ada tutorial baru ini untuk mengubah link google plus langsung redirect ke link blog,simpan kodenya Mas mudahan nanti bisa dipraktekkan.

Balas

ogh gitu ya kang, saya kurang cermat memperhatikan ini kang :
[img]http://1.bp.blogspot.com/-tdmZasIaZ7A/Ue74jY94w3I/AAAAAAAAE7g/Pnf6gpgt_jQ/s1600/penutuptag2.png[/img]

saya pikir itu belum ada tag penutupnya, nuhun kang, hehehe

Balas

ohh ternyata pengalihanya sederhana ya kang,,, tak kirain rumit ;)

Balas

memang selalu mantap kang :-d

Balas

bisa bisa sampe ratusan lebih nih...

Balas

hebat ente jago JS.. :-bd dari dulu ane malah ga mudeng sama yg namanya JS n jQuery..
malah mudengan CSS....
ajarin donk JSnya... !!! :D

Balas

kayaknya ga sampe deh sob kalau cuman top komentator ;)

Balas

ga serumit yang dibayangkan sob.... :)

Balas

silahkan disimpan saja sob :)

Balas

emang konsepnya sama sob....

Balas

kalau belajar dari dasar, saya belum nemuin sob... tapi banyak ko yang bahas di forum2.. spt stackoverflow dll.
.attr = attribute, $ = shortcut dari jQuery, terus untuk penulisan javascript, berbeda dengan HTML...

Balas

itu efek dari openID sob...

Balas

terima jadi aja deh... puyeng juga ngurus JS :)

Balas

mudah2an... bermanfaat sob :)

Balas

sama2 sob.... semoga bermanfaat

Balas

Kang, saya mau tanya. Sebelumnya bisa lihat blog saya yg Ilmu Umum. Cara membuat kolom widget dibawah posting jadi dua gimana kang ? Makasih ilmunya...

Wassalamualaikum...

Balas

Soalnya komentar di blog saya masih sepi, jadinya pakainya kapan2 deh L), bookmars dulu aja :D

Balas

Sama,., Di Bookmaks Dulu Aja..

Balas

ijin nyomot ilmunya kang

Balas

wa'alaikum salam.... maksudnya yang mana ya? related post? masih bingung pertanyaannya

Balas

Hemmm maksudnya baru mudeng kali ini mas .... Coz kode JS yang di atas itu prinsipnya sangat simpel ... hahaha
Kalo CSS masi belajar saya mas ... Ajarin dong ... :D

Balas

Aku punya buku tentang jQuery sih ... tapi ya tetep aja gak mudeng ... :|

Balas

Bah haha, ini keren jg, dikirain ente dri google plusnya... trnyata pks js toh..

Balas

sma saya juga masih belum begitu paham tentang JS..:(

Balas

Semangat untuk belajar JS sma jQuery gan.. :)

nuhun kang ismet nambah ilmu tentang JS na..

Balas

Sy simpan dlu acriptnya Kang, kebetulan juga blog sy blum banyak pengunjung nnti udh rame kayak pasar baru saya pasangi script ini

Balas

Kalau terlalu banyak Link yg dipasang pd template apa nggak berat Kang, apalagi kalau blognya dihapus otomatis akan berdampak pd blog kita seperti Broken Link

Balas

kapan2 mampir atuh kang ka blog saya :D hehehe

Balas

izin nyimak n belajar,,,
newbie,,,,,,,

Balas

[ Laporan ] kang ismet!! *sambil hormat*

link Blogger Profile / Google+ kang ismet , sudah saya replace di blok saya :D ..

check TKP -- hatetepe://blog.riandesign.web.id ! ^_^

Balas
Komentar ini telah dihapus oleh pengarang.

oh ternyata begitu caranya, berarti menggunakan google drive merupakan salah satu cara untuk memperkecil HTML ya ?

mohon dimaklumi masih newbie

Balas

Kalau untuk membuat attribute blog menggunakan javascript gimana kang? contoh kayak di template Zikazave kang ismet. Btw, makasih sebelumnya kang :)

Balas

|o| jadi apa guna mereka memakai google account untuk berkomentar? :) sementara ada openID kalo pengen identitasnya sebagi alamat blog. tujuannya memang OK, tapi tidak sejalan.
ya sebenarnya ada cara kang supaya tujuan akang biar sejalan sama pengomentar berkomentar sebagai apa =D hehe maaf bikin bingung kang, salam olahraga.
btw, kodenya jadi panjang gitu ya kalo nambah list @@,

Balas

apa guna mereka memakai google account untuk berkomentar? tentunya sulit saya mengetahui jawabannya. sebagai ukuran ya saya sendiri. kenapa berkomentar dengan google account :
1. Kalau pun tersedia Name/URL saya males ngetik lagi
2. Males pake Open ID yang kadang2 tidak terverivikasi (malah terkesan cuma ingin nyimpen link kalau pake OpenID).
3. Tidak terintegrasi dengan Gravatar, kalau ada gravatar sprti WP, saya pilih gravatar.

Kenapa saya alihkan sebagian komentator ke alamat blog?
dengan banyaknya komentator, sulit untuk mengingat URL mereka. Terkadang saya tidak menemukan mereka di G+. Saya alihkan URL mereka untuk memudahkan blogwalking saya sendiri.

Apakah cocok keinginan saya dengan mereka?
Ternyata dari lebih 40 URL G+ yang saya alihkan, hanya 1 orang yang minta di kembalikan ke G+. selebihnya mereka berterimakasih, artinya 99% sesuai keinginannya dengan saya.

pertanyaan saya, gimana yang sejalan itu? bagaimana supaya tujuan saya biar sejalan sama pengomentar sesuai komen sobat di atas? mohon masukannya.

Balas

kalo dari pihak pelanggan blog akang setuju, berarti sejalan. tetapi mungkin ada baiknya kalo pake cara lain, pasti lebih efektif :) penampakan seperti yang saya terapkan di blog saya baru saja. begitu yang saya maksud :D salam

Balas

silakan dilihat kang http://lekitra.blogspot.com/2013/08/Menambahkan-Link-Blog-Setiap-Komentator-Google-Profile.html ^_^ maaf sudah menyertakan link

Balas

nah makanya tidak bisa dibilang tidak sejalan dan keluar tujuan kan?

Balas

hohoho udah ketauan komentator kaya gini tipikalnya kang, biasanya komplen, nunjukin link dan mengatakan dengan sombongnya SCRIPT SAYA YANG PALING HEBAT, ga percaya liat aja :)

Balas

tidak apa2 kalo akang beranggapan begitu lebih dulu. ternyata pemikiran pertamanya menjadi sungguhan. padahal saya nya tidak sama sekali :D lain waktu tidak akan. klo soal hebat, akang tetap lebih Hebat ^_^

Balas

@kang ismet Okelah kang, makasih sudah saling share. semoga blognya selalu jaya ^_^

Balas

@semar : cara penyampaian orang berbeda2 sob.. ambil saja hikmahnya

Balas

makasih masukannya sob :)

Balas

Maaf kang gak sesuai topik posting. Kok kang kenapa ini semua kotak komentar blogger di ganti jadi kayak komentar google+, toggle google+ dan blogger juga gak bisa di klik. Gimana nih solusinya kang?

Balas

emang dari bloggernya di ganti sob.. oh iya saya baru nyadar toggle commentnya ga jalan.. nanti coba saya cari tau

Balas

Hehehe, kang ismet, jarang kasih komentar lewat komentar google plus ya?, pantesan gak tau togglenya gak jalan. baru sekarang taunya..

Balas

Poskan Komentar


×
Chat