Cara Membuat Efek Shadow pada Outer/Tepi Blog

Oleh Muhammad Farhan

Cara Membuat Efek Shadow pada Outer/Tepi Blog - Mungkin outer atau yang disebut dengan tepi blog sudah seringkali kita lihat pada blog-blog rekan seperjuangan, banyak sekali variasi-variasi dari yang mereka gunakana, ada yang menggunakan border, ada juga yang menerapkan background outer blog berbeda dengan background blog, atau seperti blog saya ini yang menggunakan efek shadow. Efek shadow adalah efek yang akan meberi bayangan pada outer atau tepi blog tanpa diberi border maupun garis tepi blog. Sebenarnya penggunaan feature ini tak lain dan tak bukan hanyalah untuk membatasi antara luar dan dalam outer blog dan mungkin juga dapat mempercantik blog kita dalam faktor berpenampilan.

Bisa kita lihat pada gambar diatas, atau bisa juga langsung lihat ke outer atau tepi blog ini, itu adalah contoh dari efek shadow atau bayangan yang akan kita buat nanti, saya sarankan untuk pemasangan box shadow ini anda jangan memberikan border pada garis tepinya, karena diberikan shadow saja sudah cukup dan tampak lebih bagus. Disini anda dapat memperlebar efek shadow atau glownya sesuka hati anda, misalnya blog ini menggunakan padding 10 px, mungkin saja jika anda menginginkan bayangan yang lebih jauh lagi, anda bisa menambahkanya menjadi 15 bahkan 20px, tinggal disesuaikan dengan kebutuhan dan keperluan blog kita. Oh iya sobat satu lagi, saya sarankan untuk blog anda yang bertema terang lebih baik gunakanlah shadow #ffffff atau warna putih untuk hasil yang nampak bagus dan clean.

Selain itu, ternyata pemasangan feature ini juga sangat mudah dan praktis sekali, anda hanya perlu menambahkan beberapa kode script pada Edit HTML, tanpa menggunakan JavaScript. Well, bagi anda yang berminat untuk memasang efek shadow di blog anda, silahkan disimak yang berikut ini.

1. Login ke Blogger.

2. Pilih Template.

3. Klik Cadangkan/Pulihkan.

4. Klik Unduh Template Lengkap.

5. Setelah templatenya terunduh, klik kanan pada file tersebut, pilih "Open With" lalu buka dengan wordpad/notepad.

6. Cari salah satu kode di bawah ini (gunakan CTRL+F), karena pada umumnya kode setiap template sedikit berbeda.

content-outer

atau

content-wrapper

atau

wrap

atau

outer-wrapper 

Keterangan: jika semua kode diatas tidak ada, carilah kode yang menunjukan outer wrapper atau tepi pada blog anda.

7. Lalu, letakkan kode di bawah ini tepat dibawah salah satu kode pada langkah ke-6 tadi.

border:2px solid #0000ff;
border-color:#9ecaed;
box-shadow:0 0 10px #666}

Keterangan:

• 2px = ketebalan border outer (jika tidak perlu, berikan saja 0px)
• #0000ff = warna border outer
• 10px = ketebalan efek shadow outer blog
• #666 = warna shadow outer blog

Demikian informasi tentang cara membuat efek shadow pada outer/tepi blog, baca juga artikel lainya seputar tutorial blog tentang cara membuat bismillah pada postingan blog, semoga bermanfaat, dan selamat mencoba. Smart Choice, Right Way...

Cara Membuat Social Share Button Warna Warni

Oleh Muhammad Farhan

Cara Membuat Social Share Button Warna Warni - Social Share Button atau yang sering kita kenal dengan tombol untuk berbagi adalah widget yang bertujuan untuk memudahkan pengunjung dalam merefrensikan maupun merekomendasikan konten-konten bermanfaat di blog kita, dengan hanya satu klik saja mereka (pengunjung) sudah dapat membagikan artikel tersebut secara otomatis tanpa harus repot-repot lagi meng-copy permalink dari artikel di blog kita.



Sebenarnya jika kita sering berkunjung ke blog rekan-rekan blogger, tentunya banyak sekali variasi dan modifikasi yang mereka lakukan guna mempercantik tombol sharing mereka, seperti yang sudah saya bahas juga sebelumnya tentang membuat tombol sharing di bawah postingan dengan icon, namun pada kesempatan kali ini saya akan sedikit membahas tentang sharing button yang saat ini saya gunakan, widget tersebut di refrensikan oleh teman saya kompi ajaib dan dibuat oleh mas sugeng, tetapi ada beberapa script yang saya tambahkan agar lebih lengkap.

Tak jauh berbeda dengan tombol share icon yang sebelumnya pernah saya publikasikan, sekarang ini saya akan sedikit meringkas kode dari css dasarnya agar dapat berjalan walaupun tidak menggunakan javascript, atau script yang sudah di modified, pasalnya penggunaan javascript yang terlalu banyak juga akan berpengaruh pada loading blog yang akhirnya akan berdampak pula pada rating dan seo blog kita.

Secara kasat mata, widget share button ini juga tidak kalah kok bagusnya dengan widget original dari developer social media yang belum di modifikasi. Selain itu, kita juga dapat menyesuaikan warna latar belakang dari tombolnya agar lebih kontras dengan warna tema blog kita, atau kita juga bisa memberikan warna tombol sesuai dengan social medianya, misalnya Facebook warna biru, Google+ warna merah, dan Twitter warna biru muda.

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML

4. Klik tanda panah hitam disebelah ]]></b:skin> (antarmuka Edit HTML yang baru), lalu akan muncul semua kode css-nya.

5. Cari kode <data:post.body/> (gunakan CTRL+F), jika anda sudah memasang read more otomatis di blog, maka pilihlah <data:post.body/> yang ke-2 atau sesuaikan dengan kode yang menunjukkan letak dari konten atau tempat artikel anda berada.

6. Letakkan kode di bawah ini tepat dibawah-nya (dibawah artikel) atau di atas-nya (diatas artikel).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:3px dotted #ccc;border-bottom:1px solid #b8b8b8;width:100%;height:25px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#777'>
<strong>Share this article</strong> :
</div>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Facebook'>Share on FB</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' style='color: #fff; background: #808080; text-decoration: none; border: 1px solid #000000; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Submit to Digg'>Submit to Digg</a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Twitter'>Tweet</a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Google+'>Share on G+</a>
</div></b:if>

Keterangan: (kode warna : disini)

• 3b5998 = kode warna HTML background tombol facebook
• 313c7d = kode warna HTML border tombol facebook
• 808080 = kode warna HTML background tombol digg
• 000000 = kode warna HTML border tombol digg
• 4099FF = kode warna HTML background tombol twitter
• 3a8be8 = kode warna HTML border tombol twitter
• c0361a = kode warna HTML background tombol google+
• 9c2c15 = kode warna HTML border tombol google+

