Cara Gampang Membuat Widget Label Blog Warna-Warni

Cara Membuat Widget Label Blog Warna-Warni di Sidebar

SETELAH berbagi tentang Widget Popular Posts Warna Warni dan Cara Mempercantik Widget Label, kali ini RS share kode label blog warna-warni. Penampakannya seperti ilustrasi posting ini.

Sejarah Riyanto Style Nge-BLOG

Riyanto Style

Apa Itu Nge-Blog?

Nge-Blog merupakan kata dasar dari BLOG, persamaan dari menulis artikel. Sebelumnya gue di sini akan menjelaskan dahulu, apakah yang di maksud dengan BLOG. Apakah itu termasuk sejenis Hewan yang menjari / Tumbuhan yang bertaring? 

Jawaban yang tepat ialah, BLOG merupakan singkatan dari Web Log adalah bentuk aplikasi web yang berbentuk tulisan-tulisan yang dimuat sebagai posting pada sebuah halaman web. (kata wikipedia) 

Tujuan RS Nge-BLOG?

Buat saya pribadi, blog merupakan tempat saya untuk ngebacot dan pengganti Buku Harian Pribadi. Perbedaanya BLOG ini bersifat universal semua orang bisa tau, jadi bila orang - orang suka sama tulisan kita dan secara otomatis mereka juga ingin mengenal kita lebih personal lagi. 

Mengapa RS Nge-BLOG?

Bila kita srius di blog, pasti kita dapat menikmati hasilnya di kemudian hari. Tergantung seberapa keras usaha kita untuk mendapatkan hasil. Sebagai contoh: Bisnis Jual Beli, Tulisan Blog Di Bukukan, Iklan, dan redaktur berita.

Jadi, ngapain kita aktif terus - menerus di media sosial hanya untuk mengejar Like dan sensasi dari teman maya kalian, tapi tidak di bayar! Kan mending kita Nge-BLOG.

Sejak Kapan RS Nge-BLOG?

Gue mulai mengenal blog sebenarnya sejak SMP kelas 8, kalau tidak salah sekitar tahun 2014 masih amatir bangetlah pokoknya. masih memakai plartfom mywebblog.com, isinya cuma artikel copy paste lagu yang lagi hitz pada era nya.

Dan saya mulai srius untuk nge-blog sejak 30 / 03 / 2017 di alamat ridhoirkham.blogspot.com, lalu saya ubah menjadi ridhozamroni.blogspot.com. Karena menyesuaikan nama akun media sosial saya lainya, seperti: YouTube, Twitter, Instagram, dan lainya. Dan yang terakhir saya ganti domain menjadi www.ridhozamroni.com

Siapa Inspirasi RS saat Nge-BLOG?

Gue pertama mengenal BLOG terinspirasi dari Radityadika seorang blogger yang sukses dan tulisanyapun juga menginspirasi, karena begitu absurd sekali. Entah itu di buku, blog, maupun saat stand up comeddy. Tetapi setelah blog raditya dika yang beralamat di radityadika.com sudah di hack orang - orang yang lagi cari sensasi.

radityadika.com

Akhirnya guepun berpindah ke blog kevinanggara yang beralamat di kevinanggara.com yang masih aktif hingga sekarang. Karena selain dia absurdnya sama dengan radityadika, latar belakangnya yang seorang pelajarlah yang membuat saya terinspirasi dari dia. Kevin anggara seorang pelajar Absurd.

kevinanggara.com

Lalu setelah lama mengamati blog punya kevin anggara telah puas, ternyata gaya penulisanya tidak cocok dengan gue. Sebab, cenderung anak kota.

Setelah mencari kesana - kesini hingga menembus langit ke 7 dalam khayalan, kini gue menemukan inspirasi sekaligus refrensi gue saat menulis sampai saat ini, yaitu: agus mulyadi yang beralamat di agusmulyadi.web.id

agusmulyadi.web.id

Jangan lihat agus mulyadi dari muka dan giginya itu. Tetapi, lihatlah dari tulisanya yang membuat kita tersenyum sendirian. Mulai dari tulisanya yang ceplas - ceplos dari umpatan bahasa jawanya hingga mengajak kita sebagai pembaca untuk tersenyum.

Tidak hanya kelucuanya saja yang membuat saya menginspirasi, kata katanyapun juga sangat puitis sekali menurut gue. Jadi, dibalik mukanya yang tidak meyakinkan seperti itu. Dia ternyata paket komplit jadi seorang blogger.

Cara Mudah Menghapus Auto Readmore

Cara Menghapus Tulisan Read More di Halaman Depan Blog

