Newbie Techno

Home » Posts filed under Tutorial

Showing posts with label Tutorial. Show all posts

Thursday 23 April 2015

Membuat Widget Social Share Button di bawah Postingan Blog

Cara Membuat Social Share Button di blog

1. Login di Blogger.com
2. Masuk ke Dashboard > Template
3. Terus click Edit HTML > "CTRL + F"
Kemudian cari kode ]]></b:skin> , jika sudah masukkan kode CSS ini diatas kode tersebut .

ul.social_ntechno {
    list-style:none;
    display:inline-block;
    margin:15px auto;
    }
    ul.social_ntechno li {
    display:inline;
    float:left;
    background-repeat:no-repeat;
    }
    ul.social_ntechno li a {
    display:block;
    width:50px;
    height:50px;
    padding-right:10px;
    position:relative;
    text-decoration:none;
    }
    ul.social_ntechno li a strong {
    font-weight:400;
    position:absolute;
    left:20px;
    top:-1px;
    color:#fff;
    z-index:9999;
    text-shadow:1px 1px 0 rgba(0,0,0,0.75);
    background-color:rgba(0,0,0,0.7);
    -moz-border-radius:3px;
    -moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
    -webkit-border-radius:3px;
    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
    border-radius:3px;
    box-shadow:0 0 5px rgba(0,0,0,0.5);
    padding:3px;
    }
    ul.social_ntechno li.abfacebook {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_bqDpUlhA6RB4pu6-cEJzLzd-WiEBkulMXneJKddPS8g3IBP5CmEVWJ1TsgQi9zWnAZnQ3VyQLV-FNvVQ_jW3x3ggVQfsKb4fDUEAMbAdhamZLAfHPvDTGclihOKX932HnyW6osjwKLrm/s1600/btrix-facebook-icon.png);
    }
    ul.social_ntechno li.abtwitter {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2-I6vfu7SZAylKu5TlCRxXWrSSp8xszn8komUkjhRrfrfAWDrumV6rGp9TTVxaoNSAg2i4dZVhawSfmHmHtfYXNAQ3y41L92h5k7mVVfGnfeBkwAtBWmdyMn-nLRoCbrSG2_oyLETVHf9/s1600/btrix-twitter-icon.png);
    }
    ul.social_ntechno li.abgoogleplus {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSO1iwoLmAq5TqChd2izUvknl6G1n9u6JiBFvPWWseJJz5rS-8djRAAfu6Io9eKE7Kg2rta8Bn2cx_T2Q3ava1251G6moL6bRF-7jnQ1UuzpdWHLfn_lCOG__MJGap972chu9E95pkjpgm/s1600/btrix-google-icon.png);
    }
    ul li.abpinterest {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqA9dmxsBigN-g2SwvHiKzNWrewUhv-YA7iT_cR5PbNIMmrpbK8g_tkpA2fMOcV0lrAq7YdNKfskWv9nr_rl2EpE8eLwXAAeU2bQKVnXo2unyWX0g7uEWwlME0BAHafVuE1M21b2ZXz3Mz/s1600/btrix-Pinterest-icon.png);
    }
    ul.social_ntechno li.abstumbleupon {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKnv3FlzFyac7jZy9beDhmjWM3EvsIPDHNdo6PzyQKYPrhRSPHBy7TRDkfBbBO8qUw26bd_TlZuhH6pe0vGZlIZd7L1x6hSn9cIs23UX8MjNaYSGewXbHjehaASLfQn5GTlwo0NZgw1z4E/s1600/btrix-StumbleUpon-icon.png);
    }
    ul.social_ntechno li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWHumP92-Q8Ubcd8LzOy-GUqadI4CqRqD41xs0NoQJTE9rHuQehbGJQcgHfXTzr-tMknc9wKFh4v1qNo-smU0SaaEP7JI90IwR6kxG6nC8VJd3FtCrlzcmEhpN6kTUPtDQfzZBCwkJOXva/s1600/btrix-Digg-icon.png);
    }
    ul.social_ntechno li.ablinkedin {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOONhi0abxELse_vVJVtkRtPCJKgwWrdmnp2Fw1ZKDB1A5q6wNoBXtlhymAq-Z2zTlvVNjlMZofdnZVcnrZVXNMPSeslXes_8hVRlUdJZ8txXuYqvhEHCf1oCpPwPVZycEjQKbsJ7rD-q/s1600/btrix-Linkedin-icon.png);
    }
    #animation_ntechno:hover li {
    opacity:0.2;
    }
    #animation_ntechno li {
    -webkit-transition-property:opacity;
    -webkit-transition-duration:500ms;
    -moz-transition-property:opacity;
    -moz-transition-duration:500ms;
    }
    #animation_ntechno li a strong {
    opacity:0;
    -webkit-transition-property:opacity, top;
    -webkit-transition-duration:300ms;
    -moz-transition-property:opacity, top;
    -moz-transition-duration:300ms;
    }
    #animation_ntechno li:hover {
    opacity:1;
    }

