Wednesday, 29 January 2014

Pop Up Facebook Like Box With Lightbox Effect Valid HTML 5

Pop Up Facebook Like Box With Lightbox Effect - Seperti pada umumnya pop up facebook like box dengan efek lightbox atau warna gelap disekeliling widget. Cara memasang pop up facebook like box inipun cukup mudah, sobat hanya dengan menambahkan kode yang ada di bawah ini ke dalam widget HTML/Javascript yang terdapat pada elemen tata letak blog. Untuk lebih jelasnya berikut tutorial cara memasang Pop Up Facebook Like Box With Lightbox Effect kedalam blog.

Pop Up Facebook Like Box With Lightbox Effect

Interupsi =D Sebelum memasang widget ini perlu sobat ketahui jika kode di bawah ini murni CSS tidak memakai Javascript jadi setelah memasang widget ini kecepatan blog sobat tidak akan berat atau tetap seperti sebelum memasang widget ini.

1. Login ke akun blogger sobat.
2. Copy kode berikut ini kemudian paste kedalam widget HTML/Javascript.
<style type='text/css'>
#PopFace {
position : absolute;
display : block;
top : 0;
left : 0;
width : 100%;
height : 100%;
position : fixed;
background-color : rgba(0, 0, 0, 0.9);
margin : 0;
overflow : hidden;
z-index : 999999;
}
#PopBook {
background-color : #ecf0f1;
overflow : hidden;
z-index : 999999;
}
.PopBook {
width : 290px;
height : 300px;
position : fixed;
top : 45%;
left : 50%;
margin-top : -200px;
margin-left : -200px;
border : #3b5998 solid 10px;
padding : 20px;
z-index : 999999;
border-radius : 4px;
}
#PopTitle {
background : #3b5998;
color : #fff;
font-size : 18px !important ;
font-weight : 700;
width : 324px;
margin : 0 -27px 10px -27px;
padding : 10px;
line-height : 25px;
text-align : center;
float : left;
}
.anarchyta {
width : 280px;
height : 200px;
position : relative;
background : #3b5998;
padding : 0 10px 15px 0;
margin-top : 60px;
border-radius : 4px;
overflow : hidden;
}
.anarchyta, .anarchyta:before, .anarchyta:after {
background : transparent;
border : #3b5998 solid 1px;
}
.anarchyta:before, .anarchyta:after {
position : absolute;
content : "";
bottom : -3px;
left : 2px;
right : 2px;
height : 1px;
border-top : none;
}
.anarchyta:after {
left : 4px;
right : 4px;
bottom : -5px;
box-shadow : 0 0 2px #3b5998;
}
.close {
background : #3b5998;
padding : 5px 5px 10px 5px;
font-size : 14px;
font-weight:bold;
color : #ecf0f1;
text-decoration : none;
border-radius : 4px 4px 0 0;
cursor:pointer;
}
</style>

<div id='PopFace'>
<div class='PopBook' id='PopBook'>
<h3 id='PopTitle'>Get Update Photos Via Facebook</h3>
<div class='anarchyta'>
<div class='fb-like-box' data-header='false' data-href='http://www.facebook.com/SoundBrigade' data-show-faces='true' data-stream='false' data-width='292'></div>
</div><br/>
<a class='close' onmouseup='document.getElementById(&#39;PopFace&#39;).style.display=&#39;none&#39;'>CLOSE</a>
</div>
</div>

Keterangan : Ganti http://www.facebook.com/SoundBrigade dengan URL facebook fanspage sobat.

3. Langkah terakhir klik "Simpan".

Kini Pop Up Facebook Like Box With Lightbox Effect sobat sudah terpasang ke dalam blog dan apabila nanti pengunjung datang blog sobat maka widget Pop Up Facebook Like Box With Lightbox Effect ini otomatis tampil setiap pengunjung yang datang dan bisa klik "Close" untuk keluar maupun klik "Like" apabila pengunjung ingin mengikuti update terbaru dari fanspage tersebut.

Oke sekian dulu artikel mengenai Pop Up Facebook Like Box With Lightbox Effect semoga pengunjung sobat tambah ramai seperti pasar malam.

Sunday, 26 January 2014

Dynamic Mag Responsive Blogger Template

Dynamic Mag adalah template blogger responsif premium, Sekarang hari yang sulit untuk menemukan jenis template blogger gratis karena semua orang menjual template mereka pada berbagai jenis pasar tetapi Dynamic Mag memberikan Anda template blogger ini secara gratis.

Dynamic Mag Responsive Blogger Template



Label Post Terpisah

Dynamic Mag Responsive Blogger Template

Recent Post Slider

Dynamic Mag Responsive Blogger Template

Responsive Design

Dynamic Mag Responsive Blogger Template

Fitur Utama

  • Label Post Terpisah: Anda dapat menampilkan posting dengan label yang berbeda, jika Anda hanya ingin menampilkan Artikel Terkait "Olahraga" bisa Anda pasang Label untuk Olahraga.
  • Responsif Design: Dynamic Mag Blogger Template sepenuhnya responsif yang secara otomatis menyesuaikan resolusi layar untuk mendukung semua perangkat dan browser resolusi yang berbeda.
  • Automatic Post Slider: Dynamic Mag telah menambahkan sebuah posting slider yang mengagumkan untuk template ini yang secara otomatis mengambil posting menggunakan JSON dan ditampilkan pada slider ini.

Saturday, 25 January 2014

Adobe Photoshop Cs6

Kali ini saya akan memposting Software Adobe Photoshop Cs6 Versi terbaru Dan Full Version bisa kalian download disini

Adobe Photoshop Cs6




Fitur fitur terbaru dan kelebihan pada software terbaru ini adalah
  1. Adobe Camera Raw 7
    Adobe menyempurnakan kinerja RAW engine dari Adobe Camera Raw 6 dan juga memperbaiki interfacenya.
  2. Blur Galery
    Dengan blur gallery di Photoshop CS6, kita bisa mensimulasikan foto bokeh tanpa menggunakan plugin dan juga simulasi tilt-shift untuk foto miniatur dengan lebih mudah.
  3. Auto Recovery
    Photoshop CS6 akan secara otomatis menyimpan file setiap 10 menit, jadi ketika komputer anda mendadak mati kita hanya akan kehilangan 10 menit pekerjaan. Kelihatannya simpel dan sepele, namun sangat sangat membantu. 
  4. Crop Tool
    Photoshop merombak secara keseluruhan crop tool untuk cropping foto anda. Dengan crop tool yang baru kita bisa memilih crop berdasar aturan komposisi seperti rule of third. Yang tidak kalah penting adalah, crop tool yang baru bekerja mirip Lightroom dimana foto tidak akan terpotong hanya secara visual saja yang terpotong, jadi non desctructive. 
  5. Content Aware Move
    Merupakan kelanjutan dan pengembangan dari content aware fill dimana kita bisa dengan mudah menghilangkan sebuah obyek dari foto. Dengan teknologi content aware move kita bisa memindahkan sebuah subyek foto dari satu titik ke titik lain.
