Wednesday 23 December 2015

Droidpluss Blogger Template

      Comment  


Mungkin kalian sudah tau dengan Kang Ismet, dia adalah seorang blogger yang jago design template, template buatannya selalu jadi pilihan blogger blogger untuk dipasang di blognya.

Fitur

Template keren harus punya fitur yang keren, inilah beberapa fitur keren dari tempalte Droidpluss ini.

Features Availability
Responsive True Cek
Valid HTML 5 (Homepage) True Cek
Valid HTML 5 (Postingan) True Cek
Valid CSS3 True Cek
SEO 100% True
Sticky Widget True
Back to Top True
Customized Deleted Comment True
Smooth scroll to comment hash True
Dan masih banyak lagi fitur yang keren

Pengaturan

Untuk memaksimalkan template ini, ada beberapa pengaturan yang mungkin kalian perlu lakukan.

#1 Sticky Widget
Untuk mengganti sticky widget, silahkan edit kode berikut di dalam template.
<div id='stickywidget'>
<h3>Sosial Media</h3>
.....
.....
.....
</div>

#2 Widget "Artikel Terbaru"
Untuk membuat widget artikel tebraru, silahkan tambahkan widget HTML dengan kode berikut. 
<script type="text/javascript">
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
</script>
<script type="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script type="text/javascript" src="http://droidpluss.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
Ganti URL http://droidpluss.blogspot.com dengan URL blog kalian

#3 Validasi HTML 5
Agar blog tetap Valid HTML5, ikuti cara berikut
Hapus kode di bawah ini (pada menu edit template) setiap menambah widget baru
<b:include name='quickedit'/>


Template ini dibagikan GRATIS oleh Kang Ismet, kalian bisa hilangkan Credit Footer dengan membayar Rp 50.000

Tuesday 22 December 2015

Cara Membuat Iklan Teks Mirip Google Adsense

      2 comments  
Widget ini dibuat semirip mungkin dengan widget iklan Google Adsense, widget yang keren ini dibuat oleh mbak Arlina. seperti kita tau, mbak Arlina adalah seorang web desainer yang sangat jago, saya banyak sekali mengutip style CSS yang dibuatnya. Berikut adalah cara pembuatan Widget ini.



Langkah Langkah Membuat Widget Ini

Sebelum memasang widget ini, pastikan blog kalian sudah memiliki Font Awesome, jika belum kalian bisa pasang script ini di atas kode </head>
Jika di blog kalian sudah terdapat Font Awesome, lewati langkah ini
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

