Jun 19, 2013

Home > Archives for June 2013

Meta Tag Generator

hanifaptri Wednesday, June 19, 2013 Be the first to comment!
Apa itu Meta Tag? Sebuah meta tag adalah tag tersembunyi yang tinggal di <head> dokumen HTML. Hal ini digunakan untuk memberikan informasi tambahan tentang dokumen HTML. Mungkin jenis-jenis meta tag ada tiga, yaitu content, http-equiv, dan name. Meta tag selalu memberikan informasi dalam pasangan nama/nilai. Sebuah name, http-equiv dan content memberikan informasi nama dan content provides informasi nilai. Meta tag tidak memiliki tag penutup.

Advanced Meta Tag Generator



Title:
Author:
Subject:
Description:
Keywords:
Generator:
Language:
Expires:
Abstract:
Copyright:
Designer:
Publisher:
Revisit-After:
Distribution:
Robots:
Home > Archives for June 2013

HEX Color Code Generator

hanifaptri Wednesday, June 19, 2013 Be the first to comment!
Web color adalah warna yang digunakan untuk mendesain web. Format warna yang sering digunakan adalah Hexadecimal atau disingkat menjadi HEX. Untuk menulis kode warna HEX diawali dengan huruf pagar "#". Karena warna HEX beratus-ratusan jumlahnya, maka untuk mempermudah pemilihan warnanya adalah menggunakan HEX Color Code Generator ini. HEX color code generator ini adalah tools berupa roda berputar. Sebelum memakainya, jelas kita harus melihat petunjuk penggunaannya :

Petunjuk Penggunaan

  1. Klik pada salahsatu warna yang anda inginkan.
  2. Setelah diklik akan ada variasi warna di sebelah kanan tools.
  3. Copy kode HEX nya disamping warna yang anda pilih.
  4. Klik paste pada suatu tempat dimana tempat tersebut akan anda taruh kode HEX tersebut.



Petunjuk Penggunaan Generator #2 

  1. Pilih salahsatu warna yang anda inginkan.
  2. Copy code yang berada disamping tulisan "HEX #"
  3. Karena kode warna yang anda copy belum termasuk hashtag nya, maka beri hashtag (#) tepat sebelum kode warna tersebut.


Petunjuk Penggunaan Generator #3

  1. Caranya hampir sama dengan generator yang kedua, pilih warna yang anda inginkan.
  2. Pada kolom yang bertuliskan "HEX" terdapat kode warna, copy kode warna tersebut.


Ingin generator yang satu ini? Copy kode dibawah ini dan taruh diblogmu!
<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"><param name="movie" value="http://www.2createawebsite.com/build/color.swf" />
<param name="quality" value="High" />
<embed type="application/x-shockwave-flash" width="485" height="485" src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" name="obj1" quality="High"></embed></object><br />
<a href="http://bloggingforstyling.blogspot.com">Blogging for Styling</a>

Home > Archives for June 2013

Menghilangkan Tulisan Langganan Entri (Atom)

hanifaptri Wednesday, June 19, 2013 Be the first to comment!
Tulisan "langganan entri atom" biasanya berada dibawah postingan. Sepertinya tulisan langganan entri atom itu sangat mengganggu penampilan blog anda. Jadi jika tulisan langganan entri atom itu dihapus, wajar-wajar saja. Bagi anda yang memang tidak nyaman dengan keberadaan tulisan ini, anda dapat menghilangkannya dengan cara yang mudah. Bagaimana caranya?

Menghilangkan Tulisan Langganan Entri Atom

1. Login ke akun Blogger anda.
2. Masuk ke Template > Edit HTML
3. Cari kode ]]></b:skin>. Tambahkan kode dibawah ini tepat diatas kode tersebut.
.feed-links {display:none;}

4. Klik Save Template

Semoga artikelnya bermanfaat! Jangan lupa subscribe blog ini dengan cara mengisi email dan nama anda pada kolom yang berada di sidebar paling atas. Terima kasih!
Home > Archives for June 2013

Speech Bubble Threaded Comment for Blogger

hanifaptri Wednesday, June 19, 2013 Be the first to comment!

Style threaded comment blogger mungkin terlalu kudet/jadul. Coba threaded comment yang satu ini. Tampilannya lebih stylish! Seperti pada postingan sebelumnya, anda hanya perlu menambahkan kode CSS. Tetapi untuk mempermudah proses, anda menambahkan kode CSS melalui Template Designer Blogger. Jadi tidak perlu lagi klik edit html dahulu. Oh, iya! Sebelum memulai, mari kita lihat preview/demo nya dahulu!


Cara Memasang Speech Bubble Threaded Comment