Dan agar Software ini bisa berjalan seperti biasanya ,ada juga System yg di perlukan dan di terapkan di PC kalian yaitu :
  • Intel® Pentium® 4 or AMD Athlon® 64 processor
  • Microsoft® Windows® XP* with Service Pack 3 or Windows 7 with Service Pack 1
  • 1GB of RAM
  • 1GB of available hard-disk space for installation; additional free space required during installation (cannot install on removable flash storage devices)
  • 1024x768 display (1280x800 recommended) with 16-bit color and 256MB (512MB recommended) of VRAM
  • OpenGL 2.0–capable system
  • DVD-ROM drive
  • This software will not operate without activation. Broadband Internet connection and registration are required for software activation, validation of subscriptions, and access to online services.† Phone activation is not available.

Wednesday, 22 January 2014

Headline Breaking News di Blog

Headline Breaking News di Blog

Cara Membuat Headline Breaking News di Blog – sebenarnya ini sama seperti widget recent post atau latest post namun hanya saja pada widget headline breaking news ini berbentuk horisontal seperti navigasi yang biasanya di pasang diatas header atau di bawah navigasi menu atau bisa juga di atas footer blog. Pada widget headline breaking news ini nantinya akan memunculkan setiap artikel terbaru pada sebelah kiri dan disebelah kanannya terdapat widget jejaring social media. Untuk memasang widget headline breaking news ke dalam blog caranya cukup mudah, anda hanya perlu menambah widget dan bisa mengaturnya untuk bisa ditaruh dimana tempat yang anda sukai dengan menggeser bagian elemen tata letak layout blog. Untuk melihat seperti apa memasangnya ke dalam blog, berikut langkah-langkahnya untuk Cara Membuat Headline Breaking News di Blog.

Demo bisa di lihat di atas header blog saya (Jika belum di lepas) jika sobat tertarik untuk menggunakan ikuti langkah berikut ini.
  • Login ke Blogger.com
  • Edit Template
  • Copy semua CSS dan JS di bawah ini dan letakan di atas </head>
