Cara mudah mengambil screenshot halaman blog full page

Cara mudah mengambil screenshot halaman blog full page - Mengambil screenshot pada halaman blog memanglah mudah tapi terkadang kita mengambilnya tidak secara penuh atau full page, Kalau kita ingin membuat suatu screenshot pasti menekan tombol Prnt Scrn terus di paste ke dalam Paint atau Photoshop, atau mungkin bisa juga menggunakan Photoscape. Tentu saja hal ini memiliki beberapa masalah, salah satunya adalah pengambilan gambar menjadi seperti tidak diinginkan. Misalnya anda ingin membuat ScreenShot gambar themplate. Maka kalau menggunakan Prnt Scrn, hanya sebagian Website saja yang tertangkap gambarnya. tapi dengan menggunakan sedikit tips ini kita bisa mengambil gambar secara penuh lihat gambar blog ANDIKNET ini..

Gambar di atas di ambil secara penuh,

Dan bagaimana cara mengambil screenshot full page silahkan ikuti langkah - langkahnya sebagai berikut Cara mudah mengambil screenshot halaman blog full page:

1. Silahkan anda klik di sini Awesome Screenshot Plus

2. Klik Add To Firefox untuk menambahkannya ke dalam Add Ons > Install kemudian Restart Mozilla Firefox anda.

3. Untuk mengambil gambar sebuah website yang ingin kita capture, klik gambar lingkaran yang ada di sudut toolbar. Atau dengan meng-klik kanan pada mouse > Awesome Screenshot > Capture Full Page.

4. Klik Done untuk melanjutkan, lalu klik Save untuk menyimpan screenshot.

OK cukup sampai di sini semoga bisa bermanfaan,,

Read More

Membuat Tombol DEMO dan DOWNLOAD Dengan Efek SLIDE

Membuat Tombol DEMO dan DOWNLOAD Dengan Efek SLIDE - Sobat blogger semua kali ini ANDIKNET akan membagikan tutorial yaitu membuat tombol DEMO dan DOWNLOAD dengan efek slide,,

DOWNLOAD

• DEMO
• DOWNLOAD

Cara Membuat Tombol DEMO dan DOWNLOAD dengan Efek SLide.

1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> dan letakkan kode berikut di bawahnya, atau di atas code </style>