TAUTAN TEKS (Text Link) bertukiskan Read more atau Baca Selengkapnya biasanya muncul di halaman depan blog yang menggunakan Auto Readmore.

Banyak blogger, termasuk RS, tidak mau ada tulisan readmore itu.

Alasannya, pembaca sudah paham dan sudah tahu, untuk membaca lengkap postingan, tinggal klik judul tulisan.

Google juga tidak menggunakan link atau teks Readmore di halaman hasil pencariannya (SERP). Jadi, pengunjung sudah paham alias user friendly jika halaman depan blog kita tidak mencantumkan tulisan atau link Read more atau Baca Selengkapnya.

Lagian,  tulisan Readmore hanya memperbanyak link di halaman depan blog, pengaruhi loading blog juga.

Bagaimana cara menghapus atau menghilangkannya?

Cara Menghapus Tulisan Read More di Halaman Depan Blog

1. Klik Theme > Edit HTML
2. Cari (Ctrl+F) kode readmore di dalam template blog Anda, seperti ini:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

atau

<span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span>

atau

<div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Read More</a> </div>

3. Hapus kode tersebut.
4. Save!

Beres. Demikian Cara Menghapus Tulisan Read More di Halaman Depan Blog. Good Luck & Happy Blogging!

Cara Membuat Kotak Berlangganan (Subscription Box) di Sidebar

KOTAK berlangganan ini dipasang CB di sidebar blog. Silakan lirik, sekalian masukkan email Anda untuk mendapatkan update posting langsung via inbox email.

                                                               ( Gambar Kotak Berlangganan )

Kode kotak berlangganan ini diambil dari Template SEO Friendly Pro Adsense yang sudah CB share gratis. So simple and clean nan keren, maka dipasang pula di blog ini. 

Untuk memasang kotak berlangganan simple ini, tentu Anda harus punya Feedburner ID dulu. Daftarkan blog Anda di Feedburner Google dan dapatkan ID-nya.

Menurut para mastah, Subscription Box sangat ramah pengguna (user friendly) sekaligus bernilai seo karena bisa menaikkan trafik atau jumlah pengunjung blog. Secara, setiap update posting, tulisan kita langsung disebar secara otomatis oleh Google kepada email subscriber, aman, dan gratis.

Selain jenis simple, sudah di-share pula tipe kotak berlangganan lainnya. Silakan pilih.

Cara Pasang Kotak Berlangganan Simple di Sidebar Blog

1. Layout > Add a Gadget > Pilih HTML/Javascript
2. Copas kode berikut ini di kolom Content:

<style type="text/css">
.emailsub{
border-bottom: 0px solid #e6e6e6;
padding: 15px 0 0px 0;
float: left;
width: 100%;
font-family: Helvetica, Arial;
}  
.emailsub .emailicon{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5n9khhj08rQafFo6bcA8f3xc88yCjwDFsMYat214jJPE4EY5P89hPYOv5UzLRwU1q_D7kKHCdwjejUbPQTevdznYic0ahvpVJRoDsssdzx1Rv3FCj4zjW_5MxfE2iMaVCHeZTLaUZI2eF/s32/Subscribe%252Bblogger%252Bhero%252Bsubscribe.png) no-repeat 0 2px;
float: left;
padding: 0px 15px 10px 40px;
margin: 0 0 0 5px;
width: 300px;  line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: #333;
}
.emailbutton{
background:#f7f8f9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.emailbutton:hover{
background:#f1f1f1;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
text-decoration:none !important;
}
.email{
clear:both;
width:100%;
margin:10px 0;
}
.emailform{
position:relative;
width:300px;
margin:0 auto;
}
.emailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.emailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;
border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.emailbutton{
padding:8px !important;
}
.emailform, .emailinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}
</style>
<div class="emailsub">
<div class="emailicon">
<p style=" width:240px;
font-size: 11px;
padding:0;
margin:0;
">Receive Quality Responsive Templates Straight in your Inbox   by submitting your Email ID below.</p>
</div>  
<div class="email">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RS', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">
<input type="hidden" value="RS" name="uri" />
<input type="hidden" name="loc" value="en_US" /> <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailinput" /> <input type="submit" class="emailbutton" value="Submit" title='' /></form></div></div>
</div>

3. Ubah Feedburner ID RS dengan Feedburner ID Anda.
4. Save!

Demikian Cara Pasang Kotak Berlangganan Simple di Sidebar Blog.

Tips Mudah Dan Dasar Menjadi Web Designer

Saat ini tempat nomor satu untuk mencari uang adalah Internet. Dengan menjalankan bisnis melalui website

Cara mengcompress atau compress gambar (image)

Cara mengkompres atau compress gambar (image) kadang kala sangat di perlukan untuk kepentingan-