7. Klik "Save Template", dan selesai,

Demikian informasi seputar tutorial blog tentang cara membuat social share button warna warni, semoga bermanfaat, dan selamat mencoba. Adorable Choice, Good Result...

Cara Membuat Kotak Iklan Teks seperti Iklan PPC

Oleh Muhammad Farhan

Cara Membuat Kotak Iklan Teks seperti Iklan PPC - Monetize blog atau menghasilkan uang dari kegiatan nge-blogging tentunya merupakan hal yang didamba-dambakan bagi seluruh blogger, pasalnya hanya dengan menjalankan aktivitas nge-blogging yang sederhana kita sudah dapat menghasilkan tambahan pendapatan. Jika kita sering berkunjung ke blog rekan-rekan blogger tentunya kita akan melihat beraneka ragam jenis iklan, mulai dari review produk, banner ads, text ads, hingga iklan ppc atau yang biasa kita kenal dengan Pay Per Click, atau sebuah layanan media partner yang akan membayar kita setiap ada iklan advertiser yang di klik oleh pengunjung, jadi hasil pendapatan kita tidak bergantung pada jumlah impresi iklan, melainkan jumlah klik yang didapat, itu artinya semakin besar trafik semakin besar juga kesempatan untuk menambah penghasilan tambahan.

Sebenarnya di dalam blogsphere iklan dikenal menjadi 2 opsi, yaitu iklan durasi dan iklan PPC seperti yang sudah saya paparkan tadi diatas, nah, kalau iklan durasi adalah iklan yang menampilkan promosi advertiser dan dibayar per-durasi atau jangka waktu yang telah ditentukan, misalnya 150.000/bulan, jadi kalau nanti misalnya iklan tersebut hanya mendapatkan sedikit klik, itu tak menjadi masalah, karena iklan durasi hanya berketergantungan dengan jangka waktu pemasangan dan tidak berpengaruh terhadap banyak sedikitnya jumlah klik yang didapatkan.

Berhubungan dengan iklan durasi, pada kesempatan kali ini saya akan membahas tentang cara membuat tampilan kotak iklan teks yang mirip dengan iklan teks PPC yang biasa kita lihat, sebenarnya jenis iklan PPC terbagi atas dua, yaitu banner dan text, namun pada kesempatan kali ini saya akan membahas yang text, karena kalau yang banner pada hakikatnya hanyalah memasang gambar dengan link yang bertautan ke situs lain, berbeda dengan yang text karena membutuhkan tata letak yang mirip dengan iklan PPC seperti contoh yang bisa kita lihat pada gambar diatas.

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Klik tanda panah hitam disebelah <b:skin>.

5. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode di bawah ini tepat diatas-nya.

#iklan_ppc {text-align: left; width:300; height:250; padding:5px; margin:0px;border:1px solid #1a4d86}

Keterangan:

• 300 = Lebar iklan
• 250 = Tinggi iklan
• 1px = Ketebalan border iklan
• #1a4d86 = Warna border iklan

6. Klik "Save Template".

7. Sekarang, masuk ke halaman Tata Letak/Layout.

8. Klik Add Gadget > Pilih HTML/JavaScript.

9. Letakkan kode di bawah ini kedalam box "Konten".

<div id='iklan_ppc'>
<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="http://farhanshare.blogspot.com/" target="_blank" title="Tutorial Blog"><strong>Farhan Share</strong></a><br />
<span style="font:11px verdana;">Tutorial blog dan trik internet gratis!</span><br />
<a style="font-size: 9px;color:black;" href="http://farhanshare.blogspot.com/" target="_blank" title="Tutorial Blog">farhanshare.blogspot.com</a><br/><br/>
<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="http://farhanshare.blogspot.com/" target="_blank" title="Tutorial Blog"><strong>Farhan Share</strong></a><br />
<span style="font:11px verdana;">Tutorial blog dan trik internet gratis!</span><br />
<a style="font-size: 9px;color:black;" href="http://farhanshare.blogspot.com/" target="_blank" title="Tutorial Blog">farhanshare.blogspot.com</a><br/><br/>
<a style="text-decoration: underline; padding: 15; font-size: 12px; color:blue;" href="http://farhanshare.blogspot.com/" target="_blank" title="Tutorial Blog"><strong>Farhan Share</strong></a><br />
<span style="font:11px verdana;">Tutorial blog dan trik internet gratis!</span><br />
<a style="font-size: 9px;color:black;" href="http://farhanshare.blogspot.com/" target="_blank" title="Tutorial Blog">farhanshare.blogspot.com</a><br/>
<a style="text-decoration: none; padding: 15; font-size: 12px; float: right;color:#b0130d;" href="http://farhanshare.blogspot.com" target="_blank"><small>Ads by Farhan Share</small></a><br />
</div>

Keterangan:

