A Great Idea For a Blogging Web Site is No Longer Enough

A Great Idea For a Blogging Web Site is No Longer Enough


Because there are so many blogs and web sites about blogs on the internet, it can be tough to distinguish your blogging web site from all of the others. Whether you are starting up a new web site aimed at bloggers or whether you are looking to make your existing blogging site more distinctive, the key to building and maintaining a site that will capture the interest and attention of the blogging community is finding your niche. If you can fill a unique need in a way that no other web site does, you'll be able to build a lasting readership among web surfers. Once you have discovered a niche, you will still have a lot to do, but finding your place in the blogosphere is the place to begin. 


Every great blogging web site starts with a great idea, and you can't build a successful site that will last without one. There are many great sites aimed at today's bloggers, and competition for the attention of this growing demographic is fierce. To make your blogging web site stand out from the pack, you will need to offer something that no other site is currently offering, or you will need to do the same thing that an already popular site does but in a more impressive or valuable way. 


One way to discover an ideal model for your blogging web site is to look at the sites that have successfully captured a blogging audience already to determine if you can appropriate some of their strategies to help realize your vision. Of course, you will also need to add a unique flair to your project in order to stand apart from your competition. Many people agree that the web sites that do the best in today's market are the sites that have the most personality. The fiercely individual surfers who are bloggers are a demographic that responds especially strongly to personality, so consider how you can give your site a unique and attractive feeling by lending your own voice and sensibility to your site's design and content. 


Once you have a great idea for your site, have pinpointed a special niche that you are well equipped to fill, and have infused the site with personality, the next step is figuring out how to get the word out to bloggers. 


In the long run, a great idea just isn't enough to propel your blogging web site to success. You will need to draft a smart and realistic marketing plan in order to draw readers to your site. Once you hook a blogger, your great content will keep them coming back, but it is vital to get that first glance or your site won't have a chance to shine. 


Adsense is for Everyone

Adsense is for Everyone


When Google's AdSense appeared, there were a lot of people who doubted Google's idea would be marketable and actually generate any profits. Yet as we stand here today it's probably the most well known pay per click venture in the world.


Yes, all those nay sayers ended up eating their own words in the end. And that is because the folks at Google never go and do something without assessing whether or not it will be profitable, or exactly how profitable it is.


But of course, as you might very well know, AdSense isn't just profitable for Google. It's also profitable for the people who advertise via AdWords and very profitable for publishers who use it to make earnings which are sometimes just enormous.


So one must ask himself why this is such a good deal for everybody. And the question in itself is very justified because you hardly ever come across something that's profitable for everyone in the chain. So why would AdSense be any different.


Well, AdSense is where it stands today, giving benefits for everybody in the game because it exploits a gap in the Internet's advertising model.


You see, the Internet is a very interactive environment, and its interactions come from the people who are browsing. They choose whether or not to follow a certain link and the term "navigating" is probably the most precise one at describing this situation.


So AdSense is great because it links together buyers and sellers. Yes, you have to hand it out to Google for a brilliant idea. They know there are people out there that want to buy stuff and people who want to sell them what they're interested in. And Google AdSense helps members of the two categories find each other.


It works for the visitors, because the model is very transparent. You don't see a huge graphic banner which tries to lure you into buying something. You just see a few words. And if you like what you see you can just click it. It works because visitors don't have that feeling of someone trying to lure them into spending money. Ironically, however, they're wrong.


It works for the AdWords advertisers because their ads go everywhere. Not only will they find themselves listed in Google's search which gets gazillions of hits per day, up front without working as much for SEO and waiting so much.


Their ads can reach any website that deals with anything similar to what they're trying to sell. Now you must realize they could never pull of such great advertising by themselves. And that brings us to the thing that makes Google's AdSense a publisher's best friend.


It comes from the fact that the ads are contextual, that they somehow related to the keywords you deal with on your page. Because people or on your site, which deals with a certain topic, you already know they're interested in that topic. 


But, hey, wait a minute, Google knows some companies which want to sell your visitors something related to their topic. Google wants your visitors, you want Google's advertisers and the visitors just want to buy stuff. And that is the essence of what makes AdSense a great deal for everybody.


This is by far the most profitable hook-up deal you're ever going to see anywhere on the Internet.


