Cara membuat tombol sosial media share diblog

Cara membuat sosial media share, seperti facebook, google+, twitter dan lain2nya diblog. Tombol sosial media share dapat kita tempatkan dibawah judul posting atau dibawah posting. Dan dapat juga ditempatkan diwidget HTML/javascript di bagian sidebar blog.

Cara membuat sosial media share di blog, ikuti langkah-langkah dibawah ini.

1. Login ke blog, lalu pilih pengaturan Template.
2. Klik edit HTML dan cari kode </head> lalu masukan kode berikut ini diatasnya.
<script src="http://w.sharethis.com/button/buttons.js" type="text/javascript"></script>
<script type="text/javascript">stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
3. Save template. Selesai.

Setelah menempatkan kode script. Sekarang kita akan coba memasukan kode share di bagian2 blog, seperti di bawah judul posting, diwidget sidebar atau dibawah posting blog. Silakan dipilih salah satu. Caranya seperti dibawah ini.

Sosial media share dibawah judul posting

1. Ke pengaturan template, klik edit hmtl dan cari kode <div class='post-header-line-1'/>
2. Kode <div class='post-header-line-1'/> ada 2,  piih yang nomor 2 lalu masukan kode share button ini dibawah nya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left' class='kode-share-buttons'>
<keterangan>Bagikan Artikel >>></keterangan>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p></b:if>
3. Silakan gunakan kode share yang kalian inginkan, dan untuk tulisan Bagikan Artikel >>> Kamu bisa ganti dengan kata yang kamu inginkan. Setelah itu save template, selesai.

Sosial media share dibawah posting

1. Ke pengaturan template, klik edit hmtl dan cari kode <data:post.body/>
2. Kode <data:post.body/> ada 3,  piih yang nomor 3 lalu masukan kode share button dibawah nya.
3. Kode kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
4. Save template, selesai.

Sosial media share di widget atau sidebar

1. Kepengaturan tata letak, Klik Tambahkan widget/gadget > HTML/Javascipt.
2. Lalu masukan kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
3. Save gadget/widget, lalu tempatkan sesuai dengan yang kalian inginkan, selesai.

Dan yang terakhir adalah menambahkan  kode css untuk menambah tampilan dari tombol sosial media share. Caranya.

