Membuat share button menggunakan sharethis.com [Video]

Membuat share button menggunakan sharethis.com [Video]

Gusti Ardias Riantono    Mei 30, 2013    Comment   

Membuat share button menggunakan sharethis.com [Video] - Malam sobat, sebenarnya saya itu lagi suntuk karena pacar lagi sakit, doakan cepat sembuh ya hehe jadi curhat sedikit :D. Pada malam ini saya mau berbagi tutorial Bagaimana Membuat share button menggunakan sharethis.com seperti yang saya gunakan di blog ini.

Contoh share button yang saya gunakan.

Okay!! Mari kita buat seperti itu haha. Ikuti langkah dibawah ini ya.
1. Buka ShareThis.com.
2. Daftar terlebih dahulu/Login jika sudah mempunyai akunnya.
3. Pilih menu Get Sharing Tools.
4. Pada step1 (Platform) klik website kemudian pilih NEXT Step2.

5. Pada step2 lihat kolom ke 2 baris ke 2 pada bagian Bars, kemudian di klik lalu NEXT Step3.

6. Pada step ke 3 ini isi sesuai data website kalian (Lihat video jika kurang jelas).

7. Klik Finish: Get The Code

Ini video tutorialnya biar lebih mudah membuatnya, silahkan disimak :)


Bagaimana menurut sobat tentang tutorial Membuat share button menggunakan sharethis.com? Mudah kan? Oke sampai disini dulu ya sobat. Semoga artikel ini bermanfaat buat kalian semua :D bye bye bye!!~

Menghilangkan Subscribe to: Posts (Atom) Pada Blogger

Menghilangkan Subscribe to: Posts (Atom) Pada Blogger

Gusti Ardias Riantono    Mei 29, 2013    7 comments   

Menghilangkan Subscribe to: Posts (Atom) Pada Blogger - Hay sobat, pada kali ini saya akan memberikan tutorial Cara Menghilangkan Subscribe to: Posts (Atom) Pada Blogger. Kenapa sih menu tersebut selalu ingin dihilangkan dari blog kita? Pasti jawabannya mengganggu pandangan pada blog kita bukan? hehe. Dan alasan spesifik mungkin kalian lebih menyukai Feedburner.com untuk mensubscribe artikel atau postingan.

Contoh Subscribe yang belum dihilangkan.

Iya langsung saja ya, ikuti langkah berikut ini:
1. Login ke Blogger.com
2. Pilih menu Template kemudian pilih Edit HTML.
3. Cari kode dibawah ini,
<div class='feed-links'><data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div>
4. Hapus semua kode diatas, kemudian simpan template kalian.

Jika tidak ingin dihapus berikan script <!-- script -->, Contohnya seperti ini:
<!-- <div class='feed-links'><br /> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div>-->
Mudah bukan? Silahkan coba di blog kalian. :)

Membuat Kotak Script Tukar Link Pada Web

Membuat Kotak Script Tukar Link Pada Web

Gusti Ardias Riantono    Mei 28, 2013    Comment   

Membuat Kotak Script Tukar Link Pada Web - Pasti kalian pernah menemukan kotak-kotak kecil yang berisikan kode untuk menaruh banner atau link blogger seseorang bukan? Contohnya seperti ini:

Nah kira-kira seperti itu contohnya. bagaimana cara membuatnya? lihat script dibawah ini,

<*textarea name="code" rows="2" cols="20"> link teks = Mari Belajar :: Blog Tutorial url = https://ardiasgusty.blogspot.com <*/textarea*>

Jangan lupa hapus karakter "*". Tulisan link teks bla bla.. bisa diganti dengan apapun sesuai keinginan kalian. Rows dan Cols juga bisa diganti sesuka hati kalian.

Oke dan begitulah Membuat Kotak Script Tukar Link Pada Web, mudah bukan? :D

Menambahkan Emoticon Pada Komentar Blogspot

Menambahkan Emoticon Pada Komentar Blogspot

Gusti Ardias Riantono    Mei 28, 2013    7 comments   

Menambahkan Emoticon Pada Komentar Blogspot - Hay sobat blogger, apa kabar? Semoga sehat-sehat saja ya :). Oke pada kali ini saya akan memberikan tutorial kecil Bagaimana Menambahkan Emoticon Pada Komentar Blogspot kalian. Kurang lebih seperti ini:

Nah bagaimana cara membuatnya? Ayo ikuti langkah-langkah berikut :D