#animation_ntechno li:hover a strong {
    opacity:1;
    top:-10px;
    }

4. Kemudian cari kode <data:post.body/> jika kamu menemukan beberapa kode tersebut ( biasanya ada 4 ) pilih yg nomor pertama atau terakhir saja jika kalian sudah memasang read more otomatis .

5. Jika sudah pastekan kode Pemanggilnya dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;padding: 7px;margin: 0px auto;text-align: center;font-family: Oswald;text-transform: uppercase;color: #216A93;background: none repeat scroll 0% 0% #DDD;border: 1px dotted #AAA;'><b>Share this article with your friends</b></div>
<div style='text-align:center'>
<ul class='social_Ntechno' id='animation_Ntechno'>
<li class='abfacebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' ><strong>Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' title='Twitter' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' title='G+' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' target='_blank' title='Pinterest'><strong>Pinterest</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' title='Stumbleupon' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' title='Dig' target='_blank'><strong>Dig</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' target='_blank' title='LinkedIn'><strong>LinkedIn</strong></a>
</li>
</ul></div>
</b:if>

6. Setelah itu cari kode <head> lalu pastekan kode css berikut dibawah kode <head> :

7. Kemudian Save Template dan lihat hasilnya .

Membuat Navigasi Halaman Blog dengan 10 Style

21:45 Tips and Trick, Tutorial

Navigasi angka halaman blog atau page navigation adalah sebuah number halaman artikel, jika artikel kita memang sudah banyak dan melebihi kapasitas hompage untuk di tampilkan, navigasi ini bertujuan untuk memudahkan pengunjung dalam mencari artikel-artikel yang ada pada blog kita yang sebelumnya atau yang sudah lawas dengan jumlah halaman yang bisa kita tentukan atau kita sesuaikan dengan jumlah artikel pada blog kita, maka penggunaan navigasi halaman ini sangat penting sekali untuk menawarkan halaman selanjutnya dalam pencarian artikel dengan lebih mudah .

Untuk itu disini saya akan membuat tutorial membuat navigasi angka halaman blog dengan 10 style atau 10 gaya, jadi anda bisa pilih navigasi angka tersebut sesuai slera anda, dan cara penerapannyapun sangat mudah sekali. oke bagi anda yang ingin membuat navigasi angka halaman blog di terapkan di blog anda, silahkan ikuti tutorialnya dari NTechno :

Cara Menerapkan Navigasi pada Blog

1. Buka akun blogger anda.
2. Pilih menu template > Edit HTML
3. Lalu pilih salah satu kode navigasi yang anda suka lalu letakan kode tersebut di atas kode
]]></b:skin> atau </style>

Navigasi Angka Style 1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

Navigasi Angka Style 2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;} .showpageOf{display:none!important} #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;} #blog-pager .pages{border:none;}

Navigasi Angka Style 3

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

Navigasi Angka Style 4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;} #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

Navigasi Angka Style 5

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;} a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;} #blog-pager .pages{border:none;background: none;}

Navigasi Angka Style 6

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Navigasi Angka Style 7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

Navigasi Angka Style 8

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }

.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #5858FA; background-color:#2EFE2E;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Navigasi Angka Style 9

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }

.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #fff; background-color:#5858FA;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Navigasi Angka Style 10

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }

.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #FFFF00; background-color:#00FFFF;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Jika sudah memasang kode navigasi yang anda suka, selanjutnya letakan kode dibawah ini tepat di atas kode </body>

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> /*<![CDATA[*/ var perPage=7; var numPages=6; var firstText ='First'; var lastText ='Last'; var prevText ='« Previous'; var nextText ='Next »'; var urlactivepage=location.href; var home_page="/"; /*]]>*/ </script> <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/> </b:if> </b:if>

Catatan :
var perPage=7; : Jumlah posting yang ditampilkan di setiap halaman.
var numPages=6; : Jumlah number yang di tampilkan di halaman,
Sesuaikan dengan jumlah artikel .

6 Cara Efektif Membuat Blog SEO Friendly

23:58 SEO, Tutorial

Tips and Trick
Ketika kita berbicara tentang SEO , hal yang pertama yang kita butuh ialah mengecek seberapa hebat SEO score kita seperti Chkme.com dan lainnya , dan diikuti dengan pengoptimalan kualitas artikel kita dan seberapa baik juga kamu mengoptimalkan nilai meta dan keyword pada blog . Untuk itulah , pada kesempatan ini NTechno akan coba membagikan trik ampuh agar seo friendly .

1. Format Link Posting URL Blog

Permalink atau Permanent Link ( Tautan Permanen ) memiliki peran besar dalam peringkat artikel dalam search engine . Ada beberapa aturan tentang permalink pada blogspot yaitu :

- Judul Posting Tidak Boleh Melebihi 50 karakter
- Jangan Gunakan " StopWords " dalam Permalink dan Meta Tag .
( Contoh : Dan , Yang , Dalam , Sebuah , Ke )

Kata - kata stopwords ini tidak baik untuk search engine , jika kamu menggunakan kata stopwords dalam permalink , maka pengindexan keyword akan diabaikan oleh Google , namun kamu bisa mengedit permalink (tautan permanen) kamu sesuai keinginan .

2. Mempertahankan Kepadatan Kata Kunci (Keyword)

Keyword merupakan aspek penting untuk posisi artikel anda dalam search engine , terlalu sedikit keyword di artikel maka akan menyebabkan kurang peringkat dan isian keyword , namun anda juga tidak perlu melakukan penempatan kata kunci untuk optimasi SEO , tentunya harus relevan .

3. Label Yang Tepat dan Artikel Terkait

Label menambahkan kepadatan kata kunci dari pos, label harus mempunyai pelebaran sesuai dalam kategori daripada single kategori, saya jelaskan dengan contoh sepeti anda membuat sebuah posting, misalkan anda membuat artikel tentang "Google Chrome" dengan tiga kategori Windows,Browser ,
Perangkat lunak,maka otomatis label menambahkan kepadatan kata kunci dalam seluruh post dan label mempengaruhi tulisan artikel terkait di blog.

Silahkan anda lihat artikel terkait sesuai label yang anda baca, maka di artikel terkait akan memberikan posting sesuaa label. Dan jika ada begitu banyak posting dengan label yang sama di tandai di label tersebut akan mempengaruhi susunan artikel di related post atau artikel terkait di blog anda .

4. Menambahkan Meta Deskripsi

Meta tag menghasilkan tag HTML yang di gunakan oleh mesin pencari untuk mengedintifikasi judul,deskrispsi dan rincian lain dari URL, memang tidak banyak berpengaruh tapi akan memiliki dampak sedikit pada kata kunci yang di targetkan, ketika anda selesai membuat artikel, maka anda tinggal memasukan deskripsi, contoh gambar di bawah :

5. Optimasi Title dan Alt Tag