<style type='text/css'>
#headlinenews {
position: relative;
background: #f1c40f;
border-bottom: 5px solid #34495e;
border-top: 5px solid #34495e;
display: block;
height: 22px;
line-height: 22px;
overflow: hidden;
margin: 0 auto 20px;
padding: 5px 30px;
width: 980px;
}
#news {
float: left;
margin-left: 120px;
}
#news a {
background: none !important;
color: #fff !important;
font: bold 12px/22px Tahoma;
text-decoration: none;
}
.titlenews {
background: #34495e;
color: #fff;
display: block;
float: left;
font: bold 12px/22px Tahoma;
padding: 9px;
margin-top: -10px;
position: absolute;
}
ul.shsocial {
background#34495e;
float: right;
margin: -8px 0;
}
ul.shsocial li {
float: left;
list-style: none outside none;
border: none;
}
ul.shsocial li a {
background-color: transparent;background-image:url(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:34px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a {
background-position: 0 0
}
ul.shsocial li.gp a {
background-position: -96px 0
}
ul.shsocial li.rs a {
background-position: -192px 0
}
ul.shsocial li.tw a {
background-position: -256px 0
}
ul.shsocial li.fb a:hover {
background-position: 0 -32px
}
ul.shsocial li.gp a:hover {
background-position: -96px -32px
}
ul.shsocial li.rs a:hover {
background-position: -192px -32px
}
ul.shsocial li.tw a:hover {
background-position: -256px -32px
}
</style>
<script src='http://google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
<script src='http://yourjavascript.com/1851142251/headline-news.js' type='text/javascript'></script>
  • Kemudian cari kode <div id='wrapper'> Gunakan CTRL + F
  • Copy semua HTML dan JS di bawah ini dan letakan tepat di bawahnya
<div id='headlinenews'>
<span class='titlenews'>Latest Post</span>
<div id='news'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 5000, "_new")
cssfeed.addFeed("Feed Blog", "<data:blog.homepageurl/>feeds/posts/default")
cssfeed.displayoptions("date")
cssfeed.setentrycontainer("span")
cssfeed.filterfeed(10, "date")
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/USERNAME' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/USERNAME' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/USERNAME' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/USERNAME' target='_blank' title='rss'>
</a></li>
</ul>
</div>
Keterangan : Ganti USERNAME dengan ID masing-masing.
Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.
  • Demo
Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog sobat. Atau bisa menyesuaikan dengan menggunakan CSS.

Oke done! Dan lihat blogger sobat, Headline Breaking News di Blog sobat sudah terpasang. Sekian dulu ya sobat, Jika ada kesalahan atau saran... Silahkan berkomentar dibawah artikel ini..

Threaded Comments Hack

Selamat malam sobat blogger semua, pada malam yang dingin ini, saya coba akan berbagi, Trik, Threaded Comment... Artikel ini sebenarnya udah populer di kalangan blogger, tapi apa salahnya untuk berbagi ilmu kepada sobat blogger semua. Threaded comment, atau kita sebut komentar berurutan, maksud nya kita buat kolom atau kita edit form komentar standar blog dengan custom css threaded comment, agar menjadi sebuah halaman komentar blog kita elegan dan tertata rapih, dengan accessories, komentar Threaded Comment, buat sobat yang berminat, silahkan simak tutorial nya di bawah ini.. Tutorial ini saya temukan beberapa bulan yang lalu di Blog nya Kang Ismet dan ini adalah yang terupdate alias terbaru yang telah di sempurnakan oleh Kang Ismet sendiri. Langsung saja ini kodenya silahkan di simak...

Threaded Comments Hack

Caranya

1. Masuk ke Blogger.com
2. Template dan pilih Edit Template (Jangan Lupa Back Up dulu Templatenya)
3. Cari Kode berikut di bawah ini
<b:include data='post' name='threaded_comments'/>
5. Kalau udah ketemu silahkan sobat ganti dengan ini
<b:include data='post' name='comments'/>
6. Kemudian cari kode ini
<b:includable id='comments' var='post'>...</b:includable>
7. Ganti semua kode di atas tadi dengan kode di bawah ini
<b:includable id='comments' var='post'>
<b:if cond='data:post.allowComments'>
<aside class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'>
&lt;meta content=&quot;UserComments:
<b:if cond='data:post.numComments != 0'>
<data:post.numComments/>
</b:if>&quot; itemprop=&quot;interactionCount&quot;/&gt;
<meta expr:content='data:post.title' itemprop='about' />
<h5><b:if cond='data:post.numComments == 0'> 0 Comments</b:if><b:if cond='data:post.numComments == 1'> 1 Comments</b:if><b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Comments</b:if></h5>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
<data:post.commentRangeText/>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
</span>
</b:if>
<div class='clear' />
<div id='comment-block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.authorUrl != &quot;https://www.blogger.com/profile/########&quot;'>
<b:if cond='data:comment.authorUrl != &quot;https://www.blogger.com/profile/########&quot;'>
<div data-level='0' expr:class='data:comment.adminClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<b:if cond='data:post.adminClass == data:comment.adminClass'>
&lt;div class=&#39;comment-inner comment-admin&#39;&gt;
<b:else/> &lt;div class=&#39;comment-inner&#39;&gt;
</b:if>
<div class='comment_area'>
<div class='comment_header'>
<div class='comment_avatar'>
<img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' />
</div>
<div class='comment_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' expr:title='data:comment.author'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<b:if cond='data:comment.author == data:post.author' />
</div>
<div class='comment_service'>
<a class='comment_date' expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<a class='comment-delete' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>&#10006;</a>
</div>
<div class='clear' />
</div>
<div class='comment_body'>
<p>
<data:comment.body/>
</p>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='Reply Comment'>Reply</a>
</div>
</div>
<div class='clear' /> &lt;/div&gt;
<div class='clear' />
<div class='comment_child' />
<div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName' />
</b:if>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<div class='clear' />
</b:if>
</div>
</b:if>
</b:if>
</b:loop>
</div>
<div class='clear' />
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
<data:post.commentRangeText/>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
</span>
</b:if>
<div class='clear' />
<div class='comment_form'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form' />
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:postCommentMsg'>
<data:postCommentMsg/>
</a>
</b:if>
</b:if>
</div>
</aside>
<b:include data='post' name='threaded_comment_js' />
</b:if>
</b:includable>
8. Kalau sudah jangan lupa untuk memasukan kode CSS. Copy semua kode di bawah ini dan letakan tepat di atas ]]></b:skin>
#comments .comment_name {
font-weight: bold;
color: #555;
margin-top: 8px;
}
#comments .comment_name a {
color: #555;
text-decoration: none;
transition: all 400ms ease-in-out;
}
#comments .comment_name a:hover {
color: #e74c3c;
text-decoration: none;
}
#comments .comment_service {
float: right;
margin-top: -25px;
position: relative;
}
#comments .comment_body {
margin: 5px 0 10px;
padding: 0 60px 0 38px;
position: relative;
}
#comments .comment_body p {
line-height: 1.3em;
color: #666;
}
#comments .comment_date {
color: #999;
font-style: italic;
font-size: 12px;
line-height: 25px;
font-weight: normal;
margin-right: 20px;
}
#comments .comment_area {
border: 1px solid #bdc3c7;
margin-bottom: 10px;
margin-left: 30px;
padding-right: 10px;
transition: all 400ms ease-in-out;
min-height: 80px;
}
#comments .comment_area:hover {
border: 1px solid #666;
}
#comments .comment_area:hover .comment_avatar img {
border: 1px solid #666;
}
#comments .comment_area:hover .comment_reply {
opacity: 1;
top: 6px;
}
#comments .comment_child .comment_wrap {
padding-left: 5%;
}
#comments .comment_reply {
display: inline-block;
color: #fff;
font-family: Arial;
font-size: 11px;
font-weight: bold;
padding: 4px 16px;
float: right;
position: absolute;
right: 0;
top: -20px;
opacity: 0;
transition: all 400ms ease-in-out;
background: #e74c3c;
}
#comments .comment_reply:hover {
text-decoration: none;
background: #c0392b;
}
#comments .comment_reply:active {
margin-top: 1px;
}
#comments .unneeded-paging-control {
display: none;
}
#comments .comment_reply_form .comment-form {
width: 100%;
}
#comments .comment-delete {
float: right;
position: absolute;
top: 4px;
right: 0;
font-size: 16px;
color: #999;
}
#comments .comment-delete:hover {
color: #c0392b;
}
#comments .comment-form {
max-width: 100%;
margin-top: 25px;
}
#comments .comment-form p {
background: #2c3e50;
padding: 10px;
margin: 5px 0;
color: #eee;
border-radius: 4px;
position: relative;
line-height: 1.4em;
}
#comments .comment-form p:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -15px;
left: 15px;
border: 8px solid transparent;
border-color: #2c3e50 transparent transparent;
}
#comments .deleted-comment {
position: relative;
display: block;
background: url('http: //1.bp.blogspot.com/-Yj5ewidrX5Q/UkrG9s3fS5I/AAAAAAAAFrQ/rhhaMJwHDoc/w14-h18/tempat-sampah.png') 15px center no-repeat scroll #db6161;
color: rgba(0, 0, 0, .3);
margin: 0 0 10px;
padding: 15px 20px 15px 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
text-align: left;
}
#comments #comment-editor {
background: url('http: //2.bp.blogspot.com/-mNjVN6r_rb8/T2sMcRjbRoI/AAAAAAAABBE/Hws4ULVh2uw/s1600/ajax-loader.gif') no-repeat center;
width: 100% !important;
}
#comments iframe {
border: none;
overflow: hidden;
}
9. Silahkan sobat cari kode <b:includable id='threaded_comment_js' var='post'>...</b:includable>, jika sudah ketemu ganti dengan kode bawah ini
<b:includable id='threaded_comment_js' var='post'>
<script type='text/javascript'>
if (typeof(jQuery) == & #39;undefined&# 39;) {
document.write( & quot; & lt; scr & quot; + & quot; ipt type = \ & quot; text / javascript\ & quot; src = \ & quot; http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\&quot;&gt;&lt;/scr&quot; + &quot;ipt&gt;&quot;);}
</script>
<script async='async' src='//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js' type='text/javascript'></script>
<script type='text/javascript'>
< b: if cond = 'data:post.numComments != 0' >
var Items = < data: post.commentJso / > ;
var Msgs = < data: post.commentMsgs / > ;
var Config = < data: post.commentConfig / > ; < b:else />
var Items = {};
var Msgs = {};
var Config = { & #39;maxThreadDepth&# 39;: & #39;0&# 39;}; < /b: if >
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 6=\'.x\';5 y=$(\'#q-z\').b(\'g\');7 15(d){5 J=\' \\n\\r\\t\\f\\16\\17\\18\\19\\1a\\1b\\1c\\1d\\1e\\1f\\1g\\1h\\1i\\1j\\1k\\1l\\1m\\1n\\1o\\1p\\1q\\1r\\1s\';K(5 i=0;i<d.A;i++){8(J.j(d.1t(i))!=-1){d=d.k(0,i);1u}}l d}$(\'.L .1v p\').3(7(i,h){B=h.1w();m=B.j(\'@<a C="#c\');8(m!=-1){D=B.j(\'</a>\',m);8(D!=-1){h=h.k(0,m)+h.k(D+4)}}l h});7 M(2){r=2.j(\'c\');8(r!=-1)2=2.k(r+1);l 2}7 N(2){2=\'&1x=\'+2+\'#%O\';P=y.Q(/#%O/,2);l P}7 R(){3=$(6).3();$(6).3(\'\');6=\'.x\';$(6).3(3);$(\'#q-z\').b(\'g\',y)}7 S(e){2=$(e).b(\'E\');2=M(2);3=$(6).3();8(6==\'.x\'){T=\'<a C="#U" 1y="R()">\'+1z.1A+\'</a><a 1B="U"/>\';$(6).3(T)}1C{$(6).3(\'\')}6=\'#1D\'+2;$(6).3(3);$(\'#q-z\').b(\'g\',N(2))}F=1E.1F.C;G=\'#q-1G\';H=F.j(G);8(H!=-1){V=F.k(H+G.A);S(\'#1H\'+V)}K(5 i=0;i<u.A;i++){8(\'W\'1I u[i]){5 2=u[i].W;5 I=1J($(\'#c\'+2+\':v\').b(\'X-Y\'));$(\'#c\'+2+\' .1K:v\').3(7(m,Z){5 o=u[i].E;8(I>=1L.1M){$(\'#c\'+o+\':v .1N\').10()}5 w=$(\'#c\'+o+\':v\').3();w=\'<11 1O="L" E="c\'+o+\'" X-Y="\'+(I+1)+\'">\'+w+\'</11>\';$(\'#c\'+o).10();l(Z+w)})}}5 12=$("#1P");12.1Q(\'.1R 1S\').1T(7(){5 13=$(14).b(\'g\');$(14).1U().b(\'g\',13.Q(/\\/s[0-9]+(\\-c)?\\//,"/1V-c/"))});',62,120,'||par_id|html||var|Cur_Cform_Hdr|function|if|||attr||str|||src|||indexOf|substring|return|index||child_id||comment||||Items|first|child_html|comment_form|Cur_Cform_Url|editor|length|temp|href|index_tail|id|cur_url|search_formid|search_index|par_level|whitespace|for|comment_wrap|Valid_Par_Id|Cform_Ins_ParID|7B|n_cform_url|replace|Reset_Comment_Form|Display_Reply_Form|reset_html|origin_cform|ret_id|parentId|data|level|oldhtml|remove|div|avatar|ava|this|trim|x5b|x5d|x7c|x7d|x3c|x3e|x0b|xa0|u2000|u2001|u2002|u2003|u2004|u2005|u2006|u2007|u2008|u2009|u200a|u200b|u2028|u2029|u3000|charAt|break|comment_body|toLowerCase|parentID|onclick|Msgs|addComment|name|else|r_f_c|window|location|form_|rc|in|parseInt|comment_child|Config|maxThreadDepth|comment_reply|class|comments|find|comment_avatar|img|each|show|s45'.split('|'),0,{}))
</script>
</b:includable>
Terakhir "Save" template sobat..
Sekian tutorial mengenai Blogger Threaded Comments Hack ini. Semoga bermanfaat untuk sobat blogger semua.

