Dedi Juniardi: Tips Blogger

Showing posts with label Tips Blogger. Show all posts

Tuesday, March 10, 2015

Friday, February 27, 2015

CSS Pseudo Element bisa diartikan sebagai Elemen/Tag dalam artian "Boongan". Karena dengan menambahkan pseudo elemen seolah-olah kita menambahkan elemen atau suatu tag baru di dalam tag yang kita beri style.
Pseudo Element dikelompokkan menjadi dua bagian yaitu :

1. CSS Pseudo Element :before dan :after
Pseudo element ini akan menambahkan content sebelum (:before) atau sesudah element (:after). Misalnya saya mempunyai sebuah tag h1 :

<h1>Datang Di Blog</h1>

Lalu dalam CSS tsb saya tambahkan Pseudo element :before dan mengisi kontennya dengan kata "Selamat" :


h1:before {
    content : "Selamat ";
}

Jika anda lihat hasilnya akan melihat kata “Selamat ” ditambahkan sebelum isi dari h1. Namun jika anda coba melihat tab html, anda tidak akan menemukan teks “Selamat” dalam kode html. Itulah mengapa disebut dengan pseudo element karena memang seperti ada element padahal tidak ada.

Begitu juga dengan :after, namun berbeda posisi penempatannya. Saya tambahkan juga pseudo element :after pada contoh di atas.


h1:after{
    content : " Saya";
}

2. :first-letter dan :first-line

Berbeda dengan :before dan :after yang fungsinya untuk menyisipkan content. :first-letter dan :first-line seolah-olah memberikan tag extra pada huruf pertama (first-letter) atau pada baris pertama (first-line).

Penggunaan :first-letter biasanya untuk membuat efek dropcap (itu loh huruf pertama yang lebih besar yang sering ditemui di koran-koran).

Berikut ini contoh penggunaan first-letter pada sebuah paragraf :


p:first-letter{
 font-size : 300%;
 font-family: "Monotype Corsiva";
     float : left;
     margin-right : 20px;
}

Berbeda dengan pseudo element sebelumnya, property yang bisa diterapkan pada :first-letter dibatasi pada :

font properties
‘text-decoration’
‘text-transform’
‘letter-spacing’
‘word-spacing’
‘line-height’
‘float’
‘vertical-align’ (only if ‘float’ is ‘none’)
margin properties
padding properties
border properties
color property
background properties

Sedangkan untuk property yang bisa diterapkan pada :first-line dibatasi pada :

font properties
color property
background properties
‘word-spacing’
‘letter-spacing’
‘text-decoration’
‘vertical-align’
‘text-transform’
‘line-height’

CSS PSEUDO ELEMENT DALAM CSS3

Ada sedikit perubahan dalam spesifikasi CSS3, yakni setiap pseudo element harus menggunakan double colon atau titik duanya ditulis dua kali seperti ::before, ::after.

Ini dimaksudkan untuk membedakan antara pseudo class dengan pseudo element. Tapi merujuk pada kompatibilitas dengan browser lama seperti IE7 yang menggunakan spec CSS2 maka penggunaan single colon sudah cukup mengingat browser modern mampu mendeteksinya sebagai pseudo element secara otomatis.

IMPLEMENTASI DALAM DESAIN WEB

Banyak sekali implementasi yang dapat anda lakukan dengan bantuan pseuso element ini, seperti membuat
efek shadow
, efek callout (balon suara), tooltip,
menambahkan efek clip
dan masih banyak lagi tergantung dari kreatifitas yang anda miliki.

Sekian...

Sumber: http://www.ariona.net/mengenal-lebih-dalam-css-pseudo-element/

Thursday, February 26, 2015

Menambahkan Thumbnail Avatar Pada Post Info

Thumbnail Avatar | Berikut ini cara menambahkan thumbnail avatar pada post info yang terdapat di blog ini.

Thumbnail avatar ini nantinya akan muncul di halaman postingan blog, silahkan ikuti beberapa langkah penerapannya.

Buka Dashboard Blogger
Klik Template dan buka Edit HTML
Cari kode .info-post
( pastikan terdapat <b:if cond='data:blog.pageType == "item"'> )
Jika sudah ketemu ganti semua code .post-info dengan code dibawah ini