1. Kalian login ke Blogger.com.
2. Pilih menu Template dan kemudian pilih Edit HTML.
3. Cari kode </body>, Untuk mempermudah gunakan CTRL+F kemudian cari </body>.
4. Copy kode dibawah ini tepat diatas kode </body>.
<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function () {emoticonx({ emoRange:"#comments p, div.emoWrap", putEmoAbove:"iframe#comment-editor", topText:"Click to see the code!", emoMessage:"To insert emoticon you must added at least one space before the code." }) }); //]]> </script> <script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/> </b:if> 5. Kemudian cari kode ]]></b:skin>, Gunakan CTRL+F untuk mempermudah pencarian. 6. Copy kode dibawah ini tepat di atas ]]></b:skin>. .emoWrap { position:relative; padding:10px; margin-bottom:7px; background:#fff; /* IE10 Consumer Preview */ background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%); /* Opera */ background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%); /* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%); border:3px solid #860000; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3); font-weight:normal; color:#333; } .emoWrap:after { content:""; position:absolute; bottom:-10px; left:10px; border-top:10px solid #860000; border-right:20px solid transparent; width:0; height:0; line-height:0; } 7. Kemudian simpan template dan lihat hasilnya. Walaa, mudah bukan? :)  Jika emoticon turun kebawah buka link ini.

Membuat Menu Navigasi Bergerak Jika di Turunkan Pada Blog

Membuat Menu Navigasi Bergerak Jika di Turunkan Pada Blog

Gusti Ardias Riantono    Mei 26, 2013    Comment   

Membuat Menu Navigasi Bergerak Jika di Turunkan Pada Blog - Pada kali ini saya akan memberikan tutorial Membuat Menu Navigasi Bergerak Jika di Turunkan Pada Blog. Kurang lebih contohnya seperti pada gambar dibawah ini:

Oke Langsung saja tidak usah berlama-lama haha :D

Langkah pertama adalah seperti biasa masuk ke dasbord blog kalian.
Kemudian cari kode ]]></b:skin>
Langkah berikutnya adalah copy paste code CSS di bawah ini diatas kode ]]></b:skin> tadi :

/* Top navigation */ #top-nav{background:#333;box-shadow: 0px 1px 3px rgba(0,0,0,0.4);height:28px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000}#top-nav ul{margin:0 auto;width:970px}#top-nav ul li{float:left}#top-nav ul li a{line-height:28px;padding:0 15px;color:#fff;font-size:13px;text-shadow:0px -1px 0px #000;display:block;text-decoration:none}#top-nav ul li a:hover{color:#7cae15}

Nah jika sudah melakukan langkah diatas, sekarang coba cari kode </head>.
Dan jika sudah ketemu kodenya, silakan copy paste script berikut, dan letakkan dibawah kode</head> tadi :

<!-- top navigation --> <div id='top-nav'><ul><li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> <li><a href='#'>Menu 3</a></li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a></li> </ul></div>

Jangan lupa simpan utak-atik template kalian dan sekarang menu diatas header yang bisa bergerak naik turun sudah jadi deh, tinggal menyesuaikan dengan template kalian, diantaranya :

• Angka 970px silakan ganti sesuaikan dengan lebar body template sobat.
• Ubah warna menu navigasi dan font sesuai selera.
• Tanda #, isi dengan URL menu yang sobat inginkan dan silakan sesauikan nama menunya dan juga sobat bisa menambahkan dengan yang lainnya.

Demikian tutorial ringan mengenai bagaimana membuat menu navigasi diatas header yang bisa bergerak. Semoga manfaat bagi yang memerlukan.

Membuat Menu Drop Down Animasi CSS3 di Blog

Membuat Menu Drop Down Animasi CSS3 di Blog

Gusti Ardias Riantono    Mei 26, 2013    2 comments   

Membuat Menu Drop Down Animasi CSS3 di Blog - Banyak cara dalam mempercantik sebuah blog, dengan memilih template blog yang sesuai, memasang widget blog, memodifikasi CSS blog dan salah satunya yang akan saya bahas kali ini adalah menu drop down untuk blog. Di dunia internet sudah banyak yang membahas tentang menu drop down. Bahkan banyak macamnya, mulai yang sederhana sampai yang elegant.