Tuesday, 21 January 2014

Faster Vsand Blogger Templates SEO Valid HTML5 Responsive

Selamat siang sobat blogger semua, kali ini saya mau share Template yg bener bener fast loading. Template ini gak sengaja saya temuin di blog tetangga yaitu Ridwan Hex sekaligus perancang tempalate yang di beri nama Faster Vsand. Template ini sangat elegan dan dinamis apalagi dengan fitur yang responsive yang memudahkan pengguna yang menggunakan smartphone, android etc. Template ini valid HTML 5 dan SEO score untuk template ini cukup sempurna karena setelah di cek lewat CHKME nilainya 100%.

Faster Vsand Blogger Templates SEO Valid HTML5 Responsive



Fiture

  • SEO 100%
  • Responsive Layout
  • Elegant
  • Valid HTML5
  • Auto Readmore
  • Navigation Dropdown
  • Related Post

SEO 100%

SEO Score 100%

Valid HTML5

Valid HTML5

Pemasangan

  • Backup Terlebih dahulu template Yang Dulu
  • Masuk Blogger.com Pilih Blog Yang akan Diganti Templatenya
  • Masuk Tab Template Cadangkan/pulihkan Trus Klik Upload.
  • Atau Masuk Edit HTML
  • Copy Semua Kode Template
  • Pastekan Di Edit HTML
  • Save Dan Atur Lagi Deh
Catatan
  • Jangan Jual template ini
  • Jangan Hapus Link Credit

Loading Page Blogger

Salam jumpa lagi dengan saya, share posting ini sudah banyak dibahas di Dunia Maya, Saya hanya ikut meramaikan saja untuk bisa berbagi dengan sobat semua. Effect Loading Page ini sebuah widget yang hanya menunda waktu Loading baik saat pertama kali membuka Web atau membuka halaman Blog, dengan Script yang boleh dibilang simple.

Loading Page Blogger

Tutorial

  1. Login ke Blogger
  2. Klik -> Template -> Edit HTML (jangan lupa back-Up template)
  3. Cari Kode </b:skin> (gunakan Ctrl+F)Copy Paste kode CSS dibawah ini sebelum Kode Tag </b:skin>
#loading {
position: fixed;
z-index: 50;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #333333 url(http://2.bp.blogspot.com/-mNjVN6r_rb8/T2sMcRjbRoI/AAAAAAAABBE/Hws4ULVh2uw/s1600/ajax-loader.gif) no-repeat center;
line-h eight: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.wwy #loading {
display: none;
}
#progress-bar {
position: absolute;
top: 0;
left: 0;
background: #eee;
opacity: 0.8;
width: 0;
height: 18px;
}
Karena ini menggunakan Javascript jadi tambahkan Kode dibawah ini sebelum TAG </head>
<script type='text/javascript'>
(function($){$("html").removeClass("wwy");
$("#header").ready(function(){ $("#progress-bar").stop()
.animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop()
.animate({ width: "75%" },1500) });
$(window).load(function(){ $("#progress-bar").stop()
.animate({ width: "100%" },600,function(){ $("#loading")
.fadeOut("fast",function(){ $(this)
.remove(); }); });});})(jQuery);
</script>
Agar berfungsi tambahkan Kode TAG berikut ini sesudah TAG <body>
<div id='loading'>
<div id='progress-bar'/>
</div>
Apabila dipergunakan hanya untuk Halaman Utama memakai TAG Kondisional cara-nya seperti ini
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loading'>
<div id='progress-bar'/>
</div>
</b:if>
Semoga Share posting ini bisa menambah pengetahuan kita semua. Salam Anarchyta...

Floating Social Share Buttons for Blogger

Tutorial ini akan membantu Anda dalam menambahkan tombol share Sosial di bawah setiap posting blog Anda. Widget ringan dalam ukuran dan terlihat elegan. Di setiap pos setelah bergulir widget akan muncul di bagian bawah bawah layar. Widget berisi empat tombol berbagi - Facebook, Twitter, Google+, LinkedIn. Ada tombol close juga untuk menutup tombol share.

Adding the Marker

Untuk menambahkan widget ini Anda harus pergi ke
1. Blogger
2. Template
3. Edit HTML
4. Cari Kode <data:post.body/>
dan paste kode di bawah ini diletakan tepat di bawah <data:post.body/>
CATATAN
Mungkin ada lebih dari satu <data:post.body/> jadi pastikan bahwa Anda telah memilih kode yang benar.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='md-active-share-comment-marker'/>
</b:if>

Adding the JavaScript Editor