Download template Yang di pake (Riyanto Style)

Demo | More info & Download

Super SEO Killer blogger template

Responsive dan mobile friendly blogger template Check

Super cepat, pageload time cuma 0.7 detik (dibawah satu detik)

Social shared button

Tag heading dinamis

Valid HTML Check

Desain elegan dan user friendly New !!!

Tiga kolom

Navigasi Menu Responsive

StickyNav / Static Menu

Anti Spam

Breadcrumb SEO Friendly

Sudah terdapat Profil author Check New !!!

Related post dengan image thumbnail New !!!

Desain body Style Magazine banget, lebih user friendly New !!!

more...

Kotak Berlangganan pus Link Media Sosial di Sidebar Blog

KOTAK berlangganan (subscription box) adalah form untuk  pembaca memasukkan email mereka agar mendapatkan artikel/posting terbaru langsung di inbox email mereka.

Sangat banyak gaya atau desain tampilan kotak berlangganan untuk blogger, salah satunya yang keren "hitam berwibawa" seperti ini:

Cara Memasangnya

1. Template > Edit HTML

2. Pasang kode berikut ini di atas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

3. Pasang kode berikut ini di atas kode ]]></b:skin> atau </style>

#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

4. Save Template. Simpan template!

5. Klik Layout > Add a Gadget > pilih HTML/JavasCript

6. Masukkan kode berikut ini:

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>

Catatan: 

Ganti # dengan link media sosial Anda dan YOUR-USER-NAME dengan kepunyaan Anda.

7. Save!

Beres.

Demikian Kotak Berlangganan pus Link Media Sosial di Sidebar Blog. Good Luck & Happy Blogging!

Cara Membuat Header Blog Statis (Melayang)

HEADER blog statis, sticky, atau melayang (floating) merupakan salah satu trend desain website 2015, selain top menu statis.

Header & Top Menu statis maksudnya adalah tetap muncul saat blog di-scroll. (Baca: Top 5 Trending Desain Blog 2015).

Setelah berbagi tentang  Cara Membuat Top Menu Statis di Blog, kali ini CB berbagi tentang cara membuat Header Blog statis. 

Demonya bisa dilihat di RS Blogger Lab. Bisa juga lihat situs Yahoo, Okezone, Vivanews, dan banyak lagi.

Cara Membuat Header Blog Melayang (Floating Header):

1. Template > Edit HTML

2. Cari (tekan Ctrl+F) kode #header , .header, atau yang semisalnya (kode elemen header blog).

3. Tambahkan kode CSS berikut ini di bawahnya, di dalam kode pembuka {

position:fixed; 

z-index:200; 

background-color: #fff;

Kode di atas sudah membuat header blog Anda melayang, statis, sticky, alias tetap muncul saat laman blog di-scroll ke bawah. 

4. Cari kode #main atau yang semisalnya (#main-wrapper, #main-content, #content-area, dll), lalu tambahkan kode berikut ini di dalam kode pembua {

margin-top:200px;

Catatan: Angka 200 bisa dikurang atau ditambah, sesuaikan saja, klik dulu "Preview" sebelum di-save!

5. Save Template!

Selamat, kini header blog Anda sudah "trendy", mengikuti perkembangan desain website modern, yang statis, sticky, atau melayang. Lihat DEMO.

CARA & JENIS LAINNYA
Jika header blognya ingin berukuran kecil, mirip Top Menu, bisa juga menjadi header bar tambahan, maka lakukan langkah berikut ini:

1. Template > Edit Html
2. Copy & Paste kode berikut ini sebelum atau dia atas kode </head>

<style type="text/css">
.fixed-header{
 overflow: hidden;
 position: fixed;
 z-index: 999999;
 top: 0px;
 left: 0px;
 right: 0px;
 height: 76px;
 background: #EEE;
}</style>

2. Copy Paste kode beikut ini di atas kode </body>

<div class="fixed-header" >
<center><h1>Type Your Blog Name Here</h1></center>
</div>

3. Save Template!

Jika tidak muncul, hapus kode di atas kode </body> tadi, Save Template!

4. Klik "Layout" > Add a Gadget > Pilih "HTML/Javascript"

5. Copas kode berikut ini ke kolom "Content".

<div class="fixed-header" >
<center><h1>Type Your Blog Name Here</h1></center>
</div>

Jika ingin mengganti huruf dengan logo/gambat, gunakan kode berikut ini:

<div class="fixed-header" >

 <center>

<h1><img src="URL GAMBAR/LOGO" /></h1>

</center> </div>

Demikian Cara Membuat Header Blog Statis, Sticky, alias Melayang sebagaimana trending tampilan header terkini. Good Luck!

Sumber1
Sumber2