Sebenarnya menu drop down yang akan saya bahas kali ini bukan buatan saya sendiri. Maklum saya bukan blogger profesional, saya di sini baru belajar bisa di katakan blogger pemula. Oke lanjut saja, Menu drop down ini menggunakan CSS3. Tutorial ini saya dapat dari www.mybloggerlab.com. Jika mau lihat demonya bisa kunjungi blog ini.

Langsung saja Tutorial Cara Membuat Menu Drop Down Animasi CSS3:

1. Masuk ke blogger.com

2. Pilih Layout >> add gadget atau Tambah gadget (terserah dimana kamu ingin meletakkan menunya)

3. Kemudian pilih HTML/JavaScript

4. Copy sccript di bawah ini dan pastekan di kotak HTML/JavaScript yang kamu pilih tadi

<!--Start Animated CSS3 Multi Drop Down Menu For Blogger--> <link rel="stylesheet" type="text/css" href="https://gustiardias14.com/menuheaderardias.css"/> <nav id="mbl-menu-wrap"> <ul id="mbl-menu"><li><a href="URL-Here">Home</a></li> <li> <a href="URL-Here">Categories</a> <ul><li> <a href="URL-Here">CSS</a> <ul><li><a href="URL-Here">Item 11</a></li> <li><a href="URL-Here">Item 12</a></li> <li><a href="URL-Here">Item 13</a></li> <li><a href="URL-Here">Item 14</a></li> </ul></li> <li> <a href="URL-Here">Graphic design</a> <ul><li><a href="URL-Here">Item 21</a></li> <li><a href="URL-Here">Item 22</a></li> <li><a href="URL-Here">Item 23</a></li> <li><a href="URL-Here">Item 24</a></li> </ul></li> <li> <a href="URL-Here">Development tools</a> <ul><li><a href="URL-Here">Item 31</a></li> <li><a href="URL-Here">Item 32</a></li> <li><a href="URL-Here">Item 33</a></li> <li><a href="URL-Here">Item 34</a></li> </ul></li> <li> <a href="URL-Here">Web design</a> <ul><li><a href="URL-Here">Item 41</a></li> <li><a href="URL-Here">Item 42</a></li> <li><a href="URL-Here">Item 43</a></li> <li><a href="URL-Here">Item 44</a></li> </ul></li> </ul></li> <li> <a href="URL-Here">Work</a> <ul><li><a href="URL-Here">Work1</a></li> <li><a href="URL-Here">Work2</a></li> <li><a href="URL-Here">Work3</a></li> <li><a href="URL-Here">Work4</a></li> </ul></li> <li><a href="URL-Here">About</a></li> <li><a href="URL-Here">Contact</a></li> </ul></nav> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(function() { if ($.browser.msie && $.browser.version.substr(0,1)<7) { $('li').has('ul').mouseover(function(){ $(this).children('ul').css('visibility','visible'); }).mouseout(function(){ $(this).children('ul').css('visibility','hidden'); }) } /* Mobile */ $('#mbl-menu-wrap').prepend('<div id="mbl-menu-trigger"> mbl-Menu</div>'); $("#mbl-menu-trigger").on("click", function(){ $("#menu").slideToggle(); }); // iPad var isiPad = navigator.userAgent.match(/iPad/i) != null; if (isiPad) $('#mbl-menu ul').addClass('no-transition'); }); </script>

 Pengaturan:

• Ganti tulisan URL-Here dengan url yang kamu inginkan
• Tulisan yang berwarna Biru ganti dengan nama sesuai label atau url yang di tuju

5. Jika sudah selesai klik save atau simpan

Tutorial Menu drop drown diatas sangat simple, karena kamu tidak perlu melakukan edit HTML dan mengeditnya pun juga mudah tidak usah repot-reepot lagi melakukan dari edit HTML. Sekian dulu tutorial membuat Membuat Menu Drop Down Animasi CSS3 di Blog, semoga tutorial ini dapat bermanfaat untuk sobat blogger semuanya. Terima kasih

Materi dan Soal UTS Interpersonal Skill Bu Linda Islami

Materi dan Soal UTS Interpersonal Skill Bu Linda Islami

Gusti Ardias Riantono    Mei 22, 2013    Comment   

Linda Islami Dosen dan PR Manager Universitas Budi Luhur. Sebagian Dari Materi Ibu Linda Islami tidak berbasis teori, namun interaksi langsung dari mahasiswa mahasiwa, artinya mahasiswa lebih banyak diberikan share dan mendapatkan ilmu dari interaksi tersebut.

Ternyata bu Linda hanya memiliki akun facebook fans page, keren juga sudah memiliki sekitar 1800 orang, Ini kalo mau gabung Public Speaking with Linda Islami ga tau deh yang asli namanya apa kalo facebook aslinya atau mau ke twitternya Linda Islami. 

Soal UTS dari Bu Linda Islami seperti ini

1. Menurut Kurt Singer Manusia Mempunyai 3 Kecakapan dasar (basic skill) seperti ketrampilan negosisasi, ketrampilan mengelola konflik, ketrampilan pluralisme. Bagaimana cara anda untuk meningkatkan kecakapan dasar tersebut ? Jelaskan !

2. Komunikasi Antar Manusia dapat dilakukan secara non verbal. Jelaskan menurut anda kelebihan dan kekurangan dari komunikasi non verbal tersebut ? Jelaskan !

3. Jelaskan teori komunikasi dari Schram, Duncan dan De Vito ? Apakah menurut anda teori teori tersebut bisa efektif dalam kehidupan bermasyarakat ? Jelaskan !

4. Jelaskan bentuk bentuk Interaksi sosial yang dapat mengakrabkan hubungan antar manusia (Assosiatif) dan yang dapat merenggangkan hubungan manusia (Desosiatif) kaitkan dengan Human Relation. Jelaskan !

5. Dalam berorganisasi kita sering kali mengalami Disosiasi (gangguan) yang dapat menimbulkan konflik. bagaimana cara anda mengasah kecakapan mengelola konflik sehingga hubungan dapat berjalan harmonis. Jelaskan !

Jika mau download  materi Bu Linda ada disini - Download

Cara Membuat Page Navigation Number di Blogspot

Cara Membuat Page Navigation Number di Blogspot

Gusti Ardias Riantono    Mei 15, 2013    6 comments   

Cara Membuat Page Navigation Number di Blogspot - Cara Membuat Page Navigation Number di Blogspot. Sudah pernah melihat kan beberapa template yang menggunakan page navigation number pada templatenya. fungsi dari page navigation number ini adalah untuk menggantikan link posting lama atau posting baru yang ada pada bawah postingan halaman utama pada sebuah template. Dengan page navigation number ini pengunjung bisa bebas memilih halaman postingan keberapa yang ingin dibaca.

Page navigation number ini juga bisa dibilang memberikan kesan rapi dan indah pada blog kita, walaupun saya sendiri tidak menggunakannya. Tetapi jika ada sobat yang ingin menggunakan page navigation pada blognya, berikut ini saya berikan Cara Membuat Page Navigation Number di Blog.

1.Log in ke blogger.
2.Klik template » edit HTML » centang Expand Template Widget.
3.Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat di atasnya.

/* -- NUMBER PAGE NAVIGATION -- */ .showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898} .showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana} .showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262} .showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111} .showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none} Sumber : https://jembersantri.blogspot.com/2012/11/cara-membuat-page-navigation-number-di-blog.html#ixzz2TKBCFfTU Follow us: jembersantri.blogspot.com on Facebook