Kemudian cari kode </head> dan letakan kode di bawah ini tepat di atas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-floating-share.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
</b:if>

Adding the CSS Editor

Kemudian cari kode </head> dan letakan kode di bawah ini tepat di atas kode </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import &quot;//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css&quot;;
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}
.share-button{ background:#DCE0E0!important; position:relative; display:block; float:left; height:40px; overflow:hidden; width:150px; border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}
.icon{ display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}
.icon i{color:#fff;line-height:42px}
.slide{z-index:2; display:block; height:100%; left:38px; position:absolute; width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}
.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid
rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}
.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}
.google #___plusone_0{width:70px!important;top:10px;right:15px;position:absolute;display:block;z-index:1}
.linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}
.facebook:hover .slide{left:150px}
.twitter:hover .slide{top:-40px}
.google:hover .slide{bottom:-40px}
.linkedin:hover .slide{left:-150px}
.facebook .icon,.facebook .slide{background:#305c99}
.twitter .icon,.twitter .slide{background:#00cdff}
.google .icon,.google .slide{background:#d24228}
.linkedin .icon,.linkedin .slide{background:#007bb6}
</style>
</b:if>

Adding the HTML Editor

Dan tambahkan kode di bawah ini diletakan tepat di atas </body>.
Kode ini telah dioptimalkan dan membuat loading lebih cepat.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='md-share-window' style='width: 100%; display: block; position: fixed; bottom: -450px; left: 0px; background-color: rgba(128, 128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
<div style='width: 800px; margin: 20px auto;'>
<a class='boxclose' id='boxclose'/>
<div id='share-buttons'>
<div class='facebook share-button'>
<i class='icon'>
<i class='icon-facebook'>
</i>
</i>
<div class='slide'>
<p> facebook </p>
</div>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FSoundBrigade&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=20&amp;appId=568581339861351' style='border:none; overflow:hidden; width:80px; height:20px;'>
</iframe>
</div>
<div class='twitter share-button'>
<i class='icon'>
<i class='icon-twitter'>
</i>
</i>
<div class='slide'>
<p> twitter </p>
</div>
<a class='twitter-share-button' data-via='Anarchyta' href='https://twitter.com/share'> Tweet </a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
</script>
</div>
<div class='google share-button'>
<i class='icon'>
<i class='icon-google-plus'>
</i>
</i>
<div class='slide'>
<p> google+ </p>
</div>
<div class='g-plusone' data-size='medium'>
</div>
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po, s);
}
)();
</script>
</div>
<div class='linkedin share-button'>
<i class='icon'>
<i class='icon-linkedin'>
</i>
</i>
<div class='slide'>
<p> linkedin </p>
</div>
<script data-counter='right' type='IN/Share'> </script>
<script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script>
</div>
</div>
<div style='display:block; margin: 0 200px; padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color: #000'>
Jangan Lupa Untuk Membagikan Kiriman Ini!!
<br />
<span style='color: #000; font-size: 18px;'>| <data:blog.pageName/> |</span>
</div>
</div>
</div>
</b:if>
Catatan
Ganti URL SoundBrigade dengan URL fanspage facebook Anda.

Kemudian "Save"
Sekian tutorial singkat ini, semoga menambah wawasan sobat lagi dan dapat berguna di kehidupan sobat.

Monday, 20 January 2014

Recent Comment Blogger Valid HTML5

Recent Comment Blogger Valid HTML5

Recent Comment Valid HTML5 - Kali ini kita akan membuat Widget Recent Comment, ini sudah saya kembangkan sehingga bisa menjadi valid html5, jadi jika sobat ingin memasang widget recent comment yang valid html5, artikel ini pas sekali untuk sobat blogger membacanya.
Widget recent comment ini selain valid html5 juga dilengkapi dengan clickable area sehingga bukan hanya nama komentator saja yang bisa diklik, tetapi disekitar avatar, nama, dan isi komentar juga bisa diklik.
Dibawah ini kode widget recent comment valid HTML5, dan jika anda tertarik memasangnya silahkan pasang di blog sobat masing-masing. :)