Optimasi gambar untuk SEO dengan menggunakan tag alt dan tag title di setiap gambar, dan ini bisa di lakukan secara manual dilakukan setelah anda mengupload gambar, optimasi tag alt dan tag title untuk memberi tahu mesin pencari tentang inforamasi tentang gambar tersebut saat melakukan pencarian dengan gambar sesuai title. anda cukup klik kanan pada gambar dan klik properti lalu masukan title pada gambar tersebut . Lebih lengkap nya kunjungi Optimasi Alt Tag dan Title Tag

6. Link Eksternal Nofollow

Nofollow adalah atribut HTML yang tercantum pada hyperlink untuk memblokir keuntungan mesin pencari link eksternal dalam website, jadi ketika anda menggunakan link keluar ke website lain, anda bisa menggunakan rel='nofollow' atribut setelah URL, untuk mencegah mesin pencari merayapi link tersebut .

Sekian trik dan tutorial dari NTechno , semoga bermanfaat .

Cara Mengoptimasi Alt Tag dan Title Tag Pada Gambar

20:08 SEO, Tutorial

Cara Mengoptimasi SEO menambahkan Alt Tag dan Title Tag

Pada kesempatan kali ini NTechno akan coba memberikan tips bagaimana caranya menambahkan Alt Tag dan Title Tag pada Gambar . Tag ini sungguh sangat berfungsi di perindexan Google Search nantinya dan akan di optimasi .
Atribute Alt Tag dan Title Tag fungsinya ialah untuk menginformasikan pada Google bahwa gambar ini memiliki deskripsi tentang title text yang sudah ditentukan dan mempunyai keterkaitan dengan artikel yang di cari berdasarkan query yang diketikan pada pencarian gambar .

Contohnya ialah jika kamu membuat artikel dengan judul "cara mendapatkan uang dari internet " dan menambahkan title text "cara mendapatkan uang dari internet " , maka di pencarian gambar akan sesuai dengan yang telah diketikan pada query pencarian Google .

Lihat contoh :

Pada halaman pertama muncul website maxmanroe.com sebagai artikel teratas .

Pencarian dengan query yang sama pada halaman pencarian gambar

Kamu bisa melihat dalam pencarian gambar menunjukkan gambar yang sama pada pencarian artikel , maka sudah pasti jika kamu menambahkan title text pada gambar dengan query yang sama di artikel Anda , maka hasilnya akan sama dengan penambahan title text yang sudah kamu tentukan

Cara Mengoptimasikan Alt Tag dan Title Tag Pada Gambar

1. Pastikan kamu sudah mengupload gambar sebelum mempublikasikan artikel nya .
2. Klik pada gambar > Klik Properties > Akan muncul sebuah Pop Up , masukkan query sesuai artikel yang anda buat .

Maka dengan begitu gambar tersebut sudah memilik atributte Alt Text dan Title Text sehingga akan lebih memudahkan terindeks oleh Google dan lebih relevan membuat postingan kamu lebih SEO .

Sekian dulu artikel dari NTechno , semoga bermanfaat

Cara Membuat BlockQuote Menarik Pada Blog

22:54 Tutorial

BlockQuote memang sudah ada namun BlockQuote bawaan blogger tampilannya mungkin agak kurang menarik, sehingga bisa jadi mungkin akan di abaikan oleh pengunjung namun jika anda membuat BlockQuote yang bagus maka perhatian untuk BlockQuote akan lebih di perhatikan, bagi anda yang berniat untuk membuatnya lebih menarik, silahkan ikuti tutorialnya dari NTechno :1. Buka akun blogger anda.