1. Kepengaturan TATA LETAK. Klik desainer template > tingkat lanjut > tambahkan css. Lalu masukan kode ini kedalmnya.
.kode-share-buttons{border-top:1px dashed #ccc;border-bottom: 1px dashed #ccc;padding: 10px;}
keterangan {color:#000;font-weight:bold;margin-right:20px;}
2. Terapkan ke blog selesai.

Semoga Bermanfaat.

Cara membuat icon sendiri dengan mudah

Tutorial kali ini saya akan coba bagikan tips dan trik tentang cara membuat icon sendiri dengan mudah, menggunakan program microsoft office PowerPoint. Icon atau lambang gambar biasanya digunakan untuk logo website atau blog, ada juga untuk icon disebelah tulisan menu, bahkan digunakan juga sebagai menu.

Contohnya seperti gambar dibawah ini:

Gambar diatas adalah hasil dari pembuatan icon di PowerPoint, yang disave dalam format PNG, agar background icon tetap transparant. Untuk lebih jelasnya tentang cara pembuatan icon di microsoft PowerPoint. Ikuti langkah - langkah dibawah ini.

1. Silakan buka program PowerPoint. Lalu pilih bagian Insert.
2. Selanjutnya pilih tulisan Shape dan pilih bentuk gambar yang kita inginkan.
3. Setelah gambar nya sudah ada, klik gambar tersebut dan pilih Format dibagian atas bar powerpoint.
4. Lalu edit gambar itu sesuai dengan yang kita inginkan.
5. Untuk menyimpan gambar, klik Kanan gambar tersebut dan pilih Save as picture lalu save dalam format PNG. Selesai.

Contoh gambar icon yang saya buat. Icon pertama menggunakan satu gambar awan dan Icon kedua menggunakan 2 gambar gambar awan dan matahari.

Untuk membuat icon dengan 2 gambar, silakan buat 2 gambar di powerpoint, lalu blok ke 2 gambar setelah itu baru Save As Picture. Selesai. Jika kamu ingin menggunakan icon dengan ukuran yang sama, kamu bisa gunakan photoshop, caranya bisa dilihat di artikel cara membuat icon untuk website.

Untuk mencoba hasil gambar yang telah kamu buat diblog. Kamu bisa baca artikel mengganti tulisan beranda posting lama baru yang letaknya dibawah posting dengan gambar. Tapi sebelumnya upload terlebih dahulu gambar kamu ke blog dan ambil urlnya, caranya baca di cara upload dan ambil url gambar.

Itulah sedikit tips dan trik dari saya dalam membuat icon sendiri dengan mudah menggunakan program microsoft office PowerPoint yang dapat digunakan untuk mendesain icon blog atau website anda sendiri. Semoga bisa bermanfaat untuk anda.

Cara merapikan tulisan hasil copi internet

Cara merapikan tulisan hasil copi internet di microsoft word dengan menggunakan program notepad. Jika kita mencopi tulisan dari internet/website atau blog orang, lalu langsung kita pastekan ke microsoft word. Maka format tulisan dari internet pun akan ikut masuk ke microsoft word. Seperti contoh gambar dibawah ini. Sebelum dan sesudah dirapikan.

Dari gambar diatas kita bisa melihat, tulisan hasil copian internet jika langsung kita pastekan di microsoft word, maka tulisan aslinya pun akan ikut ke microsoft word. Berbeda dengan hasil copian internet jika sudah di pindahkan ke program notepad, lalu baru kembali ke microsoft word. Maka format tulisan akan sama yaitu format font Calibri dengan ukuran 11, tidak ada format lain. Sehingga memudahkan kita untuk merapikannya. 

Langsung saja kebagian utama. Cara merapikan tulisan hasil copi internet.

1. Pertama, silakan copi tulisan yang ada diinternet. Diwebsite atau diblog orang. Selanjutnya pastekan di Microsoft word.
2. Dari hasil copian di microsoft word, copi tulisan yang akan dirapikan.
3. Lalu pastekan ke program Notepad(Start > All Program > Accessories > Notepad)
4. Setelah itu copi tulisan yang ada dinotepad, dan pastekan kembali ke Microsoft Word. Selesai.

Kekurangan dari format ini adalah notepad tidak membaca gambar, jadi yang terbaca hanya tulisan saja. Bagaimanapun bentuk format tulisan dari sebuah tulisan, jika sudah masuk ke notepad. Maka tulisan tersebut akan berformat font Calibri ukurannya 11. Jadi istilahnya notepad ini gunannya untuk menetralisir format tulisan. 

Memang tidak sepenuhnya rapi, masih harus dirapikan sendiri tulisan di microsoft word. Tapi setidaknya format2 tulisan yang berwarna-warni dari link2 blog orang akan hilang. Jadi tidak harus mengganti warna link satu persatu dimicrosoft word. Semoga Bermanfaat.

Cara membuat background warna transparan

Background warna transparan, yang berarti background dengan menggunakan warna transparan, tetapi background aslinya juga terlihat. Jadi background awal juga terlihat, misalkan background awal kita menggunakan gambar, dan background warna transparan kita warnanya hitam. Maka warna transparan hitam dengan background gambar juga akan terlihat.

Seperti contoh gambar diatas,background dasar yang digunakan adalah background gambar, dan background trasnparanya berwarna hitam. Tapi warna hitam tersebut tidak sepenuhnya hitam. Sedikit hitam dan background gambar awalnya tetap terlihat. Berikut ini adalah beberapa kode warna background yang dapat digunakan untuk membuat background warna transparant.

background:rgba(0,0,0, 0.3);

background:rgba(0,0,0, 0.8);

Sebelumnya saya jelaskan sedikit tentang kode diatas.

• Ketiga kode awal digunakan untuk mengatur kode warna. kode warna 0,0,0 adalah warna dasar Hitam.
• Untuk kode terakhir 0.3 dan 0.8 digunakan untuk mengatur ketebalan dari warna hitam 0,0,0 tadi. Semakin besar kode terakhir, maka akan semakin hitam. Kode terakhir ini hanya sampai kode 1. Contoh:0,0,0, 1.

Untuk mengganti dengan warna lain, kamu bisa coba kode dibawah ini.

Untuk warna merah - background:rgba(204,0,0, 0.6);

Untuk warna pink - background:rgba(204,0,204, 0.8);

Untuk warna biru - background:rgba(0,0,204, 0.8);

Untuk warna Hijau - background:rgba(0,204,0, 0.8);

Untuk warna Kuning - background:rgba(204,204,0, 0.8);

Untuk warna Orange - background:rgba(255,102,0, 0.8);

Dan masih banyak lagi warna yang lainnya. Untuk melihat kode warna, kamu bisa lihat diphotoshop, lalu klik pada bagian set foreground color(gambar kotak untu ganti warna). Lalu lihat kode pada bagian RGB nya.

Seperti contoh gambar diatas, pertama klik dulu bagian kotak yang sudah saya beri tanda merah sebelah kiri, maka akan terbuka Color Picker, dan copi 3 kode RGB yang bertanda kotak merah itu untuk digunakan diwebsite.

Dan yang terakhir adalah cara penerapannya di blogger. Sebagai contoh kita akan coba mengedit pada bagian halaman posting blog. Caranya ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pada halaman Dasbor pilih pengaturan Tata Letak.
2. Selanjutnya klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode halaman posting ke dalamnya.
.post{border:1px solid #ddd; background:rgba(0,204,0, 0.5);}
3. Dan lihat perubahannya, background nya itu saya beri warna hijau, dengan ketebalan warna 0.5 hasilnya seperti gambar dibawah ini.

Untuk mengatur bagian lainnya, coba kamu baca di artikel cara mengganti background blog dengan gambar. Disana ada beberapa kode bagian blog yang dapat kamu gunakan. Semoga Bermanfaat.

Keep Those Little Turkeys Busy This Thanksgiving!

Here's wishing you and yours a very happy and healthy Thanksgiving.  And for those of you who celebrate Hanukkah, may it be a joyous one.

I am thankful for all of you for reading and following my blog.  I hope that I have been able to add some fun to your lives with my suggested toys, games and apps.  

As Thanksgiving day approaches, I know we are all busy planning our meals and getting ready for friends and family to come and spend the day with us.  Need something to keep your little turkeys occupied while prepping for the Thanksgiving Feast?  Here are a few activities that you can easily prepare for them before hand

Instead of using this picture, use blank card
stock and have them write a name and add
a Thanksgiving sticker

1.  Thanksgiving Placecards-Do you have a child who needs to work on handwriting?  Put them in charge of making the Thanksgiving placecards.  Provide them with a list of names to copy and some stickers to decorate the placecards with.  

*works on improving graphomotor, grasping, visual perceptual and organizational skills.  Better than all that though is how proud your little one will feel when they look around the table and see everyone sitting behind the placecard they created especially for them

2.  Create a Thanksgiving Thankful Tree-have your kids cut out leaves (that you have already drawn out on construction paper) and have them write down what they are thankful for.  Give your children the job of going around to all of your guests and having them write down what they are thankful for as well.  Using Crayola Window Markers, draw a tree on a large window or a glass door and have your children tape them on the tree.  

*works on improving graphomotor, grasping, visual motor/perceptual skills, improves speech and language skills (asking people to fill out their leaves) and improves organizational skills

I love this traditional hand Thanksgiving
turkey....brings back so many
early memories 

3.  Handprint Thanksgiving Turkey-I vividly remember this arts and craft project from my childhood and since becoming an OT, I have done it with my kids at work year after year.  Depending on the age and skill level of the child, I change the expectations.  For my younger children, I will trace their hand and assign a color for each finger/feather.  For my older children, I make they trace their own hand and then figure out what colors they want to use.  They can cut the handprint and then glue it onto a piece of paper.  If you have a houseful of guests coming and need your little ones occupied for a bit, give them each a handful of names and ask them to make them special holiday cards that they can hand out to your guests as they arrive.
*works on fine motor, coloring, cutting, graphomotor, bilateral coordination and visual motor/perceptual skills

I love these napkin rings made from empty
toilet paper tubes.  They use buttons but you can
use any odds and ends kind of materials to
make something special for your guests.

4.  Homemade Napkin Rings-if you have some empty paper towel and toilet paper rolls lying around, reuse and recycle them to make some homemade napkin rings for your Thanksgiving table.  The possibilities are endless and you can let your children's imagination run wild by providing them with the correct supplies.  Use stickers, markers, buttons, glue, tissue paper, etc. to create unique and special napkin rings for each of your guests.
*works on improving fine motor, grasping, graphomotor, bilateral coordination and visual motor/perceptual skills.  Again, your children will feel so proud when they look around that table filled with all the people they love



Again, I wish you and yours a very happy and healthy holiday season.  I can already feel the excitement in all of the children I work with and look forward to the upcoming weeks.  Do you have any wonderful holiday craft ideas to share with me or my readers?  I know we are all looking for ways to keep our kids involved in the holiday season and would love to hear from my readers with any ideas they would like to share with me.  I am just a click away and can't wait to test out some of the great ideas you have!

Cara buat kotak bayangan diblog

Cara membuat kotak bayangan diblog. Maksudnya adalah kita dapat membuat bayangan pada kotak yang ada diblog seperti pada bagian sidebar, posting, header dan juga pada bagian lain-lainnya. Contoh kotak bayangan seperti dibawah ini.

---

Untuk cara menerapkannya ke blog, kita coba edit pada bagian sidebar blog yang ada disebelah kanan/kiri blog. Caranya ikuti langkah-langkah dibawah ini.

---

1. Login keblogger, lalu kepengaturan Tata Letak.
2. Selanjutnya klik Desainer Template > Tingkat lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya.
.sidebar .widget {box-shadow: 0px 15px 15px #1780dd;}
3. Maka hasilnya akan seperti contoh kotak bayangan diatas.
4. Dan klik Terapkan ke blog, untuk menyelesaikan editan.

---

Berikut ini beberapa contoh kode box-shadow atau kotak bayangan yang dapat anda gunakan diblog.

---

box-shadow: 0px 0px 15px #1780dd;

box-shadow: 5px 5px 5px#1780dd;

box-shadow: -5px -5px #1780dd;

box-shadow: inset 0 0 10px;

box-shadow: 5px 5px 5px 5px #1780dd;

Silakan dicoba sendiri diblog anda, dengan menggunakan kode2 diatas. Untuk mengedit pada bagian yang lain silakan baca artikel cara mengganti blog dengan gambar atau cara membuat tulisan bayangan diblog disana ada kode2 bagian dari blog, yang dapat anda gunakan juga untuk diedit. Itulah sedikit cara mendesain blog menggunakan kode box-shadow atau kotak bayangan yang dapat digunakan diblog. Semoga bisa bermanfaat untuk anda.

Cara membuat background gradient 2 warna

Background gradient fungsinya untuk membuat background warna dengan menggunakan 2 warna sekaligus, dengan perbandingan persen disetiap warnanya. Jadi misalkan kita ingin menggunakan warna putih dan biru dibackground blog kita. Maka kita dapat mengatur warna putih dibagian atas dan warna biru dibagian bawah. Berbeda dengan pengaturan warna biasa yang hanya satu warna.Contoh penggunaannya seperti dibawah ini.

---

Background 1 warna dengan menggunakan warna biru.

---

Warna Biru Saja

---

Background 2 warna dengan menggunakan warna biru dan putih.

---

Warna Biru dan Putih

Selanjutnya adalah cara membuat dan menerapkannya diblog. Sebagai percobaan kamu bisa coba edit warna background dari halaman posting blog. Ke pengaturan tata letak > klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode background posting berikut kedalamnya.

.post{
background: -moz-linear-gradient(center top , #ffffff 40%, #1780dd 100%);}

Lalu lihat perubahan background halaman posting, warna putih akan berada diatas dan biru ada dibagian bawah.

---

Berikut jenis2 pengaturan warna gradient 2warna yang dapat kita gunakan.

---

Atas - Bawah
background: -moz-linear-gradient(top , #ffffff, #1780dd);

Kiri - Kanan
background: -moz-linear-gradient(left , #ffffff, #1780dd);

Warna Berhenti putih-biru-putih-biru-putih
background: -moz-linear-gradient(left , #ffffff, #1780dd, #ffffff, #1780dd, #ffffff);

Warna Berhenti putih-biru-putih-biru-putih dengan persen%
background: -moz-linear-gradient(left , #ffffff, #1780dd 5%, #ffffff, #1780dd 95%, #ffffff);

Warna putih dikiri-kanan dan biru ditengah
background: -moz-radial-gradient(circle, #1780dd, #ffffff);

Posisi dan Ukuran
background: -moz-radial-gradient(80% 20%, closest-corner, #1780dd, #ffffff);

Ukuran: 80% untuk warna putih dan 20% untuk warna biru
Posisi: closest-corner pada bagian atas bisa diganti dengan kode

closest-side
closest-corner
farthest-side
farthest-corner
contain
cover

Silakan berkreasi sendiri, dengan kode2 diatas dalam mendesain blog anda agar terlihat lebih menarik. Untuk cara penggunaan dibagian lain, seperti pada bagian header, sidebar atau keseluruh body halaman blog, kamu bisa baca di artikel cara mengganti background blog dengan gambar diartikel itu, ada kode dari bagian2 blog, yang dapat kamu gunakan untuk diberi background 2 warna seperti contoh diatas.
Catatan: Gradient 2 warna ini tidak bisa dilihat di browser google chrome, sebabnya saya belum tau, jika sudah tau saya akan tambahkan di artikel ini, untuk di mozilla bisa, warna gradient 2 warna terlihat.Semoga bisa bermanfaat untuk anda.