.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.download:hover h1{margin-left:100%;}
.download ul {display:inline-block;margin:0;padding:0;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#fc8675;color:#fff;}
.download-info{background:#e27869;}
.download-info h1{background-color:#fff;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.demo:hover h1{margin-left:100%;}
.demo ul {display:inline-block;margin:0;padding:0;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#48596d;color:#fff;}
.demo-info{background:#333c4b;}
.demo-info h1{background-color:#fff;}

4.Simpan template.
5. Gunkan kode di bawah ini kemudian taruh di postingan sobat (Gunakan mode HTML) untuk menerapkannya dalam postingan.

<div class="download download-info">
<h1>DOWNLOAD</h1><ul>
<li><a href="http://www.andiknet.com/" target="_blank"> DEMO </a></li>
<li><a href="http://www.andiknet.com/" target="_blank"> DOWNLOAD </a></li>
</ul></div>

Silahkan ganti url warna merah diatas dengan link DEMO dan Link DOwnload milik anda.

Read More

Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3

Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3 - Untuk membuat tombol show dan hide pada komentar blog memang sangat mudah ANDIKNET akan membagikan tutorial Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3. Untuk Kode script yang akan saya bagikan ini sudah valid html5 dan css3 karena sebelumnya sudah pernah saya coba, dengan memasang tombol show hide pada kotak komentar blog mungkin bisa sedikit membuat loding blog menjadi lebih ringan, apalagi jika banyak komentar pada blog kita tentunya ini akan membuat halaman postingan terlalu panjang kebawah sehingga menjadikan loading blog lebih lama, untuk menjadikan lebih singkat dan loading yang cepat maka gunakanlah show hide komentar ini pada blog Anda. 

 Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3 tidak ada pengaruhnya terhadap SEO dengan membuat efek show hide atau tampilkan dan sembunyikan pada kotak atau kolom komentar blog akan sedikit lebih cantik dan hemat, cara ini memang sangat cocok digunakan untuk Blogger yang selalu dibanjiri dengan komentar setiap harinya, namun bagi blogger yang memang masih sedikit komentarnya (seperti blog ini) tidak masalah juga untuk mencoba menambah Show Hide pada Komentar blog. Langsung saja bagi Anda yang ingin menggunakan show hide komentar blog valid html5 dan css3 silahkan baca tutorialnya dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]></b:skin>

/*Show Hide*/
a.openpanel {display:block;border:1px solid #2AAADC;text-align:center;font-weight:bold;line-height:30px;background:#161616;transition: all .15s ease-in-out;transform-origin: 50% 1px;position:relative;
}a.openpanel em {display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#161616;border:1px solid #2AAADC}a.openpanel.active em {top:6px}div.paneline {height:0px;transition: all .15s ease-in-out}div.kerenPanel {padding:10px 20px 20px;margin:0px 0px !important}

Catatan :
Warna garis 2AAADC.
Warna background 161616.
Untuk mengganti warnanya silahkan cari kode warnanya disini

5. Cari kode </head>
6. Copy kode jQuery dibawah ini, lalu Paste diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Show Comments",
closePanelText = "Hide Comments",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
jQuery(function() {
jQuery(panelSelector).hide()
.addClass('kerenPanel')
.before('<a class="openpanel" href="#" title="Comments">' + openPanelText + '<em></em></a>')
.after('<div class="paneline"></div>');
jQuery('a.openpanel').toggle(function() {
jQuery(this).addClass('active').html(closePanelText + '<em></em>');
jQuery('div.kerenPanel').slideDown(slideDownPanelSpeed);
return false;
}, function() {
jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
jQuery('div.kerenPanel').slideUp(slideUpPanelSpeed);
return false;});
});
//]]>
</script>

Catatan :
Show Comments bisa diganti dengan Tampilkan Komentar (atau text lainnya).
Hide Comments bisa diganti dengan Sembunyikan Komentar (atau text lainnya).
600 dan 400 bisa Anda ganti sesuai selera Anda.

7. Klik Simpan Template

Read More

Cara menampilkan posting blog ke twitter secara otomatis

Cara menampilkan posting blog ke twitter secara otomatis, - Suatu hal yang penting membuat blog kita bisa lebih di kenal banyak orang adalah dengan cara mempromosikan, karena hal ini sangat penting untuk meningkatkan traffic blog, salah satu cara untuk mempromosikan blog adalah dengan menampilkan posting blog di facebook dan twitter secara bersamaan karena hampir semua orang menggunakan kedua social network ini,, Sobat hanya memasukan feed blog ke situs twitterfeed.com tapi kali ini saya hanya akan membahas tentang Cara menampilkan posting blog ke twitter secara otomatis untuk menampilkan postingan blog ke facebook secara otomatis silahkan baca artikel saya sebelumnya  tentang Cara Menampilkan Posting Blog diFacebook untuk artikel saya tentang Cara menampilkan posting blog ke twitter secara otomatis cara kerjanya pun tergolong mudah sehingga ketika sobat posting di blog maka secara otomatis postingan akan muncul di facebook dan twitter juga,

Untuk membuatnya adalah sebagai berikut :

 1. Silakan sobat kunjungi situs http://twitterfeed.com
 2. Klik don’t have an account yet atau sign in with open id, setelah itu akan muncul form pendaftaran

3. Masukan alamat email sobat beserta password kemudian ulangi password setelah itu klik create account jika anda sudah punya account langsung login saja. setelah itu klik create new feed

4. Kemudian masukan Nama dan Alamat feed blog sobat, contohnya seperti ini http://namablog.blogspot.com/feeds/posts/default/
atau
http://namablog.wordpress.com/feed/

5. Selanjutnya klik test rss feed dan bila sudah Feed parsed OK, klik tombol continue to step 2

6. Pilih twitter atau facebook, tentunya sobat sudah mempunyai kedua account faceebook dan twitter.

7 . Klik Twitter kemudian akan muncul koneksi untuk menghubungkannya, klik authenticate Twitter dan klik Allow.

8. Koneksi bila benar maka twitter feed akan memberitahukan pengaktifan koneksi feed blog ke akun twitter, kemudian Klik Facebook kemudian akan muncul koneksi untuk menghubungkannya, klik Connect with facebook dan klik Allow

9. Sekarang sobat hanya posting di blog dan dapat tampil secara otomatis di Twitter dan Facebook secara bersamaan. semoga bermanfaat,,

Read More

Cara menambah kotak berlangganan via email di bawah posting blog

Cara menambah kotak berlangganan via email di bawah posting blog - Setalah saya membahas artikel tentang Cara mudah membuat efek kursor bertabur bintang di blog seakarang mari kita bahas artikel selanjutnya yaitu tentang Cara menambah kotak berlangganan via email di bawah posting blog

Cara menambah kotak berlangganan via email di bawah posting blog

Seperti biasa silahkan login ke akun blogger anda.
Pilih themplate.
Klik EDIT HTML.
Lalu cari code <data:post.body/> (gunakan ctrl F untuk mencarinya)
Dan letakkan code berikut di atas code <data:post.body/>

<div style='border: 0px solid #555; margin: 10px 0px; padding: 5px; width: auto; height: auto; background-color:#F1F5AE; text-align: left;'>
<p>Jika Anda menyukai Artikel di blog ini, Silahkan berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di <strong><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></strong></p>
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=andikgnw', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address,,&quot;) {this.value = &quot;&quot;;}" value="Enter email address,," type="text" />
<input type="hidden" value="andikgnw" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input type='submit' value='Subscribe'/>
</form>
<a href='http://feeds.feedburner.com/andikgnw'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/andikgnw?bg=0000CC&amp;fg=FF0000&amp;anim=1' style='border:0' width='88'/></a>
</div>

Terakhir klik simpan.
Untuk code yang berwarna merah silahkan ganti dengan ID feedburner anda..
Ganti http://feedburner.google.com/fb/a/mailverify?uri=andikgnw dengan Email Feed link sobat.
Ganti andikgnw dengan Nama feed blog sobat.

 Untuk Mengetahui feed link dan nama feed blog sobat, sobat blogger harus login dulu di akun Google FeedBurner sobat.

semoga berhasil dan bermanfa'at

Read More

Cara mudah membuat efek kursor bertabur bintang

Cara mudah membuat efek kursor bertabur bintang - Sudah banyak sekali artikel tentang cara membuat efek kursor bertabur bintang di blog, dan saya akan membagikan salah satu cara membuat efek kursor bertabur bintang di blog yang simpel dan mudah tanpa ribet,, anda tinggal menyisipkan kode script berikut ke dalam themplate anda,,

<script type="text/javascript" src="https://googledrive.com/host/0ByoCwyjwB1aDRXpQYlFvVGhiMHc"></script>

Anda juga dapat mengganti warna bintang yang tampil dengan warna lain. Untuk menggantinya, ganti url yang berwarna merah dengan beberapa url dibawah ini :

https://googledrive.com/host/0ByoCwyjwB1aDRXpQYlFvVGhiMHc (warna merah)

https://googledrive.com/host/0ByoCwyjwB1aDR0wzeXBzSS00a0k (warna kuning)

https://googledrive.com/host/0ByoCwyjwB1aDQW9YUU9oZkVibms (warna hijau)

https://googledrive.com/host/0ByoCwyjwB1aDaTVtdkNwMTFHV2c (warna biru)

https://googledrive.com/host/0ByoCwyjwB1aDZ1QySGFfdzJiRjQ (warna putih)

https://googledrive.com/host/0ByoCwyjwB1aDZnV1VVcxOVBUOGc (warna hitam)

Cara pemasangannya:
Anda bisa meletakkan script di atas pada widget

1. Buka blog Anda, pilih Tata Letak.
2. Pilih Tambahkan Gadget -> HTML/Javascript.
3. Pastekan kode tersebut, dan kosongkan isian Judul. Terakhir, klik Simpan.

Atau anda letakkan di dalam themplate blog anda.


1.Login ke account blog anda
2.Pilih themplate -> EDIT HTML.
3.Pastekan kode tersebut di atas kode </head> dan Terakhir, klik Simpan.

sumber: http://xxpc123xx.blogspot.com/2013/06/cara-memasang-cursor-bertaburan-bintang.html

Read More