2. Pilih Menu > Template >Edit Html
3. Cari kode seperti ini blockquote dan ganti script BlockQuote bawaan blogger dengan script dibawah ini.

 
blockquote{display:block;font-style:normal;color:#FFF;padding:15px 18px 15px 48px;position:relative;background-color:#1BBCE4;border-radius:4px;border-bottom:2px solid #0E7994}
blockquote:before{font-family:'fontAwesome';display:block;position:absolute;top:15px;left:16px;color:#fff;font-size:24px;line-height:1}
blockquote:before{content:"\f05a"}

Catatan :

code blockquote yang default akan tampil biasanya seperti ini tapi setiap blog memiliki code blockqoute yang berbeda

blockquote {
background: #f8f8f8;
margin-left: 2em;
margin-right: 2em;
border-left: 4px solid #ccc;
padding: 1em 1em;
font-style: italic;
}

Semua kode blockquote default blogger di ganti dengan kode yang tadi , gimana sudah paham?

4. Selanjutnya copy kode dibawah ini dan letakan tepat diatas kode <head>

 <link type="text/css" href="https://googledrive.com/host/0B6FAz9FHjnXXWXIzaXpBVXJCLWs" rel="stylesheet"/>

5. Klik Save Template dan selesai .

Cara Menggunakan BlockQoute kamu tinggal mengklik lambang "tanda kutip " yang ada di menu pos blog , setelah itu masukkan kata sesuai keinginan .

Dan lihat hasilnya , cekidot!

Cara Membuat Arsip Blog dengan Scroll

22:30 Tips and Trick, Tutorial

Arsip blog atau Archive blog adalah sebuah daftar urutan artikel yang di urutkan sesuai tanggal bulan dan tahun, biasanya arsip blog atau archive blog ini di letakan di sidebar pada sebuah blog, arsip blog ini menurut saya sangat berguna sekali jika di pasang pada sebuah blog,karena dengan widget arsip ini bisa dengan mudah menemukan artikel-artikel anda hanya dengan melihat halaman arsip .
Pada kesempatan kali ini NTechno membagikan bagaimana caranya membuat scroll pada arsip blog yang memudahkan pembaca dan tidak memakan space pada blog .

Berikut caranya :

1. Pastikan anda sudah menambahkan arsip blog ke widget blog anda.

2. Sekarang buka akun blogger anda.

3. Pilih menu template > Klik Edit Html

4. Lalu silahkan anda cari kode 'BlogArchive'

5. Jika sudah ketemu lalu letakan kode kode di bawah ini tepat di atas kode 'BlogArchive'

<div style='overflow:auto; width:ancho; height:200px;'>

6. Lalu anda geser ke bawah sedikit, maka anda akan melihat kode seperti ini <b:include name='quickedit'/> dan tambahkan kode </div> di atasnya Atau lebih jelasnya seperti di bawah ini.

<div style='overflow:auto; width:ancho; height:200px;'> <div id='BlogArchive'><div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div><b:include name='quickedit'/> </div>
</b:includable>

Catatan : 200px adalah tinggi arsip dan silahkan sesuaikan sesuka anda.

Sekian dulu tutorial dari Ntechno , semoga bermanfaat ^^

Cara Membuat Template Default menjadi Responsive Pada Blog

22:18 Tutorial

Dalam membangun sebuah blogger kita membutuhkan reaksi cepat dari semua pelayan internet , dan untuk itu jika blog kita sudah responsive design maka sudah jelas akan lebih cepat terindex oleh si Google dan sungguh menyenangkan karena bisa dikunjungi banyak orang .

Demo
Click here

Untuk itu berikut ini NTechno bagikan caranya :

1. Pertama, matikan fitur navbar, pilih menu tata letak > klik navbar > Pilih "OFF"

2. Sekarang cari kode di bawah ini :

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

3. Lalu ganti kode tersebut dengan kode dibawah ini.

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

4. Selanjutnya cari kode dibawah ini :

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

5. Lalu ganti kode tersebut dengan kode di bawah ini :

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

6. Sekarang letakan kode dibawah ini tepat diatas kode </head>

<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>

7. Save Template dan Selesai

Newbie Techno

Thursday 23 April 2015

Membuat Widget Social Share Button di bawah Postingan Blog

Membuat Navigasi Halaman Blog dengan 10 Style

Wednesday 22 April 2015

6 Cara Efektif Membuat Blog SEO Friendly

Cara Mengoptimasi Alt Tag dan Title Tag Pada Gambar

Tuesday 21 April 2015

Cara Membuat BlockQuote Menarik Pada Blog

Cara Membuat Arsip Blog dengan Scroll

Cara Membuat Template Default menjadi Responsive Pada Blog

Labels

Blog Archives

Popular Post

Author Info