Berikut kodenya :
<style type="text/css">
ul.anarchyta_recent {
list-style: none;
margin: 0;
padding: 0;
width: 310px;
border-radius: 0 0 5px 5px;
}
.anarchyta_recent li {
background: none !important;
margin: 0 0 6px !important;
padding: 3px !important;
display: block;
clear: both;
overflow: hidden;
list-style: none;
border: 1px solid transparent;
border-radius: 9px;
max-height: 100px;
}
.anarchyta_recent li:hover {
border: 1px solid #ddd;
}
.anarchyta_recent a {
text-decoration: none;
}
.avatarImage {
padding: 3px;
background: #2c3e50;
float: left;
margin: 0 6px 0 0;
position: relative;
overflow: hidden;
}
.avatarRound {
border-radius: 5px;
width: 35px;
height: 35px;
}
.anarchyta_recent li span {
margin-top: 4px;
display: block;
font-size: 12px;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
var
numComments = 5,
showAvatar = true,
avatarSize = 35,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=50,
adminBlog='Dian Anarchyta';
//]]>
</script>
<script type="text/javascript" src="http://yourjavascript.com/15353210224/dian-anarchyta-recent-comments.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=anarchyta_recent&amp;&amp;max-results=50">
</script>
Copy semua kodenya,
1. Login Ke Blogger Sobat
2. Ke Tata Letak
3. Tambah Gadget  (HTML/Javascript)
4. Save
Oke done! Dan lihat blogger sobat, Recent Comment Blogger Valid HTML5 sobat sudah terpasang. Sekian dulu ya sobat, Jika ada kesalahan atau saran... Silahkan berkomentar dibawah artikel ini...

Recent Posts Slider With Navigation

Jumlah blogger di seluruh dunia telah meningkat pesat. Banyak dari kita akan memiliki lebih dari 1 blog. Jika ya, widget ini dapat membantu Anda banyak untuk berbagi lalu lintas di kedua blog. Bahkan jika Anda tidak memiliki lebih dari satu blog Anda dapat menambahkan widget ini ke blog Anda sendiri. Ini akan membantu blog Anda memiliki tingkat bouncing yang kurang dan pengunjung lebih.

Recent Posts Slider With Navigation adalah widget untuk blogger yang akan menampilkan posting terbaru dari blog yang Anda inginkan dengan bagus dan mengagumkan. Widget ini update secara otomatis dan Anda tidak perlu mengedit widget dan menambahkan gambar, judul dan deskripsi lagi. Anda hanya perlu menambahkan URL blog.

Live Demo



Setelah Anda melihat demo di atas, untuk menambahkan widget ini ke blog Anda ikuti langkah di bawah ini.

Untuk menambahkan kode widget ini pergi ke Blogger → Tata Letak → Tambah Widget → HTML / JavaScript dan paste kode HTML/JavaScript dibawah ini.
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({url: "http://afowles.blogspot.com" // URL blog });
</script>
Catatan Ganti URL http://afowles.blogspot.com dengan URL yang Anda inginkan.
Kemudian "Save"

Sekian tutorial singkat ini, semoga menambah wawasan sobat lagi dan dapat berguna di blog sobat.

Source : Dte

Sunday, 19 January 2014

List Icon Font Awesome dan CSS Value Content V4.0.3

List Icon Font Awesome dan CSS Value Content V4.0.3 Pada artikel ini bagi yang suka bermain main dengan desain blog maka pilihan tepat untuk menambah pernak-pernik pada elemen-elemen tertentu hingga sampai yang mendetail dengan menggunakan Font Awesome untuk melengkapi maupun mempercantik blog. Font Awesome versi 4.0.3 merupakan update dari versi sebelumnya, dan terdapat 11 icon baru pada Font Awesome V4.0.3 dan juga pembaharuan nama icon. Font Awesome merupakan font web yang mengagumkan dan mengandung semua ikon dari kerangka Twitter Bootstrap, dan sekarang lebih banyak lagi icon-icon lain hanya dengan menambah satu styleshet pada template maka anda bisa menggunakan 369 icon.

Agar bisa menggunakan Font Awesome, maka anda perlu menambahkan styleshet dibawah ini kemudian menyimpannya di atas kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Cara penggunaanya didalam HTML anda hanya perlu menambahkan tag <i> kemudian class dari nama icon yang dipilih. Misal untuk cara penulisannya seperti dibawah ini:
fa-html5
<i class="fa fa-html5"></i> fa-html5
Untuk memperbesar ukuran, maka anda hanya perlu menambahkan class fa-lg, fa-1x, fa-2x, fa-3x, fa-4x, fa-5x dan berikut contohnya: fa-thumbs-o-up

fa-thumbs-o-up fa-lg

fa-thumbs-o-up fa-2x

fa-thumbs-o-up fa-3x

fa-thumbs-o-up fa-4x

fa-thumbs-o-up fa-5x

<p><i class="fa fa-thumbs-o-up fa-lg"></i> fa-thumbs-o-up fa-lg</p>
<p><i class="fa fa-thumbs-o-up fa-2x"></i> fa-thumbs-o-up fa-2x</p>
<p><i class="fa fa-thumbs-o-up fa-3x"></i> fa-thumbs-o-up fa-3x</p>
<p><i class="fa fa-thumbs-o-up fa-4x"></i> fa-thumbs-o-up fa-4x</p>
<p><i class="fa fa-thumbs-o-up fa-5x"></i> fa-thumbs-o-up fa-5x</p>
Gunakan class fa-ul dan fa-li untuk mempermudah dalam membuat daftar list dan menentukan nama icon.
  • fa-check-square
  • fa-check-square
  • fa-spinner fa-spin
  • fa-square
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>fa-check-square</li>
<li><i class="fa-li fa fa-check-square"></i>fa-check-square</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>fa-spinner fa-spin</li>
<li><i class="fa-li fa fa-square"></i>fa-square</li>
</ul>
Gunakan class pull-right atau pull-left untuk membuat icon berada di sebelah kanan atau sebelah kiri, sedangkan fa-border adalah untuk membuat border pada icon tersebut.

Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right.
<i class="fa fa-info-circle fa-2x pull-left fa-border"></i>
Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right.
Gunakan class fa-spin untuk membuat icon agar bisa berputar. Ini biasa di kombinasikan pada icon fa-spinner, fa-refresh, dan fa-gigi agar bisa berputar dengan baik. Namun sayangnya animasi CSS3 ini tidak support di IE8 - IE9.



<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
Untuk memutar atau membalik icon, gunakan class fa-rotate-* dan fa-flip-*. Ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di rotate.
  normal

  fa-rotate-90

  fa-rotate-180

  fa-rotate-270

  fa-flip-horizontal

  icon-flip-vertical
<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical
Diatas adalah cara dimana untuk menuliskan Font Awesome didalam sebuah markup HTML, masih banyak lagi tips trik lainnya yang bisa digunakan didalam Font Awesome. Untuk lebih jelasnya bisa mencoba dan berkreasi sendiri agar bisa lebih memahami bermain-main dengan berbagai komponen Bootstrap. Bahkan dengan cara lain anda juga bisa untuk menambahkan icon Font Awesome didalam CSS pada pseudo elemen :before dengan menuliskan value content dari icon tersebut. Berikut skema penggunaan Font Awesome pada pseudo elemen CSS:
.element{
position: relative;
}
/* ganti content \f000 */
.element:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/* custom pada CSS */
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}
Setelah mengetahui cara penggunaan dari Font Awesome baik itu pada CSS maupun HTML maka berikut adalah list dari icon Font Awesome versi 4.0.3 beserta CSS value content.

List Icon Font Awesome dan CSS Value Content V4.0.3



  • fa-glass
    "\f000"


  • fa-music
    "\f001"


  • fa-search
    "\f002"


  • fa-envelope-o
    "\f003"


  • fa-heart
    "\f004"


  • fa-star
    "\f005"


  • fa-star-o
    "\f006"


  • fa-user
    "\f007"


  • fa-film
    "\f008"


  • fa-th-large
    "\f009"


  • fa-th
    "\f00a"


  • fa-th-list
    "\f00b"


  • fa-check
    "\f00c"


  • fa-times
    "\f00d"


  • fa-search-plus
    "\f00e"


  • fa-search-minus
    "\f010"


  • fa-power-off
    "\f011"


  • fa-signal
    "\f012"


  • fa-cog
    "\f013"


  • fa-trash-o
    "\f014"


  • fa-home
    "\f015"


  • fa-file-o
    "\f016"


  • fa-clock-o
    "\f017"


  • fa-road
    "\f018"


  • fa-download
    "\f019"


  • fa-arrow-circle-o-down
    "\f01a"


  • fa-arrow-circle-o-up
    "\f01b"


  • fa-inbox
    "\f01c"


  • fa-play-circle-o
    "\f01d"


  • fa-repeat
    "\f01e"


  • fa-refresh
    "\f021"


  • fa-list-alt
    "\f022"


  • fa-lock
    "\f023"


  • fa-flag
    "\f024"


  • fa-headphones
    "\f025"


  • fa-volume-off
    "\f026"


  • fa-volume-down
    "\f027"


  • fa-volume-up
    "\f028"


  • fa-qrcode
    "\f029"


  • fa-barcode
    "\f02a"


  • fa-tag
    "\f02b"


  • fa-tags
    "\f02c"


  • fa-book
    "\f02d"


  • fa-bookmark
    "\f02e"


  • fa-print
    "\f02f"


  • fa-camera
    "\f030"


  • fa-font
    "\f031"


  • fa-bold
    "\f032"


  • fa-italic
    "\f033"


  • fa-text-height
    "\f034"


  • fa-text-width
    "\f035"


  • fa-align-left
    "\f036"


  • fa-align-center
    "\f037"


  • fa-align-right
    "\f038"


  • fa-align-justify
    "\f039"


  • fa-list
    "\f03a"


  • fa-outdent
    "\f03b"


  • fa-indent
    "\f03c"


  • fa-video-camera
    "\f03d"


  • fa-picture-o
    "\f03e"


  • fa-pencil
    "\f040"


  • fa-map-marker
    "\f041"


  • fa-adjust
    "\f042"


  • fa-tint
    "\f043"


  • fa-pencil-square-o
    "\f044"


  • fa-share-square-o
    "\f045"


  • fa-check-square-o
    "\f046"


  • fa-arrows
    "\f047"


  • fa-step-backward
    "\f048"


  • fa-fast-backward
    "\f049"


  • fa-backward
    "\f04a"


  • fa-play
    "\f04b"


  • fa-pause
    "\f04c"


  • fa-stop
    "\f04d"


  • fa-forward
    "\f04e"


  • fa-fast-forward
    "\f050"


  • fa-step-forward
    "\f051"


  • fa-eject
    "\f052"


  • fa-chevron-left
    "\f053"


  • fa-chevron-right
    "\f054"


  • fa-plus-circle
    "\f055"


  • fa-minus-circle
    "\f056"


  • fa-times-circle
    "\f057"


  • fa-check-circle
    "\f058"


  • fa-question-circle
    "\f059"


  • fa-info-circle
    "\f05a"


  • fa-crosshairs
    "\f05b"


  • fa-times-circle-o
    "\f05c"


  • fa-check-circle-o
    "\f05d"


  • fa-ban
    "\f05e"


  • fa-arrow-left
    "\f060"


  • fa-arrow-right
    "\f061"


  • fa-arrow-up
    "\f062"


  • fa-arrow-down
    "\f063"


  • fa-share
    "\f064"


  • fa-expand
    "\f065"


  • fa-compress
    "\f066"


  • fa-plus
    "\f067"


  • fa-minus
    "\f068"


  • fa-asterisk
    "\f069"


  • fa-exclamation-circle
    "\f06a"


  • fa-gift
    "\f06b"


  • fa-leaf
    "\f06c"


  • fa-fire
    "\f06d"


  • fa-eye
    "\f06e"


  • fa-eye-slash
    "\f070"


  • fa-exclamation-triangle
    "\f071"


  • fa-plane
    "\f072"


  • fa-calendar
    "\f073"


  • fa-random
    "\f074"


  • fa-comment
    "\f075"


  • fa-magnet
    "\f076"


  • fa-chevron-up
    "\f077"


  • fa-chevron-down
    "\f078"


  • fa-retweet
    "\f079"


  • fa-shopping-cart
    "\f07a"


  • fa-folder
    "\f07b"


  • fa-folder-open
    "\f07c"


  • fa-arrows-v
    "\f07d"


  • fa-arrows-h
    "\f07e"


  • fa-bar-chart-o
    "\f080"


  • fa-twitter-square
    "\f081"


  • fa-facebook-square
    "\f082"


  • fa-camera-retro
    "\f083"


  • fa-key
    "\f084"


  • fa-cogs
    "\f085"


  • fa-comments
    "\f086"


  • fa-thumbs-o-up
    "\f087"


  • fa-thumbs-o-down
    "\f088"


  • fa-star-half
    "\f089"


  • fa-heart-o
    "\f08a"


  • fa-sign-out
    "\f08b"


  • fa-linkedin-square
    "\f08c"


  • fa-thumb-tack
    "\f08d"


  • fa-external-link
    "\f08e"


  • fa-sign-in
    "\f090"


  • fa-trophy
    "\f091"


  • fa-github-square
    "\f092"


  • fa-upload
    "\f093"


  • fa-lemon-o
    "\f094"


  • fa-phone
    "\f095"


  • fa-square-o
    "\f096"


  • fa-bookmark-o
    "\f097"


  • fa-phone-square
    "\f098"


  • fa-twitter
    "\f099"


  • fa-facebook
    "\f09a"


  • fa-github
    "\f09b"


  • fa-unlock
    "\f09c"


  • fa-credit-card
    "\f09d"


  • fa-rss
    "\f09e"


  • fa-hdd-o
    "\f0a0"


  • fa-bullhorn
    "\f0a1"


  • fa-bell
    "\f0f3"


  • fa-certificate
    "\f0a3"


  • fa-hand-o-right
    "\f0a4"


  • fa-hand-o-left
    "\f0a5"


  • fa-hand-o-up
    "\f0a6"


  • fa-hand-o-down
    "\f0a7"


  • fa-arrow-circle-left
    "\f0a8"


  • fa-arrow-circle-right
    "\f0a9"


  • fa-arrow-circle-up
    "\f0aa"


  • fa-arrow-circle-down
    "\f0ab"


  • fa-globe
    "\f0ac"


  • fa-wrench
    "\f0ad"


  • fa-tasks
    "\f0ae"


  • fa-filter
    "\f0b0"


  • fa-briefcase
    "\f0b1"


  • fa-arrows-alt
    "\f0b2"


  • fa-users
    "\f0c0"


  • fa-link
    "\f0c1"


  • fa-cloud
    "\f0c2"


  • fa-flask
    "\f0c3"


  • fa-scissors
    "\f0c4"


  • fa-files-o
    "\f0c5"


  • fa-paperclip
    "\f0c6"


  • fa-floppy-o
    "\f0c7"


  • fa-square
    "\f0c8"


  • fa-bars
    "\f0c9"


  • fa-list-ul
    "\f0ca"


  • fa-list-ol
    "\f0cb"


  • fa-strikethrough
    "\f0cc"


  • fa-underline
    "\f0cd"


  • fa-table
    "\f0ce"


  • fa-magic
    "\f0d0"


  • fa-truck
    "\f0d1"


  • fa-pinterest
    "\f0d2"


  • fa-pinterest-square
    "\f0d3"


  • fa-google-plus-square
    "\f0d4"


  • fa-google-plus
    "\f0d5"


  • fa-money
    "\f0d6"


  • fa-caret-down
    "\f0d7"


  • fa-caret-up
    "\f0d8"


  • fa-caret-left
    "\f0d9"


  • fa-caret-right
    "\f0da"


  • fa-columns
    "\f0db"


  • fa-sort
    "\f0dc"


  • fa-sort-asc
    "\f0dd"


  • fa-sort-desc
    "\f0de"


  • fa-envelope
    "\f0e0"


  • fa-linkedin
    "\f0e1"


  • fa-undo
    "\f0e2"


  • fa-gavel
    "\f0e3"


  • fa-tachometer
    "\f0e4"


  • fa-comment-o
    "\f0e5"


  • fa-comments-o
    "\f0e6"


  • fa-bolt
    "\f0e7"


  • fa-sitemap
    "\f0e8"


  • fa-umbrella
    "\f0e9"


  • fa-clipboard
    "\f0ea"


  • fa-lightbulb-o
    "\f0eb"


  • fa-exchange
    "\f0ec"


  • fa-cloud-download
    "\f0ed"


  • fa-cloud-upload
    "\f0ee"


  • fa-user-md
    "\f0f0"


  • fa-stethoscope
    "\f0f1"


  • fa-suitcase
    "\f0f2"


  • fa-bell-o
    "\f0a2"


  • fa-coffee
    "\f0f4"


  • fa-cutlery
    "\f0f5"


  • fa-file-text-o
    "\f0f6"


  • fa-building-o
    "\f0f7"


  • fa-hospital-o
    "\f0f8"


  • fa-ambulance
    "\f0f9"


  • fa-medkit
    "\f0fa"


  • fa-fighter-jet
    "\f0fb"


  • fa-beer
    "\f0fc"


  • fa-h-square
    "\f0fd"


  • fa-plus-square
    "\f0fe"


  • fa-angle-double-left
    "\f100"


  • fa-angle-double-right
    "\f101"


  • fa-angle-double-up
    "\f102"


  • fa-angle-double-down
    "\f103"


  • fa-angle-left
    "\f104"


  • fa-angle-right
    "\f105"


  • fa-angle-up
    "\f106"


  • fa-angle-down
    "\f107"


  • fa-desktop
    "\f108"


  • fa-laptop
    "\f109"


  • fa-tablet
    "\f10a"


  • fa-mobile
    "\f10b"


  • fa-circle-o
    "\f10c"


  • fa-quote-left
    "\f10d"


  • fa-quote-right
    "\f10e"


  • fa-spinner
    "\f110"


  • fa-circle
    "\f111"


  • fa-reply
    "\f112"


  • fa-github-alt
    "\f113"


  • fa-folder-o
    "\f114"


  • fa-folder-open-o
    "\f115"


  • fa-smile-o
    "\f118"


  • fa-frown-o
    "\f119"


  • fa-meh-o
    "\f11a"


  • fa-gamepad
    "\f11b"


  • fa-keyboard-o
    "\f11c"


  • fa-flag-o
    "\f11d"


  • fa-flag-checkered
    "\f11e"


  • fa-terminal
    "\f120"


  • fa-code
    "\f121"


  • fa-reply-all
    "\f122"


  • fa-mail-reply-all
    "\f122"


  • fa-star-half-o
    "\f123"


  • fa-location-arrow
    "\f124"


  • fa-crop
    "\f125"


  • fa-code-fork
    "\f126"


  • fa-chain-broken
    "\f127"


  • fa-question
    "\f128"


  • fa-info
    "\f129"


  • fa-exclamation
    "\f12a"


  • fa-superscript
    "\f12b"


  • fa-subscript
    "\f12c"


  • fa-eraser
    "\f12d"


  • fa-puzzle-piece
    "\f12e"


  • fa-microphone
    "\f130"


  • fa-microphone-slash
    "\f131"


  • fa-shield
    "\f132"


  • fa-calendar-o
    "\f133"


  • fa-fire-extinguisher
    "\f134"


  • fa-rocket
    "\f135"


  • fa-maxcdn
    "\f136"


  • fa-chevron-circle-left
    "\f137"


  • fa-chevron-circle-right
    "\f138"


  • fa-chevron-circle-up
    "\f139"


  • fa-chevron-circle-down
    "\f13a"


  • fa-html5
    "\f13b"


  • fa-css3
    "\f13c"


  • fa-anchor
    "\f13d"


  • fa-unlock-alt
    "\f13e"


  • fa-bullseye
    "\f140"


  • fa-ellipsis-h
    "\f141"


  • fa-ellipsis-v
    "\f142"


  • fa-rss-square
    "\f143"


  • fa-play-circle
    "\f144"


  • fa-ticket
    "\f145"


  • fa-minus-square
    "\f146"


  • fa-minus-square-o
    "\f147"


  • fa-level-up
    "\f148"


  • fa-level-down
    "\f149"


  • fa-check-square
    "\f14a"


  • fa-pencil-square
    "\f14b"


  • fa-external-link-square
    "\f14c"


  • fa-share-square
    "\f14d"


  • fa-compass
    "\f14e"


  • fa-caret-square-o-down
    "\f150"


  • fa-caret-square-o-up
    "\f151"


  • fa-caret-square-o-right
    "\f152"


  • fa-eur
    "\f153"


  • fa-gbp
    "\f154"


  • fa-usd
    "\f155"


  • fa-inr
    "\f156"


  • fa-jpy
    "\f157"


  • fa-rub
    "\f158"


  • fa-krw
    "\f159"


  • fa-btc
    "\f15a"


  • fa-file
    "\f15b"


  • fa-file-text
    "\f15c"


  • fa-sort-alpha-asc
    "\f15d"


  • fa-sort-alpha-desc
    "\f15e"


  • fa-sort-amount-asc
    "\f160"


  • fa-sort-amount-desc
    "\f161"


  • fa-sort-numeric-asc
    "\f162"


  • fa-sort-numeric-desc
    "\f163"


  • fa-thumbs-up
    "\f164"


  • fa-thumbs-down
    "\f165"


  • fa-youtube-square
    "\f166"


  • fa-youtube
    "\f167"


  • fa-xing
    "\f168"


  • fa-xing-square
    "\f169"


  • fa-youtube-play
    "\f16a"


  • fa-dropbox
    "\f16b"


  • fa-stack-overflow
    "\f16c"


  • fa-instagram
    "\f16d"


  • fa-flickr
    "\f16e"


  • fa-adn
    "\f170"


  • fa-bitbucket
    "\f171"


  • fa-bitbucket-square
    "\f172"


  • fa-tumblr
    "\f173"


  • fa-tumblr-square
    "\f174"


  • fa-long-arrow-down
    "\f175"


  • fa-long-arrow-up
    "\f176"


  • fa-long-arrow-left
    "\f177"


  • fa-long-arrow-right
    "\f178"


  • fa-apple
    "\f179"


  • fa-windows
    "\f17a"


  • fa-android
    "\f17b"


  • fa-linux
    "\f17c"


  • fa-dribbble
    "\f17d"


  • fa-skype
    "\f17e"


  • fa-foursquare
    "\f180"


  • fa-trello
    "\f181"


  • fa-female
    "\f182"


  • fa-male
    "\f183"


  • fa-gittip
    "\f184"


  • fa-sun-o
    "\f185"


  • fa-moon-o
    "\f186"


  • fa-archive
    "\f187"


  • fa-bug
    "\f188"


  • fa-vk
    "\f189"


  • fa-weibo
    "\f18a"


  • fa-renren
    "\f18b"


  • fa-pagelines
    "\f18c"


  • fa-stack-exchange
    "\f18d"


  • fa-arrow-circle-o-right
    "\f18e"


  • fa-arrow-circle-o-left
    "\f190"


  • fa-caret-square-o-left
    "\f191"


  • fa-dot-circle-o
    "\f192"


  • fa-wheelchair
    "\f193"


  • fa-vimeo-square
    "\f194"


  • fa-try
    "\f195"


  • fa-plus-square-o
    "\f196"

Demikian mengenai List Icon Font Awesome dan CSS Value Content V4.0.3  silahkan sobat bereksperimen seperti yang sedang ngetrend saat ini.
Semoga artikel ini berguna untuk sobat semua.