• Ganti kode yang berwarna merah dengan URL iklan yang dituju.
• Ganti kode yang berwarna biru dengan title tag.
• Ganti kode yang berwarna hitam dengan judul iklan.
• Ganti kode yang berwarna oranye dengan keterangan atau deskripsi iklan.
• Ganti kode yang berwarna hijau dengan URL Homepage situs yang diiklankan.
• Ganti kode yang berwarna hijau kebiruan dengan URL situs yang diiklankan (tanpa HTTP://)
• Ganti kode yang berwarna ungu dengan URL Homepage blog anda.
• Ganti kode yang berwarna pink dengan Judul Blog anda.

10. Klik "Save", dan selesai.

Demikian informasi tentang cara membuat kotak iklan teks seperti iklan ppc, baca juga artikel inspiratif menarik seputar tutorial blog lainya tentang download template blogger minimalis, semoga bermanfaat, dan selamat mencoba.

Cara Mempercepat dan Meringankan Loading Blog

Oleh Muhammad Farhan

sumber : devianart

Cara Mempercepat dan Meringankan Loading Blog - Blog Yang berbobot ringan atau yang sering kita sebut dengan Easy Loading mungkin merupakan hal yang didamba-dambakan seluruh blogger, akan tetapi untuk memaksimalkan faktor tersebut tentunya harus ada beberapa optimasi yang kita lakukan guna memperkecil loading blog, selain dengan mengkompress css dan memperbaiki broken link (tautan rusak), kita juga dapat menggunakan cara yang akan saya bahas pada kesempatan kali ini, yaitu dengan menyembunyikan JavaScript Widget Blogger. Cara Ini bertujuan agar browser tidak bisa mengenali kode JavaScript dari widget-widget yang kita pasang di blog kita, karena pada hakikatnya semakin banyak jumlah JavaScript yang dipasang maka semakin lama pula untuk me-loading kapasitas blog secara keseluruhan.

Dengan kita melakukan cara ini bukan berarti tidak ada sama sekali dampak yang dapat ditimbulkanya, dari penelusuran yang saya lakukan dari blog ke blog akhirnya saya menemukan jawaban dari pertanyaan ini pada blog salah seorang kerabat saya, yaitu Maskolis.

Setelah saya cermati kalimat demi kalimat, paragraf demi paragraf, akhirnya saya menyimpulkan bahwa terkadang jika kita menggunakan JavaScript yang ukuranya agak "besar" maka efek yang biasanya ditampilkan oleh kinerja JavaScript tersebut akan hilang karena penggunaan cara ini, pasalnya seperti yang sudah saya tegaskan tadi diatas bahwasanya cara ini akan membuat browser tidak dapat mengenali beberapa JavaScript, akan tetapi saya sendiri menggunakan cara ini dan selama ini baik-baik saja, dari sisi lain juga sebenarnya tidak baik menyimpan banyak JavaScript dalam satu blog.

Jika anda lihat pada source page halaman HTML blog saya ini pasti anda akan menemukan beberapa kode berwarna hijau pada deretan bawah mendekati kode default <body>, itulah yang nantinya akan ditimbulkan dari cara ini, jadi link JavaScript anda akan ditampilkan sebagai tulisan CSS biasa dan tidak menggunakan link hidup menuju file JavaSctip (.js). Untuk melakukan cara ini sebenarnya sangat mudah sekali, anda masuk ke Edit HTML, cari kode </body> (gunakan CTRL+F), lalu ganti kode tersebut dengan kode di bawah ini.

&lt;!--</body>--&gt;&lt;/body&gt;

Terakhir, Simpan Template anda dan lihat hasilnya, jika ada beberapa widget yang biasanya dapat berjalan namun sekarang tidak berjalan, kemungkinan besar hal itu disebabkan oleh penyembunyian JavaScript yang tadi kita lakukan, maka dari itu saya menekankan sekali lagi bahwa hapus saja JavaScript dari widget yang tidak bisa muncul tersebut, karena biasanya yang tidak bisa muncul adalah widget dengan ukuran JavaScript yang besar, atau jika anda tetap ingin mempertahankan widget tersebut, anda juga dapat menggantinya kemabali dengan kode </body>, semua keputusan ada ditangan anda, sesuaikan dengan kebutuhan dan minat anda.

Demikian Informasi seputar tutorial blog tentang cara mempercepat dan meringankan loading blog, semoga bermanfaat, dan selamat mencoba. Start is The First Step to Reach The Success...

Cara Membuat Widget Social Media Metro Windows 8

Oleh Muhammad Farhan

Cara Membuat Widget Social Media Metro Windows 8 - Hadir dengan semangat baru, Windows 8 dibekali dengan New Interface atau antar muka terbaru dari Microsoft Corporation, mengangkat nama Metro sebagai tampilan baru, nampaknya kini Windows 8 siap menggebrak pasar gadget nasional maupun internernasional, dan siap bersaing dengan para rival-rivalnya seperti Mac besutan Apple Inc. Berhubungan dengan itu, saya baru saja mendapatkan ide dari blog mas riefsaz, yaitu tentang widget social media atau jejaring social yang bertemakan ala metro windows 8, tentunya widget ini sangat cocok sekali untuk berada di blog anda yang bernuansa simple dan Windows 8 style.

Pada kesempatan sebelumnya saya juga sudah pernah memberikan beberapa varian widget social media seperti floating social media di sisi blog, yaitu widget jejaring sosial media yang melayang di tepi kiri atau kanan blog dan dilengkapi dengan efek easing. Tak jauh berbeda dengan widget sebelumnya, widget social media metro windows 8 ini terdiri dari 3 kolom yang berbentuk kotak-kotak layaknya antarmuka Windows 8, namun saya sarankan untuk menerapkan widget ini pada sidebar, karena ukuranya lebih condong ke lebar daripada tinggi atau sekitar 300px (ukuran default sidebar).

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode di bawah ini kedalamnya.

<style> .seconds{ text-align:right; color:#000; font-size:10px; } .supportive a:active{position:relative;top:1px} .list-style{display:none;} .widget-item-control a{display:none;} .widget-item-control a{display:none;} #supportive{width: 300px; float: left;margin-top: 10px;} #supportive li{position:relative; cursor:pointer; padding: 0 !important;} #supportive .facebook, .googleplus, .rss, .twitter{ position: relative; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 5; display: block; float: left; margin: 1px;} #supportive .icon{} #supportive .facebook{width: 147px; height: 150px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD2DT-BdLjYGEFdkEcStojvH7CGn2SW3SkEkIpugi6pM1bhxprIFUb7j6nosSpvjKVA6vkjVsbqk1K-ZrmjfdQ0qGwLRC8y3rVKnDdWYX0yW2lcvAFVfYCnUjGSS-eUdJxO3_Pvt6jUpo/h120/facebook.png") no-repeat center center;} #supportive .twitter{width: 148px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijcBgkVd2WNcvm6aP1k88PeiHhiIcl52ZTd-xySM9KUut995v6Needwb20_mKbGyjWbtLnUCP_NoUqsJHJTiOgTenjJMZHQa0CF828BJzF0RXj20wsBNTYI7uRT5uVBGAWRK9vrlu5sha0/s1600/Twitter.png") no-repeat center center;} #supportive .googleplus{width: 148px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGaUCRJ-TE2UsXXfvYZpW9Gd_WYa44EgmlATRFB2xQ31W_OZ2stFxCEE3uqeroea0LdmImS10pVyLs7ZGjJl2tAxu8uhrHTOVG4PKkLZxVlbNFcos0GLa8l_Jx8hlCmfkE9BFYTVhPqqle/s1600/google+plus.png") no-repeat center center;} #supportive .rss{ width: 299px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgradbx7y4_sfAm4rV-lRkcDkYxoYdhrErcVD5purV-dFSnlDCXW88Qm_Q8Wxb475ChzUoRQF7LiARPJkZNA1UJG3pycqcRV4fdV13vmKKqB0DfYZ_jwGqP4d0Jj4IprvSd4rX2_SlIwjQz/s1600/rss.png") no-repeat center center;} #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-transition: all 0.1s ease-in-out;} #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw8rjFQ8eqp0aKJFL6W45wJhglk69eYOqB6TXQyicsF8b0tytpjhbFaA7Wj0HcA1hzPnLjpZNWC5cGQgLyIwk6gPW91qQzAILLUiR7sRR51zgwo-VG8wTyG-4svHyxv-N0wJ5FcPKORhE/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj94c7hZIiRoGRaGTTFqspZv96Bj5VLSG9QildkEh7AerakyZzRG53eHYpvSoGEktdcp6yI8W67d9S6WHNo7uYqM6yPE2Oe0OuXQJFmjIGIR8pbdwzFiq9pHBFvebbBLzymm0-qD4izme4/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh33RwT3mgZuuIGDpedqqcjVRz3r6r9GukMnz7CN0PbAd1x6MiECvKyv9_bk9RZAtzQlGpEVmYHj8M_lEJkwqKec8aKXziHHALoli1f8huXTmcZQ7V6XXErQV5F-3G_JzIPLz-41NCW92s/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} </style> <ul id='supportive'> <li><a class='icon facebook' href='http://www.facebook.com/FacebookFanPage'/></a></li> <li><a class='icon twitter' href='http://twitter.com/TwitterUserName'/></a></li> <li><a class='icon googleplus' href='https://plus.google.com/Google+ID/'/></a></li> <li><a class='icon rss' href='http://feeds.feedburner.com/IDFeedburner'/></a></li> 

Keterangan: 

• Ganti kode yang berwarna biru tua dengan Fan Page / ID Facebook anda.
• Ganti kode yang berwarna biru muda dengan Username Twitter anda.
• Ganti kode yang berwarna merah dengan ID Google+ anda. (ex. https://plus.google.com/115286939984964916456/posts).
• Ganti kode yang berwarna oranye dengan ID Feedburner anda.

6. Klik "Save/Simpan", selesai.

Demikian informasi seputar tutorial blog tentang cara membuat widget social media metro windows 8, semoga bermanfaat, dan selamat mencoba. Bila ada pertanyaan atau ada yang kurang jelas, anda bisa meninggalkan komentar di bawah atau langsung e-mail saya di muhammad.farhan.mf@gmail.com.

Sumber Referensi : Riefsaz

Cara Membuat Twitter Follower Box di Blog

Oleh Muhammad Farhan

Cara Membuat Twitter Follower Box di Blog - Seperti yang kita ketahui, Twitter adalah jejaring sosial yang paling diminati oleh banyak kalangan masyarakat, tak memandang umur, tua maupun muda selalu terlihat asyik pada saat memainkan akun mereka pada social media yang satu ini, itulah sebabnya kenapa Twitter kini menjadi saingan terberat akun jejaring sosial Facebook besutan Mark Zuckerberg. Berhubungan dengan dunia blog, belum lama ini saya pernah menemukan widget follower box yang simple dan elegan, karena saya pikir widget yang biasa diberikan oleh developer twitter belum bisa menyediakan tampilan seperti ini, kalau bisa dibilang widget ini mirip sekali dengan like box yang dimiliki oleh Dev Facebook, namun widget ini bertema biru muda seperti warna jejaring sosial Twitter yang terlihat anggun dan patut untuk dimiliki.

Selain tampilanya yang menarik, menurut saya Twitter adalah salah satu jejaring sosial yang sangat potensial untuk mendatangkan pengunjung, tidak seperti facebook, Twitter hanya memiliki 140 karakter yang 'justru' menurut saya lebih nyaman dan menarik untuk digunakan. Jika follower akun twitter kita sudah banyak, hal tersebut tidak menutup kemungkinan bahwa Twitter akan menggeser  sumber trafik utama blog kita yang awalnya berasal dari Seach Engine atau mesin pencari.

Pelajaran ini dapat kita simak dari kisah blog terselubung, blog yang penggunanya selalu menggunakan topeng tersebut 'kabarnya' mendapatkan banyak sekali kunjungan bukan dari mesin pencari semata, melainkan akun-akun jejaring sosial yang dimilikinya, blog yang membahas tentang hal-hal unik tersebut sudah memiliki lebih dari 400 ribu follower, dan bayangkan saja jika rata-rata hampir setiap hari ia memposting 12 artikel dan semua link-nya di klik oleh para followers-nya, tentu hal yang menjanjikan bukan untuk mendongkrak trafik kunjungan?

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode dibawah ini kedalamnya.

<iframe src="http://s.moopz.com/connect.html?user=tuliskandotcom" class="FB_SERVER_IFRAME" style="width: 300px; height: 250px; border:none; overflow:hidden;" frameborder="0" scrolling="no" name="fbfanIFrame_0" allowtransparency="true"></iframe><script type="text/javascript">fanbox_init("tuliskandotcom");</script>

Keterangan:

• Merah : Username Twitter anda
• Biru : Lebar Follower Box (sesuaikan dengan lebar sidebar)
• Hijau : Tinggi Follower Box 

6. Klik "Save/Simpan", dan selesai.

Preview & Live Demo

Demikian informasi terbaru tentang cara membuat widget twitter follower box di blog, baca juga artikel seputar tutorial blog lainya tentang widget social media metro windows 8, semoga bermanfaat, dan selamat mencoba.

Sumber Referensi : Moopz

Membuat Slide Show / Slider Foto dengan jQuery di Blog

Oleh Muhammad Farhan

Slide Show atau yang biasa disebut slider adalah sebuah widet yang akan menampilkan gallery foto berderet secara slide (meluncur). Dengan widget ini kita dapat menampilkan beberapa foto guna mempercantik dan menghias penampilan blog kita, akan lebih menarik lagi jika kita memasang gambar pemandangan-pemandangan yang indah. Fitur ini berjalan secara manual, jadi anda harus memasang foto dan URL tujuanya sendiri, berbeda dengan widget slider artikel otomatis yang akan update slide otomatis setiap ada artikel yang baru dipublikasikan.

Mengenai masalah tampilan juga widget ini tak usah diragukan lagi kebagusanya, karena widget ini telah dilengkapi dengan fitur jQuery smooth yang akan membuat pergantian slide terlihat lebih "lembut", dan yang menarik dari widget ini adalah page numbernya yang simple dan elegan, berwarna merah dan muncul layaknya karpet merah dari balik kanan gambar, jadi widget ini akan terlihat minimalis sekali.

Jika kita perhatikan dengan seksama pada situs-situs portal berita seperti kompas.com, maka tentu kita akan menemukan slide show atau slider artikel pada homepage, namun seperti yang saya jelaskan diatas tadi bahwasanya widget ini berbeda fungsinya dengan yang ada pada kompas tersebut, karena widget ini biasanya hanya digunakan untuk menampilkan foto-foto gallery secara slide show dan tidak digunakan untuk menampilkan update artikel, namun semua keputusan tersebut ada di tangan anda, jika anda ingin menjadikanya untuk slider update artikel juga tidak ada salahnya, lihat saja situs kucoba.com, website yang dikelola kang salman tersebut juga memakai slide show yang untuk menampilkan update artikel.

Cara Membuat Slide Show / Slider Foto dengan jQuery

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode dibawah ini kedalamnya.

<style type="text/css">
.container1 {
 width: 660px;padding: 0;margin: 0 auto;
}
.folio_block {
 position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
 position: absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
 position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center;
 line-height: 40px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb8O_4G69dnY4q3bXvnLLDW8R1q9xfnALxTjCJM-SmcSXXWcT57Plpi_isI9GX6MDfL60hRlv-L7A74epVblTrcMMfQOocZ4EfP4gmZrQHOjFNConpcNPsC1p-2A7ZLm36HSfUbMVZmIU/s1600/paging_btrix_bg2.png) no-repeat;
 display: none;
}
.paging_btrix a {
 padding: 5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
 font-weight: bold; background: #920000; border: 1px solid #610000;
 -moz-border-radius: 3px;
 -khtml-border-radius: 3px;
 -webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
<div class="container1">
<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="URL Tujuan Gambar"><img src="URL Gambar"/></a>
            <a href="URL Tujuan Gambar"><img src="URL Gambar"/></a>
            <a href="URL Tujuan Gambar"><img src="URL Gambar" /></a>
            <a href="URL Tujuan Gambar"><img src="URL Gambar" /></a>
        </div>
    </div>
    <div class="paging_btrix">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 //Set Default State of each portfolio piece
 $(".paging_btrix").show();
 $(".paging_btrix a:first").addClass("active");

 //Get size of images, how many there are, then determin the size of the image reel.
 var imageWidth = $(".window").width();
 var imageSum = $(".image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;

 //Adjust the image reel to its new size
 $(".image_reel").css({'width' : imageReelWidth});

 //paging_btrix + Slider Function
 rotate = function(){
  var triggerID = $active.attr("rel") - 1; //Get number of times to slide
  var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
  $(".paging_btrix a").removeClass('active'); //Remove all active class
  $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

  //Slider Animation
  $(".image_reel").animate({
   left: -image_reelPosition
  }, 500 );

 };

 //Rotation + Timing Event
 rotateSwitch = function(){
  play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
   $active = $('.paging_btrix a.active').next();
   if ( $active.length === 0) { //If paging_btrix reaches the end...
    $active = $('.paging_btrix a:first'); //go back to first
   }
   rotate(); //Trigger the paging_btrix and slider function
  }, 5000); //Timer speed in milliseconds (3 seconds)
 };

 rotateSwitch(); //Run function on launch

 //On Hover
 $(".image_reel a").hover(function() {
  clearInterval(play); //Stop the rotation
 }, function() {
  rotateSwitch(); //Resume rotation
 });

 //On Click
 $(".paging_btrix a").click(function() {
  $active = $(this); //Activate the clicked paging_btrix
  //Reset Timer
  clearInterval(play); //Stop the rotation
  rotate(); //Trigger rotation immediately
  rotateSwitch(); // Resume rotation
  return false; //Prevent browser jump to link anchor
 });

});
</script>