4.Cari kode </body> dan letakkan kode dibawah ini tepat di atasnya.

<!-- PAGE NAVIGATION START--> <script type='text/javascript'> var pageCount=4; var displayPageNum=4; var upPageWord ='« '; var downPageWord =' »'; </script> <script src='https://u-sup.googlecode.com/files/page_num.js' type='text/javascript'/> <!-- PAGE NAVIGATION END--> Sumber : https://jembersantri.blogspot.com/2012/11/cara-membuat-page-navigation-number-di-blog.html#ixzz2TKBJw9oy Follow us: jembersantri.blogspot.com on Facebook
Keterangan:

• Jika anda ingin mengganti jumlah postingan yang akan ditampilkan pada setiap halaman silahkan ganti kode yang berwarna biru.

5.Cari kode 'data:label.url' dan ganti kode itu dengan kode dibawah ini.

'data:label.url + "?&max-results=7"'

Keterangan:

var pageCount=4; (Jumlah postingan yang akan ditampilkan)
var displayPageNum=4; (Jumlah tombol angka navigasi)


6.Save Template anda.

Nah selesai sudah Cara Membuat Page Navigation Number di Blog mudah-mudahan artikel ini bisa bermanfaat bagi anda

Terima Kasih Anda Sudah Membaca Artikel Tentang Cara Membuat Page Navigation Number di Blog

Sumber : https://jembersantri.blogspot.com