So you have to appreciate Google for realizing a killer deal. You have to appreciate how well thought out, yet simple this scheme really is. Sure, in practice it has a few quirks but those are minor and, up to this point everyone seems to be enjoying Google's AdSense.


Adsense and the Surfer

Adsense and the Surfer


AdSense is an easy program to grasp: it's a great form of an advertising bringing a lot of benefits to every person in the chain. And of course, seeing the results it can have on a business (and a publisher) people encourage this form of publicity. 


For the browsing audience this is probably the most straightforward model available, because they can be directed to a lot of new sites they wouldn't have otherwise found. Needless to say, if you have an AdSense banner on your site, and a large number of visitors you'll know it offers a great financial benefit. 


But why does it work for the people clicking the links, as opposed to a standard approach?


It is aided by today's society. With bloggers and information based articles on the internet, people may be encouraged to complete purchases, which adsense can provide links to relevant suppliers whilst also benefiting the publisher.


And the good thing about this is that it works for site visitors as well. In fact Google realized that by pleasing the people who are looking for something, and directing them to what they need faster, everybody wins.


 It is because of this that a lot of websites promote through AdSense in both content and search. They do it because they ultimately learned that it works for everyone. 


If we look in the past, we can realize that this kind of publicity has a great impact over the people, especially in the last few years. When we enter on a web site and we see a graphical banner, our first idea is to cancel it out of our mind, because it's of no concern to us.


That's why traditional banner advertising is wrong. It's precisely because people are becoming savvy that they don’t look at a flashy banner because they think they'll be losing their time with it. 


We've gotten accustomed to banners that don't interest us. And we're accustomed to them having nice graphics. So we naturally associate the two things and think that a banner with nice graphics has nothing to tell us.


But we might look at a text-ad because we've grown accustomed to them being targeted at what we're looking for. Basically these advertisements have marketed themselves into being looked at by any visitor.


This is a typical "no fluff, just stuff" situation. And in the end it means the visitors will see what they're interested in, not some random cool graphics you throw at them.


As stated above, site visitors adopt this advertising mechanism, because it is efficient in leading them to pages of interest and can offer ton of things they really want to see. Someone coming across an article on adsense was probably looking for shoes or doing research on shoes when they came across the article. 


And most importantly for everyone, including visitors, this scheme can only improve as the process gets further refined to make ads more relevant to what you're looking for, not just a couple of keywords on a site.


Nowadays, it is because of AdSense that Internet surfers are looking after more interesting related things from banners, and the companies behind the site (Google and the advertiser) need to have better ideas to display, as expectations have increased a great deal. 


So could "Do no evil" actually work in today's cut throat competitive marketplace? Well, as you can see it can and it does. And you, as a visitor are the one who gets to enjoy this the most. Advertising becomes less of a burden and more of a benefit, and is still a benefit you can choose to ignore.


Less obtrusive banners; banners that you're actually likely to be interested in and click means you'll be less annoyed by surfing the web and feel like you as a visitor being offered a relevant service.


Although some may feel reluctant to read articles that are there purely to compel consumers, undoubtedly without this consideration they are useful. Ultimately the adverts mean that you don’t have to go back to your homepage every time you are compelled to complete a purchase.


Adsense Alternatives 2

Adsense Alternatives 2


Bidvertiser (http://www.bidvertiser.com/)

Like AdSense, Bidvertiser displays text ads in your page. But the difference lies in the fact that advertisers bid over your advertising space, ensuring you earn as much revenue as you possibly can. This also means that bids will increase over time, earning you even more cash. You also get a great way to customize your ads with a very easy to use tool and detailed reports on your site's status.


Quigo AdSonar (http://www.quigo.com/adsonarpublishers.htm)

Quigo AdSonar achieves relevancy by placing a filter according to your site's categories. It also offers you on-line reports of your site's status and the possibility to add your own custom ads replacing ads that don't gain you any revenue. The setup is very simple, in a similar fashion to AdSense's and quite customizable as well.


Vibrant Media IntelliTXT (http://www.intellitxt.com/site/web_01a.html)

Vibrant Media IntelliTXT offers user-activated ads, highlighting certain words within the content of the page and presenting relevant ads when a user hovers his mouse over them. It uses a pay-for-performance pricing scheme and can easily be used along with other advertising methods, because it is unobtrusive. It places you in full control, allowing you to easily integrate it within your site with some simple JavaScript.


Nixie (http://www.nixxie.com/display.php?section=Partners)

Nixie claims to hold a technology that can read and understand your site, enabling it to display the most relevant content to your site. Besides text ads, Nixie also features price comparison listings as well as live auction advertising. It's very easy to implement and has a good payment policy as well.


MIVA AdRevenue Xpress (http://www.miva.com/us/content/partners/arx.asp)

MIVA AdRevenue Xpress is targeted towards small and mid-sized publishers. It implements Search Box functionality and also features things like a Category Directory as well as the handling of 404 error pages. It can be integrated with your page using a simple on-line wizard.


Fastclick (http://www.fastclick.com/publish.html)

Fastclick offers you an impressive 65 percent of what it makes from a click on your website. Payments are done monthly, via PayPal or through checks. The ads can be formatted as you wish, and Fastclick even offers a free support serice for its members and no fees are required to register with the service. 


contextWeb ContextAd (http://www.contextweb.com/Corporate/publisher/publisher.shtml)

ContextAd offers the possibility of contextual ads for dynamic pages, meaning ads will change as soon as your page does. It's very easy to use and free to sing up for and offers a transparent payment policy. The ads are fully customizable and real-time reports are available 24/7. 


AdBrite (http://www.adbrite.com/)

AdBrite offers publishers the possibility of integrating text ads in their pages. These are done on your own rates, with the websites you approve by hand so it bares some similarities with a classic advertising scheme. You also have the option of adding a "Your Add Here" button that buyers can immediately click to ad space on your page. It can also be used in conjunction with Google AdSense, maximizing your CTR and offering advertisers the possibility of showing their links in your Google AdSense space. You have full control over the look and feel of your adds and finally, you get an incredible 75% of what the advertiser pays for on every click.


So, as you can see there are many offers for this kind of advertising, and many hybrids based on AdSense like advertising. Also, a lot of services can work together with AdSense to earn you an even greater amount of revenue for your ad space.


Adsense Alternatives 1

Adsense Alternatives 1


Many people have started using Google's AdSense program, but there are some who find it a bit too uncertain or simply not suiting their own requirements from an ad program.


But thankfully for such people, there are many alternatives to AdSense which attempt to alleviate some of its shortcomings. Here is a list of the most noteworthy ones from the lot with a description concerning each one.

Cara Memasang Widget Newsletter di Blogger

Cara Memasang Widget Newsletter di Blogger

 


Tips Blogger dari Mas Jay kali ini adalah Cara Memasang Widget Newsletter di Blogger. Tutorial ini saya buat atas permintaan sobat blogger yang ingin memasang Subscription Box di blognya.



Sebetulnya bagi yang sudah faham dengan coding blog mungkin tidak akan kesulitan untuk mencari kode dalam suatu halaman blog, karena semua kode yang diinginkan akan sangat mudah sekali disalin lewat Inspect Elements atau Page Source dari halaman blog. Namun sebagai manusia yang memiliki etika, meminta izin adalah hal yang terbaik.


Langsung saja, di sini sobat hanya perlu mengikuti langkah-langkah sederhana berikut ini.


Cara Memasang Widget Newsletter di Blogger


Pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian cari dan tambahkan kode di bawah ini sebelum </head>


<style>
/* Subscribe Box */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}input,select,textarea{width:100%}#subscribe-box p{font-size:14px;color:#767676;margin:0 0 15px;padding:0;line-height:normal}#subscribe-box .emailfield{position:relative;margin:auto;z-index:1}#subscribe-box .emailfield input{background:rgba(255,255,255,.9);padding:13px 20px;color:#aaa;border:1px solid rgba(0,0,0,0.05);font-size:14px;margin-bottom:16px;border-radius:99em}#subscribe-box .emailfield input:focus{color:#222;outline:none;border-color:rgba(0,0,0,0.05);box-shadow:inset 0 0 0 3px rgba(0,0,0,0.05)}#subscribe-box .emailfield .submitbutton{display:block;position:relative;overflow:hidden;background:rgba(255,255,255,.25);color:#fff;width:100%;font-size:15px;font-weight:bold;border:0;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.13);transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background:rgba(255,255,255,.35);color:#fff;box-shadow:0 3px 3px rgba(0,0,0,0.1), 0 3px 4px rgba(0,0,0,0.13)}#subscribe-box .emailfield input:focus.submitbutton{color:#fff}#subscribe-box .emailfield form{position:relative}#subscribe-box .emailfield .submitbuttonlabel{position:absolute;top:3px;right:8px;display:inline;padding:8px 12.5px 8px 20px;cursor:pointer;font-size:13px}#subscribe-box .emailfield .submitbuttonlabel svg{fill:#767676;width:22px;height:22px;vertical-align:middle;transition:all .3s}#subscribe-box .emailfield .submitbuttonlabel svg:hover,#subscribe-box .emailfield .submitbuttonlabel svg:focus{fill:#568af5}#HTML98{position:relative;overflow:hidden;padding:20px;border:1px solid #fff}#HTML98:after{content:&#39;&#39;;display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-repeat:no-repeat;border-radius:120px 0 0;transition:opacity .3s;opacity:1}#HTML98:before{content:&#39;&#39;;display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(230deg,#ff4169,#8b41f6);background-repeat:no-repeat;border-radius:120px 0 0;transition:opacity .3s;opacity:1}#HTML98:hover:after{opacity:0}#HTML98:hover:before{opacity:1}#HTML98 h2:after,#HTML98 h3:after,#subscribe-box .emailfield input[type=submit]{display:none}
</style>


Kemudian klik tombol Simpan tema.


3. Selanjutnya buka menu Tata Letak > Buat widget Baru HTML/JavaScript > Kemudian tambahkan markup di bawah ini didalamnya.


<div id='subscribe-box'>
<p>Get notifications from this blog</p>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=MasJay&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input required='required' type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email Address&quot;;}' onfocus='if (this.value == &quot;Email Address&quot;) {this.value = &quot;&quot;;}' value='Email Address'/>
<input class="submitbutton" type="submit" id="email-submit" value="Subscribe"/>
<label class="submitbuttonlabel" for="email-submit">
<svg class="icon" viewbox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><g transform="translate(2.000000, 3.000000)"><path d="M14.1972579,8.17124146e-14 C17.3979916,0.00978563072 19.990286,2.62120148 20,5.84554455 L20,5.84554455 L20,7.30693069 L19.99354,7.4036631 C19.9466817,7.75161611 19.6506049,8.01980198 19.2923485,8.01980198 L19.2923485,8.01980198 L19.2835029,8.0019802 L19.1721336,7.99309967 C19.0257158,7.96959451 18.889286,7.90013647 18.7831177,7.79318503 C18.6504073,7.65949573 18.5758514,7.47817413 18.5758514,7.28910891 L18.5758514,7.28910891 L18.5758514,5.84554455 C18.5518871,3.41954659 16.6054921,1.45879454 14.1972579,1.43465347 L14.1972579,1.43465347 L5.80274215,1.43465347 C3.39450789,1.45879454 1.44811291,3.41954659 1.42414861,5.84554455 L1.42414861,5.84554455 L1.42414861,12.1544554 C1.44811291,14.5804534 3.39450789,16.5412055 5.80274215,16.5653465 L5.80274215,16.5653465 L14.1972579,16.5653465 C16.6054921,16.5412055 18.5518871,14.5804534 18.5758514,12.1544554 C18.6163388,11.7890822 18.922975,11.5127474 19.2879257,11.5127474 C19.6528764,11.5127474 19.9595126,11.7890822 20,12.1544554 C19.990286,15.3787985 17.3979916,17.9902144 14.1972579,18 L14.1972579,18 L5.80274215,18 C2.599996,17.995093 0.00487110525,15.3808258 -1.42108547e-14,12.1544554 L-1.42108547e-14,12.1544554 L-1.42108547e-14,5.84554455 C-1.42108547e-14,2.61713944 2.59797615,8.17124146e-14 5.80274215,8.17124146e-14 L5.80274215,8.17124146e-14 Z M4.29443312,5.38692655 C4.48070099,5.36682207 4.6671823,5.42289927 4.81203008,5.54257426 L4.81203008,5.54257426 L8.96948253,8.85742574 C9.48880627,9.2678976 10.2192875,9.2678976 10.7386112,8.85742574 L10.7386112,8.85742574 L14.8518355,5.54257426 L14.8606811,5.54257426 L14.9473987,5.48291804 C15.2462388,5.30808809 15.6344967,5.37260085 15.8602388,5.64950495 C15.9785304,5.79800076 16.0329385,5.98799536 16.0113373,6.17714498 C15.9897361,6.36629461 15.8939207,6.53887938 15.7452455,6.65643564 L15.7452455,6.65643564 L11.6320212,9.98019802 C10.5861526,10.8280382 9.09540423,10.8280382 8.0495356,9.98019802 L8.0495356,9.98019802 L3.92746572,6.65643564 L3.8513546,6.58355583 C3.61891283,6.32594359 3.59998262,5.92999594 3.821318,5.64950495 C3.93770999,5.50163353 4.10816526,5.40703103 4.29443312,5.38692655 Z"></path></g></svg>
</label>
<input name='uri' type='hidden' value=MasJay/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>
</div>



Ganti semua kode yang ditandai MasJay dengan ID feedburner blog sobat


4. Setelah itu klik tombol Simpan tema dan lihat hasilnya.


Tambahan


Ganti ID widget yang baru dibuat untuk widget Newsletter, misalnya ID widget baru tersebut memiliki ID HTML1 maka ganti ID tersebut dengan HTML98


Dan ini untuk widget Partner di Sidebar, tambahkan kode di bawah ini sebelum </head>


<style>
/* Partner Sidebar */
.sidebar512{max-width:300px;margin:auto;text-align:center;display:block;font-size:0;background-color:#fff}.sidebar12{color:#294db4;width:128px;height:33px;line-height:30px;display:inline-block;border-radius:22px;margin:6px;border:2px solid;transition:all .1s}.sidebar12:hover{background:#294db4;color:#fff;border-color:#294db4;box-shadow:0 2px 0.8rem -0.8rem rgba(0,0,0,0.8),0 0 0 1px rgba(0,0,0,0.05)}.sidebar512 a{color:#294db4;margin:auto;text-align:center;font-size:14px;font-weight:500;padding:5px 16px;border-radius:3px;transition:all .1s}.sidebar12:hover a{color:#fff}
</style>


Tambahkan widget Baru HTML/JavaScript di Tata Letak > Kemudian tambahkan markup di bawah ini didalamnya.


<div class="sidebar512">
<div class="sidebar12 onet"><a href="#" title="Visit the Site" rel="nofollow noopener" target="_blank" class='ripplelink'><span>Your Site</span></a></div>
<div class="sidebar12 onar"><a href="#" title="Visit the Site" rel="nofollow noopener" target="_blank" class='ripplelink'><span>Your Site</span></a></div>
<div class="sidebar12 onet"><a href="#" title="Visit the Site" rel="nofollow noopener" target="_blank" class='ripplelink'><span>Your Site</span></a></div>
<div class="sidebar12 onar"><a href="#" title="Visit the Site" rel="nofollow noopener" target="_blank" class='ripplelink'><span>Your Site</span></a></div>
</div>


Demikian tutorial tentang Cara Memasang Widget Newsletter di Blogger. Semoga bermanfaat dan wassalam.


Cara Menautkan Postingan di Instagram ke Blog

Cara Menautkan Postingan di Instagram ke Blog


Instagram adalah salah satu media sosial paling fenomenal saat. Instagram bisa dikatakan media sosial wajib bagi semua orang terlebih bagi seorang blogger.


Tak lengkap rasanya ngeblog jika tidak melibatkan instagram ke dalam sebuah blog. Nah, kali ini saya akan berbagi tips bagaimana cara memasukkan, menautkan, menyematkan atau istilah lainnya embed foto yang diupload di Instagram ke dalam sebuah postingan seperti ini:


Pada dasarnya Instagram hanyalah sebuah media sosial yang khusus dijalankan pada perangkat smartphone. Namun, Instagram juga dapat dijalankan pada desktop hanya saja tidak dapat mengupload foto dan kita hanya bisa melihat-lihat foto saja. 


Di sisi lain, Instagram yang dijalankan pada smartphone tidak dapat dimantaatkan untuk membagikan foto ke dalam sebuah postingan blog. Memindahkan foto di Instagram ke sebuah postingan hanya dapat dilakukan apabila Instagram dijalankan pada perangkat desktop.


Bagaimana caranya? Sangat mudah, cukup ikuti langkah sederhana berikut;


  1. Pastikan kamu telah memiliki akun instagram. Jika belum, silahkan buat terlebih dahulu.


  2. Login dengan cara masukkan USERNAME (tanpa @) dan PASSWORD akun Instagram kamu kemudian klik MASUK.


  3. Setelah berhasil login, klik icon profil di sudut kanan atas.


  4. Setelah berada di profil akun kamu, Pilih satu foto atau video yang ingin kamu tautkan,


  5. Pada foto atau video yang dipilih akan muncul pop up, perhatikan tiga buah titik pada sudut kanan atas (lihat kotak merah). Klik tiga titik tersebut. 


  6. Setelah mengklik tiga titik tersebut, akan muncul tampilan sebagai berikut. Kemudian klik Sematkan.


  7. Setelah mengklik Sematkan akan muncul jendela baru yang memberikan kode untuk diembed. Pada jendela tersebut akan ada pilihan memasang foto beserta keterangan atau hanya foto saja tanpa keterangan, Jika tidak hilangkan saja tanda ceklistnya kemudian klik tombol Salin Kode Sematkan/ Copy Embed Code.


  8. Setelah mendapatkan kode embed, selanjutnya kita menuju ke entri postingan.


  9. Tentukan dimana posisi foto atau video di Instagram ingin disisipkan. Agar memudahkan ketik DISINI pada entri postingan. Kemudian klik HTML seperti gambar di bawah ini.


  10. Tekan CTRL-F agar mudah menemukan kata DISINI diantara banyaknya kode HTML. Jika sudah, ganti kata DISINI dengan cara pastekan kode yang kita dapat dari Instagram tadi.


  11. Klik Compose, kemudian hasilnya akan terlihat seperti di bawah ini. Hasilnya memang belum terlihat utuh seperti yang diinginkan saat masih dalam pengeditan. Hasil akan terlihat saat postingan telah dipublis atau silahkan klik Pratinjau terlebih dahulu.


  12. Jika semuanya sudah pas, silahkan klik Publish.


Cara ini sebenarnya bisa dikatakan sama seperti kita menautkan video YouTube ke dalam postingan blog dan begitu juga memasang status Facebook atau kicauan Twitter. Intinya bagaimana cara mendapatkan kode embednya saja. Selamat mencoba.


Tambahan:


Jika hasil embed terlalu berada di sebelah kiri postingan atau kamu menginginkan hasil embed berada pada posisi rata tengah, kamu hanya cukup menerapkan kode <center> di awal script dan kode </center> di akhir scriptnya. Namun, jika hasil embed sudah berada di tengah dengan sendirinya, kamu tidak perlu lagi menerapkan kode <center> dan </center> pada script. 


Agar memudahkan, sebelum kamu menerapkan scrip embed ke dalam postingan, pastekan dulu kode embed ke Aplikasi Notepad kemudian tambakan kode <center> di awal script dan </center> di akhir script.


Berikut contoh penerapannya:


<center><blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BhWNcFpnh19/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/BhWNcFpnh19/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> Lihat postingan ini di Instagram</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div></a> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BhWNcFpnh19/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Saya 97% yakin kamu tidak menyukai saya tapi saya 100% yakin tidak peduli.</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Sebuah kiriman dibagikan oleh <a href="https://www.instagram.com/_slamjay/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> 𝚂𝙻𝙰𝙼𝙴𝚃 ジャヤディ</a> (@_slamjay) pada <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-04-09T10:52:58+00:00">9 Apr 2018 jam 3:52 PDT</time></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script></center>

    

Itulah tadi cara menautkan postingan di Instagram ke Blog. Jika punya pertanyaan, kritik, komentar dan saran dapat dituliskan pada kolom komentar yang tersedia di bawah.


Cara Membuat Responsive Flat UI Color Picker di Halaman Blogger

Cara Membuat Responsive Flat UI Color Picker di Halaman Blogger


Postingan berikutnya saya akan berbagi artikel yang berkaitan dengan Tips Blogger yakni Cara Membuat Responsive Flat UI Color Picker di Blogger. Flat UI Color Picker berfungsi untuk mengetahui lebih cepat kode warna pilihan sobat jika tengah memodifikasi template.



Kode Flat UI Color Picker ini sudah responsive, jadi akan menyesuaikan dengan ukuran layar ditambah widget ini hanya menggunakan HTML dan CSS jadi tidak akan mempengaruhi loading blog. Baiklah tanpa panjang lebar silakan ikuti langkah-langkah berikut ini



Responsive Flat UI Color Picker


1. Login ke Blogger > Buat postingan baru atau bisa juga pada postingan baru khusus halaman statis > Kemudian tambahkan kode di bawah ini pada tab HTML post.


<div id="flatujay">
<ul class="flatui">
<li style="background: #5C97BF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #5C97BF</span>
</li>
<li style="background: #4B77BE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4B77BE</span>
</li>
<li style="background: #1F3A93;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1F3A93</span>
</li>
<li style="background: #2574A9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2574A9</span>
</li>
<li style="background: #67809F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #67809F</span>
</li>
<li style="background: #34495E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #34495E</span>
</li>
<li style="background: #3A539B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3A539B</span>
</li>
<li style="background: #1E8BC3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E8BC3</span>
</li>
<li style="background: #6BB9F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #6BB9F0</span>
</li>
<li style="background: #22313F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22313F</span>
</li>
<li style="background: #336E7B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #336E7B</span>
</li>
<li style="background: #19B5FE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #19B5FE</span>
</li>
<li style="background: #89C4F4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #89C4F4</span>
</li>
<li style="background: #2C3E50;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2C3E50</span>
</li>
<li style="background: #3498DB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3498DB</span>
</li>
<li style="background: #22A7F0;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #22A7F0</span>
</li>
<li style="background: #94E0EE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #94E0EE</span>
</li>
<li style="background: #52B3D9;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #52B3D9</span>
</li>
<li style="background: #59ABE3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #59ABE3</span>
</li>
<li style="background: #26A65B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26A65B</span>
</li>
<li style="background: #1E824C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1E824C</span>
</li>
<li style="background: #00B16A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #00B16A</span>
</li>
<li style="background: #2ABB9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ABB9B</span>
</li>
<li style="background: #4DAF7C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #4DAF7C</span>
</li>
<li style="background: #03A678;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #03A678</span>
</li>
<li style="background: #26C281;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #26C281</span>
</li>
<li style="background: #019875;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #019875</span>
</li>
<li style="background: #3FC380;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #3FC380</span>
</li>
<li style="background: #16A085;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #16A085</span>
</li>
<li style="background: #2ECC71;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #2ECC71</span>
</li>
<li style="background: #C5EFF7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5EFF7</span>
</li>
<li style="background: #C8F7C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C8F7C5</span>
</li>
<li style="background: #049372;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #049372</span>
</li>
<li style="background: #36D7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #36D7B7</span>
</li>
<li style="background: #66CC99;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #66CC99</span>
</li>
<li style="background: #1BA39C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BA39C</span>
</li>
<li style="background: #1BBC9B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #1BBC9B</span>
</li>
<li style="background: #65C6BB;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #65C6BB</span>
</li>
<li style="background: #BFBFBF;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BFBFBF</span>
</li>
<li style="background: #ABB7B7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #ABB7B7</span>
</li>
<li style="background: #DADFE1;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #DADFE1</span>
</li>
<li style="background: #95A5A6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #95A5A6</span>
</li>
<li style="background: #C5DCE2;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C5DCE2</span>
</li>
<li style="background: #BDC3C7;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BDC3C7</span>
</li>
<li style="background: #EEEEEE;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EEEEEE</span>
</li>
<li style="background: #D2D7D3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D2D7D3</span>
</li>
<li style="background: #F0E2C5;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F0E2C5</span>
</li>
<li style="background: #EB9532;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB9532</span>
</li>
<li style="background: #E67E22;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E67E22</span>
</li>
<li style="background: #F27935;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F27935</span>
</li>
<li style="background: #F9BF3B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9BF3B</span>
</li>
<li style="background: #F7CA18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F7CA18</span>
</li>
<li style="background: #F9690E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F9690E</span>
</li>
<li style="background: #F39C12;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F39C12</span>
</li>
<li style="background: #D35400;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D35400</span>
</li>
<li style="background: #F4D03F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4D03F</span>
</li>
<li style="background: #F5AB35;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F5AB35</span>
</li>
<li style="background: #EB974E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EB974E</span>
</li>
<li style="background: #F2784B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F2784B</span>
</li>
<li style="background: #F4B350;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F4B350</span>
</li>
<li style="background: #E87E04;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E87E04</span>
</li>
<li style="background: #E74C3C;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E74C3C</span>
</li>
<li style="background: #CF000F;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #CF000F</span>
</li>
<li style="background: #C0392B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #C0392B</span>
</li>
<li style="background: #D64541;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D64541</span>
</li>
<li style="background: #EF4836;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #EF4836</span>
</li>
<li style="background: #96281B;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #96281B</span>
</li>
<li style="background: #D91E18;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #D91E18</span>
</li>
<li style="background: #E26A6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E26A6A</span>
</li>
<li style="background: #FF0000;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #FF0000</span>
</li>
<li style="background: #F22613;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #F22613</span>
</li>
<li style="background: #E08283;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #E08283</span>
</li>
<li style="background: #9B59B6;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9B59B6</span>
</li>
<li style="background: #8E44AD;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #8E44AD</span>
</li>
<li style="background: #BE90D4;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BE90D4</span>
</li>
<li style="background: #BF55EC;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #BF55EC</span>
</li>
<li style="background: #9A12B3;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #9A12B3</span>
</li>
<li style="background: #913D88;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #913D88</span>
</li>
<li style="background: #722D6A;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #722D6A</span>
</li>
<li style="background: #740A4E;"><span class="kodebesar"><span class="kodekecil">Kode Warna</span> #740A4E</span>
</li>
</ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color by www.jaydzgn.blogspot.com */
#flatujay ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatujay ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatujay ul.flatui li:hover{z-index:4}
#flatujay ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatujay ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatujay ul.flatui li:after{content:'Salin kode warna';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatujay ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatujay ul.flatui li .kodebesar{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatujay ul.flatui li .kodekecil{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatujay ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatujay ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatujay ul.flatui li{width:100%}}
</style>


2. Setelah terpasang kemudian publikasikan post dan lihat sendiri hasilnya.


Untuk melihat demo tampilannya, silakan buka link di bawah ini



Demo responsive



Demikian tutorial Membuat Responsive Flat UI Color Picker, selamat mencoba.

Cara Memasang Link Hidup Pada Kolom Komentar

Cara Memasang Link Hidup Pada Kolom Komentar



Sobat blogger yang hobi mencari backlink khususnya lewat kolom komentar pasti tidak asing lagi dengan cara ini, yaitu suatu cara berkomentar di blog lain dengan menyisipkan link hidup dengan harapan mendapat backlink dari Sobat yang ikut berkomentar maupun pemilik blog.


Pada kesempatan kali ini saya akan mengulas bagaimana cara memasang link hidup atau link aktif pada kolom komentar blog. Namun tidak ada salahnya untuk dicoba kan?



Cara Memasang Link Hidup Pada Komentar


Harap diingat sebelum menerapkan cara ini ada baiknya Sobat membaca aturan berkomentar pada blog yang ingin Sobat komentari, karena tidak semua pemilik blog memberi kebebasan dalam berkomentar khususnya menyematkan link hidup di dalamnya, tentunya dengan berbagai alasan dan kita harus bisa menghormati dan menghargai hak yang bersangkutan sebagai pemilik blog.


Nah jika tidak ada masalah dan sobat blogger ingin membuat link hidup pada komentar sebagai sarana promosi maupun mendapatkan backlink caranya sangat sederhana :


<a href="https://www.jaydzgn.blogspot.com/">Komentar Sobat Disini</a>


Sobat tinggal mengganti tulisan yang ditandai dengan URL dan teks komentar yang ingin Sobat tampilkan pada kolom komentar. Harap diperhatikan saat berkomentar harus sesuai dengan artikel yang sedang di bahas, karena jika terlalu menyimpang dan berlebihan dalam promosi biasanya admin maupun pemilik blog tidak segan menghapus komentar Sobat.