Keterangan:

• 660 = Lebar Slide Show / Slider Foto
• 240 = Tinggi Slide Show / Slider Foto

6. Klik "Save/Simpan", dan selesai.

Bagaimana? mudah bukan membuat slide show agar blog terlihat makin cantik, dan untuk live demo-nya anda bisa lihat disini. Demikian informasi terbaru tentang cara membuat slide show / slider foto dengan jquery di blog, baca juga artikel menarik lainya seputar tutorial blog tentang cara membuat menu navigasi navbar dengan efek rollover, semoga bermanfaat, dan selamat mencoba.

Membuat Widget Smooth Sliding Social Media di Blog

Oleh Muhammad Farhan

Membuat Widget Smooth Sliding Social Media di Blog - Social media memang merupakan sebuah rumah yang nyaman bagi para Blogger "beruntung", jutaan traffik di dunia setiap harinya didapatkan oleh para blogger-blogger hanya dengan memanfaatkan layanan interaksi dunia maya ini. Selain menawarkan kemudahan dalam bersosialisasi, jejaring sosial juga sangat berpotensial untuk menjadi sumber utama traffik blog dan website suatu saat nanti, karena saya kira hampir semua pengguna internet merasa tertarik dan ingin memiliki akun social medianya masing-masing, tentu untuk berhubungan dan berkomunikasi dengan orang-orang ataupun organisasi yang mereka minati, maka dengan ini kita dapat menghubungkan blog kita dengan orang-orang di dunia maya yang "haus akan informasi".