.post-info {background:transparent;margin-top:5px;margin-bottom:5px;color:#fff;font-size:12px;text-align:left;padding:0;box-shadow:none;}
.post-info a {display:inline;background:transparent;color:#666;padding:4px 6px 4px 6px;transition:all .3s ease-out;}
.post-info a:hover {color:#e76e66;}
.author-info, .time-info, .comment-info, .label-info, .review-info {
margin-right:8px!important;display:inline-block;color:#666;padding:10px;}
.post-info .avatar-author {float:left;border:0;padding:0;width:38px;height:38px;box-shadow:none;}

Kemudian terapkan kode di bawah ini tepat sebelum </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s38$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>
</b:if>

Cari kode di bawah ini

<b:includable id='post' var='post'>

Selanjutnya cari kode di bawah ini

<div class='post-info'>

Terapkan kode di bawah ini tepat setelah kode di atas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
</b:if>

Setelah diterapkan akan tampil seperti ini

<div class='post-info'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
</b:if>

Simpan dan lihat hasilnya !!

Source : Arlina Design

Saturday, February 14, 2015

Cara Membuat Social Network Pure CSS

Social Network | Pada kesempatan kali ini saya akan membagikan pengalaman saya yaitu Cara Membuat Social Network. Sebetulnya sih widget ini sudah terdapat di templatenya mbak Arlina namun saya belum mengerti yang mana CSSnya dan HTMLnya. Ya maklum lahhh...

Oke langsung aja..
Berikut toturialnya.

Langkah 1 : Masuk ke akun blogger masing-masing !

Langkah 2 : Klik tab tata letak

Langkah 3 : Tambahkan Gadget > HTML / Javascript ( Judul di kosongkan saja )

Langkah 4 : Copy kode di bawah ini kedalamnya

<div class='arlina-profile'>
<div class='image-wrap'>
<img alt='Arlina Design' class='img-circle author_avatar img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx4EUZ9Sm9xdfTYR_kHC60AFTnAPrwLP2BiXH7EKbHi_QU6phImueG7YotiUKwFWFnFXxp1PQV6Z4jkMGkFANSkXqwkDYbyzG4q9DnHydfjd6YPYv3NYu-rzeId9T943XtA6eEnChPoVPa/s1600/Dposeidon+Logo.jpg'/>
<div class='social linear-3s'>
<div class='social-inner'>
<a href='#' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'/></i></a>
<a href='#' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/></i></a>
<a href='#' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus'/></i></a>
<a href='#' target='_blank' title='Follow Us On Pinterest'><i class='fa fa-pinterest'/></i></a></div>
</div></div>
<style>
/* CSS Author Widget */
.arlina-profile {padding:15px 10px;text-align:center;}
.arlina-profile .image-wrap {position:relative;overflow:hidden;border-radius:50%;
-webkit-transform: translate3d(0px,0px,0px);transform: translate3d(0px,0px,0px);width:80%;
height:auto;margin:0 auto;margin-bottom:15px;}
.arlina-profile .image-wrap:before {content: '';display:block;position:absolute;
border-radius:50%;border:10px solid #f9f9f9;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;opacity:0.7;margin:auto;top:0px;right:0px;bottom:0px;left:0px;
-webkit-transition: all 0.4s linear;transition: all 0.4s linear;}
.arlina-profile .social {position:absolute;width:92.5%;height:92.5%;border-radius:50%;
background-color:#f9f9f9;opacity:0;margin:auto;top:0px;right:0px;bottom:0px;left:0px;font-size:0px;text-align:center;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transition: all 0.3s linear;transition: all 0.3s linear;}
.social.linear-3s .social-inner {position:absolute;width:100%;padding:15px 0;top:50%;left:50%;
-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.social-inner .fa {margin:0px 5px;font-size:16px;color:#fff;width:14px;height:14px;padding:8px;
border-radius:50%;}
.image-wrap:hover .social.linear-3s {opacity:0.95;-webkit-transform: scale(1);transform: scale(1);}
.image-wrap:hover:before {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}
.arlina-profile h4.arlina-name a {font-size:18px;margin-bottom:10px;display:block;
color:#333;}
.social-inner .fa-google-plus {background:#d64431!important;}
.social-inner .fa-twitter {background:#00aced!important;}
.social-inner .fa-facebook {background:#3b5998!important;}
.social-inner .fa-pinterest {background:#cb2027!important;}
</style>

Konfigurasi

Opsi	Keterangan
Gambar	Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx4EUZ9Sm9xdfTYR_kHC60AFTnAPrwLP2BiXH7EKbHi_QU6phImueG7YotiUKwFWFnFXxp1PQV6Z4jkMGkFANSkXqwkDYbyzG4q9DnHydfjd6YPYv3NYu-rzeId9T943XtA6eEnChPoVPa/s1600/Dposeidon+Logo.jpg dengan gambar sobat
Link	Ganti # pada kode diatas dengan link social media sobat

Thursday, January 01, 2015

Cara Memperbaiki Font Awesome Yang Tidak Muncul

Font Awesome | Hari ini saya akan membagikan tutorial blogger mengenai font awesome. Setelah download template dari arlina saya masih heran kenapa font awesome tidak muncul dan berbentuk kotak-kotak yang gak jelas. Saya sudah lama mencari tutorial ini dari google dan akhirnya ketemu juga :D. Baik berikut tutorialnya.

Pertama : Masuk / login ke akun blogger anda > Template > Edit HTML

Kedua : Cari <style> dan paste css berikut tepat dibawah <style>

@font-face{font-family:FontAwesome;src:url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font//fontawesome-webfont.eot?#iefix) format(&#39;eot&#39;),url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font//fontawesome-webfont.woff) format(&#39;woff&#39;),url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font//fontawesome-webfont.ttf) format(&#39;truetype&#39;),url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font//fontawesome-webfont.svg#FontAwesome) format(&#39;svg&#39;);font-weight:400;font-style:normal;}
[class^=&quot;icon-&quot;],[class*=&quot; icon-&quot;]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;margin-right:.3em}
[class^=&quot;icon-&quot;]:before,[class*=&quot; icon-&quot;]:before{text-decoration:inherit;display:inline-block;speak:none}

Ketiga : Simpan template dan lihat hasilnya

Cara ini work di semua browser dan versi mobile

Sunday, December 28, 2014

Fungsi Tag Konditional

Beberapa Fungsi Tag Kondisional Pada Widget | Ada beberapa trik untuk menyembunyikan elemen blog baik itu di halaman home / beranda, postingan, ataupun halaman statis yaitu dengan menambahkan kode tag kondisional di setiap elemen yang ingin anda sembunyikan.

Contoh penerapan :

<b:if cond='data:blog.pageType != "static_page"'>
..... Isi konten yang akan di bungkus tag kondisional (Konten akan disembunyikan di halaman statis) .....
</b:if>

Bukan hanya menyembunyikan suatu elemen tapi bisa juga untuk menampilkan elemen tertentu hanya di satu halaman yang anda tentukan.

Contoh penerapan :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
..... Isi konten yang akan di bungkus tag kondisional (Konten hanya akan tampil di halaman beranda) .....
</b:if>

untuk lebih lengkapnya silahkan lihat beberapa fungsi tag kondisional untuk widget di bawah ini

1. Menampilkan widget hanya di halaman beranda :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

2. Menampilkan widget hanya di halaman postingan :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

3. Menampilkan widget hanya di halaman tertentu :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL anda"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Catatan : Ganti URL anda dengan alamat yang anda inginkan.

4. Menyembunyikan widget hanya di halaman tertentu :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != " URL anda "'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

5. Menampikan widget di halaman statis :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

6. Menyembunyikan widget di halaman statis :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

7. Menampikan widget hanya di halaman arsip :

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Setelah anda menambahkan tag kondisional di atas, simpan template dan lihat hasilnya.

Tidak sebatas widget, dengan tag kondisional anda pun bisa membungkus elemen lain seperti Script, CSS, atau HTML di dalam template untuk alasan mempercepat blog dengan mengurangi Script yang termuat di suatu halaman atau alasan privasi lainnya.

Semoga bermanfaat.

Source : http://blog.kangismet.ner
Source : http://arlinadesign.blogspot.com

Dedi Juniardi

Pages