#1 Tambahkan kode berikut di atas ]]></b:skin>
/* Iklan Teks GA oleh Arlina*/
.iklan-teks{position:relative;margin:0;padding:10px;max-height:300px;overflow:hidden}
.iklan-teks div{position:relative;background:#FFF;height:120px;padding:8px 0;margin:0;z-index:1;color:#555}
.iklan-teks h2.iklan-header{position:relative;background:#FFF;font-size:18px;color:#0f7dc8;border-top:1px solid #d8d8d8;border-radius:0;padding:8px 0;margin:0;text-transform:none;cursor:pointer}
.iklan-teks h2.iklan-header:first-child{border-top:0}
.iklan-teks h2.iklan-header:before{content:"";width:0;height:0;position:absolute;top:20px;right:15px;border:5px solid transparent;border-color:#b2b2b2 transparent transparent;cursor:pointer}
.isi-iklan span.judul-iklan{font-size:18px;color:#0f7dc8;display:inline-block;cursor:pointer}
.isi-iklan span.url-iklan{font-size:12px;color:#0f7dc8;display:block;margin:8px 0;cursor:pointer}
.isi-iklan span.url-iklan:before{content:"\f0c0";font-family:FontAwesome;margin:0 10px 0 0}
.isi-iklan span.panah-besar{color:#fff;background:#e74c3c;border-radius:50%;height:34px;float:right;width:34px;text-align:center;line-height:34px;cursor:pointer;transition:all .6s}
.isi-iklan span.panah-besar:before{content:"\f054";font-family:FontAwesome;margin:0 0 0 3px;font-size:20px}
.isi-iklan span.panah-besar:hover{background:#34495e;color:#fff}
.isi-iklan p.isi{padding:0;margin:0 40px 0 0;color:#555;font-size:12px;text-align:left}

 #2 Tambahkan kode berikut di atas </body>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:500,sDownSpeed:500,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h2 class="iklan-header">'+b(this).data("header")+"</h2>")});g.children("div:eq("+f+")").show().prev().css("margin-top","-47px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-47});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({right:0},500,"easeInOutExpo")},function(){$(".info-iklan").animate({right:-103},500,"easeInOutExpo")});
//]]>
</script>

#3 Kemudian Simpan Template




#4 Setelah itu, pergi ke Tata Letak




#5 Buat widget HTML baru dan gunakan kode ini
<div class='iklan-teks iklan-teks-sidebar' id='iklan-teks'>
    <!-- iklan ke 1 -->
    <div data-header="Pasang Iklan Disini">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
      <span class='url-iklan' onclick="window.open('/');">url web kalian</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>Pasang Iklan Anda Disini</p>
      </span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header="Pasang Iklan Disini">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
      <span class='url-iklan' onclick="window.open('/');">url web kalian</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>Pasang Iklan Anda Disini</p>
      </span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header="Pasang Iklan Disini">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
      <span class='url-iklan' onclick="window.open('/');">url web kalian</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>Pasang Iklan Anda Disini</p>
      </span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header="Pasang Iklan Disini">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
      <span class='url-iklan' onclick="window.open('/');">url web kalian</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>Pasang Iklan Anda Disini</p>
      </span>
    </div>
    <!-- iklan ke 5 -->
    <div data-header="Pasang Iklan Disini">
      <span class='isi-iklan'>
<span class='judul-iklan' onclick="window.open('/');">Pasang Iklan Disini</span>
      <span class='url-iklan' onclick="window.open('/');">url web kalian</span>
      <span class='panah-besar' onclick="window.open('/');"></span>
      <p class='isi'>Pasang Iklan Anda Disini</p>
      </span>
    </div>
  </div>

Widget ini dibuat oleh Arlina

Arti Lorem Ipsum

      Comment  

Image by Layarhero.com

Apa kalian pernah liat blog demo atau blog dummy menggunakan kata kata lorem ipsum blablabla ?. Apakah kalian sudah tau arti dari kata kata tersebut ? kalau belum coba baca artikel ini


Arti Lorem Ipsum yang Sebenarnya

Dalam dunia graphic design dan publishing, lorem ipsum merupakan teks filler yang biasa digunakan untuk mendemonstrasikan elemen dari sebuah dokumen atau presentasi visual. Lorem Ipsum sendiri diambil dari bahasa latin yang dapat diterjemahkan menjadi "Pain Itself"

Contoh Kalimat Lorem Ipsum

Kalimat yang biasanya digunakan untuk teks Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Penggunaan

Kalimat Lorem Ipsum biasa digunakan sebagai kalimat contoh dalam sebuah dummy, karena dalam suatu contoh desain grafis tidak diperlukan kata kata yang memiliki arti atau dapat dimengerti, jadi agar tidak kesusahan membuat kata kata dalam contoh desain, maka kita menggunakan kalimat Lorem Ipsum.

Sunday 20 December 2015

Nubie Banget Blogger Template

      Comment  


Template ini merupakan template dengan kecepatan loading yang sangat bagus, tidak memerlukan waktu lama untuk me-load tampilan template ini.

Tabel Fitur

Karena banyaknya fitur yang dimiliki template ini, mbak Arlina sudah membuat tabel fitur template ini. berikut selengkapnya

Features Availability
Responsive True
Google Testing Tool Validator True Cek
SEO Friendly True Cek
Mobile Friendly True Cek
Dynamic Heading True
High CTR True
Personal Blog True
Custom Threaded Comment True
2 Column True
Auto Read More with Thumbnail True
Responsive Ad Slot True
Breadcrumbs True
Related Posts with Thumb True
Search Box True
Social Share Button True
Responsive Dropdown Menu True
Social Links Widget True
Smooth Back to Top True
Custom Subscribe Box Widget True
Sitemap Widget True
Shortcodes True
Remove Footer Credit Premium
Without Encryption Code Premium
2 Color Option Premium
Valid Schema.org Premium
Unlimited Page Numbered Premium
Well Documentation True

Template ini tersedia dalam versi gratis dan versi berbayar, kalian dapat memesannya melalui blog Arlina hanya dengan Rp 50000 melalui bank BRI.

Wednesday 2 December 2015

Tips Menulis Artikel dengan Mudah

      16 comments  
Masalah utama seorang blogger newbie seperti saya adalah sulitnya menulis artikel, apalagi artikel yang berkualitas.
Artikel adalah hal terpenting menurut saya dalam penilaian sebuah blog, suatu blog dapat dinilai melalui artikel/konten, selanjutnya design, 2 hal tersebut adalah hal paling mencolok dalam penilaian "sekilas" sebuah blog.
Inilah sedikit Tips Menulis Artikel dengan Mudah.


Image by 199jobs.com

Cari Ide

Ide adalah hal paling penting kalau mau menulis artikel, kalau tidak ada ide, ya artikel tidak bisa dibuat. Contohnya seperti saya yang sudah siap dengan design artikel dan sudah mempersiapkan ilustrasi pada artikel saya, tetapi saat mulai mengetik, saya langsung lupa ingin membuat apa bahkan kadang kadang saya membatalkan niat untuk membuat artikel.

Pikirkan Design

Tampilan artikel sangat berpengaruh pada tingkat kualitas artikel tersebut, walaupun artikel original sekalipun jika deisgnnya jelek pasti penilaian pengunjung juga jelek

Selalu Cek Sebelum Publish

Ini dia yang menurut saya tips paling sederhana, selalu cek tampilan artikel setelah dipublish. Jangan terlalu sering mengotak atik artikel setelah dipublish.

Publish Tepat Waktu

Publish harus tepat waktu ya, jangan ngepublish saat :
  • Tidak ada koneksi Internet
  • Tidak Punya Blog

Sekiakn artikel dari saya, semoga dapat bermanfaat

Friday 27 November 2015

Cara Mengoptimalkan Blog dengan Benar

      2 comments  
Seorang pengelola blog atau bisa disebut blogger harus bisa mengoptimalkan blognya dengan baik, apalagi persaingan semakin sulit karena munculnya blog blog baru seperti blog tiga jalan ini. Inilah cara cara yang mungkin kamu bisa pakai buat mengoptimalkan blogmu.


Segarkan Tampilan Blogmu

banyak cara untuk menyegarkan tampilan blog, berikut adalah caranya
  • Buat tampilan blogmu responsive, responsive merupakan hal wajib untuk para blogger, jaman sekarang hampir semua pengunjung asalnya dari perangkat mobile. makanya kita sebagai blogger (pemula) wajib mengutamakan responsive design.
  • Buat tampilan blogmu se-Simple mungkin, banyak iklan adalah hal paling menjengkelkan dari tampilan blog masa kini, ada iklan banner, iklan popads, iklan floating dan kawan kawannya. sebaiknya minimalisirlah iklan dan banner banner yang buat blog kamu jadi jelek.

Buat Blog Kamu Ngebut

Ngebut ? maksudnya loadingnya yang ngebut, bukan blognya yang ngebut, hehe..
kalau kita mengunjungi blog yang loadingnya lamaaaaaaa, gimana ? kesel kan ? sama kaya para pengunjung blog kita yang dibikin kesel sama loading blog yang lambat, makanya bikin loading blog kamu cepet, dengan cara
  • Minimalisir javascript
  • Kompres Gambar
  • Kompres CSS

Bersainglah di Search Engine

Pasti para pembaca artikel ini sudah paham betul apa itu SEO, sepertinya istilah tersebut sudah sangat kita semua pahami dan sangat sering kita dengar, tapi buat saya cukup menggunakan fitur SEO yang disediakan oleh pembuat template, jujur, saya tidak mengerti tentang SEO makanya saya tidak banyak membahas tentang masalah ini.

Buatlah pengunjung nyaman, bukan hanya sekadar ingin mendapatkan uang

Saturday 21 November 2015

Cara Mengecek Tampilan Blog Responsive

      Comment  
Responsive adalah suatu fitur dari sebuah template yang membuat tampilan template tersebut menjadi fleksibel pada device dekstop dan mobile. Jika kamu ingin mengetahui apakah design templatemu sudah responsive atau belum, maka ikutilah cara berikut.


Cara Pertama

Menggunakan browser Mozilla firefox

#1. Tekan tombol CTRL + Shift + M pada keyboard

#2. Maka akan terbukalah Responsive Test



Cara Kedua

Secara Online

#1. Buka website am i responsive

#2. Copy link blog yang ingin kamu Test pada kolom yang sudah disediakan.