Berdasarkan ulasan singkat diatas, dapat saya simpulkan bahwasanya mulai dari sekarang ini kita harus lebih pintar-pintar mencari peluang yang terbuka dan berprofit tinggi, jadi kita tidak hanya bergantung pada traffik dari search engine saja, namun kita harus mencari gagasan dan terobosan-terobosan lain yang sekiranya layak untuk dijadikan sumber kunjungan jika suatu saat nanti search engine sudah tidak lagi menjaminnya.

Pengoptimalan ini dapat kita wujudkan dengan langkah awal yaitu membangun akun-akun di social media, dan tentunya mengatasnamakan blog-blog dan website kita, tinggal selanjutnya kita lakukan pemasaran terhadap akun kita dengan mempromosikanya di forum-forum, dll, dan tentunya memasang widget social media di blog kita sendiri. Baik, sesuai dengan topik dan judul diatas, pada kesempatan kali ini saya akan membagikan tutorial untuk membuat widget smooth sliding social media di blog, silahkan disimak yang berikut ini!

Cara Membuat Widget Smooth Sliding Social Media

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode berikut ini kedalamnya.

<style>
.tuliskancom-social-slidebox {
    font: 16px normal 'Denk One', sans-serif;
    display: inline-block;
    position: relative;
    width: 95%;
    max-width: 200px;
 
 
    padding: 12px;
 
}
.tuliskancom-social-slide {
    width: 95%;
    max-width: 280px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.tuliskancom-social-slide a {
    text-decoration: none !important;
   }
.tuliskancom-social-slide ul {margin-top:-5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tuliskancom-social-slide ul li {margin-bottom:15px;
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0;
 margin-left:10px;
}
.tuliskancom-social-slide ul li a.facebook {
    border-left: 65px solid rgba(59, 89, 152, 1);
    color: rgba(59, 89, 152, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.facebook p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.facebook:hover {

    background: rgba(59, 89, 152, 1);
    border-left: 0px solid rgba(59, 89, 152, 0.1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.facebook:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.tuliskancom-social-slide ul li a.twitter {
    border-left: 65px solid rgba(64, 153, 255, 1);
    color: rgba(64, 153, 255, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.twitter p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.twitter:hover {
    background: rgba(64, 153, 255, 1);
    border-left: 0px solid rgba(64, 153, 255, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.twitter:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.tuliskancom-social-slide ul li a.gplus {
    border-left: 65px solid rgba(219, 74, 57, 1);
    color: rgba(219, 74, 57, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.gplus p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.gplus:hover {
    background: rgba(219, 74, 57, 1);
    border-left: 0px solid rgba(219, 74, 57, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.gplus:hover p {

    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.tuliskancom-social-slide ul li a.pinterest {
    border-left: 65px solid rgba(174, 45, 39, 1);
    color: rgba(174, 45, 39, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.pinterest p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.pinterest:hover {
    background: rgba(174, 45, 39, 1);
    border-left: 0px solid rgba(174, 45, 39, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.pinterest:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.tuliskancom-social-slide ul li a.rss {
    border-left: 65px solid rgba(255, 102, 0, 1);
    color: rgba(255, 102, 0, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.rss p {

    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.rss:hover {
    background: rgba(255, 102, 0, 1);
    border-left: 0px solid rgba(255, 102, 0, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.tuliskancom-social-slide ul li a.rss:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
</style>
<div class="tuliskancom-social-slide">
    <ul>
        <li><a class="tuliskancom-social-slidebox facebook" href="https://www.facebook.com/tuliskancom"><p>12K+</p>Facebook </a></li>
        <li><a class="tuliskancom-social-slidebox twitter" href="https://twitter.com/tuliskancom"><p>5K+</p>Twitter</a></li>
        <li><a class="tuliskancom-social-slidebox gplus" href="https://plus.google.com/107955298793879607964"><p>4K+&nbsp;</p>Google+</a></li>
        <li><a class="tuliskancom-social-slidebox pinterest" href="http://pinterest/tuliskancom"><p>2K+&nbsp;</p>Pinterest</a></li>
        <li><a class="tuliskancom-social-slidebox rss" href="http://feeds.feedburner.com/tuliskancom"><p>11K+</p>RSS</a></li>
    </ul>
</div>

Keterangan:

• tuliskancom = Ganti dengan ID / Nama Fan Page Facebook anda.
• tuliskancom = Ganti dengan username Twitter anda.
• 107955298793879607964 = Ganti dengan ID Google Plus anda.
• tuliskancom = Ganti dengan username Pinterest anda.
• tuliskancom = Ganti dengan ID Feedburner blog anda.

6. Klik "save/simpan", dan selesai.

Untuk Live Demo-nya anda bisa lihat disini. Demikian informasi terbaru tentang cara membuat widget smooth sliding social media di blog, baca juga artikel menarik lainya seputar tutorial blog tentang cara membuat share button melayang/popup di sisi blog, semoga bermanfaat, dan selamat mencoba.

Cara Modifikasi Kotak Pengikut/Follower Blog

Oleh Muhammad Farhan

Cara Modifikasi Kotak Pengikut/Follower Blog - Bagi anda yang mempunyai blog dengan platform blogspot tentunya sudah mengetahui perihal tentang kotak follower google friend connect bukan, salah satu layanan yang disediakan oleh Google untuk menunjang newsletter atau istilahnya keep update antar sesama blogger dan para pengunjung.












Bagi anda yang mempunyai akun blogger, maka anda akan mendapatkan list update artikel dari blog yang anda ikuti (langganan) pada bagian bawah tampilan dasbor akun anda, namun tenang saja jika anda tidak memiliki sama sekali atau belum tahu menau tentang perihal blogspot, pasalnya dalam hal ini Google juga sudah mengantisipasinya dengan menyediakan Twitter dan Yahoo! sebagai alternatif solusinya.

Namun, terkadang ada beberapa blogger yang memiliki kendala terhadap widget yang disediakan oleh Google ini, yaitu tampilanya yang terlalu default (bawaan blogspot) dan rows atau akun yang ditampilkan terlalu banyak, sehingga memakan space yang tersedia di blog.

Menanggapi permasalahan diatas, saya akan coba memberikan solusi dari pengalaman nge-blog saya, yaitu dengan menggunakan elemen HTML/JavaScript, jadi bagi anda yang mengalami kendala pada saat mensetting tampilanya lewat gadget 'pengikut' biasa, mungkin inilah salah satu solusi jalan keluarnya, pasalnya saya juga mengalami hal yang serupa, dan setelah saya mengaplikasikan widget ini lewat HTML/JavaScript, sekarang saya jadi lebih mudah mengatur tampilanya sesuai dengan keinginan saya. Jadi bagaimana, Anda tertarik mencobanya? Jangan takut untuk Berkreasi!

Cara Modifikasi Kotak Pengikut/Follower Blog

1. Login ke Blogger.

2. Pilih Tata Letak / Layout.

3. Klik Add Gadget (pada penempatan elemen yang anda suka).

4. Pilih HTML/JavaScript.

5. Letakkan kode berikut ini kedalamnya.

<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>
<div id="div-1ftsgyl88qnrs" style="width:300px;border:1px solid #cccccc;"></div>
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#dedede';
skin['ENDCAP_BG_COLOR'] = '#f0f0f0';
skin['ENDCAP_TEXT_COLOR'] = '#444';
skin['ENDCAP_LINK_COLOR'] = '#444';
skin['ALTERNATE_BG_COLOR'] = '#fff';
skin['CONTENT_BG_COLOR'] = '#f9f9f9';
skin['CONTENT_LINK_COLOR'] = '#444';
skin['CONTENT_TEXT_COLOR'] = '#444';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#444';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#444';
skin['CONTENT_HEADLINE_COLOR'] = '#444';
skin['NUMBER_ROWS'] = '2';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-1ftsgyl88qnrs',
   site: '17928547695262337427' },
  skin);
</script>

Keterangan:

• #cccccc = Warna border widget.
• #f0f0f0 = Warna background bagian atas widget.
• 300px = Lebar widget.
• 2 = jumlah barisan akun yang ditampilkan pada widget.
• 1px = Ketebalan border widget.
• div-1ftsgyl88qnrs = Ganti dengan ID blog anda (cara mengetahui ID blog lihat dibawah).
• 17928547695262337427 = Ganti dengan kode Site blog anda (cara mengetahui kode site lihat dibawah).

6. Klik "Save/Simpan" gadget, dan selesai.

Cara Mengetahui Kode Site dan ID blog anda.

1. Pasang gadget 'pengikut/follower' blog seperti biasa.

2. Buka blog anda, lalu liat source page-nya (klik CTRL+U).

3. Klik CTRL+F, ketikkan kata kunci "Members", tekan Enter, maka anda akan menemukan kode kurang lebih seperti dibawah ini.

4. Di dekat kode tersebut, anda akan menemukan kode yang kita cari, yaitu Kode Site dan Blog ID, lihat pada kode yang saya tunjuk dengan tanda panah pada gambar dibawah, yang atas adalah Blog ID dan yang bawah adalah Kode Site.

5. Terakhir, anda tinggal memasukkan kode yang didapat diatas ke widget 'pengikut/follower' pada elemen HTML/JavaScript tadi.

Demikian informasi terbaru tentang cara modifikasi kotak pengikut/follower blog, baca juga artikel inspiratif lainya seputar tutorial blog tentang membuat like box facebook melayang/popup dengan timer, semoga bermanfaat, dan selamat mencoba.

Cara Membuat Garis dan Border di Blog

Oleh Muhammad Farhan

Jika dilihat dari bentuknya, Garis adalah gabungan dari titik-titik yang banyak, dalam dunia blogging seringkali kita mengenal garis sebagai line (dalam bahasa inggris), secara tidak kita sadari ternyata banyak sekali faktor-faktor pada tampilan blog yang melibatkan garis, seperti pada saat kita menggunakanya untuk membatasi tepi blog antara isi dalam dan outer blog, semua itu memerlukan garis untuk menjadi penegas antara 1 tempat dan tempat lainya.

Jika anda tanya, apakah manfaat garis di dalam dunia blog? sebenarnya tidak ada manfaatnya secara optimisasi untuk mesin pencari, melainkan hal ini berguna untuk "mempertegas" atau "membatasi" elemen-elemen pada blog, seperti halnya yang dapat anda lihat di blog ini, beberapa widget yang warnanya agar samar dengan background, maka akan saya berikan garis tepi agar pengunjung mudah membedakannya, selain itu, garis tepi juga membuat elemen-elemen di blog anda terlihat lebih rapi dan tersusun.

Lantas apa yang ada didalam benak kita mengenai perihal "Garis" ini? tentu kita akan bertanya tentang bagaimana cara membuatnya, sebenarnya sederhana saja, dalam blogspot kita dapat membuat garis dengan kode HTML, namun ada beberapa kode yang harus kita perhatikan dalam mengoperasikanya, karena sebenarnya garis itu sendiri dapat kita explore secara luas bentuknya, mulai dari putus-putus (dashed), titik-titik (dotted), sambung (solid), dan lain sebagainya.

Cara Membuat Border

Dibawah ini adalah contoh border pada suatu elemen:

 CONTOH ELEMEN
 Lirik Lagu Band Barat (Misalnya)
 aaaaaaaaa.....cacacacaca.....
 nananaaaa..... bababaaa..... 

Kode yang saya pakai pada elemen diatas adalah:

<div style="background:#cccccc;border: 2px  solid #808080; float: left; margin: 4px 0px 5px 0px; padding: 2px 0px; width: auto;">objek/elemen</div>

Keterangan:

• #cccccc = kode dari warna background isi border.
• border: 2px = 2px adalah kode yang menunjukkan ketebalan border, semakin kecil angka tersebut maka semakin tipis garisnya, begitu juga sebaliknya.
• solid = dalam bahasa indonesia artinya padat yang berarti garis akan selalu menyambung, ada juga perintah lainya untuk menampilkan model garis yang berbeda, dashed (putus-putus), dotted (titik-titik), dan lain sebagainya.
• #808080 = ini adalah kode yang menunjukkan kode warna, jadi jika kita ingin merubah warna dari garis tersebut, maka kita harus mengetahui apa kode dari warna yang kita inginkan tersebut.
• float: left = left adalah kode yang menunjukkan dimana letak garis tersebut, left (kiri) dan right (kanan),  misalnya jika anda memilih float: right, maka kode tersebut akan terletak/melayang di sisi kanan.
• 4px = kode yang menunjukkan spasi atau jarak dari border arah ke atas.
• 5px = kode yang menunjukkan spasi atau jarak dari border ke arah bawah.
• padding: 2px = 2px adalah kode yang menunjukkan spasi atau jarak dari garis border ke objek atau elemen yang diberi border.
• width: auto = lebar garis, sebenarnya anda bisa merubahnya ke dalam bentuk (px) dan (%), misalnya 430px, dan jika dalam bentuk persen misalnya 50% (lebar bordernya setengah dari lebar objek atau elemen yang diberi border), tetapi lebih baik jika diberikan (auto) saja, karena perintah tersebut akan langsung menyesuaikan lebar border dengan lebar objek elemen.
• objek/elemen : isi di dalam border itu sendiri.

Kode Warna : http://camex.wen.ru/Sampel/Warna.html

Tambahan: jika anda ingin memberi border hanya diatas, dikiri, dikanan, atau diatas elemen, maka anda cukup menambahkan kode right (disebelah kanan elemen), left (disebelah kiri elemen), top (disebelah atas elemen), dan bottom (disebelah bawah elemen), contohnya:

<div style="border-top: 2px solid #B8B8B8; float: left; margin: 4px 0px 5px 0px; padding: 2px 0px; width: auto;">objek/elemen</div>

Jadi anda cukup memberikan, -top, -bottom, -left, atau -right disebelah border. Hasil kode diatas akan menjadi seperti dibawah ini, yaitu border diatas (top).

 CONTOH ELEMEN
 Lirik Lagu Band Barat (Misalnya)
 aaaaaaaaa.....cacacacaca.....
 nananaaaa..... bababaaa.....

Cara Membuat Garis

Sebenarnya secara garis besar kode yang digunakan untuk membuat border dan garis hampir sama, hanya ditambahkan sedikit kote petunjuk, yaitu ditambahkan -top (atas) disebelah kode border.

Dibawah ini adalah kode garis lurus (solid):

<div style="border-top: 2px solid #B8B8B8; float: left; margin: 4px 0px 5px 0px; padding: 2px 0px; width: 100%;"></div>

Hasilnya seperti ini:

Dibawah ini adalah kode garis putus-putus (dashed):

<div style="border-top: 2px solid #B8B8B8; float: left; margin: 5px 0px 5px 0px; padding: 2px 0px; width: 100%;"></div>

Hasilnya seperti ini:

Dibawah ini adalah kode garis titik-titik (dotted):

<div style="border-top: 2px solid #B8B8B8; float: left; margin: 5px 0px 5px 0px; padding: 2px 0px; width: 100%;"></div>

Hasilnya seperti ini:

Keterangan: Untuk mengatur warna garis, ketebalan garis, lebar garis, spasi jarak kebawah garis, spasi jarak keatas garis, dll semua-nya sama dengan keterangan pada tutorial cara membuat border diatas.

Jika tutorial ini ada yang sedikit kurang jelas, anda bisa menanyakanya dengan cara meninggalkan komentar dibawah atau langsung menghubungi saya di muhammad.farhan.mf@gmail.com. Demikian informasi terbaru tentang Cara Membuat Garis dan Border di Blog, baca juga artikel menarik lainya seputar tutorial blog tentang membuat widget smooth sliding social media di blog, semoga bermanfaat, dan selamat mencoba.

Cara Modifikasi Widget Popular Post Blogger

Oleh Muhammad Farhan

Cara Modifikasi Widget Popular Post Blogger, Sebagai blogger yang menggunakan platform blogspot, tentu anda sudah tahukan mengenai widget popular post? yaitu widget yang berfungsi untuk menampilkan artikel-artikel popular di blog kita, tidak seperti widget-widget HTML/Javascript lainya, popular post ini bersifat resmi atau official dari blogger, jadi widget ini "terkesan" lebih baik dan tidak memberikan efek yang signifikan terhadap berat loading blog. Selain itu, terkadang seringkali kita juga mengalami kebosanan dengan tampilan popular post yang itu-itu saja, karena pasalnya blogger jarang sekali bahkan tidak pernah merombak tampilan dari widget tersebut, namun sebenarnya kita bisa memodifikasinya lewat halaman Edit HTML, oleh karena itu, pada kesempatan kali ini saya akan membahas salah satu hasil modifikasi yang saya adopsi dari artikel di blog kang Mahfid Mayanto.

Tampilan dari modifikasi popular post yang akan saya bahas ini sebenarnya cukup sederhana, hanya saja bedanya deskripsi dari modifikasi ini akan nampak lebih berbeda, pasalnya deskripsi dari hasil modifikasi ini sudah dilengkapi dengan efek easing yang menjadikan penampakan dari deskripsi pada widget ini akan seperti buka tutup, jadi nantinya deskipsi dari popular post ini akan nge-scroll atau muncul dari samping, setiap kali kita mengarahkan cursor mouse kepada judul dari postingan di popular post itu sendiri. Untuk persisnya, anda dapat lihat pada contoh gambar diatas, kurang lebih penampakanya nanti akan seperti itu, atau jika anda ingin yang lebih jelas, anda dapat langsung mempraktekkanya, hehe.

Cara mengaplikasikanya juga tergolong cukup mudah, kita hanya perlu memasang widget popular post seperti biasa terlebih dahulu, baru kemudian ditambahkan dengan beberapa kode css yang sudah di customisasi. Jika anda tertarik untuk menerapkanya, maka silahkan disimak yang berikut ini.

Cara Modifikasi Widget Popular Post Blogger

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih "Entri Populer" atau "Popular Post" (tergantung bahasa yang digunakan).

5. Lalu, centang box thumbnail gambar dan cuplikan.

6. Klik "Save/Simpan" gadget.

7. Sekarang beralih ke halaman Template > Edit HTML.

8. Klik tanda panah hitam disebelah kode yang mirip seperti kode ini: <b:skin>...</b:skin> (untuk membuka kode css).

9. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode berikut ini tepat diatasnya.

.PopularPosts .widget-content ul li {
    padding: 0;
    position: relative;
}
.item-snippet {
    font-size: 90%;
    line-height: 1.2em;
    position: absolute;
    width: 230px;
    background-color: whiteSmoke;
    padding: 7px;
    border-top: 2px solid #FF0202;
    z-index: 2;
    left: 300px;
    top: 60%;
    height: 4.5em!important;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
    -o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
}
.PopularPosts .widget-content ul li:hover .item-snippet {
    left: 60px;
    opacity: 1;
    visibility: visible;
}
.PopularPosts img {
    width: 50px;
    height: 50px;
}
.PopularPosts .item-title {
    font-family: 'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;
    font-size: 125%;
}

Keterangan:

• #FF0202 = Warna dari border diatas deskripsi (Kode Warna).
• 230px = Lebar kolom munculan deskripsi.
• 50px = Lebar gambar/thumbnail popular post.
• 50px = Tinggi gambar/thumbnail popular post.

10. Klik "Save/Simpan" template, dan selesai.

Bagaimana? mudah bukan cara memodifikasi popular post agar terlihat lebih stylish. Demikian informasi terbaru tentang Cara Modifikasi Widget Popular Post Blogger, baca juga artikel menarik lainya seputar tutorial blog tentang Cara Menampilkan Widget Hanya di Halaman Posting, semoga bermanfaat dan selamat mencoba!

Cara Membuat Emoticon di Postingan dan Komentar Blog

Oleh Muhammad Farhan

Cara Membuat/Memasang Emoticon di Postingan Blog, Jika anda adalah salah seorang pengguna Facebook, tentu anda tahu apa yang dimaksud dengan emoticon bukan, emoticon adalah lambang yang menunjukkan suatu ekspresi dari seseorang, seperti sedih, tertawa, tersenyum. marah, dan masih banyak lagi variasi yang lainya. Di dalam dunia blogging, kerap kali kita juga menemui blog-blog yang telah mengaplikasikan fungsi dari emoticon ini, tak lain dan tak bukan, penerapan fungsi emoticon ini bertujuan agar penampilan blog mereka lebih unik dan semakin user friendly kepada para pengunjung.

Selain itu, tampilan dari emoticon yang akan saya bagikan kali ini juga agak berbeda dengan yang lainya, karena ukuranya yang agak lebih besar dan animasinya yang lucu dan unik, dengan emoticon ini nantinya diharapkan blog kita akan 'terkesan' lebih friendly dan akrab kepada para pengunjung. Bagi anda yang berminat untuk menerapkanya, silahkan disimak yang berikut ini!

Cara Membuat/Memasang Emoticon di Postingan 

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Klik tanda panah disebelah kode yang mirip <b:skin>...</b:skin> (untuk membuka kode css).

5. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode dibawah ini tepat dibawahnya.

<style>
.emo.delayLoad { display:inline; text-align:left; margin:0; padding:1px; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border:none; background-color:transparent; border-radius:none; -moz-border-radius:none; -webkit-border-radius:none }
</style>

6. Selanjutnya, cari kode </body>, lalu letakkan kode dibawah ini tepat diatasnya.

 <script type='text/javascript'>
//<![CDATA[
// kode js untuk menampilkan emoticon
jQuery(document).ready(function () {emoticonx({
emoRange:".post-body, div.emoWrap",
})
});
//]]>
</script>
<script src='http://yourjavascript.com/34231521353/efek.js' type='text/javascript'/>

7. Klik "Save/Simpan" template, dan selesai.

Cara Membuat Emoticon di Komentar

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Klik tanda panah disebelah kode yang mirip <b:skin>...</b:skin> (untuk membuka kode css).

5. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode dibawah ini tepat diatasnya.

.emoWrap {color:greenyellow;font:bold 12px Tahoma,Arial,Sans-Serif;text-align:center;}
img.emo, input.emoKey {display:inline-block;display:inline;vertical-align:middle;}
input.emoKey {border:1px solid #ccc;background-color:white;font:bold 11px Arial,Sans-Serif;padding:1px 2px;margin:0px 0px 0px 2px;color:black;}

6. Cari kode </body>, lalu letakkan kode dibawah ini tepat diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script src='http://codecbd.googlecode.com/files/emotion-coment.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "iframe#comment-editor",
emoMessage = "Berikan tidaknya satu spasi dibelakang emoticon.";
//]]>
</script>

Keterangan: Jika pada template anda sudah ada kode seperti yang berwarna merah diatas versi berapapun, maka kode yang merah diatas dihapus saja.

Bagaimana sobat? mudah bukan menerapkan emoticon di postingan sekaligus komentar blog, untuk live demo-nya anda bisa lihat pada kolom komentar di blog ini. Demikian informasi terbaru tentang Cara Membuat/Memasang Emoticon di Postingan Blog, baca juga artikel menarik lainya seputar tutorial blog tentang Cara Modifikasi Widget Popular Post, semoga bermanfaat, dan selamat mencoba.