Posts

Showing posts from December, 2012

Dropdown menu có search

Image
Menu giúp cho bạn trình bày các chương mục trong blog được gọn gàng và khoa học hơn. Lần trước Karl đã từng giới thiệu cho các bạn một mẫu Menu Drop. Hôm nay Karl tiếp tục giới thiệu cho các bạn thêm một mẫu Menu Drop khác.

The Sunrise Drop Down Menu

Image
Đặc điểm: The Sunrise Drop Down Menu không sử dụng các file javarscrip do vậy các bạn có thể yên tâm về tốc độ của nó. ☼ Cách tiến hành:    1- Đăng nhập vào Blog    2- Vào thiết kế    3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)    4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> . @charset "utf-8"; /* CSS Document */ body{ padding: 25px; } /* ----Navigation Structure -------- */ .nav-container-outer{ background: #990000; padding: 0px; height: 74px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBvBHHyWKFX5vh5sxL0546b1vhFuCH9os095rE9J4KXb8uoE01L2VvKa9OrE9HQqsg0Ev6QPE52WJeyeNXDf1XPufsd28opjvYFW5HUZ-n32hKInCni_6VUg0NGoh4Q3GQwpIY53MY0w/s512/nav-bg-vinacer.jpg); } .float-left{ float: left; } .float-right{ float: right; } .nav-container .divider{ display:block; font-size:1px; border-width:0px; border-style:solid; } .nav-container .divider-vert{ float:left; width:0px; display: none; } .nav-c...

Menu dọc xổ xuống dạng thư mục

Image
Hôm nay Karl sẽ giới thiệu cho các bạn một mẫu menu dọc đẹo dành cho việc thiết kế blog. Menu này có đặc điểm trượt từ trên xuống, hết hợp hiệu ứng hover khi dê chuột. Điểm khác biệt là menu sử dụng 2 button để ẩn hiện các sub menu.  Và đây là hình demo: ☼  Cách tiến hành:    1-  Đăng nhập  vào Blog    2- Vào  thiết kế (Mẫu)    3- Chọn  Chỉnh sửa HTML 4- Dán đoạn code sau vào trước thẻ đóng    ]]></b:skin>. .button {border:1px solid #055;border-radius:3px;box-shadow:0 1px rgba(255,255,255,0.3) inset;background:#41A317;color:#FFFF00 !important;text-decoration:none !important} a.button:hover,.submit.button:hover{border:1px solid #222;background:#810541} .button.medium{padding:5px 10px;font-size:12px} .button.big{padding:10px 20px;font-size:14px} div.sdmenu { width: 200px; font-family: Arial, sans-serif; font-size: 12px; padding-bottom: 10px; background: url( https://blogger.googleusercontent.com/img/b/R29v...

Tạo menu đẹp và load nhanh cho Blogger

Image
Nếu trước đây các bạn phải than phiền về  tốc độ  blog bị giảm đi ít nhiều khi áp dụng các thanh menu xổ dọc nhiều cấp kết hợp JQuery của blog khác. Thì hôm nay mẫu menu VinaCer Blog giới thiệu này sẽ đem đến cho các bạn một trải nghiệm tuyệt vời với  CSS3 . Các bạn có thể xem hình demo ở dưới ☼ Cách tiến hành: 1- Đăng nhập  (login) vào Blog 2-  Vào  Mẫu  (Template) 3-  Chọn  Chỉnh sử HTML  (Edit HTML) (Không cần mở rộng tiện ích mẫu) 4- Thêm đoạn code sau vào trước thẻ ]]></b:skin>. #MBT-Container { font: normal 1em Arial, Helvetica, sans-serif; width:100%; float:left; } a { color: #333; } #nav { margin: 0; padding: 7px 6px 0; background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPWLFtQch8QMyDl7dhfSYvTsxEWnITx6zMmBEfdRN8-IAinaTIS-ki16_X0_GbqEDQ3GsG-6-5R1HAqPFeyHRC8uHFNZQSkzS7XwCUaDC8x5WYmILGTzmAf6fekyANd7cZUc3jUp9edQ/s512/vinacer-blogspot.png) repeat-x 0 -110px; line-...

Săn tìm backlink với Google Alerts

Image
Xây dựng backlinks là một việc tất yếu của Internet Marketing, nhưng đặt backlink ở đâu để có hiệu quả vì không phải back link lớn là hiệu quả vì mục đích của bạn là những click để dẫn đên website của mình. Vì vậy bạn phải đi tìm kiếm các Blog/website có liên quan đến nội dung trên site để sang chơi “đặt quan hệ backlink”. Công việc tìm kiếm này nhàm chán với hầu hết các webmasters và lại phải tiến hành sao cho tiết kiệm thời gian, tránh lan man. Đây là một chương trình miễn phí do Google điều hành cho phép bạn cập nhật bất kỳ chủ đề (topic) nào đang có trên Website. Bạn lựa từ khóa (keywords) hay “urls” và Google sẽ thông báo cho bạn qua email các link bài viết bất cứ khi nào từ khóa đó có mặt trên web. trong các topic chứa topic bạn đã chọn có mặt tại mọi nơi trên Web. Đó là một cách rất tuyệt để liên tục được thông báo về domain hay tên của bạn. Cũng thực sự hoàn hảo để cập nhật thông tin mới nhất về vị trí trong thị trường của bạn. Đây cũng là một cách hay để tìm hiểu xem người khá...

Chèn biểu tượng cảm xúc vào nhận xét dạng input

Image
Chắc hẳn bạn cũng biết rằng hệ thống nhận xét của Blogspot có phần khung viết nhận xét (Comments Form and Editor) dưới dạng nhúng từ bên ngoài qua thẻ iframe do đó chúng ta không thể chèn biểu tượng cảm xúc (Emoticons) vào nhận xét bằng phương pháp input như Wordpress. Để giải quyết vấn đề này, chỉ có một cách là tạo khung nhận xét riêng theo kiểu Wordpress cho Blogspot. Tuy nhiên tạm thời mình chưa tìm ra giải pháp vì thế có thể áp dụng một thủ thuật trung gian, tức là tạo tính năng chèn biểu tượng cảm xúc trực tiếp vào một vùng text (textarea) kết hợp nút chọn để người dùng copy mã nhập rồi dán vào khung viết nhận xét, ngoài ra còn có chức năng chèn các thẻ như <b>, <i>, <em>, <a>. Hy vọng đây sẽ là bàn đạp để chúng ta tiến thêm một bước trong công cuộc hiện đại hóa hệ thống nhận xét của Blogspot so với cách mà các blog khác hướng dẫn. Thủ thuật này đã kết hợp thủ thuật tạo bộ biểu tượng cảm xúc cho nhận xét vì thế nếu áp dụng thủ thuật này thì bạn...