1. Login ke akun Blogger anda.
2. Masuk ke Template > Customization (IDN: Template > Sesuaikan)
3. Pilih tab Advanced lalu pilih Add CSS.
4. Masukkan kode dibawah ini pada kolom Add CSS.
/* Threaded Comment - Bloggingforstyling.blogspot.com */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSYW9oHMwHTuU_0mtSmZlcnBJRtiVSEDjaN5Xy-bIVpezfXw0W4_scoJPa6qms8usbC1gMAcQOwmfz9MYZdSC5RwbXuNcacCzC42okDeiFm_P4Ft2P8nVhpa8JNczpTiCyxbUDWfhKB20/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

5. Klik Apply to Blog

Caption untuk nomor 3 dan 4

Home > Archives for June 2013

Merubah "Showing Post With Label" di Blogger

hanifaptri Wednesday, June 19, 2013 Be the first to comment!
Hi! Kalau anda buka halaman label, pasti akan ada tulisan "showing post with label..." atau "tampilkan posting dengan label...". Warna kotak nya abu-abu, itu merupakan style default dari blogger. Sob, mari kita buat kotak "showing post with label" itu menjadi lebih stylish dan tidak kuno. Caranya sangat mudah, anda hanya menaruh kode CSS dibagian template blog anda.


Menambahkan Kode CSS

1. Login ke akun Blogger anda.
2. Masuk ke Template > Edit HTML
3. Cari kode ]]></b:skin> . Ganti kode tersebut dengan kode dibawah ini.
/* Status Message - Tutorial by bloggingforstyling
---------------------------------------------------------------------*/
#main .status-msg-wrap {
position: relative;
margin-bottom: 10px;
border-radius: 3px;
padding: 10px 10px 10px 32px;
}
#main .status-msg-body {
font-size:80%;
text-align:left;
padding:5px 5px 0px 30px;
width:auto;
}
#main .status-msg-border {border: 1px solid;border-color: #f5c558;}
#main .status-msg-bg {
background-color: #fae7a2;
background-repeat: no-repeat;
background-position: 10px 11px;
}

]]></b:skin>

4. Klik Save Template

Gimana? Keren bukan? 

Jun 18, 2013

Home > Archives for June 2013

Merubah Warna Text Selection dengan CSS

hanifaptri Tuesday, June 18, 2013 Be the first to comment!

Bosan dengan warna text selection yang berwarna biru? Warna biru itu terlalu kuno, coba dengan warna lain yang lebih menarik. Bisa warna pink, biru, abu-abu, sesuai kesukaan anda. Nah, cara mengganti warna text selection, saya menggunakan trik CSS. Disini saya menggunakan atribut ::selection.  Hampir semua browser compatible dengan atribut selection. Berikut ini merupakan browser yang support dengan ::selection.

Oke, disini hanya ada satu langkah untuk mengubah warna text selection. Yaitu anda hanya perlu menambahkan kode css ke bagian template blog anda. Bagaimana caranya?

1. Login ke akun Blogger.
2. Masuk ke Template > Edit HTML
3. Cari kode ]]></b:skin>. Taruh kode dibawah ini tepat diatas kode ]]></b:skin>.
/* Text Selection - BFS
------------------------------------------------------------ */
::-moz-selection {
    background-color: #dd2020;
    color: #fff;
}

::selection {
    background-color: #dd2020;
    color: #fff;
}

4. Klik Save Template

Customization

  • Pada garis keempat terdapat kode #dd2020. Ganti kode #dd2020 dengan kode warna text selection.
  • Begitu juga dengan garis kesembilan. Kode pada garis keempat dan kesembilan harus sama! 

Caranya sangat simpel! Mungkin warna text selection-nya lebih bagus jika warnanya masuk/matching dengan tema warna blog anda. Saya mengucapkan terima kasih! Kalau ada masalah, silahkan tanya di kotak komentar.
Home > Archives for June 2013

Floating Social Sharing Bar for Blogger

hanifaptri Tuesday, June 18, 2013 Be the first to comment!
Beberapa waktu lalu, saya browsing dan menemukan widget ini. Jadi kerja widget ini adalah saat anda meng-scroll page kebawah, akan muncul kotak berwarna oranye transparan dan berisi tombol-tombol untuk mengeshare postingan yang sedang visitor lihat. Widget ini menggunakan jQuery. Jadi, anda harus menambahkan plugin jQuery dahulu. Widget ini tampak lebih keren karena warna dasarnya (background) sedikit transparan. 

Disini anda hanya perlu melakukan 3 langkah, yakni :
  1. Memasang plugin jQuery 1.8.2 (bagi yang belum memasang).
  2. Menambahkan "Marker".
  3. Memasang widget.

Memasang Plugin jQuery 1.8.2

1. Seperti biasa, login ke akun blogger anda.
2. Masuk ke Template > Edit HTML
3. Cari kode </head>, lalu diatas kode tersebut tambahkan kode dibawah ini.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

Menambahkan "Marker"

1. Tetap di HTML Editor.
2. Cari kode <data:post.body/> (kalau anda menemukan kode ini lebih dari 3 kali, maka anda pilih yang kedua). Lalu tambahkan kode berikut dibawahnya.
<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'></div>
</b:if>

Memasang Widget

1. Cari kode </body>. Tambahkan kode berikut ini setelah kode </body>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://makingdifferent.github.com/blogger-widgets/Floating%20Social%20sharing%20Horizontal%20Bar.js' type='text/javascript'/>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<span id='twitter' style='float:left; margin: 0 5px; padding: 3px 0 0 0;'>
<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span id='md-plusone' style='float:left; padding-top: 4px; margin: 0 5px;'>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='tall'/></span>
<span id='md-fblike' style='float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#appId=155934781145405&amp;xfbml=1'/>
<fb:like font='' href='' layout='box_count' send='false' show_faces='false' width='50'>
</fb:like>
</span>         
<div style='display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF'>
Are you Awesome? Legend has it that Awesome people can and will share this post!<br/>
<span style='color: #FFFFFF; font-size: 18px;'><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>

2. Klik Preview, apakah ada masalah atau tidak. Kalau tidak ada masalah, lanjut ke langkah ketiga. Kalau ada masalah, coba bahas masalah anda di kotak komentar.
3. Klik Save Template
3. Lihat hasilnya!

Thankyou!

Jun 17, 2013

Home > Archives for June 2013

Customize Blogger Lightbox

hanifaptri Monday, June 17, 2013 Be the first to comment!
Apa sih lightbox pada blogger itu? Lightbox bisa anda jumpai saat anda mengeklik gambar diatas. Akan muncul seperti popup yang berupa gambar. Lightbox pada aslinya, backgroundnya berwarna hitam transparant. Tetapi disini anda lihat warnanya putih? Mengapa? Karena saya sudah merubah model lightbox yang lama jadi lightbox yang baru! Nah, caranya bakalan saya terangkan kali ini.

Bagian-Bagian Lightbox


Cara Mengubah Background dan Style Lightbox

1. Login ke akun Blogger anda.
2. Masuk ke Template > Edit HTML
3. Cari kode ]]></b:skin> . Lalu tambahkan kode ini tepat sebelum kode ]]></b:skin>.
/* Blogger Lightbox
----------------------------------------------- */

/* Warna Dasar */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}

/* Border Gambar */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}

/* Tombol Close */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(alamat-gambar-tombol-close) no-repeat !important;
width: 24px !important;
height: 24px !important;
}

/* Thumbnails Bar Color */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
}

/* Warna Teks */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}

/* Index Info (number of images) */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

4. Klik Save Template

 Tara...!! Lihat perubahannya! 
Home > Archives for June 2013

Mengaktifkan Infinite Scroll pada Blogger

hanifaptri Monday, June 17, 2013 Be the first to comment!
Infinite scroll bisa anda lihat pada blogger dynamic view template. Anda tidak perlu lagi menekan tombol next, tetapi dengan adanya infinite scroll di blog anda, postingan yang ada di homepage akan me-load sendiri. Ciri khas nya yaitu gambar "loading". Itu merupakan kelebihan dari infinite scroll. Cara memasang infinite scroll ini sangat mudah, tinggal menekan tombol "Add to Blogger" saja!


How to Add Infinite Scroll Instantly

  1. Klik tombol Add to Blogger
  2. Tidak usah isi kolom Judul
  3. Taruh Widget di bagian bawah Postingan

How to Add Infinite Scroll Only Homepage, Label Pages,  and Archive Pages

  1. Klik tombol Add to Blogger
  2. Tidak usah isi kolom Judul
  3. Taruh Widget di bagian bawah Postingan.


Home > Archives for June 2013

Memasang Tombol "Add to Blogger"

hanifaptri Monday, June 17, 2013 Be the first to comment!
Tahukah anda tombol add widget? Tombol ini merupakan jalan pintas  untuk menambahkan widget ke blog anda tanpa harus membuka-buka dasbor blog anda terlebih dahulu. Buat anda yang mempunyai blog seputar tutorial blogging seperti Bloggerstyle ini, tools ini sangat berguna buat anda loh! Nah, kalau misalnya anda punya tutorial tentang widget, tidak perlu nulis-nulis kode widgetnya. Hanya dengan satu tombol widget akan terinstall otomatis ke blog si pembaca.

Cara memakai tools ini :

  1. Isi judul widget, url profil, alamat web dan yang paling penting kode widgetnya.
  2. Klik tombol generate
  3. Copy-paste kode yang ada di kotak dibawah ke postingan tutorial anda. 
  4. Kalau anda mau membuat 2 tombol, klik reset 
  5. Lalu lakukan langkah seperti langkah 1-3.


Add Widget Button Generator



Copy this code

Subscribe to: Posts (Atom)
Copyright 2013 UrbanTheme. Designed by Themebite